/* ---- Fuentes autoalojadas (subset latin) ---- */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/assets/fonts/bricolage-var.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/hanken-var.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/dmmono-400.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/dmmono-500.woff2') format('woff2'); }
:root{
  --brand:#0EA08C; --brand-deep:#0A6F62; --brand-bright:#18C9AF; --brand-glow:#5BE7CE;
  --amber:#F2B33D; --amber-deep:#9a7411; --coral:#FF6A5A; --coral-deep:#c0392b;
  /* --ink-faint / --night-faint calibrados a contraste AA (>=4.5:1) sobre --card/--bg y --night */
  --ink:#0C1A18; --ink-soft:#44544F; --ink-faint:#64736E;
  --bg:#F5F8F4; --bg-2:#EEF3EC; --card:#FFFFFF; --line:#E2E9E1;
  --night:#07110F; --night-2:#0C1A17; --night-3:#122220; --night-line:#1E322E; --night-text:#BBC9C3; --night-faint:#718780;
  --f-display:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;
  --f-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --f-mono:'DM Mono',ui-monospace,'Cascadia Mono',monospace;
  --r-md:16px; --r-lg:26px; --r-xl:34px; --r-pill:999px;
  --sh-sm:0 2px 12px -4px rgba(12,26,24,.12);
  --sh-md:0 20px 50px -20px rgba(12,26,24,.28);
  --sh-lg:0 40px 90px -34px rgba(12,26,24,.40);
  --gut:clamp(22px,5vw,64px);
  --maxw:1200px;
}
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{-webkit-text-size-adjust:100%;}
body{font-family:var(--f-body); background:var(--bg); color:var(--ink); line-height:1.6; font-size:16.5px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit;}
::selection{background:var(--brand); color:#fff;}
:focus-visible{outline:2px solid var(--brand-glow); outline-offset:3px; border-radius:4px;}
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);}

.stamp{position:fixed; bottom:14px; right:14px; z-index:90; font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:rgba(7,17,15,.6); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-pill); padding:7px 13px;}

.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--f-body); font-weight:700; font-size:16px; letter-spacing:-0.01em; padding:15px 26px; border-radius:var(--r-pill); border:1.6px solid transparent; transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,background .2s,color .2s,border-color .2s; white-space:nowrap; overflow:hidden;}
.btn svg{width:17px; height:17px; transition:transform .22s;}
.btn:hover svg{transform:translateX(3px);}
/* micro-hover de marca: el punto de Lucas barre el botón al pasar el cursor */
.btn::before{content:""; position:absolute; top:50%; left:-6%; width:10px; height:10px; margin-top:-5px; border-radius:50%;
  background:currentColor; opacity:0; transform:scale(.4); pointer-events:none;
  transition:transform .5s cubic-bezier(.2,.7,.3,1), opacity .5s;}
.btn:hover::before{opacity:.12; transform:translateX(1100%) scale(9);}
@media(prefers-reduced-motion:reduce){ .btn::before{display:none;} }
.btn--white{background:#fff; color:var(--brand-deep);}
.btn--white:hover{transform:translateY(-2px); box-shadow:0 16px 34px -16px rgba(0,0,0,.4);}
.btn--brand{background:var(--brand); color:#fff; box-shadow:0 18px 40px -16px rgba(14,160,140,.5);}
.btn--brand:hover{background:var(--brand-deep); transform:translateY(-2px);}
.btn--ring{background:transparent; color:#fff; border-color:rgba(255,255,255,.35);}
.btn--ring:hover{border-color:#fff; transform:translateY(-2px);}
.btn--ring-ink{background:transparent; color:var(--ink); border-color:var(--line);}
.btn--ring-ink:hover{border-color:var(--brand); color:var(--brand-deep); transform:translateY(-2px);}

.pilltag{display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; border:1px solid currentColor; border-radius:var(--r-pill); padding:7px 16px;}

.topnav{position:absolute; top:0; left:0; right:0; z-index:40; display:flex; align-items:center; justify-content:space-between; padding:26px var(--gut);}
.brandmark{font-family:var(--f-display); font-weight:800; font-size:26px; letter-spacing:-0.04em; color:#fff; display:inline-flex; align-items:center; gap:9px;}
.brandmark .dot{width:9px; height:9px; border-radius:50%; background:var(--brand-glow); box-shadow:0 0 0 4px rgba(91,231,206,.25);}
.topnav__r{display:flex; align-items:center; gap:12px;}
.topnav__link{color:#fff; font-weight:600; font-size:14.5px; padding:9px 6px;}
.topnav__link:hover{color:var(--brand-glow);}
@media(max-width:560px){ .topnav__link{display:none;} }

.floatnav{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:80; display:flex; align-items:center; gap:4px; background:rgba(7,17,15,.72); backdrop-filter:saturate(150%) blur(16px); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-pill); padding:6px; box-shadow:var(--sh-md);}
/* Solo los enlaces PROPIOS del floatnav (hijos directos). Con `.floatnav a` a secas
   esto alcanzaba también a los .sol-dd__item/.sol-dd__all del dropdown y les pisaba
   display y color. 44px de alto mínimo = objetivo táctil accesible (WCAG 2.5.8). */
.floatnav > a{font-family:var(--f-body); font-weight:600; font-size:13.5px; color:#fff; min-height:44px; display:inline-flex; align-items:center; padding:0 16px; border-radius:var(--r-pill); transition:background .2s,color .2s;}
.floatnav > a:hover{background:rgba(255,255,255,.14); color:var(--brand-glow);}
.floatnav > a.home{width:44px; height:44px; display:grid; place-items:center; background:var(--brand); padding:0;}
.floatnav > a.home svg{width:17px; height:17px; stroke:#fff; fill:none; stroke-width:2;}
/* el botón del dropdown también debe cumplir los 44px */
.floatnav .sol-dd__btn{min-height:44px;}
@media(max-width:600px){ .floatnav a.txt{display:none;} }

/* ============ HERO ============ */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden;
  background:radial-gradient(120% 90% at 80% 10%, #12b39c 0%, var(--brand) 34%, var(--brand-deep) 100%); color:#fff;}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 50% at 15% 100%, rgba(91,231,206,.28), transparent 60%); mix-blend-mode:screen;}
.hero__gridbg{position:absolute; inset:0; opacity:.5; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(90% 80% at 80% 0%,#000 8%,transparent 72%); mask-image:radial-gradient(90% 80% at 80% 0%,#000 8%,transparent 72%);}
.hero__inner{position:relative; z-index:2; padding:0 var(--gut) clamp(60px,10vh,120px); width:100%; max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:1.3fr .7fr; gap:30px; align-items:end;}
.hero__title{font-family:var(--f-display); font-weight:800; font-size:clamp(58px,12vw,168px); line-height:.86; letter-spacing:-0.045em; text-wrap:balance; will-change:transform;}
.hero__r{padding-bottom:14px;}
.hero__sub{font-size:clamp(16px,1.5vw,20px); color:#fff; max-width:34ch; margin-bottom:22px;}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px;}
/* Scrim: el teal de marca no sostiene texto blanco a AA (mide ~3.5:1). Este velo
   ancla el texto arriba/abajo y de paso da profundidad cinematica a las hojas. */
.hero__scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(3,20,17,.66) 0%, rgba(3,20,17,.34) 30%, rgba(3,20,17,0) 66%),
             linear-gradient(to bottom, rgba(3,20,17,.58) 0%, rgba(3,20,17,.32) 9%, rgba(3,20,17,0) 24%);}
.hero__scroll{position:absolute; left:var(--gut); bottom:26px; z-index:2; display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:rgba(4,22,19,.5); border:1px solid rgba(255,255,255,.22); border-radius:var(--r-pill); padding:8px 14px;}
.hero__scroll i{width:6px; height:6px; border-radius:50%; background:#fff; animation:blink 1.6s ease-in-out infinite;}
@keyframes blink{50%{opacity:.3;}}
@media(max-width:820px){ .hero__inner{grid-template-columns:1fr; gap:22px;} .hero__r{padding-bottom:0;} }
@media(max-width:560px){ .hero__scroll{display:none;} }

/* ============ CONSTELACIÓN ============ */
.constel{position:relative;}
.constel:not(.pinned){padding:clamp(90px,13vw,170px) 0;}
.constel.pinned{height:180vh;}
.constel__pin{position:relative; display:grid; place-items:center; padding-inline:var(--gut);}
.constel.pinned .constel__pin{position:sticky; top:0; height:100vh; overflow:hidden;}
.constel__stage{position:relative; width:100%; max-width:var(--maxw); margin-inline:auto; min-height:min(84vw,86vh,780px); display:grid; place-items:center;}
.constel__center{position:relative; z-index:2; text-align:center; max-width:760px; margin-inline:auto; will-change:transform,opacity;}
.constel__title{text-align:center; font-family:var(--f-display); font-weight:800; font-size:clamp(40px,8.5vw,120px); line-height:.92; letter-spacing:-0.04em; color:var(--brand); text-wrap:balance; margin-inline:auto; max-width:14ch; will-change:transform;}
.constel__title em{font-style:normal; color:var(--ink);}
/* ---- fcard: mini-widget de portal (header · cuerpo · pie de pills) ---- */
.fcard{position:absolute; z-index:1; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:0 30px 70px -28px rgba(7,26,22,.38), inset 0 1px 0 rgba(255,255,255,.65);
  width:max-content; max-width:262px; will-change:transform,opacity;}
.fcard__hd{display:flex; align-items:center; gap:8px; padding:11px 14px 9px;}
.fcard__ic{width:26px; height:26px; border-radius:8px; display:grid; place-items:center; flex:none;}
.fcard__ic svg{width:14px; height:14px; fill:none; stroke-width:2;}
.fcard__eyebrow{font-family:var(--f-mono); font-size:9.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap;}
.fcard__live{margin-left:auto; padding-left:10px; display:inline-flex; align-items:center; gap:5px; font-family:var(--f-mono); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-deep); white-space:nowrap;}
.fcard__live i{width:5px; height:5px; border-radius:50%; background:var(--brand); animation:fpulse 2.2s ease-out infinite;}
@keyframes fpulse{0%{box-shadow:0 0 0 0 rgba(14,160,140,.45);}70%{box-shadow:0 0 0 6px rgba(14,160,140,0);}100%{box-shadow:0 0 0 0 rgba(14,160,140,0);}}
.fcard__div{height:0; border-top:1.5px dashed var(--line); margin:0 14px;}
.fcard__body{padding:9px 14px 11px;}
.fcard__big{font-family:var(--f-mono); font-weight:500; font-size:21px; line-height:1.1; letter-spacing:-0.02em; color:var(--ink); font-variant-numeric:tabular-nums;}
.fcard__lbl{font-family:var(--f-mono); font-size:9px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); margin-top:3px;}
.fcard__line{font-family:var(--f-mono); font-size:12.5px; color:var(--ink); line-height:1.45;}
.fcard__line b{font-weight:500;}
.fcard__sub{font-family:var(--f-mono); font-size:10px; color:var(--ink-faint); margin-top:2px;}
.fcard__meter{height:6px; border-radius:3px; background:var(--bg-2); overflow:hidden; margin-top:9px; min-width:170px;}
.fcard__meter i{display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,var(--brand),var(--brand-bright));}
.fcard__duo{display:flex; margin-top:1px;}
.fcard__duo>div{flex:1; padding-right:13px;}
.fcard__duo>div+div{border-left:1px dotted var(--line); padding-left:13px; padding-right:0;}
.fcard__ft{display:flex; gap:6px; flex-wrap:wrap; padding:0 14px 12px;}
.fpill{font-family:var(--f-mono); font-size:8.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:3.5px 9px; border-radius:var(--r-pill); white-space:nowrap;}
.fpill--ok{background:color-mix(in oklab,var(--brand) 15%,white); color:var(--brand-deep);}
.fpill--bad{background:color-mix(in oklab,var(--coral) 16%,white); color:var(--coral-deep);}
.fpill--watch{background:color-mix(in oklab,var(--amber) 22%,white); color:var(--amber-deep);}
.fpill--ink{background:var(--bg-2); color:var(--ink-soft);}
/* variantes semánticas (chip del header) */
.fcard--ok .fcard__ic{background:color-mix(in oklab,var(--brand) 16%,white);} .fcard--ok .fcard__ic svg{stroke:var(--brand-deep);}
.fcard--amber .fcard__ic{background:color-mix(in oklab,var(--amber) 22%,white);} .fcard--amber .fcard__ic svg{stroke:var(--amber-deep);}
.fcard--coral .fcard__ic{background:color-mix(in oklab,var(--coral) 16%,white);} .fcard--coral .fcard__ic svg{stroke:var(--coral-deep);}
/* variante oscura (bóveda / carteras) */
.fcard--dark{background:var(--night-2); border-color:var(--night-line); box-shadow:0 30px 70px -26px rgba(4,20,17,.6);}
.fcard--dark .fcard__eyebrow{color:var(--night-faint);}
.fcard--dark .fcard__live{color:var(--brand-glow);} .fcard--dark .fcard__live i{background:var(--brand-glow);}
.fcard--dark .fcard__div{border-top-color:var(--night-line);}
.fcard--dark .fcard__big, .fcard--dark .fcard__line{color:#fff;}
.fcard--dark .fcard__lbl, .fcard--dark .fcard__sub{color:var(--night-faint);}
.fcard--dark .fcard__ic{background:rgba(91,231,206,.15);} .fcard--dark .fcard__ic svg{stroke:var(--brand-glow);}
.fcard--dark .fcard__meter{background:rgba(255,255,255,.08);}
.fcard--dark .fcard__duo>div+div{border-left-color:var(--night-line);}
.fcard--dark .fpill--ok{background:rgba(91,231,206,.16); color:var(--brand-glow);}
.fcard--dark .fpill--ink{background:rgba(255,255,255,.07); color:var(--night-text);}
/* posiciones: rieles con ritmo (4 izq · 4 der · 2 centro), sin encimar en reposo */
.fcard--p1{top:0;    left:1%;}  .fcard--p2{top:2%;   right:1%;}
.fcard--p3{top:26%;  left:0;}   .fcard--p4{top:27%;  right:0;}
.fcard--p5{top:52%;  left:2%;}  .fcard--p6{top:53%;  right:2%;}
.fcard--p9{top:78%;  left:5%;}  .fcard--p10{top:77%; right:6%;}
.fcard--p7{top:0;    left:36%;} .fcard--p8{bottom:0; left:32%;}
.constel__lead{text-align:center; max-width:52ch; margin:22px auto 0; color:var(--ink-soft); font-size:clamp(15px,1.3vw,17.5px);}
@media(max-width:820px){
  .constel__stage{min-height:0; display:flex; flex-direction:column;}
  .constel__center{order:-1; margin-bottom:26px;}
  .constel__title{font-size:clamp(38px,10vw,60px);}
  .fcard{position:static; max-width:none; width:100%; margin:0; opacity:1 !important; transform:none !important;}
  .constel__cards{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
}
@media(min-width:821px){ .constel__cards{display:contents;} }
@media(max-width:480px){ .constel__cards{grid-template-columns:1fr;} }

/* ============ VERBOS ============ */
.verbs{padding:clamp(60px,9vw,120px) 0; background:var(--bg-2); border-block:1px solid var(--line);}
.verbs__head{max-width:640px;}
.verbs__eyebrow{color:var(--brand-deep);}
.verbs__h{font-family:var(--f-display); font-weight:800; font-size:clamp(28px,3.6vw,42px); letter-spacing:-0.03em; margin-top:14px; text-wrap:balance;}
.verbs__list{margin-top:clamp(34px,4vw,54px); display:grid; gap:clamp(10px,1.4vw,18px);}
.verb{display:flex; align-items:center; gap:clamp(14px,2vw,26px); padding:8px 0;}
.verb__tile{flex:none; width:clamp(52px,6vw,74px); height:clamp(52px,6vw,74px); border-radius:20px; display:grid; place-items:center; box-shadow:var(--sh-sm); transition:transform .3s cubic-bezier(.2,.7,.3,1);}
.verb:hover .verb__tile{transform:scale(1.08) rotate(-4deg);}
.verb__tile svg{width:46%; height:46%; stroke:#fff; fill:none; stroke-width:2.1;}
.verb__word{display:block; font-family:var(--f-display); font-weight:800; font-size:clamp(38px,7vw,88px); line-height:1; letter-spacing:-0.04em; will-change:transform,clip-path;}
.verb__sub{display:block; font-size:14.5px; color:var(--ink-soft); margin-top:8px; max-width:44ch;}
/* 29-sep-2026 · el video «¿Qué hace Lucas?» (90 s, con sonido) debajo de los cuatro verbos, que es lo que
   cuenta. Lo sirve coreworks.mx (el mismo archivo que usa su página de Lucas): no se duplica aquí. */
.verbs__video{margin:clamp(34px,4vw,54px) 0 0; display:grid; gap:12px; max-width:880px;}
.verbs__video video{display:block; width:100%; height:auto; aspect-ratio:16/9; border-radius:var(--r-md); background:var(--night); box-shadow:var(--sh-md);}
.verbs__video figcaption{font-family:var(--f-mono); font-size:12.5px; color:var(--ink-faint); letter-spacing:.02em;}
.verb__txt{min-width:0;}
.verb--teal .verb__tile{background:linear-gradient(150deg,var(--brand-bright),var(--brand));} .verb--teal .verb__word{color:var(--brand);}
.verb--deep .verb__tile{background:linear-gradient(150deg,var(--brand),var(--brand-deep));} .verb--deep .verb__word{color:var(--brand-deep);}
.verb--coral .verb__tile{background:linear-gradient(150deg,#ff8878,var(--coral));} .verb--coral .verb__word{color:var(--coral-deep);}
.verb--amber .verb__tile{background:linear-gradient(150deg,#f6c765,var(--amber));} .verb--amber .verb__word{color:var(--amber-deep);}

/* ============ FLUJO numerado + mockup ============ */
.flow{position:relative; background:var(--night); color:var(--night-text); padding-block:clamp(70px,10vw,130px);}
.flow.pinned{padding-block:0;}
.flow__pin{position:relative; display:flex; align-items:center; overflow:hidden;}
.flow.pinned .flow__pin{position:sticky; top:0; min-height:100vh; padding-block:clamp(80px,10vh,120px); overflow:hidden;}
.flow__pin::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(90% 80% at 90% 0%, rgba(14,160,140,.22), transparent 55%),radial-gradient(70% 90% at 0% 100%, rgba(91,231,206,.10), transparent 60%);}
.flow__grid{position:relative; z-index:1; width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); display:grid; grid-template-columns:1fr .95fr; gap:clamp(30px,5vw,70px); align-items:center;}
.flow__kicker{font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-glow);}
.flow__rule{height:1px; background:var(--night-line); margin:20px 0 26px; max-width:460px;}
.flow__title{font-family:var(--f-display); font-weight:800; font-size:clamp(30px,4vw,52px); line-height:1.02; letter-spacing:-0.03em; color:#fff; text-wrap:balance; min-height:1.9em; transition:opacity .3s ease, transform .35s cubic-bezier(.2,.7,.3,1);}
.flow__sub{font-size:clamp(15.5px,1.4vw,18px); color:var(--night-text); margin-top:16px; max-width:44ch; transition:opacity .3s ease;}
.flow__steps{display:flex; flex-wrap:wrap; gap:10px 8px; margin-top:34px;}
.flow__step{font-family:var(--f-mono); font-size:13px; color:var(--night-faint); border:1px solid var(--night-line); border-radius:var(--r-pill); padding:8px 15px; display:inline-flex; align-items:center; gap:9px; transition:color .25s,border-color .25s,background .25s;}
.flow__step .n{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:11px; border:1px solid currentColor;}
.flow__step:hover{color:var(--night-text); border-color:var(--night-faint);}
.flow__step.on{color:var(--night); background:var(--brand-glow); border-color:var(--brand-glow); font-weight:500;}
@media(max-width:520px){ .flow__step .lbl{display:none;} }
.flow__progwrap{height:2px; background:var(--night-line); border-radius:2px; margin-top:22px; max-width:460px; overflow:hidden;}
.flow__prog{display:block; height:100%; width:0; background:var(--brand-glow); transition:width .18s linear;}
.flow:not(.pinned) .flow__progwrap{display:none;}

.device{position:relative; z-index:1; background:linear-gradient(180deg,var(--night-3),var(--night-2)); border:1px solid var(--night-line); border-radius:var(--r-xl); box-shadow:var(--sh-lg); padding:14px; max-width:420px; margin-inline:auto; width:100%; will-change:transform;}
.device__screen{background:linear-gradient(180deg,#0f1f1c,#0b1613); border:1px solid var(--night-line); border-radius:22px; overflow:hidden; transition:opacity .3s ease, transform .35s cubic-bezier(.2,.7,.3,1);}
.dv__top{display:flex; align-items:center; gap:10px; padding:16px 16px 12px; background:radial-gradient(120% 120% at 0% 0%, rgba(14,160,140,.22), transparent 60%);}
.dv__av{width:34px; height:34px; border-radius:50%; background:linear-gradient(150deg,var(--brand-bright),var(--brand-deep)); flex:none;}
.dv__id b{display:block; font-family:var(--f-display); font-weight:700; font-size:14px; color:#fff;}
.dv__id span{font-family:var(--f-mono); font-size:9.5px; color:var(--night-faint);}
.dv__rfc{margin-left:auto; font-family:var(--f-mono); font-size:9px; color:var(--night-text); border:1px solid var(--night-line); border-radius:var(--r-pill); padding:4px 10px;}
.dv__hero{padding:6px 16px 14px;}
.dv__hero .lab{font-family:var(--f-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--night-faint);}
.dv__hero .big{font-family:var(--f-mono); font-weight:500; font-size:30px; color:#fff; letter-spacing:-0.02em; margin-top:4px; font-variant-numeric:tabular-nums;}
.dv__hero .big em{font-style:normal; color:var(--brand-glow); font-size:.6em;}
.dv__list{padding:6px 12px 14px;}
.dv__row{display:flex; align-items:center; gap:11px; padding:10px 8px; border-radius:12px;}
.dv__row+.dv__row{margin-top:2px;}
.dv__ic{width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center; background:rgba(255,255,255,.05);}
.dv__ic svg{width:15px; height:15px; fill:none; stroke-width:1.8;}
.dv__ri{flex:1; min-width:0;}
.dv__ri b{display:block; font-family:var(--f-mono); font-size:12px; color:#fff; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.dv__ri span{display:block; font-family:var(--f-mono); font-size:9.5px; color:var(--night-faint); margin-top:1px;}
.dv__amt{font-family:var(--f-mono); font-size:12px; text-align:right; white-space:nowrap;}
.dv__flag{font-family:var(--f-mono); font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; padding:4px 8px; border-radius:var(--r-pill); white-space:nowrap; flex:none;}
.t-ok{color:var(--brand-glow);} .t-amber{color:var(--amber);}
.f-ok{background:rgba(91,231,206,.16); color:var(--brand-glow);}
.f-amber{background:rgba(242,179,61,.18); color:var(--amber);}
.f-coral{background:rgba(255,106,90,.2); color:#ff9b8f;}
.dv__ic.ok{background:rgba(91,231,206,.14);} .dv__ic.ok svg{stroke:var(--brand-glow);}
.dv__ic.coral{background:rgba(255,106,90,.16);} .dv__ic.coral svg{stroke:#ff9b8f;}
.dv__ic.amber{background:rgba(242,179,61,.16);} .dv__ic.amber svg{stroke:var(--amber);}
.dv__bar{height:5px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; margin:2px 8px 12px;}
.dv__bar i{display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,var(--brand),var(--brand-glow)); animation:fill 2.6s ease-in-out infinite;}
@keyframes fill{0%{width:16%;}50%{width:86%;}100%{width:16%;}}
.dv__stamp{margin:0 12px 14px; border:1px dashed var(--night-line); border-radius:12px; padding:12px; text-align:center;}
.dv__stamp .dv__seal{position:relative; width:40px; height:40px; margin:0 auto 8px; border-radius:50%; background:rgba(91,231,206,.16); display:grid; place-items:center;}
.dv__stamp .dv__seal svg{width:20px; height:20px; stroke:var(--brand-glow); fill:none; stroke-width:2.6;}
.dv__stamp b{font-family:var(--f-mono); font-size:12px; color:#fff;}
.dv__stamp span{display:block; font-family:var(--f-mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--night-faint); margin-top:3px;}
@media(max-width:820px){ .flow__grid{grid-template-columns:1fr; gap:40px;} .flow__title{min-height:0;} .device{max-width:360px;} .flow.pinned{padding-block:clamp(70px,10vw,120px);} .flow.pinned .flow__pin{position:relative; top:auto; min-height:0; padding-block:0;} }

/* ============ SELLOS ============ */
.seals{padding:clamp(60px,8vw,100px) 0; text-align:center;}
.seals__eyebrow{color:var(--brand-deep);}
.seals__h{font-family:var(--f-display); font-weight:800; font-size:clamp(28px,3.6vw,44px); letter-spacing:-0.03em; margin-top:14px;}
.seals__lead{color:var(--ink-soft); max-width:52ch; margin:14px auto 0;}
.seals__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:clamp(30px,4vw,48px);}
.seal{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px 16px; display:flex; flex-direction:column; align-items:center; gap:11px; transition:transform .25s,box-shadow .25s;}
.seal:hover{transform:translateY(-4px); box-shadow:var(--sh-md);}
.seal__ic{width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:color-mix(in oklab,var(--brand) 16%,white);}
.seal__ic svg{width:24px; height:24px; stroke:var(--brand-deep); fill:none; stroke-width:2.2;}
.seal__t{font-family:var(--f-mono); font-size:12px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); line-height:1.3;}
.seal__s{font-family:var(--f-mono); font-size:10px; color:var(--ink-faint); line-height:1.45;}
.seal .flag{margin-top:2px; font-family:var(--f-mono); font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--amber-deep); background:color-mix(in oklab,var(--amber) 20%,white); border-radius:var(--r-pill); padding:2px 7px;}
@media(max-width:820px){ .seals__grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:440px){ .seals__grid{grid-template-columns:1fr;} }

/* ============ VOZ ============ */
.voz{padding:clamp(60px,8vw,100px) 0; background:var(--bg-2); border-block:1px solid var(--line);}
.voz__head{text-align:center; max-width:720px; margin-inline:auto;}
.voz__eyebrow{color:var(--brand-deep);}
.voz__h{font-family:var(--f-display); font-weight:800; font-size:clamp(28px,3.6vw,44px); letter-spacing:-0.03em; margin-top:14px; text-wrap:balance;}
.voz__lead{color:var(--ink-soft); max-width:60ch; margin:14px auto 0;}
.voz__banner{display:flex; align-items:center; gap:12px; max-width:820px; margin:24px auto 0; padding:12px 18px; border:1px dashed color-mix(in oklab,var(--amber) 55%,var(--line)); background:color-mix(in oklab,var(--amber) 10%,white); border-radius:var(--r-md);}
.voz__banner svg{width:20px; height:20px; stroke:var(--amber-deep); fill:none; stroke-width:1.9; flex:none;}
.voz__banner span{font-family:var(--f-mono); font-size:11px; letter-spacing:.03em; text-transform:uppercase; color:var(--amber-deep); line-height:1.5;}
.voz__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:clamp(24px,3vw,36px);}
.voz-card{position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); overflow:hidden; transition:transform .25s,box-shadow .25s;}
.voz-card:hover{transform:translateY(-5px); box-shadow:var(--sh-md);}
.voz-card__sample{position:absolute; top:0; left:0; font-family:var(--f-mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--night); background:var(--amber); padding:4px 11px; border-bottom-right-radius:14px;}
.voz-card__head{display:flex; align-items:center; gap:11px; padding:20px 20px 14px;}
.voz-card__av{width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center; background:color-mix(in oklab,var(--brand) 13%,white); font-family:var(--f-mono); font-weight:500; font-size:13px; color:var(--brand-deep);}
.voz-card__id{flex:1; min-width:0;}
/* nombre y detalle son dos renglones: en linea se leian pegados («Contador independienteCuarenta RFC») */
.voz-card__name{display:block; font-family:var(--f-display); font-weight:700; font-size:15px; letter-spacing:-0.015em; color:var(--ink);}
.voz-card__role{display:block; margin-top:3px; font-family:var(--f-mono); font-size:10px; line-height:1.45; color:var(--ink-faint);}
.voz-card__slot{font-family:var(--f-mono); font-size:8px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); border:1px dashed var(--line); border-radius:var(--r-pill); padding:4px 8px; white-space:nowrap; flex:none;}
.voz-card__rip{height:0; border-top:2px dashed var(--line); margin:0 16px; position:relative;}
.voz-card__rip::before,.voz-card__rip::after{content:""; position:absolute; top:-11px; width:20px; height:20px; border-radius:50%; background:var(--bg-2);}
.voz-card__rip::before{left:-26px;} .voz-card__rip::after{right:-26px;}
.voz-card__body{padding:18px 20px 16px; font-size:15px; color:var(--ink); line-height:1.55;}
.voz-card__foot{background:var(--night-2); display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 20px;}
.voz-card__foot .k{font-family:var(--f-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--night-faint);}
.voz-card__foot .v{font-family:var(--f-mono); font-size:11px; color:#fff; text-align:right;}
.voz__foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; margin-top:28px;}
.ftrial{display:inline-flex; align-items:center; gap:7px; font-family:var(--f-mono); font-size:12px; font-weight:500; color:var(--brand-deep); background:color-mix(in oklab,var(--brand) 11%,white); border:1px solid color-mix(in oklab,var(--brand) 26%,var(--line)); padding:8px 15px; border-radius:var(--r-pill);}
.ftrial svg{width:14px; height:14px;}
@media(max-width:820px){ .voz__grid{grid-template-columns:1fr; max-width:440px; margin-inline:auto;} }

/* ============ CIERRE ============ */
.close{position:relative; background:radial-gradient(90% 120% at 50% 0%, var(--night-3), var(--night)); color:#fff; text-align:center; padding:clamp(80px,12vw,150px) 0; overflow:hidden;}
.close::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(50% 60% at 50% 0%, rgba(91,231,206,.2), transparent 65%);}
.close__inner{position:relative; z-index:1;}
.close__h{font-family:var(--f-display); font-weight:800; font-size:clamp(38px,7vw,92px); line-height:.94; letter-spacing:-0.045em; text-wrap:balance; max-width:16ch; margin-inline:auto;}
.close__sub{color:var(--night-text); font-size:clamp(15.5px,1.4vw,19px); margin:20px auto 0; max-width:48ch;}
.close__cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:34px;}
.close__stat{margin-top:30px; font-family:var(--f-mono); font-size:13px; letter-spacing:.06em; color:var(--brand-glow);}
.close__stat b{font-size:1.5em; color:#fff;}

/* ============ NOTAS ============ */
.notes{background:#fbfaf5; border-top:1px solid color-mix(in oklab,var(--amber) 30%,var(--line)); padding:clamp(40px,6vw,68px) 0;}
.notes__k{font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--amber-deep);}
.notes h3{font-family:var(--f-display); font-weight:700; font-size:22px; letter-spacing:-0.02em; margin-top:8px;}
.checklist{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:12px; max-width:900px;}
.checklist li{position:relative; padding-left:30px; font-size:14.5px; color:var(--ink-soft); line-height:1.55;}
.checklist li::before{content:"!"; position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-family:var(--f-mono); font-weight:700; font-size:12px; color:var(--amber-deep); background:color-mix(in oklab,var(--amber) 22%,white);}
.checklist li b{color:var(--ink);}
.checklist li.ok::before{content:"✓"; color:var(--brand-deep); background:color-mix(in oklab,var(--brand) 16%,white);}

/* ============ FOOTER "el talón del comprobante" ============ */
.docfoot{position:relative; background:var(--night); color:var(--night-faint); font-family:var(--f-mono); font-size:11.5px; line-height:1.8; padding:0 0 96px;}
/* perforación: el talón se desprende del cuerpo del sitio */
.docfoot::before{content:""; position:absolute; top:0; left:var(--gut); right:var(--gut); height:0; border-top:2px dashed var(--night-line);}
.docfoot__in{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:clamp(22px,4vw,52px); padding-top:clamp(40px,5vw,62px); text-align:left;}
.docfoot__brand .brandmark{color:#fff; font-size:24px;}
.docfoot__brand .brandmark .dot{background:var(--brand-glow); box-shadow:0 0 0 4px rgba(91,231,206,.25);}
.docfoot__claim{font-family:var(--f-body); font-size:14px; line-height:1.6; color:var(--night-text); margin-top:15px; max-width:40ch;}
.docfoot__mail{display:inline-block; margin-top:14px; color:var(--brand-glow); border-bottom:1px dashed rgba(91,231,206,.42);}
.docfoot__mail:hover{border-bottom-style:solid;}
.docfoot__col{display:flex; flex-direction:column; align-items:flex-start; gap:10px;}
.docfoot__k{font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--night-faint); padding-bottom:2px;}
.docfoot__col a{font-family:var(--f-body); font-size:14px; line-height:1.4; color:var(--night-text); transition:color .2s;}
.docfoot__col a:hover{color:var(--brand-glow);}
.docfoot__base{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:clamp(32px,4vw,46px); padding-top:20px; border-top:1px solid var(--night-line); font-size:10.5px; letter-spacing:.05em;}
.docfoot__base a{color:var(--night-text); text-decoration:underline; text-underline-offset:3px;}
.docfoot__base a:hover{color:var(--brand-glow);}
.docfoot__stamp{display:inline-flex; align-items:center; gap:8px; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-glow); border:1.5px solid rgba(91,231,206,.45); border-radius:6px; padding:6px 11px; white-space:nowrap;}
/* variante slim: flujo de compra y utilitarias (sin puertas de salida) */
.docfoot--slim{padding-bottom:40px;}
.docfoot--slim .docfoot__base{justify-content:center; text-align:center; border-top:none; margin-top:0; padding-top:clamp(26px,4vw,38px);}
@media(max-width:860px){ .docfoot__in{grid-template-columns:1fr 1fr;} .docfoot__brand{grid-column:1/-1;} }
@media(max-width:480px){ .docfoot__in{grid-template-columns:1fr;} .docfoot__base{justify-content:flex-start;} }

/* ============ TRANSICIONES ENTRE PÁGINAS ============
   Cross-document View Transitions: mejora progresiva (Chrome/Edge 126+).
   Los navegadores sin soporte simplemente navegan normal. */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:vtOut .2s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root){ animation:vtIn .32s cubic-bezier(0,0,.2,1) both; }
@keyframes vtOut{ to{opacity:0;} }
@keyframes vtIn{ from{opacity:0; transform:translateY(8px);} }
/* el punto de la marca es el elemento compartido: viaja entre rutas.
   Solo el del nav lo lleva (un view-transition-name debe ser único por página). */
.topnav .brandmark .dot, .pagenav .brandmark .dot{ view-transition-name:lucas-dot; }
::view-transition-group(lucas-dot){ animation-duration:.42s; animation-timing-function:cubic-bezier(.2,.7,.3,1); }
@media(prefers-reduced-motion:reduce){
  @view-transition{ navigation:none; }
}

/* hero intro + device motion */
html.js .hero__title .ln{display:block; overflow:hidden;}
html.js .hero__title .ln>span{display:block; transform:translateY(115%); transition:transform 1s cubic-bezier(.19,1,.22,1);}
html.js .hero__title .ln:nth-child(2)>span{transition-delay:.09s;}
html.js .hero__title .ln:nth-child(3)>span{transition-delay:.18s;}
html.loaded .hero__title .ln>span{transform:none;}
html.js .hero__r,html.js .hero__scroll{opacity:0; transform:translateY(16px); transition:opacity .9s ease .38s, transform .9s cubic-bezier(.19,1,.22,1) .38s;}
html.loaded .hero__r,html.loaded .hero__scroll{opacity:1; transform:none;}
.device__screen .dv__list .dv__row{animation:dvRow .5s cubic-bezier(.2,.7,.3,1) both;}
.device__screen .dv__list .dv__row:nth-child(1){animation-delay:.06s;}
.device__screen .dv__list .dv__row:nth-child(2){animation-delay:.13s;}
.device__screen .dv__list .dv__row:nth-child(3){animation-delay:.20s;}
.device__screen .dv__hero .big{animation:dvPop .55s cubic-bezier(.2,.7,.3,1) both;}
@keyframes dvRow{from{opacity:0; transform:translateY(12px);}}
@keyframes dvPop{from{opacity:0; transform:translateY(8px) scale(.95);}}

/* ============ EL TIMBRE ============
   El momento firma: en el paso 05 el sello no aparece — se ESTAMPA.
   Baja girado y sobredimensionado, golpea el papel (que acusa el impacto)
   y suelta un anillo de tinta. Es literalmente lo que hace el producto. */
.device__screen .dv__stamp{animation:tbPapel .72s cubic-bezier(.2,.7,.3,1) both;}
@keyframes tbPapel{
  0%{opacity:0; transform:translateY(12px);}
  58%{opacity:1; transform:translateY(0);}
  72%{transform:translateY(3px);}      /* el golpe */
  86%{transform:translateY(-1px);}
  100%{transform:translateY(0);}
}
.device__screen .dv__stamp .dv__seal{animation:tbSello .48s cubic-bezier(.2,.9,.25,1.3) .16s both; transform-origin:50% 50%;}
@keyframes tbSello{
  0%{opacity:0; transform:scale(2.4) rotate(-17deg);}
  55%{opacity:1;}
  72%{transform:scale(.9) rotate(3deg);}   /* impacto ~0.51s */
  88%{transform:scale(1.05) rotate(-1.5deg);}
  100%{opacity:1; transform:scale(1) rotate(0);}
}
/* anillo de tinta: sale en el impacto */
.device__screen .dv__stamp .dv__seal::before{
  content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid var(--brand-glow);
  animation:tbTinta .68s cubic-bezier(.1,.7,.3,1) .5s both;}
@keyframes tbTinta{
  0%{transform:scale(.86); opacity:.9;}
  100%{transform:scale(2.5); opacity:0;}
}

/* Los sellos de confianza usan el mismo lenguaje al entrar en pantalla */
html.js .seals__grid.stagger.in .seal__ic{animation:tbMini .5s cubic-bezier(.2,.9,.25,1.28) both;}
html.js .seals__grid.stagger.in .seal:nth-child(1) .seal__ic{animation-delay:.04s}
html.js .seals__grid.stagger.in .seal:nth-child(2) .seal__ic{animation-delay:.12s}
html.js .seals__grid.stagger.in .seal:nth-child(3) .seal__ic{animation-delay:.20s}
html.js .seals__grid.stagger.in .seal:nth-child(4) .seal__ic{animation-delay:.28s}
html.js .seals__grid.stagger.in .seal:nth-child(5) .seal__ic{animation-delay:.36s}
html.js .seals__grid.stagger.in .seal:nth-child(6) .seal__ic{animation-delay:.44s}
html.js .seals__grid.stagger.in .seal:nth-child(7) .seal__ic{animation-delay:.52s}
html.js .seals__grid.stagger.in .seal:nth-child(8) .seal__ic{animation-delay:.60s}
@keyframes tbMini{
  0%{opacity:0; transform:scale(1.85) rotate(-13deg);}
  58%{opacity:1;}
  74%{transform:scale(.93) rotate(2.5deg);}
  100%{opacity:1; transform:scale(1) rotate(0);}
}

/* reveal */
.reveal{opacity:1;}
html.js .reveal{opacity:0; transform:translateY(24px); transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1);}
html.js .reveal.in{opacity:1; transform:none;}
html.js .stagger>*{opacity:0; transform:translateY(20px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);}
html.js .stagger.in>*{opacity:1; transform:none;}
html.js .verbs__list.stagger>*{transform:translate(-30px,10px);}
html.js .verbs__list.stagger.in>*{transform:none;}
html.js .stagger.in>*:nth-child(2){transition-delay:.08s} html.js .stagger.in>*:nth-child(3){transition-delay:.16s} html.js .stagger.in>*:nth-child(4){transition-delay:.24s} html.js .stagger.in>*:nth-child(5){transition-delay:.32s} html.js .stagger.in>*:nth-child(6){transition-delay:.40s} html.js .stagger.in>*:nth-child(7){transition-delay:.48s} html.js .stagger.in>*:nth-child(8){transition-delay:.56s}
@media(prefers-reduced-motion:reduce){ html.js .reveal,html.js .stagger>*,html.js .hero__title .ln>span,html.js .hero__r,html.js .hero__scroll{opacity:1 !important;transform:none !important;transition:none !important;} *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;} }

/* ============ INTRO "El punto de Lucas" ============ */
.intro{position:fixed; inset:0; z-index:200; display:none; cursor:pointer;}
html.intro-on .intro{display:block;}
.intro__curtain{position:absolute; inset:0;
  background:radial-gradient(90% 80% at 80% 0%, rgba(14,160,140,.30), transparent 55%),
             radial-gradient(70% 90% at 10% 100%, rgba(91,231,206,.10), transparent 60%),
             var(--night);
  transition:transform 1.15s cubic-bezier(.7,0,.16,1);}
.intro__mark{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:18px;}
.intro__dot{width:16px; height:16px; flex:none; border-radius:50%; background:var(--brand-glow);
  box-shadow:0 0 0 6px rgba(91,231,206,.22);
  animation:introDot 1s cubic-bezier(.22,1,.36,1) both; will-change:transform;}
@keyframes introDot{from{transform:scale(.4); opacity:0;}}
.intro__word{overflow:hidden;}
.intro__word span{display:block; font-family:var(--f-display); font-weight:800; font-size:clamp(38px,6vw,60px); line-height:1; letter-spacing:-0.04em; color:#fff;
  transform:translateY(118%); animation:introWord 1.05s cubic-bezier(.19,1,.22,1) .35s forwards;}
@keyframes introWord{to{transform:translateY(0);}}
.intro__by{position:absolute; top:calc(50% + 52px); left:50%; transform:translateX(-50%);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--night-faint);
  opacity:0; animation:introBy .7s ease 1s forwards;}
@keyframes introBy{to{opacity:1;}}
/* acto 2: el telón sube, la palabra sale por su máscara, el punto vuela al nav (transform via JS) */
.intro--reveal .intro__curtain{transform:translateY(-101%);}
.intro--reveal .intro__word span{animation:none; transform:translateY(-125%); transition:transform .65s cubic-bezier(.55,0,.55,.2);}
.intro--reveal .intro__by{animation:none; opacity:0; transition:opacity .4s;}
.intro--off{display:none !important;}
@media(prefers-reduced-motion:reduce){ .intro{display:none !important;} }

/* ============ HERO VIVO: aurora + hojas-CFDI flotantes ============ */
.hero__aurora{position:absolute; inset:0; z-index:0; width:100%; height:100%; opacity:.45; mix-blend-mode:screen; pointer-events:none;}
.hero__float{position:absolute; inset:0; z-index:1; pointer-events:none; perspective:1200px; overflow:hidden;}
.hsheet{position:absolute; display:flex; flex-direction:column; gap:13px; padding:22px 0 0; border-radius:22px; overflow:hidden;
  border:1px solid rgba(255,255,255,.15);
  background:linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.035) 58%, rgba(91,231,206,.07));
  box-shadow:0 46px 90px -42px rgba(4,26,22,.5), inset 0 1px 0 rgba(255,255,255,.14);
  will-change:transform;}
.hsheet__folio{display:flex; align-items:center; gap:8px; margin:0 24px 2px; font-family:var(--f-mono); font-size:11px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.62); white-space:nowrap;}
.hsheet__folio em{font-style:normal; font-size:8.5px; letter-spacing:.12em; padding:2.5px 8px; border-radius:var(--r-pill); background:rgba(91,231,206,.16); border:1px solid rgba(91,231,206,.38); color:var(--brand-glow);}
.hsheet__row{height:10px; border-radius:6px; background:rgba(255,255,255,.15); margin:0 24px;}
.hsheet__row--w2{width:58%;}
.hsheet__row--w3{width:38%;}
.hsheet__seal{position:absolute; bottom:18px; right:18px; width:36px; height:36px; border-radius:50%;
  background:rgba(91,231,206,.14); border:1px solid rgba(91,231,206,.42);}
.hsheet__seal::after{content:""; position:absolute; inset:11px; border-radius:50%; background:var(--brand-glow); opacity:.75;}
/* posiciones/inclinación base (estado estático = composición digna sin JS) */
.hsheet--a{width:min(24vw,330px); height:min(28vw,380px); top:9%;  right:7%;  opacity:.92; transform:rotateX(12deg) rotateY(-17deg) rotateZ(-6deg);}
.hsheet--b{width:min(17vw,235px); height:min(20vw,270px); top:29%; right:32%; opacity:.62; transform:rotateX(9deg)  rotateY(14deg)  rotateZ(5deg);}
.hsheet--c{width:min(13vw,180px); height:min(15vw,205px); top:13%; left:9%;   opacity:.5;  transform:rotateX(14deg) rotateY(12deg)  rotateZ(7deg);}
.hsheet--d{width:min(9vw,125px);  height:min(10vw,140px); top:64%; right:4%;  opacity:.55; transform:rotateX(10deg) rotateY(-12deg) rotateZ(9deg);}
.hsheet--c .hsheet__seal{width:26px; height:26px; bottom:13px; right:13px;}
.hsheet--c .hsheet__seal::after{inset:8px;}
.hsheet--d{padding-top:16px; gap:10px;}
.hsheet--d .hsheet__row{height:8px; margin:0 16px;}
.hsheet--d .hsheet__folio{font-size:9px; margin:0 16px 1px;}
.hsheet--c .hsheet__folio{font-size:9.5px;}
/* hojas nuevas (e, f, g) */
.hsheet--e{width:min(11vw,150px); height:min(12vw,165px); top:5%;  left:36%;  opacity:.42; transform:rotateX(11deg) rotateY(9deg)   rotateZ(-8deg); padding-top:14px; gap:9px;}
.hsheet--e .hsheet__row{height:8px; margin:0 15px;}
.hsheet--e .hsheet__folio{font-size:8.5px; margin:0 15px 1px;}
.hsheet--f{width:min(12vw,165px); height:min(13vw,180px); top:37%; left:5%;   opacity:.45; transform:rotateX(13deg) rotateY(15deg)  rotateZ(5deg);  padding-top:14px; gap:9px;}
.hsheet--f .hsheet__row{height:8px; margin:0 15px;}
.hsheet--f .hsheet__folio{font-size:8.5px; margin:0 15px 1px;}
.hsheet--g{width:min(14vw,190px); height:min(15vw,210px); top:74%; right:30%; opacity:.5;  transform:rotateX(9deg)  rotateY(-14deg) rotateZ(6deg);  padding-top:17px; gap:11px;}
.hsheet--g .hsheet__row{height:9px; margin:0 18px;}
.hsheet--g .hsheet__folio{font-size:9px; margin:0 18px 1px;}
.hsheet--g .hsheet__seal{width:28px; height:28px; bottom:14px; right:14px;}
.hsheet--g .hsheet__seal::after{inset:9px;}
@media(max-width:820px){ .hero__float, .hero__aurora{display:none;} }
@media(prefers-reduced-motion:reduce){ .hero__aurora{display:none;} }