/* DefAgent — dineo design system / sistema de diseño dineo.
   Extraído del <style> inline de index.html + variantes para páginas internas.
   Shared across every landing page. */
:root{
  --bg:#030712;
  --bg-2:#0a1020;
  --panel:#0d1526;
  --card:#0b1322;
  --line:rgba(34,211,238,.14);
  --line-strong:rgba(34,211,238,.35);
  --cyan:#22d3ee;
  --cyan-deep:#0891b2;
  --blue:#3b82f6;
  --ink:#e5eef6;
  --mut:#94a3b8;
  --dim:#64748b;
  --ok:#34d399;
  --warn:#fbbf24;
  --road:#60a5fa;
  --r:14px;
  --disp:'Chakra Petch',sans-serif;
  --body:'Inter',sans-serif;
  --mono:'JetBrains Mono',monospace;
  /* motion tokens — toda animación del sitio importa de acá, nunca números sueltos
     motion tokens — every animation on the site imports these, never raw numbers */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-fast:.2s;
  --dur-normal:.4s;
  --dur-slow:.6s;
  --stagger:.06s;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.wrap-w{max-width:1240px;margin:0 auto;padding:0 24px}

h1,h2,h3,h4,h5{font-family:var(--disp);letter-spacing:.01em}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.12;font-weight:700}
h2{font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.2;font-weight:700}
h3{font-size:1.08rem;font-weight:600}
h4{font-size:1rem;font-weight:600}
.accent{color:var(--cyan)}
.sub{color:var(--mut);font-size:1.06rem;max-width:46rem;margin-top:14px}
.mt-l{margin-top:44px}

/* ---------- badges / tags ---------- */
.pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);border:1px solid var(--line-strong);border-radius:999px;padding:7px 14px;background:rgba(8,145,178,.08)}
.pip{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:3px 10px;vertical-align:middle;font-weight:500}
.tag .d{width:6px;height:6px;border-radius:50%}
.tag-op{color:var(--ok);border:1px solid rgba(52,211,153,.3);background:rgba(52,211,153,.08)}.tag-op .d{background:var(--ok)}
.tag-int{color:var(--warn);border:1px solid rgba(251,191,36,.3);background:rgba(251,191,36,.08)}.tag-int .d{background:var(--warn)}
.tag-road{color:var(--road);border:1px solid rgba(96,165,250,.3);background:rgba(96,165,250,.08)}.tag-road .d{background:var(--road)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:600;border-radius:10px;padding:11px 20px;font-size:.95rem;transition:transform .15s,box-shadow .15s,background .15s;border:1px solid transparent}
.btn .arr{transition:transform .15s}
.btn:hover .arr{transform:translateX(3px)}
.btn-cyan{background:linear-gradient(135deg,var(--cyan-deep),#164e63);color:#fff;border-color:var(--line-strong);box-shadow:0 0 24px rgba(34,211,238,.18)}
.btn-cyan:hover{box-shadow:0 0 36px rgba(34,211,238,.35);transform:translateY(-1px)}
.btn-clear{border-color:rgba(148,163,184,.3);color:var(--ink);background:rgba(255,255,255,.03)}
.btn-clear:hover{border-color:var(--line-strong);color:var(--cyan)}
.btn-lg{padding:14px 26px;font-size:1rem}
.btn-white{background:#fff;color:#04121a}
.btn-white:hover{box-shadow:0 0 30px rgba(255,255,255,.25);transform:translateY(-1px)}
.textlink{color:var(--cyan);font-weight:600;font-size:.92rem;display:inline-flex;gap:6px;align-items:center}
.textlink .arr{transition:transform .15s}
.textlink:hover .arr{transform:translateX(3px)}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:60;background:rgba(3,7,18,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:28px;height:66px;max-width:1240px;margin:0 auto;padding:0 24px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;font-size:1.2rem}
.brand img{height:34px;width:34px;filter:drop-shadow(0 0 8px rgba(34,211,238,.5))}
.brand span{color:var(--cyan)}
.nav-menu{display:flex;gap:6px;align-items:center}
.nav-link{display:flex;align-items:center;gap:5px;color:var(--mut);font-size:.92rem;font-weight:500;padding:10px 12px;border-radius:8px}
.nav-link:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.nav-link.active{color:var(--cyan)}
.chev{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}
.nav-menu>li{position:relative}
.dd{position:absolute;top:100%;left:0;padding-top:10px;opacity:0;pointer-events:none;transform:translateY(6px);transition:.18s}
.nav-menu>li:hover .dd,.nav-menu>li:focus-within .dd{opacity:1;pointer-events:auto;transform:translateY(0)}
.dd-in{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 20px 50px rgba(0,0,0,.6);overflow:hidden;min-width:300px}
.dd.wide .dd-in{width:640px}
.dd-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:10px}
.dd.narrow .dd-grid{grid-template-columns:1fr}
.dd-item{display:flex;gap:12px;padding:12px;border-radius:10px}
.dd-item:hover{background:rgba(34,211,238,.06)}
.dd-item .dd-ico{font-size:1.1rem;line-height:1.4}
.dd-item .dd-ico img{width:28px;height:28px;object-fit:contain;display:block;margin-top:2px;filter:drop-shadow(0 0 5px rgba(34,211,238,.35))}
.dd-item b{display:block;font-size:.9rem;font-family:var(--disp)}
.dd-item .desc{display:block;color:var(--dim);font-size:.78rem;line-height:1.45;margin-top:2px}
.dd-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:12px 20px;font-size:.8rem;color:var(--dim)}
.dd-foot a{color:var(--cyan);font-weight:600}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.signin{color:var(--mut);font-size:.92rem;font-weight:500}
.signin:hover{color:var(--ink)}
.navtoggle{display:none;font-size:1.4rem;margin-left:auto;color:var(--ink)}
.mob{display:none;border-top:1px solid var(--line);padding:14px 24px;flex-direction:column;gap:12px;background:var(--bg)}
.mob a{color:var(--mut);padding:6px 0}
.mob details summary{cursor:pointer;font-weight:600;padding:6px 0}
.mob-sub{display:flex;flex-direction:column;padding:4px 0 4px 14px}
.mob.open{display:flex}

/* ---------- hero (home) ---------- */
.hero{position:relative;padding:96px 0 110px;overflow:hidden;background:
  linear-gradient(180deg,rgba(3,7,18,.82) 0%,rgba(3,7,18,.6) 45%,var(--bg) 100%),
  url('/assets/web/home/bg-hero.jpg') center/cover no-repeat}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero h1{margin:22px 0 18px}
.lead{color:#c7d5e3;font-size:1.12rem;max-width:36rem}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero-foot{display:flex;gap:36px;margin-top:44px;flex-wrap:wrap}
.hero-foot span{display:flex;flex-direction:column;color:var(--mut);font-size:.82rem}
.hero-foot b{font-family:var(--disp);font-size:1.5rem;color:var(--ink)}
.glass{background:rgba(10,16,32,.72);border:1px solid var(--line-strong);border-radius:18px;backdrop-filter:blur(10px);box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 0 60px rgba(8,145,178,.06)}
.cycle-card{padding:26px}
.cycle-head{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:16px}
.cycle-node{display:flex;align-items:center;gap:14px;padding:15px 16px;border:1px solid var(--line);border-radius:12px;background:rgba(3,7,18,.5)}
.cycle-node .n{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:1.1rem;background:rgba(8,145,178,.15);border:1px solid var(--line-strong);flex:none}
.cycle-node .lvl{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.cycle-node b{font-family:var(--disp);font-size:.98rem}
.cycle-node .meta{margin-left:auto;font-family:var(--mono);font-size:.68rem;color:var(--dim)}
.cycle-rail{width:2px;height:22px;margin:2px 0 2px 34px;background:linear-gradient(180deg,var(--cyan),transparent);position:relative;overflow:hidden}
.cycle-rail::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,#fff,transparent);animation:flow 2.2s linear infinite;opacity:.7}
@keyframes flow{from{transform:translateY(-100%)}to{transform:translateY(100%)}}

/* ---------- page hero (inner pages) ---------- */
/* Cada página setea --page-bg y --page-bg-mobile con su url() de fondo.
   Each page sets --page-bg / --page-bg-mobile with its own bg url(). */
.page-hero{position:relative;padding:84px 0 72px;overflow:hidden;background:
  linear-gradient(180deg,rgba(3,7,18,.86) 0%,rgba(3,7,18,.68) 50%,var(--bg) 100%),
  var(--page-bg,none) center/cover no-repeat}
.page-hero .lead{margin-top:18px}
.page-hero h1{margin:16px 0 12px}
.breadcrumb{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:18px}
.breadcrumb a{color:var(--cyan)}

/* ---------- sections ---------- */
.section{padding:92px 0}
.section.alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head h2{margin-top:14px}
.sec-head .sub{margin-bottom:48px}
.ink-section{position:relative;color:var(--ink);overflow:hidden;background:
  linear-gradient(180deg,rgba(3,7,18,.9),rgba(3,7,18,.84)),
  url('/assets/web/home/bg-circuit.jpg') center/cover fixed no-repeat}
/* `fixed`: el cover se calcula contra el viewport, no contra la sección alta (evita zoom).
   `fixed`: cover sizes against the viewport, not the tall section (kills the zoom). */
.threat-section{position:relative;overflow:hidden;background:
  linear-gradient(180deg,rgba(3,7,18,.92),rgba(3,7,18,.86)),
  url('/assets/web/home/bg-threats.jpg') center/cover fixed no-repeat}
.neuro-section{position:relative;overflow:hidden;background:
  linear-gradient(180deg,rgba(3,7,18,.92),rgba(3,7,18,.88)),
  url('/assets/web/home/bg-neurons.jpg') center/cover fixed no-repeat}
/* sección con fondo de página / page-tinted section
   clase doblada para ganarle a .section.alt / doubled class to beat .section.alt */
.bg-section.bg-section{position:relative;overflow:hidden;background:
  linear-gradient(180deg,rgba(3,7,18,.9),rgba(3,7,18,.85)),
  var(--page-bg,none) center/cover fixed no-repeat}
/* sección con fondo sutil + overlay liviano (texto legible) / subtle section bg, lighter overlay */
.bg-soft.bg-soft{position:relative;overflow:hidden;background:
  linear-gradient(180deg,rgba(3,7,18,.82) 0%,rgba(3,7,18,.9) 100%),
  var(--page-bg,none) center/cover fixed no-repeat}

.featlist{display:flex;flex-direction:column;gap:14px}
.featlist li{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:15px 18px;background:rgba(13,21,38,.55)}
.featlist .mk{color:var(--cyan);font-weight:700;font-family:var(--mono)}
.featlist b{font-family:var(--disp)}
.featlist .t{color:var(--mut)}

.split{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start}
.panel{border:1px solid var(--line-strong);border-radius:var(--r);padding:28px;background:rgba(10,16,32,.7);backdrop-filter:blur(6px)}
.stat{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;border-bottom:1px dashed var(--line)}
.stat:last-child{border-bottom:0}
.stat .l{color:var(--mut);font-size:.88rem}
.stat .n{font-family:var(--disp);font-size:1.7rem;color:var(--cyan);font-weight:700}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards.cols-2{grid-template-columns:repeat(2,1fr)}
.cards.cols-4{grid-template-columns:repeat(4,1fr)}
.card{display:flex;flex-direction:column;gap:12px;border:1px solid var(--line);border-radius:var(--r);padding:24px;background:linear-gradient(180deg,rgba(13,21,38,.85),rgba(8,13,26,.85));transition:.2s}
.card:hover{border-color:var(--line-strong);transform:translateY(-3px);box-shadow:0 16px 40px rgba(8,145,178,.12)}
.card .ci{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:1.2rem;background:rgba(8,145,178,.12);border:1px solid var(--line)}
.card h3{font-size:1.05rem}
.card p{color:var(--mut);font-size:.9rem}
.spacer{flex:1}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:step}
/* ---------- feature card con imagen conceptual / feature card with concept image ----------
   Imagen full-bleed arriba del .card, fundida al fondo oscuro; el chip .ci flota la costura.
   Full-bleed concept image atop .card, dissolved into the dark card; .ci chip floats the seam. */
.card-img{position:relative;margin:-24px -24px 0;aspect-ratio:16/10;overflow:hidden;border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;background:var(--bg-2)}
.card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
/* fundido hacia el fondo de la card + hairline + glow ambiente / fade into card bg + hairline + ambient glow */
.card-img::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(3,7,18,0) 45%,rgba(11,19,34,.5) 76%,rgba(13,21,38,.92) 100%);box-shadow:inset 0 -1px 0 var(--line),inset 0 0 60px rgba(8,145,178,.08)}
.card:hover .card-img img{transform:scale(1.04)}
/* chip del icono flotando sobre la costura imagen/cuerpo / icon chip floating the image seam */
.card-img + .ci{position:relative;z-index:2;margin-top:-30px;background:rgba(8,13,26,.9);border-color:var(--line-strong);box-shadow:0 0 20px rgba(34,211,238,.22);backdrop-filter:blur(4px)}
@media (prefers-reduced-motion:reduce){.card-img img{transition:none}.card:hover .card-img img{transform:none}}

.step{border:1px solid var(--line);border-radius:var(--r);padding:26px;background:var(--card);position:relative;counter-increment:step}
.step::before{content:"0" counter(step);font-family:var(--mono);color:var(--cyan);font-size:.8rem;letter-spacing:.2em;display:block;margin-bottom:12px}
.step p{color:var(--mut);font-size:.92rem;margin-top:8px}

.callout{display:flex;gap:18px;border-radius:var(--r);padding:24px 26px;border:1px solid var(--line-strong);background:linear-gradient(120deg,rgba(8,145,178,.1),rgba(59,130,246,.06))}
.callout .ic{font-size:1.4rem}
/* iconos png transparentes generados por scripts/landings-icons.py / generated transparent png icons */
.ci img,.cycle-node .n img,.callout .ic img{width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 0 6px rgba(34,211,238,.35))}
.cycle-node .n img{width:28px;height:28px}
.callout p{color:var(--mut);font-size:.94rem;margin-top:6px}

/* ---------- prose (legal / long-form) ---------- */
.prose{max-width:52rem}
.prose h2{margin:36px 0 12px}
.prose h3{margin:26px 0 10px;color:var(--ink)}
.prose p{color:var(--mut);margin:12px 0}
.prose ul{list-style:disc;padding-left:1.4rem;color:var(--mut);margin:12px 0}
.prose ol{list-style:decimal;padding-left:1.4rem;color:var(--mut);margin:12px 0}
.prose li{margin:6px 0}
.prose a{color:var(--cyan);text-decoration:underline}
.prose strong{color:var(--ink)}
.prose .lead{color:#c7d5e3}

/* ---------- marketplace productos / product marketplace (control) ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.prod-card{display:flex;flex-direction:column;color:inherit;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,rgba(13,21,38,.85),rgba(8,13,26,.85));overflow:hidden;transition:.2s}
.prod-card:hover{border-color:var(--line-strong);transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.45)}
/* foto de producto sobre card blanca (fotos con fondo blanco) / white card for white-bg product shots */
.prod-shot{background:#fff;border-radius:12px;margin:14px 14px 0;padding:14px;display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden}
.prod-shot img{width:100%;height:100%;object-fit:contain}
.prod-body{padding:16px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.prod-type{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.prod-card p{color:var(--mut);font-size:.9rem}
.prod-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.prod-gallery{display:flex;flex-direction:column;gap:14px}
@media (max-width:1000px){.prod-grid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.prod-grid{grid-template-columns:1fr}}

/* PDP: galería sticky + buy-box (patrón e-commerce, glow dark-theatre) /
   sticky gallery + buy box (e-commerce PDP pattern, dark-theatre ambient glow) */
.pdp-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
.pdp-media{position:sticky;top:96px}
.pdp-hero{aspect-ratio:4/3;margin:0;padding:26px;box-shadow:0 0 90px rgba(34,211,238,.14)}
.pdp-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.pdp-thumbs .prod-shot{margin:0;padding:10px;aspect-ratio:4/3}
.pdp-buy h2{margin:10px 0 4px}
.pdp-tag{color:var(--cyan);font-weight:600;font-family:var(--disp);font-size:1.05rem}
.pdp-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.pdp-desc{color:var(--mut);line-height:1.7;margin-top:14px}
.pdp-note{display:flex;gap:10px;align-items:center;margin-top:14px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:10px;background:rgba(8,145,178,.08);color:var(--mut);font-size:.9rem}
.pdp-note img{flex:none}
.pdp-specs{margin-top:18px;border:1px solid var(--line);border-radius:var(--r);background:rgba(13,21,38,.55);padding:4px 18px}
.spec-row{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.spec-row:last-child{border-bottom:0}
.spec-row .k{color:var(--dim)}
.spec-row .v{color:var(--ink);font-weight:500;text-align:right}
.pdp-chips-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:18px 0 8px}
.pdp-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:.82rem;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:5px 12px;background:rgba(8,145,178,.06)}
@media (max-width:1000px){.pdp-grid{grid-template-columns:1fr}.pdp-media{position:static}}

/* ---------- CTA ---------- */
.cta{position:relative;text-align:center;padding:120px 0;overflow:hidden;background:
  linear-gradient(180deg,var(--bg) 0%,rgba(3,7,18,.7) 30%,rgba(3,7,18,.7) 70%,var(--bg) 100%),
  url('/assets/web/home/bg-city.jpg') center/cover no-repeat}
.cta h2{max-width:44rem;margin:0 auto}
.cta p{color:#c7d5e3;max-width:38rem;margin:16px auto 0}
.cta .hero-cta{justify-content:center;margin-top:28px}

/* ---------- footer ---------- */
/* fondo sutil con overlay oscuro para mantener legibilidad / subtle bg with dark overlay for readability */
footer.site{position:relative;border-top:1px solid var(--line);padding:64px 0 32px;background:
  linear-gradient(180deg,rgba(3,7,18,.72) 0%,rgba(2,5,9,.9) 100%),
  url('/assets/web/footer/bg-footer.jpg') center/cover no-repeat}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:36px}
.fbrand p{color:var(--dim);font-size:.84rem;margin-top:14px;max-width:20rem}
.fcol h5{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.fcol a{display:block;color:var(--dim);font-size:.88rem;padding:5px 0}
.fcol a:hover{color:var(--cyan)}
.fcol ul{list-style:none}
.badges{margin-top:16px}
.foot-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:44px;padding-top:24px;color:var(--dim);font-size:.8rem}
.foot-bot .lg{display:inline-flex;align-items:center;gap:8px}
.foot-bot .d{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.social{display:flex;gap:14px;margin-top:14px}
.social a{color:var(--dim);font-size:.84rem}
.social a:hover{color:var(--cyan)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .pip,.cycle-rail::after{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-grid,.split{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .cards.cols-4{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
  .dd.wide .dd-in{width:520px}
}
@media (max-width:768px){
  .hero{background-image:linear-gradient(180deg,rgba(3,7,18,.82) 0%,rgba(3,7,18,.6) 45%,var(--bg) 100%),url('/assets/mobile/home/bg-hero.jpg')}
  .ink-section{background-attachment:scroll;background-image:linear-gradient(180deg,rgba(3,7,18,.9),rgba(3,7,18,.84)),url('/assets/mobile/home/bg-circuit.jpg')}
  .threat-section{background-attachment:scroll;background-image:linear-gradient(180deg,rgba(3,7,18,.92),rgba(3,7,18,.86)),url('/assets/mobile/home/bg-threats.jpg')}
  .neuro-section{background-attachment:scroll;background-image:linear-gradient(180deg,rgba(3,7,18,.92),rgba(3,7,18,.88)),url('/assets/mobile/home/bg-neurons.jpg')}
  .cta{background-image:linear-gradient(180deg,var(--bg) 0%,rgba(3,7,18,.7) 30%,rgba(3,7,18,.7) 70%,var(--bg) 100%),url('/assets/mobile/home/bg-city.jpg')}
  footer.site{background-image:linear-gradient(180deg,rgba(3,7,18,.72) 0%,rgba(2,5,9,.9) 100%),url('/assets/mobile/footer/bg-footer.jpg')}
  .page-hero{background-image:linear-gradient(180deg,rgba(3,7,18,.86) 0%,rgba(3,7,18,.68) 50%,var(--bg) 100%),var(--page-bg-mobile,var(--page-bg),none)}
  .bg-section.bg-section{background-attachment:scroll;background-image:linear-gradient(180deg,rgba(3,7,18,.9),rgba(3,7,18,.85)),var(--page-bg-mobile,var(--page-bg),none)}
  .bg-soft.bg-soft{background-attachment:scroll;background-image:linear-gradient(180deg,rgba(3,7,18,.82) 0%,rgba(3,7,18,.9) 100%),var(--page-bg-mobile,var(--page-bg),none)}
}
@media (max-width:760px){
  .nav-menu,.nav-right{display:none}
  .navtoggle{display:block}
  .cards,.cards.cols-2,.cards.cols-4{grid-template-columns:1fr}
  .hero{padding:64px 0 80px}
  .section{padding:64px 0}
  .page-hero{padding:64px 0 56px}
  .cta{padding:80px 0}
  .foot-top{grid-template-columns:1fr 1fr}
}

/* ---------- stagger reveal por grid / per-grid stagger reveal ----------
   CSS-only, no toca markup: cuando el .rv contenedor recibe .in (IntersectionObserver
   en site.js), cada .card cascade-revela según su columna — fila por fila, no índice
   absoluto, para que grids grandes (13 cards) no acumulen delays absurdos.
   CSS-only, no markup change: when the wrapping .rv gets .in, each .card cascades in
   by column position — per-row, not absolute index, so large grids (13 cards) don't
   accumulate an absurd delay. */
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.rv.in .card{animation:cardIn var(--dur-normal) var(--ease) both}
.cards.rv.in .card:nth-child(3n+1){animation-delay:0s}
.cards.rv.in .card:nth-child(3n+2){animation-delay:var(--stagger)}
.cards.rv.in .card:nth-child(3n){animation-delay:calc(var(--stagger)*2)}
.cards.cols-2.rv.in .card:nth-child(2n+1){animation-delay:0s}
.cards.cols-2.rv.in .card:nth-child(2n){animation-delay:var(--stagger)}
.cards.cols-4.rv.in .card:nth-child(4n+1){animation-delay:0s}
.cards.cols-4.rv.in .card:nth-child(4n+2){animation-delay:calc(var(--stagger)*.8)}
.cards.cols-4.rv.in .card:nth-child(4n+3){animation-delay:calc(var(--stagger)*1.6)}
.cards.cols-4.rv.in .card:nth-child(4n){animation-delay:calc(var(--stagger)*2.4)}
.slider.rv.in .card:nth-child(1){animation-delay:0s}
.slider.rv.in .card:nth-child(2){animation-delay:var(--stagger)}
.slider.rv.in .card:nth-child(3){animation-delay:calc(var(--stagger)*2)}
.slider.rv.in .card:nth-child(4){animation-delay:calc(var(--stagger)*3)}

/* ---------- slider / carrusel horizontal (scroll-snap + vanilla JS) ----------
   Progressive enhancement: sin JS sigue siendo scrollable táctil/rueda nativo.
   Without JS it's still natively touch/wheel scrollable. */
.slider{position:relative}
.slider-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 4px 12px;margin:0 -4px;-ms-overflow-style:none;scrollbar-width:none;outline:none}
.slider-track::-webkit-scrollbar{display:none}
.slider-track>.card{scroll-snap-align:start;flex:0 0 clamp(250px,30vw,340px)}
.slider-nav{position:absolute;top:calc(50% - 10px);translate:0 -50%;width:42px;height:42px;border-radius:50%;background:rgba(8,13,26,.88);border:1px solid var(--line-strong);color:var(--ink);display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(4px);transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease);z-index:3;font-family:var(--disp);font-size:1.1rem}
.slider-nav:hover{background:rgba(34,211,238,.18);transform:translateY(-50%) scale(1.08)}
.slider-nav.prev{left:-10px}
.slider-nav.next{right:-10px}
.slider-nav:disabled{opacity:.25;cursor:default;pointer-events:none}
.slider-dots{display:flex;justify-content:center;gap:8px;margin-top:6px}
.slider-dots button{width:8px;height:8px;border-radius:50%;background:var(--line-strong);border:0;cursor:pointer;transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);padding:0}
.slider-dots button.active{background:var(--cyan);transform:scale(1.35)}
@media (max-width:900px){.slider-nav{display:none}}
@media (prefers-reduced-motion:reduce){
  .rv.in .card{animation:none}
  .slider-track{scroll-behavior:auto}
}