/* SG IA · Smart Glide — página de Santiago Gómez (2026-10) */
:root{
  --canvas:#F6F5F2; --panel:#FCFBF9; --blanco:#FFFFFF;
  --ink:#0A0A0A; --grafito:#252525; --texto2:#55524D; --gris:#8A8A8A; --linea:#DEDAD3; --linea2:#ECE9E3;
  --sombra:0 18px 50px -24px rgba(10,10,10,.28);
  --r:22px; --pad:clamp(16px,4vw,56px);
  --display:Manrope,system-ui,sans-serif; --body:Inter,system-ui,sans-serif; --mono:"DM Mono",ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.22,.8,.26,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--canvas);color:var(--ink);font:400 17px/1.65 var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:fixed;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:99px;text-decoration:none}
.saltar:focus{top:16px}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto2);font-weight:400}
h2{font:800 clamp(34px,5.2vw,64px)/1.02 var(--display);letter-spacing:-.035em;max-width:16ch}
h3{font:600 20px/1.25 var(--display);letter-spacing:-.01em}
em{font-style:normal}
strong,b{font-weight:600;color:var(--ink)}
.solo-cel{display:none}
@media (hover:none),(max-width:760px){.solo-pc{display:none}.solo-cel{display:inline}}

/* Brillo metálico que se desliza (sello de la marca) */
.brillo{background:linear-gradient(100deg,var(--ink) 0 38%,#C6C6C6 50%,var(--ink) 62% 100%);background-size:260% 100%;background-position:130% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brillo 4.2s var(--ease) infinite}
@keyframes brillo{0%{background-position:130% 0}55%,100%{background-position:-30% 0}}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:0 24px;border-radius:99px;font:600 15px var(--display);text-decoration:none;transition:transform .35s var(--ease),background .3s,color .3s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-negro{background:var(--ink);color:#fff}
.btn-negro:hover{background:var(--grafito)}
.btn-borde{border:1.5px solid var(--ink);color:var(--ink)}
.btn-borde:hover{background:var(--ink);color:#fff}
.btn-sm{min-height:40px;padding:0 18px;font-size:13.5px}
.btn-grande{min-height:60px;padding:0 36px;font-size:17px}
.enlace{font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* Menú flotante */
.nav{position:fixed;z-index:50;top:16px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:6px 6px 6px 16px;border-radius:99px;background:rgba(252,251,249,.78);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(222,218,211,.9);box-shadow:var(--sombra);max-width:calc(100vw - 32px)}
.nav-marca img{height:30px;width:auto}
.nav-links{display:flex;gap:2px;margin:0 6px 0 10px}
.nav-links a{display:block;white-space:nowrap;padding:8px 12px;border-radius:99px;font:500 14px var(--body);text-decoration:none;color:var(--grafito);transition:background .25s}
.nav-links a:hover,.nav-links a.activo{background:var(--linea2);color:var(--ink)}
.nav-indice{display:none;align-items:center;min-height:40px;padding:0 10px;border-radius:99px}
.nav-indice .mono{font-size:12px;color:var(--ink);letter-spacing:.06em}
.nav-indice .mono+.mono{color:var(--gris)}
.nav-carga{position:absolute;left:22px;right:22px;bottom:-1px;height:2px;border-radius:2px;overflow:hidden;pointer-events:none}
.nav-carga i{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}

/* Índice 01-07 (guía de scroll) */
.indice{position:fixed;z-index:40;right:22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px;opacity:0;pointer-events:none;transition:opacity .5s}
.indice.ver{opacity:1;pointer-events:auto}
.indice a{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:8px;min-height:30px;padding:0 4px;font:400 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--gris)}
.indice a span{opacity:0;transition:opacity .3s}
.indice a em{position:absolute;right:100%;margin-right:4px;padding:5px 10px;border-radius:99px;background:var(--ink);color:#fff;white-space:nowrap;opacity:0;transform:translateX(6px);pointer-events:none;transition:opacity .25s,transform .3s var(--ease)}
.indice a:hover em,.indice a:focus-visible em{opacity:1;transform:none}
.indice a::after{content:"";width:14px;height:1.5px;background:var(--gris);transition:width .4s var(--ease),background .3s}
.indice a.activo span{opacity:1;color:var(--ink)}
.indice a.activo::after{width:28px;background:var(--ink)}
@media(min-width:861px){.sec,.pie{padding-right:max(var(--pad),84px)}}
@media(min-width:861px) and (max-height:760px){.tarjeta{position:relative!important;top:auto!important}}

/* Portada */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:#fff}
.hero-media{position:absolute;inset:0}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease)}
.hero-video.lista{opacity:1}
.hero-video{filter:contrast(1.35) brightness(1.02)}
.hero-media{background:#fff url(portada-1080.webp) center/cover}
@media (max-aspect-ratio:1/1){.hero-media{background-image:url(portada-movil.webp)}}
.hero-malla{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(to top,rgba(246,245,242,.92),rgba(246,245,242,0));pointer-events:none}
.hero-texto{position:relative;z-index:2;padding:0 var(--pad) clamp(48px,9vh,110px);max-width:820px}
.hero h1{font-family:var(--display);color:var(--ink)}
.h1-nombre{display:block;font-weight:300;font-size:clamp(24px,3.2vw,40px);letter-spacing:-.015em;line-height:1.1}
.h1-frase{display:block;font-weight:800;font-size:clamp(50px,8.4vw,116px);line-height:.95;letter-spacing:-.045em;margin:.14em 0 .3em}
.hero-bajada{font-size:clamp(16px,1.5vw,19px);color:var(--texto2);max-width:44ch}
.hero-botones{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 14px}
.hero-nota{font-size:13.5px;color:var(--texto2)}
.hero-desliza{position:absolute;z-index:2;right:var(--pad);bottom:clamp(48px,9vh,110px);display:flex;align-items:center;gap:12px}
.hero-desliza i{width:46px;height:1.5px;background:var(--linea);position:relative;overflow:hidden}
.hero-desliza i::after{content:"";position:absolute;inset:0;background:var(--ink);transform:translateX(-100%);animation:desliza 2.4s var(--ease) infinite}
@keyframes desliza{60%,100%{transform:translateX(100%)}}
/* Logo de acero con luz atrás (protagonista de la portada) */
.hero-logo{--lx:50%;--ly:45%;--sx:0px;--sy:18px;position:absolute;z-index:1;right:max(5vw,84px);top:47%;width:min(40vw,700px);aspect-ratio:1400/579;transform:translateY(-50%);pointer-events:none;opacity:0;animation:logoEntra 1.6s .3s var(--ease) forwards}
@keyframes logoEntra{from{opacity:0;transform:translateY(-46%) scale(.96)}to{opacity:1;transform:translateY(-50%)}}
.hl-pared{position:absolute;inset:-55% -30%;border-radius:50%;background:radial-gradient(closest-side at var(--lx) var(--ly),#fff 0%,rgba(255,255,255,.96) 30%,rgba(255,255,255,0) 58%),radial-gradient(closest-side,rgba(10,10,10,0) 30%,rgba(10,10,10,.13) 62%,rgba(10,10,10,0) 100%);filter:blur(4px)}
.hl-halo,.hl-acero,.hl-brillo{position:absolute;inset:0;width:100%;height:100%}
.hl-halo{filter:blur(10px) drop-shadow(0 0 18px #fff) drop-shadow(0 0 30px #fff);opacity:1;transform:scale(1.02)}
.hl-acero{filter:drop-shadow(var(--sx) var(--sy) 18px rgba(10,10,10,.28)) drop-shadow(0 0 1px rgba(10,10,10,.4))}
.hl-brillo{-webkit-mask:url(marca-sg-ia-negro.webp) center/100% 100% no-repeat;mask:url(marca-sg-ia-negro.webp) center/100% 100% no-repeat;background:linear-gradient(105deg,transparent 0 40%,rgba(255,255,255,.95) 49%,rgba(210,210,210,.6) 52%,transparent 60% 100%);background-size:300% 100%;background-position:120% 0;animation:destello 5.5s 1.8s var(--ease) infinite}
@keyframes destello{0%{background-position:120% 0}45%,100%{background-position:-20% 0}}
@media(max-width:1100px){.hero-logo{right:50%;top:clamp(84px,17vh,170px);width:min(74vw,520px);transform:translateX(50%)}@keyframes logoEntra{from{opacity:0;transform:translateX(50%) scale(.96)}to{opacity:1;transform:translateX(50%)}}}
@media(max-width:1100px) and (max-height:700px){.hero-logo{width:min(54vw,360px);top:76px}}

/* Partículas que forman el logo */
.hero-particulas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero-logo.particulas{animation:none;opacity:1}
.hero-logo.particulas .hl-acero{opacity:0;transition:opacity 1.2s var(--ease)}
.hero-logo.particulas.formado .hl-acero{opacity:.18}
.hero-logo.particulas .hl-halo,.hero-logo.particulas .hl-pared{opacity:0;transition:opacity 1.6s var(--ease)}
.hero-logo.particulas.formado .hl-halo,.hero-logo.particulas.formado .hl-pared{opacity:1}
.hero-logo.particulas .hl-brillo{animation-delay:3.4s}
.hero-logo.particulas{transition:opacity .25s linear}

/* Señales para lo que se toca o se arrastra (se apagan al primer uso) */
.hero-pista{position:absolute;z-index:3;right:max(5vw,84px);width:min(40vw,700px);top:calc(47% + min(40vw,700px)*579/1400/2 + 26px);text-align:center;font-size:11px;color:var(--ink);opacity:0;transition:opacity .8s;pointer-events:none}
.hero-pista.ver{opacity:.75;animation:respira 2.4s var(--ease) infinite}
.hero-pista.fuera{opacity:0!important;animation:none}
@keyframes respira{50%{transform:translateY(-3px)}}
@media(max-width:1100px){.hero-pista{right:50%;transform:translateX(50%);width:min(74vw,520px);top:calc(clamp(84px,17vh,170px) + min(74vw,520px)*579/1400 + 14px)}.hero-pista.ver{animation:none}}
.rodillo-pista{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:22px;z-index:2;pointer-events:none;transition:opacity .4s}
.rodillo-pista i{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent}
.rodillo-pista i:first-child{border-bottom:7px solid var(--ink);animation:arriba 1.6s var(--ease) infinite}
.rodillo-pista i:last-child{border-top:7px solid var(--ink);animation:abajo 1.6s var(--ease) infinite}
@keyframes arriba{50%{transform:translateY(-4px)}}@keyframes abajo{50%{transform:translateY(4px)}}
.rodillo.usado .rodillo-pista{opacity:0}
.proceso-caja:not(.tocado) .tapon:first-of-type .tapon-cuerpo{animation:invita 2.4s 1s var(--ease) infinite}
@keyframes invita{0%,60%,100%{transform:none}70%{transform:translateY(-12px)}80%{transform:translateY(-2px)}88%{transform:translateY(-6px)}}

/* Puntero propio: punto y anillo de acero (solo con mouse) */
.cursor-punto,.cursor-anillo{position:fixed;left:0;top:0;z-index:200;pointer-events:none;opacity:0;transition:opacity .3s}
html.cursor-propio .cursor-punto,html.cursor-propio .cursor-anillo{opacity:1}
html.cursor-propio.cursor-fuera .cursor-punto,html.cursor-propio.cursor-fuera .cursor-anillo{opacity:0}
html.cursor-propio,html.cursor-propio a,html.cursor-propio button,html.cursor-propio [role="slider"]{cursor:none}
.cursor-punto{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--ink)}
.cursor-anillo{width:36px;height:36px;margin:-18px 0 0 -18px}
.cursor-anillo::before{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(10,10,10,.55);transition:transform .45s var(--ease),background .35s,border-color .35s,box-shadow .45s}
.cursor-anillo.boton::before{transform:scale(1.9);background:rgba(10,10,10,.08);border-color:var(--ink)}
.cursor-anillo.linterna::before{transform:scale(4.2);border-color:rgba(10,10,10,.12);background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,.35) 55%,rgba(255,255,255,0) 72%);box-shadow:0 0 60px 20px rgba(255,255,255,.55)}
.cursor-anillo.arrastrable::before{transform:scale(1.5);background:var(--ink);border-color:var(--ink)}

/* La luna compañera: baja con el scroll y se posa en partes de la página */
.luna-compa{position:absolute;left:0;top:0;z-index:45;width:46px;height:46px;margin:-23px 0 0 -23px;pointer-events:none;will-change:transform;opacity:0;transition:opacity .8s}
.luna-compa.lista{opacity:1}
.luna{position:relative;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 10px rgba(10,10,10,.28));transition:transform .5s var(--ease)}
.luna-compa.volando .luna{transform:scale(.86)}
.luna-compa.posada .luna{animation:posa .7s var(--ease)}
@keyframes posa{0%{transform:scale(.86) translateY(-6px)}55%{transform:scale(1.06,.94) translateY(1px)}100%{transform:none}}
.luna-estela{position:absolute;left:50%;top:50%;width:120px;height:40px;margin:-20px 0 0 -6px;border-radius:99px;background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(220,218,214,.55) 30%,rgba(220,218,214,0));transform-origin:6px 50%;opacity:0;transition:opacity .4s;filter:blur(3px)}
.luna-compa.volando .luna-estela{opacity:.9}
@media(max-width:860px){.luna-compa{width:36px;height:36px;margin:-18px 0 0 -18px}.luna-estela{height:30px;margin-top:-15px;width:90px}}
.ca-flechas{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:600 12px/1 var(--body);opacity:0;transition:opacity .25s;z-index:1}
.cursor-anillo.arrastrable .ca-flechas{opacity:1}
.toque-onda{position:fixed;z-index:200;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;border:1.5px solid rgba(10,10,10,.45);pointer-events:none;animation:onda .7s var(--ease) forwards}
@keyframes onda{from{transform:scale(.2);opacity:1}to{transform:scale(1.6);opacity:0}}

/* entrada de la portada */
.hero-texto>*{opacity:0;transform:translateY(22px);animation:entra 1.1s var(--ease) forwards}
.hero-texto h1{animation-delay:.15s}.hero-bajada{animation-delay:.35s}.hero-botones{animation-delay:.5s}.hero-nota{animation-delay:.62s}
@keyframes entra{to{opacity:1;transform:none}}

/* Secciones */
.sec{padding:clamp(64px,8vw,112px) var(--pad) 0;max-width:1360px;margin:0 auto;position:relative}
.sec-cab{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--linea);padding-top:16px;margin-bottom:clamp(22px,3vw,40px)}
.sec-cab .mono span{color:var(--ink);margin-right:10px}
.sec-bajada{color:var(--texto2);margin-top:14px;max-width:52ch}
.nota{font-size:14.5px;color:var(--texto2)}
.revela{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.revela.in{opacity:1;transform:none}

/* 01 Muestras (pendiente) */
.muestras-grid{display:grid;gap:16px;margin-top:32px}
@media(min-width:861px){.muestras-grid{grid-template-columns:repeat(3,1fr)}}
.muestra{display:block;text-decoration:none;color:inherit}
.muestra-media{position:relative;display:block;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;background:var(--linea2);box-shadow:var(--sombra)}
.muestra-media img,.muestra-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s,transform 1.2s var(--ease)}
.muestra-media video{opacity:0}
.muestra.viva .muestra-media video{opacity:1}
.muestra:hover .muestra-media img,.muestra:hover .muestra-media video{transform:scale(1.04)}
.tag-muestra{position:absolute;left:12px;top:12px;z-index:2;font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;background:rgba(252,251,249,.9);color:var(--ink);border-radius:99px;padding:5px 10px}
.muestra-pie{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:14px 4px 0}
.muestra-pie b{font:600 18px var(--display);letter-spacing:-.01em}
.muestra-pie span{grid-column:1;color:var(--texto2);font-size:14px}
.muestra-pie i{grid-column:2;grid-row:1/3;align-self:center;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;font-style:normal;border-bottom:1px solid var(--ink);padding-bottom:2px}
.muestra-hueco{aspect-ratio:16/9;border-radius:var(--r);border:1.5px dashed var(--linea);display:grid;place-items:center;background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(222,218,211,.35) 14px 15px)}

/* 02 Quién soy */
.quien-grid{display:grid;gap:clamp(36px,6vw,90px);align-items:start}
@media(min-width:900px){.quien-grid{grid-template-columns:1.05fr 1fr}.quien-izq{position:sticky;top:110px}}
.quien h2{max-width:14ch}
.llenado .p{color:#CFCBC4;transition:color .35s}
.llenado .p.on{color:var(--ink)}
.llenado .p.ultima{transition:color .6s}
.llenado .p.ultima.on{background:linear-gradient(100deg,var(--ink) 0 38%,#C6C6C6 50%,var(--ink) 62% 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brillo 4.2s var(--ease) infinite}
.proceso-caja{position:relative;margin-top:34px;height:230px;border-radius:var(--r);background:var(--panel);border:1px solid var(--linea);box-shadow:var(--sombra);overflow:hidden}
.pc-lienzo{position:absolute;inset:0;width:100%;height:100%}
.pc-nodo{position:absolute;top:calc(42% - 40px);font-size:10px;color:var(--texto2)}
.pc-ini{left:4%}.pc-fin{right:4%;text-align:right}
.proceso-caja.completo .pc-fin{color:var(--ink);font-weight:500}
.tapon{--dy:0px;position:absolute;width:64px;height:84px;margin:-26px 0 0 -32px;display:flex;flex-direction:column;align-items:center;gap:8px;touch-action:none;cursor:grab;z-index:2;transform:translateY(var(--dy));transition:transform .35s var(--ease)}
.tapon.arrastra{transition:none;cursor:grabbing}
.tapon-cuerpo{position:relative;width:34px;height:52px;border-radius:10px;background:linear-gradient(160deg,#3a3a3a,#0A0A0A);box-shadow:0 10px 18px -8px rgba(10,10,10,.6),inset 0 1px 0 rgba(255,255,255,.18);transition:transform .5s var(--ease),opacity .4s}
.tapon-cuerpo::before,.tapon-cuerpo::after{content:"";position:absolute;left:50%;width:14px;height:2px;margin-left:-7px;border-radius:2px;background:rgba(255,255,255,.55)}
.tapon-cuerpo::before{top:19px}.tapon-cuerpo::after{top:29px}
.tapon:hover .tapon-cuerpo{transform:translateY(-4px)}
.tapon-txt,.tapon-ok{font-size:9.5px;letter-spacing:.08em;white-space:nowrap;line-height:1.2}
.tapon-txt{color:var(--ink)}
.tapon-ok{display:none;color:var(--ink)}
.tapon.fuera{cursor:default;pointer-events:none}
.tapon.fuera .tapon-cuerpo{transform:translateY(-90px) rotate(-14deg);opacity:0}
.tapon.fuera .tapon-txt{display:none}
.tapon.fuera .tapon-ok{display:block;margin-top:60px}
.tapon.fuera .tapon-ok::before{content:"✓ "}
.pc-estado{position:absolute;left:4%;right:4%;bottom:12px;font-size:10.5px;color:var(--texto2)}
.proceso-caja.completo .pc-estado{color:var(--ink)}
.historia p{color:var(--grafito);max-width:54ch;margin-bottom:18px}
.firma-fila{display:flex;align-items:center;gap:18px;margin-top:40px}
.firma-fila .firma{margin-top:0}
.yo{flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--panel);box-shadow:0 0 0 1px var(--linea),0 10px 24px -12px rgba(10,10,10,.4)}
@media(max-width:860px){.yo{width:54px;height:54px}.firma-fila{gap:12px}}
@media(max-width:520px){.proceso-caja{height:250px}.pc-nodo{top:calc(42% - 66px)}.tapon-txt,.tapon-ok{font-size:8.5px;letter-spacing:.04em;white-space:normal;text-align:center;width:76px}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{font:500 13px var(--body);padding:8px 14px;border:1px solid var(--linea);border-radius:99px;background:var(--panel)}

/* 03 Catálogo editable */
.catalogo-grid{display:grid;gap:40px;align-items:center}
@media(min-width:960px){.catalogo-grid{grid-template-columns:.9fr 1.1fr}}
.catalogo p{color:var(--grafito);margin-top:16px;max-width:46ch}
.catalogo .nota{font-size:11px}
.demo{display:grid;grid-template-columns:1fr 34px 1fr;align-items:center;gap:6px;padding:clamp(14px,2.4vw,28px);border-radius:28px;background:var(--panel);border:1px solid var(--linea);box-shadow:var(--sombra)}
.demo-panel,.demo-pagina{background:var(--blanco);border:1px solid var(--linea2);border-radius:18px;padding:16px;min-width:0}
.demo-tit{margin-bottom:12px;color:var(--ink)}
.campo{display:block;margin-bottom:12px}
.campo .mono{display:block;font-size:10px;margin-bottom:6px}
.campo input{width:100%;min-height:44px;border:1px solid var(--linea);border-radius:12px;padding:0 12px;font:500 15px var(--body);background:var(--canvas);color:var(--ink)}
.rodillo{position:relative;height:132px;border-radius:14px;background:linear-gradient(var(--canvas),#fff 30%,#fff 70%,var(--canvas));border:1px solid var(--linea);overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.rodillo.arrastra{cursor:grabbing}
.rodillo-cinta{position:absolute;left:0;right:0;top:50%;will-change:transform}
.rodillo-cinta span{display:flex;align-items:center;justify-content:center;height:36px;font:600 17px var(--display);letter-spacing:-.01em;color:var(--gris);transition:color .2s}
.rodillo-cinta span.sel{color:var(--ink);font-size:20px}
.rodillo-marca{position:absolute;left:8px;right:8px;top:50%;height:38px;transform:translateY(-50%);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);pointer-events:none}
.rodillo::before,.rodillo::after{content:"";position:absolute;left:0;right:0;height:40px;z-index:1;pointer-events:none}
.rodillo::before{top:0;background:linear-gradient(#fff,rgba(255,255,255,0))}
.rodillo::after{bottom:0;background:linear-gradient(rgba(255,255,255,0),#fff)}
.demo-flecha{height:2px;background:var(--ink);position:relative;opacity:.8}
.demo-flecha::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid var(--ink);border-right:0}
.demo-barra{display:flex;gap:4px;margin-bottom:10px}
.demo-barra i{width:7px;height:7px;border-radius:50%;background:var(--linea)}
.demo-foto{aspect-ratio:4/3;border-radius:12px;background:var(--linea2);margin-bottom:12px;position:relative;overflow:hidden}
.demo-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s,transform .7s var(--ease)}
.demo-foto .df-b{opacity:0;transform:scale(1.06)}
.demo-foto.cambia .df-b{opacity:1;transform:none}
.fotos{display:flex;gap:6px}
.fotos button{flex:1;min-height:44px;padding:0;border-radius:10px;overflow:hidden;border:2px solid transparent;opacity:.6;transition:opacity .3s,border-color .3s,transform .3s var(--ease)}
.fotos button img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.fotos button[aria-checked="true"]{border-color:var(--ink);opacity:1}
.fotos button:hover{transform:translateY(-2px);opacity:1}
.demo-nombre{font:600 15px var(--display);color:var(--ink);margin:0!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-precio{display:flex;align-items:center;font:800 26px/1 var(--display);letter-spacing:-.02em;color:var(--ink);margin:6px 0 12px!important}
.odometro{display:inline-flex;height:1em;overflow:hidden}
.odometro .dig{display:inline-block;height:1em;overflow:hidden}
.odometro .col{display:flex;flex-direction:column;transition:transform .6s var(--ease)}
.odometro .col b,.odometro .pt{display:block;height:1em;line-height:1em;font-weight:800}
.demo-boton{display:inline-flex;min-height:36px;align-items:center;padding:0 14px;border-radius:99px;background:var(--ink);color:#fff;font:600 12.5px var(--display)}

/* 04 Proceso */
.proceso-linea{width:100%;height:16px;margin:48px 0 8px;overflow:visible}
.proceso-linea path{fill:none;stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.pasos{display:grid;gap:36px}
@media(min-width:860px){.pasos{grid-template-columns:repeat(3,1fr);gap:40px}}
.paso-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;max-width:36ch}
.paso-n{display:block;font:300 56px/1 var(--display);letter-spacing:-.04em;color:#CFCBC4;transition:color .6s}
.pasos li.hecho .paso-n{color:var(--ink)}
.paso-check{width:48px;height:48px;display:grid;place-items:center;border-radius:50%}
.paso-check svg{width:40px;height:40px;overflow:visible}
.paso-check circle{fill:none;stroke:var(--linea);stroke-width:1.5;transition:fill .5s,stroke .5s}
.paso-check path{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset .55s .15s var(--ease)}
.pasos li.hecho .paso-check circle{fill:var(--ink);stroke:var(--ink)}
.pasos li.hecho .paso-check path{stroke-dashoffset:0}
.pasos li.hecho .paso-check svg{animation:marca .6s var(--ease)}
@keyframes marca{40%{transform:scale(1.18)}100%{transform:none}}
.paso-check:hover circle{stroke:var(--ink)}
.pasos h3{margin-bottom:8px}
.pasos p{color:var(--grafito);max-width:36ch}
.pasos .mono{margin-top:14px;font-size:11px}
.pasos li:nth-child(2){transition-delay:.12s}.pasos li:nth-child(3){transition-delay:.24s}

/* 05 Precios */
.precios-grid{display:grid;gap:48px}
@media(min-width:1000px){.precios-grid{grid-template-columns:1fr 1fr;gap:72px;align-items:start}}
.precios-izq h3{margin:32px 0 12px;font-size:13px;font-family:var(--mono);font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--texto2)}
.incluye{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.incluye li{display:flex;align-items:center;gap:9px;min-height:44px;padding:8px 12px;border:1px solid var(--linea);border-radius:12px;background:var(--panel);font:500 14px/1.25 var(--body);color:var(--ink)}
.incluye li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M4.5 8.3 7 10.6 11.5 5.6%27 fill=%27none%27 stroke=%27white%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center/16px no-repeat}
.precios .nota{margin-top:14px;max-width:52ch;font-size:13.5px}
/* ventana que se estira */
.ventana-bloque{margin-top:44px}
@media(min-width:1000px){.precios-izq{align-self:stretch}.ventana-bloque{position:sticky;top:110px;padding:22px 26px 6px;border:1px solid var(--linea);border-radius:var(--r);background:var(--panel);box-shadow:var(--sombra)}}
.ventana-bloque>.mono{margin-bottom:14px}
.ventana-riel{position:relative;padding-bottom:30px}
.ventana{position:relative;width:46%;min-width:150px;height:250px;border-radius:14px;background:var(--blanco);border:1.5px solid var(--ink);box-shadow:var(--sombra);overflow:visible}
.ventana-barra{display:flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-bottom:1px solid var(--linea)}
.ventana-barra i{width:7px;height:7px;border-radius:50%;background:var(--linea)}
.ventana-url{margin-left:8px;font:400 10px var(--mono);color:var(--gris);white-space:nowrap;overflow:hidden}
.ventana-cuerpo{position:absolute;inset:28px 0 0;overflow:hidden;border-radius:0 0 12px 12px}
.vc{position:absolute;inset:0;padding:12px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s var(--ease)}
.ventana[data-nivel="1"] .vc-1,.ventana[data-nivel="2"] .vc-2,.ventana[data-nivel="3"] .vc-3{opacity:1;transform:none}
.vc{padding:10px;overflow:hidden}
.mc-portada{position:relative;height:74px;border-radius:8px;background:center/cover;display:flex;align-items:flex-end;justify-content:space-between;padding:8px;margin-bottom:8px;overflow:hidden}
.mc-portada::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.55),rgba(10,10,10,0) 70%)}
.mc-portada b{position:relative;font:800 15px var(--display);color:#fff;letter-spacing:-.02em}
.mc-wa,.mc-pago{position:relative;font:600 8.5px var(--body);background:var(--ink);color:#fff;border-radius:99px;padding:4px 9px;white-space:nowrap}
.mc-wa{background:#fff;color:var(--ink)}
.mc-pago{position:absolute;right:10px;bottom:8px}
.mc-grilla{display:grid;gap:6px}
.mc-4{grid-template-columns:repeat(4,1fr)}
.mc-6{grid-template-columns:repeat(6,1fr)}
.mc-prod{margin:0;min-width:0}
.mc-prod img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:6px;display:block;background:var(--linea2)}
.mc-prod figcaption{display:flex;flex-direction:column;gap:1px;margin-top:3px;font:500 8px/1.2 var(--body);color:var(--grafito);white-space:nowrap;overflow:hidden}
.mc-prod b{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.mc-prod i{font-style:normal;color:var(--texto2)}
.mc-prod u{text-decoration:none;align-self:flex-start;margin-top:3px;font:600 7.5px var(--body);border:1px solid var(--ink);border-radius:99px;padding:2px 7px}
.vc-3 .mc-prod:nth-child(2) u{background:var(--ink);color:#fff;animation:agrega 2.4s var(--ease) infinite}
@keyframes agrega{0%,70%,100%{transform:none}78%{transform:scale(.88)}}
.mc-menu{display:flex;align-items:center;gap:8px;margin-bottom:8px;font:500 8.5px var(--body);color:var(--texto2);white-space:nowrap;overflow:hidden}
.mc-menu b{font:800 12px var(--display);color:var(--ink);margin-right:auto;letter-spacing:-.02em}
.mc-menu span.on{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.mc-carro{position:relative;width:18px;height:15px;border:1.5px solid var(--ink);border-radius:2px 2px 5px 5px;flex:none;margin-right:6px}
.mc-cuenta{position:absolute;right:-8px;top:-8px;width:13px;height:13px;border-radius:50%;background:var(--ink);color:#fff;font:600 8px/13px var(--body);text-align:center;font-style:normal;animation:cuenta 2.4s var(--ease) infinite}
@keyframes cuenta{0%,72%,100%{transform:none}82%{transform:scale(1.35)}}
.vc .mc-prod{opacity:0;transform:translateY(6px);transition:opacity .45s,transform .5s var(--ease)}
.ventana[data-nivel="1"] .vc-1 .mc-prod,.ventana[data-nivel="2"] .vc-2 .mc-prod,.ventana[data-nivel="3"] .vc-3 .mc-prod{opacity:1;transform:none}
.mc-prod:nth-child(2){transition-delay:.05s}.mc-prod:nth-child(3){transition-delay:.1s}.mc-prod:nth-child(4){transition-delay:.15s}.mc-prod:nth-child(5){transition-delay:.2s}.mc-prod:nth-child(6){transition-delay:.25s}.mc-prod:nth-child(n+7){transition-delay:.3s}
.vc-1 .mc-grilla{row-gap:5px}.vc-2 .mc-prod figcaption{font-size:7.5px}
@media(max-width:860px){.ventana{height:230px}.mc-6{grid-template-columns:repeat(3,1fr)}.mc-6 .mc-prod:nth-child(n+7){display:none}.mc-menu span:not(.on):not(.mc-carro){display:none}}
.ventana-tirador{position:absolute;right:-24px;top:50%;width:48px;height:64px;transform:translateY(-50%);display:grid;place-items:center;touch-action:none;cursor:ew-resize;z-index:2}
.ventana-tirador span{width:12px;height:44px;border-radius:99px;background:var(--ink);box-shadow:0 0 0 4px var(--canvas);transition:transform .3s var(--ease)}
.ventana-tirador:hover span,.ventana.arrastra .ventana-tirador span{transform:scaleY(1.12)}
.ventana-riel{overflow-x:clip;overflow-y:visible}
.ventana-pista{position:absolute;left:calc(100% + 34px);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px;pointer-events:none;transition:opacity .4s;white-space:nowrap}
.ventana-pista svg{width:38px;height:16px;overflow:visible;animation:pista 1.4s var(--ease) infinite}
.ventana-pista path{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ventana-pista b{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
@keyframes pista{0%{transform:translateX(-4px);opacity:.35}50%{transform:translateX(8px);opacity:1}100%{transform:translateX(-4px);opacity:.35}}
.ventana:not(.usada) .ventana-tirador span{animation:empujon 2.8s 1s var(--ease) infinite}
@keyframes empujon{0%,70%,100%{transform:none}78%{transform:translateX(6px) scaleY(1.1)}86%{transform:none}92%{transform:translateX(3px)}}
.ventana.usada .ventana-pista,.ventana:not([data-nivel="1"]) .ventana-pista{opacity:0}
.ventana-topes{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;font-size:10px}
.ventana-topes li{transition:color .3s}
.ventana-topes li.on{color:var(--ink)}
/* tarjetas pegadas */
.tarjetas{display:grid;gap:16px}
@media(min-width:1000px){.tarjeta{position:sticky;top:96px}.tarjeta:nth-child(2){top:116px}.tarjeta:nth-child(3){top:136px}}
.tarjeta{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);padding:28px;box-shadow:var(--sombra);transition:border-color .4s,transform .5s var(--ease),box-shadow .4s}
.tarjeta.elegida{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink),var(--sombra)}
.tarjeta h3{font-size:24px;margin:6px 0 10px}
.precio{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:16px}
.precio>span{font:800 clamp(36px,4vw,48px)/1 var(--display);letter-spacing:-.035em}
.precio small{font-size:14px;color:var(--texto2)}
.tarjeta ul{margin-bottom:22px}
.tarjeta li{position:relative;padding:7px 0 7px 22px;font-size:15.5px;color:var(--grafito)}
.tarjeta li::before{content:"";position:absolute;left:0;top:17px;width:10px;height:1.5px;background:var(--ink)}
.glosa{font:inherit;color:inherit;text-decoration:underline dotted;text-underline-offset:4px;cursor:help;padding:0}
.glosa-pop{position:fixed;z-index:80;max-width:280px;padding:12px 14px;border-radius:14px;background:var(--ink);color:#fff;font-size:14px;line-height:1.45;box-shadow:var(--sombra)}

/* 06 Preguntas */
.faq{margin-top:40px;border-top:1px solid var(--linea)}
.faq-item{border-bottom:1px solid var(--linea)}
.faq-item>button{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;min-height:68px;padding:14px 0;text-align:left;font:600 clamp(17px,1.8vw,21px)/1.3 var(--display);letter-spacing:-.01em}
.faq-item>button::after{content:"+";font:300 28px/1 var(--display);transition:transform .4s var(--ease)}
.faq-item>button[aria-expanded="true"]::after{transform:rotate(45deg)}
.faq-resp{padding:0 0 22px}
.faq-resp p,.escribiendo{display:inline-block;max-width:60ch;background:var(--blanco);border:1px solid var(--linea);border-radius:18px 18px 18px 4px;padding:13px 17px;color:var(--grafito);box-shadow:0 10px 24px -18px rgba(0,0,0,.4)}
.faq-resp p{opacity:0;transform:translateY(8px) scale(.98);transform-origin:0 100%;transition:opacity .4s,transform .45s var(--ease)}
.faq-resp.lista p{opacity:1;transform:none}
.faq-resp.lista .escribiendo{display:none}
.escribiendo{padding:15px 17px}
.escribiendo i{display:inline-block;width:7px;height:7px;margin:0 2px;border-radius:50%;background:var(--gris);animation:punto 1s infinite}
.escribiendo i:nth-child(2){animation-delay:.15s}.escribiendo i:nth-child(3){animation-delay:.3s}
@keyframes punto{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}

/* 07 Empieza */
.empieza{text-align:left;padding-bottom:clamp(64px,8vw,112px)}
.empieza h2{font-size:clamp(44px,8vw,110px);max-width:none}
.empieza>p{color:var(--grafito);margin-top:18px;max-width:50ch;font-size:clamp(17px,1.5vw,20px)}
.empieza-botones{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:34px}

.firma{margin-top:44px;width:min(400px,70vw)}
.firma svg{width:100%;height:auto;overflow:visible}
.firma text{font-family:"Nothing You Could Do",cursive;font-size:72px;letter-spacing:.5px;fill:transparent;stroke:var(--ink);stroke-width:1.2;stroke-dasharray:1600;stroke-dashoffset:1600}
.firma-remate{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600}
.firma.escribe .firma-remate{animation:remate 1s 2.6s cubic-bezier(.6,0,.2,1) forwards}
@keyframes remate{to{stroke-dashoffset:0}}
.firma.escribe text{animation:firma 3.4s cubic-bezier(.45,.1,.3,1) forwards}
@keyframes firma{70%{stroke-dashoffset:0;fill:transparent}100%{stroke-dashoffset:0;fill:var(--ink)}}

/* Pie */
.pie{border-top:1px solid var(--linea);padding:56px var(--pad) 32px;max-width:1360px;margin:0 auto}
.pie-grid{display:grid;gap:28px;align-items:start}
@media(min-width:860px){.pie-grid{grid-template-columns:1fr auto auto;gap:56px}}
.pie-logo{width:200px;height:auto}
.pie-links{display:grid;grid-template-columns:repeat(2,auto);gap:6px 28px}
.pie-links a{text-decoration:none;color:var(--grafito);font-size:15px}
.pie-links a:hover{color:var(--ink);text-decoration:underline}
.pie-legal{margin-top:44px;font-size:10.5px;line-height:1.8}

/* Celular: versión propia */
@media(max-width:860px){
  .nav{gap:2px;padding:5px 5px 5px 12px;top:12px;width:calc(100vw - 24px);justify-content:space-between}
  .nav-links{display:none}
  .nav-indice{display:inline-flex;margin-left:auto}
  .indice{right:auto;left:50%;top:70px;transform:translateX(-50%);width:calc(100vw - 24px);background:rgba(252,251,249,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--linea);border-radius:20px;padding:10px;box-shadow:var(--sombra)}
  .indice:not(.abierto){opacity:0!important;pointer-events:none!important}
  .indice.abierto{opacity:1;pointer-events:auto}
  .indice a{justify-content:flex-start;color:var(--texto2);min-height:44px;padding:0 10px;font-size:12px}
  .indice a span{opacity:1}
  .indice a em{position:static;opacity:1;transform:none;background:none;color:inherit;padding:0;margin:0}
  .indice a.activo em{color:var(--ink)}
  .indice a::after{display:none}
  .hero{align-items:flex-end}
  .hero-texto{padding-bottom:40px}
  .hero::after{height:62%}
  .hero-desliza{display:none}
  .h1-frase{font-size:clamp(46px,13.6vw,74px)}
  .hero-botones .btn{flex:1 1 auto}
  .sec-der{display:none}
  .demo{grid-template-columns:1fr;gap:10px}
  .demo-flecha{width:2px;height:24px;margin:0 auto}
  .demo-flecha::after{right:-4px;top:auto;bottom:-1px;border:5px solid transparent;border-top:7px solid var(--ink);border-bottom:0}
  .ventana{width:52%}
  .tarjetas{grid-auto-flow:column;grid-auto-columns:86%;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--pad)*-1);padding:6px var(--pad) 18px;scrollbar-width:none;overscroll-behavior-x:contain}
  .tarjetas::-webkit-scrollbar{display:none}
  .tarjeta{scroll-snap-align:center}
  .empieza-botones .btn{width:100%}
  .demo{display:flex;flex-direction:column;align-items:stretch}
  .demo-panel{order:1}
  .demo-pagina{order:-1;display:grid;grid-template-columns:42% 1fr;column-gap:12px;align-items:center}
  .demo-pagina .demo-barra{grid-column:1/-1}
  .demo-pagina .demo-foto{grid-row:2/5;margin:0;aspect-ratio:1}
  .demo-pagina .demo-boton{justify-self:start}
  .demo-flecha{order:0;transform:rotate(180deg)}
  .pasos{gap:26px}
  .paso-n{font-size:44px}
  .paso-cab{margin-bottom:10px}
  .proceso-linea{margin:28px 0 4px}
}