/* =========================================================================
   Microsite SYNESTHESIA — estilos propios de la página.
   Requiere base.css (tokens, cabecera, vídeo, footer).
   ========================================================================= */

/* -------------------------------- hero --------------------------------- */
.hero{
  /* En el diseno la portada mide 1440x938; con 100svh crecia o encogia con
     la ventana y nunca coincidia. */
  position:relative;aspect-ratio:1440/938;min-height:520px;
  display:flex;align-items:center;
  background:var(--black);overflow:hidden;
}
.hero__media{position:absolute;inset:0}
.hero__media .media-video{object-position:39% center}
.hero__media .media-fallback{background-position:39% center}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,#000 0%,rgba(0,0,0,.92) 28%,rgba(0,0,0,.25) 58%,rgba(0,0,0,0) 78%),
    linear-gradient(180deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,0) 28%);
}
/* En el diseno el bloque no va centrado: el rotulo arranca en 373 de 938
   (39,77 %) y el texto ocupa la mitad de abajo de la portada. */
.hero__content{
  position:absolute;left:0;right:0;top:39.766%;
  padding:0 var(--gutter);
}
.hero__kicker{
  font-family:var(--play);font-size:clamp(16px,1.6vw,20.757px);line-height:1.156;
  letter-spacing:.02em;color:#fff;margin-bottom:clamp(8px,0.903vw,13px);
}
.hero__kicker span{color:var(--teal)}
.hero__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(40px,6.6vw,92px);line-height:1.17;color:var(--cream);
  margin-bottom:clamp(24px,3.889vw,56px);
  max-width:min(100%,18ch);
}
.hero__title em{font-style:italic;font-weight:700;color:var(--teal)}
.hero__lede{
  max-width:522px;font-size:var(--fs-body);line-height:1.4;color:var(--cream);
}
.hero__title.reveal{transition-delay:.08s}
.hero__lede.reveal{transition-delay:.16s}

/* Reencuadre de la figura.
   La imagen es muy apaisada (2400x1028), así que al hacer `cover` sobre un
   viewport estrecho la ventana visible se reduce al 20% del ancho original y
   la figura se queda fuera. En tablet basta con desplazar el encuadre; en
   móvil, además, la imagen pasa a ocupar una banda inferior para que la
   cabeza no salga desproporcionada y el texto respire sobre negro. */
@media (max-width:1100px){
  .hero__media .media-video{object-position:72% center}
  .hero__media .media-fallback{background-position:72% center}
  /* La figura ocupa ahora el centro, así que el velo tiene que oscurecer
     más la columna de texto sin tapar del todo el lado derecho. */
  .hero__scrim{
    background:
      linear-gradient(90deg,#000 0%,rgba(0,0,0,.84) 36%,rgba(0,0,0,.4) 72%,rgba(0,0,0,.14) 100%),
      linear-gradient(180deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,0) 30%);
  }
}
@media (max-width:760px){
  /* En movil la proporcion del diseno dejaria la portada en una franja. */
  .hero{aspect-ratio:auto;min-height:100svh}
  .hero__content{position:relative;top:auto;padding:36vh var(--gutter) 14vh}
  .hero__media{top:auto;bottom:0;height:62%}
  .hero__media::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,#000 0%,rgba(0,0,0,0) 34%);
  }
  .hero__scrim{
    background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.3) 42%,rgba(0,0,0,.72) 100%);
  }
  .hero__content{
    display:flex;flex-direction:column;justify-content:flex-start;
    padding-bottom:clamp(140px,34vh,300px);
  }
}

.scroll-cue{
  position:absolute;left:50%;bottom:28px;translate:-50% 0;
  width:26px;height:42px;border:1.5px solid rgba(245,245,239,.5);border-radius:20px;
  display:grid;justify-items:center;padding-top:8px;
}
.scroll-cue span{
  width:3px;height:8px;border-radius:2px;background:var(--teal);
  animation:cue 1.8s var(--ease) infinite;
}
@keyframes cue{0%,100%{transform:translateY(0);opacity:1}60%{transform:translateY(14px);opacity:0}}

/* -------------------------------- slide -------------------------------- */
/* Slide del diseno: 1440x663. El dibujo mide 730x652 y se sale por la
   izquierda y por arriba (x=-49, y=-30); el texto va en 513,118 con 842 de
   ancho. Antes el dibujo estaba metido en una caja cuadrada de 425 dentro de
   una rejilla y no se parecia. */
.slide{
  position:relative;background:var(--black);overflow:hidden;
  aspect-ratio:1440/663;max-width:1440px;margin-inline:auto;
}
.slide__rings{
  position:absolute;left:-3.435%;top:-4.537%;width:50.738%;
  aspect-ratio:730.634/651.682;
}
.slide__rings img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  animation:ringspin 70s linear infinite;transform-origin:52% 52%;
  opacity:.9;
}
.slide__text{position:absolute;left:35.625%;top:17.798%;width:58.472%}
@keyframes ringspin{to{transform:rotate(360deg)}}
.slide__lead{
  font-family:var(--display);font-size:var(--fs-display);line-height:1.22;color:var(--cream);
  margin-bottom:clamp(24px,3.2vw,48px);
}
.slide__lead em{font-style:italic;color:var(--teal)}
.slide__body p{margin-bottom:16px;color:var(--cream)}
.slide__body p:last-child{margin-bottom:0}
.slide__body.reveal{transition-delay:.12s}

@media (max-width:860px){
  /* En vertical el bloque vuelve a ser flujo normal. */
  .slide{
    aspect-ratio:auto;display:flex;flex-direction:column;
    gap:clamp(24px,5vw,40px);padding:clamp(48px,9vw,80px) var(--gutter);
  }
  .slide__rings{
    position:relative;left:auto;top:auto;width:100%;max-width:360px;
    margin-inline:auto;opacity:.75;
  }
  .slide__text{position:static;width:100%}
}

/* ------------------------------ parallax ------------------------------- */
.parallax{
  position:relative;aspect-ratio:1440/840;
  background:#1f5f8a;overflow:hidden;--p:0;
}
/* El componente parallax_1 de Figma tiene dos variantes. Interpolamos entre
   ellas con --p (0 = Default, 1 = Variant2): el fondo hace zoom, el logotipo
   sale por la derecha y las zapatillas suben, crecen y contrarrotan. */
.parallax__bg{
  position:absolute;inset:-6% 0 auto;width:100%;height:112%;object-fit:cover;
  transform:translate3d(0,calc(var(--p) * -5%),0) scale(calc(1 + .18 * var(--p)));
  will-change:transform;
}
.parallax__top-scrim{
  position:absolute;inset:0 0 auto;height:50%;
  background:linear-gradient(180deg,#000 0%,rgba(0,0,0,0) 76.31%);
}
.parallax__bottom-scrim{
  position:absolute;inset:auto 0 0;height:50%;
  background:linear-gradient(0deg,var(--mint) 0%,rgba(159,253,226,0) 50%);
}
.parallax__logo{
  position:absolute;left:50%;top:16%;translate:-50% 0;z-index:3;
  display:flex;align-items:center;gap:0;
  transform:translate3d(calc(var(--p) * 124%),calc(var(--p) * -34%),0);
  will-change:transform;
}
.parallax__logo img{width:clamp(70px,16.4vw,236.787px);height:auto}
.parallax__logo span{
  font-family:var(--dots);font-size:clamp(42px,10vw,144px);line-height:1;color:#fff;
}
.parallax__glow{
  position:absolute;z-index:1;max-width:none;mix-blend-mode:screen;
  transition:opacity .4s linear;
}
.parallax__glow--a{
  left:15.42%;top:38.69%;width:24.93%;height:auto;
  opacity:calc(1 - var(--p));
}
.parallax__glow--b{
  left:33.61%;top:10.36%;width:37.71%;height:auto;
  opacity:var(--p);
}
.parallax__shoe{position:absolute;z-index:2;will-change:transform,left,top,width}
.parallax__shoe img{width:100%;height:auto}
.parallax__shoe--1{
  left:calc(50.73% + (49.72% - 50.73%) * var(--p));
  top:calc(26.19% + (13.31% - 26.19%) * var(--p));
  width:calc(27.42% + (34.04% - 27.42%) * var(--p));
  rotate:calc((-5.67deg) + (5.74deg - (-5.67deg)) * var(--p));
}
.parallax__shoe--2{
  left:calc(22.19% + (12.70% - 22.19%) * var(--p));
  top:calc(29.35% + (16.31% - 29.35%) * var(--p));
  width:calc(29.45% + (37.79% - 29.45%) * var(--p));
  rotate:calc(8.14deg + (-6.46deg - 8.14deg) * var(--p));
}

@media (max-width:900px){
  .parallax{aspect-ratio:1/1}
  .parallax__logo{top:12%}
  .parallax__logo img{width:clamp(44px,12vw,70px)}
  .parallax__logo span{font-size:clamp(30px,9.4vw,52px)}
  .parallax__shoe--1{
    left:calc(44% + (42% - 44%) * var(--p));
    top:calc(36% + (28% - 36%) * var(--p));
    width:calc(50% + (58% - 50%) * var(--p));
  }
  .parallax__shoe--2{
    left:calc(4% + (-2% - 4%) * var(--p));
    top:calc(42% + (34% - 42%) * var(--p));
    width:calc(54% + (62% - 54%) * var(--p));
  }
  .parallax__glow--a{left:8%;top:40%;width:46%}
  .parallax__glow--b{left:26%;top:24%;width:64%}
  .parallax__top-scrim{height:38%}
  .parallax__bottom-scrim{height:38%}
}

/* --------------------------- conceptualización ------------------------- */
.concept{
  background:var(--mint);color:#000;
  padding:var(--band-y) var(--gutter);
  display:flex;flex-direction:column;gap:clamp(32px,4vw,56px);align-items:center;
}
.concept__grid{
  width:100%;display:grid;gap:clamp(6px,0.6vw,8.66px);
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:auto auto;
}
.card{
  background:rgba(255,255,255,.8);border-radius:26px;
  padding:13px 9px 9px;display:flex;flex-direction:column;gap:17px;
  backdrop-filter:blur(2px);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(1,55,109,.18)}
.card--a{grid-column:1;grid-row:1}
.card--b{grid-column:1;grid-row:2}
.card--tall{grid-row:1 / span 2}
.card__head{display:flex;align-items:center;gap:9px;padding:0 13px}
.card__num{font-weight:600;color:var(--blue-700);font-size:clamp(18px,1.6vw,21.658px);line-height:1.4}
.card__head h3{
  font-weight:400;color:#000;font-size:clamp(18px,1.6vw,21.658px);line-height:1.4;
}
.card__body{padding:9px;display:flex;flex-direction:column;justify-content:center;flex:1}
.card__copy{font-size:clamp(12px,1.05vw,13px);font-weight:300;color:#000;line-height:1.35}
.card__claim{
  font-family:var(--jakarta);font-weight:300;text-transform:uppercase;color:#000;
  font-size:clamp(20px,2.2vw,29.84px);line-height:1.28;
}
.card__claim b{font-weight:700}
.card__body--tone{gap:0;justify-content:flex-start}
.card__body--tone>div{padding:9px 0}
.tone__name{font-weight:300;font-size:clamp(17px,1.6vw,21.658px);color:#000;line-height:1.3}
.tone__desc{font-weight:300;font-size:clamp(11px,1.05vw,13px);color:#000;line-height:1.35}
.card__body--palette{justify-content:flex-end}
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px)}
.swatches figure{display:flex;flex-direction:column;align-items:center;gap:15px;margin:0}
.swatches img{width:clamp(44px,4.6vw,64.975px);height:auto;transition:transform .35s var(--ease)}
.swatches figure:hover img{transform:scale(1.12)}
.swatches figcaption{font-weight:300;font-size:clamp(13px,1.3vw,17.327px);color:#000}
.card__body--media{padding:9px;flex:1}
.card__body--media img{width:100%;height:100%;object-fit:cover;border-radius:17px}
.concept__closing{
  width:100%;font-family:var(--display);font-size:var(--fs-display);line-height:1.22;color:#000;
}

@media (max-width:1100px){
  .concept__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
  .card--a,.card--b,.card--tall{grid-column:auto;grid-row:auto}
  .card--media .card__body--media{aspect-ratio:1/1.05}
}
@media (max-width:640px){
  .concept__grid{grid-template-columns:1fr}
}

/* --------------------------- bandas genéricas -------------------------- */
.band{
  padding:var(--band-y) var(--gutter);
  display:flex;flex-direction:column;gap:clamp(32px,4vw,56px);
}
.band__head{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,32px);align-items:flex-start}
.band__head--right{align-items:flex-end}
.pill{
  border-radius:1000px;padding:10px 24px;
  font-family:var(--display);font-size:clamp(14px,1.5vw,20px);line-height:1.2;
  color:var(--blue-900);
  white-space:nowrap;
}
.pill--light{background:linear-gradient(90deg,rgba(255,255,255,.8),rgba(255,255,255,.4))}
.pill--teal{background:linear-gradient(270deg,rgba(62,250,197,.24),rgba(62,250,197,.16))}
.band__title{
  font-family:var(--display);font-weight:400;font-size:var(--fs-display);
  line-height:1.22;color:#000;
}
.band__title em{font-style:italic;font-weight:700;color:var(--blue-900)}
.band__title--right{text-align:right}
.band__title--light{color:#fff}
.band__title--light em{color:var(--lime)}
.band__foot{display:flex;gap:clamp(24px,4vw,62px);align-items:flex-start;justify-content:space-between}
.band__foot--stack{flex-direction:column;gap:clamp(20px,2.6vw,32px)}
.band__foot--end{align-items:flex-end}
.band__foot-title{
  font-family:var(--display);font-size:var(--fs-display);line-height:1.22;color:#000;flex:none;
}
.band__foot-copy{max-width:847px;color:#000}
.band__foot-copy p{margin-bottom:16px}
.band__foot-copy p:last-child{margin-bottom:0}
.band__statement{
  font-family:var(--display);font-size:var(--fs-display);line-height:1.22;color:#000;max-width:847px;
}
.band__statement em{font-style:italic;font-weight:700;color:var(--blue-900)}
.band__statement--light{color:#fff}
.band__statement--light em{color:var(--lime)}
.band__copy{max-width:847px;color:#fff}

.band--escalado{
  background:
    radial-gradient(118% 90% at 7% 75%,rgba(239,255,192,1) 0%,rgba(239,255,192,0) 40%),
    linear-gradient(180deg,rgba(62,250,197,.5) 0%,rgba(255,255,255,.5) 92%),#fff;
}
.band--auto{
  background:
    radial-gradient(90% 60% at 18% -8%,rgba(239,255,192,1) 0%,rgba(239,255,192,0) 30%),
    linear-gradient(180deg,#fff 0%,var(--blue-200) 100%);
}
.band--perso{background:linear-gradient(180deg,var(--blue-200) 0%,var(--blue-900) 100%)}
.band--perso .band__head{align-items:flex-start}

@media (max-width:900px){
  .band__foot{flex-direction:column}
  .band__title--right{text-align:left}
  .band__head--right{align-items:flex-start}
  .band__foot--end{align-items:flex-start}
}

/* ------------------------------ escalado ------------------------------- */
.escalado{
  display:grid;grid-template-columns:482fr 140.24fr 631fr;
  align-items:center;gap:clamp(8px,0.929vw,13.38px);
}
.escalado__arrows{
  width:100%;height:auto;
  animation:arrows 2.4s var(--ease) infinite;
}
@keyframes arrows{0%,100%{transform:translateX(0);opacity:.85}50%{transform:translateX(10%);opacity:1}}

@media (max-width:900px){
  .escalado{grid-template-columns:1fr;justify-items:center}
  .escalado__arrows{width:120px;rotate:90deg;margin:4px 0}
}

/* --- cartel A2 (escala proporcional al contenedor) --- */
.scaler{width:100%;max-width:482px;position:relative;overflow:hidden}
.scaler__inner{
  width:482px;height:682.091px;transform-origin:top left;transform:scale(var(--s,1));
}
.a2{
  position:relative;width:482px;height:682.091px;overflow:hidden;
  background:var(--blue-200);border-radius:8px;
}
.a2__tag{
  position:absolute;left:18.36px;top:88.84px;z-index:5;
  font-family:var(--jakarta);font-size:12.961px;line-height:1.25;color:#fff;
}
.a2__crop{
  position:absolute;left:0;top:0;width:482px;height:607.563px;
  overflow:hidden;border-bottom-left-radius:270.028px;background:#fff;
}
.a2__photo{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  margin-left:10.4px;width:682.091px;height:682.091px;max-width:none;object-fit:cover;
}
.a2__wordmark{
  position:absolute;left:.27px;top:-11.61px;
  font-family:var(--dots);font-size:83.662px;line-height:1.18;color:#fff;white-space:nowrap;
}
.a2__recorte{position:absolute;left:-91.27px;top:0;width:685.061px;height:685.061px}
.a2__recorte img{width:100%;height:100%;object-fit:cover;max-width:none}
.a2__recorte::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(1,55,109,.8) 10.486%,rgba(1,55,109,0) 55.214%);
}
.a2__brand{display:flex;align-items:center;gap:0;position:absolute;z-index:6}
.a2__brand img{width:29.359px;height:27.898px}
.a2__brand span{font-family:var(--dots);font-size:17.855px;line-height:1.18}
.a2__brand--white{left:333.93px;top:643.21px;color:#fff}
.a2__brand--blue{left:333.93px;top:643.21px;color:var(--blue-900)}
.a2__url{
  position:absolute;left:19.44px;top:650.5px;z-index:6;
  font-family:var(--jakarta);font-weight:600;font-size:10.801px;color:var(--blue-900);
}
.a2__qr{position:absolute;left:19.44px;top:585.42px;width:53.196px;height:53.196px;z-index:6}
.a2__disc{position:absolute;left:358.6px;top:105.03px;width:132.674px;height:132.674px;z-index:6}
.a2__disc-text{
  position:absolute;left:425.34px;top:139.88px;translate:-50% 0;z-index:7;
  font-family:var(--jakarta);font-weight:200;color:var(--blue-900);text-align:center;white-space:nowrap;
}
.a2__disc-text b{display:block;font-weight:200;font-size:39.24px;line-height:1.18}
.a2__disc-text span{display:block;font-size:19.62px;line-height:1}
.a2__claim{
  position:absolute;z-index:6;text-transform:uppercase;
  font-family:var(--jakarta);font-weight:300;font-size:43.294px;line-height:1.28;color:#fff;
}
.a2__claim b{font-weight:800;color:var(--yellow)}
.a2__claim--1{left:41.86px;top:319.05px}
.a2__claim--2{left:187.17px;top:450.94px}
.a2__amp{
  position:absolute;left:116.88px;top:450.94px;z-index:6;
  font-family:var(--jakarta);font-weight:300;font-size:43.294px;line-height:1.28;color:#fff;
}

/* --- widget Change_format (réplica del prototipo de Figma) ---------------
   El prototipo encadena las 5 variantes con AFTER_TIMEOUT 1 s y SMART_ANIMATE
   de 1,25 s con muelle "Slow" (masa 1, rigidez 80, amortiguación 20). Esa
   curva está muestreada en --figma-slow; todas las posiciones llegan desde
   script.js como custom properties en px del diseño (lienzo 631x682). */
.formatter{
  --s:1;
  --figma-slow:linear(0, .0597, .1821, .3173, .4437, .5534, .6448, .7192, .7789,
    .8263, .8638, .8934, .9166, .9347, .949, .9601, .9688, .9756, .981, .9851,
    .9884, .9909, .9929, .9945, .9957, .9966, .9974, .9979, 1);
  --figma-dur:1.25s;
  background:rgba(255,255,255,.5);border-radius:var(--radius-lg);
  width:100%;max-width:631px;aspect-ratio:631/682;
  justify-self:center;overflow:hidden;
}
@supports not (animation-timing-function:linear(0,1)){
  .formatter{--figma-slow:cubic-bezier(.33,0,.1,1)}
}
.fmt-stage{
  position:relative;width:631px;height:682px;
  transform:scale(var(--s));transform-origin:top left;
}

/* pestañas — cada píldora tiene su propia caja en cada variante */
.fmt-tabs{position:absolute;inset:0 0 auto;height:97px}
.fmt-tab{
  position:absolute;
  left:var(--x);top:var(--y);width:var(--w);height:var(--h);
  display:grid;place-items:center;border-radius:1000px;
  font-family:var(--display-x);font-weight:500;font-size:var(--fs);
  color:var(--c);background:var(--bg);
  transition:left var(--figma-dur) var(--figma-slow),top var(--figma-dur) var(--figma-slow),
             width var(--figma-dur) var(--figma-slow),height var(--figma-dur) var(--figma-slow),
             font-size var(--figma-dur) var(--figma-slow),
             background-color var(--figma-dur) var(--figma-slow),color var(--figma-dur) var(--figma-slow);
}
.fmt-tab:hover{filter:brightness(1.08)}

/* lienzo de la creatividad */
.fmt-canvas{
  position:absolute;overflow:hidden;
  left:var(--x);top:var(--y);width:var(--w);height:var(--h);
  border-radius:var(--r);background:var(--bg);
  transition:left var(--figma-dur) var(--figma-slow),top var(--figma-dur) var(--figma-slow),
             width var(--figma-dur) var(--figma-slow),height var(--figma-dur) var(--figma-slow),
             border-radius var(--figma-dur) var(--figma-slow),
             background-color var(--figma-dur) var(--figma-slow);
}
.fmt-canvas>*{
  position:absolute;
  transition:left var(--figma-dur) var(--figma-slow),top var(--figma-dur) var(--figma-slow),
             width var(--figma-dur) var(--figma-slow),height var(--figma-dur) var(--figma-slow),
             font-size var(--figma-dur) var(--figma-slow),line-height var(--figma-dur) var(--figma-slow),
             border-radius var(--figma-dur) var(--figma-slow),
             opacity var(--figma-dur) var(--figma-slow),transform var(--figma-dur) var(--figma-slow);
}

.fmt-photo{left:var(--x);top:var(--y);width:var(--w);height:var(--h);border-radius:var(--r);overflow:hidden}
/* La imagen no va "cover": Figma recorta el relleno con una transformación
   propia en cada variante, así que replicamos su caja exacta en porcentaje
   del recuadro de la foto. */
.fmt-photo img{
  position:absolute;left:var(--ix);top:var(--iy);width:var(--iw);height:var(--ih);
  max-width:none;object-fit:cover;
  transition:left var(--figma-dur) var(--figma-slow),top var(--figma-dur) var(--figma-slow),
             width var(--figma-dur) var(--figma-slow),height var(--figma-dur) var(--figma-slow);
}
.fmt-photo__scrim{
  position:absolute;inset:0;opacity:var(--scrim);
  background:linear-gradient(0deg,var(--blue-900) 4.117%,rgba(1,55,109,0) 39.428%);
  transition:opacity var(--figma-dur) var(--figma-slow);
}

.fmt-amp{
  left:var(--x);top:var(--y);
  font-family:var(--jakarta);font-weight:300;color:#fff;
  font-size:var(--fs);line-height:1.25;
}

.fmt-claim{
  left:var(--x);top:var(--y);
  font-family:var(--jakarta);text-transform:uppercase;
  font-size:var(--fs);line-height:var(--lh);white-space:nowrap;
}
.fmt-claim span{display:block;font-weight:300;color:#fff}
.fmt-claim b{display:block;font-weight:800;color:var(--yellow);line-height:1.25}

/* el círculo de descuento escala en bloque: el SVG conserva su tamaño propio
   y el texto compensa la escala para igualar los tamaños del diseño */
.fmt-disc{
  left:var(--x);top:var(--y);width:123.519px;height:123.519px;
  transform:scale(var(--k));transform-origin:0 0;opacity:var(--o);
}
.fmt-disc p{
  position:absolute;left:43%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--jakarta);font-weight:200;color:var(--blue-900);
  text-align:center;white-space:nowrap;
}
.fmt-disc b{display:block;font-weight:200;font-size:var(--fs);line-height:1.18}
.fmt-disc span{display:block;font-size:var(--fs2);line-height:1}

.fmt-url{
  left:var(--x);top:var(--y);width:var(--w);height:var(--h);
  display:grid;place-items:center;border-radius:1000px;background:#fff;opacity:var(--o);
}
.fmt-url span{font-family:var(--jakarta);font-weight:600;font-size:9.9px;color:var(--blue-900)}

.fmt-brand{left:var(--x);top:var(--y)}
.fmt-brand img{position:absolute;left:0;top:0;transition:opacity var(--figma-dur) var(--figma-slow)}
.fmt-brand__sm{opacity:var(--o-sm)}
.fmt-brand__lg{opacity:var(--o-lg)}
.fmt-brand span{
  position:absolute;left:var(--tx);top:var(--ty);
  font-family:var(--dots);font-size:var(--fs);line-height:1.18;color:var(--c);white-space:nowrap;
  transition:left var(--figma-dur) var(--figma-slow),top var(--figma-dur) var(--figma-slow),
             font-size var(--figma-dur) var(--figma-slow),color var(--figma-dur) var(--figma-slow);
}

@media (prefers-reduced-motion:reduce){
  .formatter{--figma-dur:.001s}
}

/* ------------------------------ iteración ------------------------------ */
.iteracion{
  position:relative;aspect-ratio:1440/686;background:#000;overflow:hidden;
  display:grid;place-items:center;
}
@media (max-width:900px){
  /* En vertical el "cover" recortaría el lettering del vídeo por los lados,
     así que lo encajamos entero y separamos los rótulos. */
  .iteracion{aspect-ratio:3/2}
  .iteracion .media-video{object-fit:contain;transform:none}
  .iteracion__small--a{left:6%;top:9%}
  .iteracion__small--b{left:auto;right:6%;top:auto;bottom:9%}
}
/* El relleno de vídeo de este frame usa scaleMode CROP en Figma, con la
   matriz [[0.9195,0,0.0402],[0,0.7503,0.1279]]: centrada y mostrando el
   91,95% del ancho, o sea un zoom de 1/0.9195 sobre el "cover". */
.iteracion .media-video,
.iteracion .media-fallback{position:absolute;inset:0;width:100%;height:100%}
.iteracion .media-video{transform:scale(1.0875)}

.iteracion__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(1,55,109,.55) 0%,rgba(1,55,109,0) 50%);
  mix-blend-mode:lighten;
}
/* Los dos rótulos pequeños son capas propias en Figma, colocadas alrededor
   del lettering que vive dentro del vídeo: x=291 y=175 y x=795 y=459 sobre
   un frame de 1440x686. Van en porcentaje para que el encaje se mantenga. */
.iteracion__text{position:absolute;inset:0}
.iteracion__small{
  font-family:var(--display);font-style:italic;font-weight:200;
  font-size:clamp(16px,2.5vw,36px);text-transform:uppercase;color:#fff;
}
.iteracion__small{position:absolute;white-space:nowrap}
.iteracion__small--a{left:20.21%;top:25.51%}
.iteracion__small--b{left:55.21%;top:66.91%}
.iteracion__big{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--display-x);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(30px,8.2vw,120px);line-height:1.08;color:#fff;text-transform:uppercase;
}
/* El lettering grande vive dentro del vídeo original; sólo se dibuja en
   HTML cuando no hay vídeo disponible, para no duplicarlo. */
.iteracion:not(.no-video) .iteracion__big{display:none}
.iteracion__big.reveal{transition-delay:.1s}
.iteracion__small--b.reveal{transition-delay:.2s}

/* --------------------------- cómo lo hacemos --------------------------- */
.how{
  background:var(--black);padding:var(--band-y) var(--gutter);
  display:flex;flex-direction:column;gap:clamp(32px,4vw,56px);
}
.how__title{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:var(--fs-display);line-height:1.222;color:var(--teal);
}
.how__list li{
  display:flex;gap:clamp(16px,3vw,40px);align-items:center;
  padding:clamp(16px,2vw,24px) 0;border-bottom:1px solid var(--grey-line);
  transition:padding-left .4s var(--ease);
}
.how__list li:hover{padding-left:12px}
.how__num{
  font-family:var(--display-x);font-size:var(--fs-display);line-height:1.222;
  color:var(--teal);width:clamp(40px,4.5vw,56px);flex:none;
}
.how__list p{font-family:var(--display);font-size:var(--fs-display);color:var(--cream);line-height:1.222}

/* ------------------------------ resultados ----------------------------- */
.results{
  padding:var(--band-y) var(--gutter);
  background:radial-gradient(60% 45% at 100% 45%,rgba(62,250,197,.6) 0%,rgba(62,250,197,0) 100%),#000;
  display:flex;flex-direction:column;gap:clamp(32px,4vw,56px);
}
.results__head{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,32px)}
.results__head h2{
  font-family:var(--display);font-weight:400;font-size:var(--fs-display);
  line-height:1.22;color:var(--cream);
}
.results__head h2 em{font-style:italic;color:var(--teal)}
.results__note{max-width:847px;color:var(--grey)}

.table-wrap{background:var(--ink);border-radius:16px;overflow:hidden}
.kpi thead th{
  background:var(--ink-2);padding:16px 32px;text-align:left;font-weight:400;
  font-size:clamp(14px,1.4vw,20px);line-height:1.4;color:#fff;
}
.kpi thead th:nth-child(2){text-align:right;color:rgba(255,255,255,.6);padding:16px}
.kpi thead th:nth-child(3){text-align:right;padding:16px;width:196px}
.kpi tbody tr{border-top:1px solid rgba(255,255,255,.08)}
.kpi tbody tr:first-child{border-top:0}
.kpi tbody tr{transition:background .3s var(--ease)}
.kpi tbody tr:hover{background:rgba(62,250,197,.05)}
.kpi th[scope="row"]{
  padding:22.7px 32px;text-align:left;font-weight:400;color:#fff;
  font-size:clamp(14px,1.4vw,20px);line-height:1.4;
}
.kpi td{
  /* En el diseno cada fila mide 96 y entre filas quedan 8 de aire con la
     linea en medio: el paso de fila es 104. */
  padding:22.7px 16px;color:#fff;font-size:clamp(14px,1.4vw,20px);line-height:1.4;
}
/* Con un solo nombre de clase la pisa .kpi td, que es mas especifica, y las
   cifras salian en blanco en vez del turquesa del diseno. */
.kpi td.kpi__delta{
  width:196px;text-align:right;color:var(--teal);font-weight:600;white-space:nowrap;
}
@media (max-width:820px){
  .kpi thead{display:none}
  .kpi tbody tr{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:18px 20px}
  .kpi th[scope="row"]{padding:0;font-weight:600}
  .kpi td{padding:0}
  .kpi td:not(.kpi__delta){grid-column:1/-1;color:rgba(255,255,255,.72);font-size:15px}
  /* Mismo nivel que .kpi td.kpi__delta, si no el ancho fijo de 196 px se
     impone aqui y la tabla se sale 12 px a 390. */
  .kpi td.kpi__delta{width:auto;grid-row:1;grid-column:2}
}