/* theme.css · 28-oct-2026 · capa visual nueva (oscuro, cristal, micro-interacciones). Se carga después del CSS de cada página y manda. El contenido no cambia. */
:root{
  --bg:#0A0E1A; --bg-2:#0D1322;
  --surface:rgba(255,255,255,.045); --surface-2:rgba(255,255,255,.085);
  --glass:rgba(14,19,34,.62);
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.18);
  --ink:#F2F4F9; --ink-2:#B9C1D3; --ink-3:#7E89A3;
  --accent:#5B7CFF; --accent-hi:#8AA0FF; --accent-lo:#4463F2;
  --accent-soft:rgba(91,124,255,.14); --accent-line:rgba(91,124,255,.38);
  --danger:#F2715F;
  --font-display:"Space Grotesk","Inter Tight",system-ui,sans-serif;
  --font-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --shadow:0 24px 60px -28px rgba(0,0,0,.75);
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-weight:400}
::selection{background:var(--accent);color:#fff}
a{color:var(--ink);text-decoration-color:var(--line-2)}
a:hover{text-decoration-color:var(--accent-hi)}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px}
/* Fondo: resplandor, trama de puntos y grano */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(1000px 640px at 12% -12%, rgba(91,124,255,.26), transparent 60%),
  radial-gradient(800px 560px at 92% 8%, rgba(91,124,255,.10), transparent 60%),
  radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px) 0 0 / 28px 28px,
  var(--bg)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.28;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Cabecera flotante de cristal */
.top{position:sticky;top:0;z-index:50;margin-top:.75rem;padding:.7rem 1rem!important;align-items:center;gap:.75rem 1.25rem;
  background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.07)}
.logo .wm{color:var(--ink);font-size:1.5rem!important}
.logo .tag{margin-top:.35rem;color:var(--ink-3)}
.tabs{order:3;flex-basis:100%;gap:.25rem;padding:.25rem;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;font-weight:600}
.tabs a{padding:.5rem .95rem;border-radius:999px;border-bottom:0;color:var(--ink-2);transition:background .25s var(--ease),color .25s var(--ease)}
.tabs a:hover,.tabs a:focus-visible{color:var(--ink);background:rgba(255,255,255,.06)}
.tabs a[aria-current="page"]{color:var(--ink);background:rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);border-bottom:0}
.topnav{padding-top:0;align-items:center;gap:1rem}
.topnav a{color:var(--ink-2)}
.topnav .only-wide{background:var(--accent);color:#fff;padding:.55rem 1rem;border-radius:999px;text-decoration:none;font-weight:600;
  box-shadow:0 10px 28px -12px rgba(91,124,255,.75),inset 0 1px 0 rgba(255,255,255,.22);transition:transform .25s var(--ease),filter .25s var(--ease)}
.topnav .only-wide:hover{color:#fff;transform:translateY(-1px);filter:brightness(1.08)}
.idx{order:4;flex-basis:100%;padding-top:.15rem;border-top:1px solid var(--line);margin-top:.15rem;padding-top:.6rem}
.idx a{color:var(--ink-3)} .idx a:hover{color:var(--ink)}
@media (min-width:768px){.tabs{order:0;flex-basis:auto;padding:.25rem}}

/* Tipografía */
h1{font-family:var(--font-display);font-weight:700;font-size:clamp(2.75rem,6.2vw + .5rem,5.75rem);line-height:.98;letter-spacing:-.035em;color:var(--ink)}
h1 strong,h1 strong.red{color:var(--danger);font-weight:700}
.hero-sub,.hero-cost,.hero-fix{font-family:var(--font-display);font-weight:500;letter-spacing:-.02em}
.hero-sub{color:var(--ink-2)} .hero-sub strong{color:var(--accent-hi);font-weight:600}
.hero-cost{color:var(--ink-2)} .hero-cost .ink{color:var(--ink)} .hero-fix{color:var(--ink)} .hero-fix span{color:var(--accent-hi)}
.sec-title,.contact h2,.final h2,.feat h3,.sub-feat h3,.row h3,.use h3,.level h3,.case-text h3,.fit h3,.ftag,.tagline,.gains b,.after-lines .after,.journey .t,.ask-qs li,.faq summary,.stat b,.vis-cap{font-family:var(--font-display)}
.sec-title,.contact h2,.final h2{font-weight:600;letter-spacing:-.03em}
.sec-title strong,h1 strong:not(.red),.contact h2 strong,.final h2 strong,.use h3 strong,.row h3 strong,.feat h3 strong,.sub-feat h3 strong{color:var(--accent-hi)}
.kicker,.mono,.vis-cap,.lead-label,.feat-label,.fit-label,.asks-label,.ask-who,.case-label,.journey .ch,.row .n,.fit .num{color:var(--ink-3)}
.lead-label,.feat-label,.fit-label,.case-label,.journey .ch{color:var(--accent-hi)}
.vis-cap{color:var(--ink);font-weight:500} .vis-cap strong{color:var(--accent-hi);font-weight:600}
.sec-lead,.note,.row p,.feat p,.case,.intro,.contact p,.final p,.level ul,.faq details p,.use p,.sec-note,.journey p,.after,.hero-extra{color:var(--ink-2)}
.after strong{color:var(--danger)} .after strong.ink{color:var(--accent-hi)} .gains b{color:var(--accent-hi)} .gains span{color:var(--ink-2)}
.case strong,.case-line strong,.case-text .first strong{color:var(--accent-hi)}

/* Cristal: tarjetas */
.lead,.stat,.use,.level,.ask,.vid,.sub-feat,.lead{position:relative}
.lead,.stat,.use,.level,.ask{background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));border:1px solid var(--line);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.09);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--ink-2)}
.lead{border-radius:20px} .stat{border-radius:20px} .use,.level,.ask{border-radius:18px}
.lead strong,.stat>span,.level .goal{color:var(--ink)} .lead .gain{color:var(--accent-hi)} .lead .cost{color:var(--danger)} .lead-g{border-top-color:var(--line);color:var(--ink)} .lead-g b{color:var(--accent-hi)}
.use.plus{border-style:dashed;border-color:var(--line-2)}
.use .tagx{color:var(--ink-3);border-color:var(--line)} .use .tagx.plus{color:var(--accent-hi);border-color:var(--accent-line);background:var(--accent-soft)}
.level.entry{border-color:var(--accent-line);box-shadow:var(--shadow),0 0 0 1px var(--accent-line),inset 0 1px 0 rgba(255,255,255,.09)}
.level .ask-who em{color:var(--ink-3)} .level .goal{border-top-color:var(--line)}
.ask .ask-who{color:var(--accent-hi)} .ask-cap{color:var(--ink-3)} .ask-qs li+li{border-top-color:var(--line)} .ask-qs li{color:var(--ink)}
.fit li{border-top-color:var(--line)} .fit-lead{color:var(--ink-2)!important}
.row,.sec,.contact,.final,footer,.faq,.faq details,.gains{border-color:var(--line)}
ol.rows .row{border-top-color:var(--line-2)}
/* foco de luz bajo el cursor (ui.js pone --mx/--my) */
.glow{overflow:hidden}
.glow::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s var(--ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(138,160,255,.18),transparent 62%)}
.glow:hover::after{opacity:1}
.glow>*{position:relative;z-index:1}

/* Botones */
.btn{border-radius:999px;padding:.95rem 1.5rem;font-weight:600;background:linear-gradient(180deg,var(--accent-hi),var(--accent));color:#fff;
  box-shadow:0 14px 34px -12px rgba(91,124,255,.7),inset 0 1px 0 rgba(255,255,255,.28);transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s var(--ease)}
.btn:hover{background:linear-gradient(180deg,var(--accent-hi),var(--accent));transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 20px 44px -14px rgba(91,124,255,.8),inset 0 1px 0 rgba(255,255,255,.28)}
.btn:active{transform:translateY(0) scale(.98);background:var(--accent-lo)}
.btn-ghost{border-radius:999px;background:rgba(255,255,255,.05);border-color:var(--line-2);color:var(--ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-ghost:hover{border-color:var(--accent-line);color:var(--ink);background:rgba(255,255,255,.08)} .btn-ghost span{color:var(--accent-hi)}
.cta-row .alt{color:var(--ink-2)}

/* Vídeos y teléfonos */
.vid{border:1px solid var(--line);border-radius:24px;background:#05070D;box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.08);padding:6px}
.vid video{border-radius:18px}
.phone{background:linear-gradient(180deg,#232B4A,#141A2E);border:1px solid rgba(255,255,255,.18);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.6),0 0 60px -20px rgba(91,124,255,.45),inset 0 1px 0 rgba(255,255,255,.18)}
.hero-visual .phone{aspect-ratio:9/16;overflow:hidden}
.hero-visual .phone video{width:100%;height:100%;object-fit:cover;display:block}
.phone video,.phone .screen{border-radius:20px}
.vcard{background:#0E1420} .play{background:#fff}
.hero-visual .phone{border-radius:28px}

/* Esquema de la portada (SVG) */
.flow .chip{fill:rgba(255,255,255,.06);stroke:var(--line-2)} .flow .chip-t{fill:var(--ink)}
.flow .dept .chip{stroke:var(--accent-line)}
.flow .box{fill:#182346;stroke:var(--accent-line);stroke-width:1} .flow .box-t{fill:#F2F4F9} .flow .box-s{fill:#8AA0FF}
.flow .pill{fill:var(--accent-soft)} .flow .pill-t{fill:var(--accent-hi)}
.flow .in{stroke:var(--line-2)} .flow .out{stroke:var(--accent-hi)}
/* Esquemas de videocápsulas (SVG con atributos) */
.omni rect{fill:rgba(255,255,255,.06);stroke:var(--line-2)} .omni text{fill:var(--ink)}
.omni rect[fill="#FBECEA"]{fill:rgba(242,113,95,.16);stroke:none} .omni text[fill="#B4372F"]{fill:var(--danger)}
.omni rect[fill="#E8ECFF"]{fill:var(--accent-soft);stroke:none} .omni text[fill="#2F4BE3"]{fill:var(--accent-hi)}
.omni text[fill="#5C6577"]{fill:var(--ink-3)}
.omni rect[fill="#0E1420"]{fill:var(--accent);stroke:none} .omni path[fill="#F6F8FB"]{fill:#fff}
.omni path[stroke="#B9C1CF"]{stroke:var(--line-2)} .omni path[stroke="#3B5BFF"]{stroke:var(--accent-hi)}

/* Caso bitti: barras */
.bar i{background:var(--line-2);transform-origin:left} .bar.on i{background:linear-gradient(90deg,var(--accent),var(--accent-hi))}
.bar em{color:var(--ink-3)} .stat b{color:var(--accent-hi);font-weight:700;letter-spacing:-.03em}
.rv.in .bar i{animation:grow 1.1s var(--ease) both} @keyframes grow{from{transform:scaleX(0)}}
.case-line{color:var(--ink)}
.journey li::before{background:var(--accent-hi);box-shadow:0 0 0 4px var(--bg),0 0 24px rgba(138,160,255,.5)} .journey li::after{background:var(--line-2)}

/* FAQ y pie */
.faq summary{color:var(--ink)} .faq summary::after{color:var(--accent-hi)} details summary{color:var(--ink-2)} details p{color:var(--ink-3)}
footer{color:var(--ink-3)} .ftag{color:var(--ink);font-weight:600;letter-spacing:-.02em} .ftag span{color:var(--accent-hi)} .fline a{color:var(--ink-2)} .fline a:hover{color:var(--ink)}
.copy{color:var(--ink-3)}

/* Portada: entra sola con CSS (sin depender de JS), escalonada */
@keyframes rise{from{opacity:.25;transform:translateY(12px)}to{opacity:1;transform:none}}
.js .hero-copy > *,.js .hero-visual{animation:rise .7s var(--ease) backwards}
.hero-copy > :nth-child(1){animation-delay:.05s}.hero-copy > :nth-child(2){animation-delay:.12s}.hero-copy > :nth-child(3){animation-delay:.2s}.hero-copy > :nth-child(4){animation-delay:.28s}.hero-copy > :nth-child(5){animation-delay:.36s}.hero-copy > :nth-child(6){animation-delay:.44s}
.hero-visual{animation-delay:.3s}
@media (prefers-reduced-motion:reduce){.hero-copy > *,.hero-visual{animation:none}}
/* Resto de secciones: entrada al hacer scroll (ui.js añade .js y .rv/.in) */
.js .rv{opacity:.3;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none} .rv.in .bar i{animation:none}}
/* Chat launcher (chat.js loads Chatwoot on click and replaces this button with its own bubble) */
.chat-launch{position:fixed;right:20px;bottom:20px;z-index:50;width:56px;height:56px;border-radius:50%;border:1px solid var(--accent-line);background:var(--accent);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);transition:background .2s var(--ease),transform .2s var(--ease)}
.chat-launch:hover{background:var(--accent-lo);transform:translateY(-2px)}
.chat-launch:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px}
.chat-launch[hidden]{display:none}
.chat-launch.is-loading{opacity:.6;cursor:progress}
.chat-launch svg{width:26px;height:26px}
@media (prefers-reduced-motion:reduce){.chat-launch{transition:none}.chat-launch:hover{transform:none}}