/* =====================================================================
   css/holo.css · ESCENARIO (tema global HOLO, prefijo hs-)
   Escenario oscuro sobre el que se proyecta la película de hologramas.
   - El <style> inline de index.html se carga DESPUÉS de este archivo:
     por eso los selectores llevan "html body" / "html:root" (más
     especificidad) en vez de !important.
   - Dentro de las secciones antes claras (.sec-light, .band) los tokens
     neutros se invierten: --ink pasa a ser tinta CLARA (texto), --white y
     --paper pasan a ser paneles de vidrio oscuro. Los chips que usaban
     --ink como relleno oscuro se corrigen uno a uno más abajo.
   - El chat flotante (#chatPanel, #chatFab, .cp-*) NO se estiliza aquí:
     lo lleva CHAT-IA (css/holo-chat.css).
   ===================================================================== */

/* ---------- 1. tokens (biblia §2) ---------- */
:root{
  --holo-void:#03060D; --holo-deep:#060B16;
  --holo-panel:rgba(8,16,32,.72); --holo-panel-solid:#0A1324;
  --holo:#2AA5F5; --holo-hi:#7FD0FF;
  --holo-dim:rgba(42,165,245,.35); --holo-faint:rgba(42,165,245,.12);
  --holo-red:#FF3B3B;
  --holo-text:#EAF0FA; --holo-muted:#8C9AB5;
  --holo-kicker:#74BDEB;                       /* mono azul tenue: 6.9:1 sobre el vacío */
  --holo-line:rgba(42,165,245,.16);            /* separadores = líneas de luz */
  --holo-glow:0 0 0 1px rgba(42,165,245,.38),0 0 22px -4px rgba(42,165,245,.45);
  --holo-glass-edge:inset 0 0 0 1px rgba(42,165,245,.16);
}
html:root{
  --bg:var(--holo-void); --bg-2:var(--holo-panel-solid);
  --text:var(--holo-text); --muted:var(--holo-muted);
  --accent:var(--holo); --blue-ink:var(--holo-hi);
  --card:var(--holo-panel); --card-solid:var(--holo-panel-solid);
  --border:var(--holo-line);
  --shadow:0 30px 80px -24px rgba(0,0,0,.8);
  --ring:var(--holo-glass-edge);
  scrollbar-color:rgba(42,165,245,.38) var(--holo-void);
  scrollbar-width:thin;
  background:var(--holo-void);
}

/* ---------- 2. todas las secciones, oscuras ---------- */
html body :is(.sec-light,.band){
  --bg:var(--holo-void); --bg-2:var(--holo-panel-solid);
  --text:var(--holo-text); --muted:var(--holo-muted);
  --accent:var(--holo); --blue-ink:var(--holo-hi);
  --ink:var(--holo-text);                      /* tinta = texto claro */
  --white:var(--holo-panel-solid);             /* tarjetas "blancas" = panel sólido */
  --paper:rgba(10,19,36,.82);                  /* placas "papel" = vidrio oscuro */
  --card:var(--holo-panel); --card-solid:var(--holo-panel-solid);
  --border:var(--holo-line);
  --shadow:0 24px 60px -22px rgba(0,0,0,.8);
  --ring:var(--holo-glass-edge);
  color:var(--text);
}
html body .sec-white{--bg:var(--holo-deep)}
html body{background:var(--holo-void);color:var(--holo-text)}
/* rejilla de puntos tenue en el fondo de cada sección (un solo color → transparente) */
html body .sec{background-color:var(--bg);
  background-image:radial-gradient(rgba(127,208,255,.075) 1px,transparent 1.6px);background-size:24px 24px;background-position:12px 12px}
/* línea de luz entre escenas */
html body .sec+.sec,html body .band+.sec,html body .sec+.band{box-shadow:inset 0 1px 0 rgba(42,165,245,.14)}
html body .band{background:var(--holo-void)}

/* ---------- 3. material holográfico base ---------- */
/* kicker: mono azul tenue */
html body .kicker{color:var(--holo-kicker)}
html body .ct-copy .ficha .kicker,html body .ficha .kicker,html body .std-reg dt{color:var(--holo-muted)}
html body .hx-spec{color:var(--holo-muted)}

/* enlaces subrayados */
html body .link-u{text-decoration-color:var(--holo-dim);transition:color .25s var(--ease),text-decoration-color .25s var(--ease),text-shadow .25s var(--ease)}
html body .link-u:hover,html body a:hover>.link-u{color:var(--holo-hi);text-decoration-color:var(--holo-hi);text-shadow:0 0 14px rgba(42,165,245,.55)}
html body .wmeta .link-u{color:var(--text)}

/* botones: primario azul sólido con halo; secundarios en línea azul */
html body .btn-primary{background:var(--holo);color:#03101C;box-shadow:0 0 0 1px rgba(127,208,255,.0)}
html body .btn-primary:hover{background:#3DB0F7;box-shadow:0 0 0 1px var(--holo-hi),0 0 26px -2px rgba(42,165,245,.6),0 14px 30px -14px rgba(42,165,245,.7)}
html body .btn-ink,html body .btn-line{background:rgba(42,165,245,.04);color:var(--holo-text);box-shadow:inset 0 0 0 1px rgba(42,165,245,.6)}
html body .btn-ink:hover,html body .btn-line:hover{background:rgba(42,165,245,.12);color:#fff;box-shadow:inset 0 0 0 1px var(--holo-hi),0 0 22px -4px rgba(42,165,245,.55)}
html body .btn:active{box-shadow:none}

/* vidrio oscuro: paneles y tarjetas */
html body :is(.bt,.pb,.pact,.sp-need,.cl,.gets,.band-card,.form){
  background:var(--holo-panel);box-shadow:var(--holo-glass-edge),0 24px 48px -32px rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
html body .form{border-color:transparent}
html body :is(.bt,.pb,.cl,.pact,.sp-need):hover{box-shadow:inset 0 0 0 1px rgba(42,165,245,.42),0 0 28px -8px rgba(42,165,245,.4),0 24px 48px -32px rgba(0,0,0,.9)}
html body .cl:hover{box-shadow:inset 0 0 0 1px rgba(42,165,245,.42),0 0 28px -8px rgba(42,165,245,.4)}
/* mini-interfaces dentro de los paneles: un escalón más sólidas */
html body :is(.mk,.bt .auto,.sec-live,.chat-win-in,.ai-card){background:rgba(6,12,25,.92);box-shadow:inset 0 0 0 1px rgba(42,165,245,.22),0 20px 40px -28px rgba(0,0,0,.9)}
html body .bt.dark{background:var(--holo-panel-solid);color:var(--holo-text)}

/* textos secundarios que eran grises para fondo claro */
html body :is(.band-sub,.au-st,.au-node small,.ai-card small,.mk-num,.cw-st,.sp-step .n,.pact li::before){color:var(--holo-muted)}
html body .mk-h code,html body .cw-input{color:var(--holo-muted)}

/* separadores = líneas de luz */
html body :is(.checks li,.au-log,.mk-h,.cw-bar){border-color:var(--holo-line)}
html body .mk-r+.mk-r,html body .mk-o+.mk-o,html body .sl-row+.sl-row{border-top-color:rgba(42,165,245,.10)}
html body .flow i::before{background:var(--holo-dim)}
html body .bt-row .flow span::after{background:var(--holo-dim)}
html body .track li::before{background:rgba(42,165,245,.5);box-shadow:0 0 6px rgba(42,165,245,.45)}

/* ---------- 4. pantallas proyectadas (.frame-b / .frame-p) ---------- */
html body .frame-b.frame-b{background:var(--holo-panel-solid);
  box-shadow:0 0 0 1px rgba(42,165,245,.42),0 0 20px -4px rgba(42,165,245,.38),0 46px 50px -34px rgba(42,165,245,.42),0 30px 60px -30px rgba(0,0,0,.9)}
html body .fb-bar{background:rgba(9,17,33,.88);border-bottom:1px solid rgba(42,165,245,.2)}
html body .fb-bar i{background:rgba(127,208,255,.28)}
html body .fb-url{background:rgba(42,165,245,.07);box-shadow:inset 0 0 0 1px rgba(42,165,245,.16);color:#9FB0CB}
html body .fb-screen,html body .fp-screen{background:var(--holo-panel-solid)}
html body .frame-p.frame-p{background:#050A14;
  box-shadow:0 0 0 1.5px rgba(42,165,245,.5),0 0 18px -4px rgba(42,165,245,.45),0 40px 46px -30px rgba(42,165,245,.45),0 30px 50px -24px rgba(0,0,0,.9)}
html body .frame-p::after{background:#050A14}
/* hover sobre capturas enlazadas: la proyección se intensifica */
html body .case-shot:hover .frame-b.frame-b,html body .sp-store-shot:hover .frame-b.frame-b,html body .la-stage>.frame-b.frame-b:hover,html body .ant-stage>.frame-b.frame-b:hover{
  box-shadow:0 0 0 1px rgba(127,208,255,.7),0 0 30px -2px rgba(42,165,245,.55),0 56px 56px -36px rgba(42,165,245,.6),0 30px 60px -30px rgba(0,0,0,.9)}
/* cortina del "pintado" (motion system): del color de la pantalla oscura */
html.mo body .rev :is(.fb-screen,.fp-screen)::after{background:var(--holo-panel-solid)}

/* emisores: placas grises de casos, tiendas y mesa de Shopify */
html body :is(.case-shot,.sp-store-shot,.sp-stage){
  background-color:var(--holo-deep);
  background-image:radial-gradient(ellipse 70% 42% at 50% 100%,rgba(42,165,245,.20),transparent 70%),radial-gradient(rgba(127,208,255,.10) 1px,transparent 1.6px);
  background-size:100% 100%,16px 16px;
  box-shadow:inset 0 0 0 1px rgba(42,165,245,.18),inset 0 -1px 0 rgba(127,208,255,.45)}
html body .std-photo{background:var(--holo-deep);box-shadow:inset 0 0 0 1px rgba(42,165,245,.18)}

/* ---------- 5. piezas sueltas que eran claras ---------- */
/* banda del estudio */
html body .band-card{background:rgba(5,10,20,.94)}
html body .band-card p{color:var(--holo-text)}
/* foto de ambiente del estudio (fondo blanco): se invierte a "proyección" oscura conservando el azul.
   Nunca se aplica a capturas de proyectos. (#banda la trata ESCENAS A) */
html body .std-photo img{filter:invert(1) sepia(.35) hue-rotate(180deg) saturate(1.5) brightness(.9) contrast(1.08)}
/* boceto de proceso: tres capas proyectadas */
html body .proc-vis{background-color:var(--holo-deep);
  background-image:radial-gradient(ellipse 60% 40% at 50% 78%,rgba(42,165,245,.18),transparent 70%),radial-gradient(rgba(127,208,255,.10) 1px,transparent 1.6px);
  background-size:100% 100%,16px 16px;box-shadow:inset 0 0 0 1px rgba(42,165,245,.18)}
html body .pl{box-shadow:0 0 0 1px rgba(42,165,245,.45),0 0 4cqw -1cqw rgba(42,165,245,.4)}
html body .pl-1{background:rgba(8,16,32,.88)}
html body .pl-1 svg{filter:invert(1) hue-rotate(180deg) brightness(.9)}
html body .pl-2{background:rgba(42,165,245,.07)}
html body .pl-2 .b{border-color:rgba(127,208,255,.55);background:rgba(42,165,245,.06)}
html body .pl-3{background:rgba(10,19,36,.95)}
html body .pl-3 .b{background:rgba(42,165,245,.16)}
html body .pl-3 .bar{background:#050A14;border-bottom:1px solid rgba(42,165,245,.3)}
html body .pl-3 .bar i{background:rgba(127,208,255,.4)}
/* proceso */
html body .tn{background:var(--holo-panel-solid);color:var(--holo-hi);box-shadow:inset 0 0 0 1px rgba(127,208,255,.6),0 0 14px -2px rgba(42,165,245,.55)}
/* flujo de automatización (escritorio) */
html body .bt-row .flow span{background:rgba(6,12,25,.92);box-shadow:inset 0 0 0 1px rgba(42,165,245,.22)}
/* conversación de servicios */
html body .chat-demo .u{background:rgba(42,165,245,.18);color:var(--holo-text);box-shadow:inset 0 0 0 1px rgba(42,165,245,.4)}
html body .chat-demo .a,html body .chat-win .chat-demo .a{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(42,165,245,.14)}
html body .cw-input{box-shadow:inset 0 0 0 1px rgba(42,165,245,.28)}
html body .cw-input i{background:var(--holo)}
html body .ai-msgs .u{background:rgba(42,165,245,.18);color:var(--holo-text);box-shadow:inset 0 0 0 1px rgba(42,165,245,.4)}
html body .ai-msgs .a,html body .ai-dots{background:rgba(255,255,255,.05);color:var(--holo-text);box-shadow:inset 0 0 0 1px rgba(42,165,245,.14)}
html body .ai-card .bar,html body .mk-bt,html body .mk-prog,html body .sl-bar{background:rgba(127,208,255,.12)}
html body .ai-btn{background:rgba(42,165,245,.12);color:var(--holo-text);box-shadow:inset 0 0 0 1px rgba(42,165,245,.5)}
html body .ai-btn.ok{background:var(--holo);color:#03101C}
/* demo de automatización */
html body .au-rail{background:rgba(127,208,255,.14)}
html body .au-ic{background:var(--holo-panel-solid);color:var(--holo-muted);box-shadow:inset 0 0 0 1px rgba(42,165,245,.28)}
html body .au-node.act .au-ic{color:var(--holo-hi);box-shadow:inset 0 0 0 1.5px var(--holo),0 0 16px -2px rgba(42,165,245,.6)}
html body .au-node.done .au-ic{background:rgba(42,165,245,.18);color:var(--holo-hi);box-shadow:inset 0 0 0 1px rgba(127,208,255,.55)}
html body .au-ok{box-shadow:0 0 0 2px var(--holo-panel-solid)}
html body .auto.ok .au-st i{background:var(--holo-hi)}
html body .au-out{background:rgba(42,165,245,.08);box-shadow:inset 0 0 0 1px rgba(42,165,245,.16)}
html body .au-log li em{color:var(--holo-hi)}
html body .au-toast{background:var(--holo-panel-solid);color:#fff;box-shadow:inset 0 0 0 1px rgba(127,208,255,.45),0 0 26px -6px rgba(42,165,245,.5),0 20px 40px -16px rgba(0,0,0,.8)}
html body .au-tic{color:#03101C}
/* demo de seguridad */
html body .sl-lock{background:rgba(42,165,245,.08);color:var(--holo-muted)}
html body .sec-live.locked .sl-lock{background:rgba(42,165,245,.2);color:var(--holo-hi)}
html body .sec-live.locked .sl-enc{color:var(--holo-hi)}
html body .sl-otp i{box-shadow:inset 0 0 0 1px rgba(42,165,245,.3)}
html body .sec-live.verified .sl-otp i{background:rgba(42,165,245,.2);color:var(--holo-text);box-shadow:inset 0 0 0 1px rgba(127,208,255,.55)}
html body .sl-ok{color:var(--holo-hi)}
/* mini interfaces de soluciones */
html body .pb-do li{background:rgba(42,165,245,.06);box-shadow:inset 0 0 0 1px rgba(42,165,245,.22)}
html body .mk-src,html body .st-new,html body .mk-alert{background:rgba(42,165,245,.08);box-shadow:inset 0 0 0 1px rgba(42,165,245,.18)}
html body .st-q{background:rgba(42,165,245,.16);color:var(--holo-hi)}
html body :is(.st-ok,.mk-stamp){background:var(--holo);color:#03101C}
html body .mk-stamp{box-shadow:0 0 18px -4px rgba(42,165,245,.7)}
html body .mk-alert::before{background:var(--holo);color:#03101C}
html body .mk-b.low .mk-bt i{background:#5C6B86}
/* escritorio genérico (ya era oscuro): solo el botón del aviso */
html body .desk{background:#08101F;box-shadow:0 0 0 1px rgba(42,165,245,.3)}
html body .desk-toast em{background:var(--holo);color:#03101C}
/* notificación push dentro del teléfono: sigue siendo una pantalla clara (tokens originales) */
html body .push{--ink:#070C18}
/* Shopify: banda de compra, ticket */
html body .sp-buy{background:var(--holo-panel-solid);color:#fff;box-shadow:inset 0 0 0 1px rgba(42,165,245,.3),0 0 40px -16px rgba(42,165,245,.45)}
html body .ticket{background:rgba(6,12,25,.94);color:var(--holo-text);box-shadow:0 0 0 1px rgba(42,165,245,.42),0 0 22px -6px rgba(42,165,245,.45),0 26px 50px -22px rgba(0,0,0,.9)}
html body .ticket hr{border-top-color:rgba(127,208,255,.35)}
html body .ticket .ok{color:var(--holo-hi)}
/* clientes */
html body .cl b{color:var(--holo-text)}

/* ---------- 6. formulario de contacto ---------- */
html body .fg label{color:#D5DEEC}
html body :is(.fg input,.fg select,.fg textarea){background-color:rgba(5,10,20,.85);border-color:rgba(42,165,245,.38);color:var(--holo-text);transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
html body :is(.fg input,.fg select,.fg textarea):hover{border-color:rgba(127,208,255,.6)}
html body :is(.fg input,.fg select,.fg textarea):focus{outline:2px solid var(--holo);outline-offset:2px;border-color:var(--holo-hi);box-shadow:0 0 0 4px rgba(42,165,245,.14),0 0 22px -4px rgba(42,165,245,.55)}
html body .fg select option{background:var(--holo-panel-solid)}
html body .form-ok{background:rgba(42,165,245,.08);border-color:rgba(42,165,245,.3)}

/* ---------- 7. nav, menú, subir, pie ---------- */
html body .nav.scrolled{background:rgba(3,6,13,.84);border-bottom-color:rgba(42,165,245,.2);box-shadow:0 1px 0 rgba(42,165,245,.08),0 10px 30px -18px rgba(42,165,245,.35)}
html body .nav-links a.lnk:hover{background:rgba(42,165,245,.1);color:#fff}
html body .nav-links a.lnk.on{color:var(--holo-hi)}
html body .nav-ind{background:var(--holo-hi);box-shadow:0 0 8px rgba(42,165,245,.8)}
html body .lang{border-color:rgba(42,165,245,.22)}
html body .lang button.on{background:rgba(42,165,245,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(42,165,245,.35)}
html body .burger{border-color:rgba(42,165,245,.35)}
html body .burger span{background:var(--holo-text)}
@media(max-width:960px){
  html body .nav-links.open{background:#050A15;border-color:rgba(42,165,245,.3);box-shadow:0 0 30px -10px rgba(42,165,245,.45),0 30px 60px -20px rgba(0,0,0,.9)}
  html body .nav-links.open a.lnk{min-height:44px;display:flex;align-items:center}
  html body .lang{box-shadow:inset 0 0 0 1px rgba(42,165,245,.22)}
}
html body #toTop{background:rgba(6,11,22,.88);border-color:rgba(42,165,245,.38);color:var(--holo-hi);box-shadow:0 0 18px -6px rgba(42,165,245,.5)}
html body #toTop:hover{border-color:var(--holo-hi);color:#fff;box-shadow:0 0 24px -4px rgba(42,165,245,.7)}
html body #scrollbar{background:var(--holo-hi);box-shadow:0 0 8px rgba(42,165,245,.9)}
html body .foot{border-top-color:rgba(42,165,245,.2);box-shadow:inset 0 1px 0 rgba(42,165,245,.1)}
html body .foot ul a:hover{color:var(--holo-hi)}
html body .foot-bottom{border-top-color:var(--holo-line)}

/* ---------- 8. selección, scrollbar, foco ---------- */
html body ::selection{background:rgba(42,165,245,.42);color:#fff}
html::-webkit-scrollbar{width:10px;height:10px}
html::-webkit-scrollbar-track{background:var(--holo-void)}
html::-webkit-scrollbar-thumb{background:rgba(42,165,245,.3);border-radius:6px;border:2px solid var(--holo-void)}
html::-webkit-scrollbar-thumb:hover{background:rgba(42,165,245,.55)}
html body :focus-visible,html body .sec-light :focus-visible,html body .bt.dark :focus-visible{outline:2px solid var(--holo-hi);outline-offset:3px}

/* ---------- 9. capa de cine: líneas de escaneo + viñeta (estática, sin coste) ---------- */
html body::after{content:"";position:fixed;inset:0;z-index:99;pointer-events:none;
  background:
    repeating-linear-gradient(to bottom,rgba(127,208,255,.022) 0 1px,transparent 1px 3px),
    radial-gradient(ellipse 120% 90% at 50% 45%,transparent 60%,rgba(0,0,0,.38) 100%)}
@media print{html body::after{display:none}}
@media(max-width:600px){html body::after{background:radial-gradient(ellipse 140% 90% at 50% 45%,transparent 62%,rgba(0,0,0,.32) 100%)}}

/* ---------- MÓVIL-1 · teléfono horizontal (poca altura): nav compacta desde el principio (92 → 68 px) ---------- */
@media (orientation:landscape) and (max-height:540px) and (max-width:1279px){
  html body .nav-inner{padding-top:var(--s3,12px);padding-bottom:var(--s3,12px)}
}

/* ---------- MÓVIL-1 · menú móvil: velo bajo el panel (antes el panel caía pegado al botón del hero y parecía parte del menú) ---------- */
@media(max-width:1279px){
  html body .nav:has(.nav-links.open)::after{content:"";position:absolute;left:0;right:0;top:100%;height:100vh;height:100dvh;z-index:-1;
    background:rgba(3,6,13,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  html body .nav:has(.nav-links.open){background:rgba(3,6,13,.78)}
}