/* ══════════════════════════════════════════════════════════════
   BISONTEC — Sistema Visual Institucional · vAGO2026
   Bison Tecnologies, S.A.P.I. de C.V.
   Paleta muestreada del logo. Retícula: rail 176px + columna 858px.
   ══════════════════════════════════════════════════════════════ */

:root{
  --paper:#F2F3ED;
  --paper-2:#E6E9DE;
  --card:#FBFCF8;
  --ink:#131A0F;
  --muted:#6B7263;
  --faint:#9AA292;
  --rule:#D5DAC9;
  --rule-soft:#E4E8DA;
  --brand:#3F5828;
  --brand-2:#2C3E1B;
  --leaf:#7A9B54;
  --leaf-soft:#DFE7D1;
  --forest:#1D2E16;
  --forest-2:#141F0F;
  --on-forest:#E9EEDE;
  --on-forest-2:#9AAA88;
  --ochre:#A8761C;
  --ochre-soft:#F2E9D6;
  --ok:#2F7D55;
  --risk:#A5402F;

  --f-logo:"Jost","Futura","Century Gothic",sans-serif;
  --f-dsp:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-txt:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-ui:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E140A; --paper-2:#151D10; --card:#141C0F;
    --ink:#E9EEDE; --muted:#95A088; --faint:#69745C;
    --rule:#26301C; --rule-soft:#1C2415;
    --brand:#A8C782; --brand-2:#C2DC9E; --leaf:#7A9B54; --leaf-soft:#26311B;
    --forest:#080D05; --forest-2:#060A04; --on-forest:#E9EEDE; --on-forest-2:#8B9A7B;
    --ochre:#CFA054; --ochre-soft:#2A2214; --ok:#5FA982; --risk:#CE7261;
  }
}
:root[data-theme="dark"]{
  --paper:#0E140A; --paper-2:#151D10; --card:#141C0F;
  --ink:#E9EEDE; --muted:#95A088; --faint:#69745C;
  --rule:#26301C; --rule-soft:#1C2415;
  --brand:#A8C782; --brand-2:#C2DC9E; --leaf:#7A9B54; --leaf-soft:#26311B;
  --forest:#080D05; --forest-2:#060A04; --on-forest:#E9EEDE; --on-forest-2:#8B9A7B;
  --ochre:#CFA054; --ochre-soft:#2A2214; --ok:#5FA982; --risk:#CE7261;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-txt); font-size:18px; line-height:1.58;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-optical-sizing:auto;
}
::selection{background:var(--leaf-soft); color:var(--ink)}
svg{max-width:100%}
a{color:inherit}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}
h1,h2,h3,h4,h5{margin:0; font-family:var(--f-dsp); font-weight:800; letter-spacing:-.032em; line-height:.98; text-wrap:balance}
:focus-visible{outline:2px solid var(--leaf); outline-offset:4px}

/* ─────────── Retícula editorial ─────────── */
.g{
  display:grid;
  grid-template-columns:minmax(22px,1fr) minmax(0,176px) minmax(0,858px) minmax(22px,1fr);
  column-gap:38px;
}
.g > .rail{grid-column:2}
.g > .main{grid-column:3}
.g > .both{grid-column:2 / 4}
.g > .bleed{grid-column:1 / 5}
@media (max-width:940px){
  .g{grid-template-columns:22px minmax(0,1fr) 22px; column-gap:0}
  .g > .rail, .g > .main, .g > .both{grid-column:2}
  .g > .bleed{grid-column:1 / 4}
  .g > .rail{margin-bottom:14px}
}

.mono{font-family:var(--f-mono)}
.lbl{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--faint); line-height:1.7;
}
.rail .lbl{display:block}
.hr{height:1px; background:var(--rule); border:0; margin:0}
.hr-ink{height:2px; background:var(--ink); border:0; margin:0}

/* marginalia editorial */
.marg{
  font-family:var(--f-mono); font-size:11.5px; line-height:1.72; color:var(--muted);
  border-top:1px solid var(--rule); padding-top:10px; margin-top:16px;
}
.marg b{color:var(--brand); font-weight:500}

/* ─────────── Header / Topbar ─────────── */
.head{
  position:sticky; top:0; z-index:50; background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.head-in{
  max-width:1300px; margin:0 auto; padding:0 26px;
  display:flex; align-items:center; gap:30px; min-height:74px;
}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none; flex:none}
.logo svg{width:29px; height:29px; display:block; fill:var(--brand)}
.logo span{font-family:var(--f-logo); font-weight:400; font-size:19px; letter-spacing:.31em; padding-left:2px}
.nav{margin-left:auto; display:flex; gap:26px; overflow-x:auto; scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{
  font-family:var(--f-ui); font-size:14px; font-weight:500; text-decoration:none;
  color:var(--muted); white-space:nowrap; padding:26px 0 24px; border-bottom:2px solid transparent;
  transition:color .16s, border-color .16s;
}
.nav a:hover{color:var(--ink)}
.nav a.on, .nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--brand)}
@media (max-width:940px){
  .nav{-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent); mask-image:linear-gradient(90deg,#000 86%,transparent)}
}
@media (max-width:620px){
  .head-in{gap:16px; padding:0 18px}
  .logo span{display:none}
  .nav{gap:17px; -webkit-mask-image:none; mask-image:none}
  .nav a{font-size:13px}
}

/* ─────────── Vistas & Secciones ─────────── */
.view{display:none}
.view.on{display:block}
.sec{padding:96px 0}
.sec.thin{padding:64px 0}
.sec.dark{background:var(--forest); color:var(--on-forest)}
.sec.dark .lbl{color:var(--on-forest-2)}
.sec.dark .hr{background:rgba(233,238,222,.16)}
.sec.dark p{color:var(--on-forest-2)}
.sec-line{grid-column:1/5; height:1px; background:var(--rule); margin-bottom:34px}
@media (max-width:940px){.sec-line{grid-column:1/4}}

/* ─────────── Botones ─────────── */
.btn{
  font-family:var(--f-ui); font-size:14px; font-weight:600; text-decoration:none;
  padding:13px 24px; display:inline-block; border:1px solid transparent; cursor:pointer;
  transition:background .18s, color .18s, border-color .18s, transform .12s; border-radius:0;
}
.btn-1{background:var(--brand); color:var(--paper)}
.btn-1:hover{background:var(--brand-2)}
.btn-2{background:none; color:var(--ink); border-color:var(--rule)}
.btn-2:hover{border-color:var(--brand); background:var(--leaf-soft)}
.btn-3{
  background:none; color:var(--brand); padding:0 0 3px; border-bottom:2px solid var(--leaf);
  font-family:var(--f-ui); font-size:14px; font-weight:600; text-decoration:none; display:inline-block;
}
.btn-3:hover{border-bottom-color:var(--brand)}
.btn:active{transform:translateY(1px)}
.dark .btn-2{color:var(--on-forest); border-color:rgba(233,238,222,.3)}
.dark .btn-2:hover{background:rgba(122,155,84,.18); border-color:var(--leaf)}

/* ─────────── Hero ─────────── */
.hero{padding:78px 0 0; position:relative}
.hero h1{
  font-size:clamp(2.5rem,6.1vw,5.1rem); line-height:.94; letter-spacing:-.038em; max-width:16ch;
}
.hero h1 .lt{font-weight:400; color:var(--muted)}
.hero h1 .gr{color:var(--brand)}
.hero-lead{
  font-size:clamp(1.05rem,1.6vw,1.28rem); color:var(--muted); max-width:52ch; margin-top:30px;
}
.hero-acts{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; align-items:center}
.hero-art{grid-column:3/5; position:relative; margin-top:26px; padding-bottom:20px}
@media (max-width:940px){.hero-art{grid-column:1/4; margin-top:18px}}
.sheet{width:100%; height:auto; display:block; overflow:visible}
.sheet .guide{fill:none; stroke:var(--rule); stroke-width:.4}
.sheet .cons{fill:none; stroke:var(--leaf); stroke-width:.5; opacity:.9}
.sheet .cflow{fill:none; stroke:var(--brand); stroke-width:1.1; stroke-linecap:round;
  stroke-dasharray:7 207; stroke-dashoffset:214; opacity:0}
.sheet .ctr{fill:var(--faint); stroke:none}
.sheet .tick{stroke:var(--faint); stroke-width:.35}
.sheet .an{font-family:var(--f-mono); font-size:3px; letter-spacing:.13em; fill:var(--faint)}
.sheet .an.g{fill:var(--brand)}
.sheet .mk{fill:var(--brand)}

@media (prefers-reduced-motion: no-preference){
  .sheet .cons{stroke-dasharray:400; stroke-dashoffset:400;
    animation:dw 1.6s cubic-bezier(.2,.6,.35,1) forwards, br 8s ease-in-out 1.7s infinite}
  .sheet .cons.c2{animation-delay:.1s, 1.8s}
  .sheet .cons.c3{animation-delay:.2s, 1.9s}
  .sheet .cons.c4{animation-delay:.3s, 2s}
  .sheet .c1, .sheet .n1{--bx:0; --by:-1.9px}
  .sheet .c2, .sheet .n2{--bx:1.9px; --by:0}
  .sheet .c3, .sheet .n3{--bx:0; --by:1.9px}
  .sheet .c4, .sheet .n4{--bx:-1.9px; --by:0}
  .sheet .ctr{opacity:0; animation:ap .8s 1.3s ease-out forwards, br 8s ease-in-out 1.7s infinite}
  .sheet .cons-grp{transform-origin:105px 58px; animation:grp 150s linear 2s infinite}
  .sheet .cflow{animation:flow 9s cubic-bezier(.5,0,.5,1) infinite}
  .sheet .f1{animation-delay:2.6s} .sheet .f2{animation-delay:4.8s}
  .sheet .f3{animation-delay:7s}   .sheet .f4{animation-delay:9.2s}
  .sheet .mk{opacity:0; transform-origin:105px 58px;
    animation:ap .8s .8s ease-out forwards, mkb 8s ease-in-out 1.7s infinite}
  .sheet .an,.sheet .tick,.sheet .guide{opacity:0; animation:ap .8s 1.15s ease-out forwards}
}
@keyframes dw{to{stroke-dashoffset:0}}
@keyframes ap{to{opacity:1}}
@keyframes br{0%,100%{transform:translate(0,0)} 50%{transform:translate(var(--bx,0),var(--by,0))}}
@keyframes mkb{0%,100%{transform:scale(1)} 50%{transform:scale(1.045)}}
@keyframes grp{to{transform:rotate(360deg)}}
@keyframes flow{
  0%{stroke-dashoffset:214; opacity:0}
  4%{opacity:.95}
  22%{stroke-dashoffset:0; opacity:.95}
  28%{opacity:0}
  100%{stroke-dashoffset:0; opacity:0}
}

/* ─────────── Cifras / Métricas ─────────── */
.figs{display:grid; grid-template-columns:1.55fr 1fr 1fr 1fr; column-gap:38px; row-gap:38px; align-items:start}
@media (max-width:940px){.figs{grid-template-columns:1fr 1fr}}
.fig .n{
  font-family:var(--f-dsp); font-weight:800; letter-spacing:-.05em; line-height:.82;
  font-size:clamp(2.2rem,4vw,3rem); font-variant-numeric:tabular-nums;
}
.fig-h .n{font-size:clamp(4rem,9.5vw,7.4rem); color:var(--brand)}
.fig .n i{font-style:normal}
.fig .n u{font-family:var(--f-ui); font-size:.2em; font-weight:600; letter-spacing:.04em; text-decoration:none; color:var(--muted); vertical-align:.9em; margin-left:.24em}
.fig .k{font-family:var(--f-ui); font-size:13px; line-height:1.5; color:var(--muted); margin-top:14px; max-width:26ch}
.fig-h .k{font-size:14.5px; max-width:32ch; color:var(--ink)}

/* ─────────── TEAM · retícula 2×2, una sola pantalla ─────────── */
.team-wrap{
  position:relative; width:100%; max-width:1400px; justify-self:center;
  padding:18px 26px 0; margin-top:4px; overflow:hidden;
}
.team-wm{
  position:absolute; right:-8%; top:-4%; width:min(520px,42vw); height:auto;
  fill:var(--leaf); opacity:.06; pointer-events:none;
}
.team-list{
  position:relative; display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid rgba(233,238,222,.2);
}
.tband{
  display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:24px;
  padding:18px 38px 20px 0; align-items:start;
  border-bottom:1px solid rgba(233,238,222,.2); transition:background .35s ease;
}
.tband:nth-child(2n){padding-right:0; padding-left:38px; border-left:1px solid rgba(233,238,222,.2)}
.tband:nth-child(n+3){border-bottom:0}
.tband:hover{background:rgba(122,155,84,.055)}
.tl{
  font-family:var(--f-dsp); font-weight:800; font-size:clamp(2.7rem,4.5vw,4.4rem);
  line-height:.72; letter-spacing:-.065em; color:var(--leaf);
  display:block; transition:color .35s ease;
}
.tband:hover .tl{color:#C9DFA8}
.tw{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--on-forest-2); font-weight:400; margin-bottom:10px;
}
.tq{
  font-family:var(--f-dsp); font-weight:800; letter-spacing:-.028em; line-height:1.06;
  font-size:clamp(1.12rem,1.85vw,1.58rem); color:#F2F6E8; max-width:27ch;
}
.ts{
  margin-top:12px; padding-top:11px; border-top:1px solid rgba(122,155,84,.32);
  font-size:14.5px; line-height:1.45; color:var(--on-forest-2); max-width:46ch;
}
/* la sección oscura define color para h3/p; estas ganan en especificidad */
.sec.dark .tw{color:var(--on-forest-2)}
.sec.dark .tq{color:#F2F6E8}
.sec.dark .ts{color:var(--on-forest-2)}
@media (max-width:900px){
  .team-wrap{padding:26px 22px 0}
  .team-list{grid-template-columns:1fr}
  .tband{padding:26px 0 28px; border-bottom:1px solid rgba(233,238,222,.2)}
  .tband:nth-child(2n){padding-left:0; border-left:0}
  .tband:last-child{border-bottom:0}
  .tl{font-size:3.4rem}
}

/* ─────────── Cita / Posición ─────────── */
.quote{
  font-family:var(--f-txt); font-style:italic; font-size:clamp(1.6rem,3.6vw,2.9rem);
  line-height:1.14; letter-spacing:-.015em; max-width:20ch;
}
.quote-src{font-family:var(--f-mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--faint); margin-top:26px}

/* ─────────── Índice de plataformas ─────────── */
.idx{border-top:1px solid var(--ink)}
.idx-row{
  display:grid; grid-template-columns:52px minmax(0,1.05fr) minmax(0,1.25fr) auto;
  column-gap:30px; align-items:baseline; padding:26px 0; border-bottom:1px solid var(--rule);
  text-decoration:none; color:inherit; transition:background .18s;
}
.idx-row:hover{background:var(--paper-2)}
.idx-row:hover .nm{transform:translateX(7px)}
@media (max-width:820px){
  .idx-row{grid-template-columns:38px minmax(0,1fr); row-gap:8px}
  .idx-row .dsc{grid-column:2}
  .idx-row .st{grid-column:2; justify-self:start}
}
.idx-row .no{font-family:var(--f-mono); font-size:11.5px; color:var(--faint); letter-spacing:.1em}
.idx-row .nm{
  font-family:var(--f-dsp); font-weight:800; font-size:clamp(1.7rem,3.4vw,2.5rem);
  letter-spacing:-.035em; transition:transform .22s cubic-bezier(.2,.7,.3,1); display:inline-block;
}
.idx-row .dsc{font-size:16.5px; color:var(--muted); max-width:44ch}
.idx-row .dsc em{font-style:italic; color:var(--ink)}
.chip{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--rule); padding:4px 9px; color:var(--muted); white-space:nowrap;
}
.chip.ok{color:var(--ok); border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.chip.soon{color:var(--ochre); border-color:color-mix(in srgb,var(--ochre) 50%,transparent)}
.chip.hold{color:var(--faint); border-color:var(--rule)}

/* ─────────── Listas / Definiciones ─────────── */
.dl{border-top:1px solid var(--ink)}
.dl-row{
  display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); column-gap:38px;
  padding:22px 0; border-bottom:1px solid var(--rule-soft); align-items:start;
}
@media (max-width:760px){.dl-row{grid-template-columns:1fr; row-gap:6px}}
.dl-row dt{font-family:var(--f-ui); font-weight:700; font-size:1rem; letter-spacing:-.01em}
.dl-row dd{margin:0; font-size:16.5px; color:var(--muted)}
.dl-row .no{font-family:var(--f-mono); font-size:11px; color:var(--leaf); letter-spacing:.14em; display:block; margin-bottom:6px}
.dark .dl{border-top-color:rgba(233,238,222,.4)}
.dark .dl-row{border-bottom-color:rgba(233,238,222,.14)}
.dark .dl-row dt{color:var(--on-forest)}

/* ─────────── Sectores ─────────── */
.sect{display:grid; grid-template-columns:repeat(3,1fr); column-gap:38px; row-gap:34px}
@media (max-width:820px){.sect{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.sect{grid-template-columns:1fr}}
.sect > div{border-top:2px solid var(--leaf); padding-top:16px}
.sect > div.open{border-top-color:var(--ochre); border-top-style:dashed}
.sect h4{font-family:var(--f-ui); font-weight:700; font-size:1rem; margin-bottom:8px; letter-spacing:-.005em}
.sect p{font-size:15.5px; color:var(--muted)}

/* ─────────── Escena Arquitectura "Cómo funciona" ─────────── */
.scene-sec{padding-bottom:72px; overflow:hidden}
.stage{margin:46px 0 8px; padding:0 26px; max-width:1400px; justify-self:center; width:100%}
.scene{width:100%; height:auto; display:block; overflow:visible}
.scene-m{display:none}
.stage-foot{
  margin-top:26px; font-family:var(--f-mono); font-size:12px; line-height:1.8;
  color:var(--on-forest-2); max-width:78ch;
}
.scene .sc-h{font-family:var(--f-mono); font-size:13px; letter-spacing:.22em; fill:var(--leaf)}
.scene .sc-in{font-family:var(--f-ui); font-size:19px; font-weight:500; fill:var(--on-forest)}
.scene .sc-out{font-family:var(--f-dsp); font-size:25px; font-weight:700; letter-spacing:-.022em; fill:var(--on-forest)}
.scene .sc-no{font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; fill:var(--on-forest-2)}
.scene .sc-wm{font-family:var(--f-dsp); font-size:24px; font-weight:800; letter-spacing:.2em; fill:var(--on-forest)}
.scene .sc-lay{font-family:var(--f-mono); font-size:12.5px; letter-spacing:.07em; fill:var(--on-forest-2)}
.scene .sc-lay.hl{fill:var(--leaf)}
.scene .sc-dot{fill:var(--leaf)}
.scene .sc-rule{stroke:rgba(233,238,222,.22); stroke-width:1}
.scene .route{fill:none; stroke:rgba(122,155,84,.45); stroke-width:1.3}
.scene .pulse{
  fill:none; stroke:var(--leaf); stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray:6 620; stroke-dashoffset:626; filter:url(#glow); opacity:0;
}
.scene .ring1{fill:none; stroke:var(--leaf); stroke-width:1.5; opacity:.9}
.scene .ring2{fill:none; stroke:rgba(122,155,84,.6); stroke-width:1; stroke-dasharray:3 10}
.scene .ring3{fill:none; stroke:rgba(233,238,222,.13); stroke-width:1}
.scene .ticks line{stroke:rgba(233,238,222,.3); stroke-width:1}
.scene .br{fill:none; stroke:rgba(233,238,222,.3); stroke-width:1}
.scene .br.t{stroke:rgba(233,238,222,.18)}
.scene .ph{fill:var(--leaf); filter:url(#glow)}
.scene .ph-ring{fill:none; stroke:var(--leaf); stroke-width:1; opacity:.5}
.scene .out{cursor:default}

.scene .out, .scene .r-out{transition:opacity .28s ease}
.scene .sc-out, .scene .sc-no, .scene .out .sc-dot{transition:fill .28s ease}
.scene.focus .out{opacity:.22 !important}
.scene.focus .r-out{opacity:.14 !important}
.scene.focus .out.on{opacity:1 !important}
.scene.focus .r-out.on{opacity:1 !important; stroke:#A8C782; stroke-width:2.2; filter:url(#glow)}
.scene.focus .out.on .sc-out{fill:#C9DFA8}
.scene.focus .out.on .sc-no{fill:#7A9B54}
.scene.focus .out.on .sc-dot{fill:#C9DFA8}

@media (prefers-reduced-motion: no-preference){
  .scene .ring2{transform-origin:500px 320px; animation:sc-spin 52s linear infinite}
  .scene .ring1{animation:sc-breathe 6s ease-in-out infinite}
  .scene .ph-ring{transform-origin:1058px 320px; animation:sc-ping 3.2s ease-out infinite}
  .scene.in .pulse{animation:sc-flow 3.6s linear infinite}
  .scene.in .pulse.p2{animation-delay:.45s} .scene.in .pulse.p3{animation-delay:.9s}
  .scene.in .pulse.p4{animation-delay:1.35s} .scene.in .pulse.p5{animation-delay:1.8s}
  .scene.in .pulse.p6{animation-delay:2.1s} .scene.in .pulse.p7{animation-delay:2.4s}
  .scene.in .pulse.p8{animation-delay:2.7s} .scene.in .pulse.p9{animation-delay:3s}
  .scene .route{stroke-dasharray:620; stroke-dashoffset:620}
  .scene.in .route{animation:sc-draw 1.5s cubic-bezier(.2,.7,.3,1) forwards}
  .scene.in .r-in:nth-of-type(2){animation-delay:.09s}
  .scene.in .r-in:nth-of-type(3){animation-delay:.18s}
  .scene.in .r-in:nth-of-type(4){animation-delay:.27s}
  .scene.in .r-out{animation-delay:.5s}
  .scene .core-g{opacity:0; transform:scale(.92); transform-origin:500px 320px}
  .scene.in .core-g{animation:sc-core 1s .2s cubic-bezier(.2,.7,.3,1) forwards}
  .scene .ins .lb, .scene .outs .out, .scene .sc-head, .scene .layers, .scene .bracket{opacity:0}
  .scene.in .sc-head{animation:sc-fade .8s .1s ease-out forwards}
  .scene.in .ins .lb{animation:sc-fade .8s ease-out forwards}
  .scene.in .ins .lb:nth-of-type(1){animation-delay:.35s} .scene.in .ins .lb:nth-of-type(2){animation-delay:.44s}
  .scene.in .ins .lb:nth-of-type(3){animation-delay:.53s} .scene.in .ins .lb:nth-of-type(4){animation-delay:.62s}
  .scene.in .outs .out{animation:sc-fade .8s ease-out forwards}
  .scene.in .outs .out:nth-of-type(1){animation-delay:.95s} .scene.in .outs .out:nth-of-type(2){animation-delay:1.04s}
  .scene.in .outs .out:nth-of-type(3){animation-delay:1.13s} .scene.in .outs .out:nth-of-type(4){animation-delay:1.22s}
  .scene.in .outs .out:nth-of-type(5){animation-delay:1.31s}
  .scene.in .bracket{animation:sc-fade .9s 1.45s ease-out forwards}
  .scene.in .layers{animation:sc-fade .9s .8s ease-out forwards}
}
@keyframes sc-spin{to{transform:rotate(360deg)}}
@keyframes sc-breathe{0%,100%{opacity:.9}50%{opacity:.45}}
@keyframes sc-ping{0%{transform:scale(.75); opacity:.7}70%{transform:scale(1.5); opacity:0}100%{opacity:0}}
@keyframes sc-flow{0%{stroke-dashoffset:626; opacity:0}8%{opacity:1}92%{opacity:1}100%{stroke-dashoffset:0; opacity:0}}
@keyframes sc-draw{to{stroke-dashoffset:0}}
@keyframes sc-core{to{opacity:1; transform:none}}
@keyframes sc-fade{to{opacity:1}}

@media (max-width:900px){
  .scene{display:none}
  .only-lg{display:none}
  .stage{padding:0 22px}
  .scene-m{display:grid; gap:0; justify-items:center; text-align:center}
  .scene-m .sm-col{display:grid; gap:9px; width:100%; padding:22px 0; border-top:1px solid rgba(233,238,222,.16)}
  .scene-m .sm-col span{font-family:var(--f-ui); font-size:15.5px; color:var(--on-forest)}
  .scene-m .sm-col span i{font-family:var(--f-mono); font-style:normal; font-size:11px; color:var(--leaf); margin-right:10px}
  .scene-m .sc-mh{font-family:var(--f-mono) !important; font-size:11px !important; letter-spacing:.2em; text-transform:uppercase; color:var(--leaf) !important; margin-bottom:4px}
  .scene-m .sm-core{display:grid; justify-items:center; gap:8px; padding:30px 0; border-top:1px solid rgba(233,238,222,.16); width:100%}
  .scene-m .sm-core svg{width:64px; fill:var(--leaf)}
  .scene-m .sm-core b{font-family:var(--f-dsp); font-weight:800; letter-spacing:.2em; font-size:17px; color:var(--on-forest)}
  .scene-m .sm-core em{font-family:var(--f-mono); font-style:normal; font-size:11.5px; color:var(--on-forest-2); max-width:34ch}
  .scene-m .sm-core em.hl{color:var(--leaf)}
  .scene-m .sm-end{font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--leaf); padding:20px 0; border-top:1px solid rgba(233,238,222,.16); width:100%}
}

/* ─────────── Movimiento & Scroll Revelations ─────────── */
[data-rv]{
  opacity:0; transform:translateY(16px);
  transition:opacity .78s cubic-bezier(.2,.7,.3,1) var(--d,0ms), transform .78s cubic-bezier(.2,.7,.3,1) var(--d,0ms);
}
[data-rv].in{opacity:1; transform:none}
.hero h1{clip-path:inset(0 0 104% 0); animation:h1-in 1.1s .12s cubic-bezier(.16,.84,.3,1) forwards}
@keyframes h1-in{to{clip-path:inset(0 0 -8% 0)}}
.head-in{transition:min-height .32s cubic-bezier(.2,.7,.3,1)}
.head .logo svg, .head .logo span{transition:width .32s, height .32s, font-size .32s}
.head.sm .head-in{min-height:58px}
.head.sm .logo svg{width:25px; height:25px}
.head.sm .logo span{font-size:17px}
.idx-row .nm::after{
  content:"→"; display:inline-block; margin-left:.34em; opacity:0; transform:translateX(-6px);
  transition:opacity .24s, transform .24s; color:var(--brand); font-weight:400;
}
.idx-row:hover .nm::after{opacity:1; transform:none}

/* ─────────── Fichas de plataforma ─────────── */
.pf{padding:52px 0; border-top:1px solid var(--rule)}
.pf:first-of-type{border-top:2px solid var(--ink)}
.pf h3{font-size:clamp(2rem,4.4vw,3.1rem); letter-spacing:-.038em}
.pf .kicker{font-family:var(--f-mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--leaf); margin:12px 0 20px}
.pf .prob{font-family:var(--f-txt); font-style:italic; font-size:1.22rem; line-height:1.34; color:var(--ink); max-width:32ch; border-left:2px solid var(--ochre); padding-left:18px; margin:0 0 22px}
.pf p{color:var(--muted); max-width:60ch}
.pf ul{list-style:none; padding:0; margin:22px 0 0}
.pf li{font-family:var(--f-ui); font-size:15.5px; padding:12px 0 12px 26px; border-top:1px solid var(--rule-soft); position:relative}
.pf li::before{content:""; position:absolute; left:0; top:20px; width:12px; height:1px; background:var(--leaf)}
.meta dt{font-family:var(--f-mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--faint); margin-top:18px}
.meta dd{margin:5px 0 0; font-family:var(--f-ui); font-size:14.5px}

/* ─────────── Formulario de Contacto & Bloque Legal ─────────── */
.f-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px 20px}
.f-grid .full{grid-column:1 / -1}
.fld label{display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:7px}
.fld input,.fld textarea,.fld select{
  width:100%; font-family:var(--f-ui); font-size:15px; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); padding:12px 13px; border-radius:0;
  transition:border-color .15s;
}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none; border-color:var(--leaf)}
.fld textarea{min-height:110px; resize:vertical}
.req{color:var(--leaf)}
.simpl{
  border-left:3px solid var(--leaf); background:var(--paper); padding:16px 18px;
  font-family:var(--f-ui); font-size:13px; line-height:1.6; color:var(--muted); margin:24px 0 18px;
}
.simpl b{color:var(--ink)}
.send{display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; margin-top:6px}
.send-lgl{font-family:var(--f-ui); font-size:12.5px; line-height:1.55; color:var(--muted); margin:0}
.form-feedback{
  font-family:var(--f-ui); font-size:14px; padding:12px 16px; margin-top:16px; border-radius:0;
}
.form-feedback.success{background:var(--leaf-soft); color:var(--brand-2); border-left:3px solid var(--brand)}
.form-feedback.error{background:#FBE9E7; color:var(--risk); border-left:3px solid var(--risk)}

/* Honeypot anti-spam señuelo oculto */
.hp-field{
  position:absolute !important;
  opacity:0 !important;
  left:-9999px !important;
  top:-9999px !important;
  height:0 !important;
  width:0 !important;
  z-index:-1 !important;
  overflow:hidden !important;
}

@media(max-width:720px){
  .f-grid{grid-template-columns:1fr}
  .send{grid-template-columns:1fr; gap:14px}
}

/* ─────────── Banner de Cookies con Gating ─────────── */
.ck-container{
  position:fixed; bottom:20px; left:22px; right:22px; max-width:980px; margin:0 auto; z-index:100;
}
.ck{
  border:1px solid var(--rule); background:var(--card); padding:22px 24px;
  box-shadow:0 12px 36px rgba(0,0,0,0.12);
  display:grid; grid-template-columns:1fr auto; gap:20px 26px; align-items:center;
}
.ck p{font-family:var(--f-ui); font-size:13.5px; line-height:1.55; color:var(--muted); margin:0; max-width:64ch}
.ck-btns{display:flex; gap:10px; flex-wrap:wrap}
.ck-btns button{
  font-family:var(--f-ui); font-size:13px; font-weight:600; padding:11px 18px;
  border:1px solid var(--rule); background:var(--paper); color:var(--ink); cursor:pointer;
  transition:border-color .15s, background .15s; border-radius:0;
}
.ck-btns button:hover{border-color:var(--leaf)}
.ck-btns .pri{background:var(--brand); color:var(--on-forest); border-color:var(--brand)}
.ck-btns .pri:hover{background:var(--brand-2)}
.ck-prefs{grid-column:1 / -1; border-top:1px solid var(--rule); padding-top:18px; margin-top:4px}
.ck-prefs .row{
  display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start;
  font-family:var(--f-ui); font-size:13.5px; margin-bottom:13px;
}
.ck-prefs .row input{margin-top:3px; width:16px; height:16px; accent-color:var(--brand)}
.ck-prefs .row span small{display:block; color:var(--muted); font-size:12.5px; margin-top:2px}
@media(max-width:720px){.ck{grid-template-columns:1fr}}

/* ─────────── Documentos Legales (TyC / Privacidad) ─────────── */
.legal-hero{padding:88px 0 48px; border-bottom:1px solid var(--rule)}
.kicker{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--leaf); margin:0 0 22px;
}
.lede{font-family:var(--f-txt); font-size:20.5px; line-height:1.5; color:var(--muted); max-width:60ch; margin:0 0 34px}
.meta-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:22px 34px; border-top:1px solid var(--rule); padding-top:20px; margin:0;
}
.meta-grid dt{font-family:var(--f-mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--faint); margin-bottom:5px}
.meta-grid dd{font-family:var(--f-ui); font-size:14.5px; font-weight:500; margin:0; line-height:1.4}

.body-g{padding:60px 0 0}
.legal-rail{position:sticky; top:98px; align-self:start; padding-bottom:70px}
.rail-h{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); padding-bottom:11px; border-bottom:1px solid var(--rule); margin-bottom:13px;
}
.legal-rail a{
  display:grid; grid-template-columns:22px 1fr; gap:6px;
  font-family:var(--f-ui); font-size:12.5px; line-height:1.32; color:var(--muted);
  text-decoration:none; padding:6px 0; transition:color .14s;
}
.legal-rail a:hover{color:var(--brand)}
.legal-rail a span{font-family:var(--f-mono); font-size:10px; color:var(--faint)}

main section.legal-sec{padding:0 0 46px; scroll-margin-top:110px}
.legal-sec h2{
  font-family:var(--f-dsp); font-weight:800; letter-spacing:-.026em;
  font-size:clamp(1.42rem,2.5vw,1.92rem); line-height:1.1;
  margin:44px 0 18px; padding-top:30px; border-top:1px solid var(--rule);
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:baseline;
}
.legal-sec h2 em{font-family:var(--f-mono); font-style:normal; font-weight:400; font-size:12px; color:var(--leaf); letter-spacing:.06em}
main section.legal-sec:first-of-type h2{border-top:0; padding-top:0; margin-top:0}
.legal-sec h3{font-family:var(--f-ui); font-weight:700; font-size:15.5px; letter-spacing:-.005em; margin:30px 0 10px}
.legal-sec ul,.legal-sec ol{margin:0 0 18px; padding-left:23px}
.legal-sec li{margin-bottom:10px}
.legalref{font-family:var(--f-mono); font-size:.8em; color:var(--muted); letter-spacing:.01em}

.note{background:var(--card); border:1px solid var(--rule); border-left:3px solid var(--leaf); padding:20px 24px; margin:24px 0; font-size:16.5px}
.note .lbl{font-family:var(--f-mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--leaf); display:block; margin-bottom:8px}
.datos{
  font-family:var(--f-ui); font-size:14.5px; line-height:1.7; background:var(--card);
  border:1px solid var(--rule); padding:24px 26px; margin:22px 0;
}
.datos dt{font-family:var(--f-mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--faint); margin-top:14px}
.datos dt:first-child{margin-top:0}
.datos dd{margin:3px 0 0}

.tbl-scroll{overflow-x:auto; margin:20px 0}
table{width:100%; border-collapse:collapse; font-family:var(--f-ui); font-size:14.5px}
th,td{text-align:left; padding:13px 14px; border-bottom:1px solid var(--rule); vertical-align:top}
th{font-family:var(--f-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); font-weight:400; border-bottom:1px solid var(--ink)}
tr:last-child td{border-bottom:0}

.box{background:var(--card); border:1px solid var(--rule); padding:26px 28px; margin:24px 0}
.box h3{margin-top:0}
.copy{font-family:var(--f-ui); font-size:14.5px; line-height:1.62}

/* ─────────── Footer ─────────── */
.foot{background:var(--forest-2); color:var(--on-forest); padding:64px 0 32px}
.foot-g{display:grid; grid-template-columns:1.5fr 1fr 1fr; column-gap:38px; row-gap:34px}
@media (max-width:820px){.foot-g{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.foot-g{grid-template-columns:1fr}}
.foot h5{font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--on-forest-2); margin:0 0 16px; font-weight:400}
.foot a{display:block; font-family:var(--f-ui); font-size:14.5px; text-decoration:none; color:var(--on-forest); padding:5px 0; opacity:.86; transition:opacity .16s, color .16s}
.foot a:hover{opacity:1; color:var(--leaf)}
.foot .lg{display:flex; align-items:center; gap:12px; margin-bottom:16px}
.foot .lg svg{width:29px; height:29px; fill:var(--on-forest)}
.foot .lg span{font-family:var(--f-logo); font-size:19px; letter-spacing:.31em}
.foot .lgl{margin-top:52px; padding-top:20px; border-top:1px solid rgba(233,238,222,.14); display:flex; gap:26px; flex-wrap:wrap}
.foot .lgl small{font-family:var(--f-ui); font-size:12px; color:var(--on-forest-2)}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
  [data-rv]{opacity:1; transform:none}
  .hero h1{clip-path:none; animation:none}
}
@media print{
  .head,.legal-rail,.foot-g,.ck-container{display:none}
  .g{grid-template-columns:1fr} .g > .main,.g > .both{grid-column:1}
  body{background:#fff; color:#000; font-size:10.5pt; line-height:1.45}
  h1{font-size:24pt} h2{font-size:13pt; page-break-after:avoid}
  h2 em{color:#4C6B33}
  .legal-hero,.hero{padding:0 0 22px; border-color:#999}
  a{text-decoration:none; color:#2C3E1B}
  .note,.datos,.box{border-color:#bbb; background:#fafaf7; page-break-inside:avoid}
  table{page-break-inside:avoid} th{border-bottom-color:#333; color:#555}
  td,th{border-bottom-color:#ccc}
  .kicker{color:#4C6B33}
  .foot{display:block; background:#fff; color:#000; margin-top:26px; padding:12px 0 0; border-top:1px solid #999}
  .foot .lgl{display:block; margin:0; padding:0; border:0}
  .foot .lgl small{display:block; color:#555; font-size:8pt; line-height:1.45}
}