/* Classics Hook · sistema visual web (2026-11-08) · fuentes propias, sin servicios externos */
@font-face{font-family:"Plex";src:url(fonts/IBMPlexSans_400Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Plex";src:url(fonts/IBMPlexSans_500Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Plex";src:url(fonts/IBMPlexSans_600SemiBold.ttf) format("truetype");font-weight:600 700;font-display:swap}
@font-face{font-family:"Fraunces";src:url(fonts/Fraunces_600SemiBold.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Mono";src:url(fonts/JetBrainsMono_500Medium.ttf) format("truetype");font-weight:500;font-display:swap}

:root{
  --ink:#0B0A1A; --ink2:#14122B; --rosa:#FF4D8D; --amarillo:#FFD23F; --celeste:#35D6FF; --violeta:#8B5CFF; --verde:#3DF2A5;
  --bg:#0B0A1A; --bg2:#100E24; --fg:#F4F2FF; --fg2:#B5B1D1; --fg3:#7F7BA3;
  --card:rgba(255,255,255,.045); --card2:rgba(255,255,255,.08); --line:rgba(255,255,255,.12);
  --glow:.55; --nav:rgba(11,10,26,.62);
  --sans:"Plex",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --serif:"Fraunces",Georgia,serif; --mono:"Mono",ui-monospace,monospace;
  --r:22px; --ease:cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme:light){
  :root{--bg:#F7F6FD; --bg2:#EFEDFA; --fg:#14122B; --fg2:#4B4770; --fg3:#7A769B; --card:rgba(255,255,255,.75); --card2:#fff;
    --line:rgba(20,18,43,.12); --glow:.28; --nav:rgba(247,246,253,.7)}
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--celeste);outline-offset:3px;border-radius:8px}
.salto{position:absolute;left:-999px;top:8px;background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:10px;z-index:100}
.salto:focus{left:8px}
.envase{width:min(1160px,100% - 40px);margin-inline:auto}
.rotulo{font:500 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--fg3)}
h1,h2,h3{line-height:1.05;letter-spacing:-.03em;font-weight:600}
h1{font-size:clamp(44px,8vw,96px)}
h2{font-size:clamp(32px,5vw,58px);margin:.35em 0 .45em}
h3{font-size:21px;letter-spacing:-.015em}
p.grande{font-size:clamp(18px,2vw,21px);color:var(--fg2);max-width:38em}
.grad{background:linear-gradient(100deg,var(--rosa),var(--amarillo) 55%,var(--celeste));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:fluye 8s ease-in-out infinite alternate}
@keyframes fluye{to{background-position:100% 0}}

/* barra de progreso de lectura de la página */
#progreso{position:fixed;inset:0 0 auto 0;height:3px;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--rosa),var(--amarillo),var(--celeste))}
/* luz que sigue al puntero */
#luz{position:fixed;width:520px;height:520px;left:0;top:0;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:0;opacity:0;
  background:radial-gradient(circle,rgba(139,92,255,.22),transparent 65%);transition:opacity .4s;will-change:transform}
@media (hover:none){#luz{display:none}}

/* navegación */
header.nav{position:sticky;top:0;z-index:50;background:var(--nav);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid var(--line)}
header.nav .envase{display:flex;align-items:center;justify-content:space-between;height:66px}
.marca{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:600;font-size:19px;letter-spacing:-.02em}
.marca img{width:36px;height:36px}
.marca span{opacity:.62;font-weight:500}
.nav nav{display:flex;align-items:center;gap:6px}
.nav nav a{font-size:14.5px;color:var(--fg2);text-decoration:none;padding:9px 13px;border-radius:999px;transition:background .25s,color .25s}
.nav nav a:hover{background:var(--card2);color:var(--fg)}
@media (max-width:760px){.nav nav a:not(.btn){display:none}}

.btn{display:inline-flex;align-items:center;gap:9px;font:600 15px var(--sans);text-decoration:none;color:#14122B;padding:14px 24px;border-radius:999px;border:0;cursor:pointer;
  background:linear-gradient(120deg,var(--amarillo),var(--rosa));box-shadow:0 10px 30px -10px rgba(255,77,141,.7);transition:transform .35s var(--ease),box-shadow .35s}
.btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 40px -10px rgba(255,77,141,.8)}
.btn.vidrio{background:var(--card2);color:var(--fg);border:1px solid var(--line);box-shadow:none;backdrop-filter:blur(10px)}
.nav nav a.btn{padding:10px 18px;font-size:14px;color:#14122B}
.nav nav a.btn:hover{background:linear-gradient(120deg,var(--amarillo),var(--rosa));color:#14122B}
.btn.vidrio{color:var(--fg)}

/* portada */
.portada{position:relative;padding:72px 0 40px;overflow:hidden;isolation:isolate}
.aurora{position:absolute;inset:-20% -10% auto -10%;height:120%;z-index:-1;pointer-events:none;opacity:var(--glow)}
.aurora i{position:absolute;border-radius:50%;filter:blur(90px);animation:flota 16s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:46vw;height:46vw;left:4%;top:6%;background:var(--violeta)}
.aurora i:nth-child(2){width:38vw;height:38vw;right:2%;top:2%;background:var(--rosa);animation-delay:-5s}
.aurora i:nth-child(3){width:34vw;height:34vw;left:34%;top:40%;background:var(--celeste);animation-delay:-9s;opacity:.7}
@keyframes flota{to{transform:translate3d(6vw,4vw,0) scale(1.15)}}
.grano{position:absolute;inset:0;z-index:-1;opacity:.5;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.portada .envase{display:grid;grid-template-columns:1.12fr .88fr;gap:40px;align-items:center}
@media (max-width:900px){.portada .envase{grid-template-columns:1fr}.portada{padding-top:44px}}
.pastilla{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 9px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:13.5px;color:var(--fg2);backdrop-filter:blur(8px)}
.pastilla b{background:linear-gradient(120deg,var(--amarillo),var(--rosa));color:#14122B;font:600 11px var(--mono);letter-spacing:.1em;padding:4px 8px;border-radius:999px}
.portada h1{margin:22px 0 22px}
.palabra{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.palabra>span{display:inline-block;transform:translateY(110%);animation:sube .9s var(--ease) forwards;animation-delay:calc(var(--i)*.09s + .15s)}
@keyframes sube{to{transform:none}}
.portada p.grande{margin-bottom:30px;opacity:0;animation:aparece 1s .7s forwards}
.acciones{display:flex;gap:12px;flex-wrap:wrap;opacity:0;animation:aparece 1s .9s forwards}
@keyframes aparece{to{opacity:1}}
.dato{margin-top:18px;font-size:14px;color:var(--fg3)}

/* deslizá para empezar (inspirado en el hilo de referencia) */
.desliza{position:relative;margin-top:30px;width:min(360px,100%);height:58px;border-radius:999px;background:var(--card);border:1px solid var(--line);overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;opacity:0;animation:aparece 1s 1.1s forwards}
.desliza .relleno{position:absolute;inset:0 auto 0 0;width:calc(var(--p,0)*100%);background:linear-gradient(90deg,rgba(61,242,165,.05),rgba(61,242,165,.35));filter:blur(.3px)}
.desliza .texto{position:absolute;inset:0;display:grid;place-items:center;font-weight:500;font-size:15px;color:var(--fg2);padding-left:46px;pointer-events:none;transition:color .3s}
.desliza.listo .texto{color:var(--verde)}
.desliza .perilla{position:absolute;left:5px;top:5px;width:48px;height:48px;border-radius:50%;border:0;cursor:grab;display:grid;place-items:center;color:#14122B;
  background:linear-gradient(160deg,#fff,#cfcbe8);box-shadow:0 0 calc(var(--p,0)*38px) rgba(61,242,165,.9),0 4px 14px rgba(0,0,0,.4);transform:translateX(calc(var(--p,0)*(var(--max,300px))));transition:transform .45s var(--ease),box-shadow .3s}
.desliza.arrastra .perilla{transition:none;cursor:grabbing}
.perilla svg{width:20px;height:20px}

/* teléfono */
.escena{position:relative;justify-self:center;width:min(340px,82vw,calc((100vh - 130px)*.484));min-width:250px;perspective:1200px}
.telefono{position:relative;width:100%;aspect-ratio:9/18.6;border-radius:48px;padding:11px;background:linear-gradient(160deg,#2b2850,#0a0918);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.14),0 50px 90px -30px rgba(255,77,141,.45),0 30px 60px -30px #000;
  transform:rotateY(var(--ry,-8deg)) rotateX(var(--rx,4deg));transition:transform .5s var(--ease);transform-style:preserve-3d}
.telefono::after{content:"";position:absolute;top:20px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:99px;background:#000;z-index:5}
.pantalla{position:relative;height:100%;border-radius:38px;overflow:hidden;background:#0B0A1A;isolation:isolate}
.pantalla .fondo{position:absolute;inset:0;background:radial-gradient(90% 50% at 30% 10%,rgba(139,92,255,.5),transparent 60%),radial-gradient(80% 50% at 80% 90%,rgba(255,77,141,.4),transparent 60%);z-index:-1}
.historias{position:absolute;top:50px;left:16px;right:16px;display:flex;gap:5px;z-index:4}
.historias i{flex:1;height:3px;border-radius:9px;background:rgba(255,255,255,.28);overflow:hidden}
.historias i b{display:block;height:100%;width:0;background:#fff}
.historias i.hecho b{width:100%}
.historias i.activo b{animation:llena var(--dur,3.4s) linear forwards}
@keyframes llena{to{width:100%}}
.mazo{position:absolute;inset:78px 16px 78px;}
.tapa-reel{position:absolute;inset:0;border-radius:26px;padding:20px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;overflow:hidden;
  background:linear-gradient(160deg,var(--c1),var(--c2));box-shadow:0 20px 40px -18px rgba(0,0,0,.7);
  transition:transform .8s var(--ease),opacity .6s,filter .6s;will-change:transform}
.tapa-reel[data-pos="0"]{transform:none;opacity:1;z-index:4}
.tapa-reel[data-pos="1"]{transform:translateY(18px) scale(.93);opacity:.85;z-index:3;filter:brightness(.8)}
.tapa-reel[data-pos="2"]{transform:translateY(34px) scale(.86);opacity:.55;z-index:2;filter:brightness(.6)}
.tapa-reel[data-pos="3"]{transform:translateY(-70%) rotate(-5deg) scale(.96);opacity:0;z-index:5}
.tapa-reel small{font:500 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.tapa-reel .cita{font:600 22px/1.2 var(--serif);text-shadow:0 2px 16px rgba(0,0,0,.35)}
.tapa-reel .pie{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.tapa-reel .pie b{display:block;font:600 16px/1.15 var(--sans);letter-spacing:-.01em}
.tapa-reel .chip{white-space:nowrap;background:rgba(255,255,255,.95);color:#14122B;font:600 12px var(--sans);padding:9px 14px;border-radius:99px}
.tapa-reel .juega{position:absolute;right:18px;top:18px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.22);backdrop-filter:blur(8px);display:grid;place-items:center}
.tapa-reel .juega svg{width:18px;height:18px;fill:#fff;margin-left:2px}
.barra-inferior{position:absolute;left:16px;right:16px;bottom:18px;height:50px;border-radius:99px;background:rgba(255,255,255,.1);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-around;align-items:center;font:500 10.5px var(--mono);letter-spacing:.12em;color:rgba(255,255,255,.7)}
.barra-inferior .on{color:#fff}
.flota-chip{position:absolute;z-index:6;padding:10px 15px;border-radius:16px;background:var(--card2);border:1px solid var(--line);backdrop-filter:blur(14px);font-weight:600;font-size:14px;box-shadow:0 14px 34px -14px rgba(0,0,0,.6);animation:sube-baja 6s ease-in-out infinite alternate;display:flex;gap:8px;align-items:center}
.flota-chip i{width:9px;height:9px;border-radius:50%;background:var(--verde);box-shadow:0 0 12px var(--verde)}
.flota-chip.a{left:-34px;top:22%}
.flota-chip.b{right:-30px;top:48%;animation-delay:-2s}
.flota-chip.c{left:-18px;bottom:12%;animation-delay:-4s}
@keyframes sube-baja{to{transform:translateY(-12px)}}
@media (max-width:520px){.flota-chip.a{left:-10px}.flota-chip.b{right:-8px}.flota-chip.c{left:-4px}}


/* portada: tapa viva (el abanico del logo, controlado por el tiempo) */
.control-h{margin:6px 0 26px;max-width:460px;display:grid;gap:10px}
.escena-t{justify-self:center;width:min(400px,86vw);display:grid;gap:22px}
.vivo{position:relative;width:100%;aspect-ratio:4/4.6;animation:sube-baja 7s ease-in-out infinite alternate}
.vivo .c{position:absolute;inset:4% 16%;border-radius:30px;transition:transform .8s var(--ease)}
.vivo .y{background:var(--amarillo);transform-origin:50% 115%;transform:rotate(calc(var(--abre)*-1deg))}
.vivo .z{background:var(--celeste);transform-origin:50% 115%;transform:rotate(calc(var(--abre)*1deg))}
.vivo .r{background:linear-gradient(155deg,#FF5C9A,#FF3D77);padding:24px 22px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;box-shadow:0 40px 70px -26px rgba(255,61,119,.7),0 20px 40px -20px #000}
.vivo.pop .r{animation:pop .5s var(--ease)}
@keyframes pop{0%{transform:scale(.96)}60%{transform:scale(1.025)}100%{transform:none}}
.vivo small{font:500 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;opacity:.9}
.v-nombre{font:600 clamp(30px,4.6vw,44px)/1 var(--sans);letter-spacing:-.04em}
.v-sub{margin-top:8px;font-size:15px;opacity:.92;line-height:1.35;min-height:2.7em}
.v-pie{display:flex;justify-content:space-between;align-items:flex-end}
.vivo .chip{background:#fff;color:#14122B;font:600 14px var(--sans);padding:10px 16px;border-radius:99px}
.anillo{position:relative;width:78px;height:78px;border-radius:50%;background:conic-gradient(#fff calc(var(--pc)*1%),rgba(255,255,255,.28) 0);display:grid;place-items:center}
.anillo::before{content:"";position:absolute;inset:7px;border-radius:50%;background:#FF4A86}
.anillo b{position:relative;font:600 15px var(--sans)}
.selector-v{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.selector-v button{font:600 13px var(--sans);color:var(--fg2);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 6px;cursor:pointer;transition:background .3s,color .3s,transform .35s var(--ease),border-color .3s}
.selector-v button small{display:block;font:500 11px var(--mono);color:var(--fg3);margin-top:2px;letter-spacing:0;text-transform:none}
.selector-v button:hover{transform:translateY(-2px)}
.selector-v button.on{background:linear-gradient(120deg,rgba(255,210,63,.22),rgba(255,77,141,.3));border-color:rgba(255,255,255,.35);color:var(--fg)}
@media (max-width:520px){.selector-v button{font-size:12px;padding:9px 2px}}

/* cinta de títulos */
.cinta{overflow:hidden;border-block:1px solid var(--line);padding:16px 0;margin:36px 0 0;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.cinta div{display:flex;gap:46px;width:max-content;animation:corre 46s linear infinite;font:600 clamp(20px,3vw,30px) var(--serif);color:var(--fg2);white-space:nowrap}
.cinta span::after{content:"✦";margin-left:46px;color:var(--rosa);font-size:.6em;vertical-align:middle}
@keyframes corre{to{transform:translateX(-50%)}}
.cinta:hover div{animation-play-state:paused}

section{padding:96px 0;position:relative}

/* aparece al hacer scroll */
.rev{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0)*.09s)}
.rev.vis{opacity:1;transform:none}

/* tarjeta con luz que sigue al puntero */
.tarjeta{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;overflow:hidden;backdrop-filter:blur(10px)}
.tarjeta::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .35s;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,77,141,.18),transparent 55%)}
.tarjeta:hover::before{opacity:1}
.tarjeta .num{font:600 14px var(--mono);color:var(--rosa);letter-spacing:.1em}
.tarjeta h3{margin:10px 0 8px}
.tarjeta p{color:var(--fg2);font-size:16px}

/* cómo funciona: teléfono fijo + pasos */
.pasos{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;margin-top:20px}
.pasos .fijo{position:sticky;top:96px;align-self:start;height:calc(100vh - 140px);display:grid;place-items:center}
.pasos .telefono{width:min(300px,100%);--ry:0deg;--rx:0deg}
.lista-pasos .paso{min-height:68vh;display:flex;flex-direction:column;justify-content:center;opacity:.35;transition:opacity .5s}
.lista-pasos .paso.on{opacity:1}
.paso .gran{font:600 clamp(60px,9vw,110px)/1 var(--sans);letter-spacing:-.06em;background:linear-gradient(160deg,var(--rosa),var(--violeta));-webkit-background-clip:text;background-clip:text;color:transparent}
.paso h3{font-size:clamp(26px,3.4vw,38px);margin:6px 0 12px}
.paso p{color:var(--fg2);max-width:30em}
.capa{position:absolute;inset:0;border-radius:38px;padding:62px 18px 20px;opacity:0;transform:scale(.97) translateY(14px);transition:opacity .6s,transform .7s var(--ease);display:flex;flex-direction:column;gap:12px}
.pasos[data-paso="1"] .capa.s1,.pasos[data-paso="2"] .capa.s2,.pasos[data-paso="3"] .capa.s3{opacity:1;transform:none}
.capa .t{font:500 10.5px var(--mono);letter-spacing:.16em;color:rgba(255,255,255,.6);text-transform:uppercase}
.mini-reel{flex:1;border-radius:22px;background:linear-gradient(160deg,#3a1d6e,#a02a62);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:16px}
.mini-reel b{font:600 20px/1.2 var(--serif)}
.mini-reel::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 10px);animation:diag 6s linear infinite}
@keyframes diag{to{background-position:140px 0}}
.opc{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:14px;font-weight:600}
.opc small{font:500 12px var(--mono);opacity:.75}
.opc.sel{background:linear-gradient(120deg,rgba(255,210,63,.25),rgba(255,77,141,.3));border-color:rgba(255,255,255,.35)}
.lector{font:500 22px/1.55 var(--serif);color:rgba(255,255,255,.35)}
.lector span{transition:color .25s}
.lector span.dicho{color:#fff}
.lineas i{display:block;height:9px;border-radius:9px;background:rgba(255,255,255,.1);margin:10px 0}
.ondas{display:flex;align-items:center;gap:3px;height:34px;margin-top:auto}
.ondas i{flex:1;background:linear-gradient(var(--celeste),var(--violeta));border-radius:9px;animation:onda 1.1s ease-in-out infinite alternate;height:30%}
@keyframes onda{to{height:100%}}
@media (max-width:900px){
  .pasos{grid-template-columns:1fr;gap:0}
  .pasos .fijo{display:none}
  .lista-pasos .paso{min-height:auto;opacity:1;padding:26px 0;border-top:1px solid var(--line)}
}

/* versiones: elegí tu tiempo */
.tiempo-caja{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:34px;align-items:stretch}
@media (max-width:900px){.tiempo-caja{grid-template-columns:1fr}}
.control{display:flex;flex-direction:column;justify-content:center;gap:18px}
.control .num-grande{font:600 clamp(56px,9vw,104px)/1 var(--sans);letter-spacing:-.05em}
.control .num-grande small{font-size:.32em;letter-spacing:0;color:var(--fg3);margin-left:8px;font-weight:500}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:99px;background:linear-gradient(90deg,var(--rosa) var(--pct,20%),var(--card2) var(--pct,20%));outline-offset:8px;border:1px solid var(--line)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 6px rgba(255,77,141,.3),0 4px 14px rgba(0,0,0,.5);cursor:grab}
input[type=range]::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 6px rgba(255,77,141,.3);cursor:grab}
.marcas{display:flex;justify-content:space-between;font:500 11.5px var(--mono);color:var(--fg3);letter-spacing:.06em}
.veredicto{min-height:3.2em;color:var(--fg2);font-size:17px}
.libro-caja{padding:26px}
.libro-caja .titulo{font:600 24px var(--serif);letter-spacing:-.01em}
.libro-caja .autor{color:var(--fg3);font-size:15px;margin-bottom:12px}
.op{display:grid;grid-template-columns:1fr auto;gap:4px 14px;padding:15px 14px;margin:0 -14px;border-radius:16px;border:1px solid transparent;transition:background .4s,border-color .4s,opacity .4s,transform .5s var(--ease);opacity:.45}
.op.ok{opacity:.8}
.op.mejor{opacity:1;background:linear-gradient(120deg,rgba(255,210,63,.13),rgba(255,77,141,.16));border-color:rgba(255,255,255,.22);transform:scale(1.015)}
.op b{font-weight:600}.op small{display:block;color:var(--fg3);font-size:13.5px}
.op .t{font:500 13px var(--mono);align-self:center;white-space:nowrap}
.op .bar{grid-column:1/-1;height:6px;border-radius:9px;background:var(--card2);overflow:hidden}
.op .bar i{display:block;height:100%;width:var(--w);border-radius:9px;background:linear-gradient(90deg,var(--celeste),var(--violeta));transform-origin:0 50%}
.op.mejor .bar i{background:linear-gradient(90deg,var(--amarillo),var(--rosa))}
.extras{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
@media (max-width:900px){.extras{grid-template-columns:1fr}}
.etq{display:inline-block;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:99px;border:1px solid var(--line);color:var(--fg2);margin-left:6px;vertical-align:middle}

/* estante 3D */
.estante{display:flex;gap:18px;overflow-x:auto;padding:30px 20px 40px;margin:0 -20px;scroll-snap-type:x proximity;scrollbar-width:thin}
.libro3d{flex:0 0 160px;aspect-ratio:2/3;border-radius:6px 14px 14px 6px;padding:16px 14px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;scroll-snap-align:start;
  background:linear-gradient(155deg,var(--c1),var(--c2));box-shadow:inset 7px 0 0 rgba(0,0,0,.2),0 20px 36px -18px rgba(0,0,0,.7);transform:perspective(700px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transition:transform .4s var(--ease),box-shadow .4s}
.libro3d:hover{box-shadow:inset 7px 0 0 rgba(0,0,0,.2),0 30px 50px -18px var(--c1)}
.libro3d b{font:600 17px/1.12 var(--serif)}.libro3d small{font:500 9.5px var(--mono);letter-spacing:.13em;text-transform:uppercase;opacity:.85}

/* números */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:900px){.cifras{grid-template-columns:1fr 1fr}}
.cifra{padding:26px;text-align:left}
.cifra .n{font:600 clamp(44px,6vw,72px)/1 var(--sans);letter-spacing:-.05em;background:linear-gradient(160deg,#fff,var(--fg3));-webkit-background-clip:text;background-clip:text;color:transparent}
@media (prefers-color-scheme:light){.cifra .n{background:linear-gradient(160deg,var(--ink2),var(--violeta));-webkit-background-clip:text;background-clip:text}}
.cifra span{color:var(--fg2);font-size:15px}

/* preguntas */
.faq{max-width:820px;margin-top:30px}
details{border-top:1px solid var(--line);padding:4px 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-weight:600;font-size:19px;letter-spacing:-.01em;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:6px;top:50%;margin-top:-16px;font:500 28px/32px var(--sans);color:var(--rosa);transition:transform .35s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--fg2);padding:0 0 22px;max-width:46em}

/* cierre */
.cierre{text-align:center;padding:120px 0;overflow:hidden;isolation:isolate}
.cierre h2{font-size:clamp(38px,7vw,84px);margin:.2em auto .4em;max-width:12em}
.cierre .acciones{justify-content:center;opacity:1;animation:none}

footer.pie{border-top:1px solid var(--line);padding:56px 0 40px;font-size:14.5px;color:var(--fg2);background:var(--bg2)}
.pie-grilla{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
@media (max-width:900px){.pie-grilla{grid-template-columns:1fr 1fr}}
.pie h4{font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--fg3);margin-bottom:14px}
.pie ul{list-style:none;display:grid;gap:9px}
.pie a{text-decoration:none}.pie a:hover{color:var(--fg);text-decoration:underline}
.pie .bajo{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--fg3);font-size:13.5px}

/* páginas legales */
.legal{padding:64px 0 100px}
.legal .contenido{max-width:760px}
.legal h1{font-size:clamp(36px,5.5vw,60px);margin:14px 0 8px}
.legal .fecha{color:var(--fg3);font-size:14.5px;margin-bottom:36px}
.legal h2{font-size:26px;margin:2em 0 .5em;letter-spacing:-.02em}
.legal h3{font-size:19px;margin:1.4em 0 .4em}
.legal p,.legal li{color:var(--fg2);margin-bottom:.9em}
.legal ul,.legal ol{padding-left:1.3em;margin-bottom:1em}
.legal a{color:var(--celeste)}
.legal table{width:100%;border-collapse:collapse;margin:1em 0 1.6em;font-size:15px}
.legal th,.legal td{border-bottom:1px solid var(--line);padding:11px 10px;text-align:left;vertical-align:top;color:var(--fg2)}
.legal th{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg3)}
.aviso{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:16px 18px;font-size:15px;color:var(--fg2);margin:1.4em 0}

/* movimiento reducido */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .palabra>span{transform:none}.rev{opacity:1;transform:none}.portada p.grande,.acciones,.desliza{opacity:1}
  .cinta div{animation:none}
}