/* Websites made by Martin
   Un solo mundo: cuarto de concreto azul, luz fria que entra por una rendija.
   Elemento firma: la rendija que baja por el borde izquierdo. */

:root{
  --canvas:#080B12;
  --panel:#111725;
  --panel-2:#161E2F;
  --accent:#4F8CFF;
  --accent-hover:#6FA3FF;
  --accent-muted:#1D2C4A;
  --line:#1E2739;
  --text-secondary:#93A0B8;
  --text-primary:#E8EEF9;
  --wa:#2BB463;
  --wa-hover:#37CC73;

  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --wrap:1180px;
  --gutter:clamp(20px,4vw,56px);
  --seam-w:clamp(0px,3.4vw,58px);
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  overflow-x:hidden;
  overflow-x:clip;
}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  opacity:0;
  transition:opacity .7s var(--ease-soft);
}
body.up{opacity:1}

h1,h2,h3{font-family:Chivo,system-ui,sans-serif;font-weight:900;letter-spacing:-.028em;line-height:1.06;text-wrap:balance;margin:0}
p{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:#04060C;padding:12px 18px;font-weight:600;border-radius:0 0 6px 0}
.skip:focus{left:0}

/* ---------- ambiente fijo ---------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env-glow{
  position:absolute;left:50%;top:40%;width:150vmax;height:150vmax;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 50%,rgba(50,90,170,.16) 0%,rgba(30,58,120,.07) 34%,rgba(8,11,18,0) 66%);
  animation:drift 96s var(--ease-soft) infinite alternate;
  animation-delay:-24s;
}
@keyframes drift{
  0%{transform:translate(-52%,-50%) scale(1)}
  100%{transform:translate(-46%,-44%) scale(1.14)}
}
.env-grain{
  position:absolute;inset:-50%;opacity:.05;
  background-image:radial-gradient(rgba(200,220,255,.5) .5px,transparent .5px);
  background-size:3px 3px;
}

/* ---------- la rendija (firma) ---------- */
.seam{
  position:fixed;left:calc(var(--seam-w) * .5);top:0;bottom:0;width:1px;z-index:2;pointer-events:none;
  background:var(--line);
}
.seam-fill{
  position:absolute;left:0;top:0;width:100%;height:var(--seam-h,0%);
  background:linear-gradient(180deg,rgba(79,140,255,0) 0%,var(--accent) 12%,#BFD6FF 62%,var(--accent) 100%);
  box-shadow:0 0 10px rgba(79,140,255,.55),0 0 26px rgba(79,140,255,.28);
}
@media (max-width:900px){.seam{display:none}}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;gap:24px;
  padding:14px var(--gutter);
  background:linear-gradient(180deg,rgba(8,11,18,.86) 0%,rgba(8,11,18,.5) 62%,rgba(8,11,18,0) 100%);
  backdrop-filter:blur(3px);
  transition:background .4s var(--ease-soft);
}
.nav.solid{background:rgba(8,11,18,.93);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:10px;color:var(--text-primary);text-decoration:none;font-size:14.5px;letter-spacing:.01em;white-space:nowrap}
.brand b{font-weight:600}
.mark{width:20px;height:20px;flex:none;color:#5C6E90}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:14.5px}
.nav-links a{color:var(--text-secondary);text-decoration:none;transition:color .25s var(--ease-soft)}
.nav-links a:hover{color:var(--text-primary)}
.nav-cta{margin-left:4px}
@media (max-width:900px){.nav-links{display:none}.nav-cta{margin-left:auto}}
/* en pantallas chicas el boton se queda con el icono y la marca conserva su nombre */
@media (max-width:520px){
  .nav{gap:12px;padding-left:16px;padding-right:16px}
  .nav-cta span{display:none}
  .nav-cta{padding:11px 13px}
  .brand{font-size:13.5px}
}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 20px;border-radius:8px;
  font-family:"Source Sans 3",sans-serif;font-size:15px;font-weight:600;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .28s var(--ease-soft),border-color .28s var(--ease-soft),transform .28s var(--ease),color .28s var(--ease-soft);
  text-shadow:none;
  /* el letter-spacing en em de las bandas se hereda en px y aplasta este texto */
  letter-spacing:normal;line-height:1.2;
}
.btn .wa{width:17px;height:17px;flex:none}
.btn-wa{background:var(--wa);color:#04120A}
.btn-wa:hover{background:var(--wa-hover);transform:translateY(-1px)}
.btn-ghost{background:rgba(232,238,249,.05);color:var(--text-primary);border-color:rgba(232,238,249,.18)}
.btn-ghost:hover{background:rgba(232,238,249,.1);border-color:rgba(232,238,249,.34);transform:translateY(-1px)}
.btn-full{width:100%;margin-top:6px}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}.btn-full{display:flex}}

/* ---------- heroe ---------- */
/* 800vh: con 700 las tres primeras frases quedaban en el piso del rango de lectura */
.hero{position:relative;height:800vh;z-index:1}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#05070C}

.poster,#hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.poster{background-size:cover;background-position:center;transition:opacity .8s var(--ease-soft)}
#hero-video{opacity:0;transition:opacity .8s var(--ease-soft);will-change:transform;transform:translateZ(0)}
.stage.video-ready #hero-video{opacity:1}
.stage.video-failed #hero-video{display:none}

/* la luz entra por la derecha, asi que el lado izquierdo cae en sombra.
   Es la sombra del cuarto y ademas es el carril donde vive todo el texto. */
.scrim{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(4,6,12,.9) 0%,rgba(4,6,12,.84) 22%,rgba(4,6,12,.56) 40%,rgba(4,6,12,.16) 54%,rgba(4,6,12,0) 66%),
  radial-gradient(ellipse 120% 90% at 62% 45%,rgba(6,9,16,0) 32%,rgba(6,9,16,.6) 100%)}

.ring{position:absolute;right:calc(var(--gutter) + 4px);bottom:calc(var(--gutter) + 4px);width:34px;height:34px;color:rgba(191,214,255,.6);transform:rotate(-90deg);transition:opacity .5s var(--ease-soft)}
.ring circle{transition:stroke-dashoffset .18s linear}
.stage.video-ready .ring{opacity:0}
.cue{position:absolute;right:calc(var(--gutter) + 4px);bottom:calc(var(--gutter) + 4px);width:26px;height:34px;color:rgba(191,214,255,.55)}

/* bandas */
.bands{position:absolute;inset:0;pointer-events:none}

/* boton para reiniciar el recorrido */
.recorrido{
  position:absolute;left:calc(var(--seam-w) + var(--gutter));bottom:calc(var(--gutter) + 6px);
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 18px;border-radius:999px;overflow:hidden;
  background:rgba(10,14,22,.62);border:1px solid rgba(232,238,249,.22);color:var(--text-primary);
  font-family:"Source Sans 3",sans-serif;font-size:14px;font-weight:600;letter-spacing:normal;
  cursor:pointer;backdrop-filter:blur(8px);
  transition:background .3s var(--ease-soft),border-color .3s var(--ease-soft),transform .3s var(--ease);
}
.recorrido:hover{background:rgba(16,22,34,.82);border-color:rgba(232,238,249,.4);transform:translateY(-1px)}
.recorrido svg{width:13px;height:13px;flex:none;fill:var(--accent)}
.recorrido .i-stop{display:none}
.recorrido.tocando .i-play{display:none}
.recorrido.tocando .i-stop{display:inline}
.rec-txt{position:relative;white-space:nowrap}
.rec-barra{
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--accent);transform:scaleX(var(--rp,0));transform-origin:left center;
  opacity:var(--rp,0)}
@media (pointer:coarse){.recorrido{min-height:44px}}
.band{
  position:absolute;left:calc(var(--seam-w) + var(--gutter));top:50%;transform:translateY(-50%);
  /* angosta a proposito: el carril de accion del video es la mitad derecha */
  width:min(30ch,32vw);
  margin:0;opacity:0;
  font-family:Chivo,system-ui,sans-serif;font-weight:900;letter-spacing:-.03em;line-height:1.06;
  font-size:clamp(1.75rem,3.35vw,2.95rem);
  text-shadow:var(--tshadow);
  will-change:opacity;
  /* siempre su propio contexto de apilado, si no el velo se va detras del video */
  isolation:isolate;
}
.band::before{
  content:"";position:absolute;inset:-46% -34% -46% -90%;pointer-events:none;z-index:-1;
  opacity:calc(.3 + .7*var(--k,1));
  background:radial-gradient(ellipse 62% 54% at 62% 50%,rgba(3,5,11,.82) 0%,rgba(3,5,11,.6) 44%,rgba(3,5,11,0) 76%);
}
.band .btn{text-shadow:none}

.b4{
  width:min(34ch,36vw);
  --ks:clamp(0,(var(--k,0) - .66)*4,1);
  --kb:clamp(0,(var(--k,0) - .78)*5,1);
}
.b4-line{margin:0;font-family:Chivo,system-ui,sans-serif;font-weight:900;letter-spacing:-.03em;line-height:1.06;font-size:clamp(1.75rem,3.35vw,2.95rem)}
.b4-sub{
  margin:20px 0 0;max-width:34ch;
  font-family:"Source Sans 3",sans-serif;font-weight:400;font-size:clamp(1rem,1.5vw,1.16rem);line-height:1.5;
  letter-spacing:0;color:#C6D2E6;
  opacity:var(--ks,0);transform:translateY(calc((1 - var(--ks,0)) * 10px));
}
.b4-cta{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;
  opacity:var(--kb,0);transform:translateY(calc((1 - var(--kb,0)) * 12px));
  pointer-events:auto;
}

/* palabras y caracteres */
.vis{display:inline-block}
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* (a) blur a nitido: banda 1 */
.b1 .vis{position:relative;display:inline-block}
.b1 .soft{position:absolute;inset:0;filter:blur(11px);opacity:calc(1 - var(--k,0));color:#DCE7F8}
.b1 .sharp{position:relative;opacity:var(--k,0)}

/* (h) mitades que se separan: banda 2 */
.b2 .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc)) * var(--jx,0px)));
}

/* (g) acercarse desde el fondo: banda 3 */
.b3 .vis{display:inline-block;transform-origin:12% 50%}
.b3 .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.4,1);
  opacity:var(--kc);
  transform:scale(calc(.84 + .16*var(--kc)));
}

/* (e) subida palabra por palabra: banda 4 */
.b4 .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 26px));
}

/* heroe estatico */
.still{
  position:absolute;inset:0;display:none;
  flex-direction:column;justify-content:flex-end;
  padding:0 var(--gutter) clamp(52px,11vh,104px);
}
.still h1{font-size:clamp(2.5rem,10.5vw,3.6rem);margin:0 0 16px;text-shadow:var(--tshadow)}
.still-sub{max-width:32ch;color:#CBD6E8;font-size:1.06rem;text-shadow:0 1px 8px rgba(5,5,10,.9);margin:0 0 26px}
.still-cta{display:flex;flex-wrap:wrap;gap:11px}
.still .kicker{margin-bottom:16px}

/* las cinco compuertas del heroe estatico */
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{height:100svh;height:100vh}
  .stage{position:relative}
  .bands,.ring,.recorrido{display:none}
  .still{display:flex}
  /* respaldo sin JavaScript: el cuadro final es la composicion en reposo */
  .poster{background-image:url('hero-ending.jpg');background-position:64% center}
  .scrim{background:linear-gradient(180deg,rgba(6,9,16,.3) 0%,rgba(6,9,16,.14) 30%,rgba(6,9,16,.72) 62%,rgba(6,9,16,.93) 100%)}
}
@media (max-height:560px){.cue{display:none}}

/* ---------- estructura de secciones ---------- */
.sec{position:relative;z-index:1;padding:clamp(84px,12vh,150px) 0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter) 0 calc(var(--seam-w) + var(--gutter))}
.wrap-narrow{max-width:820px}

.kicker{
  font-family:"Martian Mono",ui-monospace,monospace;font-weight:500;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0 0 18px;
}
.h-sec{font-size:clamp(1.9rem,4.2vw,3.1rem);max-width:18ch}
.rule{display:block;width:min(220px,40%);height:2px;margin:26px 0 0;color:var(--line)}
.rule line{stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset 1.4s var(--ease)}
.sec.in .rule line{stroke-dashoffset:0}

/* numero de seccion en la rendija */
.sec::before{
  content:attr(data-n);
  position:absolute;left:calc(var(--seam-w) * .5);top:clamp(84px,12vh,150px);
  transform:translate(-50%,-2px);
  font-family:"Martian Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:.06em;
  color:var(--text-secondary);
  background:var(--canvas);padding:7px 0;
  opacity:0;transition:opacity .8s var(--ease-soft);
}
.sec.in::before{opacity:.85}
@media (max-width:900px){.sec::before{display:none}}

/* entradas */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-soft),transform .8s var(--ease)}
.sec.in .reveal{opacity:1;transform:none}
.sec.in .reveal:nth-child(2){transition-delay:.09s}
.sec.in .reveal:nth-child(3){transition-delay:.18s}
.sec.in .reveal:nth-child(4){transition-delay:.27s}
.sec.in .reveal:nth-child(5){transition-delay:.36s}
.sec.in .reveal:nth-child(6){transition-delay:.45s}
.sec.in .reveal:nth-child(7){transition-delay:.54s}
/* retirar los retrasos cuando la entrada termina, con especificidad suficiente */
.sec.done .reveal:nth-child(n){transition-delay:0s}

/* ---------- 01 trabajo ---------- */
.casos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(24px,3.4vw,44px);margin-top:clamp(40px,6vh,68px)}
.caso{margin:0}
.caso-img{
  position:relative;overflow:hidden;border-radius:10px;border:1px solid var(--line);
  background:var(--panel);
  transition:border-color .5s var(--ease-soft),transform .6s var(--ease);
}
.caso-img img{width:100%;transition:transform 1s var(--ease)}
.caso:hover .caso-img{border-color:rgba(79,140,255,.42);transform:translateY(-3px)}
.caso:hover .caso-img img{transform:scale(1.028)}
.caso-meta{font-family:"Martian Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:20px 0 8px}
.caso-desc{color:var(--text-secondary);max-width:44ch}
.caso-link{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  color:var(--accent);text-decoration:none;font-size:14.5px;font-weight:600;
  transition:gap .3s var(--ease),color .3s var(--ease-soft)}
.caso-link svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.caso-link:hover{color:var(--accent-hover);gap:11px}
@media (pointer:coarse){.caso-link{min-height:44px}}

/* ---------- 02 manten apretado (momento interactivo 1) ---------- */
.sec-hold .wrap{text-align:center}
.sec-hold .kicker,.sec-hold .h-sec{margin-left:auto;margin-right:auto}
.sec-hold .h-sec{max-width:none}
.hold-stage{margin-top:clamp(36px,5vh,58px);display:flex;flex-direction:column;align-items:center;gap:26px}

.local{
  position:relative;width:min(460px,88vw);
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:8px;padding:46px 26px 26px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel);
  overflow:hidden;
}
.local-glow{
  position:absolute;left:50%;top:60%;width:340px;height:340px;
  transform:translate(-50%,-50%) scale(calc(.4 + .6*var(--h,0)));
  background:radial-gradient(circle,rgba(79,140,255,.34) 0%,rgba(79,140,255,0) 66%);
  opacity:var(--h,0);transition:opacity .25s linear,transform .25s linear;pointer-events:none;
}
.wire{position:absolute;left:26px;right:26px;bottom:56px;height:1px;background:var(--line)}
.wire-fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--accent),#BFD6FF);
  transform:scaleX(var(--h,0));transform-origin:left center;transition:transform .12s linear;
  box-shadow:0 0 8px rgba(79,140,255,.6)}

.nodo{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;flex:1;min-width:0}
.fig{
  display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:9px;
  background:#161E2F;border:1px solid #232D42;color:#4A5570;
  transition:color .5s var(--ease-soft),border-color .5s var(--ease-soft),background .5s var(--ease-soft),box-shadow .5s var(--ease-soft),transform .5s var(--ease);
}
.fig svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tag{
  font-family:"Martian Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#5B6479;text-align:center;line-height:1.3;
  transition:color .5s var(--ease-soft);
}
.local.s1 .n1 .fig,.local.s2 .n2 .fig,.local.s3 .n3 .fig{
  color:#DCE7F8;border-color:var(--accent);background:#22304E;box-shadow:0 0 24px rgba(79,140,255,.42);transform:translateY(-3px)}
.local.s1 .n1 .tag,.local.s2 .n2 .tag,.local.s3 .n3 .tag{color:var(--text-primary)}

.burbuja{
  position:absolute;top:14px;right:20px;
  display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  background:var(--wa);color:#04120A;
  opacity:0;transform:translateY(8px) scale(.8);
  transition:opacity .5s var(--ease-soft),transform .5s var(--ease);
}
.burbuja svg{width:18px;height:18px}
.local.s4 .burbuja{opacity:1;transform:none;box-shadow:0 0 22px rgba(43,180,99,.55)}

.hold{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-width:230px;padding:14px 26px;border-radius:9px;overflow:hidden;
  background:var(--panel-2);border:1px solid rgba(232,238,249,.2);color:var(--text-primary);
  font-family:"Source Sans 3",sans-serif;font-size:15px;font-weight:600;cursor:pointer;
  touch-action:none;user-select:none;-webkit-user-select:none;
  transition:border-color .3s var(--ease-soft),opacity .6s var(--ease-soft)}
.hold:hover{border-color:rgba(232,238,249,.36)}
.hold-track{position:absolute;inset:0;pointer-events:none}
.hold-fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--accent-muted);transform:scaleX(var(--h,0));transform-origin:left center;transition:transform .12s linear}
.hold-label{position:relative}
.hold-help{font-family:"Martian Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-secondary);margin:0;transition:opacity .6s var(--ease-soft)}
.hold-done{
  font-family:Chivo,sans-serif;font-weight:700;font-size:clamp(1.05rem,2.2vw,1.4rem);letter-spacing:-.015em;
  color:var(--text-primary);margin:0;min-height:1.6em;
  opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease-soft),transform .7s var(--ease)}
.hold-done em{font-style:normal;color:var(--accent)}
.hold-stage.done .hold-done{opacity:1;transform:none}
.hold-stage.done .hold,.hold-stage.done .hold-help{opacity:.45}
@media (pointer:coarse){.hold{min-height:44px}}

/* ---------- 03 servicios ---------- */
.svcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(20px,2.6vw,32px);margin-top:clamp(40px,6vh,68px)}
.svc{margin:0;padding:0}
.svc-img{overflow:hidden;border-radius:10px;border:1px solid var(--line);margin-bottom:22px}
.svc-img img{width:100%;transition:transform 1.1s var(--ease)}
.svc:hover .svc-img img{transform:scale(1.04)}
.svc h3{font-size:1.24rem;font-weight:700;margin:0 0 9px}
.svc p{color:var(--text-secondary);max-width:36ch}

/* ---------- 04 las 8 de la noche (momento interactivo 2) ---------- */
/* --n va de 0 (manana) a 1 (noche) y lo escribe el JS desde la palanca */
.sec-noche .calle{
  --n:0;
  position:relative;margin-top:clamp(30px,4vh,44px);
  height:clamp(190px,26vw,260px);border-radius:13px;overflow:hidden;
  border:1px solid var(--line)}
.cielo{
  position:absolute;inset:0;
  background:linear-gradient(180deg,#6E97C4 0%,#A9C2DA 62%,#C9D6E2 100%)}
.cielo::after{
  content:"";position:absolute;inset:0;opacity:var(--n);
  background:linear-gradient(180deg,#080D18 0%,#111C33 58%,#1A2740 100%);
  transition:opacity .12s linear}
.luna{
  position:absolute;top:7%;right:13%;width:26px;height:26px;border-radius:50%;
  background:#E7EEF8;box-shadow:0 0 26px rgba(231,238,248,.5);
  opacity:calc(var(--n) * var(--n));
  transform:translateY(calc((1 - var(--n)) * 40px));
  transition:opacity .12s linear,transform .12s linear}
.banqueta{
  position:absolute;left:0;right:0;bottom:0;height:17%;
  background:#4A5163;
  filter:brightness(calc(1 - .58 * var(--n)));transition:filter .12s linear}
.fila{
  position:absolute;left:3.5%;right:3.5%;bottom:16%;height:64%;
  display:flex;gap:2.6%;align-items:flex-end}
.loc{position:relative;flex:1;height:92%;background:#3C4457;border-radius:3px 3px 0 0;
  filter:brightness(calc(1 - .52 * var(--n)));transition:filter .12s linear}
.toldo{position:absolute;left:-3.5%;right:-3.5%;top:26%;height:9%;border-radius:2px;
  background:repeating-linear-gradient(90deg,#8A5560 0 8px,#B57B84 8px 16px);
  filter:brightness(calc(1 - .46 * var(--n)));transition:filter .12s linear}
.vitrina{
  position:absolute;left:12%;right:12%;bottom:0;height:58%;border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,#F0DFA8,#D8C48A);
  /* de dia la vitrina esta abierta e iluminada */
  opacity:calc(1 - .9 * var(--n));transition:opacity .12s linear}
/* la cortina baja conforme cae la noche. Es la frase, hecha imagen */
.cortina{
  position:absolute;left:12%;right:12%;bottom:0;height:58%;border-radius:2px 2px 0 0;
  background:repeating-linear-gradient(180deg,#39415400 0 0,#394154 0 3px,#2A3143 3px 6px);
  transform:scaleY(var(--n));transform-origin:top center;
  transition:transform .12s linear}

/* el unico con sitio web no baja cortina y se queda encendido */
.con-sitio{filter:none}
.con-sitio .vitrina{opacity:calc(1 - .9 * var(--n))}
.con-sitio .pantalla{
  position:absolute;left:12%;right:12%;bottom:0;height:58%;border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,#8FBBFF,#3F6ED8);
  opacity:var(--n);
  box-shadow:0 0 calc(var(--n) * 40px) rgba(79,140,255,.8);
  transition:opacity .12s linear,box-shadow .12s linear}

.reloj{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:"Martian Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.06em;
  padding:6px 11px;border-radius:7px;
  background:rgba(8,8,15,.62);border:1px solid rgba(96,96,126,.34);color:#E8EEF9;
  backdrop-filter:blur(8px);font-variant-numeric:tabular-nums}
.hora-fila{display:flex;align-items:center;gap:16px;margin-top:20px}
.hora{
  font-family:"Martian Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.06em;
  color:var(--text-secondary);white-space:nowrap;flex:none;min-width:8ch}
.hora-fin{text-align:right}
.palanca{
  flex:1;min-width:0;height:4px;border-radius:999px;appearance:none;-webkit-appearance:none;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent) calc(var(--p,0) * 100%),var(--line) calc(var(--p,0) * 100%),var(--line) 100%);
  cursor:pointer}
.palanca::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--text-primary);border:3px solid var(--accent);cursor:grab;
  box-shadow:0 2px 10px rgba(0,0,0,.5)}
.palanca::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:var(--text-primary);border:3px solid var(--accent);cursor:grab;
  box-shadow:0 2px 10px rgba(0,0,0,.5)}
.palanca:focus-visible{outline:2px solid var(--accent);outline-offset:6px}

.noche-done{
  font-family:Chivo,sans-serif;font-weight:700;font-size:clamp(1.05rem,2.3vw,1.45rem);letter-spacing:-.018em;
  margin:22px 0 0;min-height:1.5em;
  opacity:var(--nd,0);transform:translateY(calc((1 - var(--nd,0)) * 8px));
  transition:opacity .5s var(--ease-soft),transform .5s var(--ease)}
.noche-done em{font-style:normal;color:var(--accent)}
.noche-sub{
  margin:14px 0 0;max-width:62ch;color:var(--text-secondary);font-size:15.5px;
  opacity:var(--nd,0);transform:translateY(calc((1 - var(--nd,0)) * 8px));
  transition:opacity .6s var(--ease-soft) .12s,transform .6s var(--ease) .12s}

/* ---------- 04 precios ---------- */
.planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:clamp(40px,6vh,68px)}
.plan{
  position:relative;margin:0;padding:26px 22px 24px;
  background:var(--panel);border:1px solid var(--line);border-radius:11px;
  transition:border-color .45s var(--ease-soft),transform .45s var(--ease),background .45s var(--ease-soft)}
.plan:hover{border-color:rgba(232,238,249,.24);transform:translateY(-3px)}
.plan-reco{background:var(--panel);border-color:rgba(79,140,255,.26)}
.plan-reco:hover{border-color:rgba(79,140,255,.45)}
.reco{
  font-family:"Martian Mono",ui-monospace,monospace;font-style:normal;
  font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);opacity:.75;margin-left:5px;vertical-align:1px;
}
.plan-n{font-family:"Martian Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 14px}
.plan-p{font-family:Chivo,sans-serif;font-weight:900;font-size:2.15rem;letter-spacing:-.035em;line-height:1;margin:0 0 14px;font-variant-numeric:tabular-nums}
.plan-p .cur{font-size:1.2rem;font-weight:700;vertical-align:.42em;margin-right:1px;color:var(--text-secondary)}
.plan-d{color:var(--text-secondary);font-size:15px;line-height:1.5;margin:0}
.precios-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(26px,4vw,60px);align-items:end}
.ancla{
  border-left:2px solid var(--accent);padding:4px 0 4px 20px;
  align-self:end;margin-bottom:4px}
.ancla-l{font-size:15px;color:var(--text-secondary);margin:0;line-height:1.45}
.ancla-n{
  font-family:Chivo,sans-serif;font-weight:900;font-size:clamp(1.5rem,2.7vw,2.05rem);
  letter-spacing:-.035em;line-height:1.1;margin:5px 0;font-variant-numeric:tabular-nums;
  color:var(--text-primary)}
.ancla-n .sep{font-family:"Source Sans 3",sans-serif;font-style:normal;font-weight:400;font-size:.62em;color:var(--text-secondary);letter-spacing:0}

/* selector de moneda */
.monedas{display:flex;gap:6px;margin:clamp(34px,5vh,50px) 0 16px;padding:4px;
  border:1px solid var(--line);border-radius:999px;width:max-content}
.moneda{
  padding:8px 16px;border-radius:999px;cursor:pointer;border:0;background:transparent;
  font-family:"Martian Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.09em;
  color:var(--text-secondary);
  transition:background .3s var(--ease-soft),color .3s var(--ease-soft)}
.moneda:hover{color:var(--text-primary)}
.moneda.on{background:var(--accent-muted);color:var(--text-primary)}
@media (pointer:coarse){.moneda{min-height:44px}}
.cod{
  font-family:"Martian Mono",ui-monospace,monospace;font-style:normal;
  font-size:.3em;letter-spacing:.08em;color:var(--text-secondary);
  vertical-align:.9em;margin-left:2px}
.nota-moneda{margin:10px 0 0;font-size:13.5px;color:var(--text-secondary);min-height:1.4em}
@media (max-width:800px){.precios-head{grid-template-columns:1fr;gap:26px}.ancla{margin-bottom:0}}
.lema{
  font-family:Chivo,sans-serif;font-weight:900;letter-spacing:-.035em;line-height:1.08;
  font-size:clamp(1.6rem,3.6vw,2.7rem);
  margin:clamp(38px,5vh,58px) 0 0;
}
.lema span{color:var(--accent);display:block}
.plan-top{background:var(--panel-2);border-color:rgba(79,140,255,.42)}
.plan-top:hover{border-color:rgba(79,140,255,.68)}
.reco.todo{color:#BFD6FF;opacity:1}
.plan-lista{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.plan-lista li{
  position:relative;padding-left:17px;font-size:13.5px;line-height:1.4;color:var(--text-secondary)}
.plan-lista li::before{
  content:"";position:absolute;left:0;top:.52em;width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 8px rgba(79,140,255,.6)}
.precios-mant{margin:26px 0 0;color:var(--text-secondary);font-size:15px;max-width:74ch}
.precios-mant b{color:var(--text-primary);font-weight:600}

/* ---------- 05 dominio ---------- */
.sec-dominio{background:linear-gradient(180deg,rgba(17,23,37,0) 0%,rgba(17,23,37,.5) 26%,rgba(17,23,37,.5) 74%,rgba(17,23,37,0) 100%)}
.dominio-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(30px,5vw,72px);align-items:center}
.dominio-txt p{color:var(--text-secondary);max-width:52ch;margin-top:20px}
.h-dom{max-width:15ch;margin-bottom:6px}
.dominio-img{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--line)}
.dominio-img img{width:100%}
.dominio-vig{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,11,18,.62) 0%,rgba(8,11,18,0) 46%)}
@media (max-width:820px){.dominio-grid{grid-template-columns:1fr}.dominio-img{order:-1}}

/* ---------- 06 pasos ---------- */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(24px,3vw,44px);margin:clamp(40px,6vh,68px) 0 0;padding:0;list-style:none;counter-reset:none}
.paso{position:relative;padding-top:30px;border-top:1px solid var(--line)}
.paso-n{
  position:absolute;top:-1px;left:0;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  background:var(--canvas);border:1px solid var(--accent);color:var(--accent);
  font-family:"Martian Mono",ui-monospace,monospace;font-size:11px}
.paso h3{font-size:1.2rem;font-weight:700;margin:0 0 9px}
.paso p{color:var(--text-secondary);max-width:36ch}

/* ---------- 07 quien soy ---------- */
.sec-yo .wrap{text-align:left}
.h-yo{font-size:clamp(2.1rem,5.6vw,3.6rem);max-width:14ch}
.yo-p{color:var(--text-secondary);font-size:1.09rem;max-width:56ch;margin-top:26px}
.firma{
  font-family:Chivo,sans-serif;font-weight:700;font-style:italic;
  font-size:1.9rem;letter-spacing:-.02em;color:var(--accent);
  margin:36px 0 0;opacity:.9}

/* ---------- 08 faq ---------- */
.faq{margin-top:clamp(36px,5vh,60px);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:19px 40px 19px 0;position:relative;
  font-family:Chivo,sans-serif;font-weight:700;font-size:1.04rem;letter-spacing:-.012em;
  transition:color .3s var(--ease-soft)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.6px solid var(--text-secondary);border-bottom:1.6px solid var(--text-secondary);
  transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{color:var(--text-secondary);padding:0 0 21px;max-width:62ch;margin:0}

/* ---------- 09 cierre ---------- */
.sec-cierre{padding-bottom:clamp(96px,14vh,170px)}
.h-cierre{max-width:none}
.form{margin-top:clamp(34px,5vh,54px);display:flex;flex-direction:column;gap:16px}
.campo{display:flex;flex-direction:column;gap:7px}
.campo label{font-family:"Martian Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-secondary)}
.campo input{
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:13px 15px;color:var(--text-primary);
  font-family:"Source Sans 3",sans-serif;font-size:16px;
  transition:border-color .3s var(--ease-soft),background .3s var(--ease-soft)}
.campo input::placeholder{color:#5B6479}
.campo input:hover{border-color:rgba(232,238,249,.24)}
.campo input:focus{outline:none;border-color:var(--accent);background:var(--panel-2)}
.campo input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.campo.mal input{border-color:#D2603A}
.form-nota{font-size:13.5px;color:var(--text-secondary);margin:4px 0 0}
.form-alt{font-size:14.5px;color:var(--text-secondary);margin:2px 0 0}

/* ---------- pie ---------- */
.pie{position:relative;z-index:1;border-top:1px solid var(--line);padding:44px 0 56px}
.pie-grid{display:flex;flex-wrap:wrap;gap:26px 40px;justify-content:space-between;align-items:flex-start}
.pie-marca{display:flex;align-items:center;gap:9px;font-size:14.5px;margin:0 0 8px}
.pie-marca b{font-weight:600}
.pie-line{color:var(--text-secondary);font-size:14.5px;margin:0}
.pie-links{display:flex;flex-direction:column;gap:9px;font-size:14.5px}
.pie-links a{color:var(--text-secondary);text-decoration:none;transition:color .28s var(--ease-soft)}
.pie-links a:hover{color:var(--accent)}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;transition-delay:0s !important}
  body{opacity:1}
  .reveal{opacity:1;transform:none}
  .rule line{stroke-dashoffset:0}
  .sec::before{opacity:.85}
  .b4-sub,.b4-cta{opacity:1;transform:none}
  .env-glow{animation:none}
}
/* pin en vivo cuando el usuario enciende movimiento reducido con la pagina abierta */
body.pinned .reveal{opacity:1;transform:none;transition:none}
body.pinned .rule line{stroke-dashoffset:0;transition:none}
body.pinned .sec::before{opacity:.85}
body.pinned .env-glow{animation:none}

/* durante el recorrido automatico: fuera lo caro de componer, para que no de tirones */
body.recorriendo .nav,
body.recorriendo .recorrido{backdrop-filter:none}
body.recorriendo .env-glow{animation-play-state:paused}
body.recorriendo .env-grain{display:none}
body.recorriendo{scroll-behavior:auto}

/* pausa de animaciones en pestana oculta o fuera de vista */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}