/* ---------------------Definición de colores personalizados ---------------------- */

:root {

  --color_amarillo: #ffffe6;
  --color_beige_02: #e3e3d9;
  --color_beige_01: #f7f7f5;
  --color_blanco: #ffffff;
  --color_01: #f1f4f5;
  --color_02: #dae1e5;
  --color_03: #c3ccd5;
  --color_04: #adbdca;
  --color_05: #98a9bb;
  --color_06: #7e94ac;
  --color_07: #6f8194;
  --color_08: #5b6b7c;
  --color_09: #3e5062;
  --color_10: #203143;
  --color_11: #182839;
  --color_negro: #000000;
  --color_detalle_01: rgb(228, 196, 77);
  --color_detalle_02: #6b8a77;
  --color_detalle_03: #42747c;
}

/* --------------------  Estilos base de la página ----------------------- */

* {font-family: 'Montserrat', sans-serif;}
body {color: var(--color_11);}
html {scroll-behavior: smooth; scroll-padding-top: 80px;}

/* --------------------------- ESTILOS TEXTO -------------------------------- */



h1 {font-family: "aw-conqueror-didot", serif; font-size: 3rem; font-weight: 400; opacity: 0; transform: translateY(50px); transition: all 1.2s ease-out;}
h1.animate {opacity: 1; transform: translateY(0);}
h2 {font-family: "aw-conqueror-didot", serif; font-size: 1.8rem; font-weight: 400;}
h3 {font-family: "aw-conqueror-didot", serif; font-size: 1.4rem; font-weight: 400;}
p {font-size: 1.2rem; font-weight: 400; line-height: 1.6;}

.logo-portada-animado.animate {opacity: 1 !important; transform: scale(1) !important;}

.titulo-seccion {text-align: center; font-size: 1.3rem; font-weight: 400; color: var(--color_09); font-family: 'Montserrat', sans-serif; padding-top: 1vh; padding-bottom: 1vh;}

label {color: var(--color_09); font-size: 1.05rem; font-weight: 400;}

select {color: var(--color_11); background-color: var(--color_amarillo); font-size: 0.9rem; padding: 2px 8px; padding-right: 30px; border: 1px solid var(--color_08); border-radius: 0px; width: 100%; cursor: pointer; transition: border-color 0.3s ease; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23182839' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center;}
select:focus {border-color: var(--color_10); outline: none; background-color: var(--color_amarillo);}
select:disabled {background-color: var(--color_02); color: var(--color_07); cursor: not-allowed; opacity: 0.7;}
option {border-bottom: 1px solid var(--color_08); padding: 4px 8px;}

input {color: var(--color_11); background-color: var(--color_amarillo); font-size: 0.9rem; padding: 2px 8px; border: 1px solid var(--color_08); border-radius: 0px; width: 100%; transition: border-color 0.3s ease;}
input:focus {border-color: var(--color_10); outline: none; background-color: var(--color_amarillo);}
input:disabled {background-color: var(--color_02); color: var(--color_07); cursor: not-allowed; opacity: 0.7;}

/* ----------------------------------Estilos para enlace de email (subraya al pasar el ratón por encima) ----------------------------------------------------*/

.email-link {color: inherit; text-decoration: none;}
.email-link:hover {color: inherit; text-decoration: underline;}

/*------------------------------------- Estilos para link pdf descarga--------------------------------- */

.link-pdf {font-size: 0.85rem; color: var(--color_08); font-style: italic; cursor: pointer; transition: text-decoration 0.3s ease;}
.link-pdf:hover {text-decoration: underline;}

/*------------------------------------- Estilos para cuadrícula 2x2--------------------------------- */

.cuadricula-2x2 {display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 40px; max-width: 90%; margin: 0 auto; padding-bottom: 20px;}
.cuadrante-2x2 {padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 180px;}


/* --------------------------------------Estilos para el menú / cabecera --------------------------------------------------- */

.menu {position: fixed; top: 0; width: 100%; height: 7vh; background-color: var(--color_10); display: flex; z-index: 1000; align-items: center; justify-content: space-between; margin: 0; padding: 0; border: none; font-family: 'Montserrat', sans-serif;}
.menu-item {color: var(--color_blanco); text-decoration: none; padding: 15px 20px; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all 0.3s ease; height: 100%; cursor: pointer; font-family: 'Montserrat', sans-serif;}
.menu-item.active {font-weight: bold;}
.menu-item:hover {text-decoration: underline; font-weight: bold;}
.logo-container {display: flex; align-items: center; justify-content: flex-start; padding-left: 3%;}

.menu-logo {height: 5vh; width: auto; max-width: 100%; object-fit: contain; margin: 15px;}
.menu-logo-mobile {display: none;}
.menu-texto-centro {position: absolute; left: 50%; transform: translateX(-50%); text-align: center; color: var(--color_blanco); font-size: 18px; font-family: 'Montserrat', sans-serif; z-index: 1;}
.menu-botones-derecha {display: flex; align-items: center; padding-right: 15px; z-index: 2;}
.menu-icon {vertical-align: middle; margin-right: 4px;}
.menu-spacer {height: 5vh;}
.menu-item-borde {border: 0.2vh solid var(--color_blanco); border-radius: 0px; padding: 6px 15px; height: auto; max-height: 4vh; box-sizing: border-box;}

/* Icono de hamburguesa - oculto por defecto */

.hamburger {display: none; flex-direction: column; cursor: pointer; padding: 15px;}
.hamburger span {width: 25px; height: 3px; background-color: var(--color_blanco); margin: 3px 0;}

/* ----------------------------------------Menú desplegable móvil-------------------------------------------- */

.mobile-menu {display: none; position: absolute; top: 100%; width: 100%; background-color: var(--color_10); flex-direction: column; box-shadow: 0 2px 5px rgba(0,0,0,0.1); z-index: 1001;}
.mobile-menu.active {display: flex;}
.mobile-menu a {color: var(--color_blanco); text-decoration: none; padding: 15px 20px; border-bottom: 1px solid var(--color_11); transition: background-color 0.3s ease;}
.mobile-menu a:hover {background-color: var(--color_11); font-weight: bold;}

/* Media query para móvil - menú */

@media (max-width: 1100px) {
  .hamburger {display: flex !important; flex-direction: column !important; margin-left: auto; padding: 15px 20px;}
  .menu-desktop-nav {display: none !important;}
  .menu-area-privada {display: none !important;}
  .menu > div:not(.logo-container):not(.hamburger):not(.mobile-menu) {display: none !important;}
  .logo-container {width: auto; flex: 0 0 auto; justify-content: flex-start;}
  .logo-container[style*="visibility: hidden"] {display: none !important;}
  .logo-container img {height: 40px !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; margin: 10px !important;}
  .menu-logo-desktop {display: none !important;}
  .menu-logo-mobile {display: block !important;}
}

/* ---------------------------------------------------FOOTER -------------------------------------- */

.franja-footer {background-color: var(--color_11); padding: 60px 0 50px 0; margin-top: 0;}
.footer-container {max-width: 80%; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 80px; align-items: start;}
.footer-column {color: var(--color_blanco);}
.footer-logo-img {max-width: 200px; height: auto; filter: brightness(0) invert(1);}
.footer-title {color: var(--color_blanco); font-size: 1.2rem; font-weight: 500; margin-bottom: 20px;}
.footer-links {display: flex; flex-direction: column; gap: 10px;}
.footer-link {color: var(--color_blanco); text-decoration: none; font-size: 0.95rem; transition: color 0.3s ease; cursor: pointer;}
.footer-link:hover {color: var(--color_beige_01); text-decoration: underline;}
.footer-copyright {margin-top: 20px; font-size: 0.85rem; color: var(--color_blanco);}
.footer-contact-item {display: flex; align-items: center; gap: 10px; margin-bottom: 15px; font-size: 0.95rem;}

.footer-contact-item i {width: 18px; text-align: center; color: var(--color_blanco);}
.footer-contact-item .email-link {color: var(--color_blanco); text-decoration: none; transition: text-decoration 0.3s ease;}
.footer-contact-item .email-link:hover {text-decoration: underline;}
.footer-compliance {display: flex; flex-direction: column; align-items: center;}
.footer-compliance-img {max-width: 35%; height: auto;}
.footer-compliance-img:hover {opacity: 1;}

/* --------------------------------------Responsive footer------------------------------------------- */

@media (max-width: 768px) {
  .footer-container {grid-template-columns: 1fr 1fr; gap: 30px; padding: 0 20px;}
  .footer-logo {grid-column: 1 / -1; text-align: center;}
  .footer-compliance {grid-column: 1 / -1; text-align: center; margin-top: 20px;}
  .footer-logo-img {max-width: 100px;}
}

@media (max-width: 480px) {
  .footer-container {grid-template-columns: 1fr; gap: 25px; text-align: center;}
  .footer-contact-item {justify-content: center;}
}

/* Estilo para cabecera del gridAG */
.cabecera-grid {
  color: var(--color_blanco) !important; 
  background-image: none !important;
  border-radius: 0px !important;
}

.cabecera-grid tr, .cabecera-grid td {
  background: var(--color_09) !important;
  background-color: var(--color_09) !important;
  background-image: none !important;
  padding: 0px 4px 0px 4px !important;
}

/*------------------------------------Estilos para franjas desplegables-----------------------------------------------------*/
.franja-desplegable {background-color: var(--color_10); color: var(--color_blanco); padding: 60px 40px; text-align: center; position: relative; display: none;}
.franja-desplegable-close {position: absolute; top: 20px; right: 30px; font-size: 2rem; font-weight: bold; color: var(--color_blanco); cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--color_blanco); border-radius: 50%; transition: all 0.3s ease;}
.franja-desplegable-close:hover {background-color: var(--color_blanco); color: var(--color_10);}
.franja-desplegable h1 {color: var(--color_blanco);}
.franja-desplegable p {color: var(--color_blanco); font-size: 1.3rem; line-height: 1.7; margin: 10px 0;}
.franja-desplegable .franja-2-separator {background-color: var(--color_blanco);}
.conocer-mas {color: var(--color_detalle_01) !important; font-weight: 500 !important; cursor: pointer; text-decoration: underline; transition: all 0.3s ease; margin-top: 0 !important;}
.conocer-mas:hover {color: var(--color_detalle_01) !important; font-weight: 600 !important; opacity: 0.8;}

/* ---------------------------------------Control de visibilidad de enlaces según dispositivo-------------------------------------- */
.conocer-mas-mobile {display: none;}
.franja-desplegable-mobile {display: none !important;}

/* ---------------------------------------------------Responsive para franjas desplegables en móvil-------------------------------------- */
@media (max-width: 768px) {
  .franja-desplegable {padding: 45px 30px;}
  .franja-desplegable-close {top: 15px; right: 20px; font-size: 1.5rem; width: 35px; height: 35px;}
  .franja-desplegable .franja-2-columns {flex-direction: column; text-align: center; padding: 0 !important; margin: 0 auto !important; width: 100%;}
  .franja-desplegable .franja-2-column-1 {flex: none; padding: 0 !important; margin: 0 auto 30px auto !important; text-align: center; width: 100%;}
  .franja-desplegable .franja-2-column-1 h1 {text-align: center !important; padding: 0 !important; width: 100%; font-size: 2.2rem;}
  .franja-desplegable .franja-2-separator {display: none;}
  .franja-desplegable .franja-2-column-2 {flex: none; padding: 0 !important; margin: 0 auto !important; text-align: center; width: 100%;}
  .franja-desplegable .franja-2-column-2 p {text-align: center !important; padding: 0 !important; margin-bottom: 10px !important; font-size: 1.1rem;}
}



/* ---------------------------------------------------Estilos para botones de pop-ups-------------------------------------- */
.popup-button {background-color: var(--color_09); color: var(--color_blanco); border: none; border-radius: 0px; padding: 12px 30px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: background-color 0.3s ease; margin-right: 12px; min-width: 100px;}
.popup-button:hover {background-color: var(--color_10);}
.popup-button-secondary {background-color: var(--color_04); color: var(--color_blanco);}
.popup-button-secondary:hover {background-color: var(--color_05);}

/* ---------------------------------------------------Estilos para pop-ups de mensajes pequeños-------------------------------------- */
.popup-mensaje-content {background-color: var(--color_blanco); border-radius: 0px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); max-width: 850px; min-width: 650px; margin: auto;}
.popup-mensaje-header {background-color: var(--color_10); color: var(--color_blanco); padding: 6px 20px; border-radius: 0px;}
.popup-mensaje-header h2 {margin: 0; font-size: 1.2rem; font-weight: 500; color: var(--color_blanco);}
.popup-mensaje-body {padding: 20px; color: var(--color_11);}
.popup-mensaje-body p {margin: 8px 0; font-size: 1rem; line-height: 1.5;}
.popup-mensaje-body p.w3-large {font-size: 1.05rem; font-weight: 500; color: var(--color_09);}
.popup-mensaje-footer {padding: 15px 20px; background-color: var(--color_01); border-top: 1px solid var(--color_03); display: flex; align-items: center;}


/* -----------------------------Sistema de columnas genérico-------------------------- */
.columns {display: flex; align-items: center; max-width: 90%; margin: 0 auto; min-height: 200px; position: relative; z-index: 1;}

/* Columna completa (portada) */
.col-full {flex: 1; padding: 40px; text-align: center;}

/* Columnas de tamaño específico */
.col-40 {flex: 0 0 40%; padding-right: 5%; text-align: right;}
.col-60 {flex: 0 0 60%; padding-left: 5%; padding-right: 5%; text-align: left;}
.col-40-i {flex: 0 0 40%; padding-right: 5%; padding-left: 5%; text-align: left;}
.col-60-i {flex: 0 0 60%; padding-right: 5%; text-align: right;}
.col-50 {flex: 0 0 50%; padding: 0 5%; text-align: center;}

/* Alineación de texto en columnas 50% */
.col-50.text-right {text-align: right; padding-right: 5%; padding-left: 0;}
.col-50.text-left {text-align: left; padding-left: 5%; padding-right: 5%;}

/* Separador vertical */
.separator-a {width: 2px; height: 200px; background-color: var(--color_10); flex-shrink: 0;}
.separator-b {width: 2px; height: 200px; background-color: var(--color_blanco); flex-shrink: 0;} 

/* Responsive columnas en móvil */
@media (max-width: 768px) {
  .columns {flex-direction: column; width: 100%;}
  .col-full, .col-40, .col-60, .col-50, .col-40-i, .col-60-i {flex: none; width: 100%; padding: 0; text-align: center; margin-bottom: 30px;}
  .col-40-i {order: -1;}
  .col-50.text-right, .col-50.text-left {padding: 0; text-align: center;}
  .col-full {padding: 30px 20px;}
  .separator-a {display: none;}
  .separator-b {display: none;}
}






/* -----------------------------Franja portada -------------------------- */
.portada-h1-responsive.animate {
  transform: scale(1) !important;
}

/* Responsive móvil */
@media (max-width: 768px) {
  .portada-video-responsive { height: auto !important; min-height: 50vh !important; margin-top: 7vh !important; padding-top: 30px !important; }
  .portada-h1-responsive { font-size: 3rem !important; }
  .portada-h2-responsive { font-size: 1.4rem !important; }
  .portada-p-responsive { font-size: 1.1rem !important; }
  .portada-content-responsive { padding: 30px 20px !important; }
}

/* -----------------------------Franjas títulos blancas -------------------------- */
.franja-blanca-izq {background-color: var(--color_blanco); color: var(--color_11); border-top: 12px solid var(--color_detalle_03); padding: 60px 40px;}
.franja-blanca-izq p {font-size: 1.3rem; line-height: 1.7;}

/* Responsive móvil */
@media (max-width: 768px) {
  .franja-blanca-izq {padding: 45px 30px;}
  .franja-blanca-izq h1 {font-size: 2.2rem;}
  .franja-blanca-izq p {font-size: 1.1rem;}
}

/* -----------------------------Franjas títulos azules -------------------------- */
.franja-azul-dcha {background-color: var(--color_11); color: var(--color_blanco); border-top: 12px solid var(--color_detalle_02); padding: 60px 40px;}
.franja-azul-dcha p {font-size: 1.3rem; line-height: 1.7;}

/* Responsive móvil */
@media (max-width: 768px) {
  .franja-azul-dcha {padding: 45px 30px;}
  .franja-azul-dcha h1 {font-size: 2.2rem;}
  .franja-azul-dcha p {font-size: 1.1rem;}
}

/* ------------------------------------Estilos para franjas contenido--------------------------------------- */
.franja-contenido {background-color: var(--color_beige_01); display: flex; min-height: 60vh; flex-direction: column;}
.franja-cont-titulo {text-align: center; padding: 60px 40px 50px 40px; background-color: var(--color_beige_01);}
.franja-cont-titulo h3 {font-size: 1.5rem; font-weight: 500; padding: 15px 30px; border: 2px solid var(--color_detalle_03); display: inline-block; border-radius: 10px;}
.flex-container {display: flex; flex: 1; flex-wrap: wrap;}
.video-fondo {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}

/* ------------------------------------Estilos para franja nosotros --------------------------------------- */
.nosotros-foto {border-radius: 10px;}
.nosotros-foto.animate {opacity: 1 !important; transform: translateY(0) !important;}

@media (max-width: 768px) {
  .flex-container {flex-direction: column !important;}
  .nosotros-col {flex: none !important; padding: 20px 10px 40px !important; align-items: center !important;}
  .nosotros-col-1, .nosotros-col-2 {padding-left: 0 !important; padding-right: 0 !important;}
  .nosotros-foto {width: 80% !important; max-width: 300px !important;}
  .nosotros-texto {text-align: center !important; max-width: 100% !important;}
  .nosotros-iconos {justify-content: center !important; margin: 20px 0 50px !important; gap: 5px !important;}
}

/*----------------------------------------------------- Estilos para franja servicios ------------------------------------- */
.franja-servicios-columna {flex: 1; display: flex; flex-direction: column; align-items: center; padding: 0 20px; text-align: center;}
.franja-servicios-columna h2 {font-size: 1.8rem; margin-bottom: 20px;}
.franja-servicios-columna img {max-width: 90px; max-height: 90px; margin-bottom: 20px; object-fit: contain; opacity: 0; transform: translateY(50px); transition: all 1.2s ease-out;}
.franja-servicios-columna img.animate {opacity: 1; transform: translateY(0);}
.franja-servicios-columna p {font-size: 1rem; margin: 10px 0;}

/*-------------------------------------------Responsive para franja servicios en móvil-------------------------------------- */
@media (max-width: 768px) {
  .flex-container {flex-direction: column;}
  .franja-contenido {min-height: auto;}
  .franja-cont-titulo {padding: 40px 20px 30px 20px;}
  .franja-servicios-columna {padding: 20px 0; margin-bottom: 30px;}
  .franja-servicios-columna p {max-width: 90% !important;}
  .franja-servicios-columna h2 {font-size: 1.5rem;}
  .conocer-mas-desktop {display: none;}
  .conocer-mas-mobile {display: block !important;}
  .franja-desplegable-mobile {width: 100vw; margin-left: -50vw; left: 50%; padding: 45px 30px !important; display: none !important;}
  .franja-desplegable-mobile[style*="block"] {display: block !important;}
}

/*------------------------------------Estilos para franja clientes---------------------------------------*/
.clientes-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; max-width: 1400px; margin: 0 auto; align-items: center; justify-items: center;}
.cliente-item {display: flex; align-items: center; justify-content: center; padding: 20px;}
.cliente-item img {max-width: 150px; max-height: 80px; width: auto; height: auto; object-fit: contain; transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease; opacity: 0.75; filter: saturate(0.7);}
.cliente-item img:hover {transform: scale(1.8); opacity: 1; filter: saturate(1);}

/*-------------------------------------------Responsive para franja clientes en móvil------------------------------------------*/
@media (max-width: 768px) {
  .franja-clientes {padding: 40px 15px; min-height: auto;}
  .clientes-grid {grid-template-columns: repeat(2, 1fr); gap: 15px; max-width: 100%;}
  .cliente-item {padding: 10px;}
  .cliente-item img {max-width: 120px; max-height: 60px;}
}

/* ------------------------------------Estilos para franjas video transición --------------------------------------- */
.franja-video-transicion {position: relative; width: 100%; height: 18vh; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.franja-video-transicion .video-fondo {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}
.franja-video-transicion-content {position: relative; z-index: 1; text-align: center; color: var(--color_blanco); padding: 40px;}

/* ------------------------------------Responsive para formulario --------------------------------------- */
@media (max-width: 768px) {
  section[style*="background-color: var(--color_beige_01)"] {padding: 30px 5px !important;}
  .formulario-responsive {grid-template-columns: 1fr !important; gap: 20px !important; padding: 5px !important; max-width: 98% !important; margin: 0 auto;}
  .formulario-form-responsive {padding: 15px 10px !important; margin: 0 auto !important; box-sizing: border-box; width: 98%;}
  .formulario-header-responsive {margin: -15px -10px 15px -10px !important; padding: 12px !important;}
  .formulario-input-responsive, .formulario-textarea-responsive {padding: 10px !important; font-size: 0.9rem !important; width: 95% !important; box-sizing: border-box !important; margin: 0 auto !important; display: block;}
  .contacto-info-responsive {padding: 15px 10px !important; width: 98% !important; margin: 0 auto !important; box-sizing: border-box !important; min-height: 300px !important;}
  .g-recaptcha {transform: scale(0.77); transform-origin: 0 0;}
}

/* ------------------------------------Estilos para pop-ups de servicios --------------------------------------- */
.popup-servicio {display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); overflow: auto;}
.popup-servicio-content {position: relative; background-color: var(--color_blanco); margin: 5% auto; padding: 0; width: 90%; max-width: 900px; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.3);}
.popup-servicio-header {background-color: var(--color_09); color: var(--color_blanco); padding: 25px 40px; border-radius: 10px 10px 0 0; position: relative;}
.popup-servicio-header h2 {margin: 0; font-family: "aw-conqueror-didot", serif; font-size: 2.2rem; font-weight: 400;}
.popup-servicio-close {position: absolute; top: 20px; right: 30px; font-size: 36px; font-weight: bold; color: var(--color_blanco); cursor: pointer; transition: color 0.3s; line-height: 1;}
.popup-servicio-close:hover {color: var(--color_detalle_01);}
.popup-servicio-body {padding: 40px 50px; color: var(--color_11); max-height: 65vh; overflow-y: scroll;}
.popup-servicio-body p {font-size: 1.2rem; line-height: 1.8; margin-bottom: 25px; text-align: justify;}
.popup-servicio-body ul {list-style: none; padding: 0; margin: 25px 0;}
.popup-servicio-body ul li {font-size: 1.1rem; line-height: 2; padding: 10px 0; padding-left: 30px; position: relative;}
.popup-servicio-body ul li:before {content: "●"; position: absolute; left: 0; top: 18px; color: var(--color_detalle_01); font-weight: bold; font-size: 1rem; line-height: 1;}

@media (max-width: 768px) {
  .popup-servicio-content {width: 95%; margin: 10% auto;}
  .popup-servicio-header {padding: 20px 25px;}
  .popup-servicio-header h2 {font-size: 1.8rem;}
  .popup-servicio-close {top: 15px; right: 20px; font-size: 30px;}
  .popup-servicio-body {padding: 25px 30px; max-height: 55vh;}
  .popup-servicio-body p {font-size: 1.05rem;}
  .popup-servicio-body ul li {font-size: 1rem;}
}

/* Estilos para acordeones en pop-ups */
.acordeon-item {margin-bottom: 10px; border-bottom: 1px solid #e0e0e0;}
.acordeon-titulo {display: flex; align-items: center; justify-content: space-between; padding: 15px 0; cursor: pointer; font-size: 1.15rem; font-weight: 600; color: var(--color_10); transition: color 0.3s; user-select: none;}
.acordeon-titulo:hover {color: var(--color_detalle_02);}
.acordeon-icono {font-size: 1.2rem; font-weight: bold; color: var(--color_detalle_01); transition: transform 0.3s ease; display: inline-block;}
.acordeon-icono.activo {transform: rotate(90deg);}
.acordeon-contenido {max-height: 0; overflow: hidden; transition: max-height 0.01s ease;}
.acordeon-contenido.activo {max-height: 1000px;}
.acordeon-contenido ul {margin: 10px 0 15px 0;}

/* ------------------------------------Responsive: equipo spacers y clientes grid --------------------------------------- */

/* Ocultar espaciadores del equipo en móvil */
@media (max-width: 768px) {
  .equipo-spacer {display: none !important;}
  .clientes-grid {display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 15px !important;}
  .clientes-grid .cliente-item img {max-width: 120px; max-height: 60px;}
}

/* ------------------------------------Responsive: tablet (769px - 1024px) --------------------------------------- */

@media (min-width: 769px) and (max-width: 1024px) {
  .equipo-spacer {display: none !important;}
  .nosotros-col {flex: 0 0 45% !important; max-width: 45%;}
  .flex-container {flex-wrap: wrap !important; gap: 10px;}
  .franja-servicios-columna {flex: 0 0 45% !important; max-width: 45%; margin-bottom: 30px;}
  .clientes-grid {display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important;}
  .footer-container {grid-template-columns: 1fr 1fr 1fr !important; gap: 30px;}
}