/* ============================================================
   ACTORES S.C.G — Estilos del HOME (solo index.html)
   Se carga junto a site.css
   ============================================================ */
section{padding:118px 0}
@media(max-width:640px){section{padding:82px 0}}

h2{font-family:var(--font-display); font-weight:500; letter-spacing:-.01em; font-size:clamp(32px,4.6vw,58px); line-height:1.02; margin:0}
h2 em{font-style:italic; color:var(--accent)}

/* ====== HERO ======
   La primera pantalla no está montada como una página: está montada como un
   CARTEL. El televisor pesa en el centro, el texto se va a las esquinas, y en
   medio no hay nada. Ese vacío es la mitad del efecto.

   NARANJA, con su trama y su espiral, como todas las cabeceras del sitio
   (ESTILO-VISUAL §6.1). Se probó sobre papel —queda más cerca de la
   referencia— y no compensa: la portada es donde el color de la marca tiene
   que mandar, y una sola cabecera clara entre siete naranjas se lee como una
   página de otro sitio. */
/* `min-height:100svh` decía «una pantalla» y en un portátil de 768 medía 724
   sobre 665: el cartel entero pedía más de lo que había y la cinta se salía
   por abajo. El tope no era mentira, era insuficiente —`min-height` no
   recorta—, así que lo que se hizo fue quitarle a la ventana baja lo que en
   ella sobra, que es el aire: la guarda de arriba, los huecos de la rejilla y
   la separación de la cinta encogen con `svh` y de 930px para arriba valen
   exactamente lo que valían. Las piezas del cartel no se tocan. */
.hero{background:var(--orange); color:var(--ink); min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(84px, 12svh, 112px) 0 0; position:relative; overflow:hidden}
.hero .spiral{left:-190px; bottom:-230px; width:560px; height:560px; opacity:.13}
.hero .spiral path{stroke:#fff}

/* Más ancho que el `--maxw` del resto del sitio (1220): esto no es una columna
   de lectura, es un cartel, y su gracia está en que las esquinas se vayan a
   los bordes. Encerrado en 1220 sobre un monitor grande, todo se apelotona en
   el centro y deja medio naranja vacío a los lados.

   Tres columnas por tres filas. La del medio es `auto` y se lleva lo que pida
   el televisor; las otras dos no son iguales porque no llevan lo mismo: a la
   izquierda hay titular, dos botones y firma, y a la derecha dos palabras. */
.cartel{flex:1 0 auto; width:100%; max-width:min(1780px,94vw); position:relative; z-index:2;
  display:grid; grid-template-columns:1.15fr auto .85fr;
  grid-template-rows:auto 1fr auto; align-items:center;
  column-gap:clamp(20px,3vw,56px); row-gap:clamp(10px,2.4svh,30px);
  padding-bottom:clamp(10px,2.6svh,34px)}

/* ------ LOS RÓTULOS DE LAS ESQUINAS --------------------------------------
   Versalitas pequeñas con una regla corta encima. Es lo que sostiene la
   composición: sin ellos el televisor flota en un naranja vacío y el cartel se
   deshace. Van cortos a propósito —un renglón que se parta en tres líneas
   rompe la retícula—. */
.rot{margin:0; display:flex; flex-direction:column; gap:1px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--ink); line-height:1.45}
.rot::before{content:""; width:30px; height:3px; background:var(--ink); margin-bottom:14px}
.rot-tl{grid-column:1; grid-row:1; align-self:start}
.rot-bl{grid-column:1; grid-row:3; align-self:end}
.rot-br{grid-column:3; grid-row:3; align-self:end; text-align:right; align-items:flex-end}
.rot-br::before{align-self:flex-end}

/* ------ EL TELEVISOR -----------------------------------------------------
   En medio del cartel hay un televisor antiguo, encendido. Es el oficio dicho
   con el aparato por el que la gente lo conoce, y es donde nace lo que esta
   casa cobra: si sale al aire, se paga.

   Aquí hubo antes el isotipo de la marca relleno de caras. Se retiró por
   petición expresa, y el logo no se perdió: está de MOSCA en la esquina de la
   pantalla, que es donde un canal pone el suyo.

   El aparato se dibuja entero con CSS. No es virtuosismo: una imagen habría
   que mantenerla en dos densidades, no se repinta cuando cambie la paleta y
   pesa. Esto son cuatro cajas y dos degradados, escala a cualquier tamaño y
   sigue el `--ink` del sistema.

   TODO EL MUEBLE ES TINTA sobre el naranja del hero. Un televisor claro sobre
   naranja se lee como un electrodoméstico de catálogo; en tinta se lee como un
   aparato encendido en una habitación, que es lo que tiene que parecer. */
.tele{grid-column:2; grid-row:1/span 3; justify-self:center; position:relative;
  /* De esta anchura salen todas las medidas del aparato, y por eso está en una
     variable: las perillas, las patas y la antena van en porcentaje de ella y
     el televisor encoge entero, sin descomponerse.

     El tope por altura de ventana es el que manda casi siempre, y es el que
     importa: lo que se buscaba de la referencia es que la pieza del centro vaya
     de arriba abajo del cartel y no que flote en medio de un naranja vacío. El
     `vh` está calculado sobre el APARATO ENTERO —antena, mueble y patas—, que
     mide más o menos lo mismo de alto que de ancho; sobre la pantalla sola se
     queda corto y vuelve el hueco. */
  --tw:clamp(272px,min(40vw,76vh),820px);
  width:var(--tw);
  display:flex; flex-direction:column; align-items:center;
  /* La sombra despega el aparato del naranja. Va en `filter` y no en
     `box-shadow` para que la tiren también la antena y las patas, que son
     hijos con formas propias. */
  filter:drop-shadow(0 30px 46px rgba(0,0,0,.34))}

/* El resplandor de la pantalla sobre el naranja. Es lo que quita la sensación
   de calcomanía: un televisor encendido tiñe lo que tiene alrededor, y sin esto
   el aparato se lee pegado sobre el fondo en vez de dentro de la escena.

   Va detrás del mueble y desbordando la caja, y no intercepta nada: si lo
   hiciera, el ratón no llegaría a los recuadros por los bordes. */
.tele::before{content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:-18% -14% -10%;
  background:radial-gradient(58% 46% at 50% 46%,
    rgba(255,236,205,.5), rgba(255,190,120,.2) 46%, transparent 72%)}

/* ── LA ANTENA ────────────────────────────────────────────────────────────
   Orejas de conejo, y TORCIDAS: ningún televisor de estos las tuvo rectas, y
   dos varillas simétricas se leen como un icono en vez de como un objeto. */
/* Corta a propósito: mide en la misma altura que la pantalla, así que cada
   punto que se lleve la antena se lo quita al monitor, que es lo que hay que
   ver. */
.antena{position:relative; width:44%; height:calc(var(--tw) * .15)}
.antena i{position:absolute; bottom:0; left:calc(50% - 1.5px);
  width:3px; height:100%; border-radius:3px; background:var(--ink);
  transform-origin:bottom center}
.antena i:first-child{transform:rotate(-31deg)}
.antena i:last-child{transform:rotate(27deg)}
/* Los remates de las puntas. */
.antena i::after{content:""; position:absolute; top:-4px; left:-2.5px;
  width:8px; height:8px; border-radius:50%; background:var(--ink)}
/* La base por donde salen del mueble. */
.antena::after{content:""; position:absolute; bottom:0; left:50%;
  transform:translateX(-50%); width:22%; height:10px;
  border-radius:6px 6px 0 0; background:var(--ink)}

/* ── EL MUEBLE ────────────────────────────────────────────────────────────
   La pantalla a la izquierda y el panel de mandos a la derecha, que es la
   disposición de un televisor de tubo y lo que lo hace reconocible de un
   vistazo: sin esa columna de perillas, esto es un monitor. */
.caja{position:relative; width:100%; box-sizing:border-box;
  background:var(--ink); border-radius:calc(var(--tw) * .05);
  padding:calc(var(--tw) * .035); display:flex; gap:calc(var(--tw) * .03);
  align-items:stretch}

/* El panel de mandos: dos perillas y la rejilla del altavoz. */
.mandos{width:13%; display:flex; flex-direction:column; align-items:center;
  gap:calc(var(--tw) * .022); padding-top:calc(var(--tw) * .015)}
.perilla{width:82%; aspect-ratio:1; border-radius:50%; position:relative;
  background:radial-gradient(circle at 32% 28%, #55554c, #22221c 62%, #101009);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
/* La muesca, que es lo que convierte un círculo en un mando. */
.perilla::after{content:""; position:absolute; left:calc(50% - 1px); top:16%;
  width:2px; height:34%; border-radius:2px; background:rgba(255,255,255,.5)}
.rejilla{flex:1; width:88%; border-radius:4px;
  background:repeating-linear-gradient(180deg,
    rgba(255,255,255,.16) 0 2px, transparent 2px 6px)}

/* Las patas. Abiertas hacia fuera, como las de un mueble de los sesenta. */
.patas{width:66%; display:flex; justify-content:space-between}
.patas i{width:13%; height:calc(var(--tw) * .045); background:var(--ink);
  border-radius:0 0 4px 4px; transform:skewX(-9deg)}
.patas i:last-child{transform:skewX(9deg)}

/* ── EL TUBO: la cara de la pantalla ──────────────────────────────────────
   4/3, que es la proporción de la época y lo que hace que se lea «antiguo»
   antes que ninguno de los efectos. Los radios son distintos en cada eje: un
   tubo no tiene esquinas redondas, tiene una cara abombada. */
.tubo{position:relative; flex:1; aspect-ratio:4/3; overflow:hidden;
  border-radius:6% / 8%; background:#0a0a09;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.07);
  /* Los cinco secundarios de la «flor camaleón» del manual. Viven aquí y no
     en `.barras` porque las barras son solo quien los pinta: si algún día
     otra pieza del aparato necesita la paleta de la carta de ajuste, la tiene
     sin duplicarla. */
  --oro:#CCA800; --verde:#00A800; --azul:#0078E4; --morado:#78006C; --rojo:#E40000}

/* ── LA PARED DE MONITORES ────────────────────────────────────────────────
   Lo que emite el televisor no es UN programa: son diecisiete a la vez, cada
   uno en su recuadro, como el monitor de un control de realización. Es la
   sociedad entera en una sola imagen —todo eso está al aire, y todo eso genera
   derechos—, y es lo que ninguna foto suelta consigue decir: la CANTIDAD.

   Y está siempre puesto. Se probó escondiéndolo detrás de un cambio de canal
   —la sala de casting vacía en reposo, el reparto al acercarse— y se pierde
   justo eso: quien no pasa el ratón por encima se lleva una sala vacía. La
   interacción no puede ser descubrir que hay gente; es elegir a quién mirar.

   Los recuadros SE SEPARAN, y ahí está la diferencia con el mosaico que hubo
   antes: aquel recortaba el emblema y las teselas tenían que tocarse para
   leerse como una figura; este es un monitor de estudio y tienen que separarse
   para leerse como fuentes distintas. */
.tubo .emision{position:absolute; inset:0; z-index:1}

/* La carta de ajuste: lo que queda si el config se queda sin escenas. El ident
   de la marca girando y las barras debajo. No es un hueco a la espera de nada
   —se sostiene sola—, y por eso la lista vacía no rompe la portada. */
.tubo .carta{position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#12120f}
.hero .carta .sp-ident{position:static; left:auto; bottom:auto; flex:none;
  width:34%; height:auto; aspect-ratio:1; opacity:1}
.hero .carta .sp-ident path{stroke:var(--accent)}

/* Las barras del zócalo: parte del aparato, no del contenido. No son un guiño
   genérico a la televisión —son los cinco secundarios de la «flor camaleón»
   del manual, en el orden del color-shift, con el naranja abriendo—: la carta
   de ajuste de una televisora y la paleta de esta marca resultaron ser la
   misma imagen.

   Los cuatro rótulos de la pantalla —barras, subtítulo, «al aire» y mosca— van
   con `pointer-events:none`. Si no, tapan los recuadros que tienen debajo y
   ahí el ratón deja de poder elegir a quién mirar. */
.barras{position:absolute; inset:auto 0 0 0; z-index:3; height:7%; min-height:10px;
  display:flex; pointer-events:none}
.barras span{flex:1}

/* El subtítulo, justo encima de las barras y en el sitio donde una emisión
   pone los suyos. El realce oscuro detrás no es estética: debajo pasan
   diecisiete escenas y algunas son claras. */
.subtitulo{position:absolute; z-index:4; left:6%; right:6%; bottom:11%; margin:0;
  pointer-events:none; text-align:center;
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(12px,1.35vw,19px); line-height:1.2; color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.95)}

/* ── LOS RECUADROS ────────────────────────────────────────────────────────
   La rejilla del multivisor. El negro que se ve por las juntas es el del tubo:
   son 2 px y no hace falta pintarlos, basta con no taparlos. */
.mosaico{width:100%; height:100%; display:grid; gap:2px;
  grid-template-columns:repeat(6,1fr); grid-auto-rows:1fr; grid-auto-flow:dense;
  isolation:isolate; background:#0a0a09}

/* La tesela es el RECUADRO; la escena va dentro. Se separaron porque sobre
   cada uno se apilan cuatro cosas que van por su cuenta —la escena, el velo de
   marca, el salto de estática y el número—, y con la foto de fondo del `<span>`
   no hay forma de apagar una sin apagar las otras. */
.tesela{position:relative; overflow:hidden; background:#0f0f0d}

/* La escena. Es un `<i>` con la foto de fondo o un `<video>`, y las dos cosas
   se estilan igual: lo que cambia es de dónde sale la imagen, no cómo se
   coloca. Con saturación y contraste de más —detrás del barrido y de la viñeta
   del tubo, una imagen suave se apaga del todo—. */
.tesela .cara{position:absolute; inset:0; width:100%; height:100%;
  background-size:cover; background-position:center 26%; object-fit:cover;
  filter:saturate(1.22) contrast(1.1);
  transition:opacity .3s var(--ease)}

/* El número de la fuente, como en cualquier control de realización. Es lo que
   remata la lectura de «monitor de estudio»: sin él esto es un collage; con
   él, diecisiete señales entrando a la vez. */
.num{position:absolute; z-index:2; left:.5em; bottom:.4em; pointer-events:none;
  font-family:var(--font-ui); font-weight:700; font-style:normal;
  font-size:clamp(7px,.62vw,11px); letter-spacing:.1em; line-height:1;
  color:rgba(255,255,255,.78); text-shadow:0 1px 5px rgba(0,0,0,.95);
  transition:color .25s var(--ease)}

/* Unos cuantos recuadros mandan y el resto rellena: todos del mismo tamaño se
   leen como una plantilla de contactos, y un control de realización tampoco es
   así —siempre hay una señal más grande que las otras—.

   ⚠ LOS TAMAÑOS TIENEN QUE CUADRAR CON EL NÚMERO DE ESCENAS. La rejilla es de
   seis columnas, así que las celdas ocupadas tienen que ser múltiplo de seis o
   la última fila queda a medias y se abre un hueco negro en la emisión. Con las
   DIECISIETE de hoy la cuenta es 14 sueltas + 2 grandes (4 celdas cada una) +
   1 ancha (2 celdas) = 24, o sea cuatro filas exactas:

       01 02 03 03 04 05
       06 07 03 03 08 08
       09 10 11 12 12 13
       14 15 16 12 12 17

   Diecisiete es primo, así que NUNCA va a cuadrar solo: los recuadros grandes
   no son solo composición, son lo que hace que la cuenta cierre. Al cambiar la
   lista del config hay que rehacer esto y la cuenta del móvil, más abajo. */
.mosaico .tesela:nth-child(3){grid-column:span 2; grid-row:span 2}
.mosaico .tesela:nth-child(12){grid-column:span 2; grid-row:span 2}
.mosaico .tesela:nth-child(8){grid-column:span 2}

/* Un velo del color de la marca sobre cada escena. Vienen de producciones
   distintas, con la luz y la paleta de cada una —y algunas son de hace treinta
   años—, así que sin esto se leen como diecisiete fotogramas sueltos metidos en
   un rectángulo. Con esto se leen como una emisión. */
.tesela::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--accent); mix-blend-mode:multiply; opacity:.22;
  transition:opacity .35s var(--ease)}

/* ── ELEGIR A QUIÉN MIRAR ─────────────────────────────────────────────────
   Poner una fuente en programa, que es lo único que se hace delante de un
   monitor así: el recuadro se limpia de velo y se enciende el tally rojo. El
   rojo es el del manual (`--rojo`), no un rojo cualquiera.

   `outline` y no `border`: un borde empujaría la escena hacia dentro y el
   recuadro daría un salto de dos píxeles al pasar por encima. */
.tesela:hover{z-index:4; outline:2px solid var(--rojo); outline-offset:-2px}
.tesela:hover::before{opacity:.02}
.tesela:hover .cara{filter:saturate(1.3) contrast(1.12) brightness(1.06)}
.tesela:hover .num{color:#fff}

/* ── EL SALTO DE ESTÁTICA ─────────────────────────────────────────────────
   Cada pocos segundos dos recuadros se cambian la escena, y no lo hacen con un
   fundido: se van en un golpe de nieve, como salta una señal. Es lo que hace
   que la pared de monitores no sea una foto de una pared de monitores.

   El ruido es una turbulencia SVG en línea, no un GIF ni un PNG: no cuesta una
   petición, no se puede quedar sin caché y se genera al tamaño que haga falta.
   El fondo oscuro de debajo es la mitad del efecto: la turbulencia trae su
   propio alfa, así que puesta sola deja ver la escena entre grano y grano y lo
   que se ve es una foto sucia. Con el fondo, la capa TAPA, que es lo que hace
   la nieve de verdad.

   Va en el recuadro y no en la pantalla entera —hubo antes una versión así,
   para un cambio de canal que ya no existe—: una nevada a pantalla completa
   cada pocos segundos, en la primera pantalla del sitio, es insoportable.

   La enciende `tele.js` con `.saltando`. Sin JavaScript no hay salto y la
   pared se queda con el reparto que pintó el servidor, que ya es la imagen
   completa. */
.tesela::after{content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  opacity:0; background-color:#131311; background-size:150px 150px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='190' height='190' filter='url(%23r)'/%3E%3C/svg%3E")}
.tesela.saltando::after{animation:nieve .42s steps(3,end) 1}
.tesela.saltando .cara{opacity:.15}
/* Los saltos de posición son la mitad del efecto: sin ellos la nieve es una
   textura fija que se enciende, y la nieve de verdad hierve. */
@keyframes nieve{
  0%{opacity:1; background-position:0 0}
  35%{opacity:1; background-position:47% 63%}
  70%{opacity:.9; background-position:79% 21%}
  100%{opacity:0; background-position:23% 86%}
}

/* ── EL TUBO: barrido, viñeta, destello y vidrio ──────────────────────────
   Los cuatro juntos son lo que hace que esto se lea como una emisión y no como
   una foto dentro de un marco. Van por encima de los dos canales y por debajo
   del «al aire» y de la mosca: esos dos son del canal, no de la señal, y
   tienen que quedar legibles. */
.barrido{position:absolute; inset:0; z-index:5; pointer-events:none; overflow:hidden;
  border-radius:inherit;
  background:repeating-linear-gradient(180deg,
    rgba(0,0,0,.34) 0 1px, transparent 1px 3px);
  /* La viñeta del tubo: una cara abombada pierde luz contra el marco. Es lo
     que quita el aire de «pantalla plana con una foto puesta». */
  box-shadow:inset 0 0 calc(var(--tw) * .11) calc(var(--tw) * .022) rgba(0,0,0,.5)}
/* El brillo del vidrio, arriba a la izquierda, como el reflejo de una ventana
   en un tubo curvo. Muy tenue: pasado de ahí tapa la cara de quien salga. */
.barrido::before{content:""; position:absolute; inset:0;
  background:radial-gradient(110% 80% at 16% 4%,
    rgba(255,255,255,.11), rgba(255,255,255,.035) 30%, transparent 56%)}
/* El destello que rueda: la banda que sube por la imagen de un televisor mal
   sincronizado. Lenta y muy suave —a plena vista marea y no deja leer el
   subtítulo—. */
.barrido::after{content:""; position:absolute; left:0; right:0; height:26%;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.09),transparent);
  animation:rodar 7.5s linear infinite}
@keyframes rodar{from{top:-30%} to{top:110%}}

/* El parpadeo del tubo. Es lo más barato de todo y lo que más «antiguo» da:
   una lámpara de verdad nunca da una luz constante. En pasos, no continuo —una
   variación suave se lee como un fundido, y esto tiene que leerse como una
   inestabilidad—. */
.tubo{animation:parpadeo 5.5s steps(1,end) infinite}
@keyframes parpadeo{
  0%,32%,36%,71%,74%,100%{filter:brightness(1)}
  34%{filter:brightness(1.07)}
  72%{filter:brightness(.94)}
}

/* ── EL PUNTO ROJO Y LA MOSCA ─────────────────────────────────────────────
   Las dos señas por las que se reconoce una emisión en marcha. La mosca es el
   ISOTIPO DE LA MARCA: el logo no se fue de la portada, se puso donde un canal
   pone el suyo. */
.alaire{position:absolute; left:6%; top:5%; z-index:6; margin:0;
  display:flex; align-items:center; gap:.5em;
  font-size:clamp(8px,.85vw,11px); letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:#fff;
  /* La sombra no es adorno: debajo pasan diecisiete escenas y algunas son claras.
     Sin ella, «al aire» desaparece justo cuando entra el reparto. Vale lo
     mismo para la mosca. */
  text-shadow:0 1px 8px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.8)}
.alaire i{width:.6em; height:.6em; border-radius:50%; background:#E40000;
  box-shadow:0 0 8px rgba(228,0,0,.9); animation:latir 2.2s ease-in-out infinite}
@keyframes latir{0%,100%{opacity:1} 50%{opacity:.28}}
.mosca{position:absolute; right:5.5%; top:4.5%; z-index:6;
  width:9%; height:auto; opacity:.85;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.85))}

/* Sin movimiento no rueda el destello, no late el punto, no parpadea el tubo y
   los recuadros no saltan. El televisor se queda encendido y quieto con sus
   diecisiete señales puestas, que es la imagen completa: lo que se pierde es el
   movimiento, no lo que se cuenta. Elegir a quién mirar sigue funcionando.

   `tele.js` no arranca siquiera el relevo con esta preferencia, así que
   `.saltando` no llega a ponerse; esta regla es el cinturón por si algún día
   se pone desde otro sitio. */
@media(prefers-reduced-motion:reduce){
  .barrido::after,.alaire i,.tubo{animation:none}
  .tesela.saltando::after{animation:none}
  .tesela.saltando .cara{opacity:1}
}

/* ------ LO QUE SE DICE --------------------------------------------------- */
.dice{grid-column:1; grid-row:2}
.lema{grid-column:3; grid-row:2; justify-self:end; margin:0; text-align:right;
  font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  font-size:clamp(26px,3.1vw,50px); line-height:.98; letter-spacing:-.01em; color:var(--ink)}
.lema span{display:block}
.lema .realce{color:#fff}

.hero h1{margin:0; font-family:var(--font-display); font-weight:600; color:var(--ink);
  text-transform:uppercase; font-size:min(clamp(32px,4vw,64px), 7.6svh); line-height:1;
  letter-spacing:-.018em; position:relative}
.hero h1 em{font-style:normal; color:#fff}
/* Entrecomillado como en la referencia: no es el rótulo de un producto, es una
   frase dicha. Van en pseudoelementos para que no las lea nadie en voz alta y
   para poder sacar la de apertura fuera del margen. */
.hero h1::before{content:"\201C"; position:absolute; left:-.46em; top:-.1em;
  font-size:1.5em; line-height:1; color:rgba(14,14,12,.3)}
/* La de cierre cuelga del `<span>` que envuelve el final de la frase, y ese
   span no se parte: así la comilla no puede caerse sola a una línea nueva
   cuando la columna del titular se estrecha. Sin esto, el ancho del televisor
   y el del titular quedan atados —subir uno rompía el otro—. */
.hero h1 .cierre{white-space:nowrap}
.hero h1 .cierre::after{content:"\201E"; font-size:1.5em; line-height:0; color:rgba(14,14,12,.3);
  margin-left:.06em; vertical-align:-.12em}

.hero-cta{margin-top:clamp(14px,3svh,34px); display:flex; gap:12px; flex-wrap:wrap}

/* ------ EL FOCO ----------------------------------------------------------
   La luz de seguimiento, que es el gesto del oficio: en un escenario la
   atención se dirige con una luz, no con una flecha.

   `soft-light` en vez de una capa blanca a secas porque tiene que ACLARAR el
   naranja sin lavarlo: una capa opaca sobre el televisor lo apaga en vez de
   encenderla. Nace centrado, de modo que sin `foco.js` —o sin ratón, que es
   casi todo el móvil— lo que queda es una composición iluminada, no un
   hueco. */
.hero{--fx:50%; --fy:44%}
.foco{position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(30vw circle at var(--fx) var(--fy), rgba(255,255,255,.3), rgba(255,255,255,.08) 48%, transparent 72%);
  mix-blend-mode:soft-light; transition:background .45s linear}
.hero:hover .foco{transition:none}

/* ------ LA CINTA: el zócalo de la emisión --------------------------------
   Va a sangre al pie del hero. El titular dice el argumento en abstracto;
   esta línea lo dice con nombres que cualquiera reconoce.

   El bucle sin costura es la pista desplazándose media anchura: dentro hay
   dos tandas idénticas, así que al llegar al -50% la segunda está justo donde
   estaba la primera y se puede volver a cero sin salto. Cambiar el número de
   tandas en la plantilla rompe ese 50%. */
.cinta{margin-top:clamp(24px,5.5svh,78px); border-top:1px solid rgba(14,14,12,.2);
  padding:17px 0; overflow:hidden; position:relative; z-index:2;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.cinta-pista{display:flex; width:max-content; animation:cinta 54s linear infinite}
.cinta:hover .cinta-pista{animation-play-state:paused}
@keyframes cinta{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.cinta-tanda{display:flex; align-items:center; margin:0; padding:0; list-style:none}
.cinta-tanda li{display:flex; align-items:baseline; gap:9px; padding-right:38px; position:relative; white-space:nowrap}
.cinta-tanda li::after{content:""; position:absolute; right:17px; top:calc(50% - 2px);
  width:4px; height:4px; border-radius:50%; background:rgba(14,14,12,.34)}
.cinta-tanda b{font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--ink)}
.cinta-tanda span{font-size:13px; font-weight:600; color:rgba(14,14,12,.6)}
/* El remate va en cursiva y no en otro color: sobre naranja el texto va en
   tinta —el blanco no pasa contraste—, así que la diferencia la hace la
   letra, no la paleta. */
.cinta-tanda .remate{font-family:var(--font-display); font-style:italic; font-weight:500; font-size:18px; color:var(--ink)}

/* ------ EL HERO EN VENTANA BAJA ------------------------------------------
   Ancho de sobra y alto justo: el portátil de 1366x768, que deja 665px de
   hueco. Ahí el cartel pedía 724 y la cinta —el zócalo de la emisión, que va a
   sangre al pie— se salía por debajo del corte. La composición no cambia: se
   quedan las tres columnas, el televisor y los seis bloques. Lo que se recorta
   es AIRE —la guarda de arriba, los dos huecos de la rejilla, el pie del
   cartel y la separación de la cinta— y un punto de titular. Suman los 60px
   que faltaban, y el hero cabe en la pantalla con sitio de sobra.

   El corte en 800 y no en 665: entre esos dos valores está la mitad del parque
   de portátiles, y encima de 800 el cartel ya cabía sin ayuda. `min-width` de
   901 para no pisar el bloque de estrecho, que resuelve lo mismo por su
   cuenta y de otra manera. */
@media(min-width:901px) and (max-height:800px){
  .hero{padding-top:84px}
  .cartel{row-gap:clamp(8px,1.4svh,16px); padding-bottom:clamp(8px,1.2svh,14px)}
  .hero h1{font-size:min(clamp(32px,4vw,64px), 7.2svh)}
  .hero-cta{margin-top:clamp(12px,2svh,18px)}
  .cinta{margin-top:clamp(18px,3.4svh,30px)}
}

/* ------ EL HERO EN ESTRECHO ----------------------------------------------
   La composición de tres columnas no cabe, y apilar sus seis bloques tal cual
   daba un hero de PANTALLA Y MEDIA —1102 px sobre 840, y 1286 sobre 1020 en
   una tableta— con el televisor encogido a su mínimo en medio. Un hero que no
   cabe en una pantalla no es un hero: es el principio de un scroll.

   Así que aquí se recorta, y con criterio: en estrecho no hay composición de
   cartel que sostener —no hay esquinas, no hay centro, no hay vacío en medio—,
   así que los rótulos que sostenían ESA composición dejan de tener trabajo.

   Lo que queda son cuatro cosas, en el orden en que se leen: quiénes somos,
   qué decimos, el televisor y qué hacer. Nada más.

   Un solo corte, a 900. Antes había dos —uno para apilar y otro para
   recortar— y entre ellos quedaba la tableta, que es justo donde peor se veía:
   apilada del todo y sin recortar nada. */
@media(max-width:900px){

  /* El cartel de tres columnas no cabe: se apila en una sola. */
  .cartel{grid-template-columns:1fr; grid-template-rows:none; justify-items:start}
  .rot,.tele,.dice{grid-column:1; grid-row:auto}

  /* El hero mide una pantalla exacta y su contenido va centrado dentro. Sin el
     tope, la suma de los bloques manda y vuelve a crecer sola. El relleno de
     arriba es el alto de la barra fija y un respiro, ni un píxel más: aquí
     cada uno que sobre se lo quita al televisor. */
  .hero{min-height:100svh; padding:76px 0 0}
  .cartel{row-gap:clamp(10px,1.6vh,14px); align-content:center;
    padding-bottom:clamp(8px,1.2vh,16px)}

  /* SE VAN TRES BLOQUES. Los dos rótulos de abajo y el lema son la retícula
     del cartel: en una columna no sostienen nada y se leen como tres renglones
     más antes de llegar a lo que importa. Se van con `display:none` y no solo
     de la vista: apilados, un lector de pantalla los recorrería igual antes de
     llegar al titular.

     No se pierde nada que no esté dicho en otro sitio: «cine, televisión y
     medios audiovisuales» lo dice la cinta de abajo con nombres y años, y las
     dos frases de marca vuelven más abajo en el manifiesto. */
  .lema,.rot-bl,.rot-br{display:none}

  /* Y la firma con ellos. «Todos somos protagonistas.» remata bien debajo de
     los botones en el escritorio, pero aquí compite con el titular diciendo lo
     mismo —que nadie está solo— y cuesta cuarenta píxeles que necesita el
     televisor. La frase no se pierde del sitio: es una de las del manual y
     vuelve más abajo. */
  .firma{display:none}

  /* El orden. `display:contents` disuelve `.dice` para que el titular, los
     botones y la firma pasen a ser bloques del cartel por su cuenta: sin eso,
     el televisor no puede meterse ENTRE el titular y los botones, que es donde
     tiene que ir —primero se dice, luego se enseña, luego se pide—. */
  .dice{display:contents}
  .rot-tl{order:1}
  .hero h1{order:2}
  .tele{order:3}
  .hero-cta{order:4}
  .firma{order:5}

  /* El titular, más grande que el mínimo de la escala: 32 px en un móvil es un
     titular de sección, no la primera frase del sitio. */
  .hero h1{font-size:min(11.5vw,46px)}
  .hero h1::before{font-size:1.3em; left:-.4em}

  /* El rótulo de arriba, en una línea. Apilado en dos, con su regla encima,
     mide cincuenta píxeles para decir tres palabras. La regla se queda —es lo
     que lo ata al sistema— pero en su propio renglón. */
  .rot-tl{flex-direction:row; flex-wrap:wrap; gap:.4em; align-items:baseline}
  /* `margin-right:100%` es lo que empuja las palabras al renglón siguiente sin
     tocar el ancho de la regla: con `flex-basis:100%` la regla se estiraría de
     lado a lado y dejaría de ser una regla. */
  .rot-tl::before{margin-right:100%; margin-bottom:7px}

  /* EL TELEVISOR MANDA. Se sale de la columna de texto y llega al borde del
     cartel —va centrado, así que el desborde es simétrico—, y se para donde
     empiece a comerse la pantalla de alto: `58vh` cuenta el aparato completo,
     antena y patas incluidas.

     En longitudes y no en porcentaje, por lo dicho en el bloque de arriba. */
  .tele{--tw:min(100vw - 24px,46vh); justify-self:center;
    /* El desborde va por margen negativo y no ensanchando la columna: si el
       televisor engorda su carril, el titular se estira con él y se come los
       30 px de aire del `.wrap`. Con el margen, la columna de texto se queda
       donde está y solo se sale el aparato. */
    margin-inline:-30px}

  /* Los mandos se pasan DEBAJO de la pantalla. De lado se llevan un 15 % del
     ancho, que en un móvil son los píxeles que le faltan a la emisión para
     poder mirarse; abajo cuestan una tira y el aparato sigue siendo un
     televisor y no un monitor. */
  .caja{flex-direction:column; gap:calc(var(--tw) * .022)}
  /* El `flex:1` del tubo era para la fila: en columna se come todo el alto y
     deja los mandos en cero. Aquí manda su proporción, que es la de siempre. */
  .tubo{flex:none; width:100%}
  .mandos{width:100%; flex-direction:row; align-items:center;
    gap:calc(var(--tw) * .025); padding-top:0}
  .perilla{width:auto; height:calc(var(--tw) * .062)}
  .rejilla{order:-1; flex:1; width:auto; height:calc(var(--tw) * .05);
    background:repeating-linear-gradient(90deg,
      rgba(255,255,255,.16) 0 2px, transparent 2px 6px)}

  /* La pared, de seis columnas a CUATRO. A seis columnas en un móvil cada
     señal mide sesenta píxeles y dentro no se reconoce una cara: la pared deja
     de contar gente y pasa a ser una textura.

     ⚠ AQUÍ HAY QUE REHACER LA CUENTA OTRA VEZ, y con cuatro columnas no da la
     misma respuesta que arriba. Con las dieciséis de antes salían cuatro filas
     exactas y bastaba con igualar todos los recuadros; con DIECISIETE eso deja
     TRES CELDAS NEGRAS en la última fila —17 no es múltiplo de 4—, que es
     justo el hueco que este bloque existe para evitar.

     La salida es dejar UNO grande: 16 sueltas + 1 grande (4 celdas) = 20, o
     sea cinco filas exactas. Se queda el 3, que es el que ya manda arriba, así
     que el recuadro destacado es el mismo en las dos rejillas y la pieza no
     cambia de protagonista al girar el teléfono. Los otros dos se sueltan. */
  .mosaico{grid-template-columns:repeat(4,1fr)}
  .mosaico .tesela:is(:nth-child(8),:nth-child(12)){
    grid-column:auto; grid-row:auto}

  /* Los dos botones, en una fila y a partes iguales. Apilados se llevaban 120
     px de alto —más que el titular— y dos pastillas de ancho completo, una
     encima de otra, se leen como un formulario y no como una portada. */
  .hero-cta{width:100%; flex-wrap:nowrap; gap:10px;
    /* En el escritorio este margen separa los botones del titular; aquí, con
       `.dice` disuelto, se suma al hueco de la rejilla y abre un vacío de
       cuarenta píxeles justo debajo del televisor. */
    margin-top:0}
  .hero-cta .btn{flex:1; justify-content:center; padding-left:14px; padding-right:14px;
    font-size:13.5px; white-space:nowrap}

  /* El subtítulo y las barras, más discretos: en una pantalla de este tamaño
     se comen la emisión. */
  .subtitulo{bottom:13%; font-size:clamp(11px,3.1vw,15px)}
  .barras{height:6%}
}

/* En los móviles cortos —un SE, cualquier pantalla de 568 de alto— la suma
   vuelve a pasarse de una pantalla. Lo que se recorta es lo mismo de siempre:
   el respiro de arriba y el tope de alto del televisor. */
/* El `max-height` va SIEMPRE acompañado del `max-width`: suelto se colaría en
   un escritorio con la ventana baja, donde el televisor no está apilado y un
   `100vw` de ancho lo mandaría de lado a lado de la pantalla. */
@media(max-width:400px),(max-width:900px) and (max-height:620px){
  .hero{padding-top:68px}
  .tele{--tw:min(100vw - 24px,42vh)}
}

@media(max-width:520px){
  .firma{gap:12px}
  .cinta-tanda b{font-size:15px}
  .cinta-tanda .remate{font-size:16px}
}

/* Sin movimiento: se apagan el barrido, el latido y la cinta. La cinta
   quieta no puede quedarse cortada a media palabra, así que en vez de una
   pista que se desplaza pasa a ser una lista que se envuelve —y la segunda
   tanda, que solo existía para el bucle, sobra. */
@media(prefers-reduced-motion:reduce){
  .cinta{-webkit-mask-image:none; mask-image:none}
  .cinta-pista{animation:none; width:auto; flex-wrap:wrap}
  .cinta-tanda{flex-wrap:wrap}
  .cinta-tanda[aria-hidden="true"]{display:none}
  .cinta-tanda li{padding-bottom:4px}
}

/* ====== MANIFIESTO ====== */

/* Esta sección va centrada y es la única de la portada que lo está. No es un
   descuido de la retícula: es el único sitio donde la sociedad habla en primera
   persona, y centrada se lee como una declaración y no como un párrafo más.
   Alineada a la izquierda la frase se quedaba pegada al borde de una banda
   negra a sangre y dejaba dos tercios vacíos en pantalla ancha.

   El eje lo pone `.wrap`, y las tres piezas se cuelgan de él: al rótulo hay que
   decirle `justify-content` porque es un flex —lleva la rayita en `::before`—,
   y a la frase `margin-inline` porque su `max-width:20ch` es lo que la parte en
   cuatro líneas y hay que centrar esa caja, no solo su texto. El rótulo y la
   firma sueltan ese tope, que era del párrafo grande y a ellos solo les partía
   la línea sin motivo. */
.manif{background:var(--ink); color:#fff; padding:96px 0; overflow:hidden}
.manif .spiral{right:-120px; top:-120px; width:420px; height:420px; opacity:.12}
.manif .spiral path{stroke:var(--accent)}
.manif .wrap{position:relative; z-index:2; text-align:center}
.manif .lab{color:rgba(255,255,255,.7); justify-content:center; max-width:none}
.manif p{font-family:var(--font-display); font-weight:400; font-size:clamp(26px,3.6vw,46px); line-height:1.18; letter-spacing:-.01em; margin:0; max-width:20ch}
.manif .frase{margin-inline:auto}
.manif p em{font-style:italic; color:var(--accent)}
.manif .sig{margin-top:30px; font-size:14px; color:#9b9a94; font-weight:500; max-width:none}

/* La frase se enciende palabra a palabra con el scroll.
   Mismo reparto que la sección de homólogas: `manifiesto.js` traduce el paso
   de la frase por la pantalla a `--p` (0 a 1) y el CSS decide qué hacer con
   ella. Aquí la cuenta es `--p * --n - --i`: cuánto avance le ha llegado ya a
   ESTA palabra. Negativo, todavía no le toca; pasado de 1, ya está encendida.

   El 1.5 es lo rápido que enciende cada una —a menor número, más palabras a
   medio encender a la vez y más suave el barrido—. El .16 es el suelo: la
   palabra apagada se lee igual, solo que en gris. Nunca se esconde: es la
   frase de la marca y tiene que poder leerse entera de un vistazo aunque
   alguien no llegue a hacer scroll.

   `--p:1` de partida —el valor si no hay JavaScript— deja a todas por encima
   de 1 y por tanto encendidas. */
.manif .frase{--p:1}
.manif .pal{opacity:clamp(.16, calc((var(--p) * var(--n) - var(--i)) * 1.5 + .16), 1)}
@media(prefers-reduced-motion:reduce){.manif .pal{opacity:1}}

/* Las tarjetas sin destino de esta página. `.sin-destino` la declara site.css;
   lo que va aquí es desactivar el gesto de cada componente. */
.do-card.sin-destino:hover{transform:none; border-color:var(--line); box-shadow:none}
.doc.sin-destino:hover{transform:none; border-color:var(--line); box-shadow:none}
.doc.sin-destino .doc-dl{color:var(--g2); font-weight:500}

/* ====== LO QUE HACEMOS ====== */
.do{background:var(--white)}
.do-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px}
.do-card{border-radius:20px; overflow:hidden; background:var(--white); border:1px solid var(--line); display:flex; flex-direction:column; transition:transform .5s var(--ease), box-shadow .5s, border-color .3s}
.do-card:hover{transform:translateY(-6px); border-color:transparent; box-shadow:0 40px 70px -34px rgba(255,81,21,.55)}
.do-photo{position:relative; aspect-ratio:16/11}
/* Las tres fotos de esta banda van en blanco y negro, no en duotono. El
   naranja aquí se decía tres veces seguidas y le restaba fuerza al que sí
   manda en la tarjeta —el `do-tag` y la sombra del hover—.

   El `filter` va sobre la caja entera a propósito: así apaga también el velo
   de color de `.duo`, que sigue oscureciendo la foto —y sosteniendo el
   contraste del índice— pero ya en gris. El blanco del índice no cambia al
   desaturarse, y el gesto de hover de `.duo` (el velo que se aclara) se
   conserva tal cual.

   Se pone aquí y no en `.duo` (site.css) porque es una decisión de esta
   sección, no del duotono de la marca: el resto del sitio lo sigue usando en
   naranja. Y va en el CSS y no en la URL de la foto, para que las
   definitivas entren en color y salgan igual de grises. */
.do-photo{filter:grayscale(1)}
.do-photo .idx{position:absolute; left:20px; bottom:12px; z-index:2; font-family:var(--font-display); font-weight:700; font-size:44px; line-height:1; color:#fff; letter-spacing:-.02em}
.do-photo .idx small{display:block; font-family:var(--font-ui); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; opacity:.85; margin-bottom:4px}
.do-body{padding:24px 26px 26px; display:flex; flex-direction:column; flex:1}
.do-body h3{font-family:var(--font-display); font-weight:500; font-size:26px; margin:0 0 8px}
.do-body p{font-size:15px; color:#3a3a37; margin:0 0 20px}
.do-tag{margin-top:auto; font-size:13px; font-weight:600; color:var(--orange-700); display:inline-flex; align-items:center; gap:7px}
.do-tag::before{content:""; width:18px; height:1px; background:var(--accent)}
@media(max-width:820px){.do-grid{grid-template-columns:1fr; max-width:460px}}

/* ====== LAS CIFRAS ======
   Bajaron del hero, donde chocaban con el pilar del manual —«nunca los
   haremos sentir como un número»—. Aquí ya no son lo primero que se lee:
   llegan después de «Lo que hacemos», con su antetítulo y su contexto.

   En tinta y no en claro porque tienen que leerse como una parada y no como
   otra banda de tarjetas: es el único respiro oscuro entre el manifiesto y
   el pie. */
.cifras{background:var(--ink); color:#fff}
.cifras .lab{color:rgba(255,255,255,.7)}
.cifras h2{color:#fff}
.cifras-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:56px}
.cifra{padding-top:26px; border-top:1px solid rgba(255,255,255,.16)}
.cifra b{display:block; font-family:var(--font-display); font-weight:500;
  font-size:clamp(44px,5.4vw,72px); line-height:1; letter-spacing:-.02em; color:var(--accent)}
.cifra span{display:block; margin-top:12px; font-size:14px; font-weight:600; color:#cfccc4}
/* El pie es el pilar del manual dicho en voz alta, para que la banda recuerde
   de qué está hecha cada cifra. Va en cursiva de display, como la firma del
   hero: las dos son la voz de la marca hablando de sí misma. */
.cifras-pie{margin:48px 0 0; font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(18px,2.2vw,26px); line-height:1.3; color:#fff; max-width:26ch}
@media(max-width:820px){.cifras-grid{grid-template-columns:1fr; gap:0} .cifra{padding:22px 0}}

/* ====== NOTICIAS (home) ====== */
.news{background:var(--paper)}
.news-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:26px; align-items:start}
.feat{border-radius:20px; overflow:hidden; display:flex; flex-direction:column; transition:transform .6s var(--ease); color:#fff}
.feat:hover{transform:translateY(-5px)}
.feat .ph{aspect-ratio:16/9; background-size:cover; background-position:center; background-color:#e9e7e2}
.feat .body{padding:28px 30px 32px; background:var(--ink)}
.feat .date{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#9b9a92; margin-bottom:12px}
.feat h3{font-family:var(--font-display); font-weight:500; font-size:clamp(22px,2.4vw,29px); line-height:1.14; margin:0 0 10px}
.feat p{color:#cfccc4; font-size:15px; margin:0; max-width:46ch}
.news-list{display:flex; flex-direction:column}
.ni{padding:18px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:132px 1fr; gap:16px; align-items:center; transition:padding-left .35s var(--ease)}
.ni:first-child{border-top:none; padding-top:0}
.ni:hover{padding-left:8px}
.ni .thumb{width:132px; aspect-ratio:16/9; border-radius:10px; background-size:cover; background-position:center; background-color:#e9e7e2}
.ni h4{font-family:var(--font-display); font-weight:500; font-size:17px; line-height:1.22; margin:0 0 3px}
.ni .d{font-size:12px; color:var(--accent); font-weight:600; letter-spacing:.04em}
@media(max-width:820px){.news-grid{grid-template-columns:1fr}}

/* ====== LA MARCA VIVA ====== */
.viva{background:var(--white)}
.viva-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:16px; margin-top:52px}
.tile{border-radius:16px; overflow:hidden; position:relative; display:flex; padding:22px; transition:transform .5s var(--ease)}
.tile:hover{transform:translateY(-4px)}
.tile::after{content:""; position:absolute; top:12px; right:12px; width:22px; height:22px; z-index:3; opacity:0; transition:opacity .3s var(--ease); background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><rect x='3' y='3' width='18' height='18' rx='5'/><circle cx='12' cy='12' r='4.5'/><circle cx='17.2' cy='6.8' r='1.2' fill='white' stroke='none'/></svg>") center/contain no-repeat; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.tile:hover::after{opacity:.95}
.tile.big{grid-column:span 2; grid-row:span 2}
.tile.tall{grid-row:span 2}
.tile-photo{align-items:flex-end}
.tile-photo .h{color:#fff; font-family:var(--font-display); font-weight:600; font-size:20px; line-height:1.1}
.tile-color{flex-direction:column; justify-content:space-between}
.tile-color .top{font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600}
.tile-color .phrase{font-family:var(--font-display); font-weight:500; font-size:clamp(20px,2.2vw,30px); line-height:1.08}
.t-orange{background:var(--orange); color:var(--ink)} .t-orange .top{color:rgba(14,14,12,.6)}
.t-ink{background:var(--ink); color:#fff} .t-ink .top{color:#9b9a94}
.t-paper{background:var(--orange-100); color:var(--ink)} .t-paper .top{color:var(--g2)}
.tile .sp-mini{position:absolute; right:-24px; bottom:-24px; width:120px; height:120px; opacity:.18}
.t-orange .sp-mini path{stroke:var(--ink)} .t-ink .sp-mini path{stroke:var(--accent)} .t-paper .sp-mini path{stroke:var(--accent)}
.viva-foot{margin-top:26px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px}
.handle{font-family:var(--font-display); font-weight:600; font-size:17px}
@media(max-width:820px){.viva-grid{grid-template-columns:repeat(2,1fr)} .tile.big{grid-column:span 2}}
@media(max-width:520px){.viva-grid{grid-template-columns:1fr; grid-auto-rows:170px} .tile.big{grid-column:span 1; grid-row:span 1}}

/* ====== AFILIACIÓN ====== */
.afil{background:linear-gradient(180deg,var(--orange-50),#fff)}
.afil-top{display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center}
.afil-badge{display:inline-flex; align-items:center; gap:8px; background:var(--orange-100); color:var(--orange-700); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:7px 14px; border-radius:40px; margin-bottom:20px}
.afil h2{margin:0 0 16px}
.afil-lead{font-size:19px; color:#2b2b28; max-width:44ch; margin:0 0 28px}
.afil-cta{display:flex; gap:14px; flex-wrap:wrap}
.afil-art{position:relative}
.afil-photo{border-radius:22px; overflow:hidden; aspect-ratio:5/6; box-shadow:0 40px 80px -34px rgba(0,0,0,.45)}
.afil-note{position:absolute; right:-16px; bottom:24px; background:var(--ink); color:#fff; border-radius:16px; padding:16px 20px; max-width:240px; box-shadow:0 24px 50px -18px rgba(0,0,0,.5)}
.afil-note b{font-family:var(--font-display); font-weight:500; font-size:17px; display:block; line-height:1.18}
.afil-note small{display:block; margin-top:6px; font-size:12px; color:#cfccc4}
.afil-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:60px}
.afil-step{background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px 28px; position:relative; transition:transform .5s var(--ease), box-shadow .5s}
.afil-step:hover{transform:translateY(-5px); box-shadow:0 34px 60px -34px rgba(255,81,21,.4)}
.afil-step .n{font-family:var(--font-display); font-weight:700; font-size:38px; color:var(--accent); line-height:1; margin-bottom:16px}
.afil-step h3{font-family:var(--font-display); font-weight:500; font-size:22px; margin:0 0 8px}
.afil-step p{font-size:15px; color:#444; margin:0}
@media(max-width:900px){.afil-top{grid-template-columns:1fr; gap:40px} .afil-art{max-width:420px} .afil-steps{grid-template-columns:1fr; max-width:460px}}

/* ====== BIENESTAR ====== */
.bien{background:var(--accent); color:#fff; overflow:hidden}
.bien-in{display:grid; grid-template-columns:1fr 1fr; align-items:stretch}
.bien-copy{padding:80px clamp(30px,5vw,70px); position:relative; z-index:2}
.bien .spiral{left:-90px; bottom:-90px; width:300px; height:300px; opacity:.2}
.bien .spiral path{stroke:#fff}
.bien .lab{color:rgba(255,255,255,.85)} .bien .lab::before{background:#fff}
.bien h2{color:#fff} .bien h2 em{color:var(--ink)}
.bien p{font-size:18px; color:rgba(14,14,12,.86); max-width:42ch; margin:18px 0 0; font-weight:500}
.bien .btn-white{margin-top:32px}
.bien-photo{min-height:420px}
@media(max-width:820px){.bien-in{grid-template-columns:1fr} .bien-copy{padding:60px 30px} .bien-photo{min-height:280px}}

/* ====== TRANSPARENCIA / DESCARGAS ====== */
.trans{background:var(--white)}
.docs{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:52px}
.doc{border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#fff; display:flex; flex-direction:column; transition:border-color .3s, transform .45s var(--ease), box-shadow .45s}
.doc:hover{border-color:transparent; transform:translateY(-5px); box-shadow:0 34px 60px -34px rgba(255,81,21,.5)}
.doc-cover{height:134px; background:linear-gradient(135deg,var(--orange-100),var(--orange-50)); display:flex; align-items:center; justify-content:center}
.page{width:76px; height:96px; background:#fff; border-radius:6px; box-shadow:0 16px 30px -14px rgba(14,14,12,.35); position:relative; padding:13px 11px; display:flex; flex-direction:column; gap:6px}
.page::before{content:""; position:absolute; top:0; right:0; border-width:0 15px 15px 0; border-style:solid; border-color:transparent var(--orange-100) transparent transparent; border-radius:0 6px 0 0}
.page .ln{height:4px; border-radius:2px; background:var(--orange-100)}
.page .ln.s{width:55%}
.page .pt{position:absolute; bottom:9px; left:11px; font-family:var(--font-display); font-weight:700; font-size:10px; letter-spacing:.06em; color:var(--orange-700)}
.doc-body{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1}
.doc-cat{font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--orange-700); margin-bottom:8px}
.doc b{font-family:var(--font-display); font-weight:600; font-size:19px; line-height:1.2; display:block; margin-bottom:5px}
.doc .doc-meta{font-size:13px; color:var(--g2)}
.doc .doc-dl{margin-top:18px; display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--ink)}
.doc .doc-dl .arr{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; font-size:13px; transition:transform .3s var(--ease)}
.doc:hover .doc-dl .arr{transform:translateY(3px)}
.docs-foot{margin-top:26px}
@media(max-width:900px){.docs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.docs{grid-template-columns:1fr}}

/* ====== HOMÓLOGAS: EL MUNDO ======
   La sección dice un dato —26 países— y lo enseña de dos maneras a la vez: el
   mapa, que es la imagen, y las fichas con bandera y nombre, que es lo que se
   lee. Las dos se apuntan entre sí: al pasar por una ficha se enciende su hilo
   y su punto, y al revés.

   Sustituye al campo radial de siete tarjetas que salían despedidas del
   centro. Aquello era una animación buena sosteniendo nombres inventados; el
   porqué del cambio está en `config/homologas.php`.

   El mapa es un SVG de 120 × 46 unidades —una por cada 3° de longitud y de
   latitud— con tres capas en el mismo sistema de coordenadas: el mundo en
   trama, los hilos y los puntos. Nada de esto se posiciona a mano: lo calcula
   `App\Support\Homologas`.

   ⚠ El grosor de todo lo que se dibuja va en unidades del lienzo, no en
   píxeles: `vector-effect:non-scaling-stroke` NO se usa a propósito. Así el
   dibujo entero encoge en bloque con la pantalla y en un teléfono no queda un
   mundo diminuto con hilos de trazo grueso. */
.mundo{
  background:var(--paper); color:var(--ink);
  padding:110px 0 120px;
  overflow:hidden;
}

/* ====== LA FRASE ====== */
.mundo-copy{max-width:760px}
.mundo-copy .l1{font-size:17px; font-weight:600; color:rgba(14,14,12,.72); margin:14px 0 6px}
.mundo-copy .l2{font-family:var(--font-display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(44px,6.4vw,92px); line-height:.98; margin:0; color:var(--ink)}
.mundo-copy .l2 b{font-weight:600; font-style:italic; color:var(--accent)}
.mundo-copy .l3{font-size:16.5px; font-weight:500; line-height:1.6; color:rgba(14,14,12,.75);
  margin:16px 0 0; max-width:56ch}

/* ====== EL MAPA ====== */
.mundo-mapa{position:relative; margin:44px 0 0}
.mundo-mapa svg{display:block; width:100%; height:auto; overflow:visible}

/* El mundo, en la trama de la marca. Un solo trazado con 1.721 subtrazados de
   largo cero: cada uno se ve porque el remate es redondo. Sin
   `stroke-linecap:round` la sección se queda sin mapa —no es un detalle de
   estilo, es lo único que hace que un punto exista—. */
.mtierra{
  fill:none; stroke:#c9c9be; stroke-width:.58; stroke-linecap:round;
  opacity:.9;
}

/* ====== LOS HILOS ======
   El acuerdo es de ida y vuelta, así que el hilo se dibuja entero desde
   Bogotá. En reposo son casi invisibles: veintiséis líneas naranjas a plena
   tinta convierten el mapa en un ovillo y tapan la trama. */
.mhilo{
  fill:none; stroke:var(--accent); stroke-width:.16; stroke-linecap:round;
  opacity:.34;
  transition:opacity .25s, stroke-width .25s;
}

/* Bogotá: de donde sale el mandato. No lleva bandera —no es un acuerdo— y por
   eso se distingue por forma y no por color. */
.morigen{fill:var(--ink)}
.mlatido{
  fill:none; stroke:var(--accent); stroke-width:.22; transform-box:fill-box;
  transform-origin:center; animation:mlatir 3.4s ease-out infinite;
}
@keyframes mlatir{
  0%   {opacity:.85; scale:1}
  70%  {opacity:0;   scale:4.2}
  100% {opacity:0;   scale:4.2}
}

/* Cada país. El aro blanco lo despega de la trama cuando cae sobre tierra:
   sin él, un punto naranja de este tamaño encima de puntos grises se lee como
   una mancha y no como una chincheta. */
.mpunto{
  fill:var(--accent); stroke:var(--paper); stroke-width:.2;
  /* El tamaño se cambia con `scale` y no con el atributo `r`: `r` como
     propiedad de CSS es de las geometrías de SVG2 y no la tienen todos los
     navegadores. `transform-box:fill-box` es obligatorio con ella —sin eso el
     origen es la esquina del lienzo y el punto se va a otro continente al
     crecer—. */
  transform-box:fill-box; transform-origin:center;
  transition:scale .25s var(--ease), fill .25s;
}

/* ====== EL FOCO ======
   `data-activo` lo pone orbe.js con el ISO del país señalado. Todo lo demás
   baja de intensidad en vez de que el señalado suba: subir uno entre
   veintiséis no se ve; apagar veinticinco, sí. */
.mundo[data-activo] .mhilo{opacity:.08}
.mundo[data-activo] .mpunto{fill:#c9c9be}
.mundo[data-activo] .mhilo.on{opacity:1; stroke-width:.3}
.mundo[data-activo] .mpunto.on{fill:var(--accent); scale:1.75}
.mundo[data-activo] .mundo-chip:not(.on){opacity:.4}

.mundo-piemapa{
  margin:14px 0 0; font-size:13px; line-height:1.5; color:var(--g2);
  max-width:52ch;
}

/* ====== LAS FICHAS ======
   Los grupos fluyen en vez de ir en columnas fijas: son 12, 11, 2 y 1, y
   cuatro columnas iguales dejarían dos casi vacías al lado de dos apretadas.
   Así América y Europa se llevan su fila y África y Asia comparten la última. */
.mundo-lista{
  display:flex; flex-wrap:wrap; gap:34px 52px; margin:54px 0 0;
  padding:34px 0 0; border-top:1px solid var(--line);
}
.mundo-grupo{flex:1 1 auto; min-width:0}
.mundo-region{
  font-family:var(--font-ui); font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--g2); margin:0 0 16px;
  display:flex; align-items:center; gap:8px;
}
.mundo-region span{
  display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px;
  border-radius:999px; background:rgba(14,14,12,.06); color:var(--ink);
  font-size:10.5px; letter-spacing:0;
}
.mundo-chips{display:flex; flex-wrap:wrap; gap:22px 20px; margin:0; padding:0; list-style:none}
.mundo-chip{
  width:76px; display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center; transition:opacity .25s, transform .25s var(--ease);
}
/* La bandera va en su proporción real (4:3) y con el borde sutil que necesitan
   las que son blancas por un lado —Canadá, Perú, Austria— para no quedar
   flotando sin contorno sobre el papel. */
.mundo-chip img{
  width:44px; height:33px; border-radius:6px; object-fit:cover;
  box-shadow:0 0 0 1px rgba(14,14,12,.09), 0 8px 18px -12px rgba(0,0,0,.55);
  transition:transform .25s var(--ease), box-shadow .25s;
}
.mundo-chip b{font-size:12px; font-weight:600; line-height:1.25; color:var(--ink)}
.mundo-chip small{font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--g2)}
.mundo-chip.on{transform:translateY(-3px)}
.mundo-chip.on img{transform:scale(1.08); box-shadow:0 0 0 2px var(--accent), 0 12px 22px -12px rgba(0,0,0,.5)}

/* ⚠ El aviso de que ninguna sociedad está nombrada. Es contenido, no adorno:
   mientras esté, la sección está diciendo que su lista está a medias. Se va
   solo en cuanto un país estrene `sociedad` en el config. */
.mundo-aviso{
  margin:34px 0 0; padding:14px 18px; border-left:3px solid var(--accent);
  background:rgba(255,81,21,.05); border-radius:0 10px 10px 0;
  font-size:13.5px; line-height:1.55; color:rgba(14,14,12,.75); max-width:70ch;
}

@media(max-width:900px){
  .mundo{padding:88px 0 96px}
  .mundo-lista{gap:30px 40px}
  .mundo-chip{width:68px}
  .mundo-chip img{width:38px; height:28.5px}
}
/* En un teléfono el mapa se sigue viendo entero —no se recorta ni se gira—:
   con 26 puntos repartidos por el planeta, cortar es perder países. Lo que
   engorda es el trazo, que a este tamaño se rompería. */
@media(max-width:560px){
  .mundo{padding:72px 0 80px}
  .mtierra{stroke-width:.7}
  .mhilo{stroke-width:.22}
  .mpunto{scale:1.3; stroke-width:.26}
  .mundo-chips{gap:18px 14px}
  .mundo-chip{width:62px}
  .mundo-chip b{font-size:11px}
}

@media(prefers-reduced-motion:reduce){
  .mlatido{animation:none; opacity:0}
  .mhilo, .mpunto, .mundo-chip, .mundo-chip img{transition:none}
}

/* ====== CENTRO CAMALEÓN ====== */
.centro{background:var(--ink); color:#fff; overflow:hidden}
.centro .lab{color:rgba(255,255,255,.75)}
.centro-banner{position:relative; border-radius:22px; overflow:hidden; min-height:380px; display:flex; align-items:flex-end; background-size:cover; background-position:center; background-color:#0a0a08}
.centro-banner::after{content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(14,14,12,.88) 0%, rgba(14,14,12,.8) 34%, rgba(14,14,12,.35) 62%, rgba(14,14,12,0) 82%),
    linear-gradient(180deg, rgba(14,14,12,.18) 0%, rgba(14,14,12,.1) 45%, rgba(14,14,12,.42) 100%)}
.centro-banner .cb-in{position:relative; z-index:2; padding:clamp(30px,4vw,50px); max-width:660px}
.centro-banner h2{color:#fff; margin:8px 0 12px}
.centro-banner h2 em{color:var(--accent)}
.centro-banner p{color:rgba(255,255,255,.86); font-size:17px; line-height:1.55; margin:0 0 22px; max-width:52ch}
.centro-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:20px}
.act{border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:24px 22px; background:rgba(255,255,255,.03); transition:transform .45s var(--ease), border-color .3s, background .3s}
.act:hover{transform:translateY(-5px); border-color:var(--accent); background:rgba(255,81,21,.07)}
.act .aico{width:44px; height:44px; border-radius:12px; background:rgba(255,81,21,.16); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:16px}
.act .aico svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.act h4{font-family:var(--font-display); font-weight:500; font-size:18px; margin:0 0 6px; color:#fff}
.act p{font-size:14px; color:#b7b5ad; margin:0; line-height:1.45}
/* En estrecho el texto deja de vivir en una columna a la izquierda y ocupa el
   ancho entero, así que el velo lateral ya no lo cubre: se cambia por uno
   parejo, más suave arriba para que la sala siga viéndose. */
@media(max-width:900px){.centro-grid{grid-template-columns:repeat(2,1fr)}
  .centro-banner::after{background:linear-gradient(180deg, rgba(14,14,12,.55) 0%, rgba(14,14,12,.74) 100%)}}
@media(max-width:520px){.centro-grid{grid-template-columns:1fr} .centro-banner{min-height:320px}}

/* ====== CTA ====== */
.cta{background:var(--ink); color:#fff; text-align:center; overflow:hidden}
.cta .spiral{left:50%; top:-140px; width:320px; height:320px; opacity:.1; transform:translateX(-50%) rotate(var(--spin))}
.cta .spiral path{stroke:var(--accent)}
.cta .wrap{position:relative; z-index:2}
.cta h2{color:#fff; margin-bottom:16px} .cta h2 em{color:var(--accent)}
.cta p{color:rgba(255,255,255,.8); max-width:48ch; margin:0 auto 36px}