@font-face{font-family:"Montserrat";src:url(fonts/montserrat-variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/barlow-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/barlow-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/plexmono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/plexmono-600.woff2) format("woff2");font-weight:600;font-display:swap}

/* ═══════════════════════════════════════════════════════════════
   PALETA

   Esquema análogo con acento complementario, el más estable que
   existe en teoría del color y el que menos cansa en lecturas largas.

   · Cian #00A7DB — la marca. Confianza y claridad. Intocable.
   · Iris #6C4BF4 — vecino del cian en la rueda. Ambición y criterio.
     Es el que da profundidad: sube el precio percibido sin gritar.
   · Jade #00C9A0 — crecimiento y «esto va bien». Reservado a las
     cifras que el visitante debe leer como ganancia.
   · Ámbar #FFAE45 — complementario del cian, o sea máximo contraste
     perceptual. Por eso, y solo por eso, es el color de los botones:
     el ojo lo encuentra antes que a ningún otro elemento de la página.
   · Arcilla #E0705A — la pérdida. Rojo desaturado, que el rojo puro
     dispara alarma y aquí solo queremos que se note la diferencia.

   El fondo es un índigo profundo con luz propia, no un negro. Un negro
   puro apaga los cianes, ensucia los violetas y deja la página como una
   cueva. Con el índigo el color se sostiene solo y la pantalla respira.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --f-d:"Montserrat",-apple-system,sans-serif;
  /* Archivo tiene eje de anchura real (wdth 62-125), así que el texto se
     ensancha de verdad: la letra crece de caja, no se separa de la de al
     lado. Barlow se queda de respaldo —va autoalojada— para que la
     página se lea igual si Google Fonts tarda o falla. */
  --f-b:"Archivo","Barlow",-apple-system,sans-serif;
  --ancho:108%;
  --f-m:"IBM Plex Mono",ui-monospace,monospace;

  --bg:#171A33; --bg-2:#1D2140; --bg-3:#262A4E; --panel:#22264A;
  --tx:#F3F2F9; --tx-2:#B9B7CE; --tx-3:#9C99B6;
  --line:rgba(255,255,255,.11); --line-2:rgba(255,255,255,.22);

  --brand:#00A7DB; --brand-l:#5FD4F2;
  --iris:#6C4BF4;  --iris-l:#A290FF;
  --jade:#00C9A0;  --ambar:#FFAE45; --ambar-2:#FF7A3D; --arcilla:#E0705A;

  --g-marca:linear-gradient(100deg,var(--brand-l),var(--iris-l));
  --g-accion:linear-gradient(100deg,var(--ambar),var(--ambar-2));

  --nav-h:84px; --w:1320px;
  /* Con una letra ancha de verdad hace falta mucha menos prosa: cuatro
     milésimas rematan el ritmo de la línea. Si acaba cargando el
     respaldo (Barlow, estrecha), sube a .015em. */
  --prosa:.004em;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 40px);background:var(--bg)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:transparent;color:var(--tx);
  font-family:var(--f-b);font-size:1.0625rem;line-height:1.68;
  font-stretch:var(--ancho);letter-spacing:var(--prosa);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--f-d);font-weight:600;line-height:1.05;letter-spacing:-.032em;margin:0;color:#fff;text-wrap:balance}
p{margin:0 0 1.5rem} p:last-child{margin-bottom:0}
a{color:inherit}
::selection{background:var(--iris);color:#fff}
:focus-visible{outline:2px solid var(--brand-l);outline-offset:4px;border-radius:2px}

.w{max-width:var(--w);margin-inline:auto;padding-inline:56px}
@media(max-width:900px){.w{padding-inline:24px}}

.skip{position:absolute;left:16px;top:-80px;z-index:300;background:#fff;color:#000;
  padding:14px 22px;font-family:var(--f-m);font-size:13px;text-decoration:none;transition:top .2s var(--ease)}
.skip:focus{top:16px}

/* ═══ FONDO CAMBIANTE ═══
   Cuatro capas de luz apiladas. El scroll no las mueve: cruza la
   opacidad de una a la siguiente, así que la página vira de iris a
   cian, de cian a jade y termina en ámbar justo donde está el
   formulario. Solo se anima opacity, que va por GPU y no toca layout. */
.fondo{position:fixed;inset:0;z-index:-2;background:var(--bg);overflow:hidden;pointer-events:none;
  animation:aurora 46s ease-in-out infinite alternate}
.fondo i{position:absolute;inset:-25%;display:block;opacity:0}
.fondo i:nth-child(1){opacity:1;background:
  radial-gradient(56% 50% at 14% 4%,rgba(124,92,255,.62),transparent 66%),
  radial-gradient(52% 46% at 88% 76%,rgba(0,167,219,.20),transparent 64%)}
.fondo i:nth-child(2){background:
  radial-gradient(58% 50% at 86% 10%,rgba(0,183,235,.52),transparent 66%),
  radial-gradient(52% 46% at 8% 80%,rgba(124,92,255,.48),transparent 64%)}
.fondo i:nth-child(3){background:
  radial-gradient(58% 52% at 16% 22%,rgba(0,201,160,.20),transparent 66%),
  radial-gradient(52% 48% at 92% 84%,rgba(124,92,255,.46),transparent 64%)}
.fondo i:nth-child(4){background:
  radial-gradient(56% 48% at 82% 16%,rgba(255,138,74,.44),transparent 64%),
  radial-gradient(54% 48% at 10% 86%,rgba(0,183,235,.42),transparent 64%)}
@keyframes aurora{
  from{transform:translate3d(-2%,-1.5%,0) scale(1.03)}
  to{transform:translate3d(2.5%,2%,0) scale(1.09)}
}
@supports (animation-timeline: scroll(root block)){
  .fondo i{animation-timeline:scroll(root block);animation-fill-mode:both;animation-timing-function:linear}
  .fondo i:nth-child(1){animation-name:capa-sale;animation-range:0% 30%}
  .fondo i:nth-child(2){animation-name:capa;animation-range:16% 56%}
  .fondo i:nth-child(3){animation-name:capa;animation-range:46% 84%}
  .fondo i:nth-child(4){animation-name:capa-entra;animation-range:72% 100%}
  @keyframes capa-sale{0%{opacity:1}62%{opacity:1}100%{opacity:0}}
  @keyframes capa{0%{opacity:0}30%{opacity:1}72%{opacity:1}100%{opacity:0}}
  @keyframes capa-entra{0%{opacity:0}45%{opacity:1}100%{opacity:1}}
}

/* Grano: rompe las superficies planas y evita el bandeado que
   producen los degradados grandes en pantallas de 8 bits. */
.grano{position:fixed;inset:0;z-index:400;pointer-events:none;opacity:.038;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px}

.lbl{font-family:var(--f-m);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--tx-3);margin:0}
.lbl--r{display:flex;align-items:center;gap:20px}
.lbl--r::after{content:"";flex:1;height:1px;background:var(--line);max-width:200px}
.lbl--b{color:var(--brand-l)}

/* ─── Cabecera ─── */
.nav{position:sticky;top:0;z-index:200;background:transparent;transition:background .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent}
.nav.on{background:rgba(23,26,51,.74);backdrop-filter:blur(20px) saturate(1.4);border-bottom-color:var(--line)}
.nav--claro.on{background:rgba(246,245,252,.82);border-bottom-color:rgba(26,29,56,.12)}
/* El tono claro solo vale para los enlaces que van sobre la barra. El panel
   desplegable es oscuro en las dos versiones, así que sus enlaces conservan su
   color: si heredan el gris de la barra clara, los títulos se leen negros
   sobre fondo negro y solo se ve el subtítulo. */
.nav--claro .nav-links > a,.nav--claro .dd > button{color:#4C4C68}
.nav--claro .nav-links > a:hover,.nav--claro .dd > button:hover,
.nav--claro .dd[data-o] > button,.nav--claro .nav-links > a[aria-current]{color:#141733}
.nav--claro .dd-p a{color:var(--tx)}
.nav--claro .dd-p a[aria-current],.nav--claro .dd-p a:hover{color:#fff}
.nav-lang a{text-decoration:none;color:var(--tx-3);transition:color .3s var(--ease)}
.nav-lang a:hover{color:var(--tx)}
.nav-lang a[aria-current]{color:#fff}
.nav--claro .nav-lang a{color:#6A6A86}
.nav--claro .nav-lang a:hover,.nav--claro .nav-lang a[aria-current]{color:#141733}
.nav--claro .nav-logo{filter:invert(1) hue-rotate(180deg) saturate(1.4)}
.nav--claro .nav-t span{background:#141733}
.nav-in{max-width:var(--w);margin-inline:auto;height:var(--nav-h);display:flex;align-items:center;padding-inline:56px;gap:40px}
.nav-logo{height:36px;width:auto;flex:none;transform-origin:left top}

/* Aterrizaje del logotipo
   Al llegar al pie no tiene sentido que se vean dos logotipos iguales a
   la vez. El de la cabecera baja hasta el hueco del pie y se queda con su
   mismo tamaño; el del pie se aparta mientras tanto. Solo se mueve un
   transform, así que el compositor lo resuelve sin repintar nada.
   Al subir, el camino se deshace igual. */
/* La barra se queda entera mientras el logotipo está fuera: vaciarla
   añadía una segunda animación que competía con el vuelo y confundía de
   dónde salía y a dónde iba. */
.nav[data-vuelo] .nav-logo{position:relative;z-index:1}
.pie-logo{transition:opacity .25s linear}
.nav-links{display:flex;gap:34px;margin-left:auto;align-items:center;font-family:var(--f-m)}
.nav-links > *{position:relative}
.nav-links a{font-size:14.5px;letter-spacing:.055em;color:var(--tx-2);text-decoration:none;transition:color .25s var(--ease);white-space:nowrap}
.nav-links a:hover,.nav-links a:focus-visible{color:#fff}
.nav-links a[aria-current]{color:#fff}
.nav-lang{display:flex;align-items:center;gap:14px;font-family:var(--f-m);font-size:13px;font-weight:600;letter-spacing:.1em;color:#fff}
.cta--nav{padding:11px 22px;font-size:13.5px;letter-spacing:.01em}
.nav-links a.cta--nav,.nav--claro .nav-links a.cta--nav,
.nav-links a.cta--nav:hover,.nav--claro .nav-links a.cta--nav:hover{color:#1B0E02}
@media(max-width:1059px){
  .nav-links a.cta--nav{margin-top:20px;justify-content:center;padding:15px 24px;font-size:13.5px;border-bottom:0}
}

.dd > button{font-family:var(--f-m);font-size:14.5px;letter-spacing:.055em;color:var(--tx-2);background:none;border:0;
  cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:8px;transition:color .25s var(--ease)}
.dd > button::after{content:"";width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-1px);transition:transform .3s var(--ease)}
.dd > button:hover,.dd[data-o] > button{color:#fff}
.dd[data-o] > button::after{transform:rotate(-135deg) translateY(-1px)}
.dd-p{position:absolute;top:calc(100% + 22px);left:-24px;min-width:300px;
  background:rgba(29,33,64,.94);backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid var(--line-2);border-radius:10px;padding:10px;display:none;
  box-shadow:0 30px 70px -26px rgba(0,0,0,.95),0 0 0 1px rgba(108,75,244,.14) inset}
/* Puente invisible sobre el hueco de 22 px entre el botón y el panel.
   Sin él, el ratón sale del .dd al cruzar ese vacío y el menú se cierra
   justo antes de que llegues a la opción. */
.dd-p::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px}
.dd[data-o] .dd-p{display:block}
.dd-p a{display:block;padding:13px 16px;border-radius:7px;color:var(--tx);font-size:13.5px;
  text-decoration:none;transition:background .2s var(--ease)}
.dd-p a small{display:block;font-family:var(--f-b);font-size:12.5px;letter-spacing:0;color:var(--tx-3);margin-top:3px;text-transform:none}
.dd-p a:hover{background:linear-gradient(100deg,rgba(0,167,219,.16),rgba(108,75,244,.16));color:#fff}

.nav-t{margin-left:auto;display:grid;gap:6px;width:40px;height:40px;align-content:center;background:none;border:0;cursor:pointer;padding:0}
.nav-t span{display:block;height:1.5px;background:#fff;border-radius:2px;transition:transform .3s var(--ease),width .3s var(--ease)}
.nav-t span:last-child{width:62%;justify-self:end}
.nav-t[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav-t[aria-expanded="true"] span:last-child{width:100%;transform:translateY(-3.75px) rotate(-45deg)}
@media(min-width:1060px){.nav-t{display:none}}
@media(max-width:1059px){
  :root{--nav-h:72px}
  .nav.mob{background:rgba(23,26,51,.97);backdrop-filter:blur(20px)}
  .nav-in{padding-inline:24px;height:72px;gap:16px} .nav-logo{height:30px}
  .nav-links{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:8px 24px 32px;max-height:calc(100svh - var(--nav-h));overflow-y:auto}
  .nav-links[data-open]{display:flex}
  .nav-links > *{width:100%}
  .nav-links > a{padding:17px 0;border-bottom:1px solid var(--line);font-size:1rem}
  .dd > button{width:100%;justify-content:space-between;padding:17px 0;border-bottom:1px solid var(--line);font-size:1rem}
  .dd-p{position:static;min-width:0;border:0;background:none;box-shadow:none;padding:4px 0 12px;backdrop-filter:none}
  .dd-p::before{display:none}
  .dd-p a{padding:12px 16px;background:var(--bg-2);margin-bottom:4px}
}

/* ─── Hero ─── */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;margin-top:calc(var(--nav-h) * -1)}
.hero--corto{min-height:0;padding-bottom:20px}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.66;filter:grayscale(0) contrast(1.07) saturate(1.3);
  transform:scale(1.06);animation:deriva 24s var(--ease) forwards}
@keyframes deriva{to{transform:scale(1)}}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(23,26,51,.92) 20%,rgba(23,26,51,.6) 52%,rgba(23,26,51,.18) 100%),
             linear-gradient(0deg,var(--bg) 1%,transparent 42%),
             radial-gradient(60% 70% at 80% 26%,rgba(124,92,255,.38),transparent 70%),
             radial-gradient(50% 60% at 92% 88%,rgba(0,201,160,.22),transparent 70%)}

/* ─── Visual de marca del hero (home) ───
   Sin foto: una composición propia en el degradado de marca, una curva
   ascendente con nodos y un núcleo que respira. Cero fotografía de banco,
   cero texto de IA mal escrito, cien por cien la paleta de la web. */
.hero-bg--marca{background:radial-gradient(115% 95% at 84% 32%,rgba(38,42,78,.85),var(--bg) 64%)}
.hero-bg--marca::after{background:
  linear-gradient(96deg,rgba(23,26,51,.86) 16%,rgba(23,26,51,.42) 50%,rgba(23,26,51,.1) 100%),
  linear-gradient(0deg,var(--bg) 1%,transparent 40%)}
.hero-viz{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transform:scale(1.05);
  animation:hv-entra 1.7s .1s var(--ease) forwards}
@keyframes hv-entra{to{opacity:1;transform:scale(1)}}
.hv-cinta{fill:none;stroke-linecap:round;filter:url(#hv-desenfoque)}
.hv-cinta--1{stroke:url(#hv-g1);stroke-width:34;opacity:.5}
.hv-cinta--2{stroke:url(#hv-g2);stroke-width:26;opacity:.42}
.hv-cinta--3{stroke:url(#hv-g3);stroke-width:16;opacity:.55}
.hv-nucleo{mix-blend-mode:screen}
.hv-linea{fill:none;stroke:url(#hv-g4);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:2200;stroke-dashoffset:2200;animation:hv-traza 2.4s .5s var(--ease) forwards}
@keyframes hv-traza{to{stroke-dashoffset:0}}
.hv-nodo{fill:#fff;opacity:0;animation:hv-nodo-in .5s var(--ease) forwards}
.hv-punto-fin{filter:url(#hv-brillo)}
.hv-punto-fin circle{fill:var(--ambar)}
.hv-punto-fin{opacity:0;animation:hv-nodo-in .6s 2.55s var(--ease) forwards}
.hv-anillo{fill:none;stroke:var(--brand-l);opacity:0;transform-origin:1300px 200px}
.hv-anillo{animation:hv-anillo-pulso 3.2s 3s ease-out infinite}
.hv-anillo--b{animation-delay:4.6s}
@keyframes hv-anillo-pulso{0%{transform:scale(.8);opacity:.5}100%{transform:scale(1.6);opacity:0}}
.hv-part{animation:hv-parpadeo 4s ease-in-out infinite}
@keyframes hv-nodo-in{to{opacity:1}}
@keyframes hv-parpadeo{0%,100%{opacity:var(--o,.6)}50%{opacity:calc(var(--o,.6) * .35)}}
@supports (animation-timeline: view()){
  .hero-viz{animation:hv-entra 1.7s .1s var(--ease) forwards,hv-deriva linear both;
    animation-timeline:auto,view();animation-range:auto,cover 0% cover 100%}
  @keyframes hv-deriva{from{transform:translateY(-2%)}to{transform:translateY(4%)}}
}
@media(max-width:900px){.hv-cinta--1{stroke-width:24}.hv-cinta--2{stroke-width:18}.hv-cinta--3{stroke-width:11}}
@media(prefers-reduced-motion:reduce){
  .nav-logo{transform:none !important}
  .pie-logo{opacity:1 !important}

  .hero-viz,.hv-linea,.hv-nodo,.hv-punto-fin,.hv-anillo,.hv-part{animation:none !important}
  .hero-viz{opacity:1;transform:none}
  .hv-linea{stroke-dashoffset:0}
  .hv-nodo,.hv-punto-fin{opacity:1}
  .hv-anillo{opacity:.3;transform:scale(1)}
  .hv-part{opacity:var(--o,.6)}
}
.hero-in{position:relative;z-index:1;flex:1;display:flex;align-items:center;padding-top:calc(var(--nav-h) + 40px);padding-bottom:32px}
.hero-in > .w{width:100%}
.hero h1{font-size:clamp(1.95rem,3.9vw,3.4rem);line-height:1.06;letter-spacing:-.034em;max-width:26ch;font-weight:600}
.hero h1 em{font-style:normal;display:block}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .hero h1 em > span{background:var(--g-marca);-webkit-background-clip:text;background-clip:text;color:transparent}
}
.hero h1 em > span{color:var(--brand-l)}
.hero .lede{font-size:1.125rem;line-height:1.6;color:var(--tx-2);max-width:52ch;margin-top:30px}
.hero-act{display:flex;flex-wrap:wrap;gap:28px;align-items:center;margin-top:36px}

/* El titular no aparece de golpe: cada fragmento entra desenfocado y se
   afila. Es tiempo, no scroll, porque ocurre al cargar la página. */
.fr{display:inline-block;opacity:0;filter:blur(11px);transform:translateY(.32em);
  animation:afila .95s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes afila{to{opacity:1;filter:blur(0);transform:none}}
.hero .lede,.hero-act,.hero-data{opacity:0;animation:sube .9s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes sube{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.hero-data{position:relative;z-index:1;border-top:1px solid var(--line)}
.hero-data .w{display:grid;grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.hero-data .w{grid-template-columns:repeat(4,1fr)}}
.hero-data div{padding:24px 30px 30px 0}
.hero-data b{display:block;font-family:var(--f-d);font-size:1.5rem;font-weight:600;letter-spacing:-.03em;color:#fff;margin-bottom:6px}
.hero-data span{display:block;font-family:var(--f-b);font-size:.9375rem;line-height:1.45;
  letter-spacing:0;color:var(--tx-2);max-width:26ch}
@media(max-width:900px){.hero-in{padding-top:calc(var(--nav-h) + 40px)}.hero .lede{margin-top:32px}.hero-act{margin-top:40px;gap:26px}}

@media(min-width:900px) and (max-height:860px){
  .hero h1{font-size:clamp(1.75rem,2.9vw,2.5rem)}
  .hero .lede{font-size:1.0625rem;margin-top:24px}
  .hero-act{margin-top:28px}
  .hero-in{padding-top:calc(var(--nav-h) + 24px);padding-bottom:24px}
}

.ul{font-family:var(--f-m);font-size:14px;letter-spacing:.03em;text-decoration:none;color:#fff;
  padding-bottom:9px;position:relative;display:inline-block;white-space:nowrap}
.ul::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform-origin:left;transition:transform .5s var(--ease)}
.ul:hover::after{transform:scaleX(0);transform-origin:right}
.ul--q{color:var(--tx-2)}

/* Botón de acción: ámbar, complementario del cian de marca. Es el
   elemento que más lejos está del resto de la página en la rueda de
   color, y por eso el ojo lo localiza primero. */
.cta{display:inline-flex;align-items:center;gap:11px;font-family:var(--f-m);font-size:13.5px;font-weight:600;
  letter-spacing:.02em;text-decoration:none;padding:15px 28px;border-radius:999px;white-space:nowrap;
  background:var(--g-accion);color:#1B0E02;border:0;cursor:pointer;
  box-shadow:0 10px 30px -12px rgba(255,122,61,.55);
  transition:transform .35s var(--ease),box-shadow .45s var(--ease)}
.cta::after{content:"→";transition:transform .35s var(--ease)}
.cta:hover{transform:translateY(-2px);box-shadow:0 18px 42px -14px rgba(255,122,61,.75)}
.cta:hover::after{transform:translateX(4px)}
.cta--q{background:transparent;color:#fff;border:1px solid var(--line-2);box-shadow:none}
.cta--q:hover{border-color:var(--brand-l);box-shadow:0 12px 34px -16px rgba(0,167,219,.6)}
/* El boton secundario hereda su color del texto de la superficie, para que
   siga leyendose cuando la seccion es clara. */
.s--claro .cta--q,.s--claro .cta--q:hover{color:var(--tx)}

/* ─── Secciones ─── */
.s{padding-block:74px}
.s--air{padding-block:88px}
.s--e{background:linear-gradient(180deg,rgba(108,75,244,.07),rgba(0,167,219,.025) 55%,transparent)}
@media(max-width:900px){.s{padding-block:58px}.s--air{padding-block:66px}}

/* Pegado a una banda no hace falta el aire completo: la propia banda ya
   separa, y el degradado del borde funde con el color de al lado. Sin esto
   quedaban 150 px de nada entre la palabra y el primer contenido. */
.banda + .s,.banda + .s--air{padding-top:clamp(40px,4.2vw,58px)}
.s:has(+ .banda),.s--air:has(+ .banda){padding-bottom:clamp(40px,4.2vw,58px)}
@media(max-width:900px){
  .banda + .s,.banda + .s--air{padding-top:40px}
  .s:has(+ .banda),.s--air:has(+ .banda){padding-bottom:40px}
}
h2{font-size:clamp(1.9rem,4.2vw,3.3rem);max-width:19ch}
h3{font-size:1.4375rem;letter-spacing:-.02em}
.lede{font-size:1.25rem;line-height:1.62;color:var(--tx-2);max-width:46ch}
.prose{max-width:58ch;color:var(--tx-2)}

/* Keyline: hilo de 1 px teñido de marca que se desvanece por los
   extremos y arrastra un halo hacia abajo. */
.kl{position:relative;height:1px;border:0;margin:0 0 30px;
  background:linear-gradient(90deg,transparent,rgba(0,167,219,.55) 18%,rgba(108,75,244,.55) 62%,transparent)}
.kl::after{content:"";position:absolute;left:0;right:0;top:1px;height:64px;pointer-events:none;
  background:radial-gradient(56% 100% at 46% 0,rgba(108,75,244,.16),transparent 74%)}

.sh{display:grid;gap:26px}
@media(min-width:1000px){.sh{grid-template-columns:1.12fr .88fr;gap:80px;align-items:end}}
.sh-i{font-family:var(--f-m);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--tx-3);
  margin:0 0 22px;display:flex;align-items:baseline;gap:15px}
.sh-i b{font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.14em;color:var(--brand-l)}
.sh h2{margin:0;max-width:none}
.sh-d{color:var(--tx-2);font-size:1.0625rem;line-height:1.66;max-width:44ch;margin:0}
.sh-a{margin-top:24px}
@media(min-width:1000px){.sh-d{padding-bottom:8px}}

/* Resplandor interior teñido en los paneles enmarcados */
.glow{position:relative;isolation:isolate}
.glow::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:radial-gradient(120% 76% at 50% -12%,rgba(162,144,255,.16),transparent 62%)}

/* ─── Superficie clara ───
   La web alterna: oscuro para lo que impresiona, claro para lo que se lee
   con calma. Cada sección clara redefine las variables de color y el resto
   del sistema se adapta solo. */
.s--claro{
  --tx:#1A1D38; --tx-2:#45455E; --tx-3:#585672;
  --line:rgba(26,29,56,.13); --line-2:rgba(26,29,56,.24);
  --brand-l:#00658F; --iris-l:#4E33C4;
  color:var(--tx);
  background:
    radial-gradient(120% 90% at 88% 4%,rgba(0,167,219,.10),transparent 58%),
    radial-gradient(110% 80% at 6% 96%,rgba(108,75,244,.11),transparent 58%),
    linear-gradient(178deg,#F6F5FC 0%,#ECEAF7 52%,#E4E2F3 100%);
}
.s--claro h1,.s--claro h2,.s--claro h3,.s--claro h4{color:#141733}
.s--claro .ul,.s--claro .sect b,.s--claro .srv-out,
.s--claro .tarifa b,.s--claro .cmp-f b,.s--claro .aside-d a,.s--claro .cons a{color:#141733}
.s--claro .rel a{background:rgba(255,255,255,.66);border-color:rgba(26,29,56,.13)}
.s--claro .rel b{color:#141733}
.s--claro .rel span{color:#00658F}
.s--claro .rel p{color:#4C4C68}
.s--claro .rel-a{color:#141733}
.s--claro .rel a:hover{background:linear-gradient(160deg,rgba(108,75,244,.12),rgba(0,167,219,.07))}
.s--claro .cmp-c{background:linear-gradient(180deg,rgba(224,112,90,.09),transparent 60%),rgba(255,255,255,.66)}
.s--claro .cmp-c--y{background:linear-gradient(180deg,rgba(0,201,160,.16),rgba(0,167,219,.06) 60%),rgba(255,255,255,.74);
  border-color:rgba(0,150,120,.4)}
.s--claro .cmp-v{color:#C0492F}
.s--claro .cmp-c--y .cmp-v{color:#006B58}
.s--claro .cmp-c--y .cmp-t{color:#006B58}
.s--claro .cmp-b{background:rgba(26,29,56,.12)}
.s--claro .cmp-f b,.s--claro .stat{color:#006B58}
.s--claro .tbl [data-k] td{color:#C0492F}
.s--claro .tbl [data-k] td.g,.s--claro .tbl tfoot td.g{color:#006B58}
.s--claro .tbl tfoot td{color:#C0492F}
.s--claro .marq li{background:rgba(255,255,255,.6);border-color:rgba(26,29,56,.16)}
.s--claro .shot{background:#DEDCEF}
.s--claro .glow::before{background:radial-gradient(120% 76% at 50% -12%,rgba(91,63,214,.10),transparent 62%)}
.s--claro .kl{background:linear-gradient(90deg,transparent,rgba(0,121,173,.4) 18%,rgba(91,63,214,.4) 62%,transparent)}
.s--claro .kl::after{background:radial-gradient(56% 100% at 46% 0,rgba(91,63,214,.10),transparent 74%)}
.s--claro .fld input,.s--claro .fld select{color:#141733}
.s--claro .fld input::placeholder{color:#8B89A6}
.s--claro ::selection{background:#5B3FD6;color:#fff}

/* Las bandas hacen de bisagra: el degradado del borde funde con la sección
   que viene, así el salto de claro a oscuro nunca es un corte seco. */
.s--claro + .banda .banda-tinte::after,
.banda + .s--claro::before{content:"";position:absolute;left:0;right:0;height:120px;pointer-events:none}
.s--claro + .banda .banda-tinte::after{top:0;height:56px;background:linear-gradient(180deg,rgba(228,226,243,.55),transparent)}
.banda + .s--claro{position:relative}
.banda + .s--claro::before{top:0;height:76px;background:linear-gradient(180deg,rgba(23,26,51,.5),transparent)}

/* ─── Mapa ─── */
/* El mapa va a sangre: se sale del carril de texto ocupando el ancho de la
   ventana. El recorte lo hace preserveAspectRatio="slice", así que en
   pantallas muy anchas pierde cielo y desierto, nunca la ruta ni las etiquetas. */
.mapa-marco{position:relative;margin-top:72px;margin-inline:calc(50% - 50vw);
  width:100vw;max-width:100vw;border:0;border-radius:0;overflow:hidden;background:#111530;
  height:clamp(340px,38vw,560px)}
.mapa-marco::before,.mapa-marco::after{content:"";position:absolute;left:0;right:0;height:76px;
  pointer-events:none;z-index:2}
.mapa-marco::before{top:0;background:linear-gradient(180deg,rgba(17,21,48,.72),transparent)}
.mapa-marco::after{bottom:0;background:linear-gradient(0deg,rgba(17,21,48,.72),transparent)}
.viz--mapa{display:block;width:100%;height:100%;overflow:hidden}
.mapa-pie{margin:34px auto 0;max-width:56ch;text-align:center;font-size:1.0625rem;
  line-height:1.6;color:var(--tx-2)}
@media(max-width:900px){.mapa-marco{height:auto;margin-top:52px}
  .viz--mapa{height:auto}}
.mapa__mar{fill:#111530}
.mapa__tierra path{fill:#272C50;stroke:#111530;stroke-width:.5}
.mapa__foco path{fill:#2A4E7E;stroke:#111530;stroke-width:.5}
.mapa__rumbo{fill:none;stroke:var(--brand);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke-dashoffset 3s var(--ease)}
.rv.in .mapa__rumbo{stroke-dashoffset:0 !important}
.mapa__tramo{fill:none;stroke:var(--brand);stroke-width:2;opacity:.6}
.mapa__nodo{fill:var(--brand);stroke:#111530;stroke-width:2;opacity:0;transform:scale(0);transform-origin:center;
  transition:opacity .36s var(--ease),transform .36s var(--ease)}
.rv.in .mapa__nodo{opacity:1;transform:scale(1)}
.mapa__nodo--fin{fill:var(--ambar)}
.mapa__fabricas circle{fill:var(--iris-l);opacity:0;transform:scale(0);transform-origin:center;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.rv.in .mapa__fabricas circle{opacity:.6;transform:scale(1)}
.mapa__puertos circle{fill:#111530;stroke:var(--brand);stroke-width:2.5;opacity:0;transform:scale(0);
  transform-origin:center;transition:opacity .34s var(--ease),transform .34s var(--ease)}
.rv.in .mapa__puertos circle{opacity:1;transform:scale(1)}
.mapa__ultima{fill:none;stroke:var(--ambar);stroke-width:2;stroke-dasharray:4 4;opacity:0;
  transition:opacity .4s var(--ease) 2.4s}
.rv.in .mapa__ultima{opacity:.9}
.mapa__halo{fill:var(--ambar);opacity:0;transform-origin:center;transition:opacity .4s var(--ease)}
.rv.in .mapa__halo{opacity:.2;animation:pulso 2.8s var(--ease) 2.8s infinite}
@keyframes pulso{0%{transform:scale(.45);opacity:.34}100%{transform:scale(1.5);opacity:0}}
.mapa__etiqueta{font-family:var(--f-m);font-size:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  fill:#fff;paint-order:stroke;stroke:#111530;stroke-width:4;stroke-linejoin:round;opacity:0;transition:opacity .36s var(--ease)}
.rv.in .mapa__etiqueta{opacity:1}
.mapa__etiqueta--fin{fill:var(--ambar)}
.mapa__grupo{font-family:var(--f-m);font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  fill:var(--brand-l);paint-order:stroke;stroke:#111530;stroke-width:3.5;stroke-linejoin:round;opacity:0;transition:opacity .36s var(--ease)}
.rv.in .mapa__grupo{opacity:1}
.mapa__mar-txt{font-family:var(--f-m);font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  fill:var(--tx-3);opacity:0;transition:opacity .5s var(--ease)}
.rv.in .mapa__mar-txt{opacity:1}

/* ─── Método ─── */
.met{margin-top:88px;border-top:1px solid var(--line)}
.met-i{display:grid;gap:18px;padding:44px 0;border-bottom:1px solid var(--line);position:relative}
@media(min-width:1000px){.met-i{grid-template-columns:130px 1.05fr 1fr;gap:56px;align-items:start}}
@media(min-width:1000px){
  .met-i::before{content:"";position:absolute;z-index:0;pointer-events:none;
    top:0;bottom:0;left:clamp(-56px,-3.4vw,-22px);right:clamp(-56px,-3.4vw,-22px);
    opacity:0;transition:opacity .45s var(--ease);
    background:linear-gradient(100deg,rgba(0,167,219,.09),rgba(108,75,244,.05) 58%,transparent 90%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
  .met-i:hover::before{opacity:1}
  .met-i > *{position:relative;z-index:1}
}
.met-n{font-family:var(--f-m);font-size:2.25rem;font-weight:600;letter-spacing:-.04em;margin:0;line-height:1;
  color:var(--line-2)}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .met-n{background:var(--g-marca);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.55}
}
.met-i:hover .met-n{opacity:1}
.met-i h3{margin-bottom:14px}
.met-i p{color:var(--tx-2);font-size:1.0625rem;margin:0;max-width:48ch}

/* ─── Sub-ingredientes numerados (1.1, 1.2, 1.3) ─── */
.sub{list-style:none;margin:0;padding:0}
@media(max-width:999px){.sub{margin-top:26px}}
.sub li{display:flex;gap:18px;padding:13px 0;border-top:1px solid var(--line);
  font-size:.9375rem;line-height:1.5;color:var(--tx-2)}
.sub li b{font-family:var(--f-m);font-size:11.5px;font-weight:400;letter-spacing:.1em;color:var(--brand-l);
  flex:none;width:30px;padding-top:3px;font-variant-numeric:tabular-nums}
/* Marca de viñeta: un rombo de marca en las listas afirmativas y un aspa
   en la de descartes. Antes iba un ordinal, que daba a entender un orden
   que esas listas no tienen. */
.sub li::before{content:"";flex:none;width:6px;height:6px;margin-top:9px;border-radius:1px;
  background:var(--brand-l);transform:rotate(45deg)}
.sub li:has(b)::before{display:none}
.sub--no li::before{width:auto;height:auto;margin-top:0;background:none;transform:none;
  border-radius:0;content:"\00D7";color:var(--arcilla);font-family:var(--f-m);font-size:16px;
  line-height:1.45;font-weight:600}

/* ─── Herramientas: marquesina continua ─── */
.herr{margin-top:72px}
.marq{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent)}
.marq-t{display:flex;width:max-content;animation:corre 46s linear infinite}
.marq ul{list-style:none;margin:0;padding:0;display:flex}
.marq:hover .marq-t,.marq:focus-within .marq-t{animation-play-state:paused}
@keyframes corre{to{transform:translateX(-50%)}}
.marq li{font-family:var(--f-m);font-size:12px;letter-spacing:.08em;color:var(--tx-2);white-space:nowrap;
  border:1px solid var(--line-2);border-radius:999px;padding:9px 18px;margin-right:12px;
  background:rgba(255,255,255,.05)}

/* Carrusel de logotipos: solo marcas, sin texto ni cápsula.
   Cada logo lleva su propia altura óptica en --h, porque un
   monograma cuadrado y un logotipo apaisado no pesan igual a la vista. */
.lg-defs{position:absolute;width:0;height:0;overflow:hidden}
.marq--logos li{border:0;background:none;padding:0;margin-right:58px;display:flex;align-items:center}
.marq--logos .lg{height:var(--h,22px);width:auto;fill:currentColor;color:var(--tx-2);
  opacity:.66;transition:opacity .35s var(--ease),color .35s var(--ease)}
.marq--logos li:hover .lg{opacity:1;color:var(--tx)}
.s--claro .marq--logos .lg{color:var(--tx-2)}
@media(max-width:700px){.marq--logos li{margin-right:44px}.marq--logos .lg{height:calc(var(--h,22px) * .86)}}

/* ─── Sectores ─── */
.sect{margin-top:80px}
.sect ul{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
@media(min-width:900px){.sect ul{grid-template-columns:repeat(4,1fr);border-top:0}}
.sect li{padding:24px 28px 30px 0;border-bottom:1px solid var(--line)}
@media(min-width:900px){.sect li{border-top:1px solid var(--line);border-bottom:0}}
.sect b{display:block;font-family:var(--f-d);font-size:1.0625rem;font-weight:600;letter-spacing:-.015em;color:#fff;margin-bottom:10px}
.sect span{font-size:.9375rem;line-height:1.5;color:var(--tx-2);display:block;max-width:30ch}

/* ─── Servicios ─── */
.srv{margin-top:96px;border-top:1px solid var(--line)}
.srv-i{display:grid;gap:24px;padding:52px 0;border-bottom:1px solid var(--line);position:relative}
@media(min-width:1000px){.srv-i{grid-template-columns:152px 1.05fr 1fr;gap:52px;align-items:start}}
/* El realce del ratón va en una capa aparte, ancha de más y con los dos
   costados difuminados. Antes el degradado empezaba justo donde empieza
   el rótulo, así que el borde del recuadro cortaba la primera letra. */
@media(min-width:1000px){
  .srv-i::before{content:"";position:absolute;z-index:0;pointer-events:none;
    top:0;bottom:0;left:clamp(-56px,-3.4vw,-22px);right:clamp(-56px,-3.4vw,-22px);
    opacity:0;transition:opacity .45s var(--ease);
    background:linear-gradient(100deg,rgba(108,75,244,.14),rgba(0,167,219,.055) 58%,transparent 90%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
  .srv-i:hover::before{opacity:1}
  .srv-i > *{position:relative;z-index:1}
}
.srv-n{font-family:var(--f-m);font-weight:600;font-size:11px;letter-spacing:.18em;line-height:1.55;
  text-transform:uppercase;color:var(--tx-2);padding-top:10px;margin:0;
  transition:color .3s var(--ease)}
.srv-i:hover .srv-n{color:var(--brand-l)}
.srv-i h3{margin-bottom:16px;max-width:16ch}
.srv-i > div > p{color:var(--tx-2);font-size:1.0625rem;margin-bottom:20px;max-width:44ch}
.srv-out{font-family:var(--f-d);font-weight:600;font-size:1.1875rem;line-height:1.35;letter-spacing:-.015em;color:#fff;max-width:30ch}
.srv-spec{list-style:none;margin:0;padding:0;font-family:var(--f-m);font-size:13.5px;line-height:1.6}
.srv-spec li{padding:11px 0;border-bottom:1px solid var(--line);color:var(--tx-2);display:flex;gap:15px}
.srv-spec li::before{content:"";flex:none;width:6px;height:6px;margin-top:9px;border-radius:1px;
  background:var(--brand-l);transform:rotate(45deg)}
.srv-b{display:flex;flex-wrap:wrap;gap:28px;align-items:center;margin-top:26px}
.srv-p{font-family:var(--f-m);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);margin:0}
.srv-p b{color:var(--ambar);font-weight:600}
.s--claro .srv-p b{color:#006B58}

/* ─── Comparativa ─── */
.cmp{display:grid;gap:20px;margin-top:72px}
@media(min-width:800px){.cmp{grid-template-columns:1fr 1fr;gap:28px}}
.cmp-c{border:1px solid var(--line-2);border-radius:12px;padding:40px 34px;
  background:linear-gradient(180deg,rgba(224,112,90,.07),transparent 60%),rgba(255,255,255,.016)}
.cmp-c--y{border-color:rgba(0,201,160,.20);
  background:linear-gradient(180deg,rgba(0,201,160,.13),rgba(0,167,219,.05) 60%),rgba(255,255,255,.02)}
.cmp-t{font-family:var(--f-m);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-3);margin:0 0 26px}
.cmp-c--y .cmp-t{color:var(--jade)}
.cmp-v{font-family:var(--f-d);font-size:clamp(2.6rem,7vw,4rem);font-weight:600;letter-spacing:-.04em;line-height:1;
  margin:0;color:var(--arcilla);font-variant-numeric:tabular-nums}
.cmp-c--y .cmp-v{color:var(--jade)}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .cmp-c--y .cmp-v{background:linear-gradient(100deg,var(--jade),var(--brand-l));
    -webkit-background-clip:text;background-clip:text;color:transparent}
}
.cmp-b{height:5px;background:rgba(255,255,255,.09);margin-top:28px;overflow:hidden;border-radius:999px}
.cmp-b i{display:block;height:100%;width:var(--w2);background:var(--arcilla);transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--ease) .25s}
.cmp-c--y .cmp-b i{background:linear-gradient(90deg,var(--jade),var(--brand))}
.rv.in .cmp-b i{transform:scaleX(1)}
.cmp-f{font-family:var(--f-m);font-size:11.5px;letter-spacing:.06em;color:var(--tx-3);margin:20px 0 0}
.cmp-f b{color:var(--jade)}

.tbl{width:100%;border-collapse:collapse;margin-top:60px;font-family:var(--f-m);font-size:13.5px}
.tbl caption{text-align:left;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-3);padding-bottom:22px}
.tbl th,.tbl td{padding:15px 8px;border-bottom:1px solid var(--line);text-align:right}
.tbl thead th{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);font-weight:400}
.tbl thead th:first-child,.tbl tbody th,.tbl tfoot th{text-align:left}
.tbl tbody th,.tbl tfoot th{font-weight:400;color:var(--tx)}
.tbl td{color:var(--tx-2);font-variant-numeric:tabular-nums}
.tbl [data-k] th{color:#fff}
.tbl [data-k] th i{display:block;font-style:normal;font-size:11px;color:var(--brand-l);letter-spacing:.06em;margin-top:3px}
.tbl [data-k] td{color:var(--arcilla)}
.tbl [data-k] td.g{color:var(--jade);font-weight:600}
.tbl tfoot th{color:#fff;font-weight:600}
.tbl tfoot td{color:var(--arcilla);font-weight:600;font-size:1.0625rem}
.tbl tfoot td.g{color:var(--jade)}
@media(max-width:620px){.tbl th,.tbl td{padding:11px 3px;font-size:11.5px}}

/* ─── Pasos ─── */
.pasos{display:grid;gap:44px;margin-top:76px}
@media(min-width:900px){.pasos{grid-template-columns:repeat(3,1fr);gap:56px}}
.paso{border-top:1px solid var(--line-2);padding-top:26px}
.paso span{font-family:var(--f-m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brand-l);display:block;margin-bottom:20px}
.paso h3{font-size:1.25rem;margin-bottom:12px}
.paso p{font-size:1rem;color:var(--tx-2);margin:0}

/* ─── Tarjetas de enlace (páginas relacionadas) ─── */
.rel{display:grid;gap:20px;margin-top:64px}
@media(min-width:820px){.rel{grid-template-columns:repeat(3,1fr);gap:24px}}
.rel a{display:block;text-decoration:none;border:1px solid var(--line);border-radius:12px;padding:30px 28px;
  background:rgba(255,255,255,.018);transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease)}
.rel a:hover{border-color:var(--line-2);transform:translateY(-3px);
  background:linear-gradient(160deg,rgba(108,75,244,.12),rgba(0,167,219,.05))}
.rel span{font-family:var(--f-m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-l);display:block;margin-bottom:18px}
.rel b{display:block;font-family:var(--f-d);font-size:1.1875rem;font-weight:600;letter-spacing:-.02em;color:#fff;margin-bottom:10px}
.rel p{font-size:.9375rem;color:var(--tx-2);margin:0}
.rel-a{display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  font-family:var(--f-m);font-size:12.5px;letter-spacing:.02em;color:#fff}
.rel-a::after{content:"→";transition:transform .3s var(--ease)}
.rel a:hover .rel-a::after{transform:translateX(4px)}

/* ─── Precios ─── */
.tarifa{margin-top:72px}
.tarifa + .tarifa{margin-top:64px}
.tarifa table{width:100%;border-collapse:collapse}
.tarifa caption{text-align:left;font-family:var(--f-m);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brand-l);padding-bottom:20px}
.tarifa th,.tarifa td{border-bottom:1px solid var(--line);padding:24px 0;vertical-align:top;text-align:left}
.tarifa td:last-child{text-align:right;white-space:nowrap;padding-left:24px}
.tarifa b{display:block;font-family:var(--f-d);font-size:1.0625rem;font-weight:600;letter-spacing:-.015em;color:#fff;margin-bottom:8px}
.tarifa small{display:block;font-size:.9375rem;line-height:1.55;color:var(--tx-2);max-width:52ch}
.tarifa .imp{font-family:var(--f-d);font-size:1.375rem;font-weight:600;letter-spacing:-.03em;color:var(--ambar);
  font-variant-numeric:tabular-nums}
.nota-legal{margin-top:44px;font-family:var(--f-m);font-size:11.5px;letter-spacing:.08em;color:var(--tx-3);
  display:flex;flex-wrap:wrap;gap:10px 26px}

/* ─── Fotografía ─── */
.duo{display:grid;gap:24px;margin-top:72px}
.duo--txt{align-items:start}
@media(min-width:820px){.duo--txt{grid-template-columns:1fr 1fr;gap:72px}}
@media(min-width:820px){.duo{grid-template-columns:1fr 1fr;gap:40px;align-items:center}}
.shot{overflow:hidden;border-radius:12px;background:var(--bg-3);aspect-ratio:4/3}
.shot img{width:100%;height:100%;object-fit:cover;filter:grayscale(.7) contrast(1.05) brightness(.92) saturate(1.1);
  transform:scale(1.06);transition:transform 1.3s var(--ease),filter 1.3s var(--ease)}
.rv.in .shot img{transform:scale(1);filter:grayscale(.2) contrast(1.02) brightness(1) saturate(1.15)}
.shot--panor{aspect-ratio:21/9;margin-top:88px}
.shot--ret{aspect-ratio:3/4}
.shot-cap{margin-top:18px;font-family:var(--f-m);font-size:12px;letter-spacing:.1em;color:var(--tx-3)}

/* ─── Bandas a sangre completa ───
   Imagen + degradado tintado + palabra gigante. Rompen las rachas largas
   de texto plano y llevan color de verdad a media página, no solo acento.
   El desplazamiento del fondo y el crecimiento de la palabra van atados
   al scroll con animation-timeline: view(); sin soporte, quedan fijos
   y siguen leyéndose bien: es mejora progresiva, no un requisito. */
.banda{position:relative;overflow:hidden;padding-block:clamp(22px,2.6vw,40px);
  view-timeline:--banda block;view-timeline-inset:0}
.banda-media{position:absolute;inset:0}
.banda-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.banda-tinte{position:absolute;inset:0}
.banda--fria .banda-tinte{background:
  linear-gradient(180deg,rgba(23,26,51,.42),rgba(23,26,51,.34) 42%,rgba(23,26,51,.56)),
  radial-gradient(56% 66% at 16% 24%,rgba(0,167,219,.20),transparent 66%),
  radial-gradient(58% 70% at 88% 82%,rgba(108,75,244,.20),transparent 66%)}
.banda--iris .banda-tinte{background:
  linear-gradient(180deg,rgba(23,26,51,.42),rgba(23,26,51,.34) 42%,rgba(23,26,51,.56)),
  radial-gradient(56% 66% at 24% 20%,rgba(108,75,244,.24),transparent 66%),
  radial-gradient(58% 70% at 80% 84%,rgba(0,167,219,.18),transparent 66%)}
/* El velo de esta banda era neutro y apagaba la foto hasta dejarla gris.
   Ahora el oscurecido va teñido de verde azulado y los focos de color
   suben: mismo contraste para la palabra, la mitad de gris. */
.banda--jade .banda-tinte{background:
  linear-gradient(180deg,rgba(6,30,36,.34),rgba(6,30,36,.16) 45%,rgba(6,30,36,.50)),
  radial-gradient(62% 74% at 16% 26%,rgba(0,214,168,.42),transparent 68%),
  radial-gradient(64% 76% at 88% 80%,rgba(0,178,232,.34),transparent 68%)}
.banda--calida .banda-tinte{background:
  linear-gradient(180deg,rgba(23,26,51,.42),rgba(23,26,51,.34) 42%,rgba(23,26,51,.56)),
  radial-gradient(56% 66% at 84% 22%,rgba(0,201,160,.20),transparent 66%),
  radial-gradient(58% 70% at 12% 84%,rgba(255,174,69,.20),transparent 66%)}
.banda-rotulo{position:relative;z-index:2;margin:0 0 clamp(8px,1vw,16px);text-align:center;
  font-family:var(--f-m);font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.72);pointer-events:none}
.banda-palabra{position:relative;z-index:2;margin:0;max-width:none;width:100%;
  padding-inline:clamp(18px,3vw,52px);
  filter:drop-shadow(0 1px 3px rgba(7,8,15,.55)) drop-shadow(0 14px 34px rgba(7,8,15,.42))}
.banda-txt{width:100%;height:auto;display:block;overflow:visible}
.banda-txt text{font-family:var(--f-d);font-weight:600;font-size:110px;letter-spacing:-.045em;font-variant-ligatures:none}
.banda--fria .banda-txt text{fill:url(#deg-frio)}
.banda--calida .banda-txt text{fill:url(#deg-calido)}
.banda--iris .banda-txt text{fill:url(#deg-iris)}
.banda--jade .banda-txt text{fill:url(#deg-jade)}

/* Banda de la confianza: la palabra cruza de izquierda a derecha y una
   flecha se dibuja delante, como quien empuja la puerta y entra. Solo
   translate y stroke-dashoffset, así que el compositor lo resuelve sin
   repintar la foto que hay debajo. */
/* El degradado del texto es objectBoundingBox y un trazo horizontal tiene
   caja de altura cero: con ese degradado la línea no se pinta. La flecha
   usa por eso un degradado en coordenadas de usuario. */
.puerta-f{fill:none;stroke:url(#deg-jade-f);stroke-width:12;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}

/* Banda del regreso: el mismo recurso al revés. La palabra vuelve de
   derecha a izquierda y delante gira una rueda de retorno, porque el que
   vuelve no entra por primera vez.
   El giro va sobre el centro de la rueda en unidades del viewBox, no
   sobre su caja: la caja no está centrada en la circunferencia por el
   hueco del arco, y girar sobre ella haría bailar el símbolo. */
.vuelta-f__a{fill:none;stroke:url(#deg-calido-f);stroke-width:13;stroke-linecap:round}
.vuelta-f__p{fill:url(#deg-calido-f);stroke:none}
.vuelta-r{transform-box:view-box;transform-origin:74px 64px}
@media(max-width:640px){
  .banda{padding-block:18px}
  .banda-rotulo{font-size:9.5px;letter-spacing:.16em;margin-bottom:8px}
}
@supports (animation-timeline: view()){
  .banda-media img{animation:banda-flota linear both;animation-timeline:--banda;animation-range:cover 0% cover 100%}
  @keyframes banda-flota{from{transform:translateY(-6%) scale(1.16)}to{transform:translateY(6%) scale(1.16)}}
  .banda-palabra,.banda-rotulo{animation:banda-asoma linear both;
    animation-timeline:--banda;animation-range:cover 0% cover 100%}
  @keyframes banda-asoma{
    0%{transform:translateY(58%);opacity:0}
    16%{opacity:1}
    50%{transform:translateY(0)}
    84%{opacity:1}
    100%{transform:translateY(-58%);opacity:0}
  }
  /* La banda de la confianza no sube: cruza. El vaivén vertical que
     llevan las otras tres se le quita y solo queda el recorrido lateral,
     porque sumados daban una diagonal y lo que se pide es una puerta. */
  .banda--jade .banda-palabra{animation-name:banda-asoma-plano}
  @keyframes banda-asoma-plano{0%{opacity:0}16%,84%{opacity:1}100%{opacity:0}}
  .banda--jade .puerta-g{animation:puerta-cruza linear both;
    animation-timeline:--banda;animation-range:cover 0% cover 100%}
  @keyframes puerta-cruza{from{transform:translateX(-34px)}to{transform:translateX(34px)}}
  .banda--calida .banda-palabra{animation-name:banda-asoma-plano}
  .banda--calida .vuelta-g{animation:vuelta-cruza linear both;
    animation-timeline:--banda;animation-range:cover 0% cover 100%}
  @keyframes vuelta-cruza{from{transform:translateX(34px)}to{transform:translateX(-34px)}}
  .banda--calida .vuelta-r{animation:rueda linear both;
    animation-timeline:--banda;animation-range:cover 0% cover 100%}
  @keyframes rueda{from{transform:rotate(66deg)}to{transform:rotate(-262deg)}}
  .banda--jade .puerta-f__l{animation:puerta-traza linear both;
    animation-timeline:--banda;animation-range:cover 8% cover 52%}
  .banda--jade .puerta-f__p{animation:puerta-traza linear both;
    animation-timeline:--banda;animation-range:cover 34% cover 68%}
  @keyframes puerta-traza{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

  /* Degradado que cambia con el scroll también en las bandas. Un
     stop-color sí se puede animar, y la línea de tiempo con nombre de la
     propia banda le sirve de reloj: por eso la animación va sobre las
     paradas del degradado y no sobre el texto, que en SVG no admite el
     recorte de fondo que usan los rótulos.

     Cada banda se mueve dentro de su propia familia de color, así que el
     embudo se sigue leyendo por el tono y a la vez nada se queda quieto. */
  .banda-txt stop{animation:linear both;animation-timeline:--banda;animation-range:cover 0% cover 100%}
  .banda--jade .banda-txt stop:nth-child(1){animation-name:tj1}
  .banda--jade .banda-txt stop:nth-child(2){animation-name:tj2}
  .banda--jade .banda-txt stop:nth-child(3){animation-name:tj3}
  @keyframes tj1{0%{stop-color:#F2FFFA}34%{stop-color:#CFF3FF}67%{stop-color:#DFFFF3}100%{stop-color:#F2FFFA}}
  @keyframes tj2{0%{stop-color:#A9F0DC}34%{stop-color:#8FE9F0}67%{stop-color:#B6F2D8}100%{stop-color:#A9F0DC}}
  @keyframes tj3{0%{stop-color:#BFEDFF}34%{stop-color:#A9F0DC}67%{stop-color:#9FE2FF}100%{stop-color:#BFEDFF}}

  .banda--fria .banda-txt stop:nth-child(1){animation-name:tf1}
  .banda--fria .banda-txt stop:nth-child(2){animation-name:tf2}
  .banda--fria .banda-txt stop:nth-child(3){animation-name:tf3}
  @keyframes tf1{0%{stop-color:#DCF4FF}34%{stop-color:#E4E1FF}67%{stop-color:#CFEFFF}100%{stop-color:#DCF4FF}}
  @keyframes tf2{0%{stop-color:#C3D8FF}34%{stop-color:#B9C9FF}67%{stop-color:#CBE2FF}100%{stop-color:#C3D8FF}}
  @keyframes tf3{0%{stop-color:#D8CDFF}34%{stop-color:#C6D6FF}67%{stop-color:#E0CFFF}100%{stop-color:#D8CDFF}}

  .banda--iris .banda-txt stop:nth-child(1){animation-name:ti1}
  .banda--iris .banda-txt stop:nth-child(2){animation-name:ti2}
  .banda--iris .banda-txt stop:nth-child(3){animation-name:ti3}
  @keyframes ti1{0%{stop-color:#E7E0FF}34%{stop-color:#D6E6FF}67%{stop-color:#EDDFFF}100%{stop-color:#E7E0FF}}
  @keyframes ti2{0%{stop-color:#D3DEFF}34%{stop-color:#C9E8FF}67%{stop-color:#DCD6FF}100%{stop-color:#D3DEFF}}
  @keyframes ti3{0%{stop-color:#CFF3FF}34%{stop-color:#DCD6FF}67%{stop-color:#C6EEFF}100%{stop-color:#CFF3FF}}

  .banda--calida .banda-txt stop:nth-child(1){animation-name:tc1}
  .banda--calida .banda-txt stop:nth-child(2){animation-name:tc2}
  .banda--calida .banda-txt stop:nth-child(3){animation-name:tc3}
  @keyframes tc1{0%{stop-color:#FFEFD4}34%{stop-color:#FFE3D6}67%{stop-color:#FFF3DF}100%{stop-color:#FFEFD4}}
  @keyframes tc2{0%{stop-color:#FFD9A8}34%{stop-color:#FFCFB0}67%{stop-color:#FFE0B4}100%{stop-color:#FFD9A8}}
  @keyframes tc3{0%{stop-color:#FFC9A6}34%{stop-color:#FFD9A8}67%{stop-color:#FFBFA0}100%{stop-color:#FFC9A6}}
  .banda-rotulo{animation-name:banda-asoma-rotulo}
  @keyframes banda-asoma-rotulo{
    0%{transform:translateY(230%);opacity:0}
    18%{opacity:1}
    50%{transform:translateY(0)}
    82%{opacity:1}
    100%{transform:translateY(-230%);opacity:0}
  }
}
@media(prefers-reduced-motion:reduce){
  .banda-media img,.banda-palabra,.banda-rotulo{animation:none !important;opacity:1;transform:none}
  .puerta-g,.vuelta-g,.vuelta-r{animation:none !important;transform:none}
  .banda-txt stop{animation:none !important}
  .puerta-f__l,.puerta-f__p{animation:none !important;stroke-dashoffset:0}
}


/* ─── Figuras planas ───────────────────────────────────────────
   Un dibujo geométrico por concepto, dentro del bloque cuyo texto
   explica. Nada decorativo: el embudo va donde se habla del embudo.

   Van en SVG y sin color propio: heredan currentColor, así que la
   misma figura se lee sobre fondo claro y sobre fondo oscuro sin
   duplicar nada. El movimiento cuelga de animation-timeline:view(),
   es decir del recorrido de la propia figura por la pantalla — no
   de un reloj —, así que avanza y retrocede con el scroll.

   Sin soporte de timelines o con "reducir movimiento", el trazo
   aparece completo y quieto: la figura nunca queda a medias. */
.fig{display:block;width:100%;max-width:300px;height:auto;margin-top:36px;
  color:var(--brand-l);fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.s--claro .fig{color:#00658F}
.fig .fig-c{stroke-width:2}
.fig .fig-d{fill:currentColor;stroke:none;opacity:.5}
.fig .fig-h{opacity:.14}
.fig .fig-p{fill:currentColor;stroke:none}

/* ─── Respuesta al clic ─────────────────────────────────────────
   El plano no solo se dibuja al bajar: también acusa el dedo. Un
   pulsado cede un píxel y la flecha se retrae; al soltar vuelve. Todo
   con transform, así que no reflota el layout ni cuesta un repintado.
   El desplegable entra escalonado: siete elementos a 34 ms de
   distancia se leen como uno solo que se despliega, no como siete que
   aparecen. */
.cta,.ul,.rel a,.nav-links > a,.dd > button,.nav-lang a{will-change:auto}
.cta:active{transform:translateY(1px) scale(.988);box-shadow:0 8px 20px -12px rgba(255,122,61,.6);transition-duration:.09s}
.cta:active::after{transform:translateX(-2px)}
.ul:active,.rel a:active,.nav-links > a:active,.dd > button:active,.nav-lang a:active,.pie a:active{transform:translateY(1px)}
.ul,.nav-links > a,.dd > button,.nav-lang a,.pie a{transition:color .25s var(--ease),transform .09s var(--ease)}
.rel a:active{transition-duration:.09s}
@media (prefers-reduced-motion: no-preference){
  .dd[data-o] .dd-p a{animation:dd-entra .34s var(--ease) both}
  .dd[data-o] .dd-p a:nth-child(2){animation-delay:.034s}
  .dd[data-o] .dd-p a:nth-child(3){animation-delay:.068s}
  .dd[data-o] .dd-p a:nth-child(4){animation-delay:.102s}
  .dd[data-o] .dd-p a:nth-child(5){animation-delay:.136s}
  .dd[data-o] .dd-p a:nth-child(6){animation-delay:.17s}
  .dd[data-o] .dd-p a:nth-child(7){animation-delay:.204s}
  @keyframes dd-entra{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .fig .fig-t{stroke-dasharray:1;stroke-dashoffset:1;
      animation:fig-traza linear both;animation-timeline:view();animation-range:cover 16% cover 58%}
    @keyframes fig-traza{to{stroke-dashoffset:0}}

    /* el punto que recorre el trazo: cada figura le da el suyo */
    .fig .fig-p{animation:linear both;animation-timeline:view();animation-range:cover 26% cover 82%}
    .fig-embudo .fig-p{animation-name:fig-sale}
    @keyframes fig-sale{from{transform:translateY(-16px);opacity:0}55%{opacity:0}to{transform:translateY(0);opacity:1}}
    /* La puja: el punto sube hasta lo alto de la barra que aguanta más. */
    /* La espiral va donde el texto habla de la segunda y la tercera
       compra: cada vuelta es más ancha porque cada regreso del mismo
       cliente vale más que el anterior. El punto la recorre entera y
       enciende cada compra al pasar por encima. */
    .fig-espiral .fig-p{animation-name:fig-espira;offset-path:path("M139 64.5 A13 13 0 0 1 165 64.5 A21 21 0 0 1 123 64.5 A34 34 0 0 1 191 64.5 A55 55 0 0 1 81 64.5");offset-rotate:0deg}
    @keyframes fig-espira{from{offset-distance:0%;opacity:0}8%{opacity:1}to{offset-distance:100%;opacity:1}}
    .fig-espiral .fig-h{animation:fig-prende linear both;animation-timeline:view()}
    .fig-espiral .fig-h1{animation-range:cover 36% cover 44%}
    .fig-espiral .fig-h2{animation-range:cover 52% cover 60%}
    .fig-espiral .fig-h3{animation-range:cover 68% cover 76%}
    @keyframes fig-prende{to{opacity:.5}}
    .fig-puja .fig-p{animation-name:fig-sube}
    @keyframes fig-sube{from{transform:translateY(52px);opacity:0}18%{opacity:1}to{transform:translateY(0);opacity:1}}
    /* La balanza se inclina con el scroll: el peso está en las compras. */
    .fig-balanza .fig-b{transform-box:view-box;transform-origin:140px 46px;
      animation:fig-inclina linear both;animation-timeline:view();animation-range:cover 18% cover 76%}
    @keyframes fig-inclina{from{rotate:-8deg}to{rotate:6deg}}
    /* Las ondas salen del punto una tras otra, no las tres a la vez. */
    .fig-onda .fig-o1{animation-range:cover 16% cover 42%}
    .fig-onda .fig-o2{animation-range:cover 26% cover 56%}
    .fig-onda .fig-o3{animation-range:cover 36% cover 70%}
    .fig .fig-q circle{animation:fig-cae linear both;animation-timeline:view();animation-range:cover 14% cover 70%}
    @keyframes fig-cae{from{transform:translateY(-14px);opacity:0}30%{opacity:.5}to{transform:translateY(6px);opacity:.5}}



  }
}

@media (prefers-reduced-motion: reduce){
  .fig .fig-t{stroke-dashoffset:0}
  .fig .fig-q circle,.fig .fig-b,.fig .fig-p{animation:none !important;transform:none;rotate:0deg;opacity:1}
  .fig .fig-d{opacity:.5}
}

/* ─── Rótulos de sección ───────────────────────────────────────
   Eran tan pequeños y tan apagados que la vista los saltaba y
   empezaba a leer por el párrafo. Ahora entran primero: más
   cuerpo, más peso y una tinta que recorre tres colores de la
   marca según avanza el scroll — el degradado se pinta sobre el
   texto con background-clip, así que no hay ni una capa de más.

   La misma fuente monoespaciada de antes: cambia la escala, no
   la voz. Y hay color sólido de reserva debajo, para el navegador
   que no sepa recortar el fondo contra las letras. */
.sh-i,
.entrega > .lbl,.sect > .lbl,.herr > .lbl,.aside > .lbl,
.cmp-t,.pie-cta__k,
.hero-in .w > .lbl,.cinehero__txt > .lbl{
  font-family:var(--f-m);
  font-size:clamp(15px,1.14vw,18px);
  font-weight:600;
  letter-spacing:.165em;
  line-height:1.35;
  text-transform:uppercase;
  color:var(--brand-l);
}
.sh-i b{color:#fff;font-weight:700;margin-right:.5em}
.s--claro .sh-i b{color:#141733}

@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .sh-i,
  .entrega > .lbl,.sect > .lbl,.herr > .lbl,.aside > .lbl,
  .cmp-t,.pie-cta__k,
  .hero-in .w > .lbl,.cinehero__txt > .lbl{
    background-image:linear-gradient(96deg,#5FD4F2 0%,#A290FF 26%,#FFAE45 52%,#7FE8CF 78%,#5FD4F2 100%);
    background-size:280% 100%;
    background-position:0% 0;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
  .s--claro .sh-i,
  .s--claro .entrega > .lbl,.s--claro .sect > .lbl,.s--claro .herr > .lbl,.s--claro .aside > .lbl,
  .s--claro .cmp-t{
    background-image:linear-gradient(96deg,#00658F 0%,#5B3FD6 28%,#B4522B 54%,#006B58 78%,#00658F 100%);
  }
  /* el número del antetítulo se queda sólido: hace de ancla */
  .sh-i b{-webkit-text-fill-color:#fff}
  .s--claro .sh-i b{-webkit-text-fill-color:#141733}
}

/* Un punto de mira delante del rótulo: una punta pequeña que avanza
   con el scroll y vuelve al subir. Sirve para que el ojo aterrice ahí
   antes que en el párrafo, que es de lo que iba todo esto.

   Lleva su propio degradado porque el rótulo pinta el suyo recortado
   contra las letras, y ahí currentColor ya es transparente. */
.sh-i,
.entrega > .lbl,.sect > .lbl,.herr > .lbl,.aside > .lbl,
.cmp-t,.pie-cta__k,
.hero-in .w > .lbl,.cinehero__txt > .lbl{
  display:flex;align-items:center;gap:13px;
}
.sh-i::before,
.entrega > .lbl::before,.sect > .lbl::before,.herr > .lbl::before,.aside > .lbl::before,
.cmp-t::before,.pie-cta__k::before,
.hero-in .w > .lbl::before,.cinehero__txt > .lbl::before{
  content:"";flex:none;width:9px;height:12px;
  background:linear-gradient(140deg,#5FD4F2,#A290FF 46%,#FFAE45);
  clip-path:polygon(0 0,100% 50%,0 100%);
}
.s--claro .sh-i::before,
.s--claro .entrega > .lbl::before,.s--claro .sect > .lbl::before,
.s--claro .herr > .lbl::before,.s--claro .aside > .lbl::before,.s--claro .cmp-t::before{
  background:linear-gradient(140deg,#00658F,#5B3FD6 46%,#B4522B);
}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .sh-i::before,
    .entrega > .lbl::before,.sect > .lbl::before,.herr > .lbl::before,.aside > .lbl::before,
    .cmp-t::before,.hero-in .w > .lbl::before,.cinehero__txt > .lbl::before{
      animation:rot-punta linear both;
      animation-timeline:view();
      animation-range:cover 4% cover 58%;
    }
    @keyframes rot-punta{
      from{transform:translateX(-9px);opacity:0}
      34%{opacity:1}
      to{transform:translateX(3px);opacity:1}
    }
  }
}

@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .sh-i,
    .entrega > .lbl,.sect > .lbl,.herr > .lbl,.aside > .lbl,
    .cmp-t,.hero-in .w > .lbl,.cinehero__txt > .lbl{
      animation:rotulo-tinta linear both;
      animation-timeline:view();
      animation-range:cover 8% cover 92%;
    }
    @keyframes rotulo-tinta{from{background-position:0% 0}to{background-position:100% 0}}
  }
}

/* ─── Formulario ─── */
.cont{display:grid;gap:56px;margin-top:8px}
@media(min-width:1000px){.cont{grid-template-columns:1.15fr .85fr;gap:88px}}
.form{display:grid;gap:26px;margin-top:56px;align-content:start}
.fld{display:grid;gap:10px}
.fld[hidden]{display:none}
.fld label{font-family:var(--f-m);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-3)}
.fld input,.fld select{font-family:var(--f-b);font-size:1rem;padding:15px 0;width:100%;background:transparent;
  color:#fff;border:0;border-bottom:1px solid var(--line-2);border-radius:0;transition:border-color .3s var(--ease)}
.fld input::placeholder{color:#75729A}
.fld input:focus,.fld select:focus{border-bottom-color:var(--brand-l);outline:none}
.fld select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--tx-3) 50%),linear-gradient(135deg,var(--tx-3) 50%,transparent 50%);
  background-position:calc(100% - 11px) 24px,calc(100% - 6px) 24px;background-size:5px 5px;background-repeat:no-repeat}
.fld select option{background:var(--bg-2);color:#fff}
.row{display:grid;gap:26px}
@media(min-width:620px){.row{grid-template-columns:1fr 1fr}}
.cons{display:flex;gap:14px;align-items:flex-start;font-size:.9375rem;color:var(--tx-2);line-height:1.55}
.cons input{width:18px;height:18px;flex:none;margin-top:4px;accent-color:var(--brand)}
.cons a{color:#fff}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.stat{font-family:var(--f-m);font-size:12.5px;color:var(--jade);padding:14px 0 0;border-top:1px solid var(--line-2)}
.stat:empty{display:none}
.form-alt{margin-top:14px;font-size:.9375rem;line-height:1.55;color:var(--tx-2)}
.form-alt a{color:#fff;text-underline-offset:3px}
.s--claro .form-alt a{color:#141733}
.aside{margin-top:56px}
.aside ol{list-style:none;margin:0;padding:0;counter-reset:pa}
.aside li{display:flex;gap:18px;padding:20px 0;border-top:1px solid var(--line);color:var(--tx-2);font-size:1rem;line-height:1.55}
.aside li::before{counter-increment:pa;content:counter(pa,decimal-leading-zero);font-family:var(--f-m);
  font-size:11.5px;letter-spacing:.14em;color:var(--brand-l);flex:none;width:28px;padding-top:5px}
.aside-d{margin-top:36px;padding-top:26px;border-top:1px solid var(--line);font-family:var(--f-m);font-size:13px;line-height:1.9;color:var(--tx-3)}
.aside-d a{color:#fff;text-decoration:none;border-bottom:1px solid var(--line-2)}
.aside-d a:hover{border-bottom-color:var(--brand-l)}

/* ─── Bloque de entregables ───
   Cierra las secciones que acababan en un pie suelto y 250 px de vacío.
   Reutiliza la lista numerada del resto de la web para que no parezca
   un parche, y va a dos columnas donde hay sitio. */
.entrega{margin-top:64px}
.entrega .lbl{margin-bottom:26px}
.sub--2{display:grid;gap:0 56px}
@media(min-width:900px){.sub--2{grid-template-columns:1fr 1fr}}
.entrega-a{margin-top:34px}
.entrega-p{margin-top:32px;max-width:62ch;color:var(--tx-2);font-size:1.0625rem}

/* ─── Formulario del hero ───
   Un solo campo. Cuantos menos huecos, más gente lo rellena, y lo único que
   hace falta para devolver una maqueta es saber qué web mirar. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero-form{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px;max-width:620px}
.hero-campo{position:relative;flex:1 1 260px;min-width:0}
.hero-form input{width:100%;font-family:var(--f-b);font-size:1rem;
  padding:15px 46px 15px 20px;border-radius:999px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.06);color:#fff;
  transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}
.hero-form input::placeholder{color:rgba(255,255,255,.5)}
.hero-form input:focus{outline:none;border-color:var(--brand-l);background:rgba(255,255,255,.1)}
.hero-form .cta{flex:0 0 auto}

/* El campo se explica solo: una marca cuando lo que hay dentro sirve y un
   aviso propio bajo el formulario cuando no. El globo del navegador sale en
   el idioma del sistema, tapa el campo y se va al primer clic; aquí el
   mensaje se queda hasta que se arregla. */
.hero-tic{position:absolute;right:17px;top:50%;translate:0 -50%;width:19px;height:19px;
  fill:none;stroke:var(--jade,#00C9A0);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;scale:.6;transition:opacity .3s var(--ease),scale .3s var(--ease);pointer-events:none}
.hero-campo[data-ok] .hero-tic{opacity:1;scale:1}
.hero-campo[data-ok] input{border-color:rgba(0,201,160,.55)}
.hero-form input[aria-invalid="true"]{border-color:#FF9C7D;background:rgba(255,156,125,.10);
  box-shadow:0 0 0 3px rgba(255,156,125,.14)}
.hero-aviso{margin:14px 0 0;font-family:var(--f-m);font-size:12.5px;letter-spacing:.04em;color:#FFB49B}
.hero-aviso:empty{display:none}
.hero-aviso[data-ok]{color:#7FE8CF}
@media(prefers-reduced-motion:reduce){.hero-tic{transition:none}}
.hero-nota{margin-top:18px;font-size:.9375rem;line-height:1.55;color:var(--tx-2);max-width:52ch;
  opacity:0;animation:sube .9s var(--ease) both;animation-delay:var(--d,0s)}
.hero-nota a{color:#fff;text-underline-offset:3px}
@media(max-width:560px){.hero-form .cta,.hero-form .hero-campo{flex:1 1 100%;justify-content:center}}

/* El matiz de la llamada. Va en caja baja y ancho de lectura: la clase
   .lbl es versalita con mucho tracking y sirve para tres palabras, no
   para una frase. */
.cta-mat{margin:26px 0 0;font-size:.9375rem;line-height:1.6;color:var(--tx-2);max-width:56ch}
.s--claro .cta-mat{color:#4C4C68}

/* ─── Llamada a la acción del pie ─── */
.pie-cta{display:grid;gap:28px;align-items:center;padding-bottom:72px;margin-bottom:64px;
  border-bottom:1px solid var(--line)}
@media(min-width:900px){.pie-cta{grid-template-columns:1fr auto;gap:56px}}
.pie-cta h2{font-size:clamp(1.5rem,2.6vw,2.25rem);max-width:24ch;color:#fff}
.pie-cta__k{font-family:var(--f-m);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brand-l);margin:0 0 16px}

/* ─── Pie ─── */
.pie{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(12,14,30,.5));
  border-top:1px solid var(--line);color:var(--tx-3);padding:104px 0 48px;font-size:.9375rem}
.pie a{color:var(--tx);text-decoration:none;transition:color .25s var(--ease)}
.pie a.cta,.pie a.cta:hover{color:#1B0E02}
.pie a:hover{color:#fff}
.pie-g{display:grid;gap:52px}
@media(min-width:900px){.pie-g{grid-template-columns:1.7fr 1fr 1fr 1fr}}
.pie h4{font-family:var(--f-m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-3);margin:0 0 22px;font-weight:400}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.pie-legal{margin-top:88px;padding-top:30px;border-top:1px solid var(--line);
  font-family:var(--f-m);font-size:11px;letter-spacing:.06em;display:flex;flex-wrap:wrap;gap:28px}

/* ═══ ANIMACIÓN LIGADA AL SCROLL ═══
   Con animation-timeline el progreso lo marca la posición del elemento
   en pantalla, no un temporizador. No secuestra el scroll: si paras,
   para. Donde no hay soporte, cae al IntersectionObserver de siempre. */
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:300;background:transparent;pointer-events:none}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--iris),var(--ambar));
  transform-origin:left;transform:scaleX(0)}
.rv{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}

@supports (animation-timeline: view()){
  .prog i{animation:barra linear;animation-timeline:scroll(root block);animation-fill-mode:both}
  @keyframes barra{from{transform:scaleX(0)}to{transform:scaleX(1)}}

  .rv{opacity:0;transform:translateY(24px);transition:none;
    animation:aparece linear both;animation-timeline:view();animation-range:entry 8% cover 22%}
  .rv.in{opacity:0;transform:translateY(24px)}
  @keyframes aparece{to{opacity:1;transform:none}}

  .hero-bg img{animation:deriva-scroll linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes deriva-scroll{from{transform:scale(1.12) translateY(-2%)}to{transform:scale(1.12) translateY(6%)}}

  .mapa-marco .mapa__rumbo{transition:none;animation:trazo linear both;
    animation-timeline:view();animation-range:entry 30% cover 62%}
  @keyframes trazo{to{stroke-dashoffset:0}}

  .cmp-b i{transition:none;animation:crece linear both;animation-timeline:view();animation-range:entry 40% cover 55%}
  @keyframes crece{from{transform:scaleX(0)}to{transform:scaleX(1)}}

  .shot img{transition:none;animation:revela linear both;animation-timeline:view();animation-range:entry 10% cover 60%}
  @keyframes revela{
    from{transform:scale(1.08);filter:grayscale(1) contrast(1.06) brightness(.86)}
    to{transform:scale(1);filter:grayscale(.2) contrast(1.02) brightness(1) saturate(1.15)}
  }

  .tbl tbody tr{animation:fila linear both;animation-timeline:view();animation-range:entry 20% cover 40%}
  @keyframes fila{from{opacity:.25;transform:translateX(-10px)}to{opacity:1;transform:none}}

  .kl{animation:tiende linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
  @keyframes tiende{from{transform:scaleX(.15);opacity:0}to{transform:scaleX(1);opacity:1}}
}

@media (prefers-reduced-motion:reduce){
  .rv,.prog i,.hero-bg img,.shot img,.cmp-b i,.tbl tbody tr,.mapa-marco .mapa__rumbo,
  .kl,.fr,.marq-t,.hero .lede,.hero-act,.hero-data,.fondo,.fondo i{animation:none !important}
  .fondo{transform:none}
  .fondo i:nth-child(1){opacity:1}
  .kl{transform:none;opacity:1}
  .fr{opacity:1;filter:none;transform:none}
  .hero .lede,.hero-act,.hero-data{opacity:1;transform:none}
  /* .rv.in tiene más peso que .rv, así que sin nombrar las dos el
     contenido se quedaba invisible justo para quien pide menos
     movimiento. Es el caso en el que más caro sale equivocarse. */
  .rv,.rv.in{opacity:1 !important;transform:none !important;transition:none}
  
  .desp__pieza,.desp__monton,.desp__rot,.desp__plato,.desp__suma,
  
  .prog{display:none}
  .hero-bg img{transform:none}
  .shot img{transform:none;filter:grayscale(.2)}
  .cmp-b i{transform:scaleX(1);transition:none}
  .mapa__rumbo{stroke-dashoffset:0 !important;transition:none}
  .mapa__nodo,.mapa__etiqueta,.mapa__grupo,.mapa__mar-txt,.mapa__ultima,
  .mapa__fabricas circle,.mapa__puertos circle{opacity:1;transform:none;transition:none}
  .rv.in .mapa__halo{animation:none}
}

/* ═══ HERO CINEMATOGRÁFICO ═══
   La hamburguesa es material fotográfico real: un clip de diez segundos
   en el que se abre, aguanta, se cierra y acaba servida en el plato,
   codificado con todos los fotogramas clave para que saltar a cualquier
   instante sea inmediato. El scroll no reproduce el clip: lo posiciona.
   Y no en línea recta —arranca lento, cruza rápido y frena— porque lo
   que se busca es que la apertura tenga peso, no que persiga al dedo.

   La pieza entera vive dentro de .cinehero__cuadro: una caja con la
   misma relación que el vídeo, centrada con margin:auto entre los cuatro
   inset. Eso hace tres cosas a la vez: encaja el plano igual que un
   object-fit:contain, deja hueco bajo la cabecera para que la torre de
   la hamburguesa nunca se salga por arriba, y —lo importante— crea un
   sistema de coordenadas compartido. El SVG de las guías usa el mismo
   viewBox que el vídeo, así que la línea que sale del cheddar cae sobre
   el cheddar en cualquier ventana; y cada fila del escandallo se coloca
   con un porcentaje de esa misma caja, así que línea y precio siempre
   quedan a la misma altura. Sin caja común habría que medir con
   JavaScript en cada resize, y eso es justo lo que no queremos.

   Debajo de todo vive la versión quieta: una fotografía de la
   hamburguesa abierta con el escandallo debajo. Es lo que ve quien entra
   desde el móvil, desde Firefox, con «reducir movimiento» o sin
   JavaScript. El vídeo es el lujo; la foto es el contenido. Por eso el
   titular no se anima al entrar: es el LCP y tiene que pintar a la
   primera. */

.cinehero{position:relative;background:
  radial-gradient(120% 92% at 50% 42%,#26262B 0%,#171A33 58%,#0B0E22 100%)}
.cinehero__plano{position:relative;display:flex;flex-direction:column;
  padding:calc(var(--nav-h) + 36px) 0 64px}
.cinehero__txt{order:1;max-width:var(--w);margin-inline:auto;padding-inline:56px;width:100%}
.cinehero__cuadro{order:2;position:relative;margin-top:40px}
.cinehero__guias{display:none}
.cinehero__ficha{max-width:var(--w);margin-inline:auto;padding-inline:56px;
  padding-top:48px;width:100%}
.cinehero__pista{order:4;display:none}
.cinehero__vel{display:none}
.cinehero__txt .lede{max-width:52ch;margin-top:24px}
.cinehero__k{font-family:var(--f-m);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brand-l);margin:0 0 22px}
@media(max-width:900px){.cinehero__txt,.cinehero__ficha{padding-inline:24px}}

.cinehero h1{font-size:clamp(2.5rem,6.6vw,4.6rem);line-height:1}
.cinehero h1 em{display:block;font-style:normal;
  background:var(--g-marca);-webkit-background-clip:text;background-clip:text;color:transparent}

.desp__quieta,.desp__cine{display:block;width:100%;height:auto}
.desp__cine{display:none}
.desp.cine .desp__cine{display:block}
.desp.cine .desp__quieta{display:none}
.desp__plato{margin-top:16px}
.desp__plato img{display:block;width:100%;height:auto}

.desp__rots{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.desp__rot{display:grid;grid-template-columns:1fr auto;column-gap:18px;align-items:baseline;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.desp__rot b{font-family:var(--f-d);font-size:1rem;font-weight:600;letter-spacing:-.018em;color:#fff}
.desp__rot small{grid-column:1/-1;font-size:.875rem;line-height:1.5;color:var(--tx-2);margin-top:4px}
.desp__rot em{font-family:var(--f-m);font-style:normal;font-size:.9375rem;color:var(--ambar);
  white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.desp__rot em s{display:block;font-size:.75rem;color:var(--tx-3)}
.desp__suma{margin:22px 0 0;display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline;
  font-family:var(--f-m);font-size:12.5px;line-height:1.6;letter-spacing:.04em;color:var(--tx-2)}
.desp__suma b{font-family:var(--f-d);font-size:1.75rem;letter-spacing:-.03em;color:var(--jade)}

/* ─── A sangre, con la cámara. Solo donde hay ancho de verdad. ─── */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    @media (min-width:1100px){
      .cinehero{height:calc(var(--recorrido,620) * 1vh);
        view-timeline:--desp block;view-timeline-inset:0}
      .cinehero__plano{position:sticky;top:0;height:100vh;height:100svh;
        overflow:clip;padding:0;display:block}

      /* La caja compartida: misma relación que el vídeo, centrada, y
         siempre por debajo de la cabecera. */
      /* La fotografía se va a la izquierda y ocupa como mucho dos
         tercios del ancho: así se ve entera todo el rato y nada se le
         pone encima. La columna de precios vive en el tercio que queda,
         fuera de la imagen, pero posicionada con porcentajes de esta
         misma caja para que línea y precio sigan cuadrando al píxel. */
      .cinehero__cuadro{position:absolute;inset:calc(var(--nav-h) + 18px) 0 24px;
        margin:0;order:0}
      .cinehero__cuadro > *{position:absolute;inset:0;margin:auto auto auto 0;
        aspect-ratio:4/3;max-width:66%;max-height:100%}
      .cinehero__viz{width:auto;height:auto}
      .desp__cine,.desp__quieta,.desp__plato,.desp__plato img{
        position:absolute;inset:0;width:100%;height:100%;object-fit:contain;margin:0;border-radius:0}
      .desp.cine .desp__cine{display:block}
      /* El clip ya termina en el plato servido: el fundido a la foto
         solo hace falta donde no hay clip. */
      .desp.cine .desp__plato{display:none}

      /* Guías: una línea por ingrediente, en las coordenadas del propio
         fotograma. Se dibujan de dentro hacia fuera, como se señala con
         el dedo, y comparten el tramo de scroll con su precio. */
      .cinehero__guias{display:block;pointer-events:none;z-index:2;overflow:visible}
      .guia{opacity:0;animation:guia-in linear both;animation-timeline:--desp}
      .guia circle{fill:var(--sm-c,#fff)}
      /* pathLength="1" normaliza el trazo, así que la línea se dibuja
         de dentro hacia fuera sin tener que medirla. */
      .guia path{fill:none;stroke:var(--sm-c,#fff);stroke-width:1.6;opacity:.85;
        stroke-dasharray:1;stroke-dashoffset:1;
        animation:guia-trazo linear both;animation-timeline:--desp;
        animation-range:inherit}
      /* Con fill:both, un keyframe que acaba en 1 se queda pegado para
         siempre: las guías seguían señalando el aire cuando la
         hamburguesa ya se había cerrado. Por eso todas llevan cola. */
      @keyframes guia-in{0%{opacity:0}14%,88%{opacity:1}100%{opacity:0}}
      @keyframes guia-trazo{0%{stroke-dashoffset:1}26%,100%{stroke-dashoffset:0}}

      /* La ficha vive dentro de la caja: cada fila a la altura de su
         ingrediente, en el tercio derecho, fuera de la hamburguesa. */
      .cinehero__ficha{padding:0;z-index:3;pointer-events:none}
      .cinehero__ficha::before{display:none}
      .cinehero__k{position:absolute;left:calc(100% + 28px);width:var(--col);top:2%;right:auto;margin:0;
        font-size:10.5px;line-height:1.5;letter-spacing:.18em;
        opacity:0;animation:guia-in linear both;animation-timeline:--desp;
        animation-range:contain 27% contain 68%}
      .cinehero .desp__rots{display:block;margin:0}
      .cinehero__ficha{--col:calc(100vw - 100% - 28px - clamp(28px,3.4vw,64px))}
      .cinehero .desp__rot{position:absolute;left:calc(100% + 28px);width:var(--col);right:auto;
        top:calc(var(--y) * 1%);transform:translateY(-50%);
        display:grid;grid-template-columns:1fr auto;column-gap:14px;align-items:baseline;
        padding:0;border:0;opacity:0;
        animation:rot-in linear both;animation-timeline:--desp}
      @keyframes rot-in{
        0%  {opacity:0;transform:translateY(-50%) translateX(-12px)}
        14%,88%{opacity:1;transform:translateY(-50%)}
        100%{opacity:0;transform:translateY(-50%) translateX(10px)}
      }
      .cinehero .desp__rot b{font-size:.9375rem;line-height:1.2}
      /* Las patatas no están en la torre, así que no tienen línea: van
         debajo del todo, separadas del resto por una regla. */
      .cinehero .desp__rot--suelta{top:auto;bottom:15%;transform:none;
        padding-top:11px;border-top:1px solid rgba(255,255,255,.16)}
      @keyframes rot-suelta{0%{opacity:0}14%,88%{opacity:1}100%{opacity:0}}
      .cinehero .desp__rot--suelta{animation-name:rot-suelta}
      .cinehero .desp__rot small{display:none}
      .cinehero .desp__rot em{font-size:.875rem}
      .cinehero .desp__rot em s{font-size:.6875rem}
      .cinehero .desp__suma{position:absolute;left:calc(100% + 28px);width:var(--col);right:auto;bottom:2%;margin:0;
        display:block;font-size:11px;line-height:1.55;
        opacity:0;animation:guia-in linear both;animation-timeline:--desp;
        animation-range:contain 56% contain 70%}
      .cinehero .desp__suma b{display:block;font-size:1.5rem;margin-bottom:4px}
      @media (max-height:780px){
        .cinehero .desp__rot b{font-size:.875rem}
        .cinehero__k{display:none}
      }

      /* Los nombres de las guarniciones. En el plato cenital no hay una
         columna limpia a la derecha, así que van dentro del cuadro,
         alineados a la derecha contra el final de su propia línea y
         apoyados en la madera oscura, que es donde se leen. */
      .cinehero__plato-rots{position:absolute;inset:0;margin:auto auto auto 0;
        aspect-ratio:4/3;max-width:66%;max-height:100%;
        list-style:none;padding:0;z-index:3;pointer-events:none}
      .plato-rot{position:absolute;right:calc(var(--x) * 1%);top:calc(var(--y) * 1%);
        transform:translateY(-50%);text-align:right;width:max-content;max-width:34%;
        opacity:0;animation:guia-in linear both;animation-timeline:--desp;
        text-shadow:0 2px 14px rgba(0,0,0,.9)}
      .plato-rot b{display:block;font-family:var(--f-d);font-size:.9375rem;font-weight:600;
        letter-spacing:-.015em;color:#fff;line-height:1.2}
      .plato-rot small{display:block;font-size:.75rem;line-height:1.4;color:var(--tx-2);margin-top:2px}
      /* Las del plato son lo último que se ve: no llevan cola de salida,
         se quedan puestas hasta el final del recorrido. */
      .guia--plato circle{fill:var(--ambar)}
      .guia--plato path{stroke:var(--ambar);opacity:.9}
      .guia--plato,.plato-rot{animation-name:plato-in}
      @keyframes plato-in{0%{opacity:0}22%,100%{opacity:1}}

      /* Velo para el titular: izquierda y bajo. Sin él, blanco sobre pan
         dorado no llega al contraste mínimo. */
      /* Sin texto sobre la fotografía, el velo sobra. */

      /* El titular ocupa la misma columna que luego ocupará el
         escandallo: así nunca se pone encima de la fotografía y el
         relevo entre uno y otro es el propio scroll. */
      .cinehero__txt{position:absolute;inset:0;margin:auto auto auto 0;
        aspect-ratio:4/3;max-width:66%;max-height:100%;padding:0;z-index:4;
        display:flex;flex-direction:column;justify-content:center;
        --col:calc(100vw - 100% - 28px - clamp(28px,3.4vw,64px))}
      .cinehero__txt > *{position:absolute;left:calc(100% + 28px);width:var(--col)}
      .cinehero__txt .lbl{top:14%}
      .cinehero__txt h1{top:21%;margin:0}
      .cinehero__txt .lede{top:52%;font-size:1rem;line-height:1.6;max-width:none;margin:0}
      .cinehero__txt .hero-act{top:76%;margin:0}
      .cinehero h1{font-size:clamp(1.9rem,2.5vw,2.9rem);line-height:1.02;text-shadow:none}
      @media (max-height:820px){.cinehero__txt .lede{display:none}}
      @media (max-height:800px){.cinehero__txt .lede{display:none}}

      /* El titular no entra animado: sale. Mientras la hamburguesa se
         abre, el texto se aparta para dejar sitio a las cifras. */
      .cinehero__txt{animation:cine-txt linear both;animation-timeline:--desp;
        animation-range:contain 0% contain 100%}
      @keyframes cine-txt{
        0%,14%{opacity:1;transform:none}
        26%,100%{opacity:0;transform:translateX(22px)}
      }

      /* Sin clip, la fotografía quieta cede el sitio al plato al final. */
      .desp:not(.cine) .desp__quieta{animation:desp-cine linear both;animation-timeline:--desp;
        animation-range:contain 0% contain 100%}
      @keyframes desp-cine{0%,86%{opacity:1}96%,100%{opacity:0}}
      .desp:not(.cine) .desp__plato{opacity:0;animation:desp-plato linear both;
        animation-timeline:--desp;animation-range:contain 84% contain 100%}
      @keyframes desp-plato{0%{opacity:0}62%,100%{opacity:1}}

      /* Invitación a bajar: sin ella, un hero que ocupa seis pantallas
         parece una página que no termina de cargar. */
      .cinehero__pista{display:block;position:absolute;left:0;right:0;bottom:22px;margin:0;
        text-align:center;font-family:var(--f-m);font-size:11px;letter-spacing:.24em;
        text-transform:uppercase;color:rgba(255,255,255,.55);z-index:4;
        animation:cine-pista linear both;animation-timeline:--desp;
        animation-range:contain 0% contain 14%}
      @keyframes cine-pista{0%{opacity:.9}100%{opacity:0}}
      .cinehero__pista::after{content:"";display:block;width:1px;height:20px;margin:9px auto 0;
        background:linear-gradient(180deg,rgba(255,255,255,.5),transparent)}
    }
  }
}