/*
 * Estilos de las páginas interiores y del blog.
 *
 * Van aparte de components.css (que es la portada) para que cada archivo se
 * pueda leer entero de una sentada. Si mañana alguien busca por qué una
 * tarjeta de testimonio se ve como se ve, sabe que está aquí y no entre
 * ochocientas líneas de la portada.
 */

/* ============ BANNER DE PÁGINA INTERIOR ============
 * Las interiores no llevan hero de foto: un banner corto con el degradado
 * de marca separa la cabecera del contenido y pesa mucho menos que cargar
 * una fotografía grande en cada página.
 */
.pbanner{background:var(--grad-dark);color:#fff;padding:96px 0 64px;position:relative;overflow:hidden;}
/* Con foto el banner se parte en dos; sin ella sigue a ancho completo. */
.pbanner__inner{display:grid;grid-template-columns:1fr;gap:0;}
/* La columna de la foto va algo más ancha que la del texto: la foto del equipo
   es panorámica y, a partes iguales, quedaba baja y perdida al lado del titular. */
.pbanner--con-foto .pbanner__inner{grid-template-columns:.92fr 1.08fr;gap:48px;align-items:center;}
/*
 * Con los sectores el reparto es muy desigual a propósito: casi tres cuartos
 * del ancho para ellos y 100 px de hueco. Los cinco iconos son grandes y
 * necesitan sitio; el titular, en cambio, cabe en poco. De paso quedan bien
 * separados del texto y no se leen como una sola columna.
 *
 * El titular baja de 46 a 38 px SOLO en esta variante: a 46 px, en una columna
 * tan estrecha, se partía en cuatro renglones.
 */
.pbanner--con-lista .pbanner__inner{
  grid-template-columns:.58fr 1.42fr;
  gap:112px;
  align-items:center;
}
/*
 * text-wrap:balance reparte las palabras entre los renglones en vez de llenar
 * el primero y dejar el resto colgando: con él, "Con quiénes" y "hemos
 * trabajado." caen cada uno en su línea completa y no se parte la expresión.
 * max-width en ch, no en px, para que el corte lo mande el número de caracteres.
 */
/*
 * La clase se repite —.pbanner.pbanner--con-lista— para ganar peso, no por gusto.
 *
 * Con un solo .pbanner--con-lista h1 esta regla empata con .pbanner h1 (las dos
 * valen 0,1,1) y, al ir la otra más abajo en la hoja, el empate lo ganaba ella:
 * los 38 px de aquí no se aplicaron nunca y el titular salía a 46. No se veía
 * porque el titular era corto; con el actual se parte en cinco renglones dentro
 * de una columna de 291 px.
 */
.pbanner.pbanner--con-lista h1{
  font-size:38px;
  max-width:15ch;
  text-wrap:balance;
}
.pbanner--con-lista .pbanner__texto p{font-size:15.5px;}
/*
 * EL COLLAGE DE INSTANTÁNEAS
 *
 * Varias copias de Polaroid —papel blanco alrededor, más ancho abajo— dejadas
 * una encima de otra, cada una con su giro, como salen de un sobre de revelado.
 * Se posan al cargar la página, de abajo arriba: la última en caer es la
 * principal, y por eso es la que manda.
 *
 * Cuando sólo hay una foto, la pila es de una y todo esto se queda en la
 * instantánea de siempre, en su sitio y sin montaje.
 */
.pbanner__collage{position:relative;}

.pbanner__foto{
  position:relative;   /* ancla la cinta adhesiva, que va posicionada */
  margin:0;
  background:#fff;
  /* El margen de abajo, más ancho, es el de una Polaroid de verdad. */
  padding:14px 14px 48px;
  border-radius:3px;
  box-shadow:0 26px 54px rgba(0,0,0,.42);
  transform:rotate(-2deg);
  transition:transform .35s ease, box-shadow .35s ease;
}
/*
 * El hueco tiene la proporción de su foto, que cada página pasa en --prop:
 * recortar gente en una foto de equipo es justo lo que no se puede hacer, y
 * una proporción redonda de catálogo —4/3— se come los extremos.
 */
.pbanner__foto-img{
  aspect-ratio:var(--prop,1600/871);
  background-size:cover;background-position:center;background-repeat:no-repeat;
}

/*
 * EL REPARTO CUANDO SON DOS
 *
 * La de abajo se va arriba y a la derecha, girada al otro lado; la principal
 * baja, se arrima a la izquierda y le tapa la esquina. El solape es lo que
 * convierte dos fotos en un montón de copias.
 *
 * El collage reserva su alto con la principal, que es la que va en el flujo;
 * la otra está posicionada y no empuja nada.
 */
.pbanner__collage--doble{padding:56px 0 18px;}
.pbanner__collage--doble .pbanner__foto--una{
  width:78%;
  margin-left:0;
  transform:rotate(-2.5deg);
  z-index:2;
}
.pbanner__collage--doble .pbanner__foto--dos{
  position:absolute;
  top:0;right:0;
  width:62%;
  padding:10px 10px 30px;
  transform:rotate(5deg);
  box-shadow:0 18px 38px rgba(0,0,0,.4);
  z-index:1;
}
/*
 * La de abajo se ve ENTERA —contain—: es la foto de todo el equipo, más
 * panorámica que su marco, y ahí cortar gente es justo lo que no se puede
 * hacer. Lo que sobra a los lados queda en blanco, el color del papel.
 */
.pbanner__collage--doble .pbanner__foto--dos .pbanner__foto-img{
  background-size:contain;
  background-color:#fff;
}
/*
 * SE POSAN, NO APARECEN DE GOLPE
 *
 * Cada copia cae desde un poco más arriba y con un grado de más de giro, y se
 * asienta en su sitio. Primero la de abajo; la principal, tres décimas después,
 * encima. Es la misma secuencia con la que se dejan unas fotos sobre la mesa.
 */
@keyframes pbanner-posarse{
  from{opacity:0;transform:translate(14px,-26px) rotate(var(--giro-cae)) scale(1.03);}
  to  {opacity:1;}
}
.pbanner__collage--doble .pbanner__foto--dos{
  --giro-cae:11deg;
  animation:pbanner-posarse .75s cubic-bezier(.2,.75,.3,1) .15s both;
}
.pbanner__collage--doble .pbanner__foto--una{
  --giro-cae:-9deg;
  animation:pbanner-posarse .75s cubic-bezier(.2,.75,.3,1) .45s both;
}
/*
 * Al señalar una copia, esa pasa al frente y se endereza: la de abajo se puede
 * mirar entera sin que haya que esconder la de arriba.
 */
.pbanner__collage--doble .pbanner__foto:hover{
  transform:rotate(0deg) scale(1.03);
  box-shadow:0 30px 60px rgba(0,0,0,.5);
  z-index:3;
}
/*
 * LA CINTA ADHESIVA
 *
 * Un trozo de cinta translúcida en degradado de marca, cruzado en la esquina
 * superior izquierda, como si sujetara la foto al fondo. Es lo que termina de
 * vender la idea de instantánea: sin ella el marco blanco es sólo un borde.
 * Va girada al contrario que la foto para que se lea como pegada encima.
 */
.pbanner__cinta{
  position:absolute;top:-14px;left:-30px;
  width:130px;height:34px;
  background:linear-gradient(120deg,rgba(4,169,156,.85),rgba(35,61,130,.85));
  transform:rotate(-32deg);
  box-shadow:0 3px 10px rgba(0,0,0,.22);
  z-index:2;
  /* Bordes dentados como los de una cinta cortada a mano. */
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 7px);
          mask-image:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 7px);
}
.pbanner__foto:hover{transform:rotate(0deg);}
@media (prefers-reduced-motion: reduce){
  .pbanner__foto{transition:none;}
  .pbanner__collage--doble .pbanner__foto{animation:none;}
}

.pbanner h1{color:#fff;font-size:46px;max-width:18ch;margin:18px 0 0;}
/*
 * EL TITULAR DE EBOOKS, EN DOS RENGLONES.
 *
 * Los 18ch que valen para el resto de banners lo dejaban en tres, porque es el
 * titular más largo de todos: 1348px de texto contra los 505 que caben. Con 26ch
 * entra en dos.
 *
 * Va acotado a esta plantilla y no cambiado en `.pbanner h1` a secas, que es
 * global: medido, subirlo a 26ch de golpe también dejaría «Con quiénes hemos
 * trabajado» y «¿Qué opinan nuestros clientes?» en una sola línea y cambiaría el
 * aspecto de cuatro páginas que nadie ha pedido tocar.
 *
 * La clase la pone WordPress con el nombre de la plantilla, así que identifica
 * la página de Ebooks sin depender de su dirección ni de su identificador, que
 * cambian entre local y producción.
 */
.page-template-template-recursos .pbanner h1{max-width:26ch;}
/*
 * Y el de Sala de Prensa necesita algo más: su primera mitad —«Cuando la
 * estrategia genera relevancia,»— mide 794px y con los 505 de serie se partía
 * antes de tiempo. Con 29ch entra justa y la segunda queda sola en su renglón.
 *
 * `.blog` es la clase que pone WordPress en la página de entradas; no depende de
 * la dirección ni del identificador, que cambian entre local y producción.
 */
.blog .pbanner h1{max-width:29ch;}
/*
 * EL TITULAR DE TESTIMONIOS: MÁS PEQUEÑO Y EN DOS RENGLONES.
 *
 * Es el titular más largo del sitio y a 46px caía en cuatro líneas, que junto al
 * micrófono de al lado dejaba el banner apretado. Bajarlo de cuerpo sin más no
 * bastaba: seguía en tres. Hacen falta las dos cosas —menos cuerpo y más ancho—
 * para que entre en dos.
 *
 * Los 28ch dan 598px de texto y la columna mide 614, así que no llega a meterse
 * debajo del emblema. A 36px el texto llenaría los 614 justos, sin holgura para
 * el inglés; 35px deja margen y a ojo no se distingue. Medido, no supuesto.
 */
.page-template-template-testimonios .pbanner h1{
  font-size:35px;
  max-width:28ch;
}
@media (max-width: 900px){
  .page-template-template-testimonios .pbanner h1{font-size:27px;}
}

/*
 * LA SEGUNDA MITAD DEL TITULAR, ILUMINADA.
 *
 * El degradado de marca pintado DENTRO de las letras y recorriéndolas despacio,
 * como una luz que pasa por encima. No es un fondo detrás del texto: es el texto
 * mismo el que lleva el color.
 *
 * Se hace recortando el degradado con la forma de las letras —`background-clip:
 * text`— y dejando el color del texto transparente para que se vea a través.
 *
 * EL RESPALDO ES LO IMPORTANTE AQUÍ.
 *
 * `color:transparent` con un navegador que no sepa recortar el fondo deja el
 * titular INVISIBLE, no feo: invisible. Por eso el color transparente vive dentro
 * de un `@supports` y fuera queda el turquesa claro sin más. Quien no tenga el
 * recorte lee el titular en color plano; quien lo tenga, ve la luz pasar.
 *
 * El degradado mide el doble de ancho que el texto y lo que se anima es dónde
 * empieza: así la luz entra por un lado y sale por el otro en vez de aparecer y
 * desaparecer. Ocho segundos, que es lento — esto acompaña la lectura, no la
 * interrumpe.
 */
.pbanner__brillo{
  display:block;
  color:#8FEFDF;
}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .pbanner__brillo{
    /*
     * La luz va en una banda corta y el resto del texto se queda en el turquesa
     * de reposo: así se ve PASAR algo, que es lo que se pedía. Repartida por todo
     * el ancho, como estaba, se leía como un texto de dos colores.
     */
    background:linear-gradient(100deg,
                #3FC7B8 0%,
                #3FC7B8 34%,
                #9AECDD 43%,
                #DFFBF5 50%,
                #93E2F2 57%,
                #3FC7B8 66%,
                #3FC7B8 100%);
    background-size:260% 100%;
    -webkit-background-clip:text;
            background-clip:text;
    color:transparent;
    animation:pbanner-luz 4.2s linear infinite,
               pbanner-fulgor 4.2s ease-in-out infinite;
  }
}
/*
 * Y ADEMÁS, EL FULGOR.
 *
 * El degradado solo no bastaba: cambiaba de color, pero no parecía encenderse.
 * Esto añade un halo que respira al mismo compás que pasa la cresta. Es un
 * text-shadow, que con el relleno del texto en transparente no pinta una sombra
 * debajo de las letras sino un resplandor alrededor de ellas — justo lo que
 * hace falta.
 *
 * Va sólo en los titulares sobre fondo oscuro: sobre claro, un halo no ilumina,
 * ensucia.
 */
@keyframes pbanner-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 pbanner-luz{
  from {background-position:0% 0;}
  to   {background-position:-160% 0;}
}
/*
 * Con menos movimiento pedido, el degradado se queda quieto: sigue viéndose el
 * color recorriendo las letras, pero sin que nada se desplace.
 */
@media (prefers-reduced-motion: reduce){
  .pbanner__brillo{animation:none;background-position:0 0;text-shadow:none;}
}
/*
 * El titular con la palabra que cambia. Usa las mismas clases .gira que el
 * cierre de la portada —los estilos del giro viven en components.css—; aquí
 * sólo se ajusta cómo se coloca dentro del banner.
 *
 * max-width en none: la frase mide lo que la palabra más larga y con el tope
 * de 18ch se partía en tres renglones.
 */
.pbanner__frase{
  display:flex;flex-wrap:wrap;
  align-items:baseline;
  gap:0 .28em;
  max-width:none;
  line-height:1.12;
}
.pbanner p{color:#CFE0F5;font-size:17px;max-width:52ch;margin:16px 0 0;}

/* ---- EL FOCO: EL BANNER DE SOLUCIONES ---- */
/*
 * LA LINTERNA BARRE Y ESCRIBE
 *
 * La linterna recorre los tres renglones, uno cada vez. Al que le toca le pasan
 * tres cosas a la vez: se enciende, CRECE y se ESCRIBE letra a letra bajo la luz.
 * Los otros dos se quedan en penumbra y a su tamaño, legibles pero apagados.
 *
 * Encaja con lo que hace la casa mejor que ninguna de las cosas que cayeron antes
 * en este hueco: dar visibilidad es, literalmente, alumbrar lo que sin luz no se
 * ve, y lo que hace una agencia de comunicación es escribirlo.
 *
 * LAS FRASES NO SE MUEVEN DE RENGLÓN, LA LUZ SÍ
 *
 * Cada frase se queda donde está y lo que viaja es el haz. La que está alumbrada
 * crece desde su filo IZQUIERDO, que es por donde están alineadas las tres: así
 * las tres arrancan del mismo margen, como tres renglones de un cuaderno, y la que
 * crece se estira hacia el hueco libre en vez de moverse de sitio.
 */
.foco{
  /*
   * EL ANCHO DE LA LINTERNA MANDA SOBRE TODO LO DEMÁS.
   *
   * De él salen dos cosas que tienen que cuadrar al píxel: dónde está la lente
   * —el punto del que sale la luz— y por tanto dónde nace el haz. Con el ancho
   * escrito en tres sitios, cambiar el tamaño del dibujo descolocaba el cono; con
   * una sola variable, todo la sigue.
   */
  /*
   * EL ANCHO DE LA LINTERNA MANDA SOBRE TODO LO DEMÁS.
   *
   * De él salen dos cosas que tienen que cuadrar al píxel: dónde está la lente
   * —el punto del que sale la luz— y por tanto dónde nace el haz. Con el ancho
   * escrito en tres sitios, cambiar el tamaño del dibujo descolocaba el cono; con
   * una sola variable, todo la sigue.
   *
   * En píxeles y no en vw a propósito: con `vw` el tamaño depende de si hay barra
   * de desplazamiento y de cómo escale el navegador, y aquí hace falta un número
   * que se pueda medir y reproducir.
   */
  --lampara:196px;

  /* La altura fija de cada renglón y el hueco entre ellos: son lo que mantiene los
     tres a la misma distancia y el barrido simétrico. */
  --renglon:46px;
  --hueco:24px;

  /*
   * CUÁNTO CRECE LA FRASE ALUMBRADA: de 19 píxeles a 29,5.
   *
   * Va aquí arriba, con las demás medidas del bloque, para cambiarlo en un sitio y
   * no dentro de los fotogramas.
   *
   * Se intentó hacerlo fluido con `clamp(1.24, 0.9 + 0.05vw, 1.55)` y es CSS
   * INVÁLIDO: `scale` quiere un número y ahí se está sumando un número a una
   * longitud, que no se puede. El navegador no avisa —descarta la variable sin
   * más— y el síntoma fue que la frase dejó de crecer del todo. Si algún día se
   * quiere fluido, hay que dividir longitud entre longitud para obtener un número.
   */
  --crece:1.55;

  position:relative;
  display:flex;align-items:center;justify-content:flex-end;
  gap:22px;
  min-height:290px;
  margin-left:auto;
  padding:18px 0;

  /*
   * Y EL CONJUNTO —FRASES Y LINTERNA— SE VA A LA DERECHA DEL TODO.
   *
   * El bloque cuelga del contenedor centrado de la página, y ese contenedor tiene
   * un ancho máximo: cuanto más grande es la pantalla, más aire deja a los lados y
   * más descolgada hacia el centro se queda la linterna. Con un número fijo se
   * arregla a un ancho y se estropea en los demás.
   *
   * Así que el empujón se calcula: `50vw - 590` es lo que sobra a cada lado del
   * contenedor —1180 de ancho, la mitad son 590— y de ahí se descuentan los píxeles
   * que la linterna acaba por dentro de ese borde y los veinte que se le dejan de
   * respiro contra el filo de la pantalla. Los 570 salen de medirlo, no de la
   * cuenta a pelo: el bloque no siempre puede estirarse todo lo que el margen le
   * pide, porque la columna en la que vive tiene su propio ancho. El resultado es que la linterna queda
   * SIEMPRE a la misma distancia del borde, mida lo que mida el monitor.
   *
   * Los dos topes de `clamp` son las dos formas de que esto salga mal: por arriba,
   * el cero, porque en pantallas donde el contenedor ya toca los lados la cuenta
   * sale positiva y empujaría hacia la izquierda; por abajo, los 160 píxeles,
   * porque en un monitor de dos mil píxeles la cuenta pediría casi cuatrocientos y
   * el bloque se separaría tanto del titular que dejarían de leerse como una sola
   * cosa. Hasta 1704 de ancho el tope no llega a tocar y la distancia al borde es
   * exacta; de ahí para arriba se queda quieto y el aire vuelve a crecer.
   *
   * En margen negativo y no en desplazamiento: así el hueco que deja lo aprovecha
   * la columna del titular, que es la que anda justa de sitio.
   */
  margin-right:clamp(-260px, calc(-50vw + 570px), 0px);
}

/*
 * EL HAZ
 *
 * Un trapecio recortado que sale de la boca de la linterna y se abre hacia la
 * izquierda: estrecho a la derecha, ancho a la izquierda. El recorte hace la
 * forma; el degradado, que la luz se apague con la distancia; y el desenfoque,
 * que el filo no se lea como el borde de una figura.
 */
.foco__haz{
  position:absolute;
  top:50%;
  /*
   * El vértice del cono va justo en la lente. La lente está al 16,19 % del ancho
   * del dibujo, así que medida desde el filo derecho —que es donde acaba la
   * linterna— queda al 83,81 %.
   */
  right:calc(var(--lampara) * 0.8381);
  width:min(560px,82%);
  height:380px;
  translate:0 -50%;
  transform-origin:right center;
  background:linear-gradient(to left,
              rgba(214,240,255,.36) 0%,
              rgba(190,230,255,.18) 40%,
              rgba(170,220,255,.05) 74%,
              transparent 100%);
  clip-path:polygon(100% 44%, 100% 56%, 0% 100%, 0% 0%);
  filter:blur(9px);
  animation:foco-barre 9s cubic-bezier(.5,0,.3,1) infinite,
            foco-enfoca 9s cubic-bezier(.5,0,.3,1) infinite,
            foco-acerca-haz 9s cubic-bezier(.5,0,.3,1) infinite,
            foco-pulso 5.5s ease-in-out infinite;
  pointer-events:none;
}

/*
 * ENFOCAR
 *
 * Es lo que hace una linterna de verdad y lo que hace la casa: abrir el haz para
 * buscar y cerrarlo para fijar. Mientras baja de un renglón al siguiente el cono
 * se ABRE —luz repartida, más floja— y mientras escribe se CIERRA, porque escribir
 * con luz pide un trazo fino. La misma cantidad de luz en menos sitio alumbra más:
 * por eso la opacidad sube justo cuando el cono se estrecha.
 *
 * Los dos recortes tienen los mismos cuatro vértices, que es la condición para que
 * el navegador sepa interpolar de uno a otro. Con distinto número de puntos el
 * cambio sería un salto seco.
 */
@keyframes foco-enfoca{
  0%,  28%     {clip-path:polygon(100% 46.4%, 100% 53.6%, 0% 74%, 0% 26%);  opacity:1;}
  30.6%        {clip-path:polygon(100% 42.6%, 100% 57.4%, 0% 106%, 0% -6%); opacity:.62;}
  33.3%, 61.3% {clip-path:polygon(100% 46.4%, 100% 53.6%, 0% 74%, 0% 26%);  opacity:1;}
  64%          {clip-path:polygon(100% 42.6%, 100% 57.4%, 0% 106%, 0% -6%); opacity:.62;}
  66.6%, 94.6% {clip-path:polygon(100% 46.4%, 100% 53.6%, 0% 74%, 0% 26%);  opacity:1;}
  97.3%        {clip-path:polygon(100% 42.6%, 100% 57.4%, 0% 106%, 0% -6%); opacity:.62;}
  100%         {clip-path:polygon(100% 46.4%, 100% 53.6%, 0% 74%, 0% 26%);  opacity:1;}
}

/*
 * EL POLVO EN EL AIRE
 *
 * Lo que hace visible un haz de luz en una habitación no es la luz: es el polvo
 * que flota dentro. Sin él, un cono de luz es un triángulo pintado; con él, es
 * aire iluminado.
 *
 * Son tres capas de puntitos de tamaños distintos, cada una avanzando a su ritmo y
 * en su dirección. No hay ni un elemento por mota: son degradados radiales
 * repetidos, y lo que se mueve es dónde empieza el dibujo. Treinta y cuatro
 * segundos por vuelta, que es lento de verdad — el polvo no corre.
 *
 * Ocupa el mismo sitio que el haz y gira con él, pero SIN el desenfoque: el haz va
 * borroso para que su filo no se lea como el borde de una figura, y las motas
 * tienen que verse nítidas o no son motas.
 */
.foco__motas{
  position:absolute;
  top:50%;
  right:calc(var(--lampara) * 0.8381);
  width:min(560px,82%);
  height:380px;
  translate:0 -50%;
  transform-origin:right center;
  clip-path:polygon(100% 44%, 100% 56%, 0% 100%, 0% 0%);

  background-image:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,.55) 0 1.5px, transparent 1.6px),
    radial-gradient(circle at 70% 65%, rgba(214,240,255,.42) 0 1.1px, transparent 1.2px),
    radial-gradient(circle at 45% 20%, rgba(255,255,255,.30) 0 1.9px, transparent 2px);
  background-size:118px 96px, 86px 132px, 164px 148px;

  /* Se apagan hacia la izquierda, igual que la luz: en la punta del cono, donde ya
     casi no llega nada, no puede haber polvo brillando. */
  -webkit-mask-image:linear-gradient(to left, #000 0%, rgba(0,0,0,.5) 45%, transparent 88%);
          mask-image:linear-gradient(to left, #000 0%, rgba(0,0,0,.5) 45%, transparent 88%);

  /* El polvo se recorta con el mismo cono: si el haz se cierra y las motas no, se
     ven puntitos brillando fuera de la luz. */
  animation:foco-barre 9s cubic-bezier(.5,0,.3,1) infinite,
            foco-enfoca 9s cubic-bezier(.5,0,.3,1) infinite,
            foco-acerca-haz 9s cubic-bezier(.5,0,.3,1) infinite,
            foco-motas 34s linear infinite,
            foco-pulso 5.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes foco-motas{
  from {background-position:0 0, 0 0, 0 0;}
  to   {background-position:-142px -58px, 108px -94px, -76px 72px;}
}

/*
 * EL PULSO DE LA MANO
 *
 * Encima del barrido, un temblor de medio grado que va a su aire: cinco segundos y
 * medio de ciclo contra los nueve del barrido, así que nunca coinciden y el
 * conjunto no cae en un patrón reconocible. Es lo que separa un dibujo que gira de
 * una linterna que alguien sostiene.
 *
 * Puede ir a la vez que el barrido porque son propiedades distintas: el barrido
 * usa `rotate` y el temblor `transform`, y el navegador las compone en ese orden
 * sin que ninguna pise a la otra. Con las dos en `transform` habría que elegir.
 */
@keyframes foco-pulso{
  0%,100% {transform:rotate(.3deg);}
  50%     {transform:rotate(-.3deg);}
}

/*
 * EL BARRIDO, QUE ES UN TRAZO
 *
 * No son tres posiciones fijas con un salto entre ellas: dentro de cada renglón la
 * linterna GIRA MIENTRAS ESCRIBE. Empieza apuntando al principio de la frase, que
 * es el sitio más lejano, y acaba apuntando al final, que está más cerca del
 * aparato; como está más cerca, el ángulo hasta él se cierra. Ese es el porqué de
 * los dos ángulos por renglón en vez de uno.
 *
 * El renglón del medio no lleva giro: está a la altura de la lente, así que la
 * punta se mueve por una línea que pasa por delante del aparato.
 *
 * Los tiempos: escribe del 0 al 14 %, la frase se queda hasta el 28 %, y del 28 al
 * 33 % baja al siguiente. Tres veces por vuelta.
 *
 * Y NO LLEGA CLAVADA: en mitad de cada bajada hay un fotograma que rebasa el
 * destino grado y medio, y las dos décimas siguientes vuelven atrás. Nadie apunta
 * una linterna al milímetro a la primera.
 *
 * Los ángulos van medidos en el navegador y sobre la frase YA CRECIDA: al
 * alumbrarse se estira un cincuenta y cinco por ciento hacia la derecha, así que
 * su final
 * se acerca a la linterna y el ángulo se cierra más que con la frase en pequeño.
 */
@keyframes foco-barre{
  0%           {rotate:8.3deg;}
  14%, 28%     {rotate:30.3deg;}
  31%          {rotate:-1.6deg;}
  33.3%, 61.3% {rotate:0deg;}
  64%          {rotate:-9.9deg;}
  66.6%        {rotate:-8.3deg;}
  80.6%, 94.6% {rotate:-21.5deg;}
  97.3%        {rotate:9.9deg;}
  100%         {rotate:8.3deg;}
}

/*
 * Y SE ACERCA MIENTRAS ESCRIBE
 *
 * La linterna no se queda clavada girando: AVANZA hacia la frase según la va
 * escribiendo, catorce píxeles, y se retira al terminar para bajar al renglón
 * siguiente. Es lo que hace cualquiera que esté alumbrando algo para verlo mejor —
 * arrimarse— y es lo que convierte el barrido en un gesto en vez de un giro.
 *
 * Va en `translate` y no en `transform` porque ese cajón ya lo ocupa el temblor de
 * la mano, y `rotate` lo ocupa el barrido. Son tres propiedades distintas y el
 * navegador las compone una detrás de otra sin que ninguna pise a las demás; con
 * las tres metidas en `transform` habría que elegir una y renunciar a las otras.
 *
 * Los tiempos son los del barrido: avanza del 0 al 14 % —lo que dura la escritura—,
 * se queda arrimada hasta el 28 % mientras da tiempo a leer, y del 28 al 33 % se
 * echa atrás para el viaje. Tres veces por vuelta.
 */
@keyframes foco-acerca{
  0%            {translate:0 0;}
  14%, 28%      {translate:-14px 0;}
  33.3%         {translate:0 0;}
  47.3%, 61.3%  {translate:-14px 0;}
  66.6%         {translate:0 0;}
  80.6%, 94.6%  {translate:-14px 0;}
  100%          {translate:0 0;}
}
/*
 * El haz y el polvo se acercan con ella —si no, el cono se quedaría atrás y la luz
 * saldría de un palmo por detrás de la boca—, pero llevan además el `-50%` que los
 * centra a media altura. Por eso necesitan su propio juego: el mismo movimiento con
 * el centrado incorporado.
 */
@keyframes foco-acerca-haz{
  0%            {translate:0 -50%;}
  14%, 28%      {translate:-14px -50%;}
  33.3%         {translate:0 -50%;}
  47.3%, 61.3%  {translate:-14px -50%;}
  66.6%         {translate:0 -50%;}
  80.6%, 94.6%  {translate:-14px -50%;}
  100%          {translate:0 -50%;}
}

/*
 * LA LINTERNA
 *
 * Gira sobre su LENTE —x=34 de un lienzo de 210 son el 16,19 % del ancho—, que es
 * exactamente el vértice del cono de luz. Por eso el haz sale siempre de la boca
 * por mucho que las dos cosas se muevan. En porcentaje y no en píxeles: así sigue
 * cuadrando cuando el dibujo se encoge en pantallas estrechas.
 */
.foco__lampara{
  position:relative;
  flex:0 0 auto;
  display:block;
  width:var(--lampara);
  transform-origin:16.19% 50%;
  animation:foco-barre 9s cubic-bezier(.5,0,.3,1) infinite,
            foco-acerca 9s cubic-bezier(.5,0,.3,1) infinite,
            foco-pulso 5.5s ease-in-out infinite;
}
.foco__lampara svg{display:block;width:100%;height:auto;}
/*
 * El resplandor de la boca, que es lo que ata las dos piezas: sin él, el trapecio
 * empieza en el aire a un palmo del dibujo. Todo en porcentaje del propio dibujo,
 * así crece y se coloca solo cuando la linterna cambia de tamaño.
 */
.foco__lampara::before{
  content:"";
  position:absolute;
  top:50%;left:16.19%;
  width:45%;aspect-ratio:1;
  translate:-50% -50%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(214,240,255,.6) 0%,transparent 70%);
  animation:foco-brilla 9s ease-in-out infinite;
}
/* Aprieta cuando está escribiendo y afloja cuando va de camino. */
@keyframes foco-brilla{
  0%,  28%     {opacity:1;}
  30.6%        {opacity:.72;}
  33.3%, 61.3% {opacity:1;}
  64%          {opacity:.72;}
  66.6%, 94.6% {opacity:1;}
  97.3%        {opacity:.72;}
  100%         {opacity:1;}
}

/*
 * LOS TRES RENGLONES
 *
 * Alineados a la izquierda y de altura fija los tres, que es lo que mantiene el
 * barrido simétrico. La caja lleva sitio de sobra a la derecha para que la frase
 * alumbrada pueda crecer sin salirse ni meterse debajo de la linterna.
 *
 * El ancho lleva un tope en vw y no un porcentaje: el bloque cuelga de un
 * contenedor que se ajusta a su contenido, así que un porcentaje se mediría contra
 * un ancho que depende de este mismo bloque. Esa pescadilla la resuelve el
 * navegador como cero.
 */
.foco__frases{
  position:relative;
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;
  gap:var(--hueco);
  flex:0 0 auto;
  /* La caja se ensancha para que quepa la frase YA CRECIDA. Crece hacia la
     izquierda, hacia el hueco entre el titular y la linterna, así que ensancharla
     no mueve el bloque de sitio: sigue pegado a la derecha. */
  width:min(425px,44vw);
}
.foco__frases li{
  position:relative;
  display:flex;align-items:center;
  /* El renglón mide lo que mide su frase: así la punta para donde acaba el texto y
     no ciento cincuenta píxeles después, escribiendo en el aire. */
  width:max-content;
  max-width:100%;
  min-height:var(--renglon);

  font-family:var(--font-display);
  font-size:19px;
  line-height:1.25;
  /* Una sola línea: una frase que salta de renglón se escribiría en dos sitios a
     la vez y se perdería la idea. El cuerpo de letra está elegido para que la más
     larga de las seis —tres en español y tres en inglés— quepa ya crecida. */
  white-space:nowrap;

  /* Crece desde su filo izquierdo, que es por donde están alineadas las tres: si
     creciera desde el centro se saldría por los dos lados y el margen izquierdo,
     que es lo que las hace parecer renglones de un cuaderno, se rompería. */
  transform-origin:left center;

  /* El estado de reposo es el de las apagadas: a su tamaño y en penumbra. Si la
     animación no llegara a arrancar, ninguna se queda a medio camino. */
  scale:1;
  color:rgba(207,224,245,.30);

  animation:foco-turno 9s cubic-bezier(.5,0,.3,1) infinite;
  animation-delay:calc(var(--i,0) * 3s);
}

/*
 * EL TURNO
 *
 * Cada frase se enciende en SU tercio de la vuelta, que es cuando el haz ha llegado
 * a ella. Y no se enciende sólo de color: CRECE UN CINCUENTA Y CINCO POR CIENTO
 * —de 19 píxeles a 29,5— y se le pone un halo detrás, como el que deja una luz fuerte al
 * dar sobre algo claro. El salto de tamaño es lo que hace que en cada momento se
 * sepa sin pensarlo cuál es la frase que toca leer.
 *
 * Con `scale` y nunca con el cuerpo de la letra: cambiar el tamaño real haría que
 * la frase ocupara más alto y empujara a las otras dos hacia abajo tres veces cada
 * nueve segundos. `scale` no recompone nada.
 *
 * El 0 % la coge todavía pequeña y apagada aunque sea el principio de su turno: en
 * ese instante no hay nada escrito —la máscara está cerrada— y lo que se ve crecer
 * es la frase apareciendo. Crecer con el texto ya puesto sería un zoom; crecer
 * mientras se escribe es la luz trayéndola.
 */
@keyframes foco-turno{
  0%        {scale:1;             color:rgba(207,224,245,.30); text-shadow:none;}
  3%        {scale:var(--crece); color:#FFFFFF; text-shadow:0 0 36px rgba(214,240,255,.62);}
  28%       {scale:var(--crece); color:#FFFFFF; text-shadow:0 0 36px rgba(214,240,255,.62);}
  31%,100%  {scale:1;             color:rgba(207,224,245,.30); text-shadow:none;}
}

/*
 * LA FRASE QUE SE ESCRIBE
 *
 * Una máscara del doble de ancha que el texto: media negra y media transparente.
 * Moviéndola de un extremo al otro, el filo entre las dos mitades cruza la frase y
 * va destapando letras. Es una máscara, no un color: las letras que aún no han
 * salido no están atenuadas, es que no están.
 *
 * Y cuando el turno acaba la máscara se queda ABIERTA, no cerrada: la frase se
 * apaga y encoge, pero sigue ahí para leerse en penumbra. Sólo se borra en el
 * instante en que le vuelve a tocar, para volver a escribirse.
 *
 * El corte no va justo en la mitad sino medio punto antes: con el filo exacto en el
 * 50 % quedaba un pelo de la primera letra asomando en los renglones que todavía no
 * han empezado, porque el borde de la máscara cae sobre el borde del texto y hay un
 * antialias de por medio.
 */
.foco__escrito{
  display:inline-block;
  -webkit-mask-image:linear-gradient(to right, #000 0 49.5%, transparent 50% 100%);
          mask-image:linear-gradient(to right, #000 0 49.5%, transparent 50% 100%);
  -webkit-mask-size:200% 100%; mask-size:200% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  /*
   * Y NO SE DECLARA POSICIÓN DE PARTIDA A PROPÓSITO. Sin ella el navegador usa la
   * de fábrica, que deja la máscara abierta y la frase escrita entera. Es el
   * estado en el que hay que quedarse si la animación no llega a arrancar: una
   * frase a medio escribir para siempre sería un texto cortado.
   */
  /*
   * EL ESCALONADO VA AQUÍ Y NO DENTRO DE LOS FOTOGRAMAS.
   *
   * Se escribió primero como `animation-timing-function:steps(var(--pasos))` dentro
   * del fotograma del 0 %, que es donde parecía que tocaba, y el navegador lo tira
   * sin avisar: en la función de tiempo de un fotograma no sustituye variables. La
   * animación seguía corriendo, pero suelta, y el filo partía letras por la mitad.
   * Medido: al llegar a la mitad del tramo llevaba escrito el ochenta por ciento en
   * vez de la mitad. En el atajo `animation`, sobre el elemento, sí se sustituye.
   */
  animation:foco-escribe 9s steps(var(--pasos,26)) infinite;
  animation-delay:calc(var(--i,0) * 3s);
}
@keyframes foco-escribe{
  /* Vacía, y a partir de aquí a saltos: uno por letra. */
  0%        {-webkit-mask-position:100% 0; mask-position:100% 0;}
  /* Escrita entera, y así se queda el resto de la vuelta. */
  14%, 100% {-webkit-mask-position:0% 0;   mask-position:0% 0;}
}

/*
 * LA PUNTA
 *
 * La chispa que va por delante marcando dónde se escribe. Vive fuera de la frase
 * —y no dentro— porque la máscara de la frase la cortaría justo por la mitad: está
 * exactamente en el filo.
 *
 * A ritmo constante, y esto no es un detalle: la máscara que destapa las letras
 * también avanza a ritmo constante —a saltos, pero sin acelerar—. Con el ritmo
 * suave que trae el navegador por defecto, la punta salía disparada al principio y
 * frenaba al final, escribiendo por delante de sus propias letras.
 */
.foco__punta{
  position:absolute;
  top:50%;left:0;
  width:2px;height:26px;
  translate:-50% -50%;
  background:#FFFFFF;
  box-shadow:0 0 14px 4px rgba(214,240,255,.75);
  opacity:0;
  animation:foco-punta 9s linear infinite;
  animation-delay:calc(var(--i,0) * 3s);
  pointer-events:none;
}
@keyframes foco-punta{
  0%    {left:0;    opacity:1;}
  14%   {left:100%; opacity:1;}
  15%   {left:100%; opacity:0;}
  /* Vuelve al principio apagada, para estar en su sitio en la próxima vuelta. */
  100%  {left:0;    opacity:0;}
}

@media (prefers-reduced-motion: reduce){
  /*
   * Ni barrido ni turnos: las tres frases se quedan escritas, enteras y legibles,
   * cada una en su renglón. Una frase a medio escribir y en penumbra permanente
   * sería un texto que no se puede leer.
   */
  .foco__haz,.foco__motas,.foco__lampara,.foco__lampara::before,
  .foco__frases li,.foco__escrito{animation:none;}
  .foco__motas{opacity:.5;}
  .foco__lampara,.foco__haz,.foco__motas{transform:none;rotate:0deg;}
  .foco__lampara{translate:0 0;}
  .foco__haz,.foco__motas{translate:0 -50%;}
  .foco__frases li{color:#E6EFFA;scale:1;}
  .foco__escrito{-webkit-mask-image:none;mask-image:none;}
  .foco__punta{display:none;}
  /* Y el cono se queda en su posición cerrada, la de estar escribiendo. */
  .foco__haz{clip-path:polygon(100% 46.4%, 100% 53.6%, 0% 74%, 0% 26%);}
}
@media (max-width: 900px){
  /* Basta con cambiar el ancho de la linterna: la lente, el resplandor y el
     nacimiento del haz salen de ahí y se recolocan solos. */
  .foco{min-height:0;margin:0;--lampara:150px;gap:30px;--renglon:40px;--hueco:20px;
        margin-right:-22px;}
  .foco__haz,.foco__motas{width:min(360px,74%);height:280px;}
  .foco__frases{width:min(390px,54vw);}
  .foco__frases li{font-size:16px;}
  .foco__punta{height:20px;}

  /* El barrido se remide: aquí los renglones están más juntos y más cerca de la
     linterna, así que los ángulos hasta ellos cambian. */
  @keyframes foco-barre{
    0%           {rotate:7.7deg;}
    14%, 28%     {rotate:17.8deg;}
    31%          {rotate:-1.6deg;}
    33.3%, 61.3% {rotate:0deg;}
    64%          {rotate:-9.3deg;}
    66.6%        {rotate:-7.7deg;}
    80.6%, 94.6% {rotate:-14.5deg;}
    97.3%        {rotate:9.3deg;}
    100%         {rotate:7.7deg;}
  }
}
@media (max-width: 560px){
  /* Ya no hay sitio para el dibujo: se quedan las frases, que son el contenido. */
  .foco__haz,.foco__motas,.foco__lampara,.foco__punta{display:none;}
  /*
   * Y sin linterna no hay nada que escriba ni a quién alumbrar: las tres se quedan
   * escritas, del mismo tamaño y quietas. Media frase a medio escribir, sin luz que
   * lo explique, sería simplemente un texto cortado.
   *
   * Se les quita también el renglón de una línea: en pantalla estrecha una frase
   * puede ocupar dos, y aquí eso ya no rompe nada.
   */
  .foco{margin-right:0;}
  .foco__frases{width:100%;}
  .foco__frases li{
    min-height:0;
    font-size:16px;
    white-space:normal;
    color:#E6EFFA;
    scale:1;
    animation:none;
  }
  .foco__escrito{
    animation:none;
    -webkit-mask-image:none;mask-image:none;
  }
}

/* ============ NOSOTROS ============ */
.about-intro{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;}
/* Variante sin foto: el texto manda y las cifras ocupan la columna derecha,
   que quedó libre al subir la foto del equipo al banner. */
.about-intro--solo{grid-template-columns:1.35fr .65fr;align-items:start;}
.about-intro__titulo{font-size:32px;margin:18px 0 22px;}
/*
 * EL SALTO DEL TITULAR, MEDIDO.
 *
 * «Cuidamos tu reputación y la convertimos en una ventaja estratégica.» tiene que
 * partir después de «convertimos»: si cae antes, el renglón se queda colgando de
 * un «la» y se lee mal.
 *
 * Se hace con un ancho en ch —la medida de la propia tipografía— y no con un <br>
 * metido en el texto: un <br> viajaría a la traducción inglesa, donde la frase es
 * más corta y el salto caería en otro sitio.
 */
.about-intro__titulo--dos{max-width:34ch;text-wrap:pretty;}
.about-intro p{font-size:16.5px;color:var(--text-soft);margin:0 0 18px;}
.about-photo{
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 24px 50px rgba(14,26,43,.18);
  background-size:cover;background-position:center;aspect-ratio:4/3;
}

/* Las dos cifras, en tarjetas de color y flotando con arranque desfasado.
   Antes eran tres números planos en una fila que se perdía bajo el texto. */
.cifras{display:flex;flex-direction:column;gap:18px;position:sticky;top:110px;}
.cifra{
  border-radius:20px;padding:30px 28px;color:#fff;
  position:relative;overflow:hidden;
  box-shadow:0 16px 36px rgba(0,32,96,.20);
  animation:cifra-flota 5s ease-in-out infinite;
}
.cifra--a{background:linear-gradient(145deg,#0A7F76,#002060);animation-delay:0s;}
.cifra--b{background:linear-gradient(145deg,#233D82,#0A7F76);animation-delay:1.6s;}
/* Halo difuso, el mismo recurso que en las tarjetas de la portada. */
.cifra::after{
  content:"";position:absolute;width:170px;height:170px;border-radius:50%;
  background:rgba(255,255,255,.16);filter:blur(24px);bottom:-80px;right:-60px;
}
/* El rótulo que va delante de la cifra: pequeño y en versalitas, para que la
   frase se lea de corrido sin competir con el número. */
/* Con .cifra delante: sin él, la regla general de .cifra span —que es más
   concreta— le imponía sus catorce píxeles. */
.cifra .cifra__antes{
  display:block;position:relative;z-index:1;
  margin-bottom:6px;
  font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.cifra strong{
  display:block;position:relative;z-index:1;
  font-family:var(--font-display);font-size:52px;font-weight:600;line-height:1;
}
/*
 * El rótulo que va DEBAJO de la cifra, con el mismo trato que el de arriba.
 *
 * Estaba en catorce píxeles, en minúscula y de peso normal, y al lado de
 * «ALCANCE EN» —doce píxeles, pero en versalitas, negrita y espaciado— parecía
 * más pequeño aunque midiera más. Lo que manda a la vista no es el cuerpo de la
 * letra sino la altura de las mayúsculas: doce en caja alta llegan más arriba que
 * catorce en caja baja.
 *
 * Puestos los dos iguales, las dos tarjetas se leen como una pareja en vez de
 * como dos cosas distintas.
 */
.cifra span{
  display:block;position:relative;z-index:1;
  margin-top:12px;
  font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.86);
}
/*
 * La unidad va DENTRO de la cifra y en su misma línea, no debajo: es «49+
 * países», una sola cosa. Más pequeña que el número para que el número siga
 * mandando.
 *
 * Y LEVANTADA HASTA LA BARRA DEL «+».
 *
 * Apoyada en la misma línea de base que el 49, «países» se hundía: al lado de un
 * número de 52 px, una palabra de 24 px alineada por abajo parece que se cae. El
 * sitio donde descansa es el travesaño del «+», que es el centro óptico del
 * conjunto.
 *
 * El número sale de las medidas de la Newsreader, no del ojo: en ella el eje
 * matemático —la altura de la barra del «+»— está a 0,231 em sobre la línea de
 * base, y el centro de la altura de x de «países» a 0,229 em sobre la suya. La
 * diferencia, llevada al cuerpo de la palabra, son 0,271 em. Va en em y no en
 * píxeles para que siga cuadrando si cambia el tamaño.
 */
.cifra strong .cifra__unidad{
  display:inline;margin:0;
  font-size:24px;font-weight:600;
  vertical-align:.271em;
  color:rgba(255,255,255,.92);
}
@keyframes cifra-flota{
  0%,100%{transform:translateY(0);}
  50%    {transform:translateY(-8px);}
}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px;text-align:center;}
.stat strong{display:block;font-family:var(--font-display);font-size:40px;font-weight:600;color:var(--accent-ink);line-height:1;}
.stat span{display:block;font-size:13.5px;color:var(--text-muted);margin-top:8px;}

/* ============ MISIÓN Y VISIÓN ============
 * Antes eran dos cajas blancas seguidas, indistinguibles entre sí y del
 * resto de la página. Ahora la banda entera va en el degradado oscuro de
 * marca y cada tarjeta lleva su icono repetido en grande, muy tenue, como
 * marca de agua: da carácter sin robarle atención al texto.
 */
.mv{background:var(--grad-dark);padding:92px 0;position:relative;overflow:hidden;}
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;position:relative;z-index:1;}
.mv-card{
  position:relative;overflow:hidden;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.20);
  border-radius:18px;padding:38px 34px;
  backdrop-filter:blur(6px);
}
/* La marca de agua. pointer-events:none para que no estorbe a la selección
 * de texto, y opacidad muy baja: tiene que insinuarse, no leerse. */
.mv-card__icon{
  position:absolute;right:-26px;top:-26px;
  width:170px;height:170px;color:#fff;opacity:.10;
  pointer-events:none;
  transform-origin:center;
}
/* Sólo gira la DIANA de la misión: una diana girando se lee como puntería,
   pero un ojo dando vueltas resulta raro, así que la visión se queda fija. */
.mv-card--gira .mv-card__icon{animation:mv-gira 14s linear infinite;}
/* Giro muy lento: la marca de agua tiene que insinuar movimiento, no marear.
   Una vuelta cada 14 segundos apenas se percibe de golpe pero se nota. */
@keyframes mv-gira{
  from{transform:rotate(0deg);}
  to  {transform:rotate(360deg);}
}
.mv-card .eyebrow{margin-bottom:18px;position:relative;z-index:1;}
.mv-card h2{font-size:24px;margin-bottom:14px;color:#fff;position:relative;z-index:1;}
/*
 * EL RÓTULO DE LA TARJETA ES UN <h2> QUE SE VE COMO PASTILLA.
 *
 * Lleva las dos clases —.eyebrow por el aspecto y ésta por los ajustes—, así que
 * hay que deshacer lo que .mv-card h2 le impone: el cuerpo de 24 px, que en una
 * pastilla resulta enorme, y el color blanco fijo, que pisaría el de .eyebrow.
 *
 * Un <span> habría dado el mismo resultado en pantalla con menos CSS, pero la
 * tarjeta se habría quedado sin titular: quien navega con lector de pantalla se
 * mueve saltando de titular en titular, y ahí Misión y Visión desaparecerían.
 */
/*
 * El selector repite «h2» para pesar más que .mv-card h2. Con .mv-card__rotulo a
 * secas el rótulo salía a 24 px: las dos reglas apuntan al mismo elemento y la
 * otra gana por llevar un descendiente más.
 *
 * Los valores son los de .eyebrow. No sirve font-size:inherit —heredaría el de la
 * tarjeta, no el de la pastilla— y tampoco hay forma de «desactivar» una regla:
 * hay que darle el valor bueno.
 */
.mv-card h2.mv-card__rotulo{
  font-size:13px;
  font-weight:700;
  color:var(--accent-ink);
  display:inline-block;
  margin-bottom:16px;
}
.mv-card p{margin:0;color:rgba(255,255,255,.84);font-size:15.5px;line-height:1.65;position:relative;z-index:1;}

/* ============ VALORES ============
 * Antes eran cinco fotos de banco con una palabra encima: las fotos no
 * decían nada del valor y competían con el texto. Ahora cada uno lleva su
 * icono en un disco de marca. Las frases explicativas se retiraron a
 * petición del cliente, así que la tarjeta es sólo icono y nombre.
 */
/*
 * LAS CINCO EN UNA LÍNEA
 *
 * Es como la agencia las quiere: los cinco valores de un vistazo, sin partir en
 * dos filas. Cada una se queda en unos doscientos píxeles, así que la frase del
 * reverso va en cuerpo pequeño y el alto de la tarjeta hace el resto.
 *
 * Se probó a tres por fila para que el texto respirara más, y se descartó.
 */
.values-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}

/*
 * LAS TARJETAS DE VALORES SE VUELVEN
 *
 * Por delante el icono y el nombre; por detrás, la frase que la agencia publica
 * sobre ese valor. La frase había desaparecido de la página porque estiraba
 * muchísimo las tarjetas; puesta detrás, vuelve a estar sin que la fila crezca.
 *
 * La perspectiva va en cada tarjeta, no en la cuadrícula: compartida, las cinco
 * girarían hacia un mismo punto de fuga y las de los extremos saldrían torcidas.
 */
.value-card{
  perspective:1100px;
  background:none;border:0;box-shadow:none;padding:0;
}
.value-card:focus-visible{outline:3px solid var(--accent-ink);outline-offset:4px;border-radius:16px;}

.value-card__caras{
  position:relative;
  display:block;
  /*
   * Alto fijo: las dos caras están superpuestas y colocadas, así que ninguna
   * puede dar altura al conjunto. Con cinco en una línea la tarjeta es estrecha,
   * así que necesita alto: 262 px es lo que pide la frase más larga —la de
   * Pasión, 233 caracteres— sin apretarse contra los bordes.
   */
  height:262px;
  transform-style:preserve-3d;
  transition:transform .62s cubic-bezier(.3,.7,.25,1);
}
.value-card:hover .value-card__caras,
.value-card:focus-visible .value-card__caras{transform:rotateY(180deg);}

.value-card__cara{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:22px 15px;
  border-radius:16px;
  backface-visibility:hidden;   /* que no se transparente la cara de detrás */
  overflow:hidden;
  text-align:center;
}

/* ---- LA CARA DE DELANTE ---- */
.value-card__cara--frente{
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-card);
}
/* El filete de marca que ya llevaba la tarjeta, ahora en la cara. */
.value-card__cara--frente::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--brand-teal),var(--brand-navy));
}
.value-card__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:15px;
  background:var(--accent-tint);color:var(--accent-ink);
  margin:0 0 14px;
  /* Flota con arranque desfasado entre las cinco tarjetas. */
  animation:valor-flota 4.4s ease-in-out infinite;
  animation-delay:var(--retardo,0s);
}
.value-card__icon svg{width:28px;height:28px;}
.value-card h3{font-family:var(--font-body);font-size:15.5px;font-weight:700;margin:0;color:var(--text);}

/* ---- LA CARA DE DETRÁS ---- */
/*
 * Ya girada de partida: cuando la tarjeta da media vuelta, esta queda de frente.
 * Va en el degradado de marca, así que al volverse la fila se enciende entera.
 */
.value-card__cara--dorso{
  transform:rotateY(180deg);
  background:linear-gradient(150deg,var(--brand-teal,#04A99C) 0%,var(--brand-navy,#002060) 100%);
  color:#fff;
}
.value-card__texto{
  font-size:13px;
  line-height:1.5;
  color:rgba(255,255,255,.94);
}

@media (prefers-reduced-motion: reduce){
  /*
   * Sin giro ni flotación: el reverso aparece encima sin más. El contenido se ve
   * igual, que es de lo que se trata.
   */
  .value-card__caras{transition:none;}
  .value-card:hover .value-card__caras,
  .value-card:focus-visible .value-card__caras{transform:none;}
  .value-card__cara{backface-visibility:visible;}
  .value-card__cara--dorso{transform:none;opacity:0;}
  .value-card:hover .value-card__cara--dorso,
  .value-card:focus-visible .value-card__cara--dorso{opacity:1;}
  .value-card__icon{animation:none;}
}
@media (hover: none){
  /*
   * En un móvil no hay ratón que posar, y una tarjeta que sólo enseña la mitad de
   * lo que dice sería una tarjeta a medias. Las dos caras se ponen una debajo de
   * otra, sin giro ni colocación absoluta.
   */
  .value-card__caras{height:auto;transform:none;transform-style:flat;}
  .value-card__cara{position:static;backface-visibility:visible;}
  .value-card__cara--frente{border-radius:16px 16px 0 0;border-bottom:0;padding-bottom:18px;}
  .value-card__cara--dorso{transform:none;border-radius:0 0 16px 16px;padding-top:18px;}
}

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

/* --- Equipo --- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.member{
  background:var(--surface);border:1px solid var(--border);
  border-radius:18px;overflow:hidden;box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;
}
.member__photo{aspect-ratio:1;background-size:cover;background-position:center top;background-color:var(--surface-2);}
.member__body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
.member__name{font-family:var(--font-display);font-size:22px;font-weight:600;line-height:1.2;}
.member__role{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);margin:8px 0 14px;}
.member__bio{font-size:14px;color:var(--text-muted);margin:0;flex:1;}
/*
 * El desplegable usa <details> nativo de HTML: sin una línea de JavaScript,
 * funciona con teclado y con lector de pantalla desde el primer día.
 */
.member details{margin-top:14px;}
/*
 * El resumen es un enlace de texto, sin píldora ni borde. Probado como
 * botón ocupaba demasiado peso dentro de una ficha que ya tiene nombre,
 * cargo y resumen; el verde de marca basta para que se vea que se pulsa.
 */
.member summary{
  font-size:13px;font-weight:700;
  color:#8FEFDF;cursor:pointer;list-style:none;
}
.member summary:hover{text-decoration:underline;}
.member summary::-webkit-details-marker{display:none;}
.member summary::after{content:" \2193";}
.member details[open] summary::after{content:" \2191";}
/* El color del texto desplegado lo pone .member__texto p, más abajo. Aquí
   había una regla que lo forzaba a oscuro y, por llevar un elemento más en
   el selector, ganaba: sobre el fondo oscuro el texto salía negro sobre
   negro y no se leía. */

/* Los estilos de .tgrid/.tcard vivían aquí. La página de Testimonios se
 * rehízo como mural de voces —ver el bloque del final de este archivo— y
 * ninguna plantilla usa ya esas clases, así que se borran en vez de dejarlas
 * como peso muerto.
 */

/* ============ CONTACTO: LAS DOS COLUMNAS ============
 * Montada sobre la referencia que dio la agencia, con los colores de la casa.
 *
 * Todo sobre el azul oscuro de marca. A la izquierda el titular en dos líneas
 * —la segunda en verde—, una raya corta y el formulario en una tarjeta. A la
 * derecha, las tres vías de contacto, cada una con su icono, su rótulo en verde
 * y una línea pequeña que dice lo que hace falta saber. Entre las dos, una
 * línea vertical con un destello en el centro.
 */
.contacta{
  position:relative;overflow:hidden;
  /* 124 arriba porque la cabecera va fija y mide 92. */
  padding:124px 0 110px;
  background:var(--grad-dark);
}

/*
 * LOS ARCOS DE LA ESQUINA
 *
 * Tres circunferencias concéntricas asomando por abajo a la derecha. Llenan la
 * esquina que sobra sin pedir que las miren. Se salen del cuadro a propósito:
 * un círculo entero se lee como un objeto y pide atención; un trozo de círculo
 * se lee como fondo.
 */
.contacta__arcos{
  position:absolute;right:-90px;bottom:-90px;
  width:min(560px,52vw);height:min(560px,52vw);
  pointer-events:none;
  /*
   * Dan una vuelta cada dos minutos. A esa velocidad no se ve girar: lo que se
   * nota es que la esquina no está congelada. Son circunferencias, así que al
   * girar no cambia su silueta — sólo el sitio donde el trazo se corta contra
   * el borde de la pantalla.
   */
  transform-origin:400px 400px;
  animation:contacta-arcos 120s linear infinite;
}
@keyframes contacta-arcos{to{transform:rotate(360deg);}}

.contacta__grid{
  position:relative;z-index:1;
  display:grid;
  /* Tres columnas: el formulario, la línea del medio y las vías. La del medio
     mide lo que ocupe, que es un píxel. */
  grid-template-columns:1.15fr auto .85fr;
  gap:0 62px;
  align-items:start;
}
.contacta__izq,
.contacta__der{min-width:0;}

.contacta__titulo{
  margin:18px 0 0;
  font-size:clamp(32px,4vw,54px);
  line-height:1.08;
  color:#fff;
}
/*
 * La segunda línea, en verde. Es lo que convierte un titular en una frase con
 * dos tiempos: lo que traes tú y lo que hacemos nosotros.
 *
 * Y el verde no está quieto: un degradado del ancho de tres pantallas recorre
 * la palabra de un lado a otro cada ocho segundos. El degradado se mete DENTRO
 * de las letras recortando el fondo con su forma —por eso el color va
 * transparente—; donde no se soporte, la palabra sale en verde plano, que es lo
 * que era antes.
 */
.contacta__titulo span{
  color:#8FEFDF;
  /* Verde en reposo y una banda blanca corta que lo recorre: la luz se ve pasar
     en vez de teñir la palabra entera de otro color. */
  background:linear-gradient(100deg,#37C9B6 0%,#37C9B6 34%,#93E9D9 43%,#DBFAF4 50%,#8FE0F0 57%,#37C9B6 66%,#37C9B6 100%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:contacta-onda 4.2s linear infinite,
             contacta-fulgor 4.2s ease-in-out infinite;
}
@keyframes contacta-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 contacta-onda{
  from{background-position:0% 50%;}
  to  {background-position:260% 50%;}
}

/* La raya corta bajo el rótulo. Corta a propósito: una raya a todo el ancho
   separa, y lo que hace falta aquí es subrayar. */
.contacta__raya{
  display:block;
  width:52px;height:2px;
  margin:18px 0 0;
  border-radius:2px;
  background:#8FEFDF;
}

.contacta__bajada{
  max-width:44ch;
  margin:18px 0 0;
  font-size:15.5px;line-height:1.65;
  color:rgba(207,224,245,.8);
}

/*
 * LA LÍNEA DEL MEDIO
 *
 * Se desvanece por los dos extremos, con un destello de cuatro puntas en el
 * centro. Separa sin partir: una raya sola corta la página en dos mitades
 * ajenas; con el destello en medio, las dos se leen como las dos caras de lo
 * mismo.
 */
.contacta__linea{
  position:relative;
  align-self:stretch;
  width:1px;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(143,239,223,.30) 22%,
    rgba(143,239,223,.30) 78%,
    transparent 100%);
}
/*
 * El destello son dos rombos cruzados hechos con un solo elemento: el propio
 * cuadro y su ::after, girado. Con blur en el fondo da el halo sin necesidad de
 * una imagen ni de un SVG.
 */
.contacta__brillo{
  position:absolute;top:50%;left:50%;
  width:9px;height:56px;
  margin:-28px 0 0 -4.5px;
  background:#8FEFDF;
  /* El rombo alargado: ancho en el centro y en punta arriba y abajo. */
  clip-path:polygon(50% 0%, 62% 44%, 100% 50%, 62% 56%, 50% 100%, 38% 56%, 0% 50%, 38% 44%);
  filter:drop-shadow(0 0 10px rgba(143,239,223,.85));
  animation:brillo-late 3.4s ease-in-out infinite;
}
.contacta__brillo::after{
  content:"";
  position:absolute;inset:0;
  background:inherit;
  clip-path:inherit;
  transform:rotate(90deg) scale(.62);
}
/*
 * Y una chispa que baja por la línea, de arriba abajo, cada seis segundos. Es
 * lo que convierte una raya quieta en algo por lo que pasa corriente.
 *
 * Va en el ::after de la línea, no del destello: tiene que recorrer la línea
 * entera, y el destello sólo ocupa el centro.
 */
.contacta__linea::after{
  content:"";
  position:absolute;left:-1px;
  width:3px;height:90px;
  border-radius:3px;
  background:linear-gradient(180deg,transparent,#8FEFDF,transparent);
  filter:blur(1px);
  animation:contacta-chispa 6s ease-in-out infinite;
}
@keyframes contacta-chispa{
  0%      {top:-90px;opacity:0;}
  12%     {opacity:.9;}
  /* Se apaga antes de llegar abajo del todo: una chispa que desaparece de golpe
     al final del recorrido se lee como un fallo. */
  55%     {opacity:.9;}
  70%,100%{top:100%;opacity:0;}
}
@keyframes brillo-late{
  0%,100%{opacity:.75;transform:scale(1);}
  50%    {opacity:1;transform:scale(1.12);}
}

/* ---- LA TARJETA DEL FORMULARIO ---- */
/*
 * LA CAJA DEL FORMULARIO
 *
 * Un marco en degradado de marca —verde a azul— y la ficha blanca dentro. El
 * degradado no se ve como un fondo sino como el filo de color que rodea al
 * impreso: catorce píxeles por cada lado, lo justo para que se note.
 *
 * Sobre una página que ya es azul entera, la ficha blanca sola se despegaba pero
 * quedaba seca. Con el marco, la pieza tiene los dos colores de la casa y se lee
 * como algo puesto ahí a propósito.
 */
.folio{
  margin-top:30px;
  padding:14px;
  border-radius:22px;
  background:linear-gradient(135deg,#04A99C 0%,#0E6E9B 52%,#233D82 100%);
  box-shadow:0 30px 70px rgba(0,10,40,.45);
}

.folio__aviso{
  padding:16px;border:1px dashed rgba(255,255,255,.3);border-radius:10px;
  font-size:14px;color:#CFE0F5;
}

/*
 * LOS CAMPOS
 *
 * Cajas rellenas y de esquinas redondeadas, como en la referencia. Aquí sí
 * llevan caja —y no la línea sola de otras partes del sitio— porque sobre fondo
 * oscuro una raya fina no se ve lo suficiente para saber dónde se escribe.
 *
 * La etiqueta va ENCIMA y no dentro. Dentro queda más limpio, pero desaparece
 * al empezar a escribir: quien se distrae a mitad del formulario ya no sabe qué
 * le estaban preguntando. Encima, y en el mismo verde pequeño que los rótulos
 * de la derecha, la página mantiene su lenguaje y el campo sigue diciendo lo
 * que es mientras se rellena.
 *
 * Gravity Forms trae sus propios estilos, y son los del plugin: esto los
 * sobrescribe sólo en lo que hace falta —borde, fondo y tipografía— sin
 * pelearse con su rejilla de medias columnas.
 */
.folio .gform_wrapper{margin:0;}
/*
 * EL PLIEGO BLANCO
 *
 * El formulario entero —casillas Y botón— es una sola hoja blanca, y el
 * degradado de colores queda por fuera haciendo de marco y nada más. Antes el
 * botón caía sobre el degradado, fuera de la hoja, y el conjunto se leía como
 * dos piezas sueltas en vez de como un impreso.
 *
 * El redondeo y el recorte suben aquí, al formulario: las casillas de dentro ya
 * no necesitan redondearse por su cuenta.
 */
.folio .gform_wrapper form{
  margin:0;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
}

/*
 * LA FICHA
 *
 * El formulario es una cuadrícula de celdas con las líneas a la vista, como la
 * ficha que se rellena a mano en una recepción: cada dato en su casilla, el
 * nombre de la casilla arriba en pequeño y el hueco debajo.
 *
 * De dónde viene: aquí se probaron antes campos subrayados, cajas redondeadas,
 * etiquetas flotantes y renglones que se abrían. Todos eran variaciones de lo
 * mismo —una columna de campos sueltos— y el último tenía además un problema
 * de verdad: en reposo no se veía dónde escribir, sólo cinco rótulos flotando
 * en el aire (se ve en la captura que mandó la agencia).
 *
 * Una cuadrícula con líneas resuelve eso de raíz: la casilla SE VE. Y de paso es
 * lo único que no se parece a ningún otro formulario de contacto.
 *
 * CÓMO SE DIBUJAN LAS LÍNEAS
 *
 * No con bordes en cada celda —eso duplica la línea donde dos celdas se tocan y
 * obliga a apagar el borde de las de los extremos, una por una—. Se le da color
 * de fondo a la rejilla y se separan las celdas UN PÍXEL: por esa rendija se ve
 * el fondo, y eso es la línea. Sale sola, sin importar cuántas celdas haya por
 * fila ni cuántas filas.
 */
.folio .gform_wrapper .gform_fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;                      /* la rendija por la que se ve la línea */
  background:var(--border-strong);
  border:0;
  border-radius:0;              /* redondea el formulario entero, no la rejilla */
}

.folio .gform_wrapper .gfield{
  position:relative;
  margin:0;
  padding:15px 18px 13px;
  /*
   * LA FICHA VA EN CLARO SOBRE EL AZUL.
   *
   * Se probó primero con las casillas en azul oscuro y se descartó: sobre una
   * página que ya es azul entera, una ficha azul no se despega de nada. En
   * blanco es lo único claro de la página y se lee como lo que es — un impreso
   * puesto encima.
   *
   * Un blanco sólido y no un cristal: si la celda fuera translúcida, el color de
   * la rejilla que hay detrás —el de las líneas— la teñiría entera y las líneas
   * dejarían de verse.
   */
  background:#fff;
  transition:background-color .28s ease;
}
/*
 * La barra de arriba: mide cero y cruza la celda al recibir el foco, como la
 * pestaña de una ficha que se levanta. Va en un ::before para no añadir un
 * elemento por campo.
 */
.folio .gform_wrapper .gfield::before{
  content:"";
  position:absolute;top:0;left:0;
  width:0;height:3px;
  background:linear-gradient(90deg,#8FEFDF 0%,#3E9BD4 100%);
  transition:width .32s cubic-bezier(.2,.8,.3,1);
}
/* La casilla que se está rellenando, con un verde muy rebajado: se ve cuál es
   sin sacarla del blanco de la ficha. */
.folio .gform_wrapper .gfield:focus-within{background:var(--accent-tint);}
.folio .gform_wrapper .gfield:focus-within::before{width:100%;}

/* ---- EL RÓTULO DE LA CASILLA ---- */
.folio .gform_wrapper .gfield_label{
  display:block;
  margin:0 0 6px;
  font-family:var(--font-body);
  font-size:9.5px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-muted);
  transition:color .28s ease;
}
.folio .gform_wrapper .gfield:focus-within .gfield_label{color:var(--accent-ink);}
/* El asterisco de obligatorio, en el mismo tono que el rótulo y no en rojo: los
   cinco campos lo son, así que en rojo la ficha entera gritaba. */
.folio .gform_wrapper .gfield_required{color:inherit;opacity:.5;}

/* ---- EL HUECO ---- */
/*
 * Sin borde ni fondo propios: la casilla ya es el borde. Lo que se escribe se
 * lee como escrito DENTRO de la ficha, no dentro de otra caja metida en la
 * casilla.
 */
.folio .gform_wrapper input[type="text"],
.folio .gform_wrapper input[type="email"],
.folio .gform_wrapper input[type="tel"],
.folio .gform_wrapper textarea{
  width:100%;
  padding:0;
  border:0;border-radius:0;
  background:transparent;
  font-family:var(--font-display);
  font-size:19px;line-height:1.4;
  color:var(--text);
}
/*
 * EL DESPLEGABLE, CON LA MISMA LETRA QUE LAS DEMÁS CASILLAS.
 *
 * Aquí las casillas no tienen borde ni fondo —el marco ya es la casilla—, así
 * que el desplegable tampoco: lo que se elige se lee como escrito dentro de la
 * ficha, en la misma tipografía de titular y al mismo cuerpo que el resto.
 *
 * La flecha va en verde de marca y separada del texto, que es lo único que
 * avisa de que ahí hay una lista y no un campo para escribir.
 */
/*
 * El valor elegido va en la letra de la LISTA, no en la de titular del resto de
 * casillas: lo que se elige se ve escrito igual que se vio al elegirlo. Con la
 * serif a 19 se leía como un titular metido en un formulario.
 */
.folio .gform_wrapper .lista__valor{
  font-family:var(--font-body);
  font-size:16px;line-height:1.4;
  letter-spacing:.005em;
}
.folio .gform_wrapper select,
.folio .gform_wrapper .lista__boton{
  width:100%;
  padding:0 26px 0 0;
  border:0;border-radius:0;
  background:transparent 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='%2304A99C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center;
  background-size:13px 9px;
  font-family:var(--font-display);
  font-size:19px;line-height:1.4;
  color:var(--text);
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  cursor:pointer;
}
.folio .gform_wrapper select:focus,
.folio .gform_wrapper .lista__boton:focus-visible{outline:none;box-shadow:none;}
.folio .gform_wrapper select:invalid,
.folio .gform_wrapper select option[value=""]{color:var(--text-muted);}
.folio .gform_wrapper select option{color:var(--text);background:#fff;font-size:16px;}
.folio .gform_wrapper .lista__valor.es-vacio{color:var(--text-muted);}

.folio .gform_wrapper input:focus,
.folio .gform_wrapper textarea:focus{outline:none;box-shadow:none;}
.folio .gform_wrapper input::placeholder,
.folio .gform_wrapper textarea::placeholder{color:var(--text-muted);}

/* El mensaje ocupa las dos columnas y es la única casilla alta. */
.folio .gform_wrapper .gfield--type-textarea{grid-column:1 / -1;}
.folio .gform_wrapper textarea{
  height:96px;min-height:96px;resize:vertical;
  font-size:17px;line-height:1.55;
}

/*
 * LA MARCA DE RELLENO
 *
 * Un visto verde en la esquina de las casillas que ya tienen algo. En una ficha
 * de cinco casillas es lo que dice de un vistazo cuánto queda — el mismo gesto
 * de quien va tachando lo que ya ha rellenado.
 *
 * La clase la pone el script que vigila los campos.
 */
.folio .gform_wrapper .gfield.esta-lleno::after{
  content:"";
  position:absolute;top:12px;right:14px;
  width:15px;height:15px;
  background:center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304A99C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.8 12.4 9.7 17.3 19.2 7.4'/%3E%3C/svg%3E");
  opacity:.9;
}
/* En la casilla que se está rellenando sobra: ya se está mirando. */
.folio .gform_wrapper .gfield.esta-lleno:focus-within::after{opacity:0;}

@media (prefers-reduced-motion: reduce){
  .folio .gform_wrapper .gfield,
  .folio .gform_wrapper .gfield::before,
  .folio .gform_wrapper .gfield_label{transition:none;}
}
@media (max-width: 600px){
  /* Una casilla por fila: con 320 píxeles de ancho, dos casillas de 140 no se
     rellenan cómodamente con el pulgar. */
  .folio .gform_wrapper .gform_fields{grid-template-columns:1fr;}
  .folio .gform_wrapper .gfield{padding:13px 15px 12px;}
  .folio .gform_wrapper input[type="text"],
  .folio .gform_wrapper input[type="email"],
  .folio .gform_wrapper input[type="tel"]{font-size:17px;}
}

/*
 * El pie va DENTRO de la hoja blanca, separado de las casillas por la misma
 * línea fina que las separa entre sí, y con el botón a la derecha: donde termina
 * de leerse el impreso.
 */
.folio .gform_wrapper .gform_footer{
  display:flex;justify-content:flex-end;
  margin:0;
  padding:16px 18px;
  background:#fff;
  border-top:1px solid var(--border-strong);
}
.folio .gform_wrapper input[type="submit"]{
  display:inline-flex;
  padding:15px 34px;
  border:0;border-radius:999px;
  background:linear-gradient(120deg,#8FEFDF 0%,#04A99C 100%);
  color:#012320;
  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;
}
.folio .gform_wrapper input[type="submit"]{
  /*
   * El brillo que cruza el botón al señalarlo: una banda blanca translúcida
   * dentro del propio fondo, que se mueve de izquierda a derecha. Se hace con
   * background-position porque un input no admite pseudoelementos —no tiene
   * contenido dentro— y esta es la única forma de animarle algo por encima.
   */
  background-image:linear-gradient(120deg,#8FEFDF 0%,#04A99C 100%),
                   linear-gradient(100deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  background-size:100% 100%, 260% 100%;
  background-position:0 0, 130% 0;
  background-repeat:no-repeat;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s ease,
             background-position .7s ease;
}
.folio .gform_wrapper input[type="submit"]:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(4,169,156,.35);
  background-position:0 0, -30% 0;
}

.folio .gform_confirmation_message{
  padding:26px 22px;
  border-radius:14px;
  background:rgba(143,239,223,.12);
  border:1px solid rgba(143,239,223,.4);
  font-family:var(--font-display);
  font-size:18px;line-height:1.5;
  color:#fff;
}


/* ---- LAS TRES VÍAS ---- */
.canales{margin-top:28px;display:grid;}
/*
 * Las filas entran en cascada al asomar, una detrás de otra. El retardo sale de
 * --i, que pone la plantilla con el número de fila; así la secuencia sigue
 * cuadrando si mañana hay una vía más.
 *
 * El estado inicial cuelga de .afce-revela, la clase que pone el script al
 * arrancar: si no llega, las filas se ven de entrada en vez de quedarse
 * invisibles para siempre.
 */
.afce-revela .canal{
  opacity:0;transform:translateX(18px);
  transition:opacity .55s ease calc(var(--i,0) * .12s),
             transform .55s cubic-bezier(.2,.75,.3,1) calc(var(--i,0) * .12s),
             padding-left .25s cubic-bezier(.2,.8,.3,1);
}
.afce-revela .canal.es-visible{opacity:1;transform:none;}

.canal{
  position:relative;
  display:flex;align-items:center;gap:17px;
  padding:22px 8px 22px 0;
  color:#EAF4FF;
  text-decoration:none;
  transition:padding-left .25s cubic-bezier(.2,.8,.3,1);
}
/*
 * Y al señalar, una barra en degradado crece de arriba abajo pegada al filo
 * izquierdo. Es lo que hace que la columna se note viva sin añadirle ni un
 * elemento: la barra es un ::before que el resto del tiempo mide cero.
 */
.canal::before{
  content:"";
  position:absolute;left:-14px;top:50%;
  width:3px;height:0;border-radius:3px;
  background:linear-gradient(180deg,#8FEFDF 0%,#3E9BD4 100%);
  transform:translateY(-50%);
  transition:height .3s cubic-bezier(.2,.8,.3,1);
}
.canal:hover::before{height:64%;}
/* Una raya finísima entre vías, sólo entre ellas: en los bordes sobraría. */
.canal + .canal{border-top:1px solid rgba(255,255,255,.10);}
/* Al señalar, la fila se adelanta un poco. Es todo el movimiento que necesita
   una columna de datos: más sería ruido al lado del formulario. */
/*
 * EL SEGUNDO NÚMERO DE TELÉFONO.
 *
 * Va pegado al primero y sin raya en medio: los dos son el mismo dato. Sin
 * rótulo propio —lo dice la tarjeta de arriba— y con el hueco del icono vacío,
 * para no poner un segundo timbre al lado del primero. El hueco se queda para
 * que los dos números salgan alineados.
 */
.canal--junto{padding-top:0;}
.canal + .canal--junto{border-top:0;}
.canal--junto .canal__icono{border-color:transparent;background:none;}
.canal--junto:hover .canal__icono{background:none;box-shadow:none;}

.canal:hover{padding-left:8px;}
.canal:focus-visible{outline:2px solid #8FEFDF;outline-offset:2px;border-radius:10px;}

.canal__icono{
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  width:48px;height:48px;
  border-radius:13px;
  border:1px solid rgba(143,239,223,.35);
  background:rgba(143,239,223,.09);
  color:#8FEFDF;
  transition:background-color .25s ease,border-color .25s ease;
}
/* El cuadrado del icono se rellena con el degradado de marca al señalar y el
   dibujo pasa a blanco: es el golpe de color de la columna. */
.canal:hover .canal__icono{
  background:linear-gradient(140deg,#04A99C 0%,#0E6E9B 55%,#233D82 100%);
  border-color:transparent;
  color:#fff;
  box-shadow:0 10px 24px rgba(4,169,156,.3);
}
.canal__icono svg{width:21px;height:21px;}

.canal__par{display:flex;flex-direction:column;gap:3px;min-width:0;}
.canal__que{
  font-size:10px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;
  color:#8FEFDF;
}
.canal__dato{
  font-family:var(--font-display);
  font-size:19px;font-weight:600;line-height:1.3;
  word-break:break-word;
}

/*
 * 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
 * columna no parezca una tabla de datos.
 */
@keyframes canal-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);}
}
.canal__icono--timbra svg{animation:canal-timbra 4.2s ease-in-out infinite;}

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

.canal__icono--onda{position:relative;}
.canal__icono--onda::after{
  content:"";
  position:absolute;inset:-1px;
  border-radius:inherit;
  border:1.5px solid #8FEFDF;
  opacity:0;
  animation:canal-onda 2.8s ease-out infinite;
}
@keyframes canal-onda{
  0%  {transform:scale(1);opacity:.5;}
  100%{transform:scale(1.55);opacity:0;}
}

/* ---- EL BOTÓN DEL MAPA ---- */
/*
 * Un botón ancho y perfilado que abre el mapa AQUÍ MISMO, debajo de él. No se
 * carga antes: un mapa incrustado pesa cerca de medio megabyte y llama a Google
 * nada más abrir la página, la mire alguien o no — y de paso le manda la
 * dirección IP de cada visitante. Pulsando el botón, lo pide él.
 */
.mapa--boton{
  margin-top:26px;
  /* Sin alto reservado mientras es sólo un botón; el alto llega con el mapa. */
  border-radius:14px;
  overflow:hidden;
  transition:border-color .3s ease;
}
.mapa--boton .mapa__previo{display:block;}
.mapa--boton.esta-abierto{
  aspect-ratio:16 / 11;
  border:1px solid rgba(255,255,255,.14);
}
.mapa--boton iframe{display:block;width:100%;height:100%;border:0;}

.mapa__abrir{
  display:flex;align-items:center;gap:12px;
  width:100%;
  padding:16px 20px;
  border:1px solid rgba(143,239,223,.35);border-radius:14px;
  background:rgba(255,255,255,.04);
  color:#fff;
  font-family:var(--font-body);font-size:12px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  text-align:left;
  cursor:pointer;
  transition:background-color .22s ease,border-color .22s ease,transform .22s ease;
}
.mapa__abrir:hover{
  background:rgba(143,239,223,.14);
  border-color:#8FEFDF;
  transform:translateY(-2px);
}
.mapa__abrir:focus-visible{outline:3px solid #8FEFDF;outline-offset:3px;}
.mapa__icono{display:flex;flex:0 0 auto;color:#8FEFDF;}
.mapa__icono svg{width:19px;height:19px;}
/* La flecha se va al final con margin-left:auto y se mueve en diagonal al
   señalar: sale hacia donde va a abrirse el mapa. */
.mapa__hacia{
  display:flex;margin-left:auto;color:#8FEFDF;
  transition:transform .22s cubic-bezier(.2,.8,.3,1);
}
.mapa__hacia svg{width:15px;height:15px;}
.mapa__abrir:hover .mapa__hacia{transform:translate(3px,-3px);}

@media (prefers-reduced-motion: reduce){
  .contacta__brillo,.contacta__linea::after,.contacta__arcos{animation:none;}
  .contacta__linea::after{opacity:0;}
  /* La palabra se queda en verde plano: sin animación, el degradado se
     congelaría en un tramo cualquiera y podría tocarle el azul más oscuro. */
  .contacta__titulo span{animation:none;background:none;-webkit-text-fill-color:#8FEFDF;text-shadow:none;}
  .folio .gform_wrapper input[type="submit"]{transition:none;}
  .canal__icono--timbra svg,.canal__icono--flota svg{animation:none;}
  .canal__icono--onda::after{animation:none;}
  .canal,.canal__icono,.mapa__abrir,.mapa__hacia,.canal::before{transition:none;}
  .afce-revela .canal{opacity:1;transform:none;transition:none;}
  .canal:hover{padding-left:0;}
  .mapa__abrir:hover{transform:none;}
  .mapa__abrir:hover .mapa__hacia{transform:none;}
  .folio .gform_wrapper input[type="submit"]{transition:none;}
  .folio .gform_wrapper input[type="submit"]:hover{transform:none;}
}
@media (max-width: 1000px){
  /*
   * En vertical la línea del medio desaparece: separa dos columnas y ya no hay
   * dos columnas. Dejarla tumbada entre los dos bloques sería una raya que no
   * significa nada.
   */
  .contacta{padding:104px 0 88px;}
  .contacta__grid{grid-template-columns:1fr;gap:48px;}
  .contacta__linea{display:none;}
  .contacta__arcos{right:-140px;bottom:-140px;opacity:.7;}
}
@media (max-width: 600px){
  .folio{padding:22px 20px 22px;border-radius:16px;}
  .canal{gap:13px;padding:18px 0;}
  .canal__icono{width:42px;height:42px;border-radius:11px;}
  .canal__dato{font-size:17px;}
}

/* ============ LA PÁGINA DE UNA SOLUCIÓN ============
 * El texto que la agencia escribió en su día tiene siempre la misma forma: un
 * párrafo que explica en qué consiste y una lista de lo que incluye. Puesto tal
 * cual se leía como un documento —un renglón detrás de otro en una columna
 * estrecha—; aquí cada pieza va donde le toca.
 *
 * La entradilla sube al banner, la lista pasa a ser una cuadrícula de fichas, y
 * el resto del texto sigue debajo con el ritmo de las notas de prensa.
 */

/* ---- LA APERTURA DE UNA SOLUCIÓN ---- */
/*
 * El nombre grande a la izquierda con la promesa debajo, y a la derecha el
 * icono en gigante DIBUJÁNDOSE SOLO cuando la página asoma.
 *
 * Los nueve iconos ya existían y se veían diminutos en la portada y en el
 * índice. Ampliados a trescientos píxeles y trazándose delante de quien mira,
 * el mismo dibujo que era un adorno de veinte píxeles pasa a ser la ilustración
 * de la página — sin encargar una foto ni pagar un banco de imágenes.
 *
 * Y resuelve un problema real: estas nueve páginas no tienen fotografía, así
 * que su apertura era un rectángulo de color con un titular encima.
 */
.solabre{
  position:relative;overflow:hidden;
  /*
   * LA MITAD DE ALTO QUE ANTES.
   *
   * Medía 580 px: casi una pantalla entera de portada para nueve páginas que lo
   * que tienen que hacer es explicar un servicio. Quien entra a «Gestión de
   * Medios» ya sabe a qué va; lo que necesita es llegar al texto.
   *
   * Los 104 de arriba no se pueden bajar más: la cabecera va fija y mide 92, y
   * por debajo de eso el titular le quedaría detrás.
   */
  padding:104px 0 48px;
  background:var(--grad-dark);
}
.solabre__inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.1fr .9fr;
  gap:48px;align-items:center;
}
.solabre__texto{min-width:0;}

.solabre__titulo{
  margin:16px 0 0;
  font-size:clamp(28px,3.4vw,44px);
  line-height:1.08;
  color:#fff;
  text-wrap:balance;
}
/*
 * LA PROMESA, YA FUERA DEL BANNER
 *
 * El primer párrafo del texto de la agencia abre el cuerpo de la página, en
 * grande y con una barra de color delante. Metido en el banner dejaba el bloque
 * de abajo empezando en seco con la lista de entregables, y la página se leía
 * vacía justo donde tenía que explicarse.
 */

/* ---- EL RETRATO DE LA SOLUCIÓN ---- */
/*
 * La promesa a la izquierda y la fotografía a la derecha. Las nueve páginas de
 * solución no tenían una sola imagen; las fotos ya existían —son las del índice
 * de soluciones— y no se usaban aquí, que es donde hacen falta.
 */
.retrato__inner{
  display:grid;
  /* La fotografía manda sobre el texto: la agencia la quería más grande. */
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:52px;
  align-items:center;
}
.retrato__texto .eyebrow{display:block;margin-bottom:18px;}

/*
 * EL ENMARCADO
 *
 * La foto no va suelta: lleva detrás un rectángulo del tono de la solución,
 * desplazado, como el pase-partú de un cuadro. Es lo que la separa del blanco de
 * la página sin ponerle un borde encima.
 */
.retrato__foto{
  position:relative;
  margin:0;
  padding-bottom:54px; /* sitio para la ficha, que sobresale por abajo */
}
.retrato__marco{
  position:absolute;
  top:-18px;left:-18px;right:34px;bottom:72px;
  border-radius:20px;
  background:var(--tono,#0A7F76);
  opacity:.16;
}
.retrato__foto img{
  position:relative;
  display:block;
  width:100%;height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
  border-radius:18px;
  box-shadow:0 26px 60px rgba(0,32,96,.18);
}

/*
 * LA FICHA
 *
 * Blanca, montada sobre la esquina inferior de la foto, con el icono de la
 * solución y su frase corta. Esa frase —«Te posicionamos en los medios
 * correctos, en el momento correcto»— tampoco se usaba en la página, y es la que
 * resume en un renglón qué se consigue.
 *
 * Sube un poco al pasar el ratón por la foto: el conjunto se despega de la
 * página en vez de moverse una pieza suelta.
 */
.retrato__ficha{
  position:absolute;
  left:26px;right:26px;bottom:0;
  display:flex;align-items:center;gap:16px;
  padding:18px 22px;
  border-radius:14px;
  background:#fff;
  box-shadow:0 18px 44px rgba(0,32,96,.16);
  transition:transform .3s cubic-bezier(.2,.75,.3,1),
             box-shadow .3s ease;
}
.retrato__foto:hover .retrato__ficha{
  transform:translateY(-6px);
  box-shadow:0 26px 56px rgba(0,32,96,.22);
}
.retrato__ficha-icono{
  flex:0 0 auto;
  display:grid;place-items:center;
  width:46px;height:46px;
  border-radius:12px;
  background:color-mix(in srgb, var(--tono,#0A7F76) 12%, #ffffff);
  color:var(--tono,#0A7F76);
}
.retrato__ficha-icono svg{width:26px;height:26px;}
.retrato__ficha-texto{
  font-family:var(--font-display);
  font-size:16px;line-height:1.35;
  color:var(--brand-navy);
}

@media (max-width: 900px){
  .retrato__inner{grid-template-columns:1fr;gap:36px;}
  .retrato__marco{right:24px;}
}

/* ---- EL SIGUIENTE PASO ---- */
/*
 * La página terminaba en el texto y pasaba directa a las otras ocho soluciones:
 * quien acababa de leer que esto es justo lo que necesita no tenía dónde pulsar
 * sin volver arriba.
 */
.cierre{
  position:relative;
  overflow:hidden;
  padding:78px 0;
  background:linear-gradient(115deg,
              var(--tono,#0A7F76) 0%,
              color-mix(in srgb, var(--tono,#0A7F76) 55%, var(--brand-navy,#002060)) 62%,
              var(--brand-navy,#002060) 100%);
}
/*
 * La foto entra por la derecha y se desvanece con una MÁSCARA, no con una capa
 * de color encima: una capa la teñiría; la máscara la deja con su color y sólo la
 * va borrando. Es el mismo recurso de la cabecera de las notas de prensa.
 */
.cierre__foto{
  position:absolute;
  top:0;right:0;bottom:0;
  width:min(52%,760px);
  background-size:cover;
  background-position:center;
  opacity:.5;
  -webkit-mask-image:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.55) 42%,#000 100%);
          mask-image:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.55) 42%,#000 100%);
}
.cierre__inner{position:relative;}
.cierre__titulo{
  margin:14px 0 0;
  max-width:18ch;
  font-size:clamp(28px,3.4vw,42px);
  line-height:1.12;
  color:#fff;
  text-wrap:balance;
}
.cierre__texto{
  margin:14px 0 28px;
  max-width:44ch;
  font-size:17px;
  color:#DCE9FA;
}
@media (max-width: 900px){
  .cierre__foto{width:100%;opacity:.24;-webkit-mask-image:none;mask-image:none;}
  .cierre__titulo{max-width:none;}
}

/*
 * LA ENTRADILLA, CON LA BARRA DEL TONO
 *
 * El párrafo de la agencia, entero, con una barra del color de la solución al
 * margen izquierdo. Después se probaron una capitular de revista, una partición
 * por la primera frase y una capitular en degradado; las tres se descartaron. La
 * barra ata el texto con el tono de la solución sin robarle protagonismo a lo
 * que dice, y eso es todo lo que tiene que hacer.
 */
.promesa__texto{
  position:relative;
  max-width:56ch;
  margin:0;
  padding-left:26px;
  border-left:4px solid var(--tono,#0A7F76);
  font-family:var(--font-display);
  font-size:clamp(19px,2vw,26px);
  line-height:1.5;
  color:var(--text);
}

.solabre__paso{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:22px;
  padding:13px 28px;
  border-radius:999px;
  background:var(--accent);color:#012320;
  font-size:15px;font-weight:700;
  text-decoration:none;
  transition:gap .22s ease,transform .22s cubic-bezier(.2,.8,.3,1);
}
.solabre__paso:hover{gap:16px;transform:translateY(-2px);}
.solabre__paso:focus-visible{outline:3px solid #8FEFDF;outline-offset:3px;}

/* ---- EL ICONO QUE SE DIBUJA ---- */
.solabre__dibujo{
  position:relative;
  display:grid;place-items:center;
  aspect-ratio:1;
  /* El aro mide 240: menos que los 360 del principio —la franja es la mitad de
     alta que entonces— pero lo bastante para que el icono se lea como la
     ilustración de la página y no como un adorno. */
  width:min(240px,100%);
  margin-left:auto;
  color:#8FEFDF;
}
/* El aro de fondo, en el tono de la solución. Sin él el icono flota en el
   vacío; con él parece un sello. */
.solabre__aro{
  position:absolute;inset:8%;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,
    color-mix(in srgb, var(--tono,#0A7F76) 55%, transparent) 0%,
    transparent 68%);
  border:1px solid rgba(143,239,223,.18);
}
.solabre__dibujo svg{
  position:relative;z-index:1;
  /* El dibujo llena el sello en vez de flotar dentro: del 58% de origen al 82%. */
  width:82%;height:82%;
}

/*
 * EL TRAZADO
 *
 * pathLength="1" —lo pone PHP en cada forma— hace que el navegador trate cada
 * trazo como si midiera exactamente 1 de largo, mida lo que mida de verdad. Con
 * eso, una raya de guiones de longitud 1 desplazada 1 deja el trazo ENTERO
 * fuera de la vista; llevar el desplazamiento a 0 lo va destapando de principio
 * a fin.
 *
 * Es lo que permite que una sola regla dibuje los nueve iconos sin medir
 * ninguno.
 *
 * El estado inicial cuelga de .afce-revela, la clase que pone el script al
 * arrancar: si no llega, el icono se ve ya dibujado en vez de quedarse
 * invisible para siempre.
 */
.afce-revela .solabre__dibujo svg > *{
  stroke-dasharray:1;
  stroke-dashoffset:1;
}
/*
 * Y CUANDO TERMINA DE DIBUJARSE, NO SE QUEDA QUIETO
 *
 * El trazo tarda dos segundos y medio; a partir de ahí el icono entero respira
 * —sube, baja y crece un pelo— y el halo de detrás late a contratiempo. Sin
 * esto, la ilustración se dibujaba una vez y se quedaba muerta el resto de la
 * visita.
 *
 * El retardo de la respiración es el de la animación de trazado más un poco:
 * empieza justo cuando el dibujo está terminado.
 */
.afce-revela .solabre__dibujo.es-visible svg{
  animation:solabre-respira 6s ease-in-out 2.9s infinite;
}
@keyframes solabre-respira{
  0%,100%{transform:translateY(0) scale(1);}
  50%    {transform:translateY(-10px) scale(1.03);}
}
.afce-revela .solabre__dibujo.es-visible .solabre__aro{
  animation:solabre-late 6s ease-in-out 2.9s infinite;
}
@keyframes solabre-late{
  0%,100%{opacity:.75;transform:scale(1);}
  50%    {opacity:1;transform:scale(1.05);}
}

.afce-revela .solabre__dibujo.es-visible svg > *{
  stroke-dashoffset:0;
  /*
   * Dos segundos y medio, y cada forma empieza un poco después que la anterior.
   * El retardo no puede salir de una variable porque las formas las escribe el
   * texto del icono, así que se reparten a mano las seis primeras — ninguno de
   * los nueve iconos tiene más.
   */
  transition:stroke-dashoffset 2.5s cubic-bezier(.35,.15,.2,1);
}
.afce-revela .solabre__dibujo.es-visible svg > *:nth-child(2){transition-delay:.35s;}
.afce-revela .solabre__dibujo.es-visible svg > *:nth-child(3){transition-delay:.7s;}
.afce-revela .solabre__dibujo.es-visible svg > *:nth-child(4){transition-delay:1.05s;}
.afce-revela .solabre__dibujo.es-visible svg > *:nth-child(5){transition-delay:1.4s;}
.afce-revela .solabre__dibujo.es-visible svg > *:nth-child(6){transition-delay:1.75s;}

@media (prefers-reduced-motion: reduce){
  /* El icono se ve dibujado del todo, sin trazarse. */
  .afce-revela .solabre__dibujo svg > *{stroke-dashoffset:0;}
  .afce-revela .solabre__dibujo.es-visible svg > *{transition:none;transition-delay:0s;}
  .afce-revela .solabre__dibujo.es-visible svg,
  .afce-revela .solabre__dibujo.es-visible .solabre__aro{animation:none;}
  .solabre__paso{transition:none;}
  .solabre__paso:hover{gap:10px;transform:none;}
}
@media (max-width: 900px){
  .solabre{padding:96px 0 44px;}
  .solabre__inner{grid-template-columns:1fr;gap:36px;}
  /* El icono, más pequeño y centrado: en vertical, un dibujo de 360 px encima
     del titular se come la pantalla antes de leer nada. */
  .solabre__dibujo{width:min(190px,52%);margin:0 auto;order:-1;}
}


/* ---- LO QUE INCLUYE: LAS PIEZAS DEL ENCARGO ---- */
/*
 * Cada entregable es una tarjeta con un dibujo abstracto en la esquina. Al
 * señalarla, UN MANTO DE COLOR SUBE desde abajo y la cubre entera: el texto se
 * vuelve blanco, la marca de verificación da media vuelta y el dibujo de la
 * esquina gira y crece.
 *
 * El manto sube, no aparece. Es la diferencia entre encender una luz y que
 * alguien tire de una tela hacia arriba: lo segundo tiene dirección, y la
 * dirección es lo que hace que se note que la tarjeta ha hecho algo.
 *
 * --tono lo pone la plantilla con el color que le toca a esa solución en la
 * progresión de marca, el mismo con el que aparece en la portada y en el
 * índice. Lo heredan el manto, la marca y el dibujo: una sola variable pinta la
 * sección entera.
 */
.piezas{background:var(--surface-2);}
.piezas__cabeza{margin-bottom:34px;}
.piezas__cabeza h2{margin:10px 0 0;font-size:clamp(24px,2.4vw,32px);line-height:1.15;}

.piezas__rejilla{
  list-style:none;margin:0;padding:0;
  display:grid;
  /*
   * Columnas que se reparten solas. Las listas van de tres puntos a siete según
   * la solución, y con un número fijo de columnas unas quedaban vacías y otras
   * apretadas.
   */
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:14px;
}

.pieza{
  position:relative;overflow:hidden;
  isolation:isolate;   /* que el manto no se salga de las esquinas redondeadas */
  display:flex;flex-direction:column;gap:16px;
  min-height:170px;
  padding:22px 24px 24px;
  border-radius:18px;
  background:var(--surface);
  border:1px solid var(--border);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s ease,border-color .3s ease;
}
.pieza:hover{
  transform:translateY(-4px);
  border-color:transparent;
  box-shadow:0 22px 46px rgba(0,32,96,.16);
}

/*
 * EL MANTO
 *
 * Empieza justo debajo del borde inferior —101 % para que no asome ni un píxel
 * por el redondeo— y sube hasta cubrir la tarjeta.
 */
.pieza__manto{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(160deg,
    var(--tono,#0A7F76) 0%,
    color-mix(in srgb, var(--tono,#0A7F76) 78%, #002060) 100%);
  transform:translateY(101%);
  transition:transform .45s cubic-bezier(.3,.8,.25,1);
}
.pieza:hover .pieza__manto{transform:translateY(0);}

/*
 * EL DIBUJO DE LA ESQUINA
 *
 * Grande, cortado por el borde y muy apagado: es textura, no icono. Al señalar
 * la tarjeta gira un octavo de vuelta y crece, así que la esquina cambia de
 * silueta bajo el manto.
 */
.pieza__forma{
  position:absolute;top:-18px;right:-18px;
  width:104px;height:104px;
  color:var(--tono,#0A7F76);
  opacity:.14;
  transition:transform .55s cubic-bezier(.3,.8,.25,1),opacity .45s ease,color .45s ease;
}
.pieza__forma svg{width:100%;height:100%;}
.pieza:hover .pieza__forma{
  transform:rotate(45deg) scale(1.25);
  color:#fff;opacity:.3;
}

/*
 * LA MARCA
 *
 * Da media vuelta sobre su eje vertical al señalar. Es el único elemento que se
 * VOLTEA de verdad, y con uno basta: si girase también la tarjeta, el texto
 * quedaría del revés a mitad de camino.
 */
.pieza__marca{
  display:grid;place-items:center;
  width:34px;height:34px;
  border-radius:11px;
  background:color-mix(in srgb, var(--tono,#0A7F76) 14%, transparent);
  color:var(--tono,#0A7F76);
  transition:transform .5s cubic-bezier(.3,.8,.25,1),background-color .4s ease,color .4s ease;
}
.pieza__marca svg{width:16px;height:16px;}
.pieza:hover .pieza__marca{
  transform:rotateY(180deg);
  background:rgba(255,255,255,.2);
  color:#fff;
}

.pieza__texto{
  position:relative;
  margin-top:auto;
  font-size:16px;line-height:1.45;
  color:var(--text-soft);
  transition:color .35s ease;
}
.pieza:hover .pieza__texto{color:#fff;}
/* Los puntos que llevan enlace —los talleres de Capacitaciones— siguen siendo
   enlaces y tienen que verse como tales, también sobre el manto. */
.pieza__texto a{
  color:var(--tono,#0A7F76);
  font-weight:700;text-decoration:none;
  border-bottom:1px solid currentColor;
  transition:color .35s ease;
}
.pieza:hover .pieza__texto a{color:#fff;}

/*
 * Las piezas entran en cascada al asomar, con el retardo sacado de --i. El
 * estado inicial cuelga de .afce-revela, la clase que pone el script: si no
 * llega, se ven de entrada en vez de quedarse invisibles para siempre.
 */
.afce-revela .pieza{
  opacity:0;transform:translateY(16px);
  transition:opacity .5s ease calc(var(--i,0) * .06s),
             transform .5s cubic-bezier(.2,.75,.3,1) calc(var(--i,0) * .06s),
             box-shadow .3s ease,border-color .3s ease;
}
.afce-revela .pieza.es-visible{opacity:1;transform:none;}

@media (prefers-reduced-motion: reduce){
  /*
   * El manto se queda fuera y la tarjeta sólo cambia de borde: sin movimiento,
   * un color que aparece de golpe tapando el texto se lee como un fallo.
   */
  .pieza,.pieza__manto,.pieza__forma,.pieza__marca,.pieza__texto{transition:none;}
  .pieza:hover{transform:none;border-color:var(--tono,#0A7F76);}
  .pieza:hover .pieza__manto{transform:translateY(101%);}
  .pieza:hover .pieza__forma{transform:none;color:var(--tono,#0A7F76);opacity:.14;}
  .pieza:hover .pieza__marca{transform:none;background:color-mix(in srgb, var(--tono,#0A7F76) 14%, transparent);color:var(--tono,#0A7F76);}
  .pieza:hover .pieza__texto{color:var(--text-soft);}
  .pieza:hover .pieza__texto a{color:var(--tono,#0A7F76);}
  .afce-revela .pieza{opacity:1;transform:none;transition:none;}
}
@media (max-width: 600px){
  .piezas__rejilla{grid-template-columns:1fr;gap:10px;}
  .pieza{min-height:0;padding:18px 20px 20px;gap:12px;}
  .pieza__forma{width:80px;height:80px;top:-12px;right:-12px;}
}

/* ---- EL RESTO DEL TEXTO ---- */
/*
 * Mismo ritmo tipográfico que el cuerpo de una nota de prensa: la agencia
 * escribe igual en los dos sitios, así que no tiene sentido que se lean
 * distinto. La columna se centra y se queda estrecha porque leer pide renglones
 * cortos.
 */
.solucion__texto{max-width:760px;margin:0 auto;font-size:17px;}
.solucion__texto > * + *{margin-top:1.4em;}
.solucion__texto h2,
.solucion__texto h3,
.solucion__texto h4{
  position:relative;
  padding-top:18px;
  margin-top:2em;
  color:var(--text);
  /* Los textos de AF traen los intertítulos alineados a la derecha o centrados,
     de cuando se maquetaban a mano. Aquí van todos a la izquierda: en una
     columna de lectura, un titular centrado parte el hilo. */
  text-align:left !important;
}
.solucion__texto h2{font-size:25px;}
.solucion__texto h3{font-size:21px;}
.solucion__texto h4{font-size:18px;}
/* La barra corta encima, la misma que llevan los intertítulos de las notas. */
.solucion__texto h2::before,
.solucion__texto h3::before,
.solucion__texto h4::before{
  content:"";
  position:absolute;top:0;left:0;
  width:38px;height:4px;border-radius:3px;
  background:linear-gradient(90deg,#04A99C 0%,#233D82 100%);
}
.solucion__texto ul{list-style:none;padding-left:0;}
.solucion__texto ul li{position:relative;padding-left:26px;}
.solucion__texto ul li + li{margin-top:.5em;}
.solucion__texto ul li::before{
  content:"";
  position:absolute;left:2px;top:.62em;
  width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,#04A99C,#233D82);
}
.solucion__texto img{border-radius:14px;box-shadow:0 18px 44px rgba(0,32,96,.14);}
.solucion__texto blockquote{
  position:relative;overflow:hidden;
  margin:2em 0;padding:28px 30px 26px 42px;
  border:0;border-radius:18px;
  background:var(--surface-2);
  font-family:var(--font-display);
  font-style:italic;font-size:19px;line-height:1.55;
  color:var(--text);
}
.solucion__texto blockquote::before{
  content:"\201C";
  position:absolute;top:-32px;left:8px;
  font-family:var(--font-display);
  font-size:140px;line-height:1;
  color:var(--accent);
  opacity:.2;
}
.solucion__texto blockquote p{position:relative;margin:0;}
.solucion__texto blockquote p + p{margin-top:.7em;}

/* ---- LAS OTRAS SOLUCIONES ---- */
/*
 * Una página de solución sin esto termina en un callejón. Van en píldoras y no
 * en tarjetas: son ocho, y ocho tarjetas con icono y frase serían otra página
 * entera debajo de la página.
 */
.otras{background:var(--surface-2);}
.otras__cabeza{margin-bottom:26px;}
.otras__cabeza h2{margin:10px 0 0;font-size:clamp(22px,2.2vw,28px);}

/*
 * LAS OCHO OTRAS SOLUCIONES, CON SU ICONO
 *
 * Una fila de ocho: el icono de cada solución en su cuadro y el nombre debajo.
 * Al señalar uno, el cuadro se llena del color de esa solución y el icono se
 * vuelve blanco.
 *
 * Aquí han estado, por este orden: ocho píldoras en dos renglones, un sumario a
 * dos columnas, una cinta que corría sola, ocho lomos de pie y una regla
 * graduada. Las cuatro últimas escondían el nombre hasta que se señalaba la
 * pieza, y eso obliga a ir probando una por una para saber qué hay.
 *
 * Esta enseña las ocho cosas a la vez y usa el mismo lenguaje que el índice de
 * arriba —el icono en su cuadro de color—, que es el que la agencia aprobó.
 */
/*
 * La sección va más apretada que las demás: es el pie de la página de una
 * solución, no un capítulo. Cabecera y fila de iconos en una banda corta.
 */
.otras{padding-top:46px;padding-bottom:52px;}
.otras__cabeza{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;}
.otras__titulo{margin:0;font-size:clamp(19px,1.9vw,23px);}

.ocho{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:8px;
  margin-top:18px;
}

.ocho__una{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:10px 5px 9px;
  border-radius:12px;
  text-decoration:none;
  transition:background-color .24s ease,transform .28s cubic-bezier(.2,.8,.3,1);
}
.ocho__una:hover{
  background:color-mix(in srgb, var(--tono,#0A7F76) 7%, #ffffff);
  transform:translateY(-3px);
}
.ocho__una:focus-visible{outline:3px solid var(--accent-ink);outline-offset:2px;}

.ocho__icono{
  display:grid;place-items:center;
  width:44px;height:44px;
  border-radius:13px;
  background:color-mix(in srgb, var(--tono,#0A7F76) 13%, #ffffff);
  color:var(--tono,#0A7F76);
  transition:background-color .26s ease,color .26s ease;
}
.ocho__icono svg{width:21px;height:21px;}
.ocho__una:hover .ocho__icono,
.ocho__una:focus-visible .ocho__icono{
  background:var(--tono,#0A7F76);
  color:#fff;
}

.ocho__nombre{
  font-size:11.5px;
  line-height:1.28;
  text-align:center;
  color:var(--text-muted);
  transition:color .24s ease;
  /*
   * Hasta TRES renglones. Con dos, «Comunicación Interna y Gestión de Cambio»
   * se cortaba en «Comunicación Interna y Ges…», que no dice a dónde lleva; es
   * el mismo fallo que hubo que corregir en la versión de los lomos.
   *
   * El tope existe igualmente porque los ocho nombres son de largos muy
   * distintos y, sin él, una columna de cuatro renglones descuadraría la fila.
   */
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ocho__una:hover .ocho__nombre,
.ocho__una:focus-visible .ocho__nombre{color:var(--brand-navy,#002060);}

@media (prefers-reduced-motion: reduce){
  .ocho__una,.ocho__icono,.ocho__nombre{transition:none;}
  .ocho__una:hover{transform:none;}
}
@media (max-width: 900px){
  .ocho{grid-template-columns:repeat(4,1fr);gap:8px;}
}
@media (max-width: 520px){
  .ocho{grid-template-columns:repeat(2,1fr);}
}

.otras__paso{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:26px;
  padding:14px 30px;
  border-radius:999px;
  background:var(--accent-ink);color:#fff;
  font-size:15px;font-weight:700;
  text-decoration:none;
  transition:gap .22s ease,background-color .22s ease;
}
.otras__paso:hover{gap:16px;background:var(--brand-teal);}

@media (prefers-reduced-motion: reduce){
  .otras__paso{transition:none;}
  .otras__paso:hover{gap:10px;}
}
@media (max-width: 600px){
}

/* ============ LA NOTA: SE LEE COMO UNA NOTICIA ============
 * Una nota de prensa no es una entrada de blog. Antes esta página la trataba
 * como tal: titular, un rectángulo con la foto del mismo tamaño que cualquier
 * imagen del cuerpo, y el texto debajo. La foto de portada no se distinguía de
 * una ilustración cualquiera.
 *
 * Ahora abre a sangre —la fotografía ocupa el ancho de la pantalla y el titular
 * va encima—, lleva un hilo de progreso en el margen y termina con las otras
 * notas de la misma categoría puestas en línea de tiempo.
 */

/* ---- LA APERTURA ---- */
/*
 * LA APERTURA: LA FOTOGRAFÍA CUBRE EL LADO DERECHO
 *
 * La banda es azul de la casa. La fotografía va colocada encima de su mitad
 * derecha, de arriba abajo y hasta el filo de la pantalla, y su borde izquierdo
 * se desvanece sobre el azul. No hay línea de corte: la foto se disuelve en el
 * fondo.
 *
 * El desvanecido se hace con una MÁSCARA y no con un degradado encima. Un
 * degradado del color del fondo puesto sobre la foto la tiñe y le apaga los
 * colores; la máscara sólo decide qué parte de la imagen se pinta. La foto
 * conserva sus tonos y lo único que cambia es cuánta se ve.
 *
 * Aquí la foto sí se recorta, a diferencia de la versión anterior. Es lo que
 * pidió la agencia con una referencia delante, y a cambio se gana que el
 * titular vaya siempre sobre color liso y se lea con cualquier fotografía.
 */
.nota__abre{
  position:relative;overflow:hidden;
  display:flex;align-items:center;
  min-height:clamp(360px,46vh,470px);
  /* 124 arriba porque la cabecera va fija y mide 92. */
  padding:124px 0 56px;
  background:var(--grad-dark);
  color:#fff;
}
.nota__abre-inner{position:relative;z-index:1;width:100%;}
/* El titular manda sobre la mitad izquierda y no se mete debajo de la foto. */
.nota__cabecera{max-width:min(560px,52%);}

.nota__figura{
  position:absolute;
  top:0;right:0;bottom:0;
  /* Ancho de la mancha: algo más de la mitad, como en la referencia. */
  width:min(64%,980px);
  margin:0;
}
.nota__foto{
  width:100%;height:100%;
  object-fit:cover;
  /*
   * El encuadre, por encima del centro. En las fotos de acto y de rueda de
   * prensa las caras están en el tercio superior; centrado, el recorte las
   * decapitaba. Es el mismo 28 % que usan las tarjetas.
   */
  object-position:center 28%;
  /*
   * La máscara: transparente en el filo izquierdo y opaca a partir de un tercio.
   * Los dos prefijos porque Safari todavía pide el suyo; donde no se entienda
   * ninguno, la foto sale con el borde recto — se pierde el desvanecido, no la
   * fotografía.
   */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 14%,#000 34%);
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 14%,#000 34%);
}
.nota__sello{
  display:inline-block;
  padding:5px 13px;border-radius:999px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(6px);
  font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:#fff;
}
.nota__titular{
  max-width:22ch;
  margin:18px 0 0;
  font-size:clamp(30px,4.4vw,54px);
  line-height:1.06;
  color:#fff;
  /* Que el titular no deje una palabra sola en el último renglón. */
  text-wrap:balance;
}
.nota__firma{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:18px 0 0;
  font-size:14px;
  color:rgba(255,255,255,.82);
  font-variant-numeric:tabular-nums;
}
.nota__punto{opacity:.5;}

/* En vertical, la foto primero y el titular debajo: en una pantalla estrecha
   dos columnas de la mitad no caben, y la fotografía es lo que dice de qué va
   la nota antes de leer nada. */
@media (max-width: 900px){
  /*
   * En vertical la fotografía pasa a estar DETRÁS del titular, a todo el ancho,
   * y el desvanecido se da la vuelta: en vez de venir del lado izquierdo, viene
   * de abajo. Es la única forma de que el titular siga leyéndose cuando ya no
   * hay dos mitades que repartir.
   */
  .nota__abre{padding:104px 0 44px;min-height:clamp(320px,58vh,440px);}
  .nota__cabecera{max-width:none;}
  .nota__figura{width:100%;left:0;}
  .nota__foto{
    -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.45) 46%,transparent 88%);
            mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.45) 46%,transparent 88%);
  }
}

/* ---- EL REPRODUCTOR: LA NOTA SE ESCUCHA ---- */
/*
 * Una píldora pequeña al principio del texto: el play, «Escuchar la nota · 3
 * min» y la velocidad. Nada más. Antes ocupaba un renglón entero con cuatro
 * botones de velocidad en fila; esto cabe en un tercio del ancho.
 *
 * Y el progreso NO está en una barra aparte: es un ARO alrededor del propio
 * botón de play, que se va cerrando según avanza la lectura. Un reloj de
 * cocina. Es la forma de tener barra de progreso sin gastar ni un píxel más de
 * los que ya ocupa el botón.
 *
 * De todo lo que se le puede añadir a la página de una noticia, esto es lo
 * único que tiene que ver con lo que hace AF: su oficio es que las cosas se
 * oigan. Y sirve de verdad — las notas se leen con las manos ocupadas.
 */
.oyela{
  display:inline-flex;align-items:center;gap:12px;
  margin:0 0 34px;
  padding:6px 16px 6px 6px;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--border);
  transition:border-color .25s ease,background-color .25s ease;
}
.oyela.esta-hablando{border-color:var(--accent);background:var(--accent-tint);}

/*
 * EL ARO DE PROGRESO
 *
 * El fondo del botón es un degradado cónico: verde hasta el ángulo que diga
 * --va y gris el resto. Encima, un círculo del color de la píldora deja sólo
 * una corona de tres píxeles a la vista, que es el aro.
 *
 * Se pinta con un solo elemento y sin SVG. --va lo pone el script en tanto por
 * ciento, y conic-gradient entiende los porcentajes como vueltas.
 */
.oyela__play{
  position:relative;
  flex:0 0 auto;
  display:grid;place-items:center;
  grid-template-areas:"icono";
  width:38px;height:38px;
  padding:0;border:0;border-radius:50%;
  background:conic-gradient(var(--accent) var(--va,0%), var(--border-strong) 0);
  color:var(--accent-ink);
  cursor:pointer;
  transition:transform .22s cubic-bezier(.2,.8,.3,1);
}
.oyela__play::before{
  content:"";
  position:absolute;inset:3px;
  border-radius:50%;
  background:var(--surface-2);
  transition:background-color .25s ease;
}
.esta-hablando .oyela__play::before{background:var(--accent-tint);}
.oyela__play:hover{transform:scale(1.07);}
.oyela__play:focus-visible{outline:3px solid var(--accent);outline-offset:3px;}
.oyela__play svg{position:relative;z-index:1;width:14px;height:14px;}
/* Los dos iconos ocupan la misma celda y se turnan: el triángulo cuando calla,
   las dos barras cuando habla. */
.oyela__triangulo,.oyela__pausa{grid-area:icono;}
.oyela__pausa{display:none;}
.esta-hablando .oyela__triangulo{display:none;}
.esta-hablando .oyela__pausa{display:block;}

.oyela__medio{display:flex;align-items:baseline;gap:8px;min-width:0;}
.oyela__rotulo{font-size:13.5px;font-weight:700;color:var(--text);white-space:nowrap;}
.oyela__dura{
  font-size:12px;
  color:var(--text-muted);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.oyela__dura::before{content:"·";margin-right:8px;opacity:.6;}

/*
 * LA VELOCIDAD
 *
 * Una sola píldora que va pasando por las cuatro a cada pulsación. Cuatro
 * botones ocupaban cuatro veces el sitio para algo que casi nadie toca y que
 * quien lo toca sabe lo que busca.
 */
.oyela__x{
  flex:0 0 auto;
  min-width:46px;
  padding:5px 10px;
  border:1px solid var(--border-strong);border-radius:999px;
  background:none;
  color:var(--text-soft);
  font-family:var(--font-body);font-size:11.5px;font-weight:700;
  cursor:pointer;
  font-variant-numeric:tabular-nums;
  transition:color .2s ease,border-color .2s ease;
}
.oyela__x:hover{color:var(--accent-ink);border-color:var(--accent);}
.oyela__x:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ---- SELECCIONA UNA FRASE Y COMPÁRTELA ---- */
/*
 * El globito que sale al marcar texto con el ratón. Va pegado al <body> con
 * position:absolute y coordenadas de página: dentro del texto, cualquier
 * contenedor con overflow lo recortaría.
 */
.citar{
  position:absolute;z-index:60;
  display:flex;gap:2px;
  padding:4px;
  border-radius:12px;
  background:var(--brand-navy);
  box-shadow:0 14px 34px rgba(0,10,40,.42);
  /* Entra hacia arriba, como algo que sale de lo que acabas de marcar. */
  animation:citar-sale .18s ease-out both;
}
@keyframes citar-sale{
  from{opacity:0;transform:translateY(5px);}
  to  {opacity:1;transform:none;}
}
/* La punta de abajo, que es lo que lo ata a la frase marcada. */
.citar::after{
  content:"";
  position:absolute;bottom:-5px;left:50%;
  width:10px;height:10px;
  margin-left:-5px;
  background:var(--brand-navy);
  transform:rotate(45deg);
  border-radius:2px;
}
.citar__boton{
  position:relative;z-index:1;
  padding:8px 14px;
  border:0;border-radius:9px;
  background:none;
  color:#fff;
  font-family:var(--font-body);font-size:13px;font-weight:600;
  text-decoration:none;white-space:nowrap;
  cursor:pointer;
  transition:background-color .18s ease;
}
.citar__boton:hover{background:rgba(255,255,255,.16);}

/* ---- NOTICIA ANTERIOR Y SIGUIENTE ---- */
/*
 * Una a cada lado: a la izquierda la flecha y «Noticia anterior», a la derecha
 * «Noticia siguiente» y su flecha mirando al otro lado. Los rótulos van SIEMPRE
 * a la vista: quien llega al final de una noticia está decidiendo si sigue, y
 * para decidir hay que poder leer las dos salidas de un vistazo.
 *
 * Debajo de cada rótulo, el titular de esa noticia, en dos renglones como
 * mucho.
 */
.saltos{
  display:flex;align-items:flex-start;justify-content:space-between;gap:28px;
  padding-top:28px;
  border-top:1px solid var(--border);
}
/* El hueco de la noticia que no existe —la primera y la última del archivo— para
   que la que sí existe no se descoloque al centro. */
.salto--vacio{flex:1 1 0;}

.salto{
  flex:0 0 auto;min-width:0;
  display:flex;align-items:center;gap:14px;
  text-decoration:none;
}

/*
 * LA FLECHA
 *
 * Un círculo perfilado que se rellena al señalar, y la flecha se sale un poco
 * hacia SU lado — la de la izquierda a la izquierda, la de la derecha a la
 * derecha—. Es el único movimiento del bloque y va en la dirección a la que
 * lleva el enlace.
 */
.salto__flecha{
  flex:0 0 auto;
  display:grid;place-items:center;
  width:46px;height:46px;
  border:1.5px solid var(--border-strong);border-radius:50%;
  color:var(--accent-ink);
  transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .25s cubic-bezier(.2,.8,.3,1);
}
.salto__flecha svg{width:18px;height:18px;}
.salto:hover .salto__flecha{
  background:var(--accent-ink);
  border-color:var(--accent-ink);
  color:#fff;
}
.salto--atras:hover .salto__flecha{transform:translateX(-5px);}
.salto--alante:hover .salto__flecha{transform:translateX(5px);}
.salto:focus-visible .salto__flecha{outline:3px solid var(--accent);outline-offset:3px;}

.salto__rotulo{
  font-size:11px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-muted);
  transition:color .25s ease;
}
.salto:hover .salto__rotulo{color:var(--accent-ink);}

/*
 * EL TITULAR NO SE VE, PERO SIGUE AHÍ
 *
 * A la vista quedan sólo la flecha y el rótulo. El titular se esconde de la
 * pantalla pero NO de la página: un lector de pantalla que recorra los enlaces
 * oiría «noticia anterior» dos veces sin saber a qué llevan. Escondido así, lo
 * lee y dice a dónde va.
 */
.salto__titulo{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);
}

/*
 * La siguiente es la misma pieza en espejo: la flecha pasa a la derecha —y su
 * dibujo se da la vuelta, que es un solo icono para las dos— y el texto se
 * alinea a ese lado, subrayado incluido.
 */
.salto--alante{flex-direction:row-reverse;}
.salto--alante .salto__flecha svg{transform:scaleX(-1);}

@media (prefers-reduced-motion: reduce){
  .oyela__play{transition:none;}
  .oyela__play:hover{transform:none;}
  .citar{animation:none;}
  .salto__flecha,.salto__rotulo{transition:none;}
  .salto--atras:hover .salto__flecha{transform:none;}
  .salto--alante:hover .salto__flecha{transform:none;}
}
@media (max-width: 760px){
  /*
   * En vertical, una debajo de otra y las dos mirando al mismo lado: espejada,
   * la de abajo parecería de otra cosa. Sólo la flecha se da la vuelta.
   */
  .saltos{flex-direction:column;align-items:stretch;gap:16px;}
  .salto{max-width:none;}
  .salto--vacio{display:none;}
  .salto--alante{flex-direction:row;}
}

/* ---- EL CUERPO Y EL HILO DEL MARGEN ---- */
/*
 * Dos columnas: un carril estrecho a la izquierda para el hilo y la columna de
 * lectura. Con justify-content:center las dos juntas quedan centradas en la
 * página, así que el texto sigue en el eje y el hilo cae en el margen.
 */
/*
 * Tres columnas y no dos: el raíl, el texto y un hueco vacío del mismo ancho
 * que el raíl.
 *
 * Con dos, justify-content:center centraba el CONJUNTO —raíl incluido—, así que
 * la columna de lectura quedaba desplazada 37 px a la derecha. Medido en el
 * navegador: 290 px de margen a la izquierda contra 230 a la derecha.
 *
 * La tercera columna no lleva nada dentro; está para equilibrar.
 */
.nota__grid{
  display:grid;
  grid-template-columns:40px minmax(0,760px) 40px;
  justify-content:center;
  gap:0 34px;
}
.nota__texto{min-width:0;}

.hilo{
  /* Pegado mientras se baja: acompaña toda la lectura. La cabecera fija mide
     92, de ahí el 130. */
  position:sticky;top:130px;
  justify-self:end;
  height:min(46vh,380px);
}
.hilo__riel{
  position:relative;
  width:3px;height:100%;
  border-radius:2px;
  background:var(--border);
  overflow:hidden;
}
/*
 * Lo llena un script: no hay forma de saber en CSS cuánto se ha bajado. Si el
 * script no llega, la línea se queda vacía y no pasa nada — es un adorno
 * informativo, no un control.
 */
.hilo__lleno{
  position:absolute;top:0;left:0;
  width:100%;height:0;
  background:linear-gradient(180deg,#04A99C 0%,#0E6E9B 55%,#233D82 100%);
}

/* Y la entradilla, un punto más grande que el resto: el primer párrafo de una
   nota de prensa es el que la resume. */
.nota__texto .entry__content > p:first-of-type{
  font-size:20px;line-height:1.62;
  color:var(--text);
}

/* ---- CÓMO SE PRESENTA EL TEXTO DE LA NOTA ---- */
/*
 * Aquí no se inventa nada: se le da forma a lo que las notas YA traen escrito.
 * Las 778 entradas siguen una convención de redacción de la agencia que estaba
 * pasando desapercibida —un sumario en cursiva arriba, la línea de fecha en
 * negrita, las frases importantes destacadas— y que en pantalla se veía como
 * texto corrido cualquiera.
 *
 * Lo que hace este bloque es poner cada una de esas piezas en su sitio.
 */

.nota__texto .entry__content{font-size:17.5px;line-height:1.72;}

/*
 * EL SUMARIO, «DE UN VISTAZO»
 *
 * Casi todas las notas abren con una lista de un solo punto en cursiva: es el
 * resumen que la agencia pone antes del cuerpo. Se convierte en una tarjeta
 * oscura con el degradado de marca y una píldora encima que lo anuncia.
 *
 * :first-child y no :first-of-type a propósito: sólo es sumario si va lo
 * primero de todo. Una lista en mitad de la nota es una lista normal.
 *
 * La píldora va en content porque el texto no está en el HTML —lo escribe la
 * redacción en Gutenberg y no hay dónde meterlo—; por eso hay que traducirla
 * aquí abajo.
 */
/*
 * El mismo sumario escrito como párrafo en vez de lista lleva la misma tarjeta.
 * La clase .nota__sumario la pone afce_marcar_sumario() sólo si el párrafo va
 * lo primero y está entero en cursiva.
 */
.nota__texto .entry__content > ul:first-child,
.nota__texto .entry__content > p.nota__sumario{
  position:relative;
  list-style:none;
  margin:0 0 40px;
  padding:44px 32px 30px;
  border-radius:18px;
  background:linear-gradient(135deg,#0B2F63 0%,#0A6E77 100%);
  box-shadow:0 24px 54px rgba(0,32,96,.28);
}
.nota__texto .entry__content > ul:first-child::before,
.nota__texto .entry__content > p.nota__sumario::before{
  content:"DE UN VISTAZO";
  position:absolute;top:-13px;left:30px;
  padding:6px 16px;border-radius:999px;
  background:var(--accent);
  color:#012320;
  font-family:var(--font-body);
  font-size:10.5px;font-weight:800;letter-spacing:.18em;
}
html[lang^="en"] .nota__texto .entry__content > ul:first-child::before,
html[lang^="en"] .nota__texto .entry__content > p.nota__sumario::before{content:"AT A GLANCE";}
.nota__texto .entry__content > ul:first-child li,
.nota__texto .entry__content > p.nota__sumario{
  font-family:var(--font-display);
  font-size:19px;line-height:1.55;font-style:italic;
  color:#EAF4FF;
}
.nota__texto .entry__content > ul:first-child li + li{margin-top:.8em;}

/*
 * EL SUBRAYADOR
 *
 * Lo que la redacción marcó en negrita se subraya con un trazo verde que SE
 * DIBUJA solo, de izquierda a derecha, cuando el párrafo entra en pantalla.
 * Como quien va marcando un papel con un rotulador mientras lo lee.
 *
 * Es un fondo que empieza midiendo cero de ancho y crece hasta el 100 %: por
 * eso puede animarse. Va a media altura de la letra, no detrás del texto
 * entero, para que se lea como una marca hecha a mano y no como un resaltado
 * de buscador.
 *
 * Se salta el primer párrafo: ahí la negrita es la línea de fecha, no un
 * énfasis, y marcarla no significaría nada.
 */
.nota__texto .entry__content > p:not(:first-of-type) strong{
  padding:0 .1em;
  background-image:linear-gradient(rgba(4,169,156,.32),rgba(4,169,156,.32));
  background-repeat:no-repeat;
  background-position:0 82%;
  background-size:0 .58em;
  transition:background-size .8s cubic-bezier(.35,.6,.2,1) .15s;
}
.nota__texto .entry__content > p.es-visible:not(:first-of-type) strong{
  background-size:100% .58em;
}
/* Sin script, el trazo está puesto desde el principio: lo que se pierde es la
   animación, no la marca. */
html:not(.afce-revela) .nota__texto .entry__content > p:not(:first-of-type) strong{
  background-size:100% .58em;
}

/*
 * EL TEXTO ENTRA AL LLEGAR
 *
 * Cada bloque sube un poco al asomar. Muy poco —catorce píxeles— porque esto
 * acompaña la lectura, no la interrumpe: si se nota, molesta.
 *
 * OJO CON ESTE BLOQUE. Aquí se esconde el cuerpo entero de la nota, y lo que lo
 * vuelve a enseñar es un observador de assets/js/afce.js. Una vez se borró ese
 * observador por accidente al recortar el archivo y las notas se quedaron con
 * el texto invisible: el HTML estaba completo, pero no se veía nada.
 *
 * Por eso el gancho es .nota__texto--revela, una clase que pone ESE MISMO
 * observador justo antes de ponerse a mirar, y no .afce-revela, que la pone
 * otro trozo de código por otro motivo. Si el observador desaparece, la clase
 * no llega, esta regla no se aplica y el texto se ve. Que es como tiene que
 * fallar.
 */
.nota__texto--revela .entry__content > *{
  opacity:0;transform:translateY(14px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1);
}
.nota__texto--revela .entry__content > .es-visible{opacity:1;transform:none;}

/*
 * LOS INTERTÍTULOS
 *
 * Con una barra corta en degradado encima. Un h2 a secas en mitad de una nota
 * larga se confunde con un párrafo en negrita; la barra dice «aquí empieza otra
 * cosa» antes de leer la primera palabra.
 */
.nota__texto .entry__content h2,
.nota__texto .entry__content h3{
  position:relative;
  padding-top:20px;
  color:var(--text);
}
.nota__texto .entry__content h2::before,
.nota__texto .entry__content h3::before{
  content:"";
  position:absolute;top:0;left:0;
  width:42px;height:4px;border-radius:3px;
  background:linear-gradient(90deg,#04A99C 0%,#233D82 100%);
}
.nota__texto .entry__content h2{font-size:27px;margin-top:2.2em;}
.nota__texto .entry__content h3{font-size:21px;margin-top:2em;}

/*
 * LAS CITAS
 *
 * Antes eran un renglón con una raya al lado. Ahora es una tarjeta con una
 * comilla enorme detrás, tan grande que se sale por arriba: es la comilla la
 * que hace que se lea como una voz y no como un párrafo con sangría.
 */
.nota__texto .entry__content blockquote{
  position:relative;overflow:hidden;
  margin:2.2em 0;padding:30px 32px 28px 44px;
  border:0;border-radius:18px;
  background:var(--surface-2);
}
.nota__texto .entry__content blockquote::before{
  content:"\201C";
  position:absolute;top:-34px;left:8px;
  font-family:var(--font-display);
  font-size:150px;line-height:1;
  color:var(--accent);
  opacity:.20;
}
.nota__texto .entry__content blockquote p{
  position:relative;
  font-family:var(--font-display);
  font-size:20px;font-style:italic;line-height:1.55;
  color:var(--text);
}
.nota__texto .entry__content blockquote cite{
  display:block;margin-top:14px;
  font-family:var(--font-body);font-style:normal;
  font-size:13.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-ink);
}

/*
 * LAS LISTAS DEL CUERPO
 *
 * Con un punto en el verde de la marca en vez del bolito gris del navegador.
 * Se dibuja con ::before y no con list-style porque el bolito de serie no se
 * puede colorear aparte del texto.
 */
.nota__texto .entry__content ul:not(:first-child){list-style:none;padding-left:0;}
.nota__texto .entry__content ul:not(:first-child) li{position:relative;padding-left:26px;}
.nota__texto .entry__content ul:not(:first-child) li::before{
  content:"";
  position:absolute;left:2px;top:.62em;
  width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,#04A99C,#233D82);
}
.nota__texto .entry__content ol{padding-left:1.3em;}
.nota__texto .entry__content ol li::marker{color:var(--accent-ink);font-weight:700;}

/*
 * LAS FOTOGRAFÍAS DEL CUERPO
 *
 * Se salen del ancho del texto por los dos lados. Es lo que hace que una nota
 * se lea como una pieza editorial y no como un documento: la columna de lectura
 * es estrecha porque leer pide renglones cortos, pero una fotografía no se lee,
 * se mira, y quiere sitio.
 *
 * Sólo en pantallas anchas, y 56 píxeles a cada lado: el hilo del margen está a
 * 74, así que no llegan a tocarse.
 */
/*
 * LAS FOTOGRAFÍAS DEL CUERPO, CENTRADAS Y ENTERAS
 *
 * Dos cosas iban mal. Las imágenes salían pegadas a la izquierda porque el
 * tema pone todas las imágenes en bloque —img{display:block}— y un bloque sin
 * márgenes automáticos se queda en el filo. Y las figuras se sacaban 56 px por
 * cada lado de la columna de lectura, así que en las pantallas justas se salían
 * del cuadro y se veían cortadas por la derecha.
 *
 * Ahora se quedan dentro de la columna y centradas. Se pierde el efecto de
 * sacarlas a los lados, que era bonito cuando cabía y un recorte cuando no.
 */
.nota__texto .entry__content figure{
  margin-top:2.2em;margin-bottom:2.2em;
  /* Por si la figura trae un ancho fijo del editor: que no se pase del hueco. */
  max-width:100%;
  text-align:center;
}
.nota__texto .entry__content img{
  /* auto a los dos lados es lo que centra un bloque. */
  margin-left:auto;margin-right:auto;
  border-radius:14px;
  box-shadow:0 18px 44px rgba(0,32,96,.14);
}
.nota__texto .entry__content figcaption{
  display:inline-block;
  margin-top:12px;padding-left:14px;
  border-left:3px solid var(--accent);
  text-align:left;
  font-size:13.5px;line-height:1.5;
  color:var(--text-muted);
}


/* Los enlaces del cuerpo, con el subrayado que se completa al pasar por
   encima: el mismo gesto que los títulos de «sigue el hilo». */
.nota__texto .entry__content a:not(.reparte__boton){
  color:var(--accent-ink);
  text-decoration:none;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;
  background-size:100% 1px;background-position:0 100%;
  transition:background-size .3s ease;
}
.nota__texto .entry__content a:not(.reparte__boton):hover{background-size:100% 3px;}

/* ---- COMPARTIR ---- */
/*
 * Al final y no flotando encima del texto. Son enlaces normales: sin scripts de
 * terceros, sin píxeles de seguimiento y sin los doscientos kilobytes que pesa
 * el widget oficial de cada red.
 */
.reparte{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:52px;padding-top:26px;
  border-top:1px solid var(--border);
}
.reparte__rotulo{
  font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-muted);
}
.reparte__botones{display:flex;gap:8px;flex-wrap:wrap;}
.reparte__boton{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:40px;height:40px;
  border:1px solid var(--border-strong);border-radius:999px;
  background:none;color:var(--text-soft);
  cursor:pointer;text-decoration:none;
  transition:background-color .22s ease,border-color .22s ease,color .22s ease,transform .22s ease;
}
.reparte__boton svg{width:18px;height:18px;}
.reparte__boton:hover{
  background:var(--accent-ink);border-color:var(--accent-ink);
  color:#fff;transform:translateY(-2px);
}
/* El de copiar lleva texto, así que no es un círculo. */
.reparte__copiar{width:auto;padding:0 18px;}
.reparte__dicho{font-size:13.5px;font-weight:700;}
/* Al copiar, el botón lo dice y se queda verde un segundo: sin eso no hay forma
   de saber si funcionó. */
.reparte__copiar.esta-hecho{
  background:var(--accent);border-color:var(--accent);color:#012320;
}

/* ---- MÁS NOTICIAS ---- */
/*
 * Otras notas de la misma categoría. En línea de tiempo y no en
 * tarjetas: lo que aporta esta sección es el ORDEN —ver que una marca tiene
 * varias notas a lo largo de los años—, y una rejilla de tarjetas iguales es
 * justo lo que lo esconde.
 *
 * Va en oscuro, y no por gusto: cierra la página. La nota entra en oscuro con
 * la fotografía a sangre, se lee en claro y termina otra vez en oscuro, así que
 * el cuerpo del texto queda enmarcado entre dos bandas y se ve dónde empieza y
 * dónde acaba lo que hay que leer.
 */
.serie{
  position:relative;overflow:hidden;
  background:var(--grad-dark);
}
.serie__inner{position:relative;z-index:1;}
.serie .section__head{text-align:center;}
.serie .section__head h2{color:#fff;}

.serie__linea{
  position:relative;
  max-width:820px;margin:0 auto;padding:0;
  list-style:none;
}
/* La línea que las une. Va por detrás de los puntos y se queda dentro del
   primero y del último, no sobresale por arriba ni por abajo. */
.serie__linea::before{
  content:"";
  position:absolute;left:8px;top:26px;bottom:26px;
  width:2px;
  background:linear-gradient(180deg,#8FEFDF 0%,#3E9BD4 100%);
  opacity:.4;
}
.serie__paso{
  position:relative;
  display:grid;grid-template-columns:106px minmax(0,1fr) auto;
  align-items:baseline;gap:0 20px;
  padding:15px 18px 15px 40px;
  border-radius:14px;
  /* Se desplaza un poco a la derecha al señalarlo: el renglón «sale» de la
     línea, como si se adelantara para dejarse leer. */
  transition:background-color .25s ease,transform .25s cubic-bezier(.2,.75,.3,1);
}
.serie__paso:hover{background:rgba(255,255,255,.06);transform:translateX(6px);}
.serie__punto{
  position:absolute;left:0;top:20px;
  width:18px;height:18px;border-radius:50%;
  background:var(--brand-navy);
  border:3px solid #8FEFDF;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.3),background-color .25s ease;
}
.serie__paso:hover .serie__punto{transform:scale(1.3);background:#8FEFDF;}
.serie__fecha{
  font-size:12.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:rgba(207,224,245,.6);
  font-variant-numeric:tabular-nums;
}
.serie__titulo{
  font-family:var(--font-display);
  font-size:18px;font-weight:600;line-height:1.35;
  color:#fff;
  text-decoration:none;
  /* El subrayado se dibuja de izquierda a derecha al pasar por encima: es la
     misma idea del hilo, algo que avanza. */
  background-image:linear-gradient(#8FEFDF,#8FEFDF);
  background-repeat:no-repeat;
  background-size:0% 2px;background-position:0 100%;
  transition:background-size .35s cubic-bezier(.3,.7,.3,1);
}
.serie__paso:hover .serie__titulo{background-size:100% 2px;}
/* La flecha aparece por la izquierda al señalar: dice «esto lleva a algún
   sitio» sin ocupar sitio cuando no hace falta. */
.serie__flecha{
  color:#8FEFDF;font-size:18px;line-height:1;
  opacity:0;transform:translateX(-8px);
  transition:opacity .25s ease,transform .25s cubic-bezier(.2,.8,.3,1);
}
.serie__paso:hover .serie__flecha{opacity:1;transform:none;}

/*
 * LA FOTO QUE SIGUE AL CURSOR
 *
 * Al señalar un renglón, su fotografía aparece flotando y acompaña al cursor.
 * Es lo que le da a una lista de ocho títulos el peso que tendría una rejilla
 * de ocho tarjetas, sin ocupar el sitio de ocho tarjetas.
 *
 * pointer-events:none es imprescindible: sin eso, la foto se mete debajo del
 * cursor, roba el «por encima de» al renglón y el efecto se apaga y se enciende
 * a cada movimiento.
 *
 * La coloca el script con coordenadas dentro de la sección; aquí sólo va cómo
 * se ve y cómo entra.
 */
.serie__vista{
  position:absolute;top:0;left:0;z-index:3;
  width:230px;height:150px;
  object-fit:cover;
  border-radius:14px;
  box-shadow:0 24px 54px rgba(0,10,40,.55);
  pointer-events:none;
  opacity:0;
  /* Sólo se anima la opacidad y la escala: el desplazamiento lo pone el script
     en cada fotograma y una transición ahí lo dejaría arrastrándose detrás del
     cursor. */
  transition:opacity .2s ease,scale .3s cubic-bezier(.2,.9,.3,1.3);
  scale:.9;
}
.serie__vista.se-ve{opacity:1;scale:1;}

.section--ajustada{padding-top:0;}

@media (prefers-reduced-motion: reduce){
  .serie__punto,.serie__titulo,.reparte__boton{transition:none;}
  .serie__paso:hover .serie__titulo{background-size:100% 2px;}
  .reparte__boton:hover{transform:none;}
}
@media (max-width: 900px){
  .nota__abre{padding:104px 0 44px;}
  .nota__titular{max-width:none;}
  /* El hilo del margen desaparece: en una pantalla estrecha no hay margen
     donde ponerlo, y encajarlo dentro de la columna le robaría ancho al texto
     por un adorno. */
  .nota__grid{grid-template-columns:minmax(0,1fr);gap:0;}
  .hilo{display:none;}
  .nota__texto .entry__content > p:first-of-type{font-size:18px;}
}
@media (max-width: 600px){
  .serie__paso{grid-template-columns:minmax(0,1fr);gap:6px;padding-left:34px;}
  .serie__punto{width:15px;height:15px;top:18px;}
  .serie__linea::before{left:6.5px;}
}

/* ============ ENTRADA Y ARCHIVO ============ */
.entry{max-width:760px;margin:0 auto;}
.entry__meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px;}
.entry__meta time{font-size:13.5px;color:var(--text-muted);font-variant-numeric:tabular-nums;}
.entry h1{font-size:40px;margin-bottom:24px;}
.entry__foto{border-radius:var(--radius-lg);overflow:hidden;margin:0 0 36px;}

/*
 * Ritmo del cuerpo del artículo.
 *
 * Las 928 entradas están escritas con bloques de Gutenberg y se midió que
 * ninguna trae marcado de WPBakery: aquí sólo se peina lo que ya existe
 * — párrafos, citas, imágenes y listas — sin imponer un formato nuevo.
 */
.entry__content{font-size:17px;color:var(--text-soft);}
.entry__content > * + *{margin-top:1.4em;}
.entry__content h2{font-size:26px;color:var(--text);margin-top:2em;}
.entry__content h3{font-size:21px;color:var(--text);margin-top:1.8em;}
.entry__content a{color:var(--accent-ink);}
.entry__content img{border-radius:var(--radius);}
.entry__content figcaption{font-size:13.5px;color:var(--text-muted);margin-top:8px;}
.entry__content blockquote{
  margin:1.8em 0;padding:4px 0 4px 24px;
  border-left:4px solid var(--accent);
  font-family:var(--font-display);font-style:italic;font-size:19px;color:var(--text);
}
.entry__content ul,.entry__content ol{padding-left:1.3em;}
.entry__content li + li{margin-top:.5em;}

/* --- Paginación --- */
.pagination{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 12px;
  border:1px solid var(--border-strong);border-radius:8px;
  text-decoration:none;font-size:14.5px;font-weight:700;color:var(--text-soft);
}
.pagination .page-numbers:hover{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-ink);}
.pagination .page-numbers.current{background:var(--accent);border-color:var(--accent);color:#012320;}

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  .team-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 900px){
  .pbanner{padding:72px 0 52px;}
  .pbanner h1{font-size:34px;}
  .about-intro,.contact-grid{grid-template-columns:1fr;gap:40px;}
  .mv-grid,.values-grid{grid-template-columns:1fr 1fr;}
  .entry h1{font-size:30px;}
}
@media (max-width: 600px){
  .mv-grid,.team-grid,.stat-row{grid-template-columns:1fr;}
  /* En una sola columna ya no hay vecinas con las que igualarse, y forzar
   * filas iguales dejaría huecos bajo las descripciones cortas. */
  .values-grid{grid-template-columns:1fr;}
}

/* ============ EJECUTIVOS SOBRE FONDO OSCURO ============
 * La banda pasa a oscura para que la secuencia de Nosotros alterne: banner
 * oscuro, quiénes somos claro, misión/visión oscuro, valores claro,
 * ejecutivos oscuro y alianzas claro.
 */
.team{background:var(--grad-dark);padding:92px 0;position:relative;overflow:hidden;}
/*
 * EL TITULAR DE LOS EJECUTIVOS, EN UNA SOLA LÍNEA.
 *
 * Cabía por los pelos: medido, ocupaba 654px dentro de una cabecera de 660. Seis
 * píxeles de margen es no caber — basta una tipografía que cargue un poco distinta
 * o un ancho algo menor para que se parta en dos.
 *
 * Así que el cuerpo va fluido y con `nowrap`: 28px donde hay sitio, encogiendo
 * hasta 21 según se estrecha la pantalla. Con ese mínimo la frase mide 458px y
 * cabe hasta en la cabecera más estrecha de este tramo.
 */
.team .section__head{position:relative;z-index:1;}
.team .section__head h2{
  font-size:clamp(21px, 2.2vw, 28px);
  white-space:nowrap;
}
/*
 * Por debajo de 680 se libera: ahí el cuerpo que haría falta para una línea
 * bajaría de 21px y dejaría de leerse como titular. `balance` reparte entonces
 * las palabras entre los dos renglones en lugar de dejar uno cojo.
 */
@media (max-width: 680px){
  .team .section__head h2{white-space:normal;text-wrap:balance;font-size:24px;}
}
.team .team-grid{position:relative;z-index:1;}
/* Las fichas se vuelven translúcidas, como las de misión y visión. */
.team .member{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
  box-shadow:0 18px 38px rgba(0,0,0,.26);
}
.team .member__photo{background-color:rgba(255,255,255,.08);}
.team .member__name{color:#fff;}
.team .member__role{color:#8FEFDF;}
.team .member__bio{color:rgba(255,255,255,.8);}
.team .member summary{color:#8FEFDF;}

/*
 * LA TRAYECTORIA DESPLEGADA
 *
 * Antes salía todo pegado: el texto se imprimía en crudo y los saltos de
 * línea de la base de datos no generan párrafos. La plantilla ahora lo pasa
 * por wpautop(), y aquí se le da aire — separación entre párrafos, línea de
 * separación arriba y un tope de altura con desplazamiento propio, porque la
 * de Amelia son catorce párrafos y sin tope estiraba la tarjeta hasta
 * descuadrar la fila entera.
 */
/*
 * Al abrir la trayectoria completa desaparece el resumen corto: repetía en
 * dos frases lo que el desplegable cuenta entero, y la ficha quedaba con el
 * mismo dato dos veces seguidas.
 *
 * Se resuelve con :has(), que permite mirar si la ficha contiene un <details>
 * abierto y actuar sobre un elemento ANTERIOR. Sin él haría falta JavaScript
 * para algo que es puramente visual.
 */
.member:has(details[open]) .member__bio{display:none;}
/*
 * EL RESUMEN, REPETIDO DENTRO DEL DESPLIEGUE.
 *
 * Al abrir, la regla de arriba esconde el resumen de fuera; éste ocupa su lugar
 * dentro del texto largo, así que la biografía se lee entera y de corrido en vez
 * de empezar por la mitad. Nunca se ven los dos a la vez.
 *
 * Va oculto por defecto y sólo aparece si el navegador entiende :has(). Ese es el
 * orden correcto y no el contrario: sin :has() el resumen de fuera NO se oculta,
 * y mostrar éste dejaría el mismo párrafo dos veces en pantalla.
 */
.member__bio-dentro{display:none;}
@supports selector(:has(*)){
  .member__bio-dentro{display:block;}
}
.member__mas{margin-top:16px;}
.member__texto{
  margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.18);
  max-height:320px;overflow-y:auto;
  padding-right:10px;
}
.member__texto p{
  font-size:13.5px;line-height:1.65;
  color:rgba(255,255,255,.78);
  margin:0 0 12px;
}
.member__texto p:last-child{margin-bottom:0;}
/*
 * LA LISTA DE RECONOCIMIENTOS.
 *
 * Va aquí porque el color del texto desplegado se declaraba SÓLO en los párrafos,
 * y al entrar las listas de reconocimientos éstas heredaban el color de texto
 * normal —azul casi negro— sobre un fondo oscuro: se veían en negro sobre negro,
 * o sea, no se veían. El fallo no estaba en la lista, estaba en dar el color a
 * `p` en vez de al contenedor.
 *
 * Se arregla en el contenedor para que cualquier otra etiqueta que llegue mañana
 * —una cita, un enlace suelto— nazca ya legible y no repita el mismo problema.
 *
 * El sangrado baja de los 40px de fábrica a 20: en una columna estrecha, cuarenta
 * píxeles de margen dejan las viñetas colgando lejos del texto.
 */
.member__texto{color:rgba(255,255,255,.78);}
.member__texto ul{
  margin:0 0 14px;
  padding-left:20px;
  list-style:disc;
}
.member__texto li{
  margin-bottom:7px;
  line-height:1.55;
}
/* La viñeta en el turquesa de marca: separa visualmente la lista del párrafo
   corrido sin necesidad de cambiar el color del texto. */
.member__texto li::marker{color:var(--brand-teal);}
.member__texto ul:last-child{margin-bottom:0;}
/* Barra de desplazamiento discreta, para que no parezca un marco de otra época. */
.member__texto::-webkit-scrollbar{width:5px;}
.member__texto::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:3px;}

/* ============ ALIANZAS EN CLARO (sólo en Nosotros) ============
 * En la portada esta banda va oscura y allí se queda. Aquí la precede la de
 * ejecutivos, que también es oscura, y dos seguidas se leen como una sola.
 */
.alianzas-claro .dark-block{background:var(--surface-2);}
.alianzas-claro .alliances h2,
.alianzas-claro .alliances__item h3{color:var(--text);}
.alianzas-claro .alliances__item span,
.alianzas-claro .clients__head .eyebrow{color:var(--text-muted);}
.alianzas-claro .on-dark .eyebrow{
  background:var(--accent-tint);
  border-color:rgba(4,169,156,.32);
  color:var(--accent-ink);
}
/* Sobre fondo claro la sombra se suaviza: el disco de color que asoma por
   detrás ya separa el medallón del fondo, y una sombra fuerte además lo
   ensuciaba. */
.alianzas-claro .alliances__medallion{
  box-shadow:0 12px 26px rgba(14,26,43,.14);
}
.alianzas-claro .alliances__connector{
  background:linear-gradient(90deg,rgba(0,32,96,.05),rgba(0,32,96,.35),rgba(0,32,96,.05));
}
/* Apiladas, el conector es vertical y el degradado tiene que girar con él. Va
   aquí y no en components.css porque este selector es más específico y, si no,
   ganaría el horizontal. */
@media (max-width: 980px){
  .alianzas-claro .alliances__connector{
    background:linear-gradient(180deg,rgba(0,32,96,.05),rgba(0,32,96,.35),rgba(0,32,96,.05));
  }
}
.alianzas-claro .alliances__connector::after{background:var(--brand-navy);color:#fff;}
/* La cinta de marcas: los logos son oscuros y sobre claro se ven bien. */
.alianzas-claro .clients__logo{filter:none;opacity:.85;}

@media (prefers-reduced-motion: reduce){
  .cifra,.value-card__icon,.mv-card__icon{animation:none;}
}

@media (max-width: 900px){
  .pbanner--con-foto .pbanner__inner{grid-template-columns:1fr;gap:36px;}
  /* En una columna el collage se aprieta: menos solape y menos giro. */
  .pbanner__collage--doble{padding:44px 0 0;}
  .pbanner__collage--doble .pbanner__foto--una{width:84%;}
  .pbanner__collage--doble .pbanner__foto--dos{width:58%;}
  .about-intro--solo{grid-template-columns:1fr;}
  .cifras{position:static;flex-direction:row;}
  .cifra{flex:1;}
}
@media (max-width: 600px){
  .cifras{flex-direction:column;}
  .member__texto{max-height:none;}
}

/* ============ DIFUMINADO EN LAS ESQUINAS DE ALIANZAS ============
 * Cuatro manchas de color de marca, muy difusas, una por esquina. Rompen el
 * fondo plano sin competir con los medallones, que son lo que hay que mirar.
 *
 * Van como pseudoelementos del propio bloque —no como divs— porque son pura
 * decoración: así no ensucian el marcado ni las lee un lector de pantalla.
 * pointer-events:none para que no estorben al pinchar.
 */
.alianzas-claro .alliances{position:relative;overflow:hidden;}
.alianzas-claro .alliances::before,
.alianzas-claro .alliances::after{
  content:"";position:absolute;pointer-events:none;
  width:420px;height:420px;border-radius:50%;
  filter:blur(90px);
}
.alianzas-claro .alliances::before{
  top:-170px;left:-150px;
  background:var(--brand-navy);opacity:.30;
}
.alianzas-claro .alliances::after{
  bottom:-180px;right:-150px;
  background:var(--accent-ink);opacity:.28;
}
/* La misma idea en las dos esquinas restantes, con el bloque exterior. */
.alianzas-claro{position:relative;overflow:hidden;}
.alianzas-claro::before,
.alianzas-claro::after{
  content:"";position:absolute;pointer-events:none;z-index:0;
  width:360px;height:360px;border-radius:50%;
  filter:blur(90px);
}
.alianzas-claro::before{
  top:-140px;right:-120px;
  background:var(--accent-ink);opacity:.20;
}
.alianzas-claro::after{
  bottom:-150px;left:-120px;
  background:#0A3D8C;opacity:.24;   /* el azul del centro del degradado */
}
.alianzas-claro .wrap{position:relative;z-index:1;}

/* ============ LO QUE OPINAN (página de Clientes) ============
 * Antes era un titular centrado y un botón sobre fondo liso: mucho aire y
 * nada que mirar. Ahora la mitad derecha adelanta una cita real con su
 * retrato, para que la sección enseñe de qué habla en vez de anunciarlo.
 */
.opinan{background:var(--grad-dark);padding:92px 0;position:relative;overflow:hidden;}
.opinan__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  position:relative;z-index:1;
}
.opinan__texto h2{color:#fff;font-size:32px;margin:20px 0 0;}
.opinan__texto p{color:#CFE0F5;font-size:16px;margin:18px 0 30px;}

.opinan__cita{
  position:relative;margin:0;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.20);
  border-radius:20px;padding:44px 34px 30px;
  backdrop-filter:blur(6px);
}
/* La comilla, grande y muy tenue, asomando por la esquina. */
.opinan__comilla{
  position:absolute;top:-6px;left:22px;
  font-family:var(--font-display);font-size:96px;line-height:1;
  color:#8FEFDF;opacity:.32;pointer-events:none;
}
/*
 * LA CITA
 *
 * Iba en Newsreader cursiva. Una serif fina, en cursiva, a 17 px y en blanco
 * sobre azul oscuro: los remates casi desaparecen y este testimonio en
 * concreto tiene cuatro líneas largas, así que se volvía ilegible.
 *
 * Pasa a Public Sans recta, un punto más grande, con más interlínea y en
 * blanco puro. La cursiva no hacía falta para marcar que es una cita: ya lo
 * dicen la comilla, el marco y el pie con el nombre.
 */
.opinan__cita blockquote{
  margin:0 0 26px;position:relative;
  font-family:var(--font-body);font-style:normal;
  font-size:16.5px;font-weight:400;
  line-height:1.75;letter-spacing:.005em;
  color:#fff;
  /* Antialiasing suave: en texto claro sobre fondo oscuro el trazo engorda y
     se emborrona; esto lo devuelve a su grosor real. */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.opinan__cita figcaption{
  display:flex;align-items:center;gap:14px;
  border-top:1px solid rgba(255,255,255,.18);padding-top:18px;
}
.opinan__cita img,
.opinan__inicial{
  width:54px;height:54px;flex:0 0 54px;
  border-radius:50%;object-fit:cover;
}
.opinan__inicial{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--brand-teal),var(--brand-navy));
  color:#fff;font-weight:700;font-size:18px;
}
.opinan__quien{min-width:0;}
.opinan__quien strong{display:block;font-size:15px;font-weight:700;color:#fff;}
.opinan__quien cite{
  display:block;font-style:normal;font-size:12.5px;
  color:#CFE0F5;margin-top:3px;line-height:1.4;
}

@media (max-width: 900px){
  .opinan__grid{grid-template-columns:1fr;gap:40px;}
  .opinan__texto h2{font-size:27px;}
}


/* ============ SECTORES ============
 * Ocupan toda la mitad derecha del banner: un rótulo arriba a la izquierda y,
 * debajo, los cinco sectores en fila —icono perfilado, número y nombre—,
 * separados entre sí por líneas verticales.
 *
 * Es contenido real, no adorno: saca de la bajada una enumeración que en prosa
 * se leía de corrido y no se retenía.
 */
.pbanner__sectores{
  /* Sube el bloque para que el rótulo quede a la altura del antetítulo de la
     izquierda, no a media altura del titular. */
  margin-top:-10px;
  /* Sangría propia, además del hueco de la rejilla: los aparta un poco más del
     titular sin tener que estrechar todavía más su columna. */
  padding-left:26px;
}

/* El rótulo: alineado a la izquierda del bloque, no centrado. */
.pbanner__sectores-titulo{
  display:block;
  margin:0 0 20px 14px;
  font-family:var(--font-body);
  font-size:11.5px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;
  color:#4FD1C5;
}

.pbanner__sectores ul{
  list-style:none;margin:0;padding:0;
  /* stretch, no flex-start: así todas las fichas miden lo mismo de alto y las
     líneas divisorias salen todas iguales aunque un nombre ocupe tres
     renglones y otro uno. */
  display:flex;align-items:stretch;
}

.pbanner__sectores li{
  flex:1;min-width:0;
  padding:0 12px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:18px;
  /* backwards: el elemento ya está oculto antes de su turno; sin eso se vería
     un instante antes de animarse. */
  animation:sector-entra .6s cubic-bezier(.2,.75,.3,1) backwards;
  animation-delay:calc(var(--i) * .1s);
}
/* Las divisorias van VERTICALES, entre sector y sector. Como border-left del
   segundo en adelante: así nunca sobra una al principio ni al final, se añadan
   o se quiten sectores. */
.pbanner__sectores li + li{border-left:1px solid rgba(143,239,223,.26);}

/* Icono perfilado, sin disco de fondo: sobre el azul oscuro el trazo solo ya
   tiene contraste de sobra y pesa mucho menos que cinco círculos de color. */
.pbanner__sector-icono{
  display:flex;align-items:center;justify-content:center;
  color:#BDF3E8;
  /* Cuanto mayor es el dibujo, más fino tiene que ser el trazo para que no se
     vea tosco. Se afina aquí, no en los cinco SVG. */
  stroke-width:1.15;
  transition:color .25s ease,transform .25s ease;
}
.pbanner__sector-icono svg{width:68px;height:68px;}
.pbanner__sectores li:hover .pbanner__sector-icono{
  transform:translateY(-3px);
  /* El trazo va en degradado, no en currentColor, así que aclararlo se hace
     con un filtro sobre el dibujo entero. */
  filter:brightness(1.25);
}

/*
 * EL DEGRADADO ANIMADO DE LOS ICONOS
 *
 * Las dos paradas del degradado recorren en bucle la gama verde-azul de marca:
 * turquesa claro → turquesa → azul cielo → azul. Cada icono arranca con medio
 * segundo de retraso sobre el anterior, así que la onda de color recorre la
 * fila de izquierda a derecha en vez de latir los cinco a la vez.
 *
 * stop-color es animable por CSS; si un navegador viejo no lo anima, el
 * degradado se queda quieto en los colores del atributo y se ve igual de bien.
 */
.pbanner__sector-icono stop{
  animation:sector-tono-a 7s ease-in-out infinite;
  animation-delay:calc(var(--i) * .5s);
}
.pbanner__sector-icono stop:last-child{animation-name:sector-tono-b;}

@keyframes sector-tono-a{
  0%,100%{stop-color:#8FEFDF;}  /* turquesa claro */
  33%    {stop-color:#4FD1C5;}  /* turquesa de marca */
  66%    {stop-color:#6FD8E8;}  /* azul cielo */
}
@keyframes sector-tono-b{
  0%,100%{stop-color:#3E9BD4;}  /* azul medio */
  33%    {stop-color:#2C7FC4;}  /* azul */
  66%    {stop-color:#7BE3D2;}  /* vuelve al verde: cierra el ciclo */
}

/* El nombre. Sin numeración: son cinco sectores, no una secuencia de pasos;
   los números sugerían un orden que no existe. */
.pbanner__sector-texto{
  font-size:13.5px;font-weight:600;line-height:1.35;
  color:#fff;
}

@keyframes sector-entra{
  from{opacity:0;transform:translateY(16px);}
  to  {opacity:1;transform:translateY(0);}
}
@media (prefers-reduced-motion: reduce){
  .pbanner__sectores li,
  .pbanner__sector-icono stop{animation:none;}
}

@media (max-width: 1100px){
  .pbanner__sector-icono svg{width:54px;height:54px;}
  .pbanner__sector-texto{font-size:12.5px;}
  .pbanner__sectores li{padding:0 10px;}
}
@media (max-width: 900px){
  /* En una columna caben de tres en tres sin apretarse. */
  .pbanner__sectores{margin-top:0;padding-left:0;}
  .pbanner__sectores-titulo{margin-left:0;}
  .pbanner__sectores ul{flex-wrap:wrap;gap:26px 12px;}
  .pbanner__sectores li{flex:0 0 calc(33.333% - 8px);}
  /* Partida en dos filas, la divisoria vertical ya no separa nada: sobra. */
  .pbanner__sectores li + li{border-left:0;}
}

/* ============ LOS VÍDEOS ============
 * Portada con miniatura propia y botón de reproducción. El <iframe> de YouTube
 * no existe hasta que alguien pulsa: ver template-testimonios.php.
 *
 * La banda va en el degradado oscuro de marca: cierra la página en oscuro y,
 * de paso, los fotogramas se recortan mejor contra un fondo oscuro que contra
 * el blanco, donde cada miniatura parecía un rectángulo pegado.
 */
.vids{background:var(--grad-dark);position:relative;overflow:hidden;}
/* auto-fit y no tres columnas fijas: uno de los vídeos subió al banner y aquí
   quedan dos. Con repeat(3,1fr) el hueco vacío quedaba a la derecha. */
.vids__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;
  position:relative;z-index:1;
}

/* Es un <button>, así que hay que desmontarle los estilos de formulario. */
.vid{
  display:flex;flex-direction:column;
  margin:0;padding:0;border:0;background:none;
  font:inherit;color:inherit;text-align:left;
  cursor:pointer;
}
.vid__foto{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:16/9;
  background-size:cover;background-position:center;
  border-radius:16px;
  /* Sombra negra y no azulada: sobre el fondo oscuro, la sombra suave de las
     tarjetas en claro no se veía y las miniaturas quedaban planas. */
  box-shadow:0 18px 44px rgba(0,0,0,.42);
  position:relative;overflow:hidden;
  transition:box-shadow .3s ease,transform .3s ease;
}
/* Velo oscuro para que el botón blanco se lea sobre cualquier fotograma. */
.vid__foto::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,32,96,.10),rgba(0,32,96,.46));
  transition:opacity .3s ease;
}
.vid__play{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  width:66px;height:66px;border-radius:50%;
  background:rgba(255,255,255,.94);
  color:var(--brand-navy);
  box-shadow:0 10px 26px rgba(0,0,0,.30);
  transition:transform .3s cubic-bezier(.2,.75,.3,1),background .3s ease;
}
.vid__play svg{width:32px;height:32px;margin-left:3px;}
.vid:hover .vid__foto,
.vid:focus-visible .vid__foto{
  transform:translateY(-4px);
  box-shadow:0 26px 56px rgba(0,0,0,.52);
}
.vid:hover .vid__foto::before{opacity:.6;}
.vid:hover .vid__play,
.vid:focus-visible .vid__play{transform:scale(1.12);background:#fff;}

/* Sobre el fondo oscuro el texto va en claro: con los colores normales salía
   gris oscuro sobre azul oscuro y no se leía. */
.vid__pie{display:block;padding:16px 4px 0;}
.vid__pie strong{display:block;font-size:15.5px;font-weight:700;color:#fff;}
.vid__pie span{display:block;font-size:13px;color:#CFE0F5;margin-top:4px;line-height:1.4;}

/* El reproductor que sustituye a la portada al pulsar. */
.vid__marco{
  width:100%;aspect-ratio:16/9;border:0;
  border-radius:16px;
  box-shadow:0 18px 44px rgba(0,0,0,.42);
}

@media (prefers-reduced-motion: reduce){
  .vid__foto,.vid__play{transition:none;}
}
@media (max-width: 900px){
  .vids__grid{grid-template-columns:1fr;gap:28px;}
}


/* ============ LA GALERÍA DE VOCES ============
 * Once citas, una a la vista. Funciona sin JavaScript: son once radios ocultos
 * y sus etiquetas —los rostros—; el CSS enseña la ficha del que esté marcado.
 * Eso da gratis el manejo con teclado (flechas, como cualquier grupo de
 * opciones) y que las once citas estén siempre en el HTML para Google.
 */
.galeria__caja{position:relative;}

/*
 * Los radios: 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 entonces se
 * perdería el manejo con teclado.
 */
.galeria__radio{
  position:absolute;width:1px;height:1px;
  margin:0;padding:0;border:0;
  clip-path:inset(50%);
  pointer-events:none;
}

/*
 * EL PANEL
 *
 * Las once fichas ocupan la MISMA celda de la rejilla, superpuestas. Así el
 * panel mide siempre lo que la cita más larga y no da un salto al cambiar de
 * voz, que es lo que pasaría si cada una empujara a su altura.
 */
.galeria__panel{display:grid;}
.gvoz{
  grid-area:1 / 1;
  margin:0;
  display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;
  padding:52px 54px;
  background:var(--grad-dark);
  border-radius:24px;
  box-shadow:0 26px 60px rgba(14,26,43,.24);
  /* Oculta y sin poder recibir el foco mientras no le toque. */
  opacity:0;visibility:hidden;
  /*
   * Sólo se funde: ni sube ni se mueve. Antes entraba con un translateY de
   * diez píxeles y, al pulsar un rostro, la ficha entera —con la foto grande
   * dentro— daba un saltito hacia arriba en cada cambio. En una galería en la
   * que se pulsa once veces seguidas, ese gesto cansa y despista.
   */
  transition:opacity .45s ease,visibility .45s;
}
.galeria__radio:nth-of-type(1):checked ~ .galeria__panel .gvoz:nth-child(1),
.galeria__radio:nth-of-type(2):checked ~ .galeria__panel .gvoz:nth-child(2),
.galeria__radio:nth-of-type(3):checked ~ .galeria__panel .gvoz:nth-child(3),
.galeria__radio:nth-of-type(4):checked ~ .galeria__panel .gvoz:nth-child(4),
.galeria__radio:nth-of-type(5):checked ~ .galeria__panel .gvoz:nth-child(5),
.galeria__radio:nth-of-type(6):checked ~ .galeria__panel .gvoz:nth-child(6),
.galeria__radio:nth-of-type(7):checked ~ .galeria__panel .gvoz:nth-child(7),
.galeria__radio:nth-of-type(8):checked ~ .galeria__panel .gvoz:nth-child(8),
.galeria__radio:nth-of-type(9):checked ~ .galeria__panel .gvoz:nth-child(9),
.galeria__radio:nth-of-type(10):checked ~ .galeria__panel .gvoz:nth-child(10),
.galeria__radio:nth-of-type(11):checked ~ .galeria__panel .gvoz:nth-child(11),
.galeria__radio:nth-of-type(12):checked ~ .galeria__panel .gvoz:nth-child(12),
.galeria__radio:nth-of-type(13):checked ~ .galeria__panel .gvoz:nth-child(13),
.galeria__radio:nth-of-type(14):checked ~ .galeria__panel .gvoz:nth-child(14){
  opacity:1;visibility:visible;
}

.gvoz__foto{
  width:200px;height:200px;flex:0 0 200px;
  border-radius:50%;object-fit:cover;
  border:5px solid rgba(255,255,255,.16);
  box-shadow:0 16px 36px rgba(0,0,0,.36);
}
.gvoz__texto{position:relative;min-width:0;}
.gvoz__comilla{
  position:absolute;top:-46px;left:-14px;
  font-family:var(--font-display);font-size:104px;line-height:1;
  color:#8FEFDF;opacity:.26;pointer-events:none;
}
.gvoz blockquote{
  margin:0 0 24px;position:relative;
  font-family:var(--font-body);font-size:18px;font-weight:400;
  line-height:1.72;color:#fff;max-width:60ch;
  /* En claro sobre oscuro el trazo engorda; esto lo devuelve a su grosor. */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.gvoz figcaption{
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.20);
}
.gvoz figcaption strong{display:block;font-size:16.5px;font-weight:700;color:#fff;}
.gvoz figcaption cite{
  display:block;font-style:normal;font-size:13px;
  color:#8FEFDF;margin-top:4px;line-height:1.45;
}

/*
 * LA FILA DE ROSTROS
 *
 * Verlos a todos juntos —directores, presidentes, gerentes— dice más que las
 * once citas apiladas. En gris y pequeños los que no están elegidos; el
 * elegido, a color, más grande y con aro de marca.
 */
.galeria__caras{
  list-style:none;margin:34px 0 0;padding:6px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
}
.galeria__caras label{
  display:block;cursor:pointer;
  border-radius:50%;
  transition:transform .3s cubic-bezier(.2,.75,.3,1),box-shadow .3s ease;
}
.galeria__caras img{
  display:block;width:62px;height:62px;
  border-radius:50%;object-fit:cover;
  filter:grayscale(1);opacity:.55;
  transition:filter .3s ease,opacity .3s ease;
}
.galeria__caras label:hover img{filter:grayscale(.2);opacity:.85;}
.galeria__radio:nth-of-type(1):checked ~ .galeria__caras li:nth-child(1) label,
.galeria__radio:nth-of-type(2):checked ~ .galeria__caras li:nth-child(2) label,
.galeria__radio:nth-of-type(3):checked ~ .galeria__caras li:nth-child(3) label,
.galeria__radio:nth-of-type(4):checked ~ .galeria__caras li:nth-child(4) label,
.galeria__radio:nth-of-type(5):checked ~ .galeria__caras li:nth-child(5) label,
.galeria__radio:nth-of-type(6):checked ~ .galeria__caras li:nth-child(6) label,
.galeria__radio:nth-of-type(7):checked ~ .galeria__caras li:nth-child(7) label,
.galeria__radio:nth-of-type(8):checked ~ .galeria__caras li:nth-child(8) label,
.galeria__radio:nth-of-type(9):checked ~ .galeria__caras li:nth-child(9) label,
.galeria__radio:nth-of-type(10):checked ~ .galeria__caras li:nth-child(10) label,
.galeria__radio:nth-of-type(11):checked ~ .galeria__caras li:nth-child(11) label,
.galeria__radio:nth-of-type(12):checked ~ .galeria__caras li:nth-child(12) label,
.galeria__radio:nth-of-type(13):checked ~ .galeria__caras li:nth-child(13) label,
.galeria__radio:nth-of-type(14):checked ~ .galeria__caras li:nth-child(14) label{
  transform:scale(1.16);
  box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--brand-teal),0 10px 22px rgba(14,26,43,.24);
}
.galeria__radio:nth-of-type(1):checked ~ .galeria__caras li:nth-child(1) label img,
.galeria__radio:nth-of-type(2):checked ~ .galeria__caras li:nth-child(2) label img,
.galeria__radio:nth-of-type(3):checked ~ .galeria__caras li:nth-child(3) label img,
.galeria__radio:nth-of-type(4):checked ~ .galeria__caras li:nth-child(4) label img,
.galeria__radio:nth-of-type(5):checked ~ .galeria__caras li:nth-child(5) label img,
.galeria__radio:nth-of-type(6):checked ~ .galeria__caras li:nth-child(6) label img,
.galeria__radio:nth-of-type(7):checked ~ .galeria__caras li:nth-child(7) label img,
.galeria__radio:nth-of-type(8):checked ~ .galeria__caras li:nth-child(8) label img,
.galeria__radio:nth-of-type(9):checked ~ .galeria__caras li:nth-child(9) label img,
.galeria__radio:nth-of-type(10):checked ~ .galeria__caras li:nth-child(10) label img,
.galeria__radio:nth-of-type(11):checked ~ .galeria__caras li:nth-child(11) label img,
.galeria__radio:nth-of-type(12):checked ~ .galeria__caras li:nth-child(12) label img,
.galeria__radio:nth-of-type(13):checked ~ .galeria__caras li:nth-child(13) label img,
.galeria__radio:nth-of-type(14):checked ~ .galeria__caras li:nth-child(14) label img{
  filter:none;opacity:1;
}
/* El foco del teclado, visible: sin esto no se sabría en qué rostro se está. */
.galeria__radio:nth-of-type(1):focus-visible ~ .galeria__caras li:nth-child(1) label,
.galeria__radio:nth-of-type(2):focus-visible ~ .galeria__caras li:nth-child(2) label,
.galeria__radio:nth-of-type(3):focus-visible ~ .galeria__caras li:nth-child(3) label,
.galeria__radio:nth-of-type(4):focus-visible ~ .galeria__caras li:nth-child(4) label,
.galeria__radio:nth-of-type(5):focus-visible ~ .galeria__caras li:nth-child(5) label,
.galeria__radio:nth-of-type(6):focus-visible ~ .galeria__caras li:nth-child(6) label,
.galeria__radio:nth-of-type(7):focus-visible ~ .galeria__caras li:nth-child(7) label,
.galeria__radio:nth-of-type(8):focus-visible ~ .galeria__caras li:nth-child(8) label,
.galeria__radio:nth-of-type(9):focus-visible ~ .galeria__caras li:nth-child(9) label,
.galeria__radio:nth-of-type(10):focus-visible ~ .galeria__caras li:nth-child(10) label,
.galeria__radio:nth-of-type(11):focus-visible ~ .galeria__caras li:nth-child(11) label,
.galeria__radio:nth-of-type(12):focus-visible ~ .galeria__caras li:nth-child(12) label,
.galeria__radio:nth-of-type(13):focus-visible ~ .galeria__caras li:nth-child(13) label,
.galeria__radio:nth-of-type(14):focus-visible ~ .galeria__caras li:nth-child(14) label{
  outline:3px solid var(--brand-navy);
  outline-offset:4px;
}

@media (prefers-reduced-motion: reduce){
  .gvoz,.galeria__caras label,.galeria__caras img{transition:none;}
}
@media (max-width: 860px){
  .gvoz{grid-template-columns:1fr;gap:26px;padding:44px 28px;justify-items:center;text-align:center;}
  .gvoz__foto{width:150px;height:150px;flex-basis:150px;}
  .gvoz__comilla{position:static;display:block;font-size:70px;margin-bottom:-24px;}
  .gvoz blockquote{font-size:16.5px;}
  .galeria__caras img{width:52px;height:52px;}
}

/* ============ SALA DE PRENSA: TARJETAS QUE SE VOLTEAN ============
 * De frente, la fotografía y el titular; al pasar por encima, la tarjeta gira
 * sobre su eje y por detrás aparecen el principio del texto y un botón.
 *
 * Así la cuadrícula se ojea entera y, sin salir de ella ni cargar nada, se
 * sabe de qué va cualquiera de las diez notas. Antes había que entrar para
 * averiguarlo.
 */
.fichas__barra{display:flex;margin-bottom:32px;}
.fichas__buscar{max-width:340px;flex:1 1 240px;}

.fichas__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}

/*
 * LA TARJETA
 *
 * perspective en la tarjeta y no en la cuadrícula: puesto en la cuadrícula, el
 * punto de fuga sería el centro de la página y las tarjetas de los lados
 * girarían torcidas, como si las mirara alguien de pie en el medio. En cada
 * tarjeta, cada una gira mirando de frente a quien la señala.
 */
.ficha{
  position:relative;
  aspect-ratio:4/3.4;
  perspective:1400px;
}

.ficha__giro{
  position:relative;width:100%;height:100%;
  /* preserve-3d es lo que hace que las dos caras vivan en el espacio y no
     aplastadas contra el plano de la pantalla. Sin esto no hay volteo. */
  transform-style:preserve-3d;
  transition:transform .65s cubic-bezier(.35,.05,.25,1);
}
.ficha:hover .ficha__giro,
.ficha:focus-within .ficha__giro{transform:rotateY(180deg);}

.ficha__cara{
  position:absolute;inset:0;
  border-radius:18px;overflow:hidden;
  /* La cara que mira al otro lado no se pinta: sin esto se vería el reverso
     del papel a través de la tarjeta, con el texto al revés. */
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  box-shadow:0 14px 32px rgba(14,26,43,.16);
}

/* ---- LA CARA ---- */
.ficha__frente{background:var(--grad-dark);}
/*
 * Ahora es un <img> de verdad y no un fondo CSS —para que se pueda diferir y
 * tenga srcset—, así que el recorte lo mandan object-fit y object-position en
 * lugar de background-size y background-position.
 *
 * El encuadre va sesgado hacia ARRIBA, no centrado. En una foto de grupo o en
 * un retrato de cuerpo entero, el centro geométrico cae a la altura del pecho:
 * centrado, la tarjeta cortaba las cabezas.
 */
.ficha__foto{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center 28%;
}
.ficha__velo{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(0,32,96,.04) 0%,
    rgba(0,32,96,.40) 50%,
    rgba(0,32,96,.90) 100%);
}
.ficha__texto{
  position:absolute;left:0;right:0;bottom:0;
  padding:22px;
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;
}
.ficha__cat{
  padding:5px 11px;border-radius:99px;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.24);
  font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:#fff;
}
.ficha__frente h2{
  margin:0;
  font-family:var(--font-display);
  font-size:18px;font-weight:600;line-height:1.28;
  color:#fff;
  text-wrap:balance;
  /* Tres renglones como mucho: hay titulares de setenta palabras que taparían
     la fotografía entera. */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
}
.ficha__frente time{
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

/* ---- EL REVERSO ---- */
.ficha__dorso{
  /* Ya girado media vuelta: cuando la tarjeta gire 180°, quedará de frente. */
  transform:rotateY(180deg);
  background:var(--surface);
  border:1px solid var(--border);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:18px;padding:30px 26px;
}
/* Una barra de color de marca en el canto izquierdo: sin ella el reverso es un
   rectángulo blanco y el volteo no se lee como un giro, sino como un corte. */
.ficha__dorso::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--brand-teal),var(--brand-navy));
}
.ficha__comilla{
  font-family:var(--font-display);
  font-size:60px;line-height:.6;
  color:var(--accent);opacity:.28;
}
.ficha__dorso p{
  margin:0;
  font-size:14.5px;line-height:1.65;color:var(--text-soft);
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;
  overflow:hidden;
}

.ficha__boton{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px;border-radius:99px;
  background:var(--accent-ink);color:#fff;
  font-size:13.5px;font-weight:700;
  text-decoration:none;
  transition:background-color .25s ease,gap .25s ease;
}
.ficha__boton svg{width:16px;height:16px;}
.ficha__boton:hover{background:var(--brand-teal);gap:14px;}
/* El foco tiene que verse: es el único enlace de la tarjeta. */
.ficha__boton:focus-visible{outline:3px solid var(--brand-teal);outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  /*
   * Sin volteo. En vez de dejar el reverso inaccesible, la tarjeta se queda de
   * frente y el reverso aparece por encima con un fundido: la misma
   * información, sin movimiento.
   */
  .ficha__giro{transition:none;}
  .ficha:hover .ficha__giro,
  .ficha:focus-within .ficha__giro{transform:none;}
  .ficha__dorso{
    transform:none;
    -webkit-backface-visibility:visible;backface-visibility:visible;
    opacity:0;transition:opacity .25s ease;
  }
  .ficha:hover .ficha__dorso,
  .ficha:focus-within .ficha__dorso{opacity:1;}
}

@media (max-width: 1000px){
  .fichas__grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 640px){
  /*
   * En pantalla táctil no hay ratón con el que señalar, así que el volteo
   * dejaría el botón fuera de alcance. Aquí la tarjeta no gira: se ve la
   * fotografía arriba y el texto con su botón debajo, siempre.
   */
  .fichas__grid{grid-template-columns:1fr;gap:26px;}
  .ficha{aspect-ratio:auto;perspective:none;}
  .ficha__giro{transform:none !important;transform-style:flat;}
  .ficha__cara{position:static;-webkit-backface-visibility:visible;backface-visibility:visible;}
  .ficha__frente{height:230px;position:relative;border-radius:18px 18px 0 0;}
  .ficha__dorso{
    transform:none;border-radius:0 0 18px 18px;border-top:0;
    box-shadow:0 14px 32px rgba(14,26,43,.16);
  }
  .ficha__dorso::before{width:100%;height:4px;bottom:auto;}
  .ficha__comilla{display:none;}
}

/* ============ EL EMBLEMA (banner de Testimonios) ============
 * Un micrófono sobre un disco en degradado de marca, con tres ondas saliendo
 * de él: alguien hablando y su voz propagándose. Una comilla, que es lo que
 * había antes, no decía nada que el titular no dijera ya.
 *
 * Todo en HTML y CSS, sin imagen: pesa cero, se ve nítido en cualquier pantalla
 * y cambia de color solo si mañana cambian los colores de marca.
 */
.pbanner--con-emblema .pbanner__inner{
  grid-template-columns:1.15fr .85fr;
  gap:48px;
  align-items:center;
}
/*
 * Las nueve píldoras necesitan más sitio que un emblema: con .85fr los nombres
 * largos —«Comunicación Interna y Gestión de Cambio»— se partían en tres
 * renglones y la columna se volvía una torre.
 */
.pbanner--con-constelacion .pbanner__inner{
  grid-template-columns:1fr 1fr;
  gap:44px;
  align-items:center;
}

.pbanner__emblema{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  /* Alto fijo: las ondas están posicionadas y no empujan la caja, así que sin
     esto el bloque mediría lo que mide el disco y las ondas se saldrían. */
  min-height:320px;
}

/* ---- EL DISCO ---- */
.emblema__disco{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:196px;height:196px;
  border-radius:50%;
  box-shadow:0 26px 60px rgba(0,0,0,.42);
  /* Flota despacio. Es un movimiento de seis segundos y cuatro píxeles: se
     nota que está vivo sin que llame la atención por encima del titular. */
  animation:emblema-flota 6s ease-in-out infinite;
}
.emblema__disco svg{
  position:absolute;inset:0;
  width:100%;height:100%;
}
/*
 * EL MICRÓFONO
 *
 * Centrado de verdad —es un dibujo, no una letra— y a algo menos de la mitad
 * del disco: un icono que llega al borde parece un botón, y separado del filo
 * parece un emblema.
 */
.emblema__icono{
  position:relative;z-index:1;
  width:74px;height:74px;
  filter:drop-shadow(0 4px 14px rgba(0,32,96,.32));
}

/* ---- LAS ONDAS ---- */
.emblema__onda{
  position:absolute;
  width:196px;height:196px;
  border-radius:50%;
  border:2px solid rgba(143,239,223,.55);
  /* Salen del disco y se desvanecen al crecer. Las tres comparten animación y
     se separan con el retardo, que se calcula del índice: así el ciclo sigue
     cuadrando si mañana son cuatro. */
  animation:emblema-onda 4.5s ease-out infinite;
  animation-delay:calc(var(--i) * 1.5s);
  pointer-events:none;
}

@keyframes emblema-flota{
  0%,100%{transform:translateY(0);}
  50%    {transform:translateY(-9px);}
}
@keyframes emblema-onda{
  0%  {transform:scale(1);   opacity:.65;}
  80% {transform:scale(2.1); opacity:0;}
  100%{transform:scale(2.1); opacity:0;}
}

@media (prefers-reduced-motion: reduce){
  .emblema__disco{animation:none;}
  /* Las ondas quietas quedarían como tres círculos sueltos: mejor una sola,
     fija, que insinúa el mismo halo sin moverse. */
  .emblema__onda{animation:none;opacity:.28;}
  .emblema__onda:nth-child(2),
  .emblema__onda:nth-child(3){display:none;}
}
@media (max-width: 900px){
  .pbanner--con-emblema .pbanner__inner,
  .pbanner--con-constelacion .pbanner__inner{grid-template-columns:1fr;gap:32px;}
  .pbanner__emblema{min-height:230px;}
  .emblema__disco,.emblema__onda{width:150px;height:150px;}
  .emblema__icono{width:58px;height:58px;}
}

/* ============ RECURSOS: LIBROS QUE SE ABREN ============
 * La portada está sujeta por el canto izquierdo y se abre hacia fuera, como la
 * tapa de un libro. Debajo aparece la página, que no se mueve: lo único que
 * gira es la tapa.
 *
 * Es distinto del volteo de la Sala de Prensa a propósito. Allí la tarjeta
 * entera da media vuelta sobre su centro, como quien voltea un naipe; aquí sólo
 * gira la tapa, sobre su lomo, y se ve su reverso por dentro. El gesto es el de
 * abrir un libro, que es lo que son estos seis.
 */
.libros__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}

.ebook{
  position:relative;
  /* La proporción de las portadas normalizadas: 760×900. */
  aspect-ratio:760/900;
  /* Poca perspectiva y punto de fuga a la izquierda, sobre el lomo: es desde
     donde se mira un libro que se abre. Con el fuga centrado, la tapa se abría
     como si el libro estuviera girado. */
  perspective:1500px;
  perspective-origin:left center;
}

/* ---- LA PÁGINA ---- */
.ebook__pagina{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:13px;padding:32px 28px 32px 34px;
  border-radius:14px;
  background:var(--grad-dark);
  box-shadow:0 14px 32px rgba(14,26,43,.16);
  overflow:hidden;
}
/* La sombra que proyecta la tapa sobre la página, junto al lomo. Es lo que
   hace que la página se vea DEBAJO y no al lado. */
.ebook__pagina::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:52px;
  background:linear-gradient(90deg,rgba(0,0,0,.42),transparent);
  pointer-events:none;
}

.ebook__pagina h2::before{
  /* Un filete turquesa donde antes iba el número: sin él, el título arranca
     pegado al borde de arriba y la página se queda sin cabecera. */
  content:'';display:block;
  width:34px;height:3px;border-radius:99px;
  background:var(--brand-teal);
  margin-bottom:14px;
}
.ebook__pagina h2{
  margin:0;
  font-family:var(--font-display);
  font-size:20px;font-weight:600;line-height:1.22;
  color:#fff;text-wrap:balance;
}
.ebook__pagina p{
  margin:0;
  font-size:13.5px;line-height:1.6;
  color:#CFE0F5;
  /* En claro sobre oscuro el trazo engorda; esto lo devuelve a su grosor. */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* Seis renglones como mucho: hay descripciones largas que empujarían el
     botón fuera del libro. */
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;
  overflow:hidden;
}
.ebook__boton{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:5px;padding:11px 20px;border-radius:99px;
  background:#fff;color:var(--brand-navy);
  font-size:13px;font-weight:700;text-decoration:none;
  transition:background-color .25s ease,color .25s ease,gap .25s ease;
}
.ebook__boton svg{width:16px;height:16px;}
.ebook__boton:hover{background:var(--brand-teal);color:#fff;gap:14px;}
/* El foco tiene que verse: es el único enlace del libro. */
.ebook__boton:focus-visible{outline:3px solid var(--brand-teal);outline-offset:3px;}

/* ---- LA TAPA ---- */
.ebook__tapa{
  position:absolute;inset:0;
  /* Gira sobre el canto izquierdo, que es el lomo. */
  transform-origin:left center;
  transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.35,.05,.2,1);
  /* Por encima de la página mientras está cerrada. */
  z-index:2;
}
.ebook:hover .ebook__tapa,
.ebook:focus-within .ebook__tapa{
  /* Pasa de los noventa grados para que se vea el reverso y quede claro que se
     ha abierto, sin llegar a taparle el sitio al libro de al lado. */
  transform:rotateY(-118deg);
}

/* Las dos caras de la tapa. */
.ebook__fuera,
.ebook__dentro{
  position:absolute;inset:0;
  border-radius:14px;
  overflow:hidden;
  /* Cada cara se pinta sólo cuando mira a quien la ve. Sin esto, la portada se
     vería en espejo al abrirse. */
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
}
.ebook__fuera{
  background:var(--surface);
  box-shadow:0 14px 32px rgba(14,26,43,.20);
}
/*
 * contain y centrada, no recortada. Las seis portadas están normalizadas a
 * 760×900, pero el lienzo de la tapa no siempre da esa proporción exacta: con
 * cover, el recorte se comía el borde superior de unas y el inferior de otras.
 * Así se ve la portada entera y centrada en las seis.
 */
.ebook__fuera img{
  width:100%;height:100%;
  object-fit:contain;object-position:center;
}
/* El papel de dentro de la tapa: hueso, no blanco puro. */
.ebook__dentro{
  transform:rotateY(180deg);
  background:linear-gradient(90deg,#DDE3E9,#F1F4F6 22%,#F7F9FA);
}

/* La sombra del lomo, pegada al canto por el que gira. */
.ebook__lomo{
  position:absolute;left:0;top:0;bottom:0;width:22px;
  background:linear-gradient(90deg,rgba(0,0,0,.30),rgba(0,0,0,.06) 55%,transparent);
  pointer-events:none;
}

/*
 * LA PISTA
 *
 * Un libro abierto, abajo a la derecha. Sin ella nadie descubre que la tapa se
 * abre: seis portadas quietas no piden que las toques. Se va en cuanto empieza
 * el gesto, para no viajar dando vueltas con la tapa.
 */
.ebook__pista{
  position:absolute;right:13px;bottom:13px;
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.94);
  color:var(--brand-navy);
  box-shadow:0 6px 16px rgba(0,32,96,.26);
  transition:opacity .3s ease,transform .4s cubic-bezier(.2,.75,.3,1);
}
.ebook__pista svg{width:20px;height:20px;}
.ebook:hover .ebook__pista,
.ebook:focus-within .ebook__pista{opacity:0;transform:translateX(-8px);}

@media (prefers-reduced-motion: reduce){
  /*
   * Sin giro. La tapa se aparta con un fundido en vez de abrirse: la misma
   * información, sin movimiento.
   */
  .ebook__tapa,.ebook__pista{transition:opacity .25s ease;}
  .ebook:hover .ebook__tapa,
  .ebook:focus-within .ebook__tapa{transform:none;opacity:0;}
}

@media (max-width: 900px){
  .libros__grid{grid-template-columns:repeat(2,1fr);gap:20px;}
  .ebook__pagina{padding:26px 22px 26px 28px;}
  .ebook__pagina h2{font-size:18px;}
  .ebook__pagina p{font-size:13px;-webkit-line-clamp:5;}
}
@media (max-width: 560px){
  /*
   * En pantalla táctil no hay ratón con el que señalar, así que la tapa nunca
   * se abriría y el botón quedaría fuera de alcance. Aquí no hay tapa que
   * girar: portada arriba y página debajo, siempre a la vista.
   */
  .libros__grid{grid-template-columns:1fr;gap:24px;}
  .ebook{aspect-ratio:auto;perspective:none;display:flex;flex-direction:column;}
  .ebook__tapa{position:static;transform:none !important;transform-style:flat;order:-1;}
  .ebook__fuera,.ebook__dentro{position:static;-webkit-backface-visibility:visible;backface-visibility:visible;}
  .ebook__dentro{display:none;}
  .ebook__fuera{border-radius:14px 14px 0 0;}
  .ebook__lomo,.ebook__pista{display:none;}
  .ebook__pagina{position:static;border-radius:0 0 14px 14px;padding:26px 22px;}
  .ebook__pagina::before{display:none;}
}

/* ============ CLIENTES: UN CARRIL POR SECTOR ============
 * Seis carriles, uno por sector. A la izquierda, una placa del color del sector
 * con su icono, su nombre y cuántas marcas tiene; a la derecha, sus logotipos en
 * una cinta QUIETA que avanza sólo cuando se pulsan sus flechas.
 *
 * Antes la cinta desfilaba sola y mareaba. Con el paso a mano se mira lo que se
 * quiere mirar, y cada pulsación trae un juego de marcas nuevo: el mismo
 * atractivo de ver aparecer marcas, pero mandando el visitante.
 */
/*
 * EL FONDO DE LOS SECTORES (página de Clientes)
 *
 * La sección era blanca y quedaba muerta debajo del banner oscuro: seis carriles
 * de logotipos, todos grises, sobre nada.
 *
 * Ahora lleva tres capas, todas muy flojas:
 *
 *   1. Un tinte azul muy rebajado, que separa la sección de lo que tiene encima
 *      y debajo sin necesidad de una línea que corte.
 *   2. Y dos manchas de color, verde y azul, que se cruzan y se mueven muy
 *      despacio. No se ve moverse; lo que se nota al volver a mirar es que el
 *      fondo no está donde estaba.
 *
 * Hubo aquí también una retícula de líneas finas y se quitó: con seis carriles
 * que ya son rejilla —placa, cinta y logotipos alineados—, la retícula detrás
 * era una segunda rejilla peleándose con la primera.
 */
.carriles{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  /*
   * Sólo el tinte y las manchas de color. La cuadrícula que había aquí se quitó:
   * con seis carriles que ya son rejilla —placa, cinta y logotipos alineados—,
   * una retícula detrás era una segunda rejilla peleándose con la primera.
   */
  background-color:#F4F7FB;
}
.carriles::before{
  content:"";
  position:absolute;inset:-20%;z-index:-1;
  background:
    radial-gradient(40% 44% at 14% 18%, rgba(4,169,156,.20) 0%, transparent 70%),
    radial-gradient(44% 48% at 86% 82%, rgba(35,61,130,.16) 0%, transparent 70%);
  animation:carriles-fondo 44s ease-in-out infinite;
}
@keyframes carriles-fondo{
  0%,100%{transform:translate(0,0) scale(1);}
  50%    {transform:translate(-3%,2%) scale(1.08);}
}
.carriles > .wrap{position:relative;z-index:1;}

/*
 * Y cada carril deja de ser transparente: con la cuadrícula debajo, las líneas
 * se verían cruzando por detrás de los logotipos.
 */
.carril{
  background:var(--surface);
  border-radius:18px;
  box-shadow:0 18px 44px rgba(0,32,96,.08);
}

.carril{
  position:relative;
  /*
   * Dos filas explícitas: arriba la cinta, abajo las flechas. Tienen que estar
   * declaradas para que la placa pueda abarcarlas; con filas implícitas,
   * grid-row: 1 / -1 no abarca nada porque no hay una última línea explícita a
   * la que referirse.
   */
  display:grid;grid-template-columns:262px 1fr;grid-template-rows:1fr auto;
  align-items:stretch;
  border-radius:18px;overflow:hidden;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:0 8px 22px rgba(14,26,43,.06);
}
.carril + .carril{margin-top:16px;}

/* ---- LA PLACA ---- */
/* La placa ocupa las dos filas de la rejilla: la de la cinta y la de las
   flechas. Si sólo ocupara la primera, la franja de color acabaría a media
   altura del cuadro y se vería un escalón. */
/*
 * EL ICONO ARRIBA Y EL NOMBRE DEBAJO
 *
 * En fila, el nombre largo —«Sin fines de lucro y gremios»— se partía en tres
 * renglones dentro de una columna estrecha y la placa quedaba desequilibrada.
 * En columna, el icono manda arriba y el nombre dispone del ancho entero.
 */
.carril__placa{
  grid-row:1 / span 2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:26px 20px;
  text-align:center;
  background:var(--c);
  color:#fff;
  position:relative;z-index:2;
}
/*
 * EL ICONO Y EL NOMBRE, MÁS GRANDES
 *
 * La placa llevaba debajo del nombre la cuenta de marcas —«26 marcas», «14
 * marcas»—, un dato que no le dice nada a quien mira y que además obligaba a
 * dejar el nombre pequeño para que cupieran los dos. Fuera la cuenta, el sector
 * se lee de lejos: eso es lo que hay que reconocer de un vistazo.
 */
.carril__icono{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:17px;
  background:rgba(255,255,255,.20);
}
.carril__icono svg{width:32px;height:32px;}
.carril__texto{display:flex;flex-direction:column;align-items:center;min-width:0;}
.carril__nombre{
  font-family:var(--font-display);
  font-size:23px;font-weight:600;line-height:1.15;
}

/* ---- LA CINTA ---- */
/*
 * Por debajo es un contenedor con desplazamiento horizontal normal y corriente.
 * Eso da gratis tres cosas que un carrusel hecho a mano no tiene: se arrastra
 * con el dedo en el móvil, se recorre con la rueda del ratón y funciona aunque
 * el JavaScript falle.
 *
 * scroll-snap hace que siempre pare con un logotipo entero a la vista, nunca a
 * medias.
 */
.carril__cinta{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  /* La barra de desplazamiento sobra: para eso están las flechas, y en un
     carril de 120 px de alto ocupa una décima parte. */
  scrollbar-width:none;
  -ms-overflow-style:none;
  /* El borde derecho se desvanece: es lo que dice que la cinta sigue. */
  -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);
          mask-image:linear-gradient(90deg,#000 92%,transparent);
}
.carril__cinta::-webkit-scrollbar{display:none;}
/* Se puede recorrer con el teclado, así que el foco tiene que verse. */
.carril__cinta:focus-visible{outline:3px solid var(--c);outline-offset:-3px;}

.carril__pista{
  display:flex;align-items:center;gap:12px;
  width:max-content;padding:16px 12px 8px;
}

.carril__marca{
  position:relative;isolation:isolate;
  flex:0 0 auto;
  width:216px;height:124px;
  scroll-snap-align:start;
  border:1px solid var(--border);
  border-radius:14px;
  background-color:#fff;
  /*
   * 85 % de 216 = 184 px de lienzo: el mismo tamaño al que se ven en la cinta de
   * la portada. Con el 74 % de antes salían a 160, más pequeños que allí.
   *
   * El tamaño de cada marca DENTRO del lienzo no lo decide esta regla: lo iguala
   * tools/normalizar-logos.php, que deja todos los dibujos con la misma superficie.
   * Aquí sólo se decide a qué escala se pinta el lienzo entero.
   */
  background-size:85% auto;background-repeat:no-repeat;background-position:center;
  transition:transform .25s cubic-bezier(.2,.75,.3,1),
             box-shadow .25s ease,
             border-color .25s ease;
}
/* El tinte del sector por detrás del logotipo. Se queda en un 12 %: es un
   tinte, no un relleno, y el logotipo se sigue leyendo. */
.carril__marca::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--c);
  opacity:0;transition:opacity .25s ease;
}
.carril__marca:hover{
  transform:translateY(-4px) scale(1.03);
  box-shadow:0 14px 28px rgba(0,32,96,.20);
  border-color:var(--c);
  z-index:2;
}
.carril__marca:hover::before{opacity:.12;}

/* ---- LAS FLECHAS ---- */
/*
 * Pequeñas, sin borde ni fondo, pegadas a la esquina inferior derecha del
 * carril. Es el sitio donde uno espera encontrar el «siguiente» de una fila que
 * se desplaza, y así no le quitan sitio ni atención a los logotipos, que es de
 * lo que va la página.
 *
 * Se probaron antes con recuadro sobre la esquina de la cinta, dentro de la
 * placa del sector, sobre los dos filos y centradas debajo. Con borde y fondo
 * pesaban tanto como una marca; sin nada, son sólo dos flechas.
 *
 * Las crea afce.js y no la plantilla: sin JavaScript no harían nada, y un botón
 * que no hace nada es peor que no tenerlo. La cinta se puede arrastrar igual.
 */
/* Segunda fila de la rejilla, columna de la cinta y pegadas a la derecha: es
   decir, dentro del cuadro blanco y en su esquina inferior derecha. */
.cinta-mandos{
  grid-column:2;
  display:flex;justify-content:flex-end;gap:2px;
  padding:0 12px 10px;
}
.cinta-boton{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;
  padding:0;
  border:0;background:none;
  border-radius:50%;
  color:var(--c);
  cursor:pointer;
  transition:color .2s ease,transform .2s ease,opacity .2s ease;
}
.cinta-boton svg{width:20px;height:20px;}
.cinta-boton:hover:not(:disabled){transform:scale(1.22);}
.cinta-boton:focus-visible{outline:2px solid var(--c);outline-offset:1px;}
/* Apagada en el extremo: sin esto, la de la izquierda está encendida desde el
   principio invitando a pulsar algo que no hace nada. */
.cinta-boton:disabled{opacity:.22;cursor:default;}

@media (prefers-reduced-motion: reduce){
  /* Las manchas del fondo se quedan donde están: el color sigue, el paseo no. */
  .carriles::before{animation:none;}
  .carril__cinta{scroll-behavior:auto;}
  .carril__marca,.carril__marca::before,.cinta-boton{transition:none;}
  .carril__marca:hover{transform:none;}
}
@media (max-width: 860px){
  /* En vertical no hay ancho para la placa al lado: se pone encima, en una
     banda, y la cinta debajo. */
  /* En una columna, la placa vuelve a ocupar sólo su fila. */
  .carril{grid-template-columns:1fr;grid-template-rows:auto auto auto;}
  .carril__placa{grid-row:auto;flex-direction:row;align-items:center;text-align:left;padding:16px 18px;gap:14px;}
  .carril__texto{align-items:flex-start;}
  .carril__icono{width:48px;height:48px;border-radius:14px;}
  .carril__icono svg{width:25px;height:25px;}
  .carril__nombre{font-size:19px;}
  .carril__marca{width:168px;height:98px;}
  .cinta-mandos{grid-column:1;padding:0 12px 10px;}
}

/* ============ LA DESCARGA DE UN EBOOK ============
 *
 * A la izquierda la portada plana sobre una banda de color; a la derecha el
 * formulario, con los campos subrayados y sin caja.
 *
 * Por aquí han pasado un libro en pie con lomo y páginas en perspectiva, una
 * versión en oscuro y una ficha con marco de degradado. Esta se queda con lo que
 * la agencia aprobó —el fondo claro— y cambia las dos piezas: la portada se ve de
 * frente, que es como se ve una portada, y el formulario deja de ser una caja
 * dentro de otra.
 */
.descarga{
  position:relative;
  overflow:hidden;
  padding-top:64px;
  background:var(--surface-2,#F4F7FB);
}

/*
 * LA BANDA
 *
 * Una franja diagonal en el degradado de marca que cruza el fondo por detrás de
 * la portada. Hace de tablero: sobre ella la portada se recorta sin sombras y sin
 * oscurecer la página entera.
 *
 * Va recortada en diagonal, no girada: girar un bloque de este tamaño obliga a
 * agrandarlo para que no deje esquinas vacías, y el recorte no.
 */
.descarga__banda{
  position:absolute;
  top:0;bottom:0;left:0;
  width:min(46%,620px);
  background:linear-gradient(155deg,#04A99C 0%,#0E6E9B 55%,#233D82 100%);
  clip-path:polygon(0 0, 100% 0, 74% 100%, 0 100%);
  opacity:.13;
  pointer-events:none;
}

.descarga__inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:58px;
  align-items:center;
}

/* ---- LA PORTADA ---- */
/*
 * Plana y de frente. Lo que le da vida es que sigue al ratón: se inclina hacia
 * donde está el cursor, como una lámina que se mira desde distintos ángulos. El
 * giro lo calcula el script a partir de la posición del ratón y lo deja en dos
 * variables; aquí sólo se usan.
 */
.descarga__lamina{
  position:relative;
  perspective:900px;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s cubic-bezier(.25,.8,.3,1);
  will-change:transform;
}
/* Mientras el ratón está encima, el giro sigue al cursor sin retardo. */
.descarga__lamina.esta-tocada{transition:transform .08s linear;}

.lamina__portada{
  position:relative;
  display:block;
  width:100%;height:auto;
  border-radius:10px;
  box-shadow:0 26px 60px rgba(0,32,96,.26);
}

/*
 * LOS CANTOS
 *
 * Tres papeles asomando por debajo, cada uno un poco más girado y más pálido.
 * Bastan para que la portada se lea como un documento con páginas y no como una
 * imagen suelta.
 */
.lamina__canto{
  position:absolute;
  inset:0;
  border-radius:10px;
  background:#fff;
  box-shadow:0 10px 26px rgba(0,32,96,.10);
}
.lamina__canto--1{transform:translate(6px,7px) rotate(1.4deg);}
.lamina__canto--2{transform:translate(12px,14px) rotate(2.8deg);opacity:.75;}
.lamina__canto--3{transform:translate(18px,21px) rotate(4.2deg);opacity:.5;}

/* El brillo que cruza el papel. Se mueve con la inclinación, no solo. */
.lamina__brillo{
  position:absolute;inset:0;
  border-radius:10px;
  background:linear-gradient(
              calc(100deg + var(--ry,0deg) * 2),
              transparent 36%,
              rgba(255,255,255,.34) 48%,
              rgba(255,255,255,.06) 57%,
              transparent 68%);
  pointer-events:none;
}

/*
 * EL SELLO
 *
 * Dice qué se descarga —un PDF, no un curso ni un boletín—, que es la duda
 * razonable de quien va a dar su correo. Sobresale por la esquina y va en su
 * propio plano para que la inclinación no lo aplaste contra la portada.
 */
.lamina__sello{
  position:absolute;
  left:-14px;bottom:18px;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;
  transform:translateZ(30px);
  border-radius:999px;
  background:#fff;
  color:var(--accent-ink);
  font-size:12px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 10px 26px rgba(0,32,96,.18);
}
.lamina__sello svg{width:15px;height:15px;}

/* ---- EL CUERPO ---- */
.descarga__atras{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:600;
  color:var(--accent-ink);
  text-decoration:none;
  transition:gap .2s ease;
}
.descarga__atras:hover{gap:14px;text-decoration:underline;text-underline-offset:4px;}

.descarga__titulo{
  margin:16px 0 0;
  font-size:clamp(26px,2.7vw,36px);
  line-height:1.12;
  color:var(--brand-navy,#002060);
  text-wrap:balance;
}
.descarga__texto{
  margin:16px 0 0;
  max-width:58ch;
  font-size:16.5px;
  line-height:1.62;
  color:var(--text-muted);
}

/* ---- EL FORMULARIO, SIN CAJA ---- */
/*
 * Los campos van subrayados y sobre el propio fondo de la página, no dentro de
 * una ficha: en esta pantalla el formulario ya está en su mitad y meterlo además
 * en una caja era una caja dentro de otra.
 *
 * La línea de abajo es lo único que marca dónde se escribe, y se enciende del
 * color de marca al entrar en el campo.
 */
.descarga__form{margin-top:30px;}

.descarga__campos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px 24px;
}
.descarga__campo{
  margin:0;
  display:flex;flex-direction:column;gap:4px;
  position:relative;
}
.descarga__campo--ancho{grid-column:1 / -1;}
.descarga__campo label{
  font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);
  transition:color .2s ease;
}
.descarga__campo:focus-within label{color:var(--accent-ink);}
.descarga__campo input{
  width:100%;
  padding:6px 0 9px;
  border:0;
  border-bottom:2px solid var(--border-strong);
  background:transparent;
  font-family:var(--font-body);
  font-size:16.5px;
  color:var(--text);
  transition:border-color .24s ease;
}
.descarga__campo input:focus{outline:none;border-bottom-color:var(--accent-ink);}
/*
 * Y una segunda línea que crece desde la izquierda al entrar en el campo. La de
 * abajo cambia de color; esta se dibuja, y es lo que hace que el salto de un
 * campo a otro se vea como un movimiento y no como un parpadeo.
 */
.descarga__campo::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:2px;
  background:var(--accent,#04A99C);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.descarga__campo:focus-within::after{transform:scaleX(1);}

.descarga__form .btn{
  margin-top:30px;
  padding:16px 38px;
}

.descarga__error{
  font-size:12.5px;
  color:#B3261E;   /* rojo de aviso: no es de marca a propósito, avisa */
}
.descarga__error--general{
  margin:0 0 18px;
  padding:12px 14px;
  border-radius:9px;
  background:rgba(179,38,30,.08);
}

/* El campo trampa: fuera de la pantalla, no con display:none —hay programas que
   se saltan lo que está en display:none precisamente porque saben que lo es—. */
.descarga__trampa{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}

/* ---- ENVIADO ---- */
.descarga__listo{
  margin-top:30px;
  padding:30px 26px;
  border-radius:18px;
  background:#fff;
  border:1px solid color-mix(in srgb, var(--accent-ink) 22%, transparent);
  box-shadow:0 26px 60px rgba(0,32,96,.14);
}
.descarga__marca{
  display:grid;place-items:center;
  width:48px;height:48px;
  border-radius:50%;
  background:var(--accent,#04A99C);
  color:#012320;
  /* Da un golpe al aparecer: es la señal de que ya está. */
  animation:marca-entra .5s cubic-bezier(.2,1.4,.4,1) both;
}
.descarga__marca svg{width:24px;height:24px;}
@keyframes marca-entra{
  from{scale:0;rotate:-25deg;}
  to  {scale:1;rotate:0deg;}
}
.descarga__gracias{
  margin:16px 0 20px;
  font-family:var(--font-display);
  font-size:21px;
  color:var(--brand-navy,#002060);
}
.descarga__aviso{margin:0;font-size:15px;color:var(--text-muted);}

/*
 * ENVIADO: LA PORTADA SE ADELANTA
 *
 * Se pone recta y crece un punto, como cuando se coge algo de la mesa. Es la
 * recompensa del formulario, y pasa justo cuando el PDF queda a un clic.
 */
.descarga--listo .descarga__lamina{
  transform:rotateX(0deg) rotateY(0deg) scale(1.04);
}

@media (prefers-reduced-motion: reduce){
  .descarga__lamina,.descarga__campo input,.descarga__campo::after,
  .descarga__atras{transition:none;}
  .descarga__marca{animation:none;}
  .descarga__atras:hover{gap:9px;}
}
@media (max-width: 860px){
  /* En vertical la portada va arriba y más pequeña: lo que importa es el
     formulario. */
  .descarga__inner{grid-template-columns:1fr;gap:36px;}
  .descarga__lamina{max-width:250px;}
  .descarga__campos{grid-template-columns:1fr;}
  .descarga__banda{width:100%;clip-path:polygon(0 0, 100% 0, 100% 46%, 0 62%);}
  .lamina__sello{left:-10px;bottom:12px;}
}


/* ============ AFINADO PARA TELÉFONO ============
 *
 * Lo que sale de medir el sitio a 375 px y arreglar lo que no funciona con un
 * dedo y a un palmo de los ojos. No cambia el diseño: cambia lo que en una
 * pantalla pequeña deja de servir.
 *
 * Dos cosas se repiten en todo el sitio y aquí se corrigen de una vez:
 *
 *   · RÓTULOS DE DIEZ PÍXELES. Los eyebrow, las fechas, las etiquetas de los
 *     formularios y los rotulitos de las fichas están pensados para verse en una
 *     pantalla grande, donde diez píxeles se leen. En un teléfono no.
 *
 *   · ÁREAS DE TOQUE DE DIECISÉIS PÍXELES. El selector de idioma medía 17×15 y
 *     los enlaces del pie, dieciséis de alto. Un dedo necesita cuarenta y cuatro
 *     —es la medida que dan tanto Apple como Google—, y el que no llega no se
 *     pulsa: se pulsa al lado.
 */
@media (max-width: 700px){

  /* ---- QUE SE LEA ---- */

  /*
   * El eyebrow, y también los de Eventos y Gestión de medios, que llevan uno
   * más pequeño por su cuenta: sin nombrarlos, su regla gana por ser más
   * concreta y se quedaban en once y medio.
   */
  .eyebrow,
  .events .eyebrow,
  .medios .eyebrow{font-size:12.5px;}
  .press-tag,
  .ficha__cat{font-size:11.5px;}
  .ficha__fecha,
  .press-card time,
  time{font-size:12px;}
  .fichadatos__que,
  .canal__que{font-size:11.5px;}

  /* Las etiquetas del formulario: son la única pista de qué va en cada casilla. */
  /* Las etiquetas del formulario, en los dos sitios donde hay uno: el de
     contacto (.folio) y el que se despliega en la portada (.hoja). */
  .folio .gform_wrapper .gfield_label,
  .hoja .gform_wrapper .gfield_label,
  .descarga__campo label{font-size:12px;}

  /* ---- QUE SE PUEDA PULSAR ---- */

  /*
   * El selector de idioma. Se le da área con padding y un margen negativo que
   * la recupera: así el ES/EN ocupa lo mismo a la vista pero cuarenta y cuatro
   * píxeles al tacto.
   */
  .lang-switch a{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:44px;min-height:44px;
    margin:-14px -8px;
  }

  /* Los enlaces del pie y los de «leer más», con alto de dedo. */
  .footer-menu a,
  .footer-nav a,
  .site-footer a:not(.btn):not(.footer-social a){
    display:inline-block;
    padding:9px 0;
  }
  .press-link,
  .ficha__enlace{
    display:inline-flex;align-items:center;
    min-height:44px;
  }

  /*
   * El titular de cada ficha de prensa también es un enlace, y de una sola línea:
   * dieciséis píxeles de alto. Se le da bloque y alto de dedo — es además el
   * enlace que más se pulsa de esa sección.
   */
  .press-card__body h3 a,
  .ficha__titulo a{
    display:block;
    padding:6px 0;
    min-height:44px;
  }

  /* Las redes del pie, cuadradas y con tamaño de dedo. */
  .footer-social a{min-width:42px;min-height:42px;}

  /*
   * Las flechas que mueven la cinta de logos de Clientes miden treinta píxeles:
   * son dos círculos pequeños y muy juntos, y con el dedo se falla más de lo que
   * se acierta. Se les da tamaño de toque sin agrandar el círculo dibujado.
   */
  .cinta-boton{min-width:44px;min-height:44px;}

  /* Y el «Todos los ebooks» de la pantalla de descarga, que es un renglón fino. */
  .descarga__atras{min-height:44px;}
}

/*
 * Y en cualquier pantalla sin ratón, aunque sea ancha —una tableta—, las áreas
 * de toque mandan igual: el dedo mide lo mismo en las dos.
 */
@media (hover: none){
  .lang-switch a{min-width:44px;min-height:44px;}
}

/* ============ OPINIONES DE GOOGLE ============
 *
 * Catorce frases que la gente escribió por su cuenta en un sitio que la agencia
 * no controla. En tarjetas iguales parecen un catálogo; en globos de diálogo son
 * lo que son: gente hablando.
 *
 * Van escalonados a izquierda y derecha, como una conversación que se lee de
 * arriba abajo. Al señalar uno, el globo se levanta y el disco de quien lo dijo
 * gira sobre sí mismo.
 *
 * LA SECCIÓN VA EN CLARO. La página alterna banner oscuro, galería clara, vídeos
 * oscuro… y esto venía detrás también en oscuro: dos seguidas se leen como una
 * sola sección larguísima.
 *
 * Aquí han caído antes un muro de tarjetas oscuras, un mural de notas torcidas y
 * un panel de fichas que se volvían solas.
 */
.resenas{
  position:relative;
  overflow:hidden;
  padding:96px 0;
  background:var(--surface-2,#F4F7FB);
}

/*
 * Dos halos de color muy difuminados en las esquinas, el mismo recurso que usan
 * las bandas oscuras del sitio. Sobre un gris plano las tarjetas de color
 * flotaban en el vacío; con esto el fondo tiene aire y el color de las tarjetas
 * encuentra eco alrededor.
 */
.resenas::before,
.resenas::after{
  content:"";
  position:absolute;
  width:520px;height:520px;border-radius:50%;
  filter:blur(120px);
  pointer-events:none;
}
.resenas::before{top:-220px;left:-160px;background:rgba(4,169,156,.24);}
.resenas::after{bottom:-260px;right:-180px;background:rgba(35,61,130,.20);}
.resenas > .wrap{position:relative;z-index:1;}

/*
 * LA CABECERA, EN DOS COLUMNAS
 *
 * Antes iba todo centrado y en pila: rótulo, titular, un párrafo y el sello
 * debajo. Cuatro cosas apiladas, y la nota —que es el dato— la última de todas.
 *
 * Ahora el titular manda a la izquierda y el sello va a su lado, a la derecha,
 * con el mismo peso. Se leen a la vez en vez de uno detrás de otro, y de paso la
 * cabecera ocupa la mitad de alto.
 */
/*
 * EN COLUMNA: el rótulo, y el sello justo debajo.
 *
 * Estuvieron uno al lado del otro, cada uno en su punta de la línea. Se leían
 * como dos cosas que no tenían que ver: el nombre de Google en un extremo y la
 * nota en el otro. Puestos uno debajo de otro se leen como lo que son — el
 * rótulo y su dato.
 */
.resenas__cabeza{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:22px;
  margin:0 0 54px;
  /* Una línea fina debajo, que es lo que separa la cabecera del carrusel sin
     ponerle un cajón alrededor. */
  padding-bottom:30px;
  border-bottom:1px solid var(--border);
}
/*
 * EL RÓTULO
 *
 * Deja de ser la píldora que usa el resto del sitio —fondo, borde y esquinas
 * redondas— y se compone como una firma: versalitas muy espaciadas y una raya
 * corta del degradado de marca encima.
 *
 * La raya va con ::before y no con border-top porque un borde ocuparía todo el
 * ancho del rótulo; lo que se quiere es un trazo corto y grueso, del largo que se
 * le diga.
 */
.resenas__rotulo{
  margin:0;
  padding-top:26px;
  position:relative;
  font-family:var(--font-body);
  /*
   * AL TAMAÑO DE UN TITULAR, porque es el titular: al quitar el que había, este
   * rótulo se quedó como único texto de la sección y en catorce píxeles parecía
   * un pie de página. Sube a veintiocho.
   *
   * El espaciado baja de .24 a .14 al subir el cuerpo: el espacio entre letras se
   * nota más cuanto más grandes son, y lo que a catorce píxeles era elegante a
   * veintiocho se convierte en un cartel de aeropuerto.
   */
  font-size:clamp(21px,2.4vw,28px);
  font-weight:800;
  letter-spacing:.14em;
  line-height:1.15;
  text-transform:uppercase;
  color:var(--brand-navy,#002060);
}
.resenas__rotulo::before{
  content:"";
  position:absolute;top:0;left:0;
  width:72px;height:5px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand-teal),var(--brand-navy));
}

/* ---- EL SELLO DE GOOGLE ---- */
.sello-g{
  display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;
  gap:16px;
  margin-top:28px;
  padding:14px 24px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 14px 34px rgba(0,32,96,.10);
}
.sello-g__nota{
  font-family:var(--font-display);
  font-size:30px;font-weight:700;line-height:1;
  color:var(--brand-navy,#002060);
}

/*
 * LAS ESTRELLAS DEL SELLO
 *
 * Cinco de fondo apagadas y las mismas cinco en dorado por encima, recortadas al
 * porcentaje de la nota. Un 4,9 se ve entonces como cuatro estrellas y nueve
 * décimas de la quinta, que es la verdad; redondear a cinco sería decir que la
 * nota es perfecta cuando no lo es.
 */
.sello-g__estrellas{
  position:relative;
  display:inline-block;
  font-size:21px;
  line-height:1;
  letter-spacing:2px;
  white-space:nowrap;
}
.sello-g__fondo{color:rgba(0,32,96,.18);}
.sello-g__lleno{
  position:absolute;top:0;left:0;
  width:var(--pct,100%);
  overflow:hidden;
  color:#F5A623;
}
.sello-g__enlace{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--accent-ink);
  font-size:14px;font-weight:600;
  text-decoration:none;
  transition:gap .2s ease;
}
.sello-g__enlace:hover{gap:14px;text-decoration:underline;text-underline-offset:4px;}

/* ---- EL RUEDO ---- */

/*
 * SIN JAVASCRIPT el cilindro se despliega: el anillo es un enrejado y se ven las
 * catorce tarjetas, sin giro y sin mandos.
 */
.ruedo__anillo{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
  align-items:start;
}
.tablero__mandos{display:none;}

/*
 * CON JAVASCRIPT la escena se convierte en una caja con profundidad y el anillo,
 * en la pared del cilindro. Las clases .esta-vivo y el giro los pone el script.
 *
 * La perspectiva es generosa —1600 px— a propósito: más corta, las tarjetas de
 * los lados se deforman como en un ojo de pez y el escorzo pasa de elegante a
 * mareante.
 */
.ruedo.esta-vivo .ruedo__escena{
  position:relative;
  height:400px;
  perspective:1600px;
  /*
   * El cilindro es más ancho que la caja de texto y las tarjetas de los lados se
   * salen. No se recortan aquí —recortar dentro de una escena en tres dimensiones
   * la aplana— sino en la sección, que ya lleva overflow:hidden. Así el ruedo
   * sangra por los bordes, que además es como debe verse.
   */
}
.ruedo.esta-vivo .ruedo__anillo{
  display:block;
  position:absolute;inset:0;
  transform-style:preserve-3d;
  /*
   * El anillo se echa hacia atrás justo el radio, de modo que la tarjeta que está
   * al frente acaba en el plano de la pantalla, ni delante ni detrás. Sin este
   * retroceso, la de delante se saldría hacia el visitante y las demás quedarían
   * hundidas.
   */
  transform:translateZ(var(--radio-atras)) rotateY(var(--giro,0deg));
}

/*
 * LA TRANSICIÓN LLEGA UN INSTANTE DESPUÉS
 *
 * La clase se llama .con-giro y no .gira porque .gira YA EXISTE en el tema: es el
 * titular con la palabra que cambia, y lleva display:inline-grid. Puesta encima
 * del ruedo, le quitaba el ancho entero y todo el cilindro se colapsaba a cero.
 *
 * Va en su propia clase, que el script añade pasado un tris. Si estuviera en la
 * regla de arriba, al encenderse el ruedo el navegador vería un cambio de
 * «sin transformación» a «cilindro montado» y lo animaría: el visitante se
 * encontraría las catorce tarjetas apiladas y planas, desplegándose en abanico
 * durante un segundo, cada vez que carga la página.
 *
 * Así el cilindro nace ya montado y la transición sólo gobierna los giros.
 */
.ruedo.esta-vivo.con-giro .ruedo__anillo{
  transition:transform .95s cubic-bezier(.34,.68,.28,1);
}

/*
 * EL RADIO
 *
 * La mitad del ancho de la tarjeta entre la tangente de medio paso: el radio del
 * polígono de catorce lados en el que las tarjetas se tocan justo por el canto.
 * --factor y --paso los calcula el PHP con el número de opiniones que haya; el
 * ancho lo pone aquí el CSS, porque cambia entre el escritorio y el móvil.
 */
.ruedo{
  --ancho:340px;
  --radio:calc(var(--ancho) / (2 * var(--factor)));
  /*
   * El mismo radio con el signo cambiado, y calculado aparte en vez de escribir
   * calc(var(--radio) * -1). Metiendo una variable que YA es una división dentro
   * de otro cálculo, el navegador se queda con la operación sin resolver y la
   * declaración entera se cae: el anillo se quedaba sin retroceder y todo el
   * cilindro salía magnificado, con la tarjeta de delante al doble de tamaño.
   */
  --radio-atras:calc(var(--ancho) / (-2 * var(--factor)));
}

.ruedo.esta-vivo .op-card{
  position:absolute;
  top:0;left:50%;
  width:var(--ancho);
  height:100%;
  margin-left:calc(var(--ancho) / -2);
  /* Cada tarjeta gira su puesto y se empuja hacia fuera el radio. Eso, y nada
     más, es lo que la coloca en su sitio de la pared del cilindro. */
  transform:rotateY(calc(var(--i) * var(--paso))) translateZ(var(--radio));
  transition:opacity .6s ease;
}

/*
 * LA JERARQUÍA
 *
 * La de delante, entera. Las dos vecinas, atenuadas: se ven, se intuye lo que
 * dicen y marcan que hay más, pero no compiten con la que toca leer. Las demás,
 * casi apagadas — están de canto o de espaldas y sólo aportan la sensación de
 * que el ruedo sigue.
 *
 * Las clases las pone el script en cada giro.
 */
.ruedo.esta-vivo .op-card{opacity:.16;pointer-events:none;}
.ruedo.esta-vivo .op-card.es-lado{opacity:.55;}
.ruedo.esta-vivo .op-card.es-frente{opacity:1;pointer-events:auto;}

/*
 * Y la de delante lleva una sombra más honda que las demás. Es lo que la despega
 * del cilindro y la pone por delante en la lectura, más aún que la opacidad.
 */
.ruedo.esta-vivo .op-card.es-frente{
  box-shadow:0 28px 60px color-mix(in srgb, var(--tono,#0A7F76) 45%, transparent);
}

/* ---- LA TARJETA ---- */
/*
 * DE BLANCA A BLOQUE DE COLOR
 *
 * La primera versión eran tarjetas blancas con un filo de color de cinco píxeles.
 * Funcionaba, pero sobre un fondo pálido todo quedaba pálido: tres rectángulos
 * claros sobre gris claro. El color estaba, pero en una raya.
 *
 * Ahora la tarjeta ENTERA es el color, y el texto va en blanco encima. Con eso el
 * volteo pasa de ser un detalle a ser el efecto: lo que cambia no es un
 * párrafo, son tres bloques de color que se dan la vuelta uno detrás de otro.
 */
.op-card{
  position:relative;
  display:flex;flex-direction:column;
  padding:28px 26px 26px;
  border-radius:22px;
  /*
   * El degradado sólo OSCURECE: va del tono a una versión suya más apagada, sin
   * pasar por ningún punto más claro. La primera versión arrancaba aclarando el
   * tono con blanco y en esa esquina el nombre —blanco, doce píxeles y medio—
   * bajaba a 4,0 de contraste. Empezando en el propio tono, lo peor que puede
   * pasar son 4,87, que ya está por encima del mínimo.
   */
  background:linear-gradient(150deg,
              var(--tono,#0A7F76) 0%,
              color-mix(in srgb, var(--tono,#0A7F76) 55%, #000814) 100%);
  color:#fff;
  overflow:hidden;
  /* La sombra lleva el tono de la tarjeta, no un gris neutro: así el color
     también se derrama por debajo y la tarjeta se despega del fondo. */
  box-shadow:0 18px 40px color-mix(in srgb, var(--tono,#0A7F76) 34%, transparent);
}

/*
 * EL BRILLO DEL FILO
 *
 * Una línea clarísima siguiendo el borde de arriba, como la luz que coge el canto
 * de una pieza al girar. Es lo que evita que un rectángulo de color plano parezca
 * un recorte de cartulina.
 */
.op-card::before{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,0) 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}

/* La comilla de cierre, enorme y desbordada por abajo: marca de agua en blanco
   apagado, no adorno que compita con lo que hay que leer. */
.op-card::after{
  content:"”";
  position:absolute;right:8px;bottom:-70px;
  font-family:var(--font-display);
  font-size:180px;line-height:1;font-weight:700;
  color:rgba(255,255,255,.14);
  pointer-events:none;
}

/*
 * EL DESTELLO
 *
 * Una banda de luz en diagonal que cruza la tarjeta en el momento exacto en que
 * termina de voltearse. Dura tres cuartos de segundo y no se repite: es el
 * remate del giro, como el brillo que coge una lámina metálica al quedar de
 * frente. La clase la pone y la quita el script, sincronizada con la voltereta.
 *
 * Está quieta y transparente mientras no le toque; sin la clase no se ve nada.
 */
.op-card__destello{
  position:absolute;inset:0;
  z-index:2;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(105deg,
              transparent 38%,
              rgba(255,255,255,.40) 50%,
              transparent 62%);
}
.op-card.brilla .op-card__destello{
  animation:op-destello .75s ease-out;
}
@keyframes op-destello{
  0%   {opacity:0;transform:translateX(-55%);}
  30%  {opacity:1;}
  100% {opacity:0;transform:translateX(55%);}
}

.op-card__quien{
  display:flex;align-items:center;gap:12px;
  margin-bottom:18px;
  position:relative;z-index:1;
}

/*
 * El disco con la inicial hace de retrato. Google da la foto de cada persona,
 * pero esas fotos son suyas y están en sus servidores: no se copian a este sitio.
 *
 * Sobre la tarjeta de color va al revés que antes: aro claro y fondo apenas
 * teñido, en vez de disco de color. Un disco del mismo tono sobre el mismo tono
 * no se vería.
 */
.op-card__disco{
  flex:0 0 auto;
  display:grid;place-items:center;
  width:46px;height:46px;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  border:1.5px solid rgba(255,255,255,.55);
  color:#fff;
  font-family:var(--font-display);
  font-size:19px;font-weight:700;
}
.op-card__datos{
  display:flex;flex-direction:column;gap:5px;
  min-width:0;
}
.op-card__nombre{
  font-size:12.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:#fff;   /* blanco entero: a 12,5 px no sobra ni una décima de contraste */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.op-card__estrellas{
  font-size:13px;letter-spacing:2px;line-height:1;
  color:rgba(255,255,255,.28);
}
.op-card__estrellas .esta-llena{color:#FFC53D;}

/*
 * EL TEXTO, CENTRADO EN LO QUE SOBRA
 *
 * flex:1 le da toda la altura libre de la tarjeta y align-items:center pone la
 * frase en su medio. Es lo que evita que una opinión de cuatro palabras quede
 * colgando de arriba con media tarjeta vacía debajo.
 */
/*
 * LA LETRA DE LAS OPINIONES
 *
 * Iban en la tipografía del cuerpo del sitio, la misma con la que están escritos
 * los párrafos de al lado. Y no son párrafos: son CITAS, palabras textuales de
 * alguien con nombre y apellido.
 *
 * Van todas en la tipografía de titulares —una romana— y en cursiva, que es como
 * se compone una cita desde que hay imprenta. El ojo lo reconoce sin que nadie se
 * lo explique: eso no lo escribió la agencia.
 *
 * Y el interlineado se abre a 1,5: una romana en cursiva y apretada se lee peor
 * que una palo seco, y aquí hay sitio de sobra.
 */
/*
 * Y VA CENTRADA CON margin:auto, NO CON display:flex.
 *
 * Antes la cita era un contenedor flexible para poder centrarla de arriba abajo.
 * Eso rompe el texto: dentro hay una etiqueta <mark> con la palabra resaltada, y
 * en un contenedor flexible cada trozo suelto de texto se convierte en un
 * elemento independiente. La frase se partía en tres columnas —lo de antes del
 * resalte, el resalte y lo de después— y se veía descuadrada contra un lado.
 *
 * Con margin:auto se centra igual y el texto sigue siendo texto.
 */
.op-card blockquote{
  /*
   * CENTRADA, PERO UN PELO POR ENCIMA DEL CENTRO.
   *
   * Centrada del todo, la cita quedaba flotando en mitad de la tarjeta. Arrimada
   * del todo a la cabecera, se iba demasiado arriba y dejaba un hueco enorme
   * debajo. El punto está en medio: se centra y luego se sube catorce píxeles.
   *
   * Se sube con translate y no con margen porque translate NO ocupa sitio: el
   * texto se dibuja más arriba pero sigue reservando el espacio de siempre, así
   * que la opinión más larga —que llena casi toda la tarjeta— no se descuadra ni
   * se le mete a la cabecera por arriba.
   */
  margin:auto 0;
  translate:0 -14px;
  position:relative;z-index:1;   /* por delante de la comilla de fondo */
  color:#fff;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  letter-spacing:.005em;
  text-align:left;
  text-wrap:pretty;
}

/*
 * DOS MEDIDAS, JUNTAS
 *
 * Hubo tres tamaños —27, 20 y 17— y la letra cambiaba tanto de una opinión a otra
 * que parecía un fallo. Hubo después un solo tamaño para las catorce, y entonces
 * las once que son cortas se veían pequeñas para el sitio que tenían.
 *
 * Dos medidas juntas resuelven las dos cosas: 24 para las once que caben holgadas
 * y 19 para las tres largas, que es lo que necesitan para caber enteras. Cinco
 * píxeles de diferencia no se leen como un fallo.
 *
 * Quién es holgada y quién no lo decide el PHP contando caracteres, que es quien
 * tiene el texto delante.
 */
.op-card blockquote{font-size:19px;line-height:1.5;}
.op-card--holgada blockquote{font-size:24px;line-height:1.42;}


/*
 * La palabra que más se repite, marcada. Sin fondo: un resalte de rotulador sobre
 * color tapa el texto. Y en REDONDA, no en cursiva: dentro de una cita que va
 * entera inclinada, lo que destaca es lo que se endereza. Al revés que en un
 * párrafo normal, donde destaca lo que se inclina.
 */
.resenas__clave{
  background:none;
  font-style:normal;
  color:#A9F5E9;
  font-weight:700;

}

/* ---- LOS MANDOS ---- */

/*
 * SIN NÚMEROS.
 *
 * Aquí había una cuenta —«3 / 14»— entre las dos flechas. Decía en qué opinión
 * vas, pero eso no le importa a nadie: esto no es una lista que haya que
 * terminar. La barra dice lo mismo sin pedir que se lea nada.
 */
.ruedo.esta-vivo .tablero__mandos{
  display:flex;align-items:center;justify-content:center;
  gap:22px;
  margin:40px auto 0;
  max-width:420px;
}

/*
 * LAS FLECHAS
 *
 * Eran dos círculos blancos con una flecha de la tipografía dentro. Ahora son
 * pastillas de la altura de un botón, con el contorno del azul de la casa y la
 * punta dibujada en SVG — la del texto cambia de forma y de grosor con cada
 * familia de letra, y esto no es texto, es un icono.
 *
 * Al señalarlas se llenan del degradado de marca y la punta se corre un pelo
 * hacia donde va a llevar. Ese desplazamiento de dos píxeles es lo que las hace
 * sentir un botón y no un dibujo.
 */
.tablero__flecha{
  display:grid;place-items:center;
  flex:0 0 auto;          /* que no las estruje lo que haya en medio */
  width:52px;height:44px;
  border-radius:999px;
  background:transparent;
  border:1.5px solid color-mix(in srgb, var(--brand-navy,#002060) 22%, transparent);
  color:var(--brand-navy,#002060);
  cursor:pointer;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.tablero__flecha svg{
  width:19px;height:19px;
  transition:translate .25s cubic-bezier(.3,.9,.4,1);
}
.tablero__flecha:hover{
  background:linear-gradient(120deg,var(--brand-teal),var(--brand-navy));
  border-color:transparent;
  color:#fff;
}
[data-op-anterior]:hover svg{translate:-2px 0;}
[data-op-siguiente]:hover svg{translate:2px 0;}
.tablero__flecha:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;}

/* ---- LA BARRA ---- */
.tablero__barra{
  flex:1 1 auto;
  height:3px;
  border-radius:999px;
  background:color-mix(in srgb, var(--brand-navy,#002060) 12%, transparent);
  overflow:hidden;
}
.tablero__barra-llena{
  display:block;
  height:100%;
  width:0;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--brand-teal),var(--brand-navy));
  transition:width .5s cubic-bezier(.3,.8,.3,1);
}

@media (prefers-reduced-motion: reduce){
  /*
   * Sin giro: el ruedo salta de puesto de golpe. Sigue funcionando con los mandos
   * —y el script no lo hace girar solo—, pero nada se mueve.
   */
  .ruedo.esta-vivo.con-giro .ruedo__anillo{transition:none;}
  .ruedo.esta-vivo .op-card{transition:none;}
  .tablero__flecha,.tablero__flecha svg,.tablero__barra-llena{transition:none;}

  /* Y sin destello: es puro adorno en movimiento. */
  .op-card.brilla .op-card__destello{animation:none;}
}

@media (max-width: 1020px){
  /* Tarjeta más estrecha: el radio la sigue solo, porque sale de ella. */
  .ruedo{--ancho:300px;}
  .ruedo.esta-vivo .ruedo__escena{height:420px;}
}

@media (max-width: 760px){
  .resenas{padding:72px 0;}
  .resenas__cabeza{margin-bottom:42px;}
  /*
   * En un móvil la tarjeta ocupa casi todo el ancho y la perspectiva se acorta:
   * el cilindro es más pequeño y las vecinas asoman menos, justo lo suficiente
   * para que se note que hay más detrás.
   */
  .ruedo{--ancho:78vw;}
  .ruedo.esta-vivo .ruedo__escena{height:400px;perspective:1100px;}
  .op-card{padding:22px 20px;}
  /* Un punto menos en cada medida: la tarjeta del móvil es más estrecha y las
     largas se quedaban sin margen. */
  .op-card blockquote{font-size:18px;}
  .op-card--holgada blockquote{font-size:22px;}
  /* El sello, en dos renglones y sin la píldora: en un móvil ocupa toda la caja. */
  .sello-g{
    flex-direction:column;gap:12px;
    border-radius:18px;padding:18px 20px;
  }
  /* El enlace mide 22 px de alto por su texto; con el dedo hace falta el doble. */
  .sello-g__enlace{min-height:44px;}
}

/* ---- LA GALERÍA DE EVENTOS: LA PERSIANA POR TIPO ---- */
/*
 * Nueve láminas de pie, una por tipo de evento. Cerrada, cada lámina enseña una
 * de sus fotos en blanco y negro bajo el color que le toca en el degradado de la
 * marca: la persiana apagada YA ES el degradado del sitio. La que se señala se
 * abre, la foto se ve entera y en color, y las flechas de abajo pasan las demás
 * fotos de ese tipo.
 *
 * El mecanismo es flex-basis:0 con flex-grow distinto —1 cerrada, 9 abierta—:
 * las nueve suman siempre el ancho exacto del bloque, así que no hay
 * desbordamiento ni scroll horizontal mida lo que mida la pantalla.
 */
/*
 * Fondo BLANCO y no el gris de «Lo que hacemos»: las dos van seguidas y con el
 * mismo fondo se leían como un solo bloque larguísimo. El cambio de color es lo
 * que dice «esto es otra cosa» sin poner una raya de por medio.
 */
.galev{
  padding:84px 0 92px;
  background:var(--surface);
}
.galev__cabeza{margin:0 0 28px;}
.galev__cabeza h2{margin:0;font-size:clamp(26px,3vw,36px);}

.persiana{
  display:flex;
  gap:8px;
  height:min(74vh,560px);
  min-height:440px;
}

.lamina{
  position:relative;
  flex:1 1 0;
  min-width:0;
  border-radius:18px;
  overflow:hidden;
  background:var(--tono,#0A7F76);
  box-shadow:0 14px 30px rgba(0,22,60,.16);
  transition:flex-grow .55s cubic-bezier(.22,.9,.24,1),box-shadow .4s ease;
}
/*
 * EL ESTADO ABIERTO, POR PARTIDA DOBLE
 *
 * .es-abierta la pone el script, que es quien reparte la apertura entre ratón,
 * teclado y dedo. Y como el script podría no llegar, cada regla vale también
 * para el :hover de siempre. [data-listo] —que el script pone al hacerse cargo—
 * apaga esa segunda versión para que ratón y clase no se peleen.
 */
.lamina.es-abierta,
.persiana:not([data-listo]) .lamina:hover{
  flex-grow:9;
  box-shadow:0 26px 54px rgba(0,22,60,.28);
}

/* ---- EL LOMO ---- */
.lamina__lomo{
  position:absolute;inset:0;z-index:2;
  width:100%;
  padding:0;border:0;
  background:none;
  cursor:pointer;
  transition:opacity .4s ease;
}
.lamina.es-abierta .lamina__lomo,
.persiana:not([data-listo]) .lamina:hover .lamina__lomo{
  opacity:0;pointer-events:none;
}
.lamina__lomo:focus-visible{outline:3px solid var(--accent);outline-offset:-4px;border-radius:18px;}

/* La foto del lomo: en blanco y negro y ampliada, para que el color de marca
   salga limpio por encima y la lámina cerrada se lea como color, no como foto. */
.lamina__textura{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  /*
   * Poca y en soft-light: la foto es una TEXTURA que se adivina, no una imagen.
   * Con más presencia —luminosity al 50 % se probó— las láminas cerradas salían
   * grises y se perdía lo que hace que esto sea de esta casa: el degradado de
   * color de turquesa a azul marino recorriendo la persiana.
   */
  filter:grayscale(1) contrast(1.3);
  opacity:.28;
  mix-blend-mode:soft-light;
}
.lamina__vertical{
  position:absolute;left:0;right:0;top:26px;bottom:26px;
  display:flex;align-items:flex-start;justify-content:center;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:var(--font-body);
  font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 10px rgba(0,16,42,.45);
}
/* ---- LO DE DENTRO: UNA FOTO GRANDE Y LAS FLECHAS ---- */
.lamina__dentro{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity .3s ease;
}
.lamina.es-abierta .lamina__dentro,
.persiana:not([data-listo]) .lamina:hover .lamina__dentro{
  opacity:1;
  transition-delay:.18s;
}
/* El nombre del tipo, arriba y sobre un velo: es lo único escrito: de qué evento
   es cada foto no se dice, aquí se enseña trabajo. */
.lamina__tipo{
  position:absolute;top:0;left:0;right:0;z-index:2;
  padding:20px 22px 34px;
  font-family:var(--font-display);
  font-size:clamp(17px,1.7vw,22px);line-height:1.2;font-weight:600;
  color:#fff;
  background:linear-gradient(to bottom,rgba(0,12,34,.72) 0%,transparent 100%);
  pointer-events:none;
}

/*
 * LA TIRA: una foto por pantalla.
 *
 * Cada foto ocupa el ancho entero de la lámina y el scroll-snap hace que siempre
 * pare en una, nunca a medias. Se arrastra con el dedo, se recorre con la rueda y
 * con el teclado; las flechas las añade el script.
 */
.tira{
  position:absolute;inset:0;
  display:flex;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.tira::-webkit-scrollbar{display:none;}
.tira:focus-visible{outline:3px solid #8FEFDF;outline-offset:-4px;border-radius:18px;}

.tira__foto{
  position:relative;
  flex:0 0 100%;
  height:100%;
  padding:0;border:0;
  background:rgba(0,16,42,.35);
  scroll-snap-align:center;
  cursor:zoom-in;
}
.tira__foto img{
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.tira__foto:focus-visible{outline:3px solid #8FEFDF;outline-offset:-4px;}

/*
 * LAS FLECHAS, ABAJO Y EN EL CENTRO.
 *
 * Las pinta el script dentro de la lámina. Van centradas al pie, sobre un velo
 * que garantiza que se vean tanto sobre una foto clara como sobre una oscura.
 */
.lamina .cinta-mandos{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;justify-content:center;gap:12px;
  padding:26px 0 20px;
  background:linear-gradient(to top,rgba(0,12,34,.7) 0%,transparent 100%);
  pointer-events:none;
}
.lamina .cinta-boton{
  pointer-events:auto;
  display:grid;place-items:center;
  width:42px;height:42px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,16,42,.5);
  backdrop-filter:blur(6px);
  color:#fff;cursor:pointer;
  transition:background-color .22s ease,transform .22s ease;
}
.lamina .cinta-boton:hover{background:rgba(0,16,42,.8);transform:translateY(-2px);}
.lamina .cinta-boton:focus-visible{outline:3px solid #8FEFDF;outline-offset:3px;}
.lamina .cinta-boton svg{width:19px;height:19px;}

@media (prefers-reduced-motion: reduce){
  .lamina,.lamina__lomo,.lamina__dentro,.cinta-boton{transition:none;}
  .tira{scroll-behavior:auto;}
}

/*
 * EN PANTALLA ESTRECHA LA PERSIANA SE TUMBA.
 *
 * Nueve láminas verticales en un móvil serían nueve rayas de 35 px. Por debajo
 * de 900 se apilan como franjas y la abierta crece hacia abajo: el mismo
 * mecanismo con el eje cambiado, sin un segundo diseño que mantener.
 */
@media (max-width: 900px){
  .galev{padding:60px 0 68px;}
  .persiana{flex-direction:column;height:auto;min-height:0;gap:7px;}
  .lamina{flex:0 0 auto;height:58px;border-radius:14px;
    transition:height .5s cubic-bezier(.22,.9,.24,1),box-shadow .4s ease;}
  .lamina.es-abierta,
  .persiana:not([data-listo]) .lamina:hover{height:min(62vh,420px);}
  .lamina__vertical{
    writing-mode:horizontal-tb;transform:none;
    left:20px;right:16px;top:0;bottom:0;
    align-items:center;justify-content:flex-start;
    font-size:11px;
  }
  .lamina__tipo{padding:16px 18px 30px;}
  .lamina .cinta-mandos{padding:22px 0 16px;}
}


/* ---- LA FOTO EN GRANDE ---- */
/*
 * La capa que abre una foto sobre la página. La monta afce.js al pulsar, así
 * que en el HTML no hay nada: sin JavaScript no hay lupa que se quede colgada.
 *
 * Fondo casi negro y no el degradado de marca: aquí el protagonista es la
 * fotografía, y cualquier color de fondo le cambia el suyo.
 */
.visor{
  position:fixed;inset:0;z-index:9000;
  display:grid;place-items:center;
  padding:24px;
  background:rgba(2,10,26,.92);
  backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .28s ease;
}
.visor.es-visible{opacity:1;}
.visor__caja{
  position:relative;
  max-width:min(1100px,92vw);
  max-height:88vh;
  display:flex;flex-direction:column;gap:14px;
  transform:scale(.97);
  transition:transform .28s cubic-bezier(.2,.8,.3,1);
}
.visor.es-visible .visor__caja{transform:none;}
.visor__foto{
  max-width:100%;max-height:74vh;
  width:auto;height:auto;
  border-radius:14px;
  box-shadow:0 30px 70px rgba(0,0,0,.5);
  object-fit:contain;
  background:#0A1A33;
}
.visor__pie{
  display:flex;flex-direction:column;gap:4px;
  color:#EAF4FF;
}
.visor__tipo{
  font-family:var(--font-body);
  font-size:10px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;
  color:#8FEFDF;
}
.visor__que{font-family:var(--font-display);font-size:19px;line-height:1.3;}
.visor__cuenta{font-size:12px;color:rgba(234,244,255,.55);}

/* Los tres mandos: cerrar arriba a la derecha y las dos flechas a los lados. */
.visor__mando{
  position:absolute;
  display:grid;place-items:center;
  width:46px;height:46px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  background:rgba(255,255,255,.10);
  color:#fff;cursor:pointer;
  transition:background-color .22s ease,transform .22s ease;
}
.visor__mando:hover{background:rgba(255,255,255,.2);}
.visor__mando:focus-visible{outline:3px solid #8FEFDF;outline-offset:3px;}
.visor__mando svg{width:20px;height:20px;}
.visor__cerrar{top:-58px;right:0;}
.visor__ant{left:-62px;top:calc(37vh - 23px);}
.visor__sig{right:-62px;top:calc(37vh - 23px);}

@media (max-width: 860px){
  .visor{padding:16px;}
  .visor__cerrar{top:-52px;right:0;}
  /* En estrecho no hay sitio fuera de la foto: las flechas se meten dentro, en
     la banda baja, donde no tapan lo que se está mirando. */
  .visor__ant,.visor__sig{top:auto;bottom:-4px;}
  .visor__ant{left:auto;right:64px;}
  .visor__sig{right:0;}
  .visor__foto{max-height:66vh;}
}
@media (prefers-reduced-motion: reduce){
  .visor,.visor__caja,.visor__mando{transition:none;}
}

/* ---- LOS DOS TALLERES: FICHAS QUE SE VOLTEAN ---- */
/*
 * Delante, el taller en una frase y su color; detrás, el programa entero. Se le
 * da la vuelta pulsando, como a una ficha de verdad.
 *
 * El volteo es un rotateY sobre un envoltorio con perspectiva. Las dos caras
 * ocupan la misma casilla —una girada 180°— y backface-visibility esconde la que
 * mira hacia atrás. Es todo CSS: el script sólo pone y quita una clase.
 *
 * SIN [data-listo] NO HAY VOLTEO. Si el JavaScript no llega, .talleres__fichas no
 * recibe ese atributo y las reglas de abajo dejan las dos caras una debajo de
 * otra: se pierde el gesto, no el texto.
 */
.talleres{padding:88px 0 92px;background:var(--surface-2);}
.talleres__cabeza{max-width:640px;margin:0 0 30px;}
.talleres__cabeza h2{margin:0;font-size:clamp(26px,3vw,36px);}
.talleres__cabeza p{margin:12px 0 0;color:var(--text-muted);font-size:16px;line-height:1.6;}

.talleres__fichas{
  display:grid;
  /*
   * minmax(0,1fr) y no 1fr a secas: con 1fr, la columna nunca baja del
   * min-content de lo que lleva dentro, y el texto de la cara trasera la
   * empujaba más allá del ancho disponible —la página salía con barra
   * horizontal—. Con el mínimo en cero, las dos columnas se reparten lo que hay
   * y el texto se ajusta.
   */
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

/* Sin script: las dos caras, una detrás de otra, como tarjetas normales. */
.ficha__cara{
  padding:30px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--border);
}
.ficha__cara + .ficha__cara{margin-top:12px;}
.ficha__voltear{display:none;}

/* Con script: la ficha de verdad. */
[data-listo] .ficha{
  perspective:1400px;
  height:var(--alto,520px);
}
[data-listo] .ficha__giro{
  position:relative;
  width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .75s cubic-bezier(.3,.9,.3,1);
}
[data-listo] .ficha.es-volteada .ficha__giro{transform:rotateY(180deg);}

[data-listo] .ficha__cara{
  position:absolute;inset:0;
  margin:0;
  display:flex;flex-direction:column;
  overflow:hidden;
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  box-shadow:0 16px 40px rgba(0,22,60,.12);
}
[data-listo] .ficha__voltear{display:inline-flex;}
/* ---- LA CARA ---- */
[data-listo] .ficha__cara--frente{
  justify-content:flex-end;
  border:0;
  /* El color del taller, del degradado de la marca. El segundo tono sale del
     primero: color-mix ahorra escribir dos veces lo mismo y garantiza que los
     dos sean familia. */
  background:linear-gradient(150deg,
     color-mix(in srgb, var(--tono) 82%, #0A7F76) 0%,
     var(--tono) 55%,
     color-mix(in srgb, var(--tono) 80%, #000) 100%);
  color:#fff;
}
/* Y el dibujo abstracto que asoma por la esquina, en grande y casi transparente:
   el mismo recurso de las piezas de «Lo que hacemos». */
/*
 * El dibujo va DENTRO de la ficha, sin asomar por el filo.
 *
 * Salía 40 px por fuera y, con overflow:hidden en la cara, debería haberse
 * recortado; no lo hacía: la ficha vive dentro de un preserve-3d, y ahí el
 * recorte no es de fiar. El resultado era una barra de desplazamiento
 * horizontal en toda la página. Metido en su esquina, no hay nada que recortar.
 */
.ficha__marca{
  position:absolute;top:0;right:0;
  width:200px;height:200px;
  overflow:hidden;
  color:rgba(255,255,255,.16);
  pointer-events:none;
}
.ficha__marca svg{width:100%;height:100%;}

.ficha__nombre{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(22px,2.4vw,30px);line-height:1.15;font-weight:600;
  color:#fff;
}
.ficha__resumen{
  margin:12px 0 0;
  font-size:15px;line-height:1.6;
  color:rgba(234,244,255,.86);
  max-width:40ch;
}
/*
 * EL GANCHO
 *
 * La primera frase de la ficha dice por qué importa el taller, y va más grande
 * y más clara que la explicación que le sigue: es la que tiene que leerse
 * aunque nadie lea el resto. En cursiva del titular, no del cuerpo, para que se
 * distinga de un vistazo sin necesidad de ponerle color.
 */
.ficha__resumen--gancho{
  margin-top:16px;
  font-family:var(--font-display);
  font-size:clamp(17px,1.6vw,20px);line-height:1.35;
  color:#fff;
  max-width:30ch;
}
.ficha__voltear{
  align-self:flex-start;
  align-items:center;gap:10px;
  margin-top:24px;
  padding:12px 22px;
  border:1px solid rgba(255,255,255,.4);
  border-radius:999px;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(6px);
  color:#fff;
  font-family:var(--font-body);
  font-size:13.5px;font-weight:700;
  cursor:pointer;
  transition:background-color .25s ease,gap .25s ease;
}
.ficha__voltear:hover{background:rgba(255,255,255,.24);gap:14px;}
.ficha__voltear:focus-visible{outline:3px solid #8FEFDF;outline-offset:3px;}
.ficha__giroicono{display:grid;place-items:center;width:17px;height:17px;}
.ficha__giroicono svg{width:100%;height:100%;}
/* ---- EL REVERSO ---- */
[data-listo] .ficha__cara--dorso{
  transform:rotateY(180deg);
  background:#fff;
  border:1px solid color-mix(in srgb, var(--tono) 35%, transparent);
  padding:26px 26px 18px;
}
/* El texto de detrás puede ser largo: se recorre dentro de la ficha en vez de
   estirarla, que estirarla descuadraría la pareja. */
[data-listo] .ficha__dentro{
  flex:1 1 auto;
  overflow-y:auto;
  padding-right:8px;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb, var(--tono) 45%, transparent) transparent;
  /* Un desvanecido abajo dice que hay más texto sin pintar una barra. */
  -webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);
}
.ficha__nombre--dorso{
  margin:0 0 14px;
  font-size:19px;
  color:var(--tono);
}
.ficha__dentro p{
  margin:0 0 12px;
  font-size:15px;line-height:1.62;
  color:var(--text);
}
.ficha__rotulo{
  margin:18px 0 10px;
  font-family:var(--font-body);
  font-size:10.5px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--tono);
}
.ficha__programa{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.ficha__programa li{
  position:relative;padding-left:26px;
  font-size:14.5px;line-height:1.55;
  color:var(--text);
}
/* La marca de verificación, dibujada: son cosas que el participante se lleva. */
.ficha__programa li::before{
  content:"";
  position:absolute;left:0;top:6px;
  width:14px;height:8px;
  border-left:2px solid var(--tono);
  border-bottom:2px solid var(--tono);
  transform:rotate(-45deg);
  border-radius:1px;
}
.ficha__paso{
  display:inline-flex;align-items:center;gap:9px;
  margin:20px 0 4px;
  padding:11px 20px;
  border-radius:999px;
  background:var(--tono);color:#fff;
  font-size:13.5px;font-weight:700;
  text-decoration:none;
  transition:gap .22s ease;
}
.ficha__paso:hover{gap:14px;color:#fff;}
.ficha__voltear--dorso{
  align-self:flex-start;
  margin:10px 0 0;
  padding:9px 18px;
  border-color:var(--border-strong);
  background:none;
  color:var(--tono);
  font-size:12.5px;
}
.ficha__voltear--dorso:hover{background:color-mix(in srgb, var(--tono) 10%, transparent);}

@media (prefers-reduced-motion: reduce){
  [data-listo] .ficha__giro{transition:none;}
  .ficha__voltear,.ficha__paso{transition:none;}
}
@media (max-width: 860px){
  .talleres{padding:64px 0 70px;}
  .talleres__fichas{grid-template-columns:1fr;}
  [data-listo] .ficha{height:var(--alto,560px);}
  .ficha__cara{padding:24px;}
  [data-listo] .ficha__cara--dorso{padding:22px 20px 14px;}
}

/* ---- LO QUE DICEN: UN MAZO DE FICHAS ---- */
/*
 * Tres citas largas en tres columnas son un muro de letra pequeña. Aquí van
 * apiladas como un mazo: la de arriba abierta y grande, las otras dos asomando
 * giradas por detrás. Se pasa pulsando, y la que estaba delante se va al fondo.
 *
 * Sin JavaScript no hay mazo y las tres se pintan una debajo de otra: se leen
 * igual, sólo que sin el gesto. Por eso el orden del documento es el de lectura.
 */
/* Sección propia y fondo blanco: pegada a los talleres y con el mismo gris, las
   dos cosas se leían como un bloque interminable. */
.testimonios{padding:80px 0 88px;background:var(--surface);}
.dicen{margin-top:0;}
.dicen__titulo{
  margin:0 0 26px;
  font-size:clamp(26px,3vw,36px);
  line-height:1.15;
  color:var(--text);
}
.mazo{display:grid;gap:14px;}

.carta{
  position:relative;
  padding:38px 30px 26px;
  border-radius:20px;
  background:linear-gradient(150deg,
     color-mix(in srgb, var(--tono-carta) 86%, #0A7F76) 0%,
     var(--tono-carta) 60%,
     color-mix(in srgb, var(--tono-carta) 78%, #000) 100%);
  color:#fff;
  box-shadow:0 18px 40px rgba(0,22,60,.18);
}
.carta__comilla{
  position:absolute;top:6px;left:24px;
  font-family:var(--font-display);
  font-size:86px;line-height:1;
  color:rgba(255,255,255,.28);
  pointer-events:none;
}
.carta__cita{
  position:relative;z-index:1;
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(16px,1.6vw,19px);line-height:1.6;
  color:#fff;
}
.carta__firma{
  display:flex;flex-direction:column;gap:2px;
  margin:20px 0 0;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.25);
}
.carta__quien{font-family:var(--font-display);font-size:16px;font-weight:600;}
.carta__taller{font-size:12.5px;color:#8FEFDF;}
/* ---- Y con script, el mazo de verdad ---- */
[data-listo].mazo{
  position:relative;
  display:block;
  height:var(--alto,300px);
  cursor:pointer;
}
[data-listo] .carta{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;
  transform-origin:50% 120%;
  transition:transform .6s cubic-bezier(.3,.9,.3,1),opacity .4s ease;
}
/* La de arriba, recta y entera; las de detrás, giradas y encogidas, asomando
   por los lados: es lo que dice «hay más» sin escribirlo. */
[data-listo] .carta.es-1{transform:none;z-index:3;opacity:1;}
[data-listo] .carta.es-2{transform:rotate(-2.6deg) scale(.955) translateY(12px);z-index:2;opacity:.75;}
[data-listo] .carta.es-3{transform:rotate(2.4deg) scale(.91) translateY(24px);z-index:1;opacity:.5;}
/* La que sale del mazo se va por la izquierda antes de volver al fondo. */
[data-listo] .carta.se-va{transform:translateX(-18%) rotate(-9deg) scale(.94);opacity:0;z-index:4;}

.mazo__mandos{
  display:flex;align-items:center;gap:10px;
  margin-top:18px;
}
.mazo__boton{
  display:grid;place-items:center;
  width:40px;height:40px;
  border-radius:50%;
  border:1px solid var(--border-strong);
  background:#fff;
  color:var(--tono);
  cursor:pointer;
  transition:background-color .22s ease,transform .22s ease;
}
.mazo__boton:hover{background:color-mix(in srgb, var(--tono) 10%, transparent);transform:translateY(-1px);}
.mazo__boton:focus-visible{outline:3px solid var(--accent);outline-offset:3px;}
.mazo__boton svg{width:18px;height:18px;}
.mazo__cuenta{
  font-family:var(--font-body);
  font-size:12px;font-weight:700;letter-spacing:.1em;
  color:var(--text-muted);
}

@media (prefers-reduced-motion: reduce){
  [data-listo] .carta,.mazo__boton{transition:none;}
}
@media (max-width: 860px){
  .carta{padding:32px 22px 22px;}
  .carta__comilla{font-size:70px;left:18px;}
}