:root{
  --bg:#080808;
  --bg-2:rgba(16,16,16,.58);
  --panel:rgba(22,22,22,.66);
  --panel-2:rgba(34,34,34,.85);
  --line:#242424;
  --line-2:#333;
  --muted:#8b8b8b;
  --soft:#b9b9b9;
  --text:#ececec;
  --white:#fff;
  --chrome:linear-gradient(180deg,#fff 0%,#d9d9d9 38%,#8f8f8f 62%,#e8e8e8 100%);
  --radius:18px;
  --max:1120px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --display:"Archivo",system-ui,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --body:"Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:#080808}
body{background:transparent;color:var(--text);font-family:var(--body);font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:#fff;color:#000}

/* grano */
body::after{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:100;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grano 1s steps(4) infinite}
@keyframes grano{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(1%,3%)}}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}
.etiqueta{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:10px}
.etiqueta::before{content:"";width:22px;height:1px;background:var(--line-2)}
.cromo{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .4s,border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
.nav.solida{background:rgba(8,8,8,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.marca{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:14px}
.marca img{width:30px;height:30px;border-radius:50%;filter:grayscale(1);border:1px solid var(--line-2)}
.marca small{display:block;font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.14em;color:var(--muted)}

/* botones */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 28px;border-radius:999px;font-weight:600;font-size:15px;letter-spacing:.01em;overflow:hidden;isolation:isolate;transition:transform .35s var(--ease),box-shadow .35s}
.btn-primario{background:var(--chrome);color:#0a0a0a;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 10px 40px -10px rgba(255,255,255,.35)}
.btn-primario::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.9) 48%,transparent 66%);transform:translateX(-120%);animation:brillo 3.6s var(--ease) infinite}
@keyframes brillo{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.btn-primario:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 18px 50px -12px rgba(255,255,255,.45)}
.btn-borde{border:1px solid var(--line-2);color:var(--text);background:rgba(255,255,255,.02)}
.btn-borde:hover{border-color:#555;background:rgba(255,255,255,.05)}
.btn-chico{height:40px;padding:0 18px;font-size:13px}
.btn .flecha{transition:transform .35s var(--ease)}
.btn:hover .flecha{transform:translateX(4px)}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:110px 0 70px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 75% 40%,rgba(255,255,255,.07),transparent 70%),radial-gradient(40% 40% at 10% 90%,rgba(255,255,255,.04),transparent 70%);pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;position:relative}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(40px,6.4vw,82px);line-height:.95;letter-spacing:-.035em;text-transform:uppercase;margin:22px 0 22px}
.hero h1 .serif{text-transform:none;font-size:1.08em;letter-spacing:-.01em}
.hero p.bajada{font-size:clamp(16px,1.6vw,19px);color:var(--soft);max-width:520px}
.hero .acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.palabra{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.palabra>span{display:inline-block;transform:translateY(105%);filter:blur(8px);opacity:0;transition:transform 1s var(--ease),filter 1s var(--ease),opacity 1s var(--ease)}
.listo .palabra>span{transform:none;filter:none;opacity:1}

.foto{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:3/4;border:1px solid var(--line);background:var(--panel)}
.foto img{width:100%;height:100%;object-fit:cover;object-position:62% 30%;transform:scale(1.12);transition:transform 2.4s var(--ease)}
.listo .foto img{transform:scale(1.02)}
.foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,8,8,.85));pointer-events:none}
.foto .escaneo{position:absolute;left:0;right:0;height:120px;top:-120px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.10),transparent);animation:escaneo 5.5s linear infinite;pointer-events:none;z-index:1}
@keyframes escaneo{to{top:110%}}
.foto .pie{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.foto .pie b{display:block;color:var(--white);font-family:var(--display);font-size:16px;letter-spacing:.02em}
.punto{display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;margin-right:8px;box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:pulso 2s infinite}
@keyframes pulso{70%{box-shadow:0 0 0 10px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* cifras */
.cifras{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.cifras .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.cifra{padding:34px 20px;border-left:1px solid var(--line)}
.cifra:first-child{border-left:0}
.cifra b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(30px,4vw,48px);letter-spacing:-.03em;line-height:1}
.cifra span{display:block;margin-top:10px;font-size:13px;color:var(--muted);line-height:1.4}

/* cinta */
.cinta{overflow:hidden;border-bottom:1px solid var(--line);padding:18px 0;background:rgba(8,8,8,.35)}
.cinta .pista{display:flex;width:max-content;will-change:transform}
.cinta span{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(22px,3vw,34px);letter-spacing:-.01em;padding:0 28px;color:transparent;-webkit-text-stroke:1px #4a4a4a;white-space:nowrap}
.cinta span:nth-child(3n+1){color:var(--text);-webkit-text-stroke:0}
@keyframes cinta{to{transform:translateX(-50%)}}

/* secciones */
section.bloque{padding:110px 0}
.cabeza{max-width:720px;margin-bottom:54px}
.cabeza h2{font-family:var(--display);font-weight:800;font-size:clamp(32px,4.6vw,58px);line-height:1;letter-spacing:-.03em;margin:18px 0 16px}
.cabeza p{color:var(--soft);font-size:17px}

/* aparecer al bajar */
.aparece{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.aparece.visto{opacity:1;transform:none}

/* etapas */
.etapas{display:grid;grid-template-columns:1fr 1.2fr;gap:28px;align-items:stretch}
.etapas-lista{position:relative;display:flex;flex-direction:column;gap:6px;padding:6px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2)}
.etapas-lista .indicador{position:absolute;left:6px;right:6px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line-2);transition:top .5s var(--ease),height .5s var(--ease);z-index:0}
.etapa-btn{position:relative;z-index:1;display:flex;align-items:center;gap:16px;text-align:left;padding:16px 18px;border-radius:12px;color:var(--muted);transition:color .3s}
.etapa-btn.activa{color:var(--white)}
.etapa-btn .num{font-family:var(--mono);font-size:12px;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;flex:none}
.etapa-btn.activa .num{background:#fff;color:#000;border-color:#fff}
.etapa-btn strong{display:block;font-family:var(--display);font-size:17px;letter-spacing:-.01em}
.etapa-btn small{font-size:13px}
.etapa-panel{position:relative;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,var(--panel),var(--bg-2));padding:34px;overflow:hidden;min-height:380px;display:flex;flex-direction:column}
.etapa-panel .grande{position:absolute;right:-10px;bottom:-60px;font-family:var(--display);font-weight:800;font-size:260px;line-height:1;color:transparent;-webkit-text-stroke:1px #222;pointer-events:none;transition:opacity .4s}
.etapa-contenido{position:relative;transition:opacity .35s,transform .35s var(--ease)}
.etapa-contenido.saliendo{opacity:0;transform:translateY(10px)}
.etapa-panel h3{font-family:var(--display);font-size:30px;letter-spacing:-.02em;line-height:1.1;margin:12px 0 14px}
.etapa-panel p{color:var(--soft)}
.etapa-panel .receta{margin-top:auto;padding-top:28px;position:relative}
.etapa-panel .receta .etiqueta{margin-bottom:10px}
.etapa-panel .receta b{display:block;font-family:var(--display);font-size:22px;margin-bottom:16px}

/* tarjetas */
.rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tarjeta{position:relative;border:1px solid var(--line);border-radius:var(--radius);padding:28px;background:var(--bg-2);overflow:hidden;transition:border-color .4s,transform .5s var(--ease)}
.tarjeta::before{content:"";position:absolute;inset:0;background:radial-gradient(380px circle at var(--x,50%) var(--y,0%),rgba(255,255,255,.08),transparent 45%);opacity:0;transition:opacity .4s;pointer-events:none}
.tarjeta:hover{border-color:#3a3a3a;transform:translateY(-4px)}
.tarjeta:hover::before{opacity:1}
.tarjeta .n{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.12em}
.tarjeta h3{font-family:var(--display);font-size:20px;letter-spacing:-.01em;line-height:1.2;margin:18px 0 10px}
.tarjeta p{color:var(--muted);font-size:15px}

/* línea de semanas */
.semanas{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px}
.semanas::before{content:"";position:absolute;top:21px;left:0;right:0;height:1px;background:var(--line)}
.semanas .avance{position:absolute;top:21px;left:0;height:1px;width:0;background:#fff;box-shadow:0 0 12px #fff;transition:width 2.2s var(--ease)}
.visto .semanas .avance,.semanas.visto .avance{width:100%}
.fase{position:relative;padding-top:48px}
.fase::before{content:"";position:absolute;top:15px;left:0;width:13px;height:13px;border-radius:50%;background:var(--bg);border:1px solid #666}
.fase .sem{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.fase h4{font-family:var(--display);font-size:19px;margin:8px 0 6px}
.fase p{font-size:14px;color:var(--muted)}

/* para quién */
.dos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lista-caja{border:1px solid var(--line);border-radius:var(--radius);padding:32px;background:var(--bg-2)}
.lista-caja.no{background:transparent;border-style:dashed}
.lista-caja h3{font-family:var(--display);font-size:22px;margin-bottom:20px}
.lista-caja li{list-style:none;display:flex;gap:14px;padding:12px 0;border-top:1px solid var(--line);color:var(--soft)}
.lista-caja li:first-child{border-top:0}
.lista-caja li i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;margin-top:2px}
.lista-caja:not(.no) li i{background:#fff;color:#000}
.lista-caja.no li i{border:1px solid #444;color:#777}

/* mi marca */
.snw{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.snw .foto{aspect-ratio:4/5}
.snw blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(26px,3vw,36px);line-height:1.2;color:var(--white);margin:20px 0 26px}
.snw p{color:var(--soft);margin-bottom:14px}
.datos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.dato{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--bg-2)}
.dato b{font-family:var(--display);font-size:26px;letter-spacing:-.02em}
.dato span{display:block;font-size:13px;color:var(--muted)}
.nota{font-size:13px;color:var(--muted);margin-top:16px}

/* productos */
.productos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.producto{border:1px solid var(--line);border-radius:var(--radius);padding:30px;background:var(--bg-2);display:flex;flex-direction:column;gap:12px}
.producto .fila{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.producto h3{font-family:var(--display);font-size:24px;letter-spacing:-.02em}
.producto .precio{font-family:var(--display);font-weight:800;font-size:28px}
.producto p{color:var(--muted);font-size:15px}
.producto ul{list-style:none;margin:6px 0 10px}
.producto li{font-size:14px;color:var(--soft);padding:6px 0;border-top:1px solid var(--line)}
.pronto{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line-2);border-radius:999px;padding:6px 12px;color:var(--muted);align-self:flex-start;margin-top:auto}

/* preguntas */
.faq{max-width:820px}
.pregunta{border-top:1px solid var(--line)}
.pregunta:last-child{border-bottom:1px solid var(--line)}
.pregunta button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left;padding:24px 0;font-family:var(--display);font-size:clamp(17px,2vw,20px);letter-spacing:-.01em}
.pregunta .mas{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);position:relative;transition:transform .45s var(--ease),background .3s}
.pregunta .mas::before,.pregunta .mas::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1px;background:currentColor;transform:translate(-50%,-50%)}
.pregunta .mas::after{transform:translate(-50%,-50%) rotate(90deg)}
.pregunta.abierta .mas{transform:rotate(45deg);background:#fff;color:#000;border-color:#fff}
.respuesta{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.pregunta.abierta .respuesta{grid-template-rows:1fr}
.respuesta>div{overflow:hidden}
.respuesta p{color:var(--soft);padding:0 50px 26px 0}

/* cierre */
.cierre{text-align:center;padding:130px 0;position:relative;overflow:hidden}
.cierre::before{content:"";position:absolute;left:50%;top:50%;width:900px;height:900px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,255,255,.08),transparent);pointer-events:none}
.cierre h2{font-family:var(--display);font-weight:800;font-size:clamp(38px,6vw,80px);letter-spacing:-.04em;line-height:.95;text-transform:uppercase;margin:20px auto 22px;max-width:900px}
.cierre p{color:var(--soft);margin-bottom:34px}

footer{border-top:1px solid var(--line);padding:30px 0;color:var(--muted);font-size:13px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a:hover{color:var(--white)}

/* formulario de aplicar */
.aplicar{min-height:100svh;padding:110px 0 60px}
.aplicar .wrap{max-width:640px}
.aplicar h1{font-family:var(--display);font-weight:800;font-size:clamp(34px,5vw,52px);letter-spacing:-.03em;line-height:1;margin:16px 0 12px}
.aplicar .intro{color:var(--soft);margin-bottom:34px}
.pasos{display:flex;gap:8px;margin-bottom:30px}
.paso-marca{flex:1}
.paso-marca .barra{height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.paso-marca .barra i{display:block;height:100%;width:0;background:#fff;transition:width .6s var(--ease)}
.paso-marca.hecho .barra i,.paso-marca.actual .barra i{width:100%}
.paso-marca span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.paso-marca.actual span{color:var(--white)}
.caja{border:1px solid var(--line);border-radius:22px;background:var(--bg-2);padding:30px}
.pantalla{display:none}
.pantalla.activa{display:block;animation:entra .6s var(--ease)}
@keyframes entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.pantalla h2{font-family:var(--display);font-size:24px;letter-spacing:-.02em;margin-bottom:6px}
.pantalla .sub{color:var(--muted);font-size:15px;margin-bottom:24px}
.campo{margin-bottom:18px}
.campo label{display:block;font-size:13px;color:var(--soft);margin-bottom:8px}
.campo input,.campo select,.campo textarea{width:100%;background:var(--bg);border:1px solid var(--line-2);border-radius:12px;color:var(--text);font:inherit;font-size:16px;padding:14px 16px;transition:border-color .3s,box-shadow .3s;appearance:none;-webkit-appearance:none}
.campo textarea{min-height:130px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:0;border-color:#888;box-shadow:0 0 0 4px rgba(255,255,255,.06)}
.campo .error{display:none;color:#ff8a8a;font-size:13px;margin-top:6px}
.campo.mal .error{display:block}
.campo.mal input,.campo.mal textarea,.campo.mal select{border-color:#7a3a3a}
.telefono{display:grid;grid-template-columns:130px 1fr;gap:8px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--soft);margin:6px 0 22px;cursor:pointer}
.check input{width:20px;height:20px;accent-color:#fff;margin-top:2px;flex:none}
.opciones{display:flex;flex-direction:column;gap:10px}
.opcion{text-align:left;border:1px solid var(--line-2);border-radius:14px;padding:16px 18px;background:var(--bg);font-size:15px;transition:border-color .25s,background .25s,transform .25s var(--ease);display:flex;justify-content:space-between;align-items:center;gap:12px}
.opcion:hover{border-color:#666;transform:translateX(3px)}
.opcion.elegida{background:#fff;color:#000;border-color:#fff}
.contador-pregunta{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.12em;margin-bottom:10px}
.botones-form{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px}
.btn-texto{color:var(--muted);font-size:14px}
.btn-texto:hover{color:var(--white)}
.contador-letras{text-align:right;font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:6px}
.privado{font-size:12px;color:var(--muted);text-align:center;margin-top:16px}
.siguientes{list-style:none;counter-reset:s;margin:24px 0}
.siguientes li{counter-increment:s;display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line);color:var(--soft)}
.siguientes li::before{content:counter(s);flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--white)}
.listo-icono{width:64px;height:64px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-size:28px;margin-bottom:20px;animation:sello .7s var(--ease)}
@keyframes sello{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}

/* teléfono */
@media (max-width:900px){
  .hero .wrap,.etapas,.snw,.dos,.productos{grid-template-columns:1fr}
  .hero{min-height:auto;padding-top:96px}
  .hero .foto{max-width:420px;aspect-ratio:4/5}
  .rejilla{grid-template-columns:1fr 1fr}
  .semanas{grid-template-columns:1fr 1fr;row-gap:8px}
  .semanas::before,.semanas .avance{display:none}
  .cifras .wrap{grid-template-columns:1fr 1fr}
  .cifra:nth-child(3){border-left:0}
  .cifra:nth-child(n+3){border-top:1px solid var(--line)}
  section.bloque{padding:80px 0}
  .etapa-panel{min-height:0}
}
@media (max-width:600px){
  .wrap{padding:0 16px}
  .rejilla,.semanas,.datos{grid-template-columns:1fr}
  .hero h1{font-size:clamp(36px,11vw,52px)}
  .btn{width:100%}
  .nav .btn{width:auto}
  .marca small{display:none}
  .caja{padding:22px}
  .telefono{grid-template-columns:110px 1fr}
  .etapa-panel{padding:26px}
  .etapa-panel .grande{font-size:180px}
  .respuesta p{padding-right:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .aparece,.palabra>span{opacity:1!important;transform:none!important;filter:none!important}
}

/* ===== fondo futurista ===== */
#fondo{position:fixed;inset:0;width:100%;height:100%;z-index:-2;display:block}
.aurora{position:fixed;inset:0;z-index:-3;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(90px);opacity:.16;mix-blend-mode:screen;animation:flota 26s ease-in-out infinite alternate}
.aurora i:nth-child(1){background:radial-gradient(circle,#cfcfcf,transparent 65%);top:-25vmax;right:-15vmax}
.aurora i:nth-child(2){background:radial-gradient(circle,#7d7d7d,transparent 65%);bottom:-30vmax;left:-20vmax;animation-duration:32s;animation-delay:-8s}
.aurora i:nth-child(3){background:radial-gradient(circle,#f2f2f2,transparent 60%);top:35%;left:40%;width:35vmax;height:35vmax;opacity:.07;animation-duration:22s;animation-delay:-4s}
@keyframes flota{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-8vmax,6vmax) scale(1.15)}100%{transform:translate(6vmax,-5vmax) scale(.92)}}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}

.progreso{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#666,#fff);box-shadow:0 0 10px rgba(255,255,255,.6);z-index:60}
.cursor-luz{position:fixed;top:0;left:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(closest-side,rgba(255,255,255,.07),transparent);transition:opacity .4s;opacity:0}
.con-cursor .cursor-luz{opacity:1}

.tarjeta,.lista-caja,.producto,.dato,.etapa-panel,.etapas-lista,.caja,.cifras{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tarjeta{transform-style:preserve-3d;will-change:transform}
.tarjeta:hover{transform:none}
.foto img.paralaje{transition:transform .2s linear}
.btn-primario{will-change:transform}

/* titulares de sección con brillo que pasa */
.cabeza h2,.cierre h2{background:linear-gradient(100deg,#ececec 40%,#fff 50%,#9a9a9a 60%,#ececec 70%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:barrido 7s ease-in-out infinite}
.cabeza h2 .serif,.cierre h2 .serif{-webkit-text-fill-color:transparent}
@keyframes barrido{0%,40%{background-position:100% 0}100%{background-position:-50% 0}}

/* etiquetas que se decodifican */
.etiqueta.decodifica{font-variant-ligatures:none}

/* borde que gira en el panel de etapas */
.etapa-panel::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--giro,0deg),transparent 0 70%,rgba(255,255,255,.55) 80%,transparent 90%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:giro 6s linear infinite;pointer-events:none}
@property --giro{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes giro{to{--giro:360deg}}

@media (max-width:900px){.cursor-luz{display:none}}
@media (prefers-reduced-motion:reduce){#fondo{display:none}}