/* =========================================================================
   STRIMS — sistema visual
   Sin frameworks. Animaciones nativas ligadas al scroll (animation-timeline),
   una variable animable para el estado de las fichas, :has() para el elenco.

   Identidad: el logo es un sombrero amarillo con un botón de play en la cinta.
   Eso manda: formas anchas y redondeadas, el amarillo como superficie (no como
   hilito de 1px), y el triángulo de play como marca repetida.
   ========================================================================= */

@property --abierta { syntax: '<number>'; initial-value: 0; inherits: true; }

:root{
  --negro:      #0A0A0A;
  --sup-2:      #201E16;

  --oro:        #FED513;
  --oro-claro:  #FFE45C;
  --oro-hondo:  #9C7C08;

  --hueso:      #F7F6F2;
  --gris:       #B0ADA3;          /* 8,9:1 sobre negro — se lee sin forzar */
  --gris-2:     #85827A;          /* 5,4:1 — para etiquetas chicas */

  --borde-max:  1440px;
  --gutter:     clamp(20px, 5vw, 72px);

  --r-xl:  36px;
  --r-lg:  26px;
  --r-md:  18px;
  --r-pill: 999px;

  --t-rapido:   .28s cubic-bezier(.22,.61,.36,1);
  --t-medio:    .55s cubic-bezier(.22,.61,.36,1);

  --fuente: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
            'Segoe UI Variable Display', 'Segoe UI', Inter, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--negro);
  color: var(--hueso);
  font-family: var(--fuente);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }

/* =========================================================================
   El cursor — el triángulo de play de la cinta del sombrero.
   Va en PNG y no en SVG porque Safari no acepta cursores vectoriales.
   La primera declaración es el respaldo; la segunda agrega la versión 2x para
   pantallas retina, y el navegador que no entienda image-set() se queda con la
   primera. Los números después de la url() son la punta del cursor.
   ========================================================================= */
body{
  cursor: url(../img/cursor.png) 5 3, auto;
  cursor: image-set(url(../img/cursor.png) 1x, url(../img/cursor-2x.png) 2x) 5 3, auto;
}

/* Sobre lo clickeable, el mismo triángulo un poco más grande. El cambio de
   tamaño alcanza como señal y no agrega una forma nueva.
   Va únicamente en lo clickeable — ponerlo sobre las miniaturas prometería un
   click que no existe. */
a, button, .persona, [role="button"]{
  cursor: url(../img/cursor-activo.png) 5 1, pointer;
  cursor: image-set(url(../img/cursor-activo.png) 1x, url(../img/cursor-activo-2x.png) 2x) 5 1, pointer;
}

/* en pantallas táctiles no hay puntero: no tiene sentido pedir los archivos */
@media (hover: none) {
  body, a, button, .persona{ cursor: auto; }
}
::selection{ background: var(--oro); color: #0A0A0A; }

/* =========================================================================
   Fondo — LA SEÑAL

   Reemplaza la grilla de líneas de 64px. La grilla es el fondo por defecto de
   toda landing de tecnología: no tiene origen, no tiene dirección y sirve para
   cualquier empresa. Esto es lo contrario en las tres cosas.

   ORIGEN:    todo sale de un punto que cae sobre el sombrero del logo.
   DIRECCIÓN: cerca del emisor las crestas son doradas y densas; lejos son
              blancas, más separadas y más apagadas, hasta desaparecer.
   CURVATURA: elipses de 1,615:1 — anchas y achatadas, la misma familia de
              formas que el ala del sombrero. Ni un solo ángulo recto.

   Se lee como una publicación que se propaga, que es lo que Strims vende.

   Tres números sostienen la geometría; no conviene tocar uno solo:
     · emisor        50% 30vh    cae sobre el sombrero en cualquier alto
     · elipse base   168 × 104   la relación 1,615:1
     · período       92px sobre el rayo horizontal (56,95px en vertical)

   Las crestas BLANCAS caen en 46, 138, 230… y las DORADAS del ::after en
   0, 92, 184…: exactamente a mitad de camino. Nunca se pisan, así que los
   alfas no se suman (el pico real es 0,051, el mismo que tenía la grilla), y
   al estar en relación 2:1 bajo la misma transformación no pueden batir entre
   sí — no hay muaré posible.

   El selector cubre .grilla además de .fondo para que los bundles ya armados
   (entrega/index.html, work/strims-bundle.html), que todavía dicen "grilla",
   sigan funcionando sin rearmarlos.
   ========================================================================= */
.grilla,
.fondo{
  position: fixed;
  inset: 0 0 auto 0;
  height: 88vh;          /* la máscara ya llega a cero en 83vh: más abajo sólo
                            estaríamos rasterizando transparencia, y así la
                            deriva de -11vh nunca deja el borde a la vista */
  overflow: hidden;      /* el ::after mide 720px de ancho; en un teléfono
                            sobresale y algún navegador lo suma al scroll */
  pointer-events: none;
  z-index: 0;

  /* Cada cresta es una elipse de 12px de espesor horizontal (7,4px vertical)
     con rampas de 4px y 2px: no hay ningún borde duro que pueda aliasear, y la
     rampa avanza 1,5–3 niveles por píxel, así que cada escalón de cuantización
     mide menos de un píxel y no aparece bandeado ni en un panel P3. */
  background-image:
    repeating-radial-gradient(ellipse 168px 104px at 50% 30vh,
      #ffffff00  0px,
      #ffffff00 40px,
      #ffffff06 44px,   /* hombro  — alfa 0,024 */
      #ffffff0d 46px,   /* cresta  — alfa 0,051 */
      #ffffff06 48px,
      #ffffff00 52px,
      #ffffff00 92px);

  /* La energía se disipa con la distancia: la máscara está centrada en el
     emisor, no en la pantalla. Cae sobre un patrón que ya es 87% transparente,
     así que sus escalones pegan en crestas sueltas y no se leen como bandas. */
  -webkit-mask-image:
    radial-gradient(ellipse 116vw 68vh at 50% 30vh,
      #000 0%, #000b 34%, #0006 58%, transparent 78%);
          mask-image:
    radial-gradient(ellipse 116vw 68vh at 50% 30vh,
      #000 0%, #000b 34%, #0006 58%, transparent 78%);

  will-change: transform;
}

/* El núcleo caliente: las crestas de más cerca, en amarillo de marca,
   intercaladas entre las blancas. Es lo que ata el fondo al sombrero y lo que
   rompe la lectura de "diana".
   La caja mide 720×450 y va centrada en el emisor, así que se rasterizan 324k
   píxeles y no la pantalla entera. Al compartir centro y elipse base, la fase
   calza sola. */
.grilla::after,
.fondo::after{
  content: '';
  position: absolute;
  left: 50%;
  top: 30vh;
  width: 720px;
  height: 450px;
  translate: -50% -50%;

  background-image:
    repeating-radial-gradient(ellipse 168px 104px at 50% 50%,
      #FED5130b  0px,    /* cresta — alfa 0,043 */
      #FED51306  3px,
      #FED51300  6px,
      #FED51300 86px,
      #FED51306 89px,
      #FED5130b 92px);

  /* misma relación 1,615:1 que las ondas: el corte se disuelve siguiendo la
     forma de la onda en vez de cruzarla por la mitad */
  -webkit-mask-image:
    radial-gradient(ellipse 330px 204px at 50% 50%,
      #000 0%, #000a 44%, transparent 80%);
          mask-image:
    radial-gradient(ellipse 330px 204px at 50% 50%,
      #000 0%, #000a 44%, transparent 80%);
}

/* Parallax: sólo translate y opacity, así el compositor no repinta nada. El
   campo entero deriva junto, con lo cual las dos familias de crestas quedan
   enganchadas en fase. */
@supports (animation-timeline: scroll()) {
  .grilla,
  .fondo{
    animation: senal-deriva linear both;
    animation-timeline: scroll(root block);
  }
  /* el amarillo vive sólo en el hero: no queremos tinte cálido sobre las
     figuras del elenco ni sobre las miniaturas */
  .grilla::after,
  .fondo::after{
    animation: senal-nucleo linear both;
    animation-timeline: scroll(root block);
    animation-range: 0vh 88vh;
  }
  @keyframes senal-deriva{
    from { translate: 0 0;     opacity: 1;   }
    to   { translate: 0 -11vh; opacity: .32; }
  }
  @keyframes senal-nucleo{
    from { opacity: 1; }
    to   { opacity: 0; }
  }
}

/* el resplandor amarillo de marca, detrás del hero */
.resplandor{
  position: absolute; inset: -10% -20% auto -20%; height: 130%;
  background: radial-gradient(44% 42% at 50% 32%, #FED5131c, #FED5130a 42%, transparent 70%);
  pointer-events: none; z-index: 0;
}

/* =========================================================================
   Layout y tipografía base
   ========================================================================= */
.envoltura{
  position: relative; z-index: 1;
  max-width: var(--borde-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
section { position: relative; z-index: 1; }

h1, h2, h3 { margin: 0; font-weight: 760; letter-spacing: -.04em; line-height: .95; }

/* la etiqueta de sección es una pastilla amarilla, no un texto gris perdido */
.pastilla{
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 18px 9px 15px;
  border-radius: var(--r-pill);
  background: var(--oro);
  color: #0A0A0A;
  font-size: clamp(11px, .84vw, 13px);
  font-weight: 760; letter-spacing: .1em; text-transform: uppercase;
  width: fit-content;
}
/* el triángulo de play de la cinta del sombrero, repetido como marca */
.pastilla::before{
  content:''; width: 0; height: 0;
  border-left: 8px solid #0A0A0A;
  border-block: 5px solid transparent;
}

.titulo-seccion{
  font-size: clamp(38px, 7vw, 100px);
  letter-spacing: -.055em; line-height: .88;
  text-wrap: balance;
}
.titulo-seccion em{ font-style: normal; color: var(--oro); }

/* para las secciones de apoyo, que no tienen que competir con casos de éxito */
.titulo-seccion--chico{
  font-size: clamp(26px, 3.6vw, 52px);
  letter-spacing: -.045em; line-height: .95;
}

.bajada-seccion{
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.5; color: var(--gris);
  margin: 0; max-width: 48ch; text-wrap: pretty;
}

/* =========================================================================
   1 · HERO
   ========================================================================= */
.hero{
  position: relative;   /* si no, el resplandor escapa del overflow y genera scroll lateral */
  min-height: 100svh;
  display: grid; place-items: center;
  text-align: center;
  padding-block: clamp(44px, 7vh, 84px);
  overflow: hidden;
}
.hero__interior{ display: grid; justify-items: center; gap: clamp(11px, 1.9vh, 22px); }

/* El halo NO va con filter: drop-shadow(). Safari lo aplica a la caja del
   elemento y no a la silueta, así que alrededor del sombrero aparecía un
   rectángulo. Va como un resplandor propio detrás del logo: se dibuja igual en
   todos los navegadores porque es una capa más, no un efecto sobre la forma. */
.hero__marca{
  position: relative;
  display: grid; place-items: center;
  animation: logo-entrada 1.15s cubic-bezier(.16,1,.3,1) both;
}
.hero__marca::before{
  content: '';
  position: absolute; inset: -55% -34%;
  background: radial-gradient(50% 50% at 50% 54%,
    #FED51340, #FED51314 42%, #FED5130a 60%, transparent 74%);
  pointer-events: none;
  animation: logo-respira 5.5s ease-in-out 1.25s infinite;
}

.hero__logo{
  position: relative;                 /* pinta encima del resplandor */
  width: clamp(180px, min(28vw, 33vh), 340px);
}

@keyframes logo-entrada{
  from { opacity: 0; scale: .82; translate: 0 24px; rotate: -5deg; }
  60%  { opacity: 1; }
  to   { opacity: 1; scale: 1; translate: 0 0; rotate: 0deg; }
}
@keyframes logo-respira{
  0%, 100% { opacity: .72; scale: .97; }
  50%      { opacity: 1;   scale: 1.03; }
}

.hero__nombre{
  font-size: clamp(56px, min(14vw, 17vh), 164px);
  letter-spacing: -.055em;
  line-height: 1.04;              /* con .82 se cortaban las mayúsculas */
  padding-block: .05em;
  color: var(--hueso);
  text-shadow: 0 0 38px #FED51326;
  animation: subir .9s cubic-bezier(.16,1,.3,1) .18s both;
}

/* Una sola frase en dos niveles: van pegadas entre sí y separadas del resto */
.hero__texto{ display: grid; justify-items: center; gap: 3px; }

.hero__foco{
  margin: 0;
  font-size: clamp(21px, 2.2vw, 32px);
  font-weight: 620; line-height: 1.15; letter-spacing: -.035em;
  color: var(--hueso); white-space: nowrap;
  animation: subir .9s cubic-bezier(.16,1,.3,1) .28s both;
}
.hero__foco i{ font-style: normal; color: var(--oro); }

.hero__bajada{
  margin: 0; max-width: 46ch;
  font-size: clamp(14px, 1.15vw, 16.5px);
  font-weight: 480; line-height: 1.45; letter-spacing: -.005em;
  color: var(--gris); text-wrap: balance;
  animation: subir .9s cubic-bezier(.16,1,.3,1) .36s both;
}


@keyframes subir{
  from { opacity: 0; translate: 0 20px; filter: blur(7px); }
  to   { opacity: 1; translate: 0 0;    filter: blur(0);   }
}

/* =========================================================================
   2 · CASOS DE ÉXITO — el elenco. Pieza central de la página.
   ========================================================================= */
.elenco{
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(14px, 2vh, 34px);
}
.elenco > .envoltura{ width: 100%; }
/* los casos de éxito se llevan más ancho que el resto de la página */
.envoltura--ancha{ max-width: 1760px; --gutter: clamp(16px, 3vw, 44px); }

.elenco__encabezado{
  display: grid; gap: clamp(10px, 1.6vh, 18px);
  justify-items: center; text-align: center;
  margin-bottom: clamp(14px, 2.8vh, 40px);
}
.elenco__titulo{
  font-size: clamp(32px, min(6vw, 7.4vh), 84px);
  letter-spacing: -.06em; line-height: .86;
  color: var(--oro);
  text-shadow: 0 0 58px #FED5131c;
}

.escenario{
  --figura: clamp(260px, 56vh, 560px);
  /* el ancho se ata al alto de las figuras: si no, quedan cuatro islas sueltas
     en el medio de la pantalla */
  /* la franja de abajo es de los nombres. Las figuras se apoyan en su borde
     superior, que es donde va la línea de piso: así la línea no cruza el texto. */
  --pie: clamp(54px, 6.6vh, 72px);
  position: relative;
  /* Columnas iguales, y el ancho total atado al alto de las figuras.
     Con columnas al ancho de cada figura los huecos quedaban parejos pero los
     CUERPOS desparejos, y el ojo lee los cuerpos: el grupo se veía corrido. */
  display: grid; grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 0;
  max-width: calc(var(--figura) * 2.72);
  margin-inline: auto;
  min-height: calc(var(--figura) + var(--pie));
  isolation: isolate;
}

.piso{
  position: absolute; inset-inline: -4%; bottom: var(--pie); height: 2px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, transparent, var(--oro-hondo) 20%, var(--oro) 50%, var(--oro-hondo) 80%, transparent);
  transform-origin: 50% 50%;
  opacity: .55; z-index: 2;
}
.piso::after{
  content:''; position: absolute; inset-inline: 18%; bottom: -1px; height: 54px;
  background: radial-gradient(60% 100% at 50% 0%, #FED5131f, transparent 72%);
  pointer-events: none;
}

.persona{
  position: relative;
  display: grid; justify-items: center; align-content: end;
  min-width: 0;
  padding: 0; border: 0; background: none; color: inherit; font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: scale var(--t-medio), translate var(--t-medio), filter var(--t-medio), opacity var(--t-medio);
  will-change: scale, filter;
}
.persona:focus-visible{ outline: none; }
.persona:focus-visible .persona__figura{
  outline: 2px solid var(--oro); outline-offset: 12px; border-radius: var(--r-lg);
}

/* el lado que el cuadro original cortó se disuelve, en vez de dejar el tajo recto */
.persona__figura picture{
  display: block;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%, #000 var(--corte-izq, 0%),
    #000 calc(100% - var(--corte-der, 0%)), transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0%, #000 var(--corte-izq, 0%),
    #000 calc(100% - var(--corte-der, 0%)), transparent 100%);
}
.persona__figura{
  position: relative; width: 100%;
  display: grid; justify-items: center;
  overflow: visible;
}

.persona__img{
  width: auto; max-width: none;
  /* --alto iguala el tamaño de las cabezas: los recortes vienen de encuadres
     distintos y sin esto se nota que salieron de fotos diferentes */
  height: calc(var(--figura) * var(--alto, 1));
  object-fit: contain; object-position: bottom center;
  filter: grayscale(.6) contrast(1.05) brightness(.78);
  transition: filter var(--t-medio), scale var(--t-medio);
  -webkit-mask-image: linear-gradient(#000 76%, #000c 90%, transparent 100%);
  mask-image: linear-gradient(#000 76%, #000c 90%, transparent 100%);
}

.persona__halo{
  position: absolute; inset: auto 0 -6% 0; height: 78%;
  background: radial-gradient(50% 60% at 50% 78%, #FED5131c, transparent 70%);
  opacity: 0; transition: opacity var(--t-medio);
  pointer-events: none; z-index: -1;
}

.persona__pie{
  height: var(--pie);        /* fija la franja: la línea de piso cae justo arriba */
  align-content: center;
  transition: opacity var(--t-medio), translate var(--t-medio);
  display: grid; gap: 5px; justify-items: center; text-align: center;
}
.persona__nombre{
  font-size: clamp(14px, 1.45vw, 20px);
  font-weight: 680; letter-spacing: -.025em;
  color: var(--gris); transition: color var(--t-rapido);
  white-space: nowrap;
}
.persona__rubro{
  font-size: clamp(9.5px, .78vw, 11.5px);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gris-2); transition: color var(--t-rapido);
}

.escenario:has(.persona:hover) .persona__pie,
.escenario:has(.persona:focus-visible) .persona__pie,
.escenario:has(.persona[data-activa]) .persona__pie{ opacity: 0; translate: 0 10px; }

.escenario:has(.persona:hover) .persona:not(:hover),
.escenario:has(.persona:focus-visible) .persona:not(:focus-visible),
.escenario:has(.persona[data-activa]) .persona:not([data-activa]){
  opacity: .34; scale: .93; filter: saturate(.2);
}
.escenario:has(.persona:hover) .persona:not(:hover) .persona__img,
.escenario:has(.persona:focus-visible) .persona:not(:focus-visible) .persona__img,
.escenario:has(.persona[data-activa]) .persona:not([data-activa]) .persona__img{
  filter: grayscale(1) brightness(.4);
}
.escenario:has(.persona:hover) .persona:not(:hover):first-of-type,
.escenario:has(.persona[data-activa]) .persona:not([data-activa]):first-of-type{ translate: -5% 0; }
.escenario:has(.persona:hover) .persona:not(:hover):last-of-type,
.escenario:has(.persona[data-activa]) .persona:not([data-activa]):last-of-type{ translate: 5% 0; }

.persona:hover, .persona:focus-visible, .persona[data-activa]{ scale: 1.07; z-index: 4; }
.persona:hover .persona__img,
.persona:focus-visible .persona__img,
.persona[data-activa] .persona__img{ filter: grayscale(0) contrast(1.04) brightness(1.04); }
.persona:hover .persona__halo,
.persona:focus-visible .persona__halo,
.persona[data-activa] .persona__halo{ opacity: 1; }
.persona:hover .persona__nombre,
.persona:focus-visible .persona__nombre,
.persona[data-activa] .persona__nombre{ color: var(--hueso); }
.persona:hover .persona__rubro,
.persona:focus-visible .persona__rubro,
.persona[data-activa] .persona__rubro{ color: var(--oro); }

/* --- ficha ------------------------------------------------------------- */
.elenco__cuerpo{ position: relative; padding-bottom: clamp(78px, 12.4vh, 136px); }
.fichas{
  position: absolute; left: 50%; bottom: 0; translate: -50% 0;
  width: min(1000px, 96%);
  z-index: 5; display: grid; pointer-events: none;
}
.ficha{
  grid-area: 1 / 1;
  translate: 0 24px; opacity: 0; visibility: hidden;
  transition: opacity var(--t-medio), translate var(--t-medio), visibility 0s .55s;
}
.escenario:has(#p-lichi:hover) ~ .fichas #f-lichi,
.escenario:has(#p-lichi:focus-visible) ~ .fichas #f-lichi,
.escenario:has(#p-lichi[data-activa]) ~ .fichas #f-lichi,
.escenario:has(#p-valen:hover) ~ .fichas #f-valen,
.escenario:has(#p-valen:focus-visible) ~ .fichas #f-valen,
.escenario:has(#p-valen[data-activa]) ~ .fichas #f-valen,
.escenario:has(#p-gael:hover)  ~ .fichas #f-gael,
.escenario:has(#p-gael:focus-visible)  ~ .fichas #f-gael,
.escenario:has(#p-gael[data-activa])  ~ .fichas #f-gael,
.escenario:has(#p-oscu:hover)  ~ .fichas #f-oscu,
.escenario:has(#p-oscu:focus-visible)  ~ .fichas #f-oscu,
.escenario:has(#p-oscu[data-activa])  ~ .fichas #f-oscu{
  --abierta: 1;
  opacity: 1; translate: 0 0; visibility: visible;
  pointer-events: auto;   /* si no, no se puede tocar "Ver el canal" */
  transition: opacity var(--t-medio), translate var(--t-medio), visibility 0s 0s;
}

.ficha__caja{
  display: flex; flex-wrap: nowrap; align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 46px);
  padding: clamp(20px, 2.5vw, 30px) clamp(24px, 3.4vw, 40px);
  background: #14130F;
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px #FED51326;
}

/* --- entrada escalonada: cada dato llega con su propio retraso ------------ */
.ficha__caja > *{
  transition:
    opacity   .5s cubic-bezier(.16,1,.3,1),
    translate .6s cubic-bezier(.16,1,.3,1),
    filter    .5s cubic-bezier(.16,1,.3,1);
  opacity:   var(--abierta);
  translate: 0 calc((1 - var(--abierta)) * 16px);
  filter:    blur(calc((1 - var(--abierta)) * 7px));
  transition-delay: calc(var(--i, 0) * 90ms + 60ms);
}

.dato{ display: grid; gap: 7px; justify-items: center; text-align: center; flex: 0 0 auto; }
.dato__k{
  margin: 0;
  font-size: clamp(10px, .8vw, 11.5px);
  letter-spacing: .18em; text-transform: uppercase; color: var(--gris-2);
}
.dato__v{
  margin: 0;
  display: flex; align-items: center; gap: clamp(9px, 1.4vw, 16px);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.salto__antes{
  font-size: clamp(17px, 2vw, 26px); font-weight: 640;
  color: var(--gris-2); letter-spacing: -.03em;
}
.salto__flecha{
  flex: 0 0 auto; align-self: center;
  width: clamp(24px, 3.2vw, 44px); height: 2px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, #55524A, var(--oro));
  position: relative;
  /* la flecha se dibuja sola al abrirse la ficha */
  margin-block: 0;
  transform-origin: 0 50%; scale: var(--abierta) 1;
  transition: scale .55s cubic-bezier(.16,1,.3,1) .22s;
}

.salto__flecha::after{
  content:''; position:absolute; right: -1px; top: -3px;
  border-left: 7px solid var(--oro); border-block: 4px solid transparent;
}
.salto__despues, .dato__grande{
  font-size: clamp(34px, 4.4vw, 60px); font-weight: 820;
  letter-spacing: -.055em; color: var(--oro); line-height: .9;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; margin: 0;
}
/* El número lo cuenta el JS.
   La versión anterior era CSS puro (@property + counter()) y funcionaba en
   Chrome, pero Safari no repinta counter() mientras interpola la variable: el
   número saltaba del inicial al final de un tirón. */


.ficha__sep{
  align-self: center; width: 1.5px; height: clamp(48px, 6vw, 68px); flex: 0 0 auto;
  border-radius: var(--r-pill);
  background: linear-gradient(#ffffff00, #ffffff1f, #ffffff00);
}

.ficha__link{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-radius: var(--r-pill);
  background: #FED5131a;
  box-shadow: inset 0 0 0 1.5px #FED51347;
  color: var(--oro);
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: background var(--t-rapido), scale var(--t-rapido),
              opacity .5s cubic-bezier(.16,1,.3,1),
              translate .6s cubic-bezier(.16,1,.3,1),
              filter .5s cubic-bezier(.16,1,.3,1);
  /* el atajo transition de arriba resetea el transition-delay que puso
     .ficha__caja > *, así que el botón entraba a destiempo del resto */
  transition-delay: calc(var(--i, 0) * 90ms + 60ms);
}
.ficha__link:hover{ background: #FED51333; scale: 1.04; }
.ficha__link:focus-visible{ outline: 2px solid var(--oro); outline-offset: 3px; }
.ficha__link::after{
  content:''; width:0; height:0;
  border-left: 7px solid var(--oro); border-block: 4.5px solid transparent;
}

/* =========================================================================
   Bloques genéricos + 4 · LA PRUEBA (capturas de YouTube Studio)
   ========================================================================= */
.bloque{ padding-block: clamp(64px, 10vh, 130px); }
.bloque__encabezado{
  display: grid; gap: clamp(16px, 2.2vh, 24px);
  justify-items: center; text-align: center;
  margin-bottom: clamp(34px, 6vh, 72px);
}

/* los dos casos van uno al lado del otro: apilados se comían media pantalla */
.prueba{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 470px), 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

.prueba__caso{
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: clamp(10px, 1.4vw, 18px);
  padding: clamp(16px, 1.8vw, 24px);
  border-radius: var(--r-xl);
  background: #121110;
  box-shadow: inset 0 0 0 1px #ffffff12;
}
.prueba__captura{
  border-radius: var(--r-md); overflow: hidden; background: #000;
  /* ancho definido, no max-width: con max-width el contenedor quedaba en 0,
     la imagen diferida nunca entraba en cuadro y no cargaba nunca */
  width: min(250px, 100%); justify-self: center;
  box-shadow: 0 20px 50px -24px #000;
}
.prueba__captura img{ width: 100%; }
.prueba__flecha{
  display: grid; place-items: center;
  width: clamp(36px, 3.4vw, 46px); aspect-ratio: 1;
  border-radius: var(--r-pill);
  background: var(--oro);
  box-shadow: 0 0 0 8px #FED51314, 0 0 26px #FED51338;
}
.prueba__flecha::after{
  content:''; width: 0; height: 0; margin-left: 4px;
  border-left: clamp(10px, 1vw, 12px) solid #0A0A0A;
  border-block: clamp(6.5px, .68vw, 8px) solid transparent;
}
.prueba__quien{
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: 6px 16px; margin: 0; text-align: center;
}
.prueba__nombre{ font-size: clamp(17px, 1.6vw, 22px); font-weight: 740; letter-spacing: -.035em; }
.prueba__delta{
  font-size: clamp(13.5px, 1.1vw, 16px); font-weight: 680;
  color: var(--oro); font-variant-numeric: tabular-nums;
}
.prueba__pie{
  font-size: clamp(12.5px, .98vw, 14px); color: var(--gris-2);
  margin: 18px 0 0; text-align: center;
}

/* =========================================================================
   5 · NUESTROS MEJORES RESULTADOS — mosaico irregular
   y 6 · PARTE DEL PROCESO (el bloque .versiones, antes/después)
   ========================================================================= */
.mosaico{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
/* Las del podcast son seis: con la medida del mosaico normal salen 4 + 2 y la
   segunda fila queda coja. Pidiendo columnas más anchas caen 3 + 3, y de paso
   se lee el texto de las miniaturas, que es la gracia del formato. */
.mosaico--podcast{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.mini{ display: grid; gap: 10px; align-content: start; }

.mini__marco{
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--sup-2);
  box-shadow: 0 22px 50px -28px #000;
  transition: scale var(--t-medio), box-shadow var(--t-medio);
}
.mini__marco img{
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.92) brightness(.94);
  transition: scale var(--t-medio), filter var(--t-medio);
}
.mini:hover .mini__marco{ scale: 1.015; box-shadow: 0 30px 70px -30px #000, 0 0 0 2px #FED51366; }
.mini:hover .mini__marco img{ scale: 1.06; filter: saturate(1.05) brightness(1); }

/* el número de vistas monta la esquina de la miniatura */
.mini__vistas{
  position: absolute; left: 0; bottom: 0; margin: 0;   /* es un <p>: sin esto el
     margen del navegador lo despega ~16px de la esquina y la chapa flota */
  padding: 8px 15px 7px 13px;
  border-start-end-radius: var(--r-md);
  background: var(--oro); color: #0A0A0A;
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 820; letter-spacing: -.045em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mini__vistas small{
  display: block; font-size: 9.5px; font-weight: 760;
  letter-spacing: .14em; text-transform: uppercase;
  opacity: .6; margin-top: 4px;
}
.mini__texto{ display: grid; gap: 5px; padding-inline: 4px; }
.mini__titulo{
  margin: 0;
  font-size: clamp(13.5px, 1.05vw, 15.5px); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.32; color: var(--hueso);
}
.mini__quien{
  margin: 0;
  font-size: clamp(10.5px, .82vw, 12px); letter-spacing: .1em;
  text-transform: uppercase; color: var(--gris-2);
}

/* --- las dos versiones de una misma miniatura ---------------------------
   Cada par vive en su propia caja. Para sumar otro antes/después se duplica el
   bloque .versiones entero en el HTML: la grilla los apila sola. */
.versiones + .versiones{ margin-top: clamp(16px, 2.2vw, 26px); }
.versiones{
  padding: clamp(20px, 2.6vw, 34px);
  border-radius: var(--r-xl);
  background: #121110;
  box-shadow: inset 0 0 0 1px #ffffff12;
  display: grid; gap: clamp(18px, 2.6vw, 30px);
}
.versiones__pie{
  margin: 0; text-align: center; max-width: 62ch; justify-self: center;
  font-size: clamp(13.5px, 1.05vw, 15.5px); line-height: 1.5; color: var(--gris);
  text-wrap: pretty;
}
.versiones__par{
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: clamp(14px, 2.2vw, 26px);
  max-width: 900px; margin-inline: auto;
}
.version{ display: grid; gap: 12px; justify-items: center; }
.version__marco{
  border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/9; width: 100%;
  box-shadow: 0 20px 50px -26px #000;
}
.version__marco img{ width:100%; height:100%; object-fit: cover; }
.version--antes .version__marco img{ filter: saturate(.5) brightness(.72); }
.version__sello{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 760; letter-spacing: .13em; text-transform: uppercase;
  width: fit-content;
}
.version--antes .version__sello{ background: #2A2820; color: var(--gris); }
.version--despues .version__sello{ background: var(--oro); color: #0A0A0A; }



/* =========================================================================
   7 · PROYECTOS AISLADOS DONDE PARTICIPAMOS
   y 11 · MARCAS (van abajo de todo en el HTML, pero comparten familia)
   Grilla pareja y densa: acá el volumen es el argumento, no cada pieza.
   ========================================================================= */
.proyectos{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(16px, 2.2vw, 28px);
}
.proy{ display: grid; gap: 10px; align-content: start; }
.proy__marco{
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); aspect-ratio: 16/9;
  background: var(--sup-2);
  box-shadow: 0 18px 44px -26px #000;
  transition: scale var(--t-medio), box-shadow var(--t-medio);
}
.proy__marco img{
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.9) brightness(.9);
  transition: filter var(--t-medio), scale var(--t-medio);
}
.proy:hover .proy__marco{ scale: 1.02; box-shadow: 0 26px 58px -28px #000, 0 0 0 2px #FED51347; }
.proy:hover .proy__marco img{ filter: saturate(1.02) brightness(1); scale: 1.05; }

.proy__vistas{
  position: absolute; left: 0; bottom: 0; margin: 0;
  padding: 8px 15px 7px 13px;
  border-start-end-radius: var(--r-md);
  background: var(--oro); color: #0A0A0A;
  font-size: clamp(15px, 1.5vw, 20px); font-weight: 820;
  letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.proy__titulo{
  margin: 0; padding-inline: 3px;
  font-size: clamp(13.5px, 1.05vw, 15.5px); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.32; color: var(--hueso);
}
.proy__con{
  margin: 0; padding-inline: 3px;
  font-size: clamp(10.5px, .82vw, 12px);
  letter-spacing: .1em; text-transform: uppercase; color: var(--oro-hondo);
}

/* --- marcas — van abajo de todo, después del cierre ----------------------- */
.marcas-bloque{ padding-block: 0 clamp(24px, 4vh, 48px); }
.marcas{
  padding-top: clamp(30px, 4vh, 48px);
  border-top: 1px solid #ffffff12;
  display: grid; gap: clamp(18px, 2.6vh, 28px); justify-items: center;
}
.marcas__k{
  margin: 0;
  font-size: clamp(10.5px, .84vw, 12px);
  letter-spacing: .18em; text-transform: uppercase; color: var(--gris-2);
}
.marcas__fila{
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(16px, 2.4vw, 32px);
}
.marca{
  width: clamp(140px, 15vw, 190px);
  border-radius: var(--r-lg); overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 0 1.5px #ffffff12;
  transition: box-shadow var(--t-medio), scale var(--t-medio);
}
.marca img{ width: 100%; opacity: .88; transition: opacity var(--t-medio); }
.marca:hover{ scale: 1.03; box-shadow: inset 0 0 0 1.5px #FED51347; }
.marca:hover img{ opacity: 1; }


/* =========================================================================
   9 · SERVICIOS — los tres caminos
   Cada camino es una barra ancha. Al pasarle el mouse, una luz amarilla la
   barre de izquierda a derecha y el CTA se llena: la fila entera reacciona,
   no un botoncito.
   ========================================================================= */
.caminos{ display: grid; gap: clamp(12px, 1.6vw, 18px); }

.camino{
  position: relative; overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
  padding: clamp(24px, 3.2vw, 42px) clamp(24px, 3.4vw, 46px);
  border-radius: var(--r-xl);
  background: #121110;
  box-shadow: inset 0 0 0 1px #ffffff12;
  text-decoration: none; color: inherit;
  transition: box-shadow var(--t-medio), translate var(--t-medio);
}
/* el barrido de luz: un gradiente que entra desde la izquierda */
.camino::before{
  content:''; position: absolute; inset: 0;
  background: linear-gradient(100deg, #FED51314, #FED51305 38%, transparent 62%);
  translate: -102% 0;
  transition: translate .75s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.camino:hover, .camino:focus-visible{
  translate: 0 -3px;
  background: #17150F;
  box-shadow: inset 0 0 0 1px #FED51333;
  outline: none;
}
.camino:hover::before, .camino:focus-visible::before{ translate: 0 0; }

.camino__n{
  font-size: clamp(30px, 4vw, 56px); font-weight: 820;
  letter-spacing: -.06em; line-height: 1;
  color: #ffffff12;
  transition: color var(--t-medio);
}
.camino:hover .camino__n, .camino:focus-visible .camino__n{ color: #FED5133d; }

.camino__cuerpo{ display: grid; gap: 8px; min-width: 0; }
.camino__t{
  font-size: clamp(22px, 2.9vw, 40px); font-weight: 760;
  letter-spacing: -.04em; line-height: 1.02;
}
.camino__t em{ font-style: normal; color: var(--oro); }
.camino__d{
  font-size: clamp(14.5px, 1.15vw, 16.5px); line-height: 1.5;
  color: var(--gris); text-wrap: pretty;
}

.camino__cta{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: var(--r-pill);
  background: #FED5131a;
  box-shadow: inset 0 0 0 1.5px #FED51347;
  color: var(--oro);
  font-size: 13.5px; font-weight: 740; letter-spacing: .04em;
  white-space: nowrap;
  transition: background var(--t-medio), color var(--t-medio),
              box-shadow var(--t-medio), scale var(--t-medio);
}
.camino__cta::after{
  content:''; width:0; height:0;
  border-left: 7px solid currentColor; border-block: 4.5px solid transparent;
}
.camino:hover .camino__cta, .camino:focus-visible .camino__cta{
  background: var(--oro); color: #0A0A0A;
  box-shadow: 0 10px 24px -14px #FED5134d;
  scale: 1.03;
}

/* =========================================================================
   10a · LAS TRES ALTERNATIVAS (viven adentro del cierre)
   ========================================================================= */
.cierre__caja .alternativas{ width: 100%; margin-block: clamp(6px, 1.6vh, 18px); text-align: left; }

.alternativas{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: clamp(14px, 2vw, 22px);
  align-items: stretch;
}
.alt{
  position: relative;
  padding: clamp(24px, 2.6vw, 32px) clamp(22px, 2.4vw, 28px) clamp(26px, 2.8vw, 34px);
  border-radius: var(--r-lg);
  background: #131210;
  box-shadow: inset 0 0 0 1px #ffffff14;
  display: grid; gap: 14px; align-content: start;
  transition: translate var(--t-medio), box-shadow var(--t-medio), background var(--t-medio);
}
.alt:hover{
  translate: 0 -3px;
  background: #17150F;
  box-shadow: inset 0 0 0 1px #FED5132e, 0 22px 46px -28px #000;
}

.alt__sello{
  display: block;
  color: var(--oro-hondo);
  font-size: 11px; font-weight: 740; letter-spacing: .16em; text-transform: uppercase;
}
.alt:hover .alt__sello{ color: var(--oro); }
.alt__t{ font-size: clamp(21px, 2vw, 28px); font-weight: 740; letter-spacing: -.035em; }
.alt__d{
  margin: 0; font-size: clamp(14.5px, 1.1vw, 16px); line-height: 1.55;
  color: var(--gris); text-wrap: pretty;
}

/* =========================================================================
   3 · CLIENTES — cada foto abre el canal de YouTube de esa persona

   La ficha es un <a> entero, no una <figure> con un link adentro: el objetivo
   de click es la foto completa, que es lo que la gente va a tocar. Los que
   todavía no tienen canal confirmado se quedan como <figure> y comparten todo
   el estilo menos el estado de link.
   ========================================================================= */
.confian{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 152px), 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.confia{
  margin: 0; display: grid; gap: 12px;
  text-decoration: none; color: inherit;
}
.confia__marco{
  position: relative; display: block;
  border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--sup-2);
  box-shadow: 0 18px 44px -26px #000;
  transition: scale var(--t-medio), box-shadow var(--t-medio);
}
.confia__marco img{
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(.82);
  transition: filter var(--t-medio), scale var(--t-medio);
}
.confia:hover .confia__marco,
.confia:focus-visible .confia__marco{ scale: 1.02; box-shadow: 0 26px 60px -30px #000, 0 0 0 2px #FED51347; }
.confia:hover .confia__marco img,
.confia:focus-visible .confia__marco img{ filter: grayscale(0) contrast(1) brightness(1); scale: 1.05; }
/* el anillo dorado del hover es de alfa .28: alcanza como adorno pero no como
   señal de foco. Con teclado va un contorno sólido, igual que en las figuras. */
.confia:focus-visible{ outline: none; }
.confia:focus-visible .confia__marco{
  outline: 2px solid var(--oro); outline-offset: 4px;
}

/* El disco con el triángulo de play: es la señal de que la foto lleva al canal.
   Sólo aparece en las que son <a>; las <figure> no lo tienen en el HTML. */
.confia__play{
  position: absolute; inset: auto 10px 10px auto;
  width: 34px; height: 34px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--oro);
  opacity: 0; scale: .7; translate: 0 6px;
  transition: opacity var(--t-rapido), scale var(--t-rapido), translate var(--t-rapido);
}
.confia__play::after{
  content:''; width: 0; height: 0; margin-left: 3px;
  border-left: 10px solid #0A0A0A;
  border-block: 6.5px solid transparent;
}
.confia:hover .confia__play,
.confia:focus-visible .confia__play{ opacity: 1; scale: 1; translate: 0 0; }

.confia__nombre{
  font-size: clamp(12.5px, 1vw, 14.5px); font-weight: 640;
  letter-spacing: -.015em; color: var(--gris);
  text-align: center;
  transition: color var(--t-rapido);
}
.confia:hover .confia__nombre,
.confia:focus-visible .confia__nombre{ color: var(--hueso); }

/* en táctil no hay hover: el play va siempre puesto, para que se entienda que
   la foto es tocable */
@media (hover: none){
  .confia__play{ opacity: .92; scale: 1; translate: 0 0; }
}

/* =========================================================================
   10b · CIERRE
   ========================================================================= */
.cierre{ padding-block: clamp(70px, 12vh, 150px); }
.cierre__caja{
  position: relative; overflow: hidden;
  padding: clamp(42px, 6vw, 84px) clamp(26px, 5vw, 60px);
  border-radius: var(--r-xl);
  background: #111110;
  box-shadow: inset 0 0 0 1px #ffffff14;
  display: grid; justify-items: center; gap: clamp(18px, 3vh, 30px);
  text-align: center;
}
.cierre__t{
  font-size: clamp(32px, 5.4vw, 76px); letter-spacing: -.05em;
  max-width: 16ch; text-wrap: balance;
}
.cierre__t em{ font-style: normal; color: var(--oro); }

.boton--hero{ margin-top: clamp(6px, 1.4vh, 16px); animation: subir .9s cubic-bezier(.16,1,.3,1) .46s both; }

.boton{
  display: inline-flex; align-items: center; gap: 11px;
  padding: 17px 32px; border-radius: var(--r-pill);
  background: var(--oro); color: #0A0A0A;
  font-weight: 740; font-size: 16px; letter-spacing: -.015em;
  text-decoration: none;
  transition: translate var(--t-rapido), box-shadow var(--t-rapido), background var(--t-rapido);
}
.boton::after{
  content:''; width:0; height:0;
  border-left: 8px solid #0A0A0A; border-block: 5px solid transparent;
}
.boton:hover{
  translate: 0 -2px; background: var(--oro-claro);
  box-shadow: 0 10px 26px -14px #FED51338;
}

.pie{
  border-top: 1px solid #ffffff12;
  padding-block: 32px;
  display: flex; flex-wrap: wrap; gap: 14px 24px;
  align-items: center; justify-content: space-between;
  font-size: 13.5px; color: var(--gris-2);
}
.pie img{ width: 40px; opacity: .9; }

/* =========================================================================
   Entradas ligadas al scroll — nativas, sobre el compositor
   ========================================================================= */
@supports (animation-timeline: view()) {
  .persona{
    animation: figura-entra linear both;
    animation-timeline: view();
    animation-range: entry 12% entry 92%;
  }
  .persona:nth-of-type(2){ animation-range: entry 6% entry 86%; }
  .persona:nth-of-type(3){ animation-range: entry 18% entry 98%; }
  .persona:nth-of-type(4){ animation-range: entry 10% entry 90%; }
  @keyframes figura-entra{
    from { opacity: 0; translate: 0 9%; filter: blur(10px); }
    to   { opacity: 1; translate: 0 0;  filter: blur(0);    }
  }

  .piso{
    animation: piso-dibuja linear both;
    animation-timeline: view();
    animation-range: entry 25% entry 100%;
  }
  @keyframes piso-dibuja{
    from { scale: 0 1; opacity: 0;  }
    to   { scale: 1 1; opacity: .55; }
  }

  .aparece, .mini, .proy, .camino, .alt, .confia, .prueba__caso, .versiones{
    animation: aparece linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 92%;
  }
  @keyframes aparece{
    from { opacity: 0; translate: 0 30px; filter: blur(8px); }
    to   { opacity: 1; translate: 0 0;    filter: blur(0);   }
  }
  /* el mosaico entra escalonado, cada pieza con su propio tramo de scroll */
  .mini:nth-child(2n), .proy:nth-child(2n), .confia:nth-child(2n){ animation-range: entry 11% entry 98%; }
  .mini:nth-child(3n), .proy:nth-child(3n), .confia:nth-child(3n){ animation-range: entry 17% entry 100%; }
  /* los caminos entran uno detrás del otro */
  .camino:nth-child(1){ animation-range: entry 2% entry 84%; }
  .camino:nth-child(2){ animation-range: entry 8% entry 92%; }
  .camino:nth-child(3){ animation-range: entry 14% entry 100%; }
}
@supports not (animation-timeline: view()) {
  .persona, .aparece, .mini, .proy, .camino, .alt, .confia, .prueba__caso, .versiones{ opacity: 1; }
}

/* =========================================================================
   MÓVIL
   ========================================================================= */
@media (max-width: 860px){
  .elenco{ padding-block: clamp(20px, 3.5vh, 40px); }
  .elenco__encabezado{ margin-bottom: 14px; gap: 10px; }

  /* En celular cuatro figuras de cuerpo entero quedan diminutas: se recorta más
     cerrado (cabeza y torso) para que las caras se reconozcan, y el degradado
     de abajo las sigue apoyando sobre la línea de piso. */
  .escenario{ --figura: clamp(124px, 19vh, 190px); --pie: 46px; }
  /* el ancho lo define <picture>, que es el ítem de la grilla; ponerlo sólo
     en el <img> no hace nada porque el padre se ajusta al contenido */
  .persona__figura picture{ width: 100%; }
  .persona__img{
    width: 100%; max-width: 100%;
    height: var(--figura);
    object-fit: cover; object-position: 50% 4%;
    -webkit-mask-image: linear-gradient(#000 62%, #000b 84%, transparent 100%);
    mask-image: linear-gradient(#000 62%, #000b 84%, transparent 100%);
  }
  .elenco__cuerpo{ padding-bottom: 0; }

  .fichas{ position: static; translate: none; width: 100%; margin-top: 16px; pointer-events: auto; }
  .ficha{ translate: 0 8px; }
  .ficha__caja{ flex-wrap: wrap; gap: 14px 22px; padding: 18px 20px; }
  .ficha__sep{ display: none; }
  .salto__despues{ font-size: clamp(38px, 12vw, 56px); }

  .escenario:has(.persona[data-activa]) .persona__pie{ opacity: 1; translate: 0 0; }
  .persona__nombre{ font-size: 12.5px; }
  .persona__rubro{ font-size: 9px; letter-spacing: .12em; }
  .persona__pie{ margin-top: 12px; gap: 3px; }

  .prueba__caso{ grid-template-columns: 1fr; justify-items: center; gap: 16px; }
  .prueba__flecha{ rotate: 90deg; width: 52px; }
  .versiones__par{ grid-template-columns: 1fr; }
  .versiones__par .prueba__flecha{ rotate: 90deg; justify-self: center; }
}

/* En un teléfono angosto el auto-fit se queda a cuatro píxeles de entrar en dos
   columnas y cae a una sola: trece retratos a pantalla completa, uno abajo del
   otro. Se le fija el par a mano. */
@media (max-width: 430px){
  .confian{ grid-template-columns: repeat(2, 1fr); }
}

/* "Especializada en distribución en YouTube" mide 358px en su tamaño mínimo:
   abajo de ~460px de ancho ya no entra en un renglón y el nowrap la dejaba
   cortada contra el borde (el body tiene overflow-x: hidden, así que no se veía
   una barra: se veía "...en YouT"). Acá se la deja partir en dos líneas
   equilibradas; de 460px para arriba sigue yendo de corrido. */
@media (max-width: 460px){
  .hero__foco{ white-space: normal; text-wrap: balance; }
}

@media (max-width: 400px){
  .persona__nombre{ font-size: 10.5px; letter-spacing: -.04em; }
  .persona__rubro{ display: none; }   /* a este ancho ya no entra sin partirse */
  .escenario{ --figura: clamp(108px, 17vh, 150px); --pie: 34px; }
}

/* =========================================================================
   Accesibilidad
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .persona, .aparece, .piso, .mini, .proy, .camino, .alt, .confia, .prueba__caso, .versiones{
    opacity: 1; translate: none; filter: none; scale: none;
  }
  .grilla,        .fondo,
  .grilla::after, .fondo::after{ animation: none; }
}