/* =========================================================
   SurteGiga · Versión clara "Holo"
   Paleta: hielo + tinta + acentos holográficos (aqua, azul, violeta, magenta)
   ========================================================= */
:root{
  --bg:#F4F6FB; --bg-2:#EAEFF8; --white:#FFFFFF;
  --ink:#0A0F1F; --ink-2:#2B3550; --muted:#56617B; --night:#0A0F1F;
  --line:rgba(10,15,31,.09); --line-2:rgba(10,15,31,.16);
  --surface:#FFFFFF; --surface-2:#F7F8FC; --glass:rgba(255,255,255,.74); --glass-strong:rgba(255,255,255,.86);
  --inv-bg:#0A0F1F; --inv-fg:#FFFFFF;
  --violet:#6A3BFF; --violet-hover:#5426E6; --violet-soft:#EFEAFF; --violet-ink:#6A3BFF;
  --aqua:#00C2B2; --aqua-ink:#00776D; --blue:#2F6BFF; --sky:#00A3FF; --deep:#4B1FD1;
  /* Gradiente cibernético: solo tonos fríos (aqua → cielo → azul eléctrico → violeta profundo) */
  --holo:linear-gradient(115deg,#00D4C2 0%,#00A3FF 34%,#2F6BFF 64%,#5B2EFF 100%);
  --panel-grad:linear-gradient(160deg,#FFFFFF 0%,#EEF0FF 45%,#E9FBF8 100%);
  --plate-grad:linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.55));
  --net-dot:47,107,255; --net-line:106,59,255; --net-alpha:.22;
  --st-ok:#15803D; --st-err:#B91C1C; --st-warn:#B45309; --st-info:#0369A1; --st-muted:#56617B;
  --radius:18px; --radius-btn:10px;
  --shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px var(--line), 0 24px 60px -28px rgba(30,41,90,.28);
}
/* ---------- Modo Táctico (oscuro) ---------- */
:root[data-theme="tactico"]{
  color-scheme:dark;
  --bg:#060A16; --bg-2:#111A33; --ink:#EEF2FF; --ink-2:#C9D2E6; --muted:#9AA6C2;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.18);
  --surface:#0D1428; --surface-2:#111A33; --glass:rgba(13,20,40,.72); --glass-strong:rgba(13,20,40,.86);
  --inv-bg:#EEF2FF; --inv-fg:#060A16;
  --violet-soft:rgba(106,59,255,.2); --violet-ink:#A98CFF; --aqua-ink:#3EE6D6;
  --panel-grad:linear-gradient(160deg,#0D1428 0%,#160F38 45%,#06231F 100%);
  --plate-grad:linear-gradient(135deg, rgba(36,48,92,.92), rgba(20,28,56,.6));
  --net-dot:0,212,194; --net-line:47,107,255; --net-alpha:.35;
  --st-ok:#4ADE80; --st-err:#F87171; --st-warn:#FBBF24; --st-info:#7DD3FC; --st-muted:#9AA6C2;
  --shadow:0 0 0 1px var(--line), 0 24px 60px -28px rgba(0,0,0,.7);
}
html{ scroll-behavior:smooth; scroll-padding-top:92px; }
body{ background:var(--bg); color:var(--ink-2); font-family:Inter,sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
h1,h2,h3,.font-display{ font-family:"Space Grotesk",sans-serif; letter-spacing:-.02em; }
h1,h2,h3{ color:var(--ink); }
h1{ line-height:1.08; } h2{ line-height:1.15; }
.mono{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }

/* Fondo: puntos + auroras */
.holo-bg{ position:relative; isolation:isolate;
  background-image:radial-gradient(rgba(10,15,31,.07) 1px, transparent 1.3px); background-size:22px 22px; }
.aurora{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.aurora i{ position:absolute; width:60vw; height:60vw; border-radius:50%; opacity:.55; animation:drift 26s ease-in-out infinite alternate; will-change:transform; }
/* Degradados radiales en lugar de filter:blur: mismo efecto, mucho menos costo de GPU */
.aurora i:nth-child(1){ background:radial-gradient(circle, rgba(140,240,229,.9) 0%, rgba(140,240,229,0) 65%); top:-22vw; left:-18vw; }
.aurora i:nth-child(2){ background:radial-gradient(circle, rgba(183,201,255,.9) 0%, rgba(183,201,255,0) 65%); top:4vw; right:-22vw; animation-delay:-8s; }
.aurora i:nth-child(3){ background:radial-gradient(circle, rgba(222,210,255,.9) 0%, rgba(222,210,255,0) 65%); bottom:-26vw; left:18vw; animation-delay:-16s; }
@keyframes drift{ to{ transform:translate3d(6vw,4vw,0) scale(1.12); } }

.holo-text{ background:var(--holo); -webkit-background-clip:text; background-clip:text; color:transparent; }
.holo-line{ height:1px; background:linear-gradient(90deg,transparent,rgba(106,59,255,.45),rgba(0,194,178,.45),transparent); }

/* ---------- Botones ---------- */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:48px; padding:0 22px;
  border-radius:var(--radius-btn); font-family:Inter,sans-serif; font-weight:600; font-size:15px; line-height:1.2; white-space:nowrap; text-align:center;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; }
.btn svg{ transition:transform .18s ease; } .btn:hover svg{ transform:translateX(3px); }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--violet); outline-offset:3px; border-radius:var(--radius-btn); }
.btn-neon{ background:var(--violet); color:#fff; box-shadow:0 12px 30px -12px rgba(106,59,255,.7), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-neon:hover{ background:var(--violet-hover); transform:translateY(-1px); box-shadow:0 16px 36px -12px rgba(106,59,255,.8), 0 0 0 4px rgba(106,59,255,.12); }
.btn-primary{ background:var(--inv-bg); color:var(--inv-fg); box-shadow:0 12px 30px -14px rgba(10,15,31,.6); }
.btn-primary::after{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:var(--holo); opacity:0; transition:opacity .18s;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.btn-primary:hover{ background:var(--inv-bg); filter:brightness(1.25); transform:translateY(-1px); } .btn-primary:hover::after{ opacity:1; }
.btn-outline{ background:var(--glass-strong); color:var(--ink); border:1px solid var(--line-2); }
.btn-outline:hover{ border-color:var(--violet-ink); color:var(--violet-ink); transform:translateY(-1px); box-shadow:0 10px 24px -14px rgba(106,59,255,.55); }
.btn-sm{ min-height:44px; padding:0 18px; font-size:14px; }

/* ---------- Superficies ---------- */
.glass{ background:var(--glass); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-radius:var(--radius); box-shadow:var(--shadow); }
.hud{ position:relative; }
.hud::before, .hud::after{ content:""; position:absolute; width:16px; height:16px; pointer-events:none; transition:all .25s ease; }
.hud::before{ top:10px; left:10px; border-top:2px solid var(--violet); border-left:2px solid var(--violet); border-top-left-radius:4px; }
.hud::after{ bottom:10px; right:10px; border-bottom:2px solid var(--aqua); border-right:2px solid var(--aqua); border-bottom-right-radius:4px; }
.hud:hover::before{ top:6px; left:6px; } .hud:hover::after{ bottom:6px; right:6px; }
.card-interactive{ transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.card-interactive:hover, .card-interactive:focus-within{ box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(106,59,255,.28), 0 30px 70px -30px rgba(106,59,255,.45); }
[data-tilt]{ transform-style:preserve-3d; will-change:transform; }

.chip{ display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .85rem; border-radius:999px; background:var(--glass-strong);
  box-shadow:0 0 0 1px var(--line); font-size:13px; color:var(--ink-2); }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--aqua); box-shadow:0 0 0 4px rgba(0,194,178,.18); }
.eyebrow{ font-family:"JetBrains Mono",ui-monospace,monospace; font-weight:500; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--violet-ink); }
.icon{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.icon-holo{ display:grid; place-items:center; width:52px; height:52px; border-radius:14px; color:#fff; background:var(--holo);
  box-shadow:0 12px 26px -12px rgba(106,59,255,.7), inset 0 1px 0 rgba(255,255,255,.35); }
.idx{ font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--muted); letter-spacing:.1em; }

/* ---------- Navegación ---------- */
.nav-link{ display:inline-flex; align-items:center; gap:.3rem; padding:.55rem .8rem; border-radius:10px; font-weight:500; font-size:15px; color:var(--ink-2); transition:color .15s, background-color .15s; }
.nav-link:hover, .nav-item:focus-within > .nav-link{ color:var(--ink); background:rgba(106,59,255,.07); }
.nav-item::after{ content:""; position:absolute; left:0; right:0; top:100%; height:12px; }
.dropdown{ position:absolute; top:calc(100% + 10px); left:-8px; min-width:260px; padding:.5rem; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .16s, transform .16s, visibility .16s; z-index:60; }
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown{ opacity:1; visibility:visible; transform:none; }
.dropdown a{ display:flex; align-items:center; gap:.6rem; padding:.55rem .75rem; border-radius:10px; font-size:14px; color:var(--ink-2); }
.dropdown a:hover{ background:var(--violet-soft); color:var(--violet-ink); }
.dropdown .dot{ width:6px; height:6px; box-shadow:none; }

/* ---------- Hero 3D ---------- */
.stage{ position:relative; width:100%; aspect-ratio:1/1; max-width:640px; margin-inline:auto; }
.stage canvas{ position:absolute; inset:0; width:100%; height:100%; cursor:grab; touch-action:pan-y;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 72%, transparent 100%); mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 72%, transparent 100%); }
.stage-fallback{ position:absolute; left:50%; top:50%; width:34%; transform:translate(-50%,-50%); filter:drop-shadow(0 24px 40px rgba(106,59,255,.35)); }
.stage.is-3d .stage-fallback{ display:none; }
.sat-label{ position:absolute; left:0; top:0; display:none; padding:.3rem .6rem; border-radius:8px; white-space:nowrap; pointer-events:none;
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.12em; color:var(--ink); background:var(--glass-strong);
  box-shadow:0 0 0 1px var(--line), 0 8px 20px -10px rgba(30,41,90,.35); transition:opacity .25s; }
.sat-label::before{ content:""; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:var(--c,#6A3BFF); vertical-align:middle; }
.stage.is-3d .sat-label{ display:block; }
.readout{ position:absolute; font-family:"JetBrains Mono",monospace; font-size:11px; line-height:1.5; color:var(--muted); pointer-events:none; }
.readout b{ color:var(--ink); font-weight:600; }

/* Cinta de capacidades */
.ticker{ overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.ticker ul{ display:flex; gap:2.5rem; width:max-content; animation:ticker 38s linear infinite; }
.ticker li{ display:flex; align-items:center; gap:2.5rem; font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:20px; color:var(--ink); white-space:nowrap; }
.ticker li::after{ content:"✦"; font-size:14px; background:var(--holo); -webkit-background-clip:text; background-clip:text; color:transparent; }
@keyframes ticker{ to{ transform:translateX(-50%); } }

/* ---------- Divisiones (bento) ---------- */
.bento-card{ display:flex; flex-direction:column; padding:26px; min-height:250px; overflow:hidden; }
.bento-card.bento-wide{ min-height:0; }
.bento-card .glow{ position:absolute; right:-90px; bottom:-90px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle, rgba(47,107,255,.5), rgba(0,212,194,.25) 40%, transparent 70%); opacity:.35; transition:opacity .3s; pointer-events:none; }
.bento-card:hover .glow{ opacity:.7; }
.tag{ display:inline-flex; padding:.25rem .6rem; border-radius:999px; font-size:12px; font-weight:500; color:var(--ink-2); background:var(--bg-2); }

/* ---------- Cyber-Shield ---------- */
.shield-panel{ background:var(--panel-grad); }
.pack-num{ display:grid; place-items:center; width:28px; height:28px; flex-shrink:0; border-radius:8px; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:14px; color:#fff; background:var(--violet); }
.pain-card{ display:flex; flex-direction:column; padding:20px; border-radius:14px; background:var(--surface); box-shadow:0 0 0 1px var(--line); transition:box-shadow .2s, transform .2s; }
.pain-card:hover, .pain-card:focus-within{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(106,59,255,.35), 0 20px 40px -24px rgba(106,59,255,.5); }
.pain-label{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--violet-ink); }
.pain-benefit{ margin-top:12px; padding-left:12px; border-left:2px solid var(--aqua); font-size:14px; color:var(--ink); }
.tier-link{ margin-top:auto; padding-top:16px; font-size:14px; color:var(--violet-ink); text-underline-offset:4px; }
.tier-link strong{ font-weight:700; } .tier-link:hover{ text-decoration:underline; }

/* Pila isométrica de capas */
.stack{ position:relative; height:400px; margin-top:28px; perspective:1400px; }
.stack-inner{ position:absolute; left:50%; top:66%; width:210px; height:210px; transform-style:preserve-3d; transform:translate(-50%,-50%) rotateX(58deg) rotateZ(-42deg); }
.plate{ position:absolute; inset:0; border-radius:26px; transform:translateZ(calc(var(--i) * 54px)); transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .3s, opacity .3s;
  background:var(--plate-grad); box-shadow:0 0 0 1.5px rgba(106,59,255,.25), 0 30px 40px -20px rgba(30,41,90,.35);
}
.plate::before{ content:""; position:absolute; inset:14px; border-radius:16px; border:1.5px dashed rgba(47,107,255,.35); }
.plate::after{ content:attr(data-label); position:absolute; left:18px; bottom:16px; font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; color:var(--ink-2); }
.plate.is-active{ transform:translateZ(calc(var(--i) * 54px + 34px)); background:var(--holo); box-shadow:0 0 0 1.5px rgba(255,255,255,.8), 0 40px 60px -20px rgba(106,59,255,.55); }
.plate.is-active::after{ color:#fff; } .plate.is-active::before{ border-color:rgba(255,255,255,.7); }
.layer-btn{ display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; border-radius:12px; text-align:left; color:var(--ink-2); transition:background-color .15s, color .15s, box-shadow .15s; }
.layer-btn:hover{ background:rgba(106,59,255,.06); }
.layer-btn[aria-pressed="true"]{ background:var(--surface); color:var(--ink); box-shadow:0 0 0 1px rgba(106,59,255,.35), 0 12px 24px -16px rgba(106,59,255,.6); }
.layer-btn .n{ font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--violet-ink); }
.layer-card{ transition:box-shadow .3s, transform .3s; }
.layer-card.is-active{ transform:translateY(-4px); box-shadow:0 1px 0 #fff inset, 0 0 0 2px rgba(106,59,255,.55), 0 30px 60px -30px rgba(106,59,255,.55); }
.check-list li{ display:flex; gap:.5rem; } .check-list li::before{ content:"▹"; color:var(--violet-ink); }

.phase{ padding:16px; border-radius:14px; background:var(--surface); box-shadow:0 0 0 1px var(--line); }
.phase-title{ display:flex; align-items:center; gap:.5rem; font-weight:600; color:var(--ink); font-size:15px; }
.phase-title span{ font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--inv-fg); background:var(--inv-bg); border-radius:6px; padding:1px 6px; }
.phase ul{ margin-top:10px; display:grid; gap:6px; font-size:13px; color:var(--muted); }
.phase li::before{ content:"▹ "; color:var(--aqua-ink); }

/* ---------- Comparador ---------- */
.quiz-q{ font-weight:600; color:var(--ink); font-size:15px; margin-bottom:10px; }
.quiz-opts{ display:flex; flex-wrap:wrap; gap:8px; }
.opt{ position:relative; } .opt input{ position:absolute; opacity:0; width:1px; height:1px; }
.opt span{ display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:10px; cursor:pointer; font-size:14px; font-weight:500;
  color:var(--ink-2); background:var(--surface); box-shadow:0 0 0 1px var(--line-2); transition:box-shadow .15s, background-color .15s, color .15s; }
.opt span:hover{ box-shadow:0 0 0 1px var(--violet); }
.opt input:checked + span{ color:var(--inv-fg); background:var(--inv-bg); box-shadow:0 0 0 1px var(--inv-bg), 0 10px 20px -12px rgba(10,15,31,.6); font-weight:600; }
.opt input:focus-visible + span{ outline:3px solid var(--violet); outline-offset:3px; }

.result-card{ position:relative; padding:26px; border-radius:var(--radius); background:var(--surface); isolation:isolate; box-shadow:0 30px 60px -34px rgba(106,59,255,.55); }
.result-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; background:var(--holo); z-index:-1;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.result-card .tier-name{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:30px; line-height:1.1; color:var(--ink); }
.result-card .badge{ display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; color:#fff; background:var(--violet); }
.result-card .badge.alt{ color:var(--ink); background:var(--bg-2); }
.result-card ul.reasons{ margin-top:12px; display:grid; gap:6px; font-size:14px; color:var(--ink-2); }
.result-card ul.reasons li::before{ content:"✓ "; color:var(--aqua-ink); font-weight:700; }

.matrix-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.eset-matrix{ width:100%; min-width:760px; border-collapse:separate; border-spacing:0; font-size:14px; }
.eset-matrix th, .eset-matrix td{ padding:10px 8px; text-align:center; border-bottom:1px solid var(--line); transition:background-color .2s; }
.eset-matrix thead th{ background:var(--surface-2); padding:0; vertical-align:bottom; }
.eset-matrix thead th:first-child, .eset-matrix tbody th{ position:sticky; left:0; z-index:2; text-align:left; background:var(--surface); }
.eset-matrix thead th:first-child{ z-index:3; padding:10px 12px; font-size:12px; color:var(--muted); font-weight:500; background:var(--surface-2); }
.eset-matrix tbody th{ font-weight:500; color:var(--ink-2); padding-left:12px; min-width:190px; }
.eset-matrix tbody tr.group th{ padding-top:14px; font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--violet-ink); }
.eset-matrix .tier-btn{ width:100%; min-height:56px; padding:8px 6px; font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:14px; line-height:1.15; color:var(--ink); border-bottom:3px solid transparent; }
.eset-matrix .tier-btn small{ display:block; font-family:Inter,sans-serif; font-weight:500; font-size:11px; color:var(--muted); margin-top:2px; }
.eset-matrix .tier-btn:hover{ background:var(--violet-soft); }
.eset-matrix .tier-btn[aria-pressed="true"]{ border-bottom-color:var(--violet-ink); background:var(--violet-soft); }
.eset-matrix .yes{ color:var(--violet-ink); font-weight:700; }
.eset-matrix .txt{ color:var(--violet-ink); font-size:12px; font-weight:700; }
.eset-matrix .no{ color:#B4BCCD; }
.eset-matrix .is-selected{ background:rgba(106,59,255,.06); }
.eset-matrix .is-rec .tier-btn small{ color:var(--violet-ink); font-weight:600; }
@media (max-width:640px){ .eset-matrix{ font-size:13px; min-width:680px; } .eset-matrix tbody th{ min-width:150px; max-width:150px; } }

/* ---------- Demo ---------- */
.timeline{ position:relative; display:grid; gap:14px; padding-left:28px; }
.timeline::before{ content:""; position:absolute; left:9px; top:8px; bottom:8px; width:2px; border-radius:2px; background:var(--holo); }
.tl-item{ position:relative; padding:16px 18px; }
.tl-item::before{ content:""; position:absolute; left:-25px; top:22px; width:14px; height:14px; border-radius:50%; background:var(--surface); box-shadow:0 0 0 3px var(--violet); }
.demo-meta{ padding:12px; border-radius:12px; background:var(--surface); box-shadow:0 0 0 1px var(--line); }
.demo-meta dt{ font-size:12px; color:var(--muted); } .demo-meta dd{ margin-top:2px; font-weight:600; color:var(--ink); }
.live-dot{ background:#E11D48; box-shadow:0 0 0 4px rgba(225,29,72,.18); animation:pulse-dot 1.6s ease-in-out infinite; }
@keyframes pulse-dot{ 50%{ opacity:.35; } }

/* ---------- Valor / proceso ---------- */
.big-val{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:34px; line-height:1; }
.stepper{ position:relative; display:grid; gap:16px; }
@media (min-width:1024px){ .stepper{ grid-template-columns:repeat(6,1fr); }
  .stepper::before{ content:""; position:absolute; left:4%; right:4%; top:22px; height:2px; background:var(--holo); opacity:.6; } }
.step-node{ position:relative; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--ink);
  font-family:"JetBrains Mono",monospace; font-weight:600; font-size:13px; box-shadow:0 0 0 2px var(--violet), 0 10px 20px -10px rgba(106,59,255,.6); }

/* ---------- Formulario ---------- */
.field{ width:100%; min-height:48px; padding:.7rem .9rem; border-radius:10px; background:var(--surface); color:var(--ink); border:1px solid var(--line-2); font-size:15px; transition:border-color .15s, box-shadow .15s; }
.field::placeholder{ color:#8790A6; }
.field:hover{ border-color:rgba(106,59,255,.5); }
.field:focus{ border-color:var(--violet-ink); box-shadow:0 0 0 4px rgba(106,59,255,.15); outline:none; }
.field[aria-invalid="true"]{ border-color:#DC2626; }
select.field{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236A3BFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .8rem center; padding-right:2.5rem; }
label.lbl{ display:block; font-size:14px; font-weight:500; margin-bottom:.4rem; color:var(--ink); }

/* Revelado */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.skip{ position:absolute; left:-9999px; top:12px; z-index:100; } .skip:focus{ left:12px; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

/* =========================================================
   Secciones por división
   ========================================================= */
.more-link{ display:inline-flex; margin-top:14px; font-size:14px; font-weight:600; color:var(--violet-ink); text-underline-offset:4px; }
.more-link:hover{ text-decoration:underline; }

.div-nav{ position:sticky; top:88px; z-index:40; display:flex; justify-content:center; padding:10px 12px 0; pointer-events:none; }
.div-nav ul{ display:flex; gap:4px; padding:6px; max-width:100%; overflow-x:auto; scrollbar-width:none; pointer-events:auto; border-radius:999px; }
.div-nav ul::-webkit-scrollbar{ display:none; }
.div-nav a{ display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 14px; border-radius:999px; font-size:14px; font-weight:600; color:var(--ink-2); white-space:nowrap; transition:background-color .15s, color .15s; }
.div-nav a .mono{ font-size:11px; color:var(--muted); }
.div-nav a:hover{ background:var(--violet-soft); color:var(--violet-ink); }
.div-nav a[aria-current="true"]{ background:var(--inv-bg); color:var(--inv-fg); }
.div-nav a[aria-current="true"] .mono{ color:var(--aqua); }

.division{ position:relative; scroll-margin-top:150px; }
.division::before{ content:""; position:absolute; left:50%; top:0; width:min(1240px,92%); height:1px; transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.45; }
.division .eyebrow{ color:var(--accent-ink, var(--accent)); }
.svc-card{ display:flex; gap:14px; align-items:flex-start; padding:16px; border-radius:14px; background:var(--glass-strong); box-shadow:0 0 0 1px var(--line);
  transition:box-shadow .2s, transform .2s; }
.svc-card:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 18px 36px -22px color-mix(in srgb, var(--accent) 70%, transparent); }
.svc-ic{ display:grid; place-items:center; flex-shrink:0; width:42px; height:42px; border-radius:12px; color:#fff;
  background:linear-gradient(135deg, var(--accent), var(--violet)); box-shadow:0 10px 20px -12px var(--accent); }
.svc-ic .icon{ width:22px; height:22px; }
.how-steps{ display:grid; gap:10px; counter-reset:s; }
@media (min-width:640px){ .how-steps{ grid-template-columns:repeat(4,1fr); } }
.how-steps li{ position:relative; padding:12px; border-radius:12px; background:var(--surface); box-shadow:0 0 0 1px var(--line); font-size:13px; font-weight:500; color:var(--ink); }
.how-steps li .mono{ display:block; margin-bottom:4px; font-size:11px; color:var(--accent-ink, var(--accent)); }

.price-box{ display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border-radius:14px; background:var(--surface); isolation:isolate; position:relative; }
.price-box::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; background:var(--holo); z-index:-1;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.price-ic{ display:grid; place-items:center; flex-shrink:0; width:38px; height:38px; border-radius:10px; color:#fff; background:var(--holo); }
.price-ic .icon{ width:20px; height:20px; }
.price-strip{ display:inline-flex; align-items:center; gap:12px; padding:10px 16px 10px 10px; border-radius:14px; font-size:14px; color:var(--ink-2);
  background:var(--glass-strong); box-shadow:0 0 0 1px var(--line), 0 14px 30px -22px rgba(106,59,255,.7); transition:box-shadow .2s, transform .2s; }
.price-strip:hover{ transform:translateY(-1px); box-shadow:0 0 0 1px rgba(106,59,255,.4), 0 18px 36px -20px rgba(106,59,255,.7); }

/* =========================================================
   Galería por división
   ========================================================= */
.dropzone{ display:flex; align-items:center; gap:12px; min-height:56px; padding:10px 16px 10px 10px; border-radius:14px; cursor:pointer;
  background:var(--surface); border:1.5px dashed rgba(106,59,255,.45); transition:border-color .15s, background-color .15s, box-shadow .15s; }
.dropzone:hover, .dropzone.is-over{ border-color:var(--violet-ink); background:var(--violet-soft); }
.dropzone:focus-within{ outline:3px solid var(--violet); outline-offset:3px; }
.dropzone-wide{ width:100%; }
.dz-ic{ display:grid; place-items:center; flex-shrink:0; width:38px; height:38px; border-radius:10px; color:var(--violet-ink); background:var(--violet-soft); }
.dz-ic .icon{ width:20px; height:20px; }
body[data-gallery-edit="false"] [data-edit-only]{ display:none !important; }

.g-grid{ display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:768px){ .g-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.g-item{ position:relative; border-radius:14px; overflow:hidden; background:var(--surface); box-shadow:0 0 0 1px var(--line); }
.g-open{ display:block; width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--bg-2); cursor:zoom-in; border-radius:0; }
.g-open img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.g-item:hover .g-open img{ transform:scale(1.04); }
.g-cap{ display:block; width:100%; padding:8px 10px; font-size:13px; color:var(--ink-2); background:var(--surface); border:0; border-top:1px solid var(--line); }
.g-cap:focus{ outline:2px solid var(--violet); outline-offset:-2px; }
input.g-cap::placeholder{ color:#8790A6; }
.g-del{ position:absolute; top:8px; right:8px; display:grid; place-items:center; width:34px; height:34px; border-radius:10px; font-size:16px;
  color:#fff; background:rgba(10,15,31,.72); opacity:0; transition:opacity .15s, background-color .15s; }
.g-item:hover .g-del, .g-del:focus-visible{ opacity:1; }
@media (hover:none){ .g-del{ opacity:1; } }
.g-del:hover{ background:#DC2626; }
.g-badge{ position:absolute; top:8px; left:8px; padding:2px 8px; border-radius:999px; font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.08em; color:var(--ink); background:rgba(255,255,255,.9); }
.g-empty{ display:grid; place-items:center; gap:8px; aspect-ratio:4/3; padding:12px; border-radius:14px; text-align:center; font-size:13px; color:var(--muted);
  background:repeating-linear-gradient(135deg, rgba(106,59,255,.04) 0 10px, transparent 10px 20px), var(--surface); box-shadow:inset 0 0 0 1.5px rgba(106,59,255,.18); }
.g-empty .icon{ color:var(--accent,#6A3BFF); }

.file-chip{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; border-radius:10px; font-size:13px; background:var(--surface); box-shadow:0 0 0 1px var(--line); color:var(--ink-2); }
.file-chip button{ min-width:32px; min-height:32px; border-radius:8px; color:var(--muted); }
.file-chip button:hover{ color:#DC2626; background:#FEF2F2; }

/* Visor */
.lightbox{ width:min(1100px,94vw); max-height:92vh; padding:0; border:0; border-radius:18px; background:#0A0F1F; color:#fff; overflow:visible; }
.lightbox::backdrop{ background:rgba(10,15,31,.78); backdrop-filter:blur(4px); }
.lightbox figure{ margin:0; }
.lightbox img{ display:block; width:100%; max-height:80vh; object-fit:contain; border-radius:18px 18px 0 0; background:#05080F; }
.lightbox figcaption{ padding:12px 18px; font-size:14px; color:#C9D2E6; }
.lb-btn{ position:absolute; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; font-size:24px; color:var(--ink); background:var(--surface); box-shadow:0 10px 24px -10px rgba(0,0,0,.6); }
.lb-btn:hover{ background:var(--violet-soft); color:var(--violet-ink); }
.lb-close{ top:-14px; right:-14px; font-size:18px; }
.lb-prev{ left:-14px; top:45%; } .lb-next{ right:-14px; top:45%; }
@media (max-width:640px){ .lb-prev{ left:6px; } .lb-next{ right:6px; } .lb-close{ top:6px; right:6px; } }
/* En móvil, la introducción de cada división va primero aunque en escritorio esté a la derecha */
.div-rev .div-intro{ order:-1; }
@media (min-width:1024px){ .div-rev .div-intro{ order:0; } }

/* =========================================================
   Futurista: hero oscuro, biselados, log, glitch, telemetría,
   marcas, arranque, fondo de red y Modo Táctico
   ========================================================= */
body{ background-color:var(--bg); color:var(--ink-2); transition:background-color .3s ease, color .3s ease; }
.holo-bg{ background-image:none; }
#netBg{ position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }

/* Logotipo según tema */
.logo-on-dark{ display:none; }
:root[data-theme="tactico"] .logo-on-light{ display:none; }
:root[data-theme="tactico"] .logo-on-dark{ display:block; }

/* ---------- Hero oscuro con rejilla iluminada desde abajo ---------- */
.hero-dark{ position:relative; margin-top:-92px; padding-top:92px; color:#C9D2E6; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(ellipse 70% 55% at 50% 112%, rgba(47,107,255,.45), transparent 70%),
    radial-gradient(ellipse 40% 35% at 85% 30%, rgba(91,46,255,.22), transparent 70%),
    radial-gradient(ellipse 35% 30% at 10% 20%, rgba(0,212,194,.14), transparent 70%),
    #070B18; }
.hero-dark::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(120,160,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(120,160,255,.09) 1px, transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.55) 45%, transparent 95%); mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.55) 45%, transparent 95%); }
.hero-dark::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--holo); opacity:.7; }
.hero-dark h1{ color:#fff; }
.hero-dark .text-ink{ color:#fff; } .hero-dark .text-tech{ color:#C9D2E6; } .hero-dark .text-muted{ color:#9AA6C2; }
.hero-dark .idx{ color:#7F8DAE; }
.hero-dark .chip{ background:rgba(255,255,255,.06); box-shadow:0 0 0 1px rgba(255,255,255,.12); color:#DCE5F5; }
.hero-dark .glass{ background:rgba(255,255,255,.05); box-shadow:0 0 0 1px rgba(255,255,255,.1); }
.hero-dark .btn-outline{ background:rgba(255,255,255,.04); color:#fff; border-color:rgba(255,255,255,.28); }
.hero-dark .btn-outline:hover{ border-color:var(--aqua); color:#fff; box-shadow:0 0 24px -6px rgba(0,212,194,.6); }
.hero-dark .price-strip{ background:rgba(255,255,255,.05); color:#C9D2E6; box-shadow:0 0 0 1px rgba(255,255,255,.12); }
.hero-dark .price-strip .text-ink{ color:#fff; }
.hero-dark .sat-label{ color:#EAF0FF; background:rgba(7,11,24,.78); box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 0 18px -4px var(--c,#6A3BFF); }
.hero-dark .readout{ color:#7F8DAE; } .hero-dark .readout b{ color:#EAF0FF; }

/* Cinta como registro de servidor */
.hero-dark .ticker{ background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.08); }
.hero-dark .ticker li{ color:#EAF0FF; }
.ticker li.log{ font-family:"JetBrains Mono",monospace; font-weight:500; font-size:13px; letter-spacing:.06em; color:#7F8DAE; }
.ticker li.log b{ color:#3EE6D6; font-weight:600; }

/* ---------- Esquinas biseladas (sci-fi) ---------- */
.chamfer{ --c:22px; position:relative; padding:1px;
  background:linear-gradient(135deg, rgba(91,46,255,.55), rgba(0,163,255,.35) 45%, var(--line-2) 70%);
  clip-path:polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition:background .3s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.chamfer:hover, .chamfer:focus-within{ background:var(--holo); }
.chamfer-in{ position:relative; height:100%; background:var(--glass-strong); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  clip-path:polygon(calc(var(--c) - .6px) 0, 100% 0, 100% calc(100% - var(--c) + .6px), calc(100% - var(--c) + .6px) 100%, 0 100%, 0 calc(var(--c) - .6px)); }
.hero-dark .chamfer{ background:linear-gradient(135deg, rgba(0,212,194,.55), rgba(255,255,255,.14) 50%); }
.hero-dark .chamfer-in{ background:rgba(11,17,36,.82); }
/* Marcas HUD en las esquinas que no están biseladas */
.chamfer .hud::before{ left:auto; right:10px; border-left:0; border-right:2px solid var(--violet); border-top-left-radius:0; border-top-right-radius:4px; }
.chamfer .hud::after{ right:auto; left:10px; border-right:0; border-left:2px solid var(--aqua); border-bottom-right-radius:0; border-bottom-left-radius:4px; }
.chamfer .hud:hover::before{ top:6px; right:6px; left:auto; } .chamfer .hud:hover::after{ bottom:6px; left:6px; right:auto; }

/* ---------- Telemetría decorativa ---------- */
.telemetry{ display:block; margin-top:4px; font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.1em; color:var(--muted); text-align:right; white-space:nowrap; }
.telemetry::before{ content:""; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:var(--aqua); box-shadow:0 0 8px var(--aqua); vertical-align:middle; animation:blink 2.4s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:.25; } }

/* ---------- Glitch controlado en botones principales ---------- */
.btn-neon:hover{ animation:glitch .38s steps(1,end) 1; }
@keyframes glitch{
  0%  { text-shadow:none; }
  20% { text-shadow:-2px 0 #00F2FE, 2px 0 #00A3FF; transform:translate(1px,-1px); }
  40% { text-shadow:2px 0 #00F2FE, -2px 0 #5B2EFF; transform:translate(-1px,0); clip-path:inset(10% 0 30% 0 round 10px); }
  60% { text-shadow:-1px 0 #00F2FE, 1px 0 #2F6BFF; transform:translate(0,1px); clip-path:inset(40% 0 5% 0 round 10px); }
  80% { text-shadow:1px 0 #00F2FE, -1px 0 #5B2EFF; transform:translate(1px,0); clip-path:none; }
  100%{ text-shadow:none; transform:translateY(-1px); }
}

/* ---------- Franja de marcas (monocromo) ---------- */
.brand-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 34px; }
.brand-mark{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:22px; letter-spacing:.02em; color:var(--muted); opacity:.75;
  transition:color .2s, opacity .2s, text-shadow .2s; }
.brand-mark:hover{ color:var(--ink); opacity:1; text-shadow:0 0 18px rgba(0,163,255,.55); }

/* ---------- Interruptor Modo Táctico ---------- */
.theme-toggle{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 12px 0 8px; border-radius:12px; font-family:"JetBrains Mono",monospace;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); background:var(--glass-strong); box-shadow:0 0 0 1px var(--line-2); }
.theme-toggle .sw{ position:relative; width:34px; height:20px; border-radius:999px; background:var(--bg-2); box-shadow:inset 0 0 0 1px var(--line-2); transition:background-color .2s; }
.theme-toggle .sw::after{ content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:var(--muted); transition:transform .2s, background-color .2s, box-shadow .2s; }
.theme-toggle[aria-pressed="true"] .sw{ background:rgba(0,212,194,.2); }
.theme-toggle[aria-pressed="true"] .sw::after{ transform:translateX(14px); background:var(--aqua); box-shadow:0 0 10px var(--aqua); }
.theme-toggle:hover{ box-shadow:0 0 0 1px var(--violet); }

/* ---------- Secuencia de arranque ---------- */
.boot{ position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#04070F; color:#9AA6C2;
  font-family:"JetBrains Mono",monospace; font-size:13px; transition:opacity .35s ease, visibility .35s; }
.boot.done{ opacity:0; visibility:hidden; }
.boot-box{ width:min(520px,88vw); min-height:150px; }
.boot-box p{ margin:0 0 6px; white-space:pre; overflow:hidden; text-overflow:ellipsis; }
.boot-box p b{ color:#3EE6D6; font-weight:600; }
.boot-bar{ width:min(520px,88vw); height:2px; margin-top:14px; border-radius:2px; background:rgba(255,255,255,.08); overflow:hidden; }
.boot-bar i{ display:block; height:100%; width:0; background:var(--holo); transition:width .9s cubic-bezier(.2,.8,.2,1); }
.boot-skip{ width:min(520px,88vw); margin-top:14px; font-size:11px; color:#7F8DAE; }

/* ---------- Ajustes de componentes en Modo Táctico ---------- */
:root[data-theme="tactico"] .division{ --accent-ink:color-mix(in srgb, var(--accent) 55%, #FFFFFF); }
:root[data-theme="tactico"] .eyebrow{ color:var(--violet-ink); }
:root[data-theme="tactico"] .tag{ background:var(--surface-2); color:var(--ink-2); }
:root[data-theme="tactico"] .field::placeholder{ color:#6B7794; }
:root[data-theme="tactico"] .eset-matrix .no{ color:#3B4664; }
:root[data-theme="tactico"] .plate::after{ color:var(--ink-2); }
:root[data-theme="tactico"] .g-badge{ background:rgba(13,20,40,.9); color:var(--ink); }
:root[data-theme="tactico"] .result-card .badge.alt{ background:var(--surface-2); color:var(--ink); }
:root[data-theme="tactico"] .lb-btn{ color:var(--ink); }
:root[data-theme="tactico"] select.field{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23A98CFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce){ .boot{ display:none; } }
/* Barra de navegación más sólida para que se lea igual sobre el hero oscuro */
header > .glass, #mobileNav.glass{ background:rgba(255,255,255,.93); }
:root[data-theme="tactico"] header > .glass, :root[data-theme="tactico"] #mobileNav.glass{ background:rgba(10,15,31,.88); }

.gallery[hidden]{ display:none !important; }

/* Campo trampa antispam (oculto a personas, visible para bots) */
.hp-field{ position:absolute !important; left:-10000px !important; width:1px; height:1px; overflow:hidden; }