/*
 * LA FRANJA DEL AVAL: EL DEGRADADO DEL BANNER, PROLONGADO.
 *
 * Lleva el velo EXACTO de `.hero__wash` —mismo ángulo, mismos colores, mismas
 * paradas—, así que no compite con el banner: se lee como su último palmo, donde
 * el banner se apaga y empieza la página.
 *
 * LO QUE CAMBIA ES LO QUE HAY DEBAJO.
 *
 * En el banner ese velo va sobre una fotografía y por eso lleva transparencias.
 * Aquí no hay foto: sin una base opaca, las tres paradas se mezclarían con el
 * blanco de la página y saldría un degradado lavado que no se parecería al del
 * banner. La base es el azul marino de marca.
 *
 * Y esa base está medida, no elegida a ojo: con ella los tres tramos dan 15,3:1,
 * 11,0:1 y 4,5:1 contra el texto blanco, así que la frase se lee igual de bien
 * sobre el extremo turquesa que sobre el azul. Con una base un punto más clara,
 * el extremo turquesa se quedaba en 4,47:1 y no llegaba al mínimo.
 */
.aval{
  background:linear-gradient(155deg,
              rgba(0,32,96,.93) 6%,
              rgba(35,61,130,.82) 46%,
              rgba(4,169,156,.72) 100%),
             #002060;
  padding:52px 0;
}
.aval__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:14px 34px;
}
/*
 * En la tipografía de titulares y en blanco: es una firma, no un párrafo, y la
 * serif le da ese peso sin necesidad de agrandarla.
 */
.aval__dato{
  margin:0;
  font-family:var(--font-display);
  font-size:17px;
  line-height:1.4;
  color:#FFFFFF;
  text-align:center;
}
/*
 * EL PUENTE: la línea que une los dos datos.
 *
 * En blanco y no en colores de marca: encima del degradado de marca, un puente
 * de los mismos colores se perdería contra el fondo justo donde coinciden.
 *
 * Los dos puntos de los extremos son lo que lo convierte en un trayecto y no en
 * una raya: marcan que hay un origen y un destino. Se dibujan con dos degradados
 * radiales sobre el mismo fondo, sin elementos de más.
 */
/*
 * «Worldcom» enlaza a la red y lleva su logo en blanco a la derecha. La palabra
 * y el logo forman un solo enlace; el subrayado aparece al pasar por encima,
 * para que se note que se puede pulsar sin ensuciar la franja en reposo.
 */
.aval__dato--worldcom{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:.35em;}
.aval__worldcom{
  display:inline-flex;align-items:center;gap:14px;
  color:#fff;text-decoration:none;
  text-underline-offset:4px;
}
.aval__worldcom:hover span:first-child,
.aval__worldcom:focus-visible span:first-child{text-decoration:underline;}
.aval__worldcom:focus-visible{outline:2px solid #8FEFDF;outline-offset:4px;border-radius:4px;}
.aval__worldcom img{height:26px;width:auto;display:block;}
.aval__puente{
  flex:0 1 280px;
  height:2px;
  border-radius:2px;
  background:
    radial-gradient(circle at left center,  #FFFFFF 0 3px, transparent 3.5px),
    radial-gradient(circle at right center, #FFFFFF 0 3px, transparent 3.5px),
    linear-gradient(90deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.78) 50%, rgba(255,255,255,.34) 100%);
  background-repeat:no-repeat;
}

/*
 * EN PANTALLA ESTRECHA EL PUENTE SE PONE DE PIE.
 *
 * Los dos datos se apilan, así que el trayecto pasa a ser vertical: de arriba
 * —lo de aquí— a abajo —lo de fuera—. Es la misma idea girada noventa grados.
 *
 * `flex:0 0 auto` en los datos es necesario: en columna, un elemento flexible
 * reparte ALTO en vez de ancho y estira la franja —ya pasó una vez, con la banda
 * quedando en 552px para dos frases—.
 */
@media (max-width: 700px){
  .aval{padding:24px 0;}
  .aval__inner{flex-direction:column;gap:12px;}
  .aval__dato{flex:0 0 auto;font-size:15px;}
  .aval__puente{
    flex:0 0 auto;
    width:2px;
    height:34px;
    background:
      radial-gradient(circle at center top,    #FFFFFF 0 3px, transparent 3.5px),
      radial-gradient(circle at center bottom, #FFFFFF 0 3px, transparent 3.5px),
      linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.78) 50%, rgba(255,255,255,.34) 100%);
    background-repeat:no-repeat;
  }
}
.site-header.is-over{
  position:absolute;top:0;left:0;right:0;
  background:transparent;backdrop-filter:none;border-bottom:none;
}
/*
 * LA CABECERA ACOMPAÑA AL BAJAR
 *
 * Pasados unos 120 px de desplazamiento, afce.js le pone .is-fija y la cabecera
 * baja pegada arriba, más compacta: el menú queda a mano en cualquier punto de
 * la página, sin tener que volver arriba del todo.
 *
 * En la portada la barra fija es azul marino y no blanca: allí la cabecera usa
 * el logo en blanco y los enlaces blancos —va sobre la foto del banner—, y sobre
 * blanco desaparecerían. En el resto de páginas es blanca, como ya era.
 *
 * Entra deslizándose desde arriba; quien pida menos movimiento la ve aparecer
 * sin animación.
 */
.site-header.is-fija{
  position:fixed;top:0;left:0;right:0;z-index:70;
  background:rgba(255,255,255,.97);
  box-shadow:0 6px 24px rgba(0,32,96,.12);
  animation:cabecera-baja .35s cubic-bezier(.2,.75,.3,1);
}
.site-header.is-over.is-fija{background:rgba(0,32,96,.95);}
.site-header.is-fija .site-header__inner{padding-top:10px;padding-bottom:10px;}
.site-header.is-fija .logo{transform:none;}
.site-header.is-fija .logo img{height:auto;width:clamp(150px,12vw,200px);}
@keyframes cabecera-baja{from{transform:translateY(-100%);}to{transform:none;}}
@media (prefers-reduced-motion: reduce){
  .site-header.is-fija{animation:none;}
}
/*
 * La barra usa un ancho MAYOR que el del contenido (--wrap son 1180 px).
 *
 * Con el logo grande, seis entradas de menú, el selector de idioma, el botón
 * y las cuatro redes hacen falta unos 1.350 px; dentro de 1180 el contenido
 * se salía por la derecha y el navegador encogía el logo hasta dejarlo
 * diminuto. Una cabecera más ancha que el texto es lo normal, y así cada
 * pieza mantiene su tamaño.
 */
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1560px;
  padding:16px 32px;gap:28px;
}
/* Ni el logo ni el bloque de la derecha se encogen: si falta sitio, lo que
 * cede es el menú, que ya tiene su punto de plegado. */
.logo,.header-actions{flex-shrink:0;}
/*
 * El logo va sin placa blanca detrás: los PNG del 20 aniversario vienen sin
 * fondo, y hay una versión en blanco para el hero oscuro y otra a color para
 * las páginas claras (la elige header.php). Antes hacía falta el recuadro
 * porque el archivo era un JPG con el blanco incrustado.
 */
.logo{display:inline-flex;}
.logo img{height:46px;width:auto;}

/*
 * Sobre el hero el logo va bastante más grande que en las páginas
 * interiores: es lo primero que se ve al entrar y sobre una foto a pantalla
 * completa un logo de barra normal se pierde. Se mide en vw con un tope, así
 * crece en monitores anchos pero no pasa de donde el trazo del arco empieza
 * a verse blando.
 */
/*
 * Sobre el hero el logo baja un poco respecto al menú. Se hace con transform
 * y no con margen para que no empuje la barra: el desplazamiento es sólo
 * visual y la navegación se queda donde estaba.
 */
.is-over .logo{transform:translateY(18px);}
.is-over .logo img{height:auto;width:clamp(200px,17vw,300px);}

/* nowrap: "Sala de Prensa y Blog" se partía en cuatro líneas al apretarse
   la barra. Con el gap algo menor caben los seis. */
.primary-nav{display:flex;align-items:center;gap:20px;list-style:none;margin:0;padding:0;}
.primary-nav li{white-space:nowrap;}
.primary-nav a{
  font-size:14.5px;font-weight:600;text-decoration:none;
  color:var(--text-soft);padding:4px 0;
  border-bottom:2px solid transparent;
}
.primary-nav a:hover{color:var(--text);}
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a{color:var(--accent-ink);border-bottom-color:var(--accent);}
.is-over .primary-nav a{color:rgba(255,255,255,.92);}
.is-over .primary-nav a:hover{color:#fff;}
.is-over .primary-nav .current-menu-item > a{color:#fff;border-bottom-color:#fff;}

.header-actions{display:flex;align-items:center;gap:20px;}

/* Selector de idioma: pregunta a WPML la URL real de la traducción */
.lang-switch{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;list-style:none;margin:0;padding:0;}
.lang-switch a{text-decoration:none;color:var(--text-muted);}
.lang-switch li.is-active a{color:var(--accent-ink);}
.lang-switch .sep{color:var(--border-strong);}
.is-over .lang-switch a{color:rgba(255,255,255,.65);}
.is-over .lang-switch li.is-active a{color:#fff;}
.is-over .lang-switch .sep{color:rgba(255,255,255,.4);}

/* Botón de menú en móvil */
.menu-toggle{
  display:none;background:none;border:0;cursor:pointer;
  padding:8px;color:var(--text);
}
.is-over .menu-toggle{color:#fff;}
.menu-toggle svg{width:26px;height:26px;}

/* ============ HERO DE PORTADA ============ */
/*
 * LA ALTURA DEL BANNER: QUE LA SECCIÓN DE ABAJO NO ASOME.
 *
 * El banner y la franja del aval ocupan casi toda la primera pantalla, dejando
 * asomar un dedo de la sección siguiente: lo justo para que se vea que la página
 * continúa, sin enseñar media franja clara.
 *
 * EL ALTO SE REPARTE ENTRE LOS DOS, Y ESO NO ES CASUAL.
 *
 * Reducir el hueco entre los botones y la franja obliga a bajar el banner, y un
 * banner más bajo deja asomar más de la sección siguiente: son la misma medida
 * tirando en sentidos contrarios. La salida es dar a la franja el alto que pierde
 * el banner — así el corte sigue cayendo donde tiene que caer y el hueco baja.
 *
 * Medido: 88vh con franja de 72 dejaba 261px entre los botones y la franja; 82vh
 * con franja de 128 los deja en 204, y el asomo se queda en 34 en vez de 36.
 *
 * EL AIRE DE ARRIBA SE COMPENSA POR DENTRO, NO BAJANDO LA ALTURA.
 *
 * Subir el banner y dejar el contenido centrado devolvía el problema que ya hubo
 * una vez: 184 píxeles muertos entre el menú y el titular. La solución no es un
 * banner más bajo sino repartir distinto lo de dentro — el padding de abajo
 * empuja el bloque hacia arriba y el titular se queda donde estaba.
 *
 * Medido, con una ventana de 900: el aire sobre el titular se queda en 114px,
 * prácticamente el mismo que había con el banner bajo (103). Se gana lo uno sin
 * perder lo otro.
 *
 * El tope en píxeles es para monitores muy altos: con sólo vh, en una pantalla de
 * 1440 de alto el banner se estiraría hasta dejar el titular perdido en medio.
 */
.hero{
  position:relative;
  min-height:min(82vh, 770px);
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero__photo{position:absolute;inset:0;background-size:cover;background-position:center 30%;}
/*
 * El velo lleva los tres colores de marca. Es lo único que separa el texto
 * blanco de la foto: sin él, el titular queda ilegible sobre las zonas claras.
 */
.hero__wash{
  position:absolute;inset:0;
  background:linear-gradient(155deg,rgba(0,32,96,.93) 6%,rgba(35,61,130,.82) 46%,rgba(4,169,156,.72) 100%);
}
/*
 * El padding de arriba deja sitio a la cabecera, que va en posición absoluta y no
 * ocupa espacio en el flujo: sin él, el titular se le metería debajo.
 *
 * El de abajo es mucho mayor a propósito: es lo que sube el bloque dentro de un
 * banner alto y evita que el titular caiga demasiado lejos del menú.
 */
.hero__content{position:relative;padding:104px 0 90px;z-index:1;}
/*
 * EN PANTALLAS BAJAS, MENOS EMPUJE.
 *
 * El padding de abajo sube el bloque dentro de un banner alto, pero en una
 * pantalla de poco fondo —un portátil de 620 y muchos monitores de oficina— el
 * banner ya es corto y ese mismo empuje deja el titular pegado al menú: medido,
 * nueve píxeles de holgura. Aquí baja el padding y también el alto de la franja,
 * porque en esas pantallas cada píxel que ocupa la franja se lo quita al banner.
 *
 * Va por ALTO de ventana y no por ancho: el problema no es la anchura de la
 * pantalla sino cuánto fondo tiene.
 */
@media (max-height: 720px){
  .hero__content{padding-bottom:34px;}
  .aval{padding:26px 0;}
}
/*
 * EL TITULAR, EN DOS RENGLONES Y NO EN CUATRO.
 *
 * El ancho estaba en 14ch, que con el titular anterior —más corto— daba dos
 * líneas. Con éste daba CUATRO renglones cortos, apilados como una lista, y una
 * frase que se lee de corrido no debe verse como una enumeración.
 *
 * Dos cambios y no uno: el ancho sube a 22ch y `text-wrap:balance` reparte las
 * palabras entre los dos renglones en vez de llenar el primero y dejar el segundo
 * coja. Los 22ch están medidos uno a uno: con 20 salían tres renglones y con 22
 * caen dos, cortando en «La comunicación que mueve / reputación y negocio.», que
 * además es donde la frase se parte sola al leerla en voz alta.
 *
 * El interlineado baja un punto porque a dos renglones largos el aire entre ellos
 * se nota más que a cuatro cortos.
 */
/*
 * EL CUERPO, MEDIDO PARA PANTALLAS REALES Y NO PARA LA MÁS GRANDE.
 *
 * Estaba fijo en 64px. El problema es que la mayoría de la gente no navega a
 * 1920: entre el zoom del navegador y —sobre todo— el escalado del sistema, que
 * en Windows viene de fábrica al 125% o 150%, el ancho efectivo típico se queda
 * entre 1280 y 1536. A 1280, sesenta y cuatro píxeles es un titular que se come
 * la pantalla.
 *
 * Ahora crece con el ancho: 46px a 1280, que es la medida buena, y hasta 50 en
 * monitores anchos. El mínimo de 31 es el que evita que en un móvil el titular
 * se coma la primera pantalla entera.
 */
/*
 * El corte lo deciden las dos cadenas del marcado, no el navegador, así que aquí
 * ya no hacen falta ni `text-wrap:balance` ni un ancho máximo que forzara el
 * reparto: cada renglón es su propio elemento de bloque.
 */
.hero h1{font-size:clamp(31px, 3.6vw, 50px);line-height:1.06;color:#fff;}
.hero h1 span{display:block;}
.hero .lede{font-size:clamp(16px, 1.35vw, 18px);color:#E4E9EC;max-width:46ch;margin:22px 0 32px;}
.hero__actions{display:flex;gap:16px;flex-wrap:wrap;}
/*
 * EL AVAL, DEBAJO DE LOS BOTONES: DOS SELLOS.
 *
 * Es la misma pastilla que encabeza cada sección del sitio, reutilizada aquí como
 * acreditación. Sobre el azul del banner va en la variante clara —borde y fondo
 * translúcidos— que ya usa `.on-dark .eyebrow`, así que se ve del mismo material
 * que el resto de pastillas de la página.
 *
 * A diferencia de un antetítulo, estas NO van en versalitas: son frases con datos
 * dentro y en mayúsculas se leerían peor. La pastilla aporta la forma; el texto se
 * queda como se escribe.
 */
.hero__sellos{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:26px 0 0;
}
.hero__sello{
  display:inline-block;
  padding:9px 18px;
  border-radius:999px;
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:600;
  line-height:1.35;
  color:rgba(245,250,252,.94);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(2px);
}
/*
 * El sello de la red va en turquesa: es el aval de FUERA y conviene que se
 * distinga del de trayectoria, que es propio. Dos avales distintos, dos pesos.
 */
.hero__sello--red{
  color:#EAFFFC;
  background:rgba(4,169,156,.24);
  border-color:rgba(95,216,206,.55);
}
@media (max-width: 700px){
  .hero__sellos{gap:8px;margin-top:20px;}
  .hero__sello{font-size:12.5px;padding:8px 15px;}
}

/* ============ CONSULTORÍA (4 tarjetas) ============ */
.consult{padding:96px 0;background:var(--surface-2);}
.consult__head{text-align:center;max-width:640px;margin:0 auto 48px;}
.consult__head .eyebrow{margin-bottom:18px;}
.consult__head h2{font-size:34px;}
/*
 * LA PREGUNTA ENCENDIÉNDOSE
 *
 * Un degradado más ancho que el texto se pasea por debajo y se recorta contra las
 * letras: parece un reflejo que las recorre. Igual que .pbanner__brillo, pero con
 * la paleta invertida — allí el fondo es azul oscuro y el destello es blanco; aquí
 * el fondo es claro y el destello es el verde de marca sobre azul marino.
 *
 * Los tres colores están medidos contra el fondo #EAF1F1: navy 13,3:1, azul 8,9:1
 * y verde 4,26:1. El verde de marca sin oscurecer daba 2,56:1 y habría dejado
 * media palabra ilegible cada vez que pasara la cresta.
 *
 * El color plano va FUERA del @supports para que, si el recorte contra el texto no
 * está disponible, quede un titular azul marino normal y no un hueco en blanco.
 */
.consult__pregunta{
  color:#002060;
}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .consult__pregunta{
    /*
     * LA CRESTA, ESTRECHA.
     *
     * Antes el degradado repartía los tres colores a lo largo de todo el texto y
     * el barrido se leía como un cambio de color lento, no como una luz. Ahora el
     * navy ocupa dos tercios y la luz entra en una banda corta: hay un antes y un
     * después claros al pasar, que es lo que hace que se note.
     *
     * Los tres colores son los mismos de siempre y siguen medidos contra #EAF1F1.
     */
    background:linear-gradient(100deg,
                #002060 0%,
                #002060 34%,
                #1B4C88 43%,
                #0A7F76 49%,
                #04A99C 51%,
                #1B4C88 57%,
                #002060 66%,
                #002060 100%);
    /* Más ancho que el texto: así siempre hay degradado por delante y por detrás
       de la cresta, y el barrido no da un salto al volver a empezar. */
    background-size:260% 100%;
    -webkit-background-clip:text;
            background-clip:text;
    color:transparent;
    animation:consult-luz 4.2s linear infinite;
  }
}
@keyframes consult-luz{
  from{background-position:0% 0;}
  to{background-position:-160% 0;}
}
/*
 * Quien pida menos movimiento se queda con el degradado quieto. Hay que apagar la
 * animación explícitamente: son dos mecanismos distintos y desactivar las
 * transiciones no la detiene.
 */
@media (prefers-reduced-motion: reduce){
  .consult__pregunta{animation:none;background-position:0 0;}
}
.consult__head p{color:var(--text-muted);font-size:16px;margin:16px 0 0;}
.consult-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
/* Altura fija para que las cuatro queden iguales aunque el texto varíe */
.consult-card{
  position:relative;overflow:hidden;border-radius:18px;
  padding:28px 24px 24px;color:#fff;
  display:flex;flex-direction:column;align-items:flex-start;
  text-align:left;gap:16px;height:300px;
}
.consult-card::after{
  content:'';position:absolute;width:170px;height:170px;border-radius:50%;
  background:rgba(255,255,255,.16);filter:blur(20px);bottom:-70px;right:-60px;
}
.consult-card h3{
  font-family:var(--font-body);font-size:12px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.42);
  padding:9px 20px;border-radius:999px;position:relative;z-index:1;
}
.consult-card p{
  font-size:13.5px;color:rgba(255,255,255,.88);margin:0;flex:1;
  position:relative;z-index:1;display:flex;align-items:center;
}
.consult-card .btn{position:relative;z-index:1;font-size:13px;padding:10px 16px;width:100%;justify-content:center;}

/* ============ EVENTOS CORPORATIVOS ============ */
.events{position:relative;overflow:hidden;background:var(--grad-dark);color:#fff;padding:100px 0;}
.events__arc{position:absolute;bottom:-30%;right:-10%;width:60%;max-width:600px;opacity:.75;transform:scaleX(-1);}
.events__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;
  align-items:stretch;position:relative;z-index:2;min-height:440px;
}
.events__text{display:flex;flex-direction:column;justify-content:center;padding:60px 0;}
/* Píldora más pequeña aquí: al lado del botón, dos elementos del mismo
   tamaño competían entre sí. */
/*
 * LA PASTILLA Y EL BOTÓN, DEL ANCHO DE SU TEXTO.
 *
 * La columna es un flex vertical, y en un flex vertical los hijos se estiran a lo
 * ancho por defecto. Resultado medido: la pastilla y el botón ocupaban los 530px
 * de la columna entera, con su texto pegado a la izquierda y un desierto a la
 * derecha. Una pastilla así no se lee como pastilla, se lee como una barra.
 *
 * `align-self:flex-start` les devuelve el ancho de su contenido. Va en los dos, no
 * sólo en la pastilla: el botón tenía el mismo problema.
 */
.events__text .eyebrow,
.events__text .btn{align-self:flex-start;}
.events .eyebrow{margin-bottom:20px;font-size:11.5px;padding:9px 18px;letter-spacing:.07em;}
/* La primera frase del titular, sola en su renglón. */
.events__golpe{display:block;}
/*
 * El titular de eventos baja de 34 a 27px: el texto nuevo es largo —dos frases—
 * y a cuerpo de titular de sección ocupaba media columna y competía con el propio
 * banner. Más pequeño se lee como lo que es, una idea desarrollada.
 */
.events h2{color:#fff;font-size:clamp(21px, 1.95vw, 25px);line-height:1.3;}
.events p{color:#CFE0F5;font-size:16px;margin:18px 0 26px;}
/* La foto ocupa la mitad derecha completa, de borde a borde */
.events__photo{
  position:absolute;top:0;right:0;width:50vw;max-width:50%;height:100%;
  z-index:1;background-size:cover;background-position:center;
}

/* ============ GESTIÓN DE MEDIOS ============
 * Sin fotografía. Se probaron tres y ninguna servía: la de banco no era ni
 * dominicana ni de un cliente, y las propias de AF son todas de eventos, así
 * que la sección parecía otra vez Eventos Corporativos. Aquí se venden cinco
 * trabajos distintos, y cada uno con su icono se entiende de un vistazo.
 */
.medios{position:relative;overflow:hidden;background:var(--grad-dark);color:#fff;padding:100px 0;}
.medios__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;
  align-items:center;position:relative;z-index:1;
}
.medios .eyebrow{margin-bottom:20px;font-size:11.5px;padding:9px 18px;letter-spacing:.07em;}
.medios h2{color:#fff;font-size:clamp(23px, 2.25vw, 29px);margin:0;line-height:1.24;}
.medios__texto p{color:#CFE0F5;font-size:16px;margin:18px 0 28px;}

/* Los cinco trabajos. Cada uno en su fila, con el icono en un disco
 * esmerilado que flota con arranque desfasado. */
/*
 * APARECER AL LLEGAR
 *
 * Las cinco fichas entran de una en una cuando la sección asoma en pantalla, no
 * al cargar la página: así el visitante VE la animación en vez de perdérsela
 * porque ocurrió mientras miraba la cabecera.
 *
 * El estado oculto sólo se aplica si el <html> lleva .afce-revela, que pone el
 * propio JavaScript al arrancar. Si el script no carga o falla, las fichas se
 * quedan visibles en lugar de invisibles para siempre. Lo que se esconde con
 * script se esconde sólo si el script está vivo.
 *
 * El retardo sale de --retardo, la misma variable que ya escalonaba la
 * flotación de los iconos: se dividía en 0,35 s por ficha, y aquí se usa a la
 * mitad para que la entrada sea más viva que el vaivén.
 */
.medios__lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.afce-revela .medios__lista[data-revelar] li{
  opacity:0;
  transform:translateX(-34px);
}
.afce-revela .medios__lista[data-revelar].es-visible li{
  opacity:1;
  transform:translateX(0);
  transition:opacity .55s ease,transform .6s cubic-bezier(.2,.75,.3,1);
  transition-delay:calc(var(--retardo,0s) / 2);
}
.medios__lista li{
  display:flex;align-items:center;gap:18px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;padding:16px 20px;
  color:#EAF2FB;font-size:15.5px;line-height:1.4;
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.medios__lista li:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.38);
  transform:translateX(6px);
}
.medios__icono{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:14px;
  background:rgba(143,239,223,.14);
  border:1px solid rgba(143,239,223,.32);
  color:#8FEFDF;
  animation:medios-flota 4.6s ease-in-out infinite;
  animation-delay:var(--retardo,0s);
}
.medios__icono svg{width:26px;height:26px;}

/* Recorrido corto: al lado de un titular, un movimiento amplio distrae. */
@keyframes medios-flota{
  0%,100%{transform:translateY(0);}
  50%    {transform:translateY(-6px);}
}

@media (prefers-reduced-motion: reduce){
  .medios__icono{animation:none;}
  .medios__lista li{transition:none;}
  .medios__lista li:hover{transform:none;}
}

@media (max-width: 900px){
  .medios{padding:76px 0;}
  .medios__grid{grid-template-columns:1fr;gap:40px;}
  .medios h2{font-size:28px;}
}
/* ============ CAPACITACIONES ============ */
.training{background:var(--surface);padding:96px 0;position:relative;overflow:hidden;}
/*
 * La fotografía manda sobre el texto en el reparto: la agencia la quería más
 * grande. Con .85fr se quedaba en una viñeta al lado de un bloque de prosa.
 */
.training__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:48px;align-items:center;}
.training__visual{position:relative;}
/*
 * La foto lleva encima un velo con el degradado de marca, según la
 * referencia que dio el cliente. Los dos fondos —degradado y fotografía— los
 * pone la plantilla en el atributo style; aquí se les dice cómo mezclarse.
 *
 * multiply oscurece la foto con el color de marca en vez de taparla, así que
 * la escena se sigue leyendo por debajo del velo. La clave está en que el
 * degradado ACABA EN BLANCO: en multiply el blanco es neutro —no cambia nada
 * de lo que tiene debajo—, de modo que el tinte entra fuerte por un lado y se
 * disuelve hasta dejar la foto limpia por el otro. Un color plano de lado a
 * lado tapaba la imagen entera, que era justo lo que no se quería.
 *
 * background-size lleva un valor por capa: el degradado se estira a toda la
 * caja y la foto se recorta a cubrir.
 */
.training__photo{
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 24px 50px rgba(14,26,43,.18);
  aspect-ratio:1.42/1;
  background-size:100% 100%, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
  background-blend-mode:multiply;
}
/*
 * La insignia flota despacio para que llame la atención sin distraer de la
 * foto. El recorrido es corto —6 px— y el ciclo largo: un movimiento rápido
 * aquí competiría con el titular que tiene al lado.
 */
.training__badge{
  position:absolute;right:-18px;bottom:-18px;
  background:linear-gradient(140deg,var(--accent),var(--brand-blue));
  color:#fff;border-radius:18px;padding:18px 22px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 16px 34px rgba(14,26,43,.24);
  animation:badge-flota 3.6s ease-in-out infinite;
  will-change:transform;
}
@keyframes badge-flota{
  0%,100%{transform:translateY(0);   box-shadow:0 16px 34px rgba(14,26,43,.24);}
  50%    {transform:translateY(-6px);box-shadow:0 24px 42px rgba(14,26,43,.30);}
}
@media (prefers-reduced-motion: reduce){
  .training__badge{animation:none;}
}
.training__badge strong{font-family:var(--font-display);font-size:38px;line-height:1;font-weight:600;}
.training__badge span{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.3;}
/*
 * Igual que en eventos, y por el mismo motivo: el titular nuevo es una frase
 * larga y a 34px se comía la columna entera.
 */
.training__text h2{font-size:clamp(21px, 1.95vw, 25px);line-height:1.3;margin:18px 0 0;}
.training__text > p{color:var(--text-soft);font-size:16.5px;margin:18px 0 26px;}
.training__list{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:14px;}
/*
 * CADA TALLER, EN TRES NIVELES QUE SE DISTINGAN.
 *
 * Antes eran dos —nombre y descripción— y se parecían demasiado: 15px negrita
 * contra 14px gris, que a un palmo de distancia es casi lo mismo. Ahora hay
 * NOMBRE, GANCHO y DETALLE, y cada uno se separa del anterior por dos rasgos a la
 * vez, nunca por uno solo, que es lo que hace que la jerarquía se lea sin
 * esfuerzo:
 *
 *   nombre  — versalitas, espaciadas, en el turquesa de marca
 *   gancho  — tipografía de titulares, mayor y en el color fuerte del texto
 *   detalle — tipografía de texto, menor y apagado
 *
 * El hueco entre ellos también crece de arriba abajo, para que el bloque se lea
 * como una escalera y no como tres líneas sueltas.
 */
.training__list li{display:flex;flex-direction:column;gap:5px;padding-left:18px;border-left:3px solid var(--accent);}
.training__list strong{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--brand-teal);
}
.training__list .training__gancho{
  font-family:var(--font-display);
  font-size:16.5px;
  line-height:1.3;
  color:var(--text);
}
.training__list .training__detalle{
  font-size:14px;
  line-height:1.5;
  color:var(--text-muted);
}
.training__quote{
  margin:0 0 28px;padding:20px 24px;background:var(--accent-tint);
  border-radius:14px;font-family:var(--font-display);font-style:italic;
  font-size:16px;color:var(--accent-ink);
}
.training__quote cite{
  display:block;font-family:var(--font-body);font-style:normal;
  font-size:12.5px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;opacity:.75;margin-top:10px;
}

/* ============ MONITOREO DE MEDIOS ============
 * El panel de menciones es HTML y CSS, no una captura de pantalla. Así se
 * traduce al inglés, se lee con lector de pantalla y no suma una imagen.
 */
.monitor{
  position:relative;overflow:hidden;color:#fff;padding:100px 0;
  background:linear-gradient(135deg,#02143F 0%,var(--brand-blue) 55%,var(--accent-ink) 100%);
}
.monitor__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;}
.monitor__text h2{color:#fff;font-size:34px;margin:20px 0 0;}
.monitor__text > p{color:#CFE0F5;font-size:16.5px;margin:18px 0 28px;max-width:46ch;}
.monitor__stats{display:flex;gap:28px;flex-wrap:wrap;margin-bottom:32px;}
.monitor__stats div{display:flex;flex-direction:column;}
.monitor__stats strong{font-family:var(--font-display);font-size:26px;font-weight:600;color:#8FEFDF;}
.monitor__stats span{font-size:12.5px;color:#B9C9E4;}
.monitor__panel{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-lg);padding:20px;box-shadow:0 26px 56px rgba(0,0,0,.34);
}
.monitor__panel-top{
  display:flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#CFE0F5;padding:0 4px 16px;
  border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:16px;
}
.monitor__dot{width:9px;height:9px;border-radius:50%;background:#8FEFDF;animation:afce-pulse 2.4s ease-in-out infinite;}
@keyframes afce-pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(143,239,223,.18);}
  50%{box-shadow:0 0 0 8px rgba(143,239,223,.05);}
}
.monitor__feed{display:flex;flex-direction:column;gap:12px;}
.monitor__item{background:rgba(255,255,255,.09);border-radius:var(--radius);padding:14px 16px;border-left:3px solid #8FEFDF;}
.monitor__item.is-neu{border-left-color:#8AA6D8;}
.monitor__item.is-alert{border-left-color:#F0B45E;}
.monitor__item-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px;}
.monitor__item-head strong{font-size:13px;color:#fff;}
.monitor__item-head em{font-style:normal;font-size:11.5px;color:#9FB4D4;}
.monitor__item p{margin:0 0 10px;font-size:13.5px;color:#DCE7F4;}
.monitor__tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:999px;}
.monitor__tag--pos{background:rgba(143,239,223,.18);color:#8FEFDF;}
.monitor__tag--neu{background:rgba(138,166,216,.18);color:#B7CBEC;}
.monitor__tag--alert{background:rgba(240,180,94,.18);color:#F5C889;}

/* ============ SERVICIOS ============ */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative;z-index:1;}
.service-card{
  position:relative;   /* ancla el velo de la foto, que va posicionado */
  background:var(--surface);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
  display:flex;flex-direction:column;
}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);}

/*
 * LA FOTO, CON UN DEGRADADO GRIS POR ENCIMA
 *
 * Historia de cuatro versiones, y la cuarta es la que explica las tres anteriores:
 *
 *  1. Un velo gris mezclado en MULTIPLICAR. Multiplicar oscurece siempre, y sobre
 *     fotos ya subexpuestas las dejaba tristes.
 *  2. Un difuminado sólo en el filo de abajo, hacia el blanco de la tarjeta. No
 *     oscurecía, pero tampoco unificaba: cada foto seguía con su luz.
 *  3. Un degradado gris sobre toda la foto. Correcto en la idea, pero se subió del
 *     20 al 35 y al 45 por ciento y seguía sin verse.
 *
 * POR QUÉ NO SE VEÍA. El velo iba en un pseudoelemento de .service-card__media, y
 * ese elemento lleva filter:brightness(1.14) para levantar las fotos oscuras. El
 * filtro se aplica al elemento Y A SUS PSEUDOELEMENTOS, así que estaba aclarando
 * un catorce por ciento justo lo que se acababa de oscurecer. Cuanto más gris se
 * ponía, más lo deshacía el filtro.
 *
 * 4. Esta: el velo se muda a la TARJETA, que no lleva filtro, y se coloca sobre el
 *    hueco de la foto. Ahora el filtro aclara la fotografía —que es lo que se
 *    quería— y el degradado la oscurece por encima, sin pelearse.
 *
 * Con el filtro fuera de en medio, el cincuenta por ciento de la esquina de abajo
 * se ve como un cincuenta por ciento.
 */
.service-card__media{
  height:160px;position:relative;
  background-size:cover;background-position:center;
  /* Las nueve fotos vienen de fuentes distintas y varias están subexpuestas.
     Un punto de luz y algo de saturación las iguala y levanta la sección
     entera, que era lo que se veía apagado. */
  filter:brightness(1.14) saturate(1.08);
}
.service-card::before{
  content:"";
  position:absolute;
  /* Sólo sobre el hueco de la foto: la misma altura que .service-card__media. */
  inset:0 0 auto 0;
  height:160px;
  z-index:1;
  background:linear-gradient(155deg,
              rgba(255,255,255,.06) 0%,
              rgba(120,130,146,.28) 40%,
              rgba(48,58,74,.52) 100%);
  pointer-events:none;
}
/* Y el texto, por delante del velo: si no, el velo le caería encima a la primera
   línea del titular en las tarjetas de foto corta. */
.service-card__body{
  position:relative;z-index:2;
  padding:20px 20px 22px;display:flex;flex-direction:column;gap:12px;flex:1;
}
.service-card h3{font-family:var(--font-body);font-size:16.5px;font-weight:700;}
.service-card p{margin:0;font-size:14px;color:var(--text-muted);flex:1;}

/* ============ BLOQUE OSCURO: ALIANZAS + MARCAS ============
 * Van dentro de un mismo contenedor con un solo degradado para que se lean
 * como un bloque continuo. Si fueran dos secciones con el mismo degradado,
 * este se reiniciaría en el borde y se vería la costura.
 */
.dark-block{background:var(--grad-dark);position:relative;overflow:hidden;}
.alliances{padding:96px 0 72px;color:#fff;position:relative;}
.alliances__head{text-align:center;max-width:620px;margin:0 auto 56px;}
.alliances__head .eyebrow{margin-bottom:18px;}
/* Baja de 32 a 24px: es un rótulo de apoyo sobre la fila de aliados, no el
   titular principal de la sección, y a 32 pesaba tanto como los de arriba. */
.alliances__head h2{color:#fff;font-size:clamp(18px, 1.7vw, 21px);}
/*
 * «CAPACIDAD LOCAL. ALCANCE GLOBAL.» SE VA ENCENDIENDO
 *
 * Un reflejo recorre las letras en bucle, como el titular de la sala de prensa y
 * el de «¿Qué necesitas resolver?».
 *
 * ESTE BLOQUE SALE EN DOS FONDOS OPUESTOS
 *
 * Es el mismo trozo de plantilla en la portada y en Nosotros, pero en la portada
 * va sobre el degradado azul y en Nosotros sobre gris claro. Un solo degradado no
 * sirve para los dos: el que se enciende en blanco desaparece sobre claro. Por eso
 * hay dos paletas, y las separa .alianzas-claro, el envoltorio que ya usa Nosotros
 * para aclarar este bloque.
 *
 * Medido en los dos casos. Sobre el azul, el peor tono del degradado es #0A3D8C y
 * ahí el blanco da 10,2:1 y el verde claro 7,0:1. Sobre el gris claro, el navy da
 * 13,3:1, el azul 8,9:1 y el verde oscurecido 4,74:1 — este último se eligió por
 * encima de 4,5 a propósito: el titular pesa 600, que no es ni redonda ni negrita
 * franca, y así cumple sin depender de cómo se cuente ese peso.
 *
 * El color plano va FUERA del @supports: si el recorte contra el texto no está
 * disponible, queda el titular de siempre y no un hueco en blanco.
 */
@supports (background-clip:text) or (-webkit-background-clip:text){
  .alliances__head h2{
    /*
     * El verde de marca es el color en reposo y el blanco es la luz que pasa, en
     * una banda corta. Antes se alternaban a partes iguales y el titular parecía
     * de dos colores en vez de encenderse.
     */
    background:linear-gradient(100deg,
                #4FD8C6 0%,
                #4FD8C6 34%,
                #AEEEE1 44%,
                #E4FBF6 50%,
                #AEEEE1 56%,
                #4FD8C6 66%,
                #4FD8C6 100%);
    /* Más ancho que el texto para que el barrido no dé un salto al reiniciarse. */
    background-size:260% 100%;
    -webkit-background-clip:text;
            background-clip:text;
    color:transparent;
    animation:alianzas-luz 4.2s linear infinite,
               alianzas-fulgor 4.2s ease-in-out infinite;
  }
  /*
   * Tres clases, no dos. En pages.css hay un «.alianzas-claro .alliances h2» que
   * fija el color del titular, empata en peso con esta regla y, por ir en una hoja
   * posterior, ganaba: el degradado se aplicaba pero el texto seguía opaco y lo
   * tapaba entero. Con .alliances de por medio esta pesa más y el recorte se ve.
   */
  .alianzas-claro .alliances .alliances__head h2{
    animation:alianzas-luz 4.2s linear infinite;
    text-shadow:none;
    background:linear-gradient(100deg,
                #002060 0%,
                #002060 34%,
                #1B4C88 43%,
                #09776E 49%,
                #0A7F76 51%,
                #1B4C88 57%,
                #002060 66%,
                #002060 100%);
    background-size:260% 100%;
    -webkit-background-clip:text;
            background-clip:text;
    color:transparent;
  }
}
@keyframes alianzas-fulgor{
  0%, 100% { text-shadow:0 0 0 rgba(143,239,223,0); }
  35%      { text-shadow:0 0 16px rgba(168,240,228,.16); }
  50%      { text-shadow:0 0 20px rgba(168,240,228,.3); }
  65%      { text-shadow:0 0 16px rgba(168,240,228,.16); }
}
@keyframes alianzas-luz{
  from{background-position:0% 0;}
  to{background-position:-160% 0;}
}
/* Quien pida menos movimiento se queda el degradado quieto. Hay que apagar la
   animación explícitamente: no basta con desactivar las transiciones. */
@media (prefers-reduced-motion: reduce){
  .alliances__head h2{animation:none;background-position:0 0;text-shadow:none;}
}
.alliances__head p{color:#CFE0F5;font-size:16px;margin:16px 0 0;}
/*
 * Los medallones redondos unidos por el "+", como estaban.
 *
 * align-items:flex-start y no center: con los titulares debajo, centrar
 * verticalmente descuadraba los dos círculos cuando un titular ocupaba dos
 * líneas y el otro una. Así los medallones quedan siempre a la misma altura.
 */
/*
 * LAS TRES, EN UNA SOLA LÍNEA
 *
 * Con dos aliados cabían de sobra. Al entrar Pulso, la fila pedía 1.244 px y sólo
 * hay 1.140: ADTS caía a un segundo renglón y la alianza que quedaba abajo
 * parecía de segunda categoría.
 *
 * Se arregla estrechando, no partiendo: nowrap manda que no se corte y las
 * tarjetas ceden ancho hasta que caben. Por debajo de 980 px sí se apilan, que
 * ahí no hay sitio para tres de ninguna manera.
 */
.alliances__row{display:flex;justify-content:center;align-items:flex-start;gap:28px;flex-wrap:nowrap;}
.alliances__connector{
  width:44px;height:2px;flex-shrink:0;position:relative;
  margin-top:76px;                 /* mitad del medallón, para caer a su eje */
  background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.55),rgba(255,255,255,.05));
}
.alliances__connector::after{
  content:'+';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:32px;height:32px;background:#fff;color:var(--brand-navy);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:700;font-family:var(--font-body);
}
.alliances__item{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  /* Ceden ancho antes que romper la fila; min-width:0 hace falta porque un
     elemento flexible no se encoge por debajo de su contenido sin él. */
  flex:0 1 300px;min-width:0;
}
/*
 * El disco de color va CENTRADO detrás del medallón y algo más grande, de
 * modo que asoma por igual en todo el contorno y se lee como un aro de color
 * alrededor del círculo blanco.
 *
 * Vive en un envoltorio propio y no como pseudoelemento del medallón porque
 * el medallón se transforma al pasar por encima, y un elemento con transform
 * crea contexto de apilamiento: el disco quedaría atrapado detrás del blanco
 * en vez de asomar.
 */
.alliances__disco{position:relative;display:inline-flex;flex-shrink:0;}
.alliances__disco::before{
  content:'';position:absolute;inset:-10px;border-radius:50%;
  background:linear-gradient(140deg,var(--brand-teal),var(--brand-navy));
}

.alliances__medallion{
  position:relative;   /* por delante del disco, sin necesidad de z-index */
  width:152px;height:152px;border-radius:50%;background:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;padding:26px;
  box-shadow:0 24px 44px rgba(0,0,0,.32);
  transition:transform .2s ease;
}
.alliances__item:hover .alliances__medallion{transform:translateY(-4px) scale(1.03);}
/*
 * El medallón es ahora un enlace a la web del aliado. Un <a> no trae el aspecto
 * de un <div>, así que se le quita el subrayado; el foco de teclado se dibuja
 * como un aro alrededor del círculo, porque la sombra sola no se distingue.
 */
a.alliances__medallion{text-decoration:none;cursor:pointer;}
a.alliances__medallion:focus-visible{outline:3px solid #8FEFDF;outline-offset:6px;}

/*
 * El titular va DEBAJO del logo, en tipografía de titular. Encima competía
 * con el medallón; aquí cierra la composición y se lee como lo que es, el
 * pie que da sentido al logo.
 */
.alliances__item h3{
  font-family:var(--font-display);font-size:21px;font-weight:600;
  color:#fff;margin:0;line-height:1.25;text-align:center;
}
.alliances__item span{font-size:13.5px;color:#CFE0F5;text-align:center;line-height:1.5;}

@media (prefers-reduced-motion: reduce){
  .alliances__medallion{transition:none;}
  .alliances__item:hover .alliances__medallion{transform:none;}
}

/* --- Cinta de marcas ---
 * Los logos vienen en proporciones muy distintas. Cada uno va en una caja
 * blanca del mismo tamaño con background-size:contain, así ninguno se
 * deforma y todos ocupan la misma superficie visual.
 */
/*
 * LA CINTA DE MARCAS NO SE DIBUJA HASTA QUE SE LLEGA A ELLA.
 *
 * Son 83 logotipos, y puestos como fondo se descargaban TODOS al abrir la
 * portada aunque la sección esté 17.000 píxeles más abajo. Un fondo de CSS no
 * admite loading="lazy": eso sólo existe para <img>. Medido: 83 peticiones que
 * en local, sobre HTTP/1.1 —seis conexiones a la vez—, hacen catorce tandas y
 * dejan a las últimas esperando 400 ms cada una. Mientras tanto la red está
 * ocupada y el menú de arriba tarda en responder.
 *
 * content-visibility:auto le dice al navegador que se salte el dibujado de esta
 * sección mientras esté fuera de pantalla, y sin dibujarla no pide sus fondos.
 * Al acercarse el visitante, la dibuja y los carga.
 *
 * contain-intrinsic-size reserva mientras tanto el alto que va a ocupar. Sin ese
 * dato la sección mediría cero, la barra de desplazamiento daría un salto al
 * llegar, y el «auto» hace que el navegador recuerde el alto real después de
 * verla una vez.
 *
 * Donde no exista la propiedad, la sección se comporta como hasta ahora.
 */
.clients{
  padding:0 0 84px;
  content-visibility:auto;
  /* 235 = los 319 px que mide la sección entera menos los 84 de su relleno
     inferior, que no entran en el tamaño reservado. Medido en pantalla. */
  contain-intrinsic-size:auto 235px;
}
.clients__head{text-align:center;margin-bottom:36px;}
.clients__viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
/* 46 s eran pocos para ochenta y tres marcas: los logotipos pasaban tan
   deprisa que no daba tiempo a reconocer ninguno. A 96 s la cinta se lee. */
.clients__track{display:flex;align-items:center;gap:20px;width:max-content;animation:afce-marquee 96s linear infinite;}
/* Y se para al acercar el ratón, para poder mirar uno concreto. */
.clients__viewport:hover .clients__track{animation-play-state:paused;}
.clients__logo{
  flex:0 0 auto;width:184px;height:92px;
  background:#fff;border-radius:14px;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  transition:transform .2s ease;
}
.clients__logo:hover{transform:translateY(-3px);}
/* Se desplaza -50% porque la lista está duplicada: al llegar a la mitad,
   el segundo juego está exactamente donde empezó el primero. */
@keyframes afce-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){
  .clients__track{animation:none;overflow-x:auto;}
}

/* ============ SALA DE PRENSA ============ */
.press-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
/* El botón que lleva al resto de las notas, centrado bajo las cuatro tarjetas. */
.press-mas{display:flex;justify-content:center;margin-top:36px;}
.press-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease;
}
.press-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);}
/*
 * Todas las fotos miden lo mismo: alto fijo y cover, así que da igual la
 * proporción del original.
 *
 * El encuadre se sube al 28 % en vez de centrarlo. En estas fotos —notas de
 * prensa, casi siempre personas o grupos posando— la cara cae en el tercio
 * superior, y centrar el recorte dejaba fuera las cabezas. También sube el
 * alto de 100 a 140 px: a 100 el recorte era tan estrecho que no cabía una
 * cara entera por bien que se colocara.
 */
.press-card__photo{
  /*
   * Ahora es un <img> de verdad y no un fondo, así que el recorte lo manda
   * object-fit. Se gana lo que no daba el fondo: la foto se difiere si la
   * tarjeta está fuera de pantalla y el navegador elige el tamaño de archivo.
   *
   * El encuadre no va centrado sino un poco por encima: en las fotos de acto y
   * de rueda de prensa las caras están en el tercio superior, y centrar el
   * recorte las decapitaba.
   */
  display:block;
  width:100%;height:140px;
  object-fit:cover;object-position:center 28%;
  background-color:var(--surface-2);
}
.press-card__body{padding:14px 15px 16px;display:flex;flex-direction:column;gap:8px;flex:1;}
.press-top{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.press-tag{font-size:10px;font-weight:700;letter-spacing:.03em;color:var(--accent-ink);background:var(--accent-tint);padding:3px 8px;border-radius:999px;}
.press-card time{font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums;}
.press-card h3{font-family:var(--font-body);font-weight:700;font-size:13.5px;line-height:1.35;}
.press-card h3 a{text-decoration:none;}
.press-card h3 a:hover{color:var(--accent-ink);}
.press-link{font-size:12px;font-weight:700;color:var(--accent-ink);text-decoration:none;margin-top:auto;}

/* ============ PIE ============ */
.site-footer{background:var(--footer-bg);color:var(--footer-muted);padding:64px 0 32px;}
.site-footer__top{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;
  padding-bottom:40px;border-bottom:1px solid var(--footer-border);
}
/* Sin placa blanca: el logo del pie ya es la versión en blanco sin fondo. */
.site-footer__logo img{height:52px;width:auto;margin-bottom:18px;}
.site-footer__top p{font-size:14px;max-width:32ch;margin:0 0 20px;}
.footer-social{display:flex;gap:12px;list-style:none;margin:0;padding:0;}
.footer-social a{
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--footer-border);
  display:flex;align-items:center;justify-content:center;
}
.footer-social a:hover{background:rgba(255,255,255,.08);}
.footer-social svg{width:16px;height:16px;}
.footer-col h4{font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:.03em;color:var(--footer-text);margin:0 0 16px;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.footer-col a{font-size:14px;text-decoration:none;color:var(--footer-muted);}
.footer-col a:hover{color:var(--footer-text);}
.site-footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:24px;font-size:13px;flex-wrap:wrap;}

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  .service-grid{grid-template-columns:repeat(2,1fr);}
}
/*
 * El menú se pliega en 1400 px, no en 900. Con seis entradas
 * —una de ellas "Sala de Prensa y Blog"— más el selector de idioma, el botón
 * y las cuatro redes, por debajo de ese ancho la barra iba tan apretada que
 * los rótulos se partían. Mejor el botón de hamburguesa que un menú ilegible.
 */
@media (max-width: 1400px){
  .primary-nav{display:none;}
  .menu-toggle{display:block;}
}
@media (max-width: 900px){
  .primary-nav{display:none;}
  .menu-toggle{display:block;}
  .hero h1{font-size:40px;}
  .service-grid{grid-template-columns:1fr;}
  .press-grid,.consult-grid{grid-template-columns:1fr 1fr;}
  .consult-card{height:auto;min-height:270px;}
  .events{padding:0 0 80px;}
  .events__grid{grid-template-columns:1fr;min-height:0;}
  .events__photo{position:relative;width:auto;max-width:none;height:260px;margin:0 0 32px;}
  .events__text{padding:0;}
  .training__grid,.monitor__grid{grid-template-columns:1fr;gap:40px;}
  .training__badge{right:12px;bottom:-14px;}
  .clients__logo{width:150px;height:75px;}
  /* Las alianzas se apilan en su propio bloque de 980 px, más abajo. */
  .site-footer__top{grid-template-columns:1fr;gap:28px;}
}
@media (max-width: 600px){
  .press-grid,.consult-grid{grid-template-columns:1fr;}
}

/* ============ ¿POR QUÉ SOMOS SU ALIADO ESTRATÉGICO? (portada) ============
 * Seis tarjetas con degradado de marca. Cada una lleva su icono en un disco
 * esmerilado que flota con una animación desfasada, para que el bloque
 * respire; al pasar por encima la tarjeta se levanta, el icono gira y un
 * destello la recorre en diagonal.
 */
.allies{padding:96px 0;background:var(--surface-2);position:relative;overflow:hidden;}
/*
 * EL TITULAR DE ESTA SECCIÓN VA EN UNA SOLA LÍNEA.
 *
 * Son tres afirmaciones cortas separadas por puntos —criterio, relaciones,
 * ejecución— y partidas en dos renglones dejan una idea arriba y otra a medias
 * abajo, que es justo lo contrario de lo que hace la frase: enumerar tres cosas
 * al mismo nivel.
 *
 * Dos cosas hacen falta y ninguna basta sola. Primero, quitarle el ancho máximo
 * de 660px que traen todas las cabeceras: medido, el texto a 34px ocupa 1021px y
 * dentro de 660 no cabe de ninguna manera. Segundo, `nowrap`, para que no se
 * parta aunque quepa por los pelos.
 *
 * Y el cuerpo va fluido porque una línea fija en una pantalla estrecha se sale.
 * La proporción está medida: este texto ocupa 30 veces su cuerpo en píxeles de
 * ancho, así que 2,9vw lo mantiene siempre por debajo del ancho disponible, con
 * tope en los 34px del resto de titulares para que no crezca más que ellos.
 */
.allies .section__head{position:relative;z-index:1;max-width:none;}
.allies .section__head h2{
  font-size:clamp(23px, 2.3vw, 29px);
}
/*
 * LOS TRES PILARES, EN UNA LÍNEA.
 *
 * El separador es el AIRE, no un símbolo: 2,2em entre pilares es lo que basta
 * para que se lean como tres y no como una frase corrida. Medido a ojo no
 * funcionaba —con menos se juntaban y con más se descosían—, así que va atado al
 * cuerpo de letra y se mantiene proporcionado cuando el titular crece o encoge.
 */
/*
 * LOS TRES, TURNÁNDOSE EN EL MISMO RENGLÓN.
 *
 * Superpuestos en una sola celda de rejilla, como el titular del cierre de la
 * portada: así el bloque mide siempre lo que el pilar más largo y no pega un
 * salto cada vez que cambia la frase.
 *
 * `justify-items:center` y no `text-align` porque cada pilar es una caja dentro
 * de la celda: lo que hay que centrar es la caja, no el texto de dentro.
 */
/*
 * `grid` y no `inline-grid`: en línea, el titular se colocaba AL LADO de la
 * pastilla de «por qué AF» en vez de debajo, porque un elemento en línea se
 * suma al renglón anterior. Con `grid` vuelve a ser un bloque propio, y el ancho
 * ajustado al contenido más los márgenes automáticos lo dejan centrado igual.
 */
.allies__gira{
  display:grid;
  justify-items:center;
  width:max-content;
  max-width:100%;
  margin-inline:auto;
  min-height:1.35em;
}
.allies__gira > .allies__pilar{
  grid-area:1 / 1;
  white-space:nowrap;
  /*
   * Tres segundos por pilar: son frases, no palabras sueltas como en el cierre
   * de la portada, y necesitan medio segundo más para leerse sin prisa.
   *
   * La duración sale de --n, que pone la plantilla con el número de pilares que
   * haya. Añadir un cuarto no obliga a tocar el CSS.
   */
  animation:allies-gira calc(var(--n) * 3s) infinite;
  animation-delay:calc(var(--i) * 3s);
  opacity:0;
}
/*
 * Los porcentajes son sobre el ciclo COMPLETO, así que con tres pilares cada uno
 * manda un tercio: 33,3 %. No sirven los del giro del cierre —calculados para
 * seis palabras—: con ellos cada frase se vería un sexto del tiempo y el renglón
 * pasaría la mitad del ciclo en blanco.
 */
@keyframes allies-gira{
  0%           {opacity:0;transform:translateY(.3em);}
  3%, 28%      {opacity:1;transform:translateY(0);}
  33.3%, 100%  {opacity:0;transform:translateY(-.3em);}
}
/*
 * SIN MOVIMIENTO, LAS TRES A LA VEZ.
 *
 * Y en flujo normal, no superpuestas: quietas y una encima de otra serían tres
 * frases ilegibles pisándose. Aquí sí se separan con aire, que es como estaban
 * antes de que se turnaran.
 *
 * No se deja sólo la primera —que es lo que hace el giro del cierre— porque las
 * tres son promesas distintas y quedarse con una perdería dos tercios del
 * mensaje.
 */
@media (prefers-reduced-motion: reduce){
  .allies__gira{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:baseline;
    gap:.35em 2.2em;
    min-height:0;
  }
  .allies__gira > .allies__pilar{animation:none;opacity:1;transform:none;}
}
/*
 * La palabra fuerte de cada pilar, en el tono que le toca de la progresión de
 * marca. Son las tres anclas que el ojo encuentra al pasar: sin ellas, la línea
 * es un renglón largo; con ellas, se leen tres cosas.
 *
 * En seminegrita y no en negra: lo que separa es el COLOR, y añadirle además
 * mucho peso convertiría los tres sustantivos en tres gritos.
 */
.allies__fuerte{
  font-weight:600;
  color:var(--brand-teal);
}
.allies__pilar:nth-child(2) .allies__fuerte{color:#1A4C86;}
.allies__pilar:nth-child(3) .allies__fuerte{color:var(--brand-navy);}
/* Sobre fondo oscuro el azul marino desaparece; se aclara lo justo. */
.on-dark .allies__pilar:nth-child(3) .allies__fuerte{color:#8FB4E8;}
/* El resto de cada pilar, un punto por debajo del negro del titular: es el
   matiz que acompaña a la palabra fuerte, no compite con ella. */
.allies__matiz{color:var(--text-soft);}
.on-dark .allies__matiz{color:rgba(207,224,245,.82);}
/* La entradilla no hereda el ensanchado: a 1100px de ancho sería un párrafo de
   línea larguísima, incómodo de leer. Vuelve a su medida y se queda centrada. */
.allies .section__head p{max-width:660px;margin-left:auto;margin-right:auto;}
/*
 * POR DEBAJO DE 760 SE PARTE, Y DEBE PARTIRSE.
 *
 * A partir de ahí el cuerpo que haría falta para una sola línea baja de 22px y
 * el titular dejaría de leerse como titular. Entre una línea y la legibilidad,
 * gana la legibilidad: se libera el corte y `balance` reparte las tres
 * afirmaciones entre los renglones.
 */
@media (max-width: 760px){
  /* En pantalla estrecha los tres pilares no caben en fila: `flex-wrap` los va
     apilando solo, y el hueco vertical se estrecha para que no queden sueltos. */
  .allies .section__head h2{font-size:20px;gap:.2em 1.4em;}
}
.allies-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  position:relative;z-index:1;
}
/*
 * Y también aquí faltaba el corte. Con tres columnas fijas, en un móvil de
 * 375px cada uno de los seis valores caía en 90px de ancho y, como .ally lleva
 * `overflow:hidden`, el texto se cortaba y la tarjeta se estiraba hasta 535px
 * de alto: una columna de palabras partidas.
 *
 * Dos columnas en tableta y una en móvil. Una sola, y no dos, porque con el
 * icono de 62px más el relleno de 28 a cada lado, en dos columnas al texto le
 * quedan 30px útiles.
 */
@media (max-width: 860px){
  .allies-grid{grid-template-columns:repeat(2,1fr);gap:16px;}
}
@media (max-width: 560px){
  .allies-grid{grid-template-columns:1fr;}
  .ally{padding:26px 22px 24px;}
}
.ally{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:20px;padding:32px 28px 30px;color:#fff;
  box-shadow:0 14px 34px rgba(0,32,96,.18);
  transition:transform .28s ease,box-shadow .28s ease;
}
.ally:hover{transform:translateY(-8px);box-shadow:0 26px 50px rgba(0,32,96,.30);}

/* Halo difuso en la esquina: rompe el degradado plano y da profundidad. */
.ally::before{
  content:'';position:absolute;z-index:-1;
  width:210px;height:210px;border-radius:50%;
  background:rgba(255,255,255,.16);filter:blur(26px);
  bottom:-90px;right:-70px;
}
/*
 * El destello. Vive fuera de la tarjeta (left:-60%) y sólo entra al pasar
 * por encima. skewX le da la diagonal; sin eso parecería una persiana.
 */
.ally::after{
  content:'';position:absolute;z-index:-1;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);
  transition:left .6s ease;
}
.ally:hover::after{left:120%;}

.ally__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:62px;height:62px;border-radius:18px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(4px);
  margin-bottom:20px;
  animation:ally-flota 4.5s ease-in-out infinite;
  animation-delay:var(--retardo,0s);
  transition:transform .3s ease,background .3s ease;
}
.ally__icon svg{width:30px;height:30px;}
.ally:hover .ally__icon{transform:rotate(-8deg) scale(1.08);background:rgba(255,255,255,.26);}

@keyframes ally-flota{
  0%,100%{transform:translateY(0);}
  50%    {transform:translateY(-9px);}
}

.ally h3{
  font-family:var(--font-body);font-size:13px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:#fff;
  margin:0 0 12px;
}
.ally p{margin:0;font-size:14px;color:rgba(255,255,255,.88);line-height:1.6;}

/*
 * A quien pida menos movimiento se le da la tarjeta quieta. El movimiento
 * continuo produce mareo a bastante gente, y esto es decoración.
 */
@media (prefers-reduced-motion: reduce){
  .ally__icon{animation:none;}
  .ally,.ally__icon,.ally::after{transition:none;}
  .ally:hover{transform:none;}
}

/* ============ NUESTRA METODOLOGÍA (portada) ============
 * Tercera versión. La primera iba sobre fondo oscuro con tarjetas
 * translúcidas y desplazamiento horizontal —poco contraste y la mitad de los
 * pasos fuera de pantalla—. La segunda eran números sueltos unidos por una
 * línea, sin caja, y quedaba desangelado.
 *
 * Ahora la banda va sobre FONDO OSCURO —antes estaba en claro tintado, pero
 * al reordenar la portada quedaban tres secciones claras seguidas— y cada
 * paso es una columna con su franja de color arriba, el número sobre blanco
 * en el centro y el texto en un bloque de color abajo, igual que en la
 * diapositiva 13.
 *
 * El relleno lo pone .section; aquí sólo va lo propio de esta sección.
 */
.method{background:var(--grad-dark);}
.method-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(7,1fr);gap:14px;
  align-items:stretch;
}
/*
 * Cada paso es una columna de tres piezas: franja de color, número sobre
 * blanco y bloque de color con el texto. El color entra por --paso, que pone
 * la plantilla, y de ahí lo toman las tres.
 *
 * Es flex en columna para que el bloque de texto se estire hasta el fondo:
 * así las siete columnas terminan a la misma altura aunque un texto ocupe
 * dos líneas y otro cuatro.
 */
.mstep{
  display:flex;flex-direction:column;
  border-radius:10px;overflow:hidden;
  background:var(--surface);
  box-shadow:var(--shadow-card);
}
.mstep__bar{display:block;height:30px;background:var(--paso);}
.mstep__num{
  display:block;text-align:center;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(30px,3.4vw,46px);line-height:1;
  color:var(--paso);
  padding:22px 6px 20px;
}
.mstep__texto{
  flex:1;margin:0;
  background:var(--paso);color:#fff;
  padding:18px 14px 22px;
  font-size:13.5px;line-height:1.45;text-align:center;
}

/*
 * LOS SIETE PASOS NO CABEN EN SIETE COLUMNAS EN UNA PANTALLA ESTRECHA.
 *
 * Faltaba esto: la cuadrícula mantenía `repeat(7,1fr)` en todos los tamaños,
 * así que en un móvil de 375px cada paso quedaba en una columna de 32px con
 * `overflow:hidden` y el texto se cortaba a media palabra. En pantalla ancha no
 * se notaba porque ahí cada columna mide unos 130px.
 *
 * Los cortes están puestos donde las columnas bajarían de ~100px, que es el
 * ancho con el que «Alineamos responsables, mensajes y recursos» todavía cabe
 * sin partirse en siete renglones.
 */
@media (max-width: 860px){
  .method-grid{grid-template-columns:repeat(4,1fr);}
}
@media (max-width: 620px){
  .method-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  /*
   * Con dos columnas el séptimo paso se quedaría solo en su fila, medio
   * huérfano; ocupando el ancho entero cierra la serie en vez de parecer que
   * sobra.
   */
  .method-grid > :last-child{grid-column:1 / -1;}
  .mstep__num{padding:16px 6px 14px;}
  .mstep__texto{padding:14px 12px 18px;}
}

/* ============ EBOOKS (portada) ============
 * Ocupa el sitio que tenía Escucha Digital y va oscura como aquella, para no
 * romper la alternancia claro/oscuro de la portada.
 *
 * Las portadas son la ILUSTRACIÓN, no el contenido: van pequeñas y en
 * abanico, y el peso lo llevan el titular y el botón. Grandes y en fila
 * competían con la cuadrícula de soluciones que viene justo después.
 */
.ebooks{background:var(--bg);padding:96px 0;position:relative;overflow:hidden;}
.ebooks__grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;
  position:relative;z-index:1;
}
/*
 * EL PÁRRAFO ES AHORA EL TEXTO PRINCIPAL DEL BLOQUE.
 *
 * Aquí hubo un titular, y este párrafo iba debajo en letra pequeña porque era el
 * apoyo. Al quitarse el titular se quedó solo entre la pastilla y el botón, y a
 * 16 px se leía como un pie de página en el hueco del protagonista.
 *
 * Sube a 20 px, que es el mayor tamaño con el que sigue cabiendo en dos renglones
 * dentro de esta columna de 554 px: a 22 pasa a tres y desequilibra la pareja con
 * el abanico de portadas de al lado. Medido.
 *
 * El clamp lo encoge en pantallas estrechas, donde la columna se estrecha.
 */
.ebooks__bajada{
  color:var(--text);
  /* 1,6vw y no menos: con 1,4 una pantalla de 1280 se quedaba en 17,9 px y no
     llegaba al tope. Con 1,6 lo alcanza desde 1250 en adelante. */
  font-size:clamp(17px, 1.6vw, 20px);
  line-height:1.5;
  /* El margen de arriba lo daba el titular que había aquí; sin él, el párrafo se
     pegaba a la pastilla. */
  margin:18px 0 28px;
}

/*
 * El abanico. Cada portada se coloca con --i (su posición en la pila) y de
 * ahí salen el desplazamiento, la rotación y la profundidad. Así añadir o
 * quitar una portada no obliga a reescribir reglas: la fórmula se encarga.
 */
.ebooks__pila{
  position:relative;height:310px;
  display:flex;align-items:center;justify-content:center;
}
/*
 * 250px de alto, no 300.
 *
 * El tamaño y la apertura van juntos y no se pueden tocar por separado: la
 * columna de la pila mide 420px y con portadas de 300 cada una ocupaba 291 de
 * ancho, así que abrir el abanico más de lo que estaba metía la primera
 * portada dentro del párrafo de la izquierda y sacaba la última fuera de la
 * pantalla. Medido: con 124px de separación la primera llegaba a x=422 y el
 * texto acaba en x=497.
 *
 * Bajando a 250 cabe una separación bastante mayor sin invadir nada. De hecho
 * en reposo ahora tampoco se sale por la derecha, cosa que antes sí pasaba.
 */
.ebooks__portada{
  position:absolute;
  width:auto;height:250px;
  border-radius:8px;
  background:#fff;
  box-shadow:0 18px 38px rgba(14,26,43,.22);
  transform:translateX(calc((var(--i) - 1.5) * 76px)) rotate(calc((var(--i) - 1.5) * 5deg));
  z-index:calc(10 - var(--i));
  transition:transform .35s ease, box-shadow .35s ease;
}
/*
 * Al pasar por encima la pila se abre: separación y giro mayores.
 *
 * De 96 a 100px sobre portadas más estrechas, que es lo que de verdad cuenta:
 * lo que se ve de cada libro pasa del 26% al 41% de su ancho. Con 96 sobre las
 * portadas grandes, las tres de detrás se tapaban casi del todo y el gesto no
 * llegaba a enseñar nada: se intuía que había más libros, pero no cuáles.
 */
.ebooks__pila:hover .ebooks__portada{
  transform:translateX(calc((var(--i) - 1.5) * 100px)) rotate(calc((var(--i) - 1.5) * 8deg));
  box-shadow:0 24px 46px rgba(14,26,43,.30);
}

@media (prefers-reduced-motion: reduce){
  .ebooks__portada{transition:none;}
  .ebooks__pila:hover .ebooks__portada{
    transform:translateX(calc((var(--i) - 1.5) * 76px)) rotate(calc((var(--i) - 1.5) * 5deg));
  }
}

@media (max-width: 900px){
  .ebooks__grid{grid-template-columns:1fr;gap:44px;}
  .ebooks__pila{height:290px;}
  .ebooks__portada{height:230px;}
  .ebooks__bajada{font-size:19px;}
}
@media (max-width: 600px){
  /* En móvil el abanico se aprieta para que no se salga de la pantalla. */
  .ebooks__pila{height:230px;}
  .ebooks__portada{
    height:180px;
    transform:translateX(calc((var(--i) - 1.5) * 46px)) rotate(calc((var(--i) - 1.5) * 4deg));
  }
  /*
   * Y ahí se abre mucho menos. En una pantalla táctil el :hover se dispara al
   * tocar y se queda pegado; con los 100px de escritorio, la pila se saldría
   * por los dos lados y ya no habría forma de volver a cerrarla.
   */
  .ebooks__pila:hover .ebooks__portada{
    transform:translateX(calc((var(--i) - 1.5) * 58px)) rotate(calc((var(--i) - 1.5) * 5deg));
  }
}

@media (max-width: 980px){
  /*
   * Las tres alianzas pasan a una columna: en fila, cada tarjeta quedaría tan
   * estrecha que el titular se partiría en cinco líneas. Y el conector deja de
   * ser una raya horizontal entre dos círculos para ser una vertical entre dos
   * tarjetas, que es lo que la composición pide al apilarse.
   */
  .alliances__row{flex-direction:column;align-items:center;gap:32px;}
  .alliances__item{flex:0 0 auto;max-width:420px;}
  .alliances__connector{
    width:2px;height:44px;margin-top:0;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.55),rgba(255,255,255,.05));
  }
}

/* ============ REDES EN LA CABECERA ============
 * Las mismas cuatro del pie, después del botón "Hablemos". Cada una en su
 * círculo de fondo transparente con borde.
 *
 * El borde cambia de color según dónde esté la barra: blanco sobre el hero
 * oscuro, gris del sistema en las páginas claras. Un borde blanco fijo
 * desaparecería sobre el fondo claro de las interiores.
 */
.header-social{display:flex;align-items:center;gap:9px;list-style:none;margin:0;padding:0;}
.header-social a{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:transparent;
  border:1px solid var(--border-strong);
  color:var(--text-muted);
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.header-social a:hover{color:var(--accent-ink);border-color:var(--accent);background:var(--accent-tint);}
.header-social svg{width:16px;height:16px;}

/* Sobre el hero: círculo con borde blanco, como se pidió. */
.is-over .header-social a{border-color:rgba(255,255,255,.65);color:rgba(255,255,255,.85);}
.is-over .header-social a:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.14);}

/* En pantallas estrechas desaparecen: el menú se pliega en el botón de
 * hamburguesa y las redes ya están en el pie. */
/* Las redes desaparecen antes que el menú: en una barra ya plegada aportan
 * poco y las mismas cuatro están en el pie. */
@media (max-width: 820px){
  .header-social{display:none;}
}


/* ============ SOLUCIONES: ÍNDICE DE FILAS ============
 * Sólo en la página de Soluciones. La portada usa la cuadrícula con fotos;
 * repetirla aquí hacía dudar de si se había ido a algún sitio.
 *
 * La versión anterior era un listado a dos columnas demasiado discreto: se
 * leía como una tabla de contenidos y no invitaba a entrar. Esta lo arregla
 * con tres decisiones:
 *
 *   · la fila ENTERA es el enlace, no un "ver más" de dos palabras al final
 *   · al pasar por encima entra el color desde la izquierda, el texto se
 *     vuelve blanco y la flecha avanza
 *   · cada fila lleva su tono de la progresión turquesa → azul muy oscuro,
 *     el mismo recorrido que la metodología
 */
/*
 * EL FONDO DE LA SECCIÓN
 *
 * La sección era blanca del todo y quedaba muerta al lado de las filas, que sí
 * tienen color. Ahora lleva tres capas, todas muy flojas:
 *
 *   1. Una trama de puntos en el verde de marca, como el papel milimetrado de
 *      un boceto. Se hace con un degradado radial que se repite cada 26 píxeles
 *      — ni una imagen ni un archivo más.
 *   2. Dos manchas de color —verde arriba a la izquierda, azul abajo a la
 *      derecha— cruzadas en diagonal.
 *   3. Y las manchas SE MUEVEN, muy despacio: cuarenta segundos por vuelta. No
 *      se ve moverse; lo que se nota al volver a mirar es que el fondo no está
 *      donde estaba.
 *
 * Todo va en el fondo del propio bloque y en un ::before, sin añadir ni un
 * elemento al HTML.
 */
.solutions{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  /*
   * SECCIÓN OSCURA.
   *
   * La página alterna: banner oscuro, «¿por dónde empezamos?» en claro y este
   * índice otra vez en oscuro. Antes había dos claras seguidas y las dos se
   * leían como una sola sección larga.
   */
  background-color:var(--brand-navy);
  background-image:var(--grad-dark);
  /*
   * Y encima, un rayado en diagonal muy flojo. Es la trama de un plano o de un
   * boceto — dos líneas cada dieciocho píxeles, hechas con un degradado que se
   * repite. Ni una imagen ni un archivo más.
   *
   * Antes había aquí una trama de puntos. El rayado en diagonal se lleva mejor
   * con unas filas que son todas horizontales: los puntos formaban una segunda
   * rejilla que competía con ellas.
   */
}
/*
 * Aquí hubo un rayado en diagonal y se quitó: sobre el azul oscuro las líneas no
 * se leían como textura sino como suciedad, y encima cruzaban por detrás de unas
 * filas que son todas horizontales. El fondo se queda con el degradado y las dos
 * manchas de color, que es lo que sí funciona.
 */
.solutions::before{
  content:"";
  position:absolute;inset:-20%;z-index:-1;
  background:
    radial-gradient(38% 42% at 18% 22%, rgba(4,169,156,.30) 0%, transparent 70%),
    radial-gradient(42% 46% at 82% 78%, rgba(62,155,212,.22) 0%, transparent 70%);
  animation:sol-fondo 40s ease-in-out infinite;
}
@keyframes sol-fondo{
  0%,100%{transform:translate(0,0) scale(1);}
  50%    {transform:translate(3%,-2%) scale(1.08);}
}
/* El contenido va por encima de las manchas. */
.solutions > .wrap{position:relative;z-index:1;}

/*
 * Y la lista deja de ser transparente: con el fondo texturado, los puntos se
 * verían por debajo del texto de cada fila y se leería peor.
 */
/* El titular de la sección, sobre el oscuro. */
.solutions .section__head h2{color:#fff;}
.solutions .section__head p{color:rgba(207,224,245,.78);}

/*
 * EL TABLERO: EL CUADRO CLARO BAJO LAS SOLUCIONES
 *
 * Marco de degradado por fuera, hoja clara por dentro. Las filas estaban antes
 * sueltas sobre el azul oscuro de la sección; sobre claro, el color de cada
 * solución se recorta entero al encenderse.
 *
 * La sección sigue siendo oscura —es lo que la separa de la clara que va
 * antes—; lo que cambia es que las nueve tienen ahora su propia mesa.
 *
 * Es el mismo recurso del formulario de contacto: marco de color, hoja dentro.
 */
.tablero{
  margin-top:38px;
  padding:18px;
  border-radius:26px;
  background:linear-gradient(135deg,#04A99C 0%,#0E6E9B 52%,#233D82 100%);
  box-shadow:0 30px 70px rgba(0,10,40,.45);
}
.tablero__hoja{
  padding:16px 30px;
  border-radius:16px;
  background:#F4F7FB;
}
@media (max-width: 560px){
  .tablero{padding:9px;border-radius:20px;}
  .tablero__hoja{padding:6px 12px;border-radius:12px;}
}

/*
 * EL ÍNDICE DE LAS NUEVE SOLUCIONES
 *
 * Nueve filas separadas por una línea fina: el icono en su cuadro de color, el
 * nombre con la frase debajo, y la flecha en un círculo a la derecha. La fila
 * entera es el enlace.
 *
 * Va sobre el tablero claro, y por eso los colores son de sección clara —tinta
 * azul marino, líneas suaves— aunque la sección que lo rodea sea oscura.
 *
 * Por aquí han pasado un conmutador de nombres con visor de fotos y nueve cartas
 * que se volvían. Esta es la forma que la agencia quería.
 */
.indice{
  list-style:none;margin:0;padding:0;
  border-top:1px solid var(--border);
}
.indice > li{border-bottom:1px solid var(--border);}

.indice__fila{
  position:relative;
  display:grid;
  grid-template-columns:66px 1fr 46px;
  align-items:center;
  gap:26px;
  padding:24px 20px;
  border-radius:14px;
  color:var(--text);
  text-decoration:none;
  transition:padding-left .26s cubic-bezier(.2,.8,.3,1);
  overflow:hidden;   /* que el relleno no se salga del redondeo */
}

/*
 * EL ENCENDIDO
 *
 * Al señalar, la fila se llena del tono de su solución —oscuro, a plena carga— y
 * el texto entero pasa a claro. Es la primera versión que se hizo de esto y es la
 * que la agencia quiere: entre medias se probó un relleno rebajado al 8 %, que se
 * quedaba en un sombreado y no se veía.
 *
 * El relleno entra DESLIZÁNDOSE desde la izquierda, no aparece de golpe: es un
 * pseudoelemento que ocupa toda la fila y está encogido a cero por su lado
 * izquierdo. Se anima una escala —barata para el navegador—, no el ancho.
 */
.indice__fila::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(100deg,
              var(--tono,#0A7F76) 0%,
              color-mix(in srgb, var(--tono,#0A7F76) 72%, #000814) 100%);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .38s cubic-bezier(.2,.8,.3,1);
}
/* Todo lo que va encima del relleno tiene que ir por encima de él. */
.indice__icono,
.indice__cuerpo,
.indice__flecha{position:relative;z-index:1;}

.indice__fila:hover::before,
.indice__fila:focus-visible::before{transform:scaleX(1);}
.indice__fila:hover,
.indice__fila:focus-visible{padding-left:32px;}
.indice__fila:focus-visible{outline:3px solid var(--accent-ink);outline-offset:-3px;}

/* ---- EL ICONO ---- */
.indice__icono{
  display:grid;place-items:center;
  width:66px;height:66px;
  border-radius:17px;
  background:color-mix(in srgb, var(--tono,#0A7F76) 13%, #ffffff);
  color:var(--tono,#0A7F76);
  transition:background-color .3s ease,color .3s ease,transform .3s cubic-bezier(.2,.8,.3,1);
}
.indice__icono svg{width:30px;height:30px;}
/* Sobre el relleno oscuro, el cuadro del icono se vuelve un hueco claro. */
.indice__fila:hover .indice__icono,
.indice__fila:focus-visible .indice__icono{
  background:rgba(255,255,255,.16);
  color:#fff;
  transform:scale(1.05);
}

/* ---- EL TEXTO ---- */
.indice__cuerpo{display:block;min-width:0;}
.indice__nombre{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(19px,1.8vw,23px);
  line-height:1.25;
  color:var(--brand-navy,#002060);
  transition:color .3s ease;
}
.indice__texto{
  display:block;
  margin-top:5px;
  font-size:15px;
  line-height:1.45;
  color:var(--text-muted);
  transition:color .3s ease;
}
.indice__fila:hover .indice__nombre,
.indice__fila:focus-visible .indice__nombre{color:#fff;}
.indice__fila:hover .indice__texto,
.indice__fila:focus-visible .indice__texto{color:rgba(255,255,255,.78);}

/* ---- LA FLECHA ---- */
.indice__flecha{
  display:grid;place-items:center;
  width:46px;height:46px;
  border-radius:50%;
  border:1px solid var(--border-strong);
  color:var(--text-muted);
  transition:border-color .3s ease,background-color .3s ease,color .3s ease,
             transform .3s cubic-bezier(.2,.8,.3,1);
}
.indice__flecha svg{width:19px;height:19px;}
.indice__fila:hover .indice__flecha,
.indice__fila:focus-visible .indice__flecha{
  border-color:rgba(255,255,255,.5);
  background:#fff;
  color:var(--tono,#0A7F76);
  transform:translateX(5px);
}

@media (prefers-reduced-motion: reduce){
  .indice__fila,.indice__fila::before,.indice__icono,.indice__flecha,
  .indice__nombre,.indice__texto{transition:none;}
  .indice__fila:hover{padding-left:20px;}
  .indice__icono,.indice__fila:hover .indice__icono{transform:none;}
  .indice__fila:hover .indice__flecha{transform:none;}
}
@media (max-width: 700px){
  /*
   * La flecha sobra en móvil: la fila entera ya es el enlace y ocupa espacio que
   * necesita el texto.
   */
  .indice__fila{grid-template-columns:50px 1fr;gap:14px;padding:18px 12px;}
  .indice__icono{width:50px;height:50px;border-radius:14px;}
  .indice__icono svg{width:24px;height:24px;}
  .indice__flecha{display:none;}
}

/* ============ CONTACTO: EL CIERRE DE LA PORTADA ============
 * A la izquierda la frase que se completa sola y, debajo, el disco que abre el
 * formulario. A la derecha una tarjeta con el teléfono, el correo y la
 * dirección. El formulario se despliega abajo, a todo el ancho.
 */
.pulso{
  position:relative;overflow:hidden;
  padding:112px 0 118px;
  background:var(--grad-dark);
}
.pulso__inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;
  gap:56px;align-items:center;
}
.pulso__texto{min-width:0;}
.pulso__lado{min-width:0;display:flex;justify-content:center;}

/*
 * LOS HALOS SIGUEN AL RATÓN
 *
 * Muy poco y muy despacio: unos veinte píxeles y medio segundo de retraso, y
 * los dos en sentidos contrarios porque --f va con signo distinto en cada uno.
 * No se ve moverse; se nota que el fondo está vivo, que es otra cosa.
 *
 * --mx y --my los pone el script con la posición del ratón dentro de la
 * sección, de -1 a 1. Sin script valen 0 y los halos se quedan quietos.
 */
.pulso__halo{
  transform:translate(calc(var(--mx,0) * var(--f,1) * 22px),
                      calc(var(--my,0) * var(--f,1) * 22px));
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}

.pulso__frase{
  margin:18px 0 0;
  font-size:clamp(27px,3.05vw,40px);
  line-height:1.1;
  color:#fff;
  /* Las dos piezas —el texto fijo y la palabra que gira— en una misma línea de
     base, y que la frase pueda partirse si no cabe. */
  display:flex;flex-wrap:wrap;
  align-items:baseline;
  gap:0 .28em;
}

/*
 * LA PALABRA QUE GIRA
 *
 * Las seis ocupan la MISMA celda de la rejilla, superpuestas, y sólo se ve la
 * que toca. Así la frase mide siempre lo que la palabra más larga y no da un
 * salto cada vez que cambia.
 */
.gira{display:inline-grid;text-align:left;}
.gira > span{
  grid-area:1 / 1;
  color:#8FEFDF;
  white-space:nowrap;
  /*
   * --n es cuántas palabras hay y lo pone la plantilla; --i, el turno de cada
   * una. De ahí salen la duración total y el retardo, así que añadir o quitar
   * una palabra no obliga a tocar el CSS.
   *
   * Dos segundos y medio por palabra: lo que se tarda en leerla y pensarla.
   */
  animation:gira-palabra calc(var(--n) * 2.5s) infinite;
  animation-delay:calc(var(--i) * 2.5s);
  opacity:0;
}
/*
 * Los porcentajes se calculan sobre el ciclo COMPLETO. Con seis palabras, cada
 * una manda un sexto —16,6 %—, así que aparece, se queda quieta la mayor parte
 * de su turno y se va justo antes de que entre la siguiente.
 */
@keyframes gira-palabra{
  0%          {opacity:0;transform:translateY(.35em) rotateX(-40deg);}
  2%, 14%     {opacity:1;transform:translateY(0) rotateX(0);}
  16.6%, 100% {opacity:0;transform:translateY(-.35em) rotateX(40deg);}
}

/* ---- LA TARJETA DE DATOS ---- */
/*
 * Cristal esmerilado sobre el degradado: se ve que hay algo detrás, así que la
 * tarjeta se lee como puesta encima de la página y no como un recorte.
 *
 * Las tres filas son enlaces enteros —se pulsa la fila, no el texto—: en un
 * móvil eso es la diferencia entre acertar y no acertar.
 */
.fichadatos{
  width:100%;max-width:520px;
  padding:16px;
  border-radius:26px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);
  box-shadow:0 26px 60px rgba(0,10,40,.34);
}
.fichadatos__fila{
  display:flex;align-items:flex-start;gap:17px;
  padding:20px 20px;
  border-radius:18px;
  color:#EAF4FF;
  text-decoration:none;
  transition:background-color .22s ease;
}
.fichadatos__fila:hover{background:rgba(255,255,255,.09);}
.fichadatos__fila:focus-visible{outline:2px solid #8FEFDF;outline-offset:-2px;}
/* Una raya finísima entre filas, sólo entre ellas: en los bordes sobraría. */
.fichadatos__fila + .fichadatos__fila{
  border-top:1px solid rgba(255,255,255,.09);
  border-radius:0 0 18px 18px;
}

/*
 * LA SEGUNDA LÍNEA DE TELÉFONO.
 *
 * Va pegada a la primera y sin raya en medio: las dos son el mismo dato —cómo
 * llamar— y separarlas las convertiría en dos cosas distintas. Menos aire
 * arriba por lo mismo.
 *
 * Su hueco de icono se queda vacío a propósito, sin el cuadro de color: un
 * segundo timbre al lado del primero llamaría la atención dos veces. El hueco
 * sigue ocupando sitio para que los dos números queden alineados.
 */
.fichadatos__fila--seguida{padding-top:4px;}
.fichadatos__fila + .fichadatos__fila--seguida{border-top:0;border-radius:18px;}
.fichadatos__fila--seguida .fichadatos__icono{background:none;}

.fichadatos__icono{
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  width:46px;height:46px;
  border-radius:14px;
  background:rgba(143,239,223,.14);
  color:#8FEFDF;
}
.fichadatos__icono svg{width:23px;height:23px;}

.fichadatos__par{display:flex;flex-direction:column;gap:2px;min-width:0;}
.fichadatos__que{
  font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(207,224,245,.6);
}
.fichadatos__dato{
  font-family:var(--font-display);
  /* 18 y no 21: con dos números uno debajo del otro, a 21 pesaban más que el
     titular de al lado y la tarjeta se leía como una valla de teléfonos. */
  font-size:18px;font-weight:600;line-height:1.25;
}
/* El correo es largo y no se puede partir por donde sea: se le deja bajar de
   cuerpo antes que salirse de la tarjeta. */
.fichadatos__dato--corto{font-size:17px;word-break:break-word;}
/* Y la dirección son dos o tres renglones: cuerpo de texto, no de titular. */
.fichadatos__dato--dir{
  font-family:var(--font-body);
  font-size:15.5px;font-weight:500;line-height:1.55;
  color:#CFE0F5;
}

/*
 * Cada icono se mueve como se movería la cosa que dibuja: el auricular suena
 * —dos sacudidas y una pausa larga, como un timbre—, el sobre flota y el punto
 * del mapa lanza ondas. Son animaciones de dos líneas y son lo que hace que la
 * tarjeta no parezca una tabla de datos.
 */
@keyframes ficha-timbra{
  0%,70%,100%{transform:rotate(0);}
  74%{transform:rotate(-13deg);}
  78%{transform:rotate(13deg);}
  82%{transform:rotate(-10deg);}
  86%{transform:rotate(10deg);}
  90%{transform:rotate(0);}
}
.fichadatos__icono--timbra svg{animation:ficha-timbra 4.2s ease-in-out infinite;}

@keyframes ficha-flota{
  0%,100%{transform:translateY(0);}
  50%    {transform:translateY(-3px);}
}
.fichadatos__icono--flota svg{animation:ficha-flota 3s ease-in-out infinite;}

.fichadatos__icono--onda{position:relative;}
.fichadatos__icono--onda::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  border:2px solid #8FEFDF;
  opacity:0;
  animation:ficha-onda 2.6s ease-out infinite;
}
@keyframes ficha-onda{
  0%  {transform:scale(1);opacity:.45;}
  100%{transform:scale(1.7);opacity:0;}
}

/* ---- EL DISCO IMÁN ---- */
/*
 * La casilla que despliega el formulario: fuera de la vista pero NO fuera del
 * foco. clip-path en vez de display:none porque lo que no se muestra tampoco se
 * enfoca, y se perdería poder abrirlo con el teclado. Y en posición absoluta
 * para que no cuente como una casilla más de la rejilla.
 */
.despliega__llave{
  position:absolute;width:1px;height:1px;
  margin:0;padding:0;border:0;
  clip-path:inset(50%);
  pointer-events:none;
}

/* El disco va debajo de la frase y alineado con ella, no centrado en la
   columna: cuelga del texto al que pertenece. */
.pulso__boton{margin-top:38px;display:flex;}
.iman{
  position:relative;
  display:grid;place-items:center;
  width:170px;height:170px;
  cursor:pointer;
  /*
   * La vuelta a su sitio, cuando el ratón se aleja. Mientras está cerca el
   * script pone la duración a cero para que lo siga sin arrastrarse.
   */
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}

/*
 * EL ARO DE LETRAS
 *
 * El texto va pegado a una circunferencia con textPath y el SVG entero da
 * vueltas despacio: dieciséis segundos, que es lento de verdad. Más rápido
 * marea y compite con la palabra que cambia.
 */
.iman__aro{
  position:absolute;inset:0;
  width:100%;height:100%;
  fill:#8FEFDF;
  font-family:var(--font-body);
  font-size:11px;font-weight:700;letter-spacing:.26em;
  animation:aro-gira 16s linear infinite;
}
@keyframes aro-gira{to{transform:rotate(360deg);}}

.iman__centro{
  display:grid;place-items:center;
  width:96px;height:96px;border-radius:50%;
  background:linear-gradient(140deg,#04A99C 0%,#0E6E9B 55%,#233D82 100%);
  color:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.42);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s ease;
}
.iman:hover .iman__centro{transform:scale(1.07);box-shadow:0 22px 56px rgba(0,0,0,.5);}
/* El foco del teclado tiene que verse: la casilla está oculta y el disco es el
   control. */
.despliega__llave:focus-visible ~ .pulso__texto .iman__centro{
  outline:3px solid #8FEFDF;outline-offset:6px;
}

.iman__flecha{display:flex;transition:transform .5s cubic-bezier(.2,.8,.3,1);}
.iman__flecha svg{width:26px;height:26px;}
/* Abierto, la flecha apunta arriba: el mismo disco cierra. */
.despliega__llave:checked ~ .pulso__texto .iman__flecha{transform:rotate(180deg);}

/* ---- EL FORMULARIO QUE SE DESPLIEGA ---- */
/*
 * Cerrado mide cero de alto y crece hasta lo que ocupe.
 *
 * La rejilla de una fila que pasa de 0fr a 1fr es la única forma de animar una
 * altura que no se sabe de antemano. Lo de siempre —poner un max-height grande
 * y animarlo— obliga a adivinar un número que, o se queda corto y corta el
 * formulario, o se pasa y hace que la animación empiece con un tirón.
 *
 * El hijo necesita overflow:hidden y min-height:0 o se sale por abajo mientras
 * la fila mide cero.
 */
.despliega{
  grid-column:1 / -1;
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .65s cubic-bezier(.3,.85,.3,1);
}
.despliega__dentro{overflow:hidden;min-height:0;}
.despliega__llave:checked ~ .despliega{grid-template-rows:1fr;}

/*
 * La caja sólo pone dónde y cuánto mide. Todo lo demás —el cristal, los campos,
 * las etiquetas que flotan, el botón— lo pone la clase «folio», que es la misma
 * pieza que usa la página de Contacto.
 *
 * Antes esto era una tarjeta blanca con los campos subrayados y las etiquetas
 * encima: un formulario de otro sitio metido en medio de una sección oscura.
 * Compartiendo pieza, el formulario es EL MISMO en los dos lugares donde
 * aparece, y arreglar uno arregla los dos.
 */
.despliega__caja{
  max-width:640px;
  margin:40px auto 0;
}

/*
 * LOS CAMPOS ENTRAN UNO DETRÁS DE OTRO
 *
 * Al desplegarse, cada campo sube con un poco más de retraso que el anterior.
 * La caja crece en seis décimas y los campos van llegando durante ese rato, así
 * que el hueco no se abre vacío: se va llenando mientras se abre.
 *
 * El retardo va por posición y no por una variable como en el resto del tema,
 * porque estos campos los pinta Gravity Forms y no hay dónde escribirles nada.
 * Seis renglones son los que tiene el formulario; si algún día tuviera más, los
 * de sobra entrarían con el último retardo, que es un fallo que no se nota.
 */
.despliega__llave:checked ~ .despliega .gfield,
.despliega__llave:checked ~ .despliega .gform_footer{
  animation:campo-entra .45s cubic-bezier(.2,.75,.3,1) both;
}
@keyframes campo-entra{
  from{opacity:0;transform:translateY(14px);}
  to  {opacity:1;transform:none;}
}
.despliega__llave:checked ~ .despliega .gfield:nth-child(1){animation-delay:.10s;}
.despliega__llave:checked ~ .despliega .gfield:nth-child(2){animation-delay:.16s;}
.despliega__llave:checked ~ .despliega .gfield:nth-child(3){animation-delay:.22s;}
.despliega__llave:checked ~ .despliega .gfield:nth-child(4){animation-delay:.28s;}
.despliega__llave:checked ~ .despliega .gfield:nth-child(5){animation-delay:.34s;}
.despliega__llave:checked ~ .despliega .gfield:nth-child(n+6){animation-delay:.40s;}
.despliega__llave:checked ~ .despliega .gform_footer{animation-delay:.46s;}
/* ---- LA HOJA: EL FORMULARIO DE LA PORTADA ---- */
/*
 * Una hoja blanca puesta sobre la mesa azul. Blanco del todo, que es lo que más
 * se separa del azul marino del fondo — se probó antes en cristal oscuro y en
 * papel hueso, y ninguno se despegaba lo suficiente.
 *
 * Lleva dos cosas de la hoja de un cuaderno: el filo de arriba en degradado de
 * marca, como el timbrado de un papel con membrete, y la rayita verde del
 * margen, con el texto empezando después de ella.
 *
 * Los campos son los de siempre, con su etiqueta encima. Se probó a convertirlos
 * en los huecos de una frase escrita —«Hola, soy [nombre] [apellido] y me llamas
 * al…»— y quedaba bonito de leer, pero rellenarlo era otra cosa: los huecos
 * cambiaban de sitio al escribir y el de mensaje acababa encima de su propio
 * texto. Un formulario tiene que ser fácil antes que ingenioso.
 */
.hoja{
  position:relative;overflow:hidden;
  max-width:780px;
  margin:44px auto 0;
  /* Más relleno a la izquierda: ahí va la rayita del margen y el texto tiene
     que empezar después de ella, como en un cuaderno de verdad. */
  padding:40px 44px 36px 62px;
  border-radius:24px;
  background:#fff;
  /* El filo de arriba, pintado en el propio fondo para dejar libre el
     pseudoelemento, que hace de margen. */
  background-image:linear-gradient(90deg,#04A99C 0%,#0E6E9B 55%,#233D82 100%);
  background-repeat:no-repeat;
  background-size:100% 5px;
  border:1px solid rgba(0,32,96,.08);
  box-shadow:0 30px 70px rgba(0,10,40,.5);
}

/* La rayita del margen. */
.hoja::before{
  content:"";
  position:absolute;left:38px;top:18px;bottom:18px;
  width:1px;
  background:rgba(4,169,156,.32);
}

/* ---- LOS CAMPOS ---- */
/*
 * Etiqueta pequeña en verde encima y el campo debajo, en una caja de esquinas
 * suaves. Sobre blanco no hace falta más: el contorno gris claro basta para
 * saber dónde se escribe, y la etiqueta encima no desaparece al teclear.
 */
.hoja .gform_wrapper,
.hoja .gform_wrapper form{margin:0;}
.hoja .gform_wrapper .gfield_label{
  display:block;
  margin-bottom:6px;
  font-family:var(--font-body);
  font-size:10px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-ink);
}
/* El asterisco de obligatorio, en el mismo tono que la etiqueta y no en rojo:
   los cinco campos lo son, así que en rojo la columna entera gritaba. */
.hoja .gform_wrapper .gfield_required{color:var(--accent-ink);opacity:.55;}

.hoja .gform_wrapper input[type="text"],
.hoja .gform_wrapper input[type="email"],
.hoja .gform_wrapper input[type="tel"],
.hoja .gform_wrapper textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--border-strong);
  border-radius:10px;
  background:var(--surface-2);
  font-family:var(--font-body);font-size:15.5px;
  color:var(--text);
  transition:border-color .22s ease,background-color .22s ease;
}
.hoja .gform_wrapper textarea{
  /* Alto fijo y no el que traen las diez filas del plugin, que serían 260 px:
     más que los cuatro campos de arriba juntos. Se puede estirar por la esquina. */
  height:120px;min-height:120px;resize:vertical;line-height:1.55;
}
/*
 * EL DESPLEGABLE.
 *
 * Sin esto, el navegador lo pinta a su manera: tipografía del sistema, alto
 * distinto al de los demás campos y una flecha gris de Windows. Quedaba como un
 * cuerpo extraño en medio de la columna.
 *
 * appearance:none apaga ese dibujo y deja la caja como la de un campo de texto;
 * la flecha se repone con un SVG de fondo, en el color de la marca. El hueco de
 * la derecha (padding) es para que el texto largo no se le meta debajo.
 *
 * El <option> también se pinta: en Windows hereda el fondo del sistema y con el
 * tema en oscuro salía texto claro sobre blanco.
 */
.hoja .gform_wrapper select,
.hoja .gform_wrapper .lista__boton{
  width:100%;
  padding:12px 42px 12px 14px;
  border:1px solid var(--border-strong);
  border-radius:10px;
  background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230A7F76' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
  background-size:12px 8px;
  font-family:var(--font-body);font-size:15.5px;
  color:var(--text);
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  cursor:pointer;
  transition:border-color .22s ease,background-color .22s ease;
}
.hoja .gform_wrapper select:hover,
.hoja .gform_wrapper .lista__boton:hover{border-color:var(--accent);}
.hoja .gform_wrapper select:focus,
.hoja .gform_wrapper .lista__boton:focus-visible,
.hoja .gform_wrapper .es-abierta .lista__boton{border-color:var(--accent);background-color:#fff;outline:none;}
/* Mientras no se ha elegido nada, el rótulo de dentro va en gris de marcador de
   posición: se distingue de una respuesta de verdad. */
.hoja .gform_wrapper select:invalid,
.hoja .gform_wrapper select option[value=""]{color:var(--text-muted);}
.hoja .gform_wrapper select option{color:var(--text);background:#fff;}
.hoja .gform_wrapper .lista__valor.es-vacio{color:var(--text-muted);}

.hoja .gform_wrapper input:focus,
.hoja .gform_wrapper textarea:focus{
  outline:none;
  border-color:var(--accent);
  background:#fff;
  box-shadow:none;
}
.hoja .gform_wrapper input::placeholder,
.hoja .gform_wrapper textarea::placeholder{color:var(--text-muted);}

.hoja .gform_footer{
  display:flex;justify-content:flex-end;
  margin:28px 0 0;padding:0;
}
.hoja .gform_wrapper input[type="submit"]{
  padding:14px 34px;
  border:0;border-radius:999px;
  /* En azul marino y no en verde: sobre blanco, el verde claro de la marca no
     tiene contraste suficiente para un botón. */
  background:linear-gradient(120deg,#0A7F76 0%,#233D82 100%);
  color:#fff;
  font-family:var(--font-body);
  font-size:13px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s ease;
}
.hoja .gform_wrapper input[type="submit"]:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(0,32,96,.3);
}

.hoja .gform_confirmation_message{
  padding:26px 22px;
  border-radius:16px;
  background:var(--accent-tint);
  border:1px solid var(--accent);
  font-family:var(--font-display);
  font-size:19px;line-height:1.5;
  color:var(--text);
}
.hoja .gform_wrapper .gform_validation_errors{
  color:#B3261E;
  border-color:rgba(179,38,30,.35);
  background:rgba(179,38,30,.06);
}
.hoja .gform_wrapper .validation_message{color:#B3261E;}

@media (prefers-reduced-motion: reduce){
  .hoja .gform_wrapper input,
  .hoja .gform_wrapper textarea,
  .hoja .gform_wrapper input[type="submit"]{transition:none;}
  .hoja .gform_wrapper input[type="submit"]:hover{transform:none;}
}
@media (max-width: 700px){
  /* Con 320 px de ancho, 62 de sangría son una quinta parte de la hoja gastada
     en una rayita. */
  .hoja{padding:26px 22px 24px;border-radius:18px;margin-top:32px;}
  .hoja::before{display:none;}
  .hoja .gform_footer{justify-content:stretch;}
  .hoja .gform_wrapper input[type="submit"]{width:100%;}
}

/* El repuesto de cuando Gravity Forms no está activo. */
.pulso__paso{
  display:inline-flex;align-items:center;gap:10px;
  padding-bottom:6px;
  border-bottom:2px solid var(--accent);
  color:var(--text);
  font-size:16px;font-weight:600;
  text-decoration:none;
}

@media (prefers-reduced-motion: reduce){
  /*
   * Se para todo lo que se mueve solo: la palabra se queda en la primera —la
   * frase sigue completa y con sentido—, el aro deja de girar, los iconos se
   * quedan quietos y el formulario aparece sin crecer.
   *
   * El imán no hace falta apagarlo aquí: el script ni siquiera arranca cuando
   * se ha pedido menos movimiento.
   */
  .gira > span{animation:none;opacity:0;}
  .gira > span:first-child{opacity:1;}
  .iman__aro{animation:none;}
  .fichadatos__icono--timbra svg,.fichadatos__icono--flota svg{animation:none;}
  .fichadatos__icono--onda::after{animation:none;}
  .iman,.iman__centro,.iman__flecha,.pulso__halo,.despliega,.fichadatos__fila{transition:none;}
  /* Las manchas del fondo de Soluciones se quedan donde están: el color sigue,
     el paseo no. */
  .solutions::before{animation:none;}
  /* Los campos aparecen puestos, sin entrar de uno en uno. */
  .despliega__llave:checked ~ .despliega .gfield,
  .despliega__llave:checked ~ .despliega .gform_footer{animation:none;}
  .iman:hover .iman__centro{transform:none;}
}
@media (max-width: 980px){
  .pulso{padding:84px 0 88px;}
  .pulso__inner{grid-template-columns:1fr;gap:40px;}
  .fichadatos{max-width:none;}
  /* El disco, algo más pequeño: en vertical se come demasiada pantalla. */
  .iman{width:150px;height:150px;}
  .iman__centro{width:86px;height:86px;}
  .iman__aro{font-size:9.8px;letter-spacing:.22em;}
}
@media (max-width: 600px){
  .despliega__caja{padding:26px 22px 28px;margin-top:30px;}
  .fichadatos__dato{font-size:18px;}
}


/* ============ EL DESPLEGABLE PROPIO ============
 *
 * Lo monta afce.js: un botón con lo elegido y un panel con las opciones. Sale
 * en lugar del <select> del navegador, cuya lista pinta el sistema operativo en
 * gris y no hay manera de darle los colores de la marca.
 *
 * El <select> de verdad sigue ahí —es el que se envía—, sólo escondido, y sólo
 * cuando el script ha marcado el <html> con .afce-lista. Sin JavaScript no se
 * esconde nada y queda el desplegable de siempre.
 */
.afce-lista .gform_wrapper .ginput_container_select select{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  overflow:hidden;
}
.lista{position:relative;}
/*
 * MIENTRAS ESTÁ ABIERTA, LA LISTA MANDA.
 *
 * El campo de al lado es el CAPTCHA, y su recuadro llega en un <iframe> dentro
 * de un elemento con transform —el de la animación de entrada—, que crea su
 * propio contexto de apilamiento. Al ir DESPUÉS en el documento, se pintaba
 * encima del panel y le tapaba media lista.
 *
 * No basta con subirle el z-index al panel: hay que subírselo al campo entero,
 * que es quien compite con el del CAPTCHA. Se hace sólo mientras está abierto,
 * para no dejar un campo flotando sobre los demás el resto del tiempo.
 */
.lista.es-abierta{z-index:50;}
@supports selector(:has(*)){
  .gform_wrapper .gfield:has(.lista.es-abierta){position:relative;z-index:50;}
}
.lista__boton{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;
  text-align:left;
  cursor:pointer;
}
.lista__valor{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/*
 * EL PANEL, CON EL DEGRADADO DE MARCA.
 *
 * Es el mismo verde a azul del resto del sitio, no un gris de sistema. Va por
 * encima de lo que venga debajo y con sombra larga, que es lo que lo separa del
 * formulario y hace que se lea como algo que se ha abierto ENCIMA.
 *
 * Mismo panel en los dos formularios —el claro de la portada y el oscuro de
 * Contacto—: es una lista que flota sobre la página, no parte de la ficha, así
 * que no tiene por qué cambiar de color con el fondo.
 */
.lista__opciones{
  position:absolute;z-index:40;
  top:calc(100% + 8px);left:0;right:0;
  margin:0;padding:6px;
  list-style:none;
  /* Seis opciones caben enteras; de ahí en adelante la lista se recorre, con
     una barra fina y del color del panel en vez de la gris del sistema. */
  max-height:340px;overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.45) transparent;
  border-radius:16px;
  border:1px solid rgba(143,239,223,.28);
  background:linear-gradient(150deg,#0A7F76 0%,#14608A 48%,#233D82 100%);
  box-shadow:0 26px 54px rgba(0,16,52,.38);
}
/* Cuando abajo no cabe, el panel sale por encima del campo. Quién decide eso es
   afce.js, que es el único que puede medir el hueco que queda. */
.lista.es-arriba .lista__opciones{top:auto;bottom:calc(100% + 8px);}
.lista__opcion{
  padding:11px 14px;
  border-radius:11px;
  font-family:var(--font-body);
  font-size:15px;line-height:1.35;
  color:#EAF4FF;
  cursor:pointer;
}
/*
 * La opción señalada se enciende en blanco translúcido y se adelanta un poco.
 * Es la misma señal que usan las filas de datos de Contacto: el sitio entero
 * responde igual a «estoy aquí».
 *
 * .es-encima la pone el script tanto con el ratón como con las flechas, así que
 * el recorrido con teclado se ve igual que el del ratón. Nada de :hover a secas,
 * que con el teclado no diría nada.
 */
.lista__opcion.es-encima{
  background:rgba(255,255,255,.16);
  padding-left:18px;
}
/* La elegida queda marcada con un punto verde a la derecha: al volver a abrir
   se ve dónde se estaba sin tener que leer la lista entera. */
.lista__opcion[aria-selected="true"]{
  font-weight:700;
  background:rgba(255,255,255,.10);
}
.lista__opcion[aria-selected="true"]::after{
  content:"";
  float:right;
  width:7px;height:7px;margin-top:6px;
  border-radius:50%;
  background:#8FEFDF;
}
/* «Selecciona una opción» no es una respuesta: se apaga un poco para que no
   compite con las de verdad. */
.lista__opcion.es-vacia{color:rgba(234,244,255,.62);}
/* Y en los navegadores que no entienden scrollbar-color, lo mismo a mano. */
.lista__opciones::-webkit-scrollbar{width:8px;}
.lista__opciones::-webkit-scrollbar-thumb{
  border-radius:8px;
  border:2px solid transparent;
  background-clip:padding-box;
  background-color:rgba(255,255,255,.45);
}
.lista__opciones::-webkit-scrollbar-track{background:transparent;}

@media (prefers-reduced-motion: reduce){
  .lista__opcion.es-encima{padding-left:14px;}
}

/* ============ LA MAQUETACIÓN DEL FORMULARIO ============
 * Las cuatro hojas heredadas de Gravity Forms ya no se cargan —se quitan en
 * inc/cleanup.php y allí está el porqué—, así que lo poco que hacían falta de
 * ellas se pone aquí.
 *
 * Es poco: la lista de campos es un <ul>, y el plugin reparte algunos campos en
 * medias columnas con las clases gf_left_half y gf_right_half. Nada más. Todo
 * lo demás —bordes, fondos, tipografía, botones— lo pintaba ya el tema, y hasta
 * ahora peleando contra un selector del plugin que valía como siete clases.
 *
 * Va en el archivo compartido y no en el bloque de cada página porque hay
 * formulario en dos sitios con diseños distintos: la portada y Contacto.
 */
.gform_wrapper .gform_fields{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
/* De serie, cada campo ocupa las dos columnas. */
.gform_wrapper .gfield{
  grid-column:1 / -1;
  margin:0;padding:0;
  min-width:0;
}
/* Y los que el plugin marca como media columna se ponen a un lado o al otro.
   Con la rejilla no hacen falta floats ni anchos calculados. */
.gform_wrapper .gfield.gf_left_half{grid-column:1;}
.gform_wrapper .gfield.gf_right_half{grid-column:2;}
/* Los ocultos no ocupan celda: si la dejaran, la rejilla abriría un hueco. */
.gform_wrapper .gfield.gform_hidden,
.gform_wrapper .gfield.gfield_visibility_hidden{display:none;}

/*
 * EL SEÑUELO ANTISPAM
 *
 * Gravity Forms mete un campo de mentira con un nombre que cambia en cada carga
 * —«Name», «Phone»…— que sólo rellenan los robots: si viene con algo, el envío
 * se descarta. Tiene que estar en la página pero NO verse.
 *
 * Lo escondía la hoja del plugin. Al quitarla apareció a la vista, en medio del
 * formulario, y eso rompe dos cosas a la vez: confunde a quien rellena y
 * ANULA LA PROTECCIÓN, porque una persona lo rellenaría creyendo que hace
 * falta y su mensaje se tiraría a la basura.
 *
 * Va con !important a propósito: es lo único de este archivo que no puede
 * fallar por una regla de más abajo.
 */
.gform_wrapper .gform_validation_container{
  display:none !important;
  position:absolute !important;
  left:-9999px;
}

.gform_wrapper .gfield_label{display:block;}
.gform_wrapper .ginput_container{margin:0;}
/* El asterisco de obligatorio viene envuelto dos veces en el marcado heredado;
   se aplana para que no herede el subrayado ni el espaciado del rótulo. */
.gform_wrapper .gfield_required{margin-left:.25em;text-decoration:none;}

/* La descripción bajo un campo, cuando la agencia le pone una. */
.gform_wrapper .gfield_description{
  margin-top:6px;
  font-size:13px;line-height:1.45;
  opacity:.75;
}

/*
 * LOS AVISOS DE VALIDACIÓN
 *
 * Esto sí lo pintaba el plugin y hace falta: sin ningún estilo, el aviso de
 * «este campo es obligatorio» sale como un renglón de texto corriente y no se
 * distingue de la descripción del campo.
 *
 * En rojo suave y no en el rojo chillón del plugin: sobre el azul oscuro de
 * Contacto, un rojo saturado vibra.
 */
.gform_wrapper .validation_message{
  margin-top:7px;
  font-size:13px;line-height:1.45;
  font-weight:600;
  color:#FF9E8C;
}
.gform_wrapper .gform_validation_errors{
  margin:0 0 22px;
  padding:14px 18px;
  border:1px solid rgba(255,158,140,.5);
  border-radius:12px;
  background:rgba(255,158,140,.10);
  font-size:14px;line-height:1.5;
  color:#FF9E8C;
}
.gform_wrapper .gform_validation_errors h2{margin:0;font-size:15px;color:inherit;}
.gform_wrapper .gform_validation_errors ol{margin:8px 0 0;padding-left:1.2em;}
.gform_wrapper .gform_validation_errors a{color:inherit;}
/* El campo que falla, con el borde marcado: el aviso de debajo dice qué pasa,
   pero el borde dice DÓNDE sin tener que leerlo. */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea{border-color:#FF9E8C !important;}

/*
 * La rueda de «enviando». Gravity Forms la mete al pulsar y sin estilos se
 * queda pegada al botón y a tamaño natural.
 */
.gform_wrapper .gform_ajax_spinner{
  width:22px;height:22px;
  margin-left:14px;
  vertical-align:middle;
}

/*
 * El marco invisible del envío por AJAX. El plugin lo mete al final del
 * formulario; si no se esconde, deja una franja en blanco debajo del botón.
 */
.gform_wrapper iframe.gform_ajax_frame,
iframe.gform_ajax_frame{
  display:block;
  width:0;height:0;border:0;
  visibility:hidden;
}

/* El aro de campo enfocado lo pone cada página con su color; aquí sólo se quita
   el del navegador, que no cuadra con ninguno de los dos diseños. */
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus{outline:none;}

@media (max-width: 600px){
  /* En una pantalla estrecha no hay medias columnas: dos campos de 140 px no
     se rellenan cómodamente con el pulgar. */
  .gform_wrapper .gform_fields{grid-template-columns:1fr;gap:16px;}
  .gform_wrapper .gfield.gf_left_half,
  .gform_wrapper .gfield.gf_right_half{grid-column:1;}
}

/* ---- EL MENÚ EN PANTALLA ESTRECHA ---- */
/*
 * Por debajo de 1400 px la barra de arriba no cabe —siete entradas, el selector
 * de idioma, el botón y las cuatro redes— y se sustituye por el botón de las
 * tres rayas. Lo que faltaba era el panel: el botón existía desde el principio,
 * pero no había nada que abrir, así que no hacía nada.
 *
 * El panel NO es un segundo menú: es el mismo <nav>, colocado debajo de la
 * cabecera y desplegado. Un segundo menú habría que mantenerlo en dos sitios y
 * un día dejarían de decir lo mismo.
 */
@media (max-width: 1400px){

  /*
   * Cerrado, el panel está ahí pero recogido: altura cero y sin poder recibir el
   * ratón ni el tabulador. No se usa display:none porque desde ahí no se puede
   * animar la apertura.
   */
  .nav-principal{
    position:absolute;
    top:100%;left:0;right:0;
    display:block;
    max-height:0;
    overflow:hidden;
    background:var(--surface,#fff);
    border-top:1px solid var(--border);
    box-shadow:0 26px 50px rgba(0,32,96,.16);
    visibility:hidden;
    transition:max-height .34s cubic-bezier(.25,.8,.3,1),visibility 0s linear .34s;
  }

  /* Abierto: crece hasta donde haga falta, con tope para que quepa en pantalla. */
  .site-header.menu-abierto .nav-principal{
    max-height:min(78vh,620px);
    overflow-y:auto;
    visibility:visible;
    transition:max-height .34s cubic-bezier(.25,.8,.3,1),visibility 0s;
  }

  /*
   * La cabecera pasa a ser el origen de coordenadas del panel. Y sube de capa:
   * sin esto, el panel desplegado queda por debajo de la primera sección de la
   * página y se ve cortado.
   */
  .site-header{position:relative;z-index:60;}

  /* Las entradas, una debajo de otra y con área de toque de sobra. */
  .nav-principal .primary-nav{
    display:block;
    padding:8px 0 14px;
  }
  .nav-principal .primary-nav li{
    white-space:normal;
    border-bottom:1px solid var(--border);
  }
  .nav-principal .primary-nav li:last-child{border-bottom:0;}
  /*
   * CADA ENTRADA SE ENCIENDE AL PASAR POR ENCIMA
   *
   * Fondo con el degradado de marca —turquesa a azul marino—, el texto en blanco
   * y una barra clara a la izquierda. En un panel de siete renglones iguales,
   * saber cuál se va a pulsar antes de pulsarlo es la diferencia entre elegir y
   * acertar.
   *
   * La barra se hace con un borde izquierdo transparente que siempre está: si se
   * añadiera al señalar, el texto daría un salto de cuatro píxeles.
   */
  .nav-principal .primary-nav a{
    display:block;
    padding:15px 22px;
    border-bottom:0;          /* el subrayado de la barra no pinta aquí */
    border-left:4px solid transparent;
    font-size:16px;
    transition:background-color .2s ease,color .2s ease,border-left-color .2s ease;
  }
  .nav-principal .primary-nav a:hover,
  .nav-principal .primary-nav a:focus-visible{
    background:linear-gradient(100deg,#04A99C 0%,#0E6E9B 55%,#233D82 100%);
    color:#fff;
    border-left-color:#8FEFDF;
  }

  /*
   * Y la página en la que se está, marcada de partida y con el degradado al
   * revés: el mismo acorde, pero se distingue del renglón que se está señalando.
   */
  .nav-principal .primary-nav .current-menu-item > a,
  .nav-principal .primary-nav .current_page_item > a{
    background:linear-gradient(100deg,#233D82 0%,#0E6E9B 50%,#04A99C 100%);
    color:#fff;
    border-left-color:#8FEFDF;
    font-weight:700;
  }

  /*
   * Sobre el hero, la cabecera va en blanco; el panel es claro y sus enlaces
   * tienen que volver a tinta o se leerían blancos sobre blanco.
   */
  .is-over .nav-principal .primary-nav a{color:var(--text);}
  .is-over .nav-principal .primary-nav a:hover{color:#fff;}

  /* Las tres rayas se cruzan al abrir: el mismo botón dice cómo cerrar. */
  .menu-toggle svg{transition:transform .3s cubic-bezier(.25,.8,.3,1);}
  .site-header.menu-abierto .menu-toggle svg{transform:rotate(90deg);}
}

@media (prefers-reduced-motion: reduce){
  .nav-principal,.menu-toggle svg,.nav-principal .primary-nav a{transition:none;}
}

/* ---- LA CABECERA EN UN TELÉFONO ---- */
/*
 * A 375 px la barra no cabía y empujaba la página entera: el documento medía 494
 * de ancho y el sitio se movía de lado en TODAS las páginas, no sólo en la
 * portada. La culpa era del bloque de la derecha —idioma, botón «Hablemos» y las
 * tres rayas— que suma 233 px, más el logo y los márgenes de 32.
 *
 * Aquí se recorta lo que sobra por orden de importancia: primero el aire, luego
 * el tamaño del logo y, si aún no cabe, el botón — que no se pierde, porque
 * «Contáctanos» está en el propio menú desplegable y el teléfono y el correo en
 * el pie.
 */
@media (max-width: 700px){

  .site-header__inner{
    padding:12px 16px;
    gap:12px;
  }

  .logo img{height:38px;}

  .header-actions{gap:12px;}

  /* El botón, más compacto: mismo texto, menos caja. */
  .header-actions .btn-sm{padding:8px 14px;font-size:12.5px;}
}

@media (max-width: 480px){
  /*
   * Ya no hay sitio para el botón. Se va él y no el selector de idioma: el
   * idioma no está en ningún otro sitio de la página, y «Hablemos» sí —es la
   * última entrada del menú que abre el botón de al lado—.
   */
  .header-actions .btn-sm{display:none;}

  .logo img{height:34px;}
}