/* letra Archivo guardada junto a la presentación: abre sin internet y al instante */
@font-face{font-family:'Archivo';src:url('/fuentes/archivo-latin-wdth-wght.woff2') format('woff2');
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
/* ============ Identidad «Luz y toque» + capa «Luz de cristal» ============ */
:root{
  --tinta:#0E1116; --losa:#161A22; --losa-alta:#1C212B; --hilo:#262C38;
  --luz:#F3F5F8; --humo:#9AA1AF;
  /* un color por pantalla del teléfono */
  --feed:#7CC4FF;   /* 1 y 2 · el feed abierto */
  --perfil:#C29BFF; /* 3 · tu perfil */
  --enlace:#FF8FD0; /* 4 · tu enlace */
  --wa:#FFB25C;     /* 5 · tu WhatsApp */
  --post:#6EE7B7;   /* 6 y 7 · posventa y atajo */
  --c:var(--luz);
  --bar:60px;
  --padx:clamp(20px,5vw,96px);
  --pady:clamp(18px,4.5vh,72px);
  --t-hero:clamp(2.7rem, min(1.6rem + 5.2vw, 12vh), 8.4rem);
  --t-h:clamp(2.05rem, min(1.2rem + 3.6vw, 9vh), 5.6rem);
  --t-big:clamp(1.45rem, min(1rem + 1.9vw, 5.4vh), 3.2rem);
  --t-body:clamp(1.12rem, min(.9rem + 1vw, 3.4vh), 2.05rem);
  --t-small:clamp(.95rem, min(.8rem + .5vw, 2.4vh), 1.35rem);
  --t-label:clamp(.74rem, .66rem + .3vw, 1.02rem);
  --ease:cubic-bezier(.2,.8,.2,1);
  --muelle:cubic-bezier(.34,1.45,.64,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--tinta);color:var(--luz);overflow:hidden}
body{font-family:'Archivo',system-ui,sans-serif;font-variation-settings:'wdth' 100;-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* grano de cine y viñeta */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.035;
  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='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* la luz que sigue a la persona */
#halo{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(560px circle at var(--lx,70%) var(--ly,35%), color-mix(in srgb,var(--c) 13%,transparent), transparent 70%),
             radial-gradient(1200px 800px at 50% 120%, rgba(0,0,0,.6), transparent 70%);
  transition:background .6s}

/* ============ Diapositivas ============ */
#deck{position:fixed;inset:0;z-index:1;user-select:none;-webkit-user-select:none}
.s{position:absolute;inset:0 0 var(--bar) 0;display:flex;overflow-y:auto;overflow-x:hidden;
  padding:max(var(--pady),env(safe-area-inset-top)) var(--padx) var(--pady);
  opacity:0;visibility:hidden;transform:translateX(3%);
  transition:opacity .55s var(--ease),transform .7s var(--ease),visibility 0s .7s;scrollbar-width:none}
.s::-webkit-scrollbar{display:none}
.s.cur{opacity:1;visibility:visible;transform:none;transition:opacity .55s var(--ease),transform .7s var(--ease),visibility 0s}
.s.past{transform:translateX(-3%)}
.s[data-screen=feed]{--c:var(--feed)} .s[data-screen=perfil]{--c:var(--perfil)}
.s[data-screen=enlace]{--c:var(--enlace)} .s[data-screen=wa]{--c:var(--wa)} .s[data-screen=post]{--c:var(--post)}
.wrap{margin:auto;width:100%;max-width:1560px;position:relative}
.split{display:grid;gap:clamp(18px,3.6vw,80px);align-items:center}
.stack{display:grid;gap:clamp(12px,2.4vh,32px)}
.fig{display:flex;justify-content:center;align-items:center;min-width:0}
@media (min-width:900px) and (min-aspect-ratio:5/4){
  .split{grid-template-columns:1.05fr .95fr}
  .split.wide-fig{grid-template-columns:.9fr 1.1fr}
  .split.rev > :first-child{order:2}
}

/* ============ Letra ============ */
.tag{display:inline-flex;align-items:center;gap:.6em;font-size:var(--t-label);font-weight:600;font-variation-settings:'wdth' 112;
  letter-spacing:.12em;text-transform:uppercase;color:var(--humo);margin-bottom:clamp(10px,2vh,26px)}
.tag::before{content:"";width:.62em;height:.62em;border-radius:50%;background:var(--c);
  box-shadow:0 0 0 .32em color-mix(in srgb,var(--c) 22%,transparent)}
.hero{font-size:var(--t-hero);line-height:.96;font-weight:800;font-variation-settings:'wdth' 92;letter-spacing:-.025em}
.h{font-size:var(--t-h);line-height:1;font-weight:800;font-variation-settings:'wdth' 92;letter-spacing:-.022em;text-wrap:balance}
.big{font-size:var(--t-big);line-height:1.12;font-weight:700;font-variation-settings:'wdth' 96;letter-spacing:-.012em;text-wrap:balance}
.body{font-size:var(--t-body);line-height:1.32;color:var(--humo);max-width:32ch;text-wrap:pretty}
.body b,.big b{color:var(--luz);font-weight:700}
.small{font-size:var(--t-small);line-height:1.35;color:var(--humo)}
.src{font-size:var(--t-label);color:var(--humo);opacity:.8;letter-spacing:.02em;margin-top:.5em}
.lit{color:var(--c)}
.light{font-weight:300}
.mt{margin-top:clamp(12px,2.6vh,36px)}
.mt2{margin-top:clamp(6px,1.2vh,16px)}
#wave span{display:inline-block;font-variation-settings:'wght' var(--w,800),'wdth' 92;font-weight:unset;transition:font-variation-settings .24s}

/* ============ Formas macizas iluminadas por dentro ============ */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:.4em;border-radius:999px;padding:.32em .9em;
  font-weight:800;font-variation-settings:'wdth' 100;color:var(--tinta);
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 62%,white),var(--c) 45%,color-mix(in srgb,var(--c) 82%,black));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 18px color-mix(in srgb,var(--c) 38%,transparent)}
.pill.num{width:1.9em;height:1.9em;padding:0;font-size:1.05em}
.pill.off{background:var(--tinta);color:var(--c);box-shadow:inset 0 0 0 1.5px var(--c)}
.card{background:var(--losa);border:1px solid var(--hilo);border-radius:14px;padding:clamp(14px,2.2vw,30px)}
.card.edge{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--c) 70%,transparent)}
.dot{width:.9em;height:.9em;border-radius:50%;background:var(--luz);box-shadow:0 0 0 .35em rgba(255,255,255,.18);display:inline-block}

/* ============ Lo que aparece al avanzar ============ */
.f{opacity:0;transform:translateY(.55em);filter:blur(6px);
  transition:opacity .5s var(--ease),transform .65s var(--ease),filter .5s var(--ease)}
.f.on{opacity:1;transform:none;filter:none}
.f.pop{transform:scale(.92)} .f.pop.on{transform:none;transition:opacity .4s var(--ease),transform .45s var(--muelle),filter .4s}
.f.from-l{transform:translateX(-.8em)} .f.from-r{transform:translateX(.8em)}
.f.ghost{opacity:.16;filter:none;transform:none}
.f.ghost.on{opacity:1}
.hlf{transition:box-shadow .45s var(--ease),outline-color .45s,background .45s,opacity .45s;outline:2px solid transparent;outline-offset:3px}
.hlf.on{outline-color:var(--c);box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 18%,transparent),0 0 22px color-mix(in srgb,var(--c) 35%,transparent)}
.x{opacity:.34;filter:saturate(.2);transition:opacity .45s,filter .45s}
.strike{position:relative}
.strike::after{content:"";position:absolute;left:-3%;top:54%;height:max(3px,.08em);width:106%;background:var(--luz);border-radius:3px;
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.strike.x::after,.x .strike::after{transform:scaleX(1)}
.x.strike,.x .strike{opacity:1}
.instant .f,.instant .hlf,.instant .strike::after,.instant .x{transition:none!important}
.draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease)}
.draw.on{stroke-dashoffset:0}

/* ============ Barra de control (vidrio) ============ */
#bar{position:fixed;left:0;right:0;bottom:0;height:var(--bar);z-index:20;display:flex;align-items:center;gap:12px;
  padding:0 max(14px,env(safe-area-inset-left)) env(safe-area-inset-bottom) max(14px,env(safe-area-inset-left));
  background:rgba(14,17,22,.62);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
  border-top:1px solid rgba(255,255,255,.07)}
#bar button{all:unset;cursor:pointer;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--luz);
  transition:background .18s,transform .18s}
#bar button:hover{background:rgba(255,255,255,.08)} #bar button:active{transform:scale(.94)}
#bar button:focus-visible{outline:2px solid var(--luz);outline-offset:2px}
#bar svg{width:22px;height:22px}
#prog{flex:1;display:flex;gap:3px;height:6px;align-items:center}
#prog i{flex:1;height:4px;border-radius:3px;background:var(--hilo);transition:background .3s,height .3s}
#prog i.done{background:color-mix(in srgb,var(--sc) 55%,var(--hilo))}
#prog i.now{background:var(--sc);height:6px;box-shadow:0 0 10px color-mix(in srgb,var(--sc) 60%,transparent)}
#volver{color:var(--humo);text-decoration:none;font-size:.86rem;font-weight:700;padding:10px 8px;border-radius:10px;white-space:nowrap}
#volver:hover{color:var(--luz);background:rgba(255,255,255,.08)}
#count{font-size:.86rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--humo);min-width:4.6em;text-align:right;letter-spacing:.04em}
#hint{position:fixed;left:50%;bottom:calc(var(--bar) + 18px);transform:translateX(-50%);z-index:21;font-size:var(--t-label);
  letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--humo);display:flex;gap:.7em;align-items:center;
  transition:opacity .5s;pointer-events:none;white-space:nowrap}
#hint.gone{opacity:0}
#hint kbd{font:inherit;border:1px solid var(--hilo);border-radius:6px;padding:.15em .5em;color:var(--luz)}
@media (max-width:899px){#prog{gap:2px} #fs{display:none!important}}

/* ============ Teléfono ============ */
.phone{--ph:min(36dvh,360px);height:var(--ph);aspect-ratio:9/19;border-radius:calc(var(--ph)*.075);position:relative;flex:none;
  background:#06080B;box-shadow:inset 0 0 0 1.5px #2A303B,inset 0 0 0 calc(var(--ph)*.014) #10141A,0 30px 80px rgba(0,0,0,.55);
  container-type:inline-size}
@media (min-width:900px) and (min-aspect-ratio:5/4){.phone{--ph:min(70dvh,740px)}}
.phone .scr{position:absolute;inset:calc(var(--ph)*.02);border-radius:calc(var(--ph)*.058);overflow:hidden;background:var(--tinta)}
.phone .notch{position:absolute;top:calc(var(--ph)*.03);left:50%;transform:translateX(-50%);width:28%;height:calc(var(--ph)*.026);
  border-radius:99px;background:#000;z-index:3}
.bar-g{height:2.6cqw;border-radius:2cqw;background:#262C38}

/* feed */
.feed-list{position:absolute;inset:0;padding:14cqw 5cqw 0;display:grid;gap:6cqw;align-content:start;
  transition:transform 2.6s cubic-bezier(.45,0,.2,1)}
.feed-list.on{transform:translateY(-252cqw)}
.post{display:grid;gap:2.6cqw}
.post .who{display:flex;gap:2.4cqw;align-items:center}
.post .av{width:7cqw;height:7cqw;border-radius:50%;background:#262C38}
.post .media{aspect-ratio:4/5;border-radius:3cqw;background:linear-gradient(160deg,#1C212B,#12161D);position:relative;overflow:hidden}
.post.mine .av{background:var(--feed)}
.post.mine .media{background:linear-gradient(170deg,#1b2a3c,#0f1722);box-shadow:inset 0 0 0 .6cqw color-mix(in srgb,var(--feed) 60%,transparent)}
.post.mine .media b{position:absolute;left:6cqw;right:6cqw;top:12cqw;font-size:9.5cqw;line-height:1;font-weight:800;font-variation-settings:'wdth' 88;color:var(--luz)}
.post.mine .media b em{font-style:normal;color:var(--feed)}
.post .acts{display:flex;gap:4cqw;align-items:center}
.post .acts svg{width:7cqw;height:7cqw;stroke:#5b6271;fill:none;stroke-width:2}
.post .acts .sv{margin-left:auto}
.post.mine .acts .sv.on{stroke:var(--feed);fill:var(--feed)}

/* perfil de Instagram */
.ig{position:absolute;inset:0;padding:13cqw 5cqw 0;display:grid;gap:3.4cqw;align-content:start;font-size:3.6cqw;color:var(--luz)}
.ig .handle{font-weight:800;font-size:4.6cqw;display:flex;gap:2cqw;align-items:center}
.ig .row{display:flex;gap:5cqw;align-items:center}
.ig .avatar{width:19cqw;height:19cqw;border-radius:50%;background:radial-gradient(circle at 50% 38%,#3a4252 0 30%,#1C212B 31%);flex:none;
  box-shadow:0 0 0 1cqw var(--tinta),0 0 0 1.8cqw #2A303B;border-radius:50%}
.ig .avatar.hlf.on{box-shadow:0 0 0 1cqw var(--tinta),0 0 0 1.8cqw var(--perfil),0 0 6cqw color-mix(in srgb,var(--perfil) 50%,transparent);outline:none}
.ig .stats{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw}
.ig .stats div{display:grid;gap:1.4cqw;justify-items:center}
.ig .bio{display:grid;gap:1.6cqw;padding:2cqw;border-radius:2.4cqw}
.ig .bio b{font-size:3.8cqw}
.ig .hls{display:flex;gap:3.4cqw;padding:2cqw;border-radius:2.4cqw}
.ig .hls div{display:grid;gap:1.2cqw;justify-items:center;font-size:2.4cqw;color:var(--humo);font-weight:600;letter-spacing:.04em}
.ig .hls i{width:13cqw;height:13cqw;border-radius:50%;box-shadow:inset 0 0 0 .5cqw #2A303B;display:block}
.ig .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8cqw;padding:1cqw;border-radius:2cqw}
.ig .grid i{aspect-ratio:3/4;background:#1a1f28;display:block;position:relative}
.ig .grid i.pin{background:linear-gradient(170deg,#2a2440,#171424)}
.ig .grid i.pin::after{content:"";position:absolute;right:2cqw;top:2cqw;width:3.2cqw;height:3.2cqw;border-radius:50%;background:var(--perfil)}

/* chat */
.chat{display:grid;gap:clamp(8px,1.6vh,18px);background:#0B0F14;border:1px solid var(--hilo);border-radius:18px;
  padding:clamp(14px,2.2vw,28px);width:100%;max-width:640px}
.chat .head{display:flex;gap:.7em;align-items:center;font-weight:700;font-size:var(--t-small);padding-bottom:.6em;border-bottom:1px solid var(--hilo)}
.chat .head .av{width:2em;height:2em;border-radius:50%;background:#262C38}
.chat .head small{display:block;font-weight:400;color:var(--humo);font-size:.8em}
.bub{max-width:88%;padding:.62em .9em;border-radius:14px;font-size:var(--t-small);line-height:1.36;position:relative}
.bub.in{background:var(--losa-alta);border-top-left-radius:4px;justify-self:start}
.bub.out{background:color-mix(in srgb,var(--c) 17%,#161A22);border:1px solid color-mix(in srgb,var(--c) 32%,transparent);
  border-top-right-radius:4px;justify-self:end}
.bub .lab{display:block;font-size:var(--t-label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c);margin-bottom:.35em}
.bub .fw{display:flex;gap:.4em;align-items:center;color:var(--humo);font-size:.82em;font-style:italic;margin-bottom:.3em}
.typing{display:inline-flex;gap:.3em;padding:.8em 1em}
.typing i{width:.45em;height:.45em;border-radius:50%;background:var(--humo);animation:tp 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-3px)}}

/* losas (filas apiladas) */
.losas{display:grid;gap:8px}
.losa{display:grid;grid-template-columns:auto 1fr;gap:clamp(12px,1.6vw,26px);align-items:center;background:var(--losa);border-radius:12px;
  padding:clamp(10px,1.5vh,20px) clamp(14px,1.6vw,26px);min-height:clamp(58px,8.4vh,96px);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.losa .nums{display:flex;gap:6px;font-size:var(--t-small);min-width:4.4em}
.losa .t{font-size:var(--t-big);font-weight:800;font-variation-settings:'wdth' 94;line-height:1}
.losa .d{font-size:var(--t-small);color:var(--humo);margin-top:.18em}
.losa.on{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--c) 70%,transparent),0 0 0 1px color-mix(in srgb,var(--c) 26%,transparent)}

/* escalera (svg) */
.stairs{width:100%;max-width:820px}
.stairs svg{width:100%;height:auto;overflow:visible}
.stairs .nm{font-size:15px;fill:var(--humo);font-weight:600;letter-spacing:.02em}
@media (max-width:700px){.stairs .nm{display:none}}
.stairs .lab{font-size:21px;font-weight:700;fill:var(--luz)}

/* utilidades varias */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1px solid var(--hilo);background:var(--losa);border-radius:999px;padding:.45em 1em;font-size:var(--t-body);font-weight:600}
.think{position:relative;background:var(--luz);color:var(--tinta);border-radius:22px;padding:.7em 1em;font-size:var(--t-big);font-weight:700;
  line-height:1.15;font-variation-settings:'wdth' 96;max-width:18ch}
.think::after{content:"";position:absolute;left:1.2em;bottom:-.55em;width:.8em;height:.8em;background:var(--luz);border-radius:50%;
  box-shadow:-.6em .55em 0 -.18em var(--luz)}
.grid2{display:grid;gap:clamp(10px,1.8vw,24px)}
@media (min-width:700px){.grid2{grid-template-columns:1fr 1fr}}
.grid3{display:grid;gap:clamp(10px,1.6vw,22px)}
@media (min-width:900px) and (min-aspect-ratio:5/4){.grid3{grid-template-columns:repeat(3,1fr)}}
.grid4{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,28px)}
@media (min-width:900px) and (min-aspect-ratio:5/4){.grid4{grid-template-columns:repeat(4,1fr)}}
.ico{width:clamp(34px,4vw,56px);height:clamp(34px,4vw,56px);stroke:var(--c);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.k{font-size:var(--t-label);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.no{color:var(--humo)}
[data-intro]{visibility:hidden}
.tag,.bignum{justify-self:start;width:max-content;max-width:100%}
.introbig{position:absolute;margin:0!important;z-index:5;pointer-events:none;transform-origin:50% 50%;white-space:nowrap;
  transition:transform .9s cubic-bezier(.65,0,.25,1)}
.wrap{transition:opacity .6s var(--ease) .38s}
.s.pre .wrap{opacity:0;transition:opacity .25s}
.instant .introbig,.instant .wrap,.instant .istage{transition:none!important}
/* bazar: cuadros de todos los colores, torcidos y con letreros */
.g9 .bz{aspect-ratio:1;display:grid;place-items:center;font-style:normal;font-weight:900;color:#0E1116;font-size:clamp(.7rem,.5rem + .9vw,1.3rem);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 10px rgba(0,0,0,.35)}
.g9 .oz{aspect-ratio:1;border-radius:6px;background:#1C212B;display:block}
.g9 .oz.on1{background:linear-gradient(180deg,color-mix(in srgb,var(--perfil) 55%,white),var(--perfil))}
/* el «escribiendo…» desaparece cuando llega la respuesta */
.bub.gone.x{display:none}
.istage{overflow:hidden}
.vcard{display:flex;gap:.6em;align-items:center;padding:.45em .6em;border-radius:10px;background:rgba(0,0,0,.28);margin:.2em 0 .45em}
.vcard i{width:2em;height:2em;border-radius:50%;background:radial-gradient(circle at 50% 38%,#5a6272 0 32%,#2a303b 33%);flex:none}
.vcard b{display:block;color:var(--luz)}.vcard small{display:block;color:var(--humo);font-size:.82em}
.chat .who{font-size:var(--t-label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--humo)}
.chat.compact{gap:8px}.chat.compact .bub{padding:.45em .8em}.chat.compact .lab{margin-bottom:.12em}
.atajo-stairs{max-width:min(500px,52vh)}
@media (max-width:899px), (max-aspect-ratio:5/4){.atajo-stairs{display:none}}
@media (max-height:720px){.tl3 .small{display:none}}
/* posventa en tres toques */
.tl3{display:grid;gap:clamp(12px,2vw,30px)}
@media (min-width:900px) and (min-aspect-ratio:5/4){.tl3{grid-template-columns:repeat(3,1fr)}}
.tl3 > div{display:grid;gap:10px;align-content:start}
.tl3 .bub{justify-self:start;max-width:100%}
.dn{display:flex;align-items:baseline;gap:.6em;flex-wrap:wrap}
.dn i{width:.9em;height:.9em;border-radius:50%;align-self:center;font-size:var(--t-big);
  background:linear-gradient(180deg,color-mix(in srgb,var(--post) 55%,white),var(--post));box-shadow:0 0 16px color-mix(in srgb,var(--post) 50%,transparent)}
.dn b{font-size:var(--t-big);font-weight:800;font-variation-settings:'wdth' 90}
.dn span{font-size:var(--t-small);color:var(--humo)}
/* escenario de las divisorias: la palabra, el número y la escalera que crece */
.istage{position:absolute;inset:0;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;z-index:4}
.s.pre .istage{opacity:1;visibility:visible;transition:opacity .5s .1s}
.istage .iw{position:absolute;left:0;right:0;top:var(--wt,20%);text-align:center;font-size:clamp(1.1rem,.8rem + 1.6vw,2.4rem);
  font-weight:600;font-variation-settings:'wdth' 112;letter-spacing:.24em;text-transform:uppercase;color:var(--humo)}
.istage .ist{position:absolute;left:50%;top:var(--st,60%);height:var(--sh,240px);width:auto;max-width:none;transform:translateX(-50%)}
.istage .ist svg{height:100%;width:auto;display:block}
.s.cur.pre .istage .new{animation:stepin .8s var(--muelle) .45s both}
@keyframes stepin{from{opacity:0;transform:translateY(46px)}}
.bignum{display:block;font-size:clamp(4rem,min(3rem + 7vw,22vh),12rem);font-weight:900;font-variation-settings:'wdth' 80;line-height:.82;letter-spacing:-.04em}

/* temporizador de 3 segundos */
.ring{width:min(62vw,40vh,440px);aspect-ratio:1;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .tr{stroke:var(--hilo)} .ring .pr{stroke:var(--feed);stroke-linecap:round;transition:stroke-dashoffset 3s linear}
.ring .ct{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.ring .ct b{font-size:clamp(4rem,min(10vw,16vh),9rem);font-weight:900;font-variation-settings:'wdth' 80;line-height:.9}
.ring .ct .sx{font-size:.34em;font-weight:700;color:var(--humo);margin-left:.06em}
.ring .ct .lbl{display:block;font-size:var(--t-small);color:var(--humo);letter-spacing:.1em;text-transform:uppercase;font-weight:600}

/* el dedo (punto de luz) que desliza */
.swipe{width:min(58vw,34vh,360px);aspect-ratio:9/16;border-radius:28px;border:1.5px solid #2A303B;position:relative;overflow:hidden;
  background:repeating-linear-gradient(180deg,#141820 0 34%,#0E1116 34% 37%)}
.swipe .tip{position:absolute;left:50%;top:72%;width:18%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:var(--luz);
  box-shadow:0 0 0 12px rgba(255,255,255,.14),0 0 40px rgba(255,255,255,.35)}
.swipe.on .tip{animation:sw 1.25s cubic-bezier(.5,0,.3,1) 3}
.swipe.on{animation:scr 1.25s cubic-bezier(.5,0,.3,1) 3}
@keyframes sw{0%{top:76%;opacity:0}15%{opacity:1}70%{top:22%;opacity:1}100%{top:18%;opacity:0}}
@keyframes scr{0%{background-position:0 0}100%{background-position:0 -120%}}

/* guardado */
.bm{width:min(46vw,32vh,300px)}
.bm path{stroke:var(--feed);stroke-width:5;fill:transparent;transition:fill .5s var(--ease) .25s}
.bm.on path{fill:var(--feed)}
.toast{display:inline-flex;gap:.6em;align-items:center;background:var(--losa-alta);border:1px solid var(--hilo);border-radius:999px;padding:.5em 1.1em;font-weight:700;font-size:var(--t-small)}

/* línea de tiempo del video */
.tl{display:flex;height:clamp(14px,2.2vh,22px);border-radius:99px;overflow:hidden;background:var(--hilo);gap:3px}
.tl i{display:block;height:100%;background:var(--hilo);transition:background .5s}
.tl i.on{background:linear-gradient(180deg,color-mix(in srgb,var(--feed) 60%,white),var(--feed));box-shadow:0 0 14px color-mix(in srgb,var(--feed) 45%,transparent)}
.tlrow{display:grid;grid-template-columns:auto 1fr;gap:clamp(12px,1.6vw,24px);align-items:baseline}
.tlrow .tm{font-size:var(--t-small);font-weight:800;font-variant-numeric:tabular-nums;color:var(--feed);min-width:5.4em}
.tlrow .tt{font-size:var(--t-big);font-weight:800;font-variation-settings:'wdth' 94;line-height:1.05}
.tlrow .td{font-size:var(--t-small);color:var(--humo);margin-top:.2em}

/* embudo */
.funnel{width:min(64vw,40vh,380px)}
.funnel .drop{fill:var(--feed);opacity:0}
.funnel.on .drop{animation:drip 1.5s ease-in 4}
.funnel.on .drop:nth-of-type(2){animation-delay:.5s}.funnel.on .drop:nth-of-type(3){animation-delay:1s}
@keyframes drip{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(120px)}}

/* fijados, destacadas */
.pinned{display:grid;gap:clamp(10px,1.6vw,22px)}
@media (min-width:900px) and (min-aspect-ratio:5/4){.pinned{grid-template-columns:repeat(3,1fr)}}
.tile{background:linear-gradient(170deg,#211c33,#13111c);border:1px solid #2c2640;border-radius:14px;padding:clamp(14px,2vw,28px);
  display:grid;gap:.5em;align-content:start;position:relative}
@media (min-width:900px) and (min-aspect-ratio:5/4){.tile{min-height:min(42vh,520px);align-content:end}}
.g9{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:min(100%,26vh)}
.tile .pinic{position:absolute;right:16px;top:14px;width:22px;height:22px;stroke:var(--perfil);fill:none;stroke-width:2}
.tile .tt{font-size:var(--t-big);font-weight:800;font-variation-settings:'wdth' 94;line-height:1.05}
.circ{display:grid;justify-items:center;align-content:start;gap:.7em;text-align:center}
.fig.stack{display:grid}
.tlrow > .k{min-width:10.5em}
.bm.on{filter:drop-shadow(0 0 22px color-mix(in srgb,var(--feed) 45%,transparent))}
.circ i{width:clamp(76px,min(11vw,18vh),180px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 30%,#2a2440,#13111c);box-shadow:0 0 0 3px var(--tinta),0 0 0 5px var(--perfil),0 0 22px color-mix(in srgb,var(--perfil) 30%,transparent)}
.circ i svg{width:42%;height:42%;stroke:var(--perfil);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.circ b{font-size:var(--t-small);font-weight:800;letter-spacing:.14em}
.circ span{font-size:var(--t-small);color:var(--humo);max-width:16ch;line-height:1.3}

/* historia */
.story{width:min(64vw,44vh,440px);aspect-ratio:9/16;border-radius:22px;position:relative;overflow:hidden;
  background:radial-gradient(120% 80% at 30% 20%,#2a2440,#0E1116 70%);border:1px solid #2c2640;padding:9% 8%;display:flex;flex-direction:column;container-type:inline-size}
.story .segs{display:flex;gap:4px;margin-bottom:8%}.story .segs i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.25)}
.story .segs i:first-child{background:var(--luz)}
.story p{font-size:10.4cqw;font-weight:800;line-height:1.08;font-variation-settings:'wdth' 92}
.story p em{font-style:normal;color:var(--perfil)}
.story .reply{margin-top:auto;border:1.5px solid rgba(255,255,255,.4);border-radius:99px;padding:3.4cqw 5cqw;font-size:5cqw;color:var(--humo)}
.story .reply b{color:var(--luz)}

/* formulario y navegador */
.form{display:grid;gap:8px;width:100%;max-width:440px}
.form i{display:flex;align-items:center;height:clamp(26px,3.6vh,40px);border-radius:8px;background:var(--losa);border:1px solid var(--hilo);
  font-style:normal;font-size:var(--t-label);color:var(--humo);padding:0 .9em;letter-spacing:.04em}
.browser{width:100%;max-width:620px;border-radius:16px;background:#0B0F14;border:1px solid var(--hilo);overflow:hidden}
.browser .url{display:flex;align-items:center;gap:.6em;padding:.8em 1em;border-bottom:1px solid var(--hilo);font-size:var(--t-small);color:var(--humo)}
.browser .url b{color:var(--luz);font-weight:600}
.browser .pg{padding:clamp(16px,2.4vw,32px);display:grid;gap:clamp(12px,2vh,22px)}
.browser .k{color:var(--enlace)}
.browser h4{font-size:var(--t-big);font-weight:800;font-variation-settings:'wdth' 92;line-height:1.04}
.yesno{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:var(--t-small)}
.yesno div{background:var(--losa);border-radius:10px;padding:.7em .8em;line-height:1.3}
.yesno b{display:block;font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.3em}
.cta{display:flex;justify-content:center;align-items:center;gap:.5em;min-height:52px;border-radius:12px;font-weight:800;font-size:var(--t-small);
  color:var(--tinta);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 60%,white),var(--c) 50%,color-mix(in srgb,var(--c) 85%,black));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 18px color-mix(in srgb,var(--c) 40%,transparent);font-variation-settings:'wdth' 108}

/* posventa */
.days{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding-top:8px}
.days::before{content:"";position:absolute;left:8%;right:8%;top:calc(8px + clamp(14px,2vw,22px));height:2px;background:var(--hilo)}
.days div{display:grid;justify-items:center;gap:.4em;text-align:center;position:relative}
.days i{width:clamp(28px,4vw,44px);aspect-ratio:1;border-radius:50%;background:var(--tinta);box-shadow:inset 0 0 0 2px var(--post)}
.days .on i,.days i.lit{background:linear-gradient(180deg,color-mix(in srgb,var(--post) 55%,white),var(--post));box-shadow:0 0 18px color-mix(in srgb,var(--post) 50%,transparent)}
.days b{font-size:var(--t-big);font-weight:800;font-variation-settings:'wdth' 90}
.days span{font-size:var(--t-small);color:var(--humo)}

/* cadena */
.chain{display:grid;gap:clamp(4px,.9vh,10px);width:100%}
.link{display:grid;font-size:var(--t-small);grid-template-columns:9.6em 1fr;gap:clamp(10px,1.6vw,24px);align-items:center}
.link .pill{font-size:1em;justify-content:flex-start;padding:.55em 1em;font-variation-settings:'wdth' 104}
.link .inv{font-size:var(--t-small);color:var(--humo);display:flex;gap:.6em;align-items:center;line-height:1.25}
.link .inv::before{content:"↓";color:var(--c);font-weight:800}
.link .inv b{color:var(--luz);font-weight:600}

/* leyes */
.law{display:grid;grid-template-columns:auto 1fr;gap:clamp(12px,1.6vw,26px);align-items:center;padding:clamp(10px,1.8vh,22px) 0;border-bottom:1px solid var(--hilo)}
.law:last-child{border:0}
.law .pill{font-size:var(--t-small)}
.law p{font-size:var(--t-big);font-weight:700;line-height:1.1;font-variation-settings:'wdth' 96}
.law p span{color:var(--humo);font-weight:400}

/* ============ Teléfono en vertical: recompone, no encoge ============ */
@media (max-width:899px), (max-aspect-ratio:5/4){
  .m-hide{display:none!important}
  .phone{--ph:min(34dvh,340px)}
  .swipe{width:auto;height:22dvh}
  .story{width:auto;height:44dvh}
  .story p{font-size:11.5cqw}
  .ring{width:min(54vw,28dvh)}
  .bm{width:min(36vw,20dvh)}
  .funnel{width:min(46vw,24dvh)}
  .grid3 .ico{display:none}
  .card{padding:12px 14px}
  .card .big,.tile .tt,.grid3 .big{font-size:clamp(1.05rem,4.4vw,1.5rem)}
  .form{grid-template-columns:1fr 1fr;gap:6px}.form i{height:24px;font-size:.68rem}.form p{grid-column:1/-1}
  .two{grid-template-columns:1fr 1fr}
  .chat{padding:12px}.chat .head{display:none}
  .bub{font-size:.92rem}
  .think{font-size:clamp(1.1rem,4.8vw,1.5rem)}
  .chips .chip{font-size:1rem}
  .tlrow{grid-template-columns:1fr;gap:2px}
  .tile{padding:12px 14px}
  .circ i{width:min(64px,9dvh)}
  .losa{min-height:50px}
}
@media (max-width:899px) and (max-height:720px){
  .phone{--ph:30dvh} .bub{font-size:.84rem;padding:.5em .75em} .chat{gap:6px} .stairs{max-width:74%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01s!important;animation:none!important}
  .feed-list.on{transform:translateY(-252cqw)}
}