/* ============================================================
   DETEXUM v4 — Oscuro premium + tema claro conmutable
   Pill nav flotante · red 3D adaptable · tarjetas diferenciadas
   ============================================================ */

:root {
  --blue: #0d84ff;
  --cyan: #4fb4ff;
  --green: #a4cb02;
  --druva: #ff8a3d;   /* naranja Druva (recuperación) */

  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --maxw: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- TEMA OSCURO (default) ---- */
:root, :root[data-theme="dark"] {
  --bg: #080b12;
  --ink-0: oklch(0.97 0.006 250);
  --ink-1: oklch(0.80 0.012 250);
  --ink-2: oklch(0.62 0.016 252);
  --ink-3: oklch(0.50 0.018 252);
  --glass: oklch(0.80 0.04 250 / 0.12);
  --glass-2: oklch(0.80 0.04 250 / 0.18);
  --glass-brd: oklch(0.85 0.03 250 / 0.12);
  --glass-brd-2: oklch(0.85 0.03 250 / 0.20);
  --nav-bg: oklch(0.18 0.02 258 / 0.55);
  --dropdown-bg: oklch(0.15 0.02 258 / 0.94);
  --nav-bg-solid: oklch(0.155 0.018 258);
  --dropdown-bg-solid: oklch(0.145 0.018 258);
  --shadow: 0 30px 70px -30px rgba(0,0,0,0.7);
  --tint: 0.16;
}
/* ---- TEMA CLARO ---- */
:root[data-theme="light"] {
  --bg: #eef1f6;
  --ink-0: oklch(0.24 0.02 260);
  --ink-1: oklch(0.34 0.018 260);
  --ink-2: oklch(0.48 0.015 260);
  --ink-3: oklch(0.60 0.012 260);
  --glass: oklch(1 0 0 / 0.62);
  --glass-2: oklch(1 0 0 / 0.80);
  --glass-brd: oklch(0.30 0.02 260 / 0.10);
  --glass-brd-2: oklch(0.30 0.02 260 / 0.16);
  --nav-bg: oklch(1 0 0 / 0.70);
  --dropdown-bg: oklch(1 0 0 / 0.94);
  --nav-bg-solid: oklch(0.975 0.002 260);
  --dropdown-bg-solid: oklch(0.99 0.002 260);
  --shadow: 0 24px 60px -26px oklch(0.30 0.06 260 / 0.30);
  --tint: 0.10;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--ink-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  line-height: 1.6;
}
.wrap { width: min(100% - 80px, var(--maxw)); margin-inline: auto; }

/* ---- Fondo 3D ---- */
#bg-stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#bg-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(120% 90% at 50% 0%, transparent 42%, var(--bg) 100%);
  transition: opacity .6s var(--ease);
}

main { position: relative; z-index: 1; }

/* ---- Tipografía ---- */
h1,h2,h3,h4 { font-family: var(--font-display); color: var(--ink-0); font-weight: 600; line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; }
.display { font-size: clamp(2.7rem, 7vw, 5.4rem); font-weight: 600; letter-spacing: -0.04em; line-height: 0.98; }
.h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); letter-spacing: -0.03em; }
.kicker { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); display: inline-flex; align-items: center; gap: 0.7em; }
.kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.32rem); color: var(--ink-1); line-height: 1.55; text-wrap: pretty; max-width: 54ch; }
.muted { color: var(--ink-2); }
.grad { background: linear-gradient(100deg, var(--cyan), var(--blue) 52%, var(--green)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- Glass base ---- */
.glass {
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 18px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: background .5s var(--ease), border-color .4s, transform .5s var(--ease), box-shadow .5s var(--ease);
}

/* ---- Botones ---- */
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { font-family: var(--font-body); font-weight: 600; font-size: 0.98rem; padding: 14px 24px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; text-decoration: none; white-space: nowrap; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s, border-color .25s; }
.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary { color: #fff; background: var(--blue); box-shadow: 0 10px 32px -12px var(--blue); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px var(--blue); }
.btn-ghost { color: var(--ink-0); background: var(--glass-2); border-color: var(--glass-brd-2); backdrop-filter: blur(10px); }
.btn-ghost:hover { border-color: var(--cyan); transform: translateY(-2px); }

/* ============================================================
   NAVBAR (barra ancha redondeada)
   ============================================================ */
.navwrap { position: fixed; top: 16px; left: 0; right: 0; z-index: 60; display: flex; justify-content: center; pointer-events: none; padding-inline: 16px; }
header.navbar {
  pointer-events: auto;
  position: relative;
  width: min(100%, 1280px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 11px 14px 11px 22px;
  border-radius: 22px;
  background: var(--nav-bg);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: 0 18px 50px -20px rgba(0,0,0,0.55), inset 0 1px 0 oklch(0.95 0.02 250 / 0.07);
  transition: padding .4s var(--ease), background .5s var(--ease), border-color .4s, box-shadow .4s, border-radius .4s;
}
.navbar.tight { padding-top: 8px; padding-bottom: 8px; border-radius: 18px; box-shadow: 0 14px 36px -18px rgba(0,0,0,0.6); }
.navbar .brand { display: flex; align-items: center; text-decoration: none; justify-self: start; }
.brand .logo-img { height: 30px; width: auto; display: block; }
.brand .logo-dark { display: none; }
:root[data-theme="light"] .brand .logo-light { display: none; }
:root[data-theme="light"] .brand .logo-dark { display: block; }
.navbar.tight .brand .logo-img { height: 27px; transition: height .4s; }
.navbar .brand .word { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.005em; font-size: 1.28rem; color: var(--ink-0); }
.navlinks { display: flex; gap: 6px; align-items: center; justify-self: center; }
.navlinks > a, .navitem > a { color: var(--ink-2); text-decoration: none; font-size: 0.93rem; font-weight: 500; padding: 9px 15px; border-radius: 11px; transition: color .25s, background .25s; display: inline-flex; align-items: center; gap: 6px; }
.navlinks > a:hover, .navitem > a:hover { color: var(--ink-0); background: var(--glass-2); }
.navlinks > a.active { color: var(--ink-0); font-weight: 600; }
.navitem { position: relative; }
.navitem .chev { font-size: 0.7em; opacity: 0.7; transition: transform .3s; }
.navitem:hover .chev { transform: rotate(180deg); }
/* botón de flecha independiente del link "Soluciones": en móvil, tocar el
   texto navega a la sección; tocar la flecha despliega/colapsa el submenú */
.chev-btn { background: none; border: none; padding: 4px; margin-left: -4px; cursor: pointer; color: inherit; display: inline-flex; align-items: center; }
.dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 250px; padding: 8px; display: flex; flex-direction: column; gap: 2px;
  background: var(--dropdown-bg-solid); border: 1px solid var(--glass-brd); border-radius: 14px;
  backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: 0 24px 50px -20px rgba(0,0,0,0.6);
  opacity: 0; visibility: hidden; transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.navitem:hover .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; text-decoration: none; transition: background .2s, color .2s; }
.dropdown a:hover { background: var(--glass-2); }
.dropdown a .dd-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dropdown a > div { display: flex; flex-direction: column; gap: 1px; }
.dropdown a b { font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; color: var(--ink-0); }
.dropdown a small { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-3); }
.navactions { display: flex; align-items: center; gap: 10px; justify-self: end; }
.mobile-contact { display: none !important; }
@media (max-width: 900px) { .mobile-contact { display: flex !important; justify-content: center; margin-top: 6px; background: linear-gradient(100deg, var(--blue), var(--green)); color: #fff !important; font-weight: 600; } }
.theme-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--glass-brd-2);
  background: var(--glass-2); cursor: pointer; display: grid; place-content: center; color: var(--ink-1);
  transition: border-color .3s, background .3s, color .3s, transform .5s var(--ease); position: relative;
}
.theme-btn:hover { border-color: var(--cyan); color: var(--ink-0); transform: rotate(-18deg); }
.theme-btn svg { width: 19px; height: 19px; grid-area: 1/1; transition: opacity .35s var(--ease), transform .45s var(--ease); }
.theme-btn .ic-sun { opacity: 0; transform: scale(.4) rotate(-90deg); }
.theme-btn .ic-moon { opacity: 1; transform: scale(1) rotate(0); }
:root[data-theme="light"] .theme-btn .ic-sun { opacity: 1; transform: scale(1) rotate(0); }
:root[data-theme="light"] .theme-btn .ic-moon { opacity: 0; transform: scale(.4) rotate(90deg); }
.btn-contact {
  font-size: 0.88rem; padding: 9px 17px; border-radius: 12px;
  background: linear-gradient(100deg, var(--blue), var(--green));
  color: #fff; text-decoration: none; font-weight: 600; white-space: nowrap;
  box-shadow: 0 10px 26px -12px var(--blue);
  transition: transform .25s var(--ease), box-shadow .3s, filter .3s; will-change: transform;
}
.btn-contact .mlabel { display: inline-block; transition: transform .25s var(--ease); }
.btn-contact:hover { box-shadow: 0 16px 34px -12px var(--green); filter: brightness(1.05); }
.nav-burger { display: none; width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--glass-brd-2); background: var(--glass-2); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; }
.nav-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink-0); transition: transform .3s var(--ease), opacity .25s; }
body.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
body.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* botones magnéticos genéricos */
.btn.magnetic { will-change: transform; }
.btn.magnetic .mlabel { display: inline-flex; align-items: center; gap: 9px; transition: transform .25s var(--ease); }

/* ============================================================
   GOOEY morph (nombres de amenaza)
   ============================================================ */
.gooey-defs { position: absolute; width: 0; height: 0; }
.gooey { position: relative; height: 1.3em; margin: 30px 0 16px; filter: url(#threshold); display: flex; align-items: center; justify-content: center; }
.gooey-t {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  white-space: nowrap; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 5.2vw, 3.4rem); letter-spacing: -0.03em;
  color: #ff7a4d; user-select: none;
}
:root[data-theme="light"] .gooey-t { color: #e0481c; }

/* ============================================================
   PARTNERS strip
   ============================================================ */
.partners-strip { padding-block: clamp(70px, 9vw, 110px); }
.pstrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.pcard {
  display: flex; flex-direction: column; gap: 6px; padding: 26px 28px;
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 16px;
  backdrop-filter: blur(14px); transition: transform .45s var(--ease), border-color .3s, box-shadow .4s;
}
.pcard:hover { transform: translateY(-4px); border-color: var(--glass-brd-2); box-shadow: var(--shadow); }
.pcard .pdot { width: 10px; height: 10px; border-radius: 50%; margin-bottom: 8px; box-shadow: 0 0 14px currentColor; }
.pcard b { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink-0); font-weight: 600; }
.pcard small { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

/* ============================================================
   SECCIONES
   ============================================================ */
section { padding: clamp(74px, 9vw, 122px) 0; position: relative; scroll-margin-top: 88px; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---- HERO (dos columnas · titular vaporize + mascota) ---- */
#hero { min-height: 100vh; display: flex; align-items: center; padding-top: 120px; padding-bottom: 60px; }
.hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 30px; align-items: center; }
.hero-grid .hero-copy { max-width: none; }
#hero .kicker { margin-bottom: 20px; }
#hero .lead { margin: 6px 0 32px; max-width: 50ch; }
#hero .btn-row { justify-content: flex-start; }
.hero-trust { margin-top: 24px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ink-3); display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.hero-trust b { color: var(--ink-1); font-weight: 600; }

/* titular vaporize (escritorio) — canvas animado que cicla las 3 palabras */
.vapor-wrap { width: 100%; height: clamp(140px, 24vh, 264px); margin: 10px 0 2px 0; pointer-events: none; }
.vapor-wrap canvas {
  width: 100%; height: 100%; display: block; background: transparent;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 13%, #000 87%, transparent 100%),
    linear-gradient(to right, #000 0, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 13%, #000 87%, transparent 100%),
    linear-gradient(to right, #000 0, #000 92%, transparent 100%);
  mask-composite: intersect;
}

/* badge + titular estático + tarjeta de prueba (SOLO móvil, ver media query abajo) */
.hbadge-pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 100px; background: oklch(0.72 0.12 205 / 0.12); border: 1px solid oklch(0.72 0.12 205 / 0.28); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 22px; }
.hbadge-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); position: relative; flex: none; }
.hbadge-pill .dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: var(--cyan); opacity: 0.4; animation: svc-pulse-ring 2s ease-out infinite; }
@keyframes svc-pulse-ring { 0% { transform: scale(1); opacity: .4; } 100% { transform: scale(2.5); opacity: 0; } }
.home-h1 { font-family: var(--font-display); font-size: clamp(2.6rem, 5.5vw, 5.2rem); font-weight: 700; line-height: 0.97; letter-spacing: -0.04em; display: flex; flex-direction: column; }
.home-h1 .hw-cyan { color: var(--cyan); }
.home-h1 .hw-blue { color: var(--blue); }
.home-h1 .hw-green { color: var(--green); }
:root[data-theme="light"] .home-h1 .hw-green { color: #5f7d00; }
/* en escritorio se mantiene el hero original (vaporize + mascota); el badge/titular estático/gancho son exclusivos de móvil */
#hero .hbadge-pill, #hero .home-h1, .hero-hook { display: none; }

/* mascota (escritorio) */
.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 380px; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.mascot-stage { position: relative; width: min(100%, 312px); }
.mascot-stage::before { content: ""; position: absolute; left: 50%; top: 52%; width: 80%; height: 80%; transform: translate(-50%,-50%); background: radial-gradient(circle, oklch(0.62 0.16 250 / 0.42), transparent 66%); filter: blur(54px); z-index: -1; }
:root[data-theme="light"] .mascot-stage::before { background: radial-gradient(circle, oklch(0.7 0.13 240 / 0.36), transparent 66%); }
.mascot { width: 100%; height: auto; display: block; filter: drop-shadow(0 28px 46px rgba(0,0,0,0.5)); animation: floaty 6.5s ease-in-out infinite; }
.mascot-watch .mascot { rotate: -2.2deg; animation: floaty 6.5s ease-in-out infinite, mascotLook 7.5s ease-in-out infinite; }
@keyframes mascotLook { 0%, 100% { rotate: -3.2deg; } 50% { rotate: -0.6deg; } }

/* ---- Tarjetas de estadística (sección 02) ---- */
.beat.beat-wide { max-width: 1080px; }
.stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 64px; text-align: center; }
.statcard { position: relative; overflow: hidden; padding: 32px 26px 28px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-brd); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: flex; flex-direction: column; align-items: center; }
.statcard::before { content: ""; position: absolute; top: -30%; left: 50%; transform: translateX(-50%); width: 70%; height: 60%; background: radial-gradient(circle, oklch(0.78 0.17 150 / 0.18), transparent 70%); filter: blur(30px); pointer-events: none; }
.sc-label { margin-top: 16px; margin-bottom: 20px; font-size: 1rem; line-height: 1.4; color: var(--ink-1); width: 100%; max-width: none; margin-inline: auto; text-wrap: balance; }
.sc-num { position: relative; font-family: var(--font-display); font-weight: 700; font-size: clamp(3.8rem, 8vw, 6.4rem); line-height: 0.9; letter-spacing: -0.04em; display: inline-flex; align-items: flex-end; justify-content: center; gap: 2px; background: linear-gradient(158deg, var(--green) 8%, #6fd39a 50%, var(--cyan) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sc-unit { font-family: var(--font-display); font-weight: 600; font-size: 0.32em; letter-spacing: 0; -webkit-text-fill-color: var(--ink-3); color: var(--ink-3); margin-bottom: 0.55em; }
.sc-desc { margin-top: 18px; font-size: 0.9rem; color: var(--ink-2); line-height: 1.5; max-width: 32ch; }
.sc-desc b { color: var(--ink-1); font-weight: 700; }
.sc-src { margin-top: auto; padding-top: 14px; width: 100%; border-top: 1px solid var(--glass-brd); font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.04em; color: var(--ink-3); opacity: 0.8; }
.scroll-hint { position: absolute; bottom: 30px; left: 0; right: 0; margin-inline: auto; width: fit-content; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.scroll-hint .bar { width: 1px; height: 40px; background: linear-gradient(var(--cyan), transparent); animation: sd 2.2s var(--ease) infinite; }
@keyframes sd { 0%{transform:scaleY(0);transform-origin:top}40%{transform:scaleY(1);transform-origin:top}60%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom} }

/* ---- STORYTELLING ---- */
#story { text-align: center; }
.beats { display: flex; flex-direction: column; gap: clamp(80px,12vw,150px); margin-top: 70px; }
.beat { max-width: 30ch; margin-inline: auto; }
.beat .bnum { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--ink-3); display: block; margin-bottom: 20px; }
.beat h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); letter-spacing: -0.03em; }
.beat h2 .warn { color: #ff7a4d; }
:root[data-theme="light"] .beat h2 .warn { color: #e04a1e; }
.beat p { margin-top: 18px; font-size: clamp(1.05rem,1.5vw,1.25rem); color: var(--ink-2); line-height: 1.5; }
.beat .stakerow { display: flex; justify-content: center; gap: 34px; margin-top: 30px; flex-wrap: wrap; }
.beat .stake b { font-family: var(--font-display); font-size: clamp(1.8rem,3vw,2.4rem); color: var(--ink-0); display: block; }
.beat .stake span { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

/* ---- SOLUCIÓN (tarjetas diferenciadas) ---- */
.section-head { max-width: 62ch; }
.section-head .kicker { margin-bottom: 20px; }
.section-head .h2 { margin-bottom: 16px; }
.sol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px; }
.sol {
  --acc: var(--blue);
  padding: 32px 28px; position: relative; overflow: hidden; min-height: 270px;
  display: flex; flex-direction: column;
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 18px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s, background .5s;
}
/* acento siempre visible: barra superior + brillo de esquina */
.sol::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--acc); opacity: 0.9; }
.sol::after { content: ""; position: absolute; top: -40px; right: -40px; width: 130px; height: 130px; border-radius: 50%; background: var(--acc); filter: blur(45px); opacity: var(--tint); transition: opacity .5s; }
.sol:hover { transform: translateY(-5px); border-color: color-mix(in oklch, var(--acc) 50%, transparent); box-shadow: 0 30px 60px -28px var(--acc); }
.sol:hover::after { opacity: calc(var(--tint) + 0.14); }
.sol .sk { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--acc); margin-bottom: 18px; }
.sol .sic { width: 46px; height: 46px; border-radius: 13px; background: color-mix(in oklch, var(--acc) 16%, transparent); border: 1px solid color-mix(in oklch, var(--acc) 35%, transparent); display: grid; place-content: center; margin-bottom: 20px; }
.sol .sic i { width: 17px; height: 17px; border-radius: 5px; background: var(--acc); }
.sol h3 { font-size: 1.45rem; margin-bottom: 12px; }
.sol p { font-size: 0.95rem; color: var(--ink-2); line-height: 1.55; }
.sol .tag { margin-top: auto; padding-top: 18px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-3); display: inline-flex; align-items: center; gap: 8px; }
.sol .tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
.sol.a-cyan { --acc: var(--cyan); }
.sol.a-blue { --acc: var(--blue); }
.sol.a-green { --acc: var(--green); }

/* ---- CTA + FORM ---- */
.cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.benefits { list-style: none; display: flex; flex-direction: column; gap: 13px; margin-top: 28px; }
.benefits li { display: flex; align-items: center; gap: 12px; color: var(--ink-1); font-size: 0.98rem; }
.benefits li .ck { width: 22px; height: 22px; border-radius: 6px; background: color-mix(in oklch, var(--green) 18%, transparent); color: var(--green); display: grid; place-content: center; font-size: 0.72rem; flex: none; }
:root[data-theme="light"] .benefits li .ck { color: #5f7d00; }
form.lead-form { padding: 32px; display: flex; flex-direction: column; gap: 15px; background: var(--glass-2); border: 1px solid var(--glass-brd); border-radius: 20px; backdrop-filter: blur(18px); box-shadow: var(--shadow); }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field label { font-family: var(--font-mono); font-size: 0.67rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.field input, .field select, .field textarea { font-family: var(--font-body); font-size: 0.95rem; color: var(--ink-0); background: var(--glass); border: 1px solid var(--glass-brd-2); border-radius: 10px; padding: 12px 13px; outline: none; width: 100%; transition: border-color .25s, box-shadow .25s; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px oklch(0.58 0.18 252 / 0.18); }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%237a8699' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.field select option { background: #11151f; color: var(--ink-0); padding: 10px; }
:root[data-theme="light"] .field select option { background: #fff; color: #1a2030; }
.field textarea { resize: vertical; min-height: 84px; }
form.lead-form .btn { justify-content: center; margin-top: 4px; }
.form-note { font-family: var(--font-mono); font-size: 0.67rem; color: var(--ink-3); text-align: center; }
.form-note a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.form-note a:hover { color: var(--ink-0); }
form.lead-form.sent { display: none; }
.form-success { display: none; padding: 48px 36px; flex-direction: column; align-items: center; text-align: center; gap: 14px; background: var(--glass-2); border: 1px solid var(--glass-brd); border-radius: 20px; backdrop-filter: blur(18px); box-shadow: var(--shadow); }
form.lead-form.sent + .form-success { display: flex; }
.form-success .big { width: 58px; height: 58px; border-radius: 50%; background: color-mix(in oklch, var(--green) 18%, transparent); color: var(--green); display: grid; place-content: center; font-size: 1.5rem; }
:root[data-theme="light"] .form-success .big { color: #5f7d00; }
.form-success h3 { font-size: 1.35rem; }
.form-success p { color: var(--ink-2); font-size: 0.95rem; max-width: 38ch; }
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.form-error { display: none; font-family: var(--font-body); font-size: 0.85rem; color: #ef4444; background: color-mix(in oklch, #ef4444 12%, transparent); border: 1px solid color-mix(in oklch, #ef4444 30%, transparent); border-radius: 10px; padding: 10px 14px; text-align: center; }

/* ---- FOOTER ---- */
footer { position: relative; z-index: 1; border-top: 1px solid var(--glass-brd); padding: 56px 0 40px; background: color-mix(in oklch, var(--bg) 80%, transparent); backdrop-filter: blur(12px); }
footer .wrap { display: flex; justify-content: space-between; gap: 36px; flex-wrap: wrap; }
footer .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 14px; }
footer .brand img { height: 26px; }
footer .brand .word { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; color: var(--ink-0); }
footer .col p { font-size: 0.9rem; color: var(--ink-2); line-height: 1.55; max-width: 30ch; }
footer .col h2 { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
footer .col a { display: block; color: var(--ink-2); text-decoration: none; font-size: 0.9rem; margin-bottom: 9px; transition: color .25s; }
footer .col a:hover { color: var(--ink-0); }
footer .copy { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--glass-brd); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
footer .copy span { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-3); }
footer .copy a { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; transition: color .25s; }
footer .copy a:hover { color: var(--ink-0); }

/* ============================================================
   SERVICIOS — check tags
   ============================================================ */
.sol .sol-checks { margin-top: auto; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 9px 18px; border-top: 1px solid var(--glass-brd); }
.sol .sol-checks span { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-2); }
.sol .sol-checks span::before { content: "✓"; color: var(--acc); font-weight: 700; font-size: 0.82rem; }
.sol .sic.svc-ico { background: color-mix(in oklch, var(--acc) 14%, transparent); }

/* ============================================================
   BEAT visuals (01 phishing · 03 recuperación)
   ============================================================ */
.beat-visual { margin: 38px auto 0; max-width: 440px; text-align: left; }
.mini-card { background: var(--glass-2); border: 1px solid var(--glass-brd); border-radius: 16px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow); overflow: hidden; }
/* phishing */
.mm-top { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid var(--glass-brd); }
.mm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); opacity: 0.5; }
.mm-tt { margin-left: 8px; font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-3); }
.mm-body { padding: 18px 18px 20px; }
.mm-from { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.mm-ava { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #ff7a4d, var(--druva)); flex: none; }
.mm-from b { display: block; font-family: var(--font-body); font-size: 0.88rem; color: var(--ink-0); font-weight: 700; }
.mm-from span { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-3); }
.mm-subject { font-family: var(--font-body); font-weight: 700; color: var(--ink-0); font-size: 0.96rem; margin-bottom: 14px; }
.mm-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 9px; background: oklch(0.55 0.16 262); color: #fff; font-size: 0.82rem; font-weight: 600; position: relative; }
.mm-link .ring { position: absolute; inset: 0; border-radius: 9px; border: 2px solid #ff7a4d; opacity: 0; animation: mmring 6s var(--ease) infinite; }
@keyframes mmring { 0%,14%{opacity:0;transform:scale(1)} 18%{opacity:.95;transform:scale(1)} 30%{opacity:0;transform:scale(1.45)} 100%{opacity:0} }
.mm-cursor { position: absolute; right: -2px; bottom: -13px; width: 22px; height: 22px; color: #fff; pointer-events: none; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.55)); z-index: 3; }
.beat-visual.in .mm-cursor { animation: mmCursor 6s var(--ease) infinite; }
@keyframes mmCursor { 0% { transform: translate(16px,18px) scale(1); opacity: 0; } 6% { opacity: 1; } 13% { transform: translate(0,0) scale(1); } 17% { transform: translate(0,0) scale(0.78); } 22% { transform: translate(0,0) scale(1); } 42% { opacity: 1; } 56% { opacity: 0; transform: translate(0,0) scale(1); } 100% { opacity: 0; } }
.mm-flag { margin-top: 16px; display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.7rem; color: #ff7a4d; }
:root[data-theme="light"] .mm-flag { color: #e0481c; }
/* recuperación */
.rec-top { display: flex; align-items: center; gap: 13px; padding: 20px 20px 16px; }
.rec-ico { width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-content: center; background: color-mix(in oklch, var(--green) 18%, transparent); color: var(--green); font-size: 1.1rem; }
:root[data-theme="light"] .rec-ico { color: #5f7d00; }
.rec-top b { display: block; font-family: var(--font-body); font-weight: 700; color: var(--ink-0); font-size: 0.98rem; }
.rec-top span { font-size: 0.82rem; color: var(--ink-3); }
.rec-bar { height: 7px; margin: 0 20px; border-radius: 7px; background: oklch(0.5 0.02 258 / 0.25); overflow: hidden; }
.rec-bar i { display: block; height: 100%; width: 0; border-radius: 7px; background: linear-gradient(90deg, var(--green), var(--cyan)); transition: width 1.4s var(--ease); }
.beat-visual.in .rec-bar i { width: 100%; }
.rec-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; padding: 18px 20px 22px; }
.rec-stats div { text-align: center; }
.rec-stats b { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink-0); display: block; }
.rec-stats span { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }

/* beats en dos columnas (01 texto-izq/visual-der · 03 alternado) */
.beat.beat-split { max-width: 1000px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; text-align: left; }
.beat.beat-split .beat-text { max-width: none; }
.beat.beat-split .beat-visual { margin: 0; max-width: 460px; width: 100%; }
.beat.beat-split-rev { grid-template-columns: 0.95fr 1.05fr; }
.beat.beat-split-rev .beat-text { order: 2; }
.beat.beat-split-rev .beat-visual { order: 1; }
@media (max-width: 760px) {
  .beat.beat-split, .beat.beat-split-rev { grid-template-columns: 1fr; text-align: center; gap: 30px; }
  .beat.beat-split .beat-visual, .beat.beat-split-rev .beat-visual { margin-inline: auto; order: 2; }
  .beat.beat-split-rev .beat-text { order: 1; }
}

/* ============================================================
   SOLUCIONES — scroll horizontal fijado + radar
   ============================================================ */
.hpin { position: relative; height: calc(100vh + 200vw); padding: 0; }
.hpin-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.hpanels { display: flex; flex-wrap: nowrap; will-change: transform; }
.hpanel { flex: 0 0 100vw; height: 100vh; display: flex; align-items: center; --acc: var(--cyan); }
.hpanel.a-cyan { --acc: var(--cyan); } .hpanel.a-blue { --acc: var(--blue); } .hpanel.a-druva { --acc: var(--druva); }
.hpanel-inner { width: min(100% - 80px, 1180px); margin-inline: auto; display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 50px; align-items: center; }
.hpanel .pnum { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc); margin-bottom: 22px; }
.hpanel h3 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); letter-spacing: -0.03em; line-height: 1.02; margin-bottom: 18px; }
.hpanel .pdesc { font-size: 1.05rem; color: var(--ink-2); line-height: 1.55; max-width: 42ch; margin-bottom: 24px; }
.hpanel ul { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 30px; }
.hpanel ul li { display: flex; align-items: center; gap: 11px; color: var(--ink-1); font-size: 0.96rem; }
.hpanel ul li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 9px var(--acc); flex: none; }
.pcta { display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border-radius: 100px; font-family: var(--font-body); font-weight: 600; font-size: 0.96rem; color: #fff; text-decoration: none; box-shadow: 0 12px 30px -12px var(--acc); transition: transform .3s var(--ease), box-shadow .3s, filter .3s; }
.pcta:hover { transform: translateY(-2px); filter: brightness(1.06); }
.pcta .arrow { transition: transform .3s var(--ease); }
.pcta:hover .arrow { transform: translateX(4px); }
.a-cyan .pcta { background: linear-gradient(100deg, var(--green), var(--cyan)); }
.a-blue .pcta { background: linear-gradient(100deg, var(--blue), var(--green)); }
.a-druva .pcta { background: linear-gradient(100deg, var(--druva), #ffb347); color: #2a1500; box-shadow: 0 12px 30px -12px var(--druva); }
/* visual radar */
.sol-visual { position: relative; aspect-ratio: 1/1; width: 100%; max-width: 440px; margin-inline: auto; border-radius: 28px; border: 1px solid var(--glass-brd); background: radial-gradient(circle at 50% 55%, color-mix(in oklch, var(--acc) 20%, transparent), transparent 66%), var(--nav-bg); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); box-shadow: inset 0 1px 0 oklch(0.95 0.02 250 / 0.06), var(--shadow); overflow: hidden; display: grid; place-content: center; }
.sol-visual .grid-bg { position: absolute; inset: 0; background-image: linear-gradient(color-mix(in oklch, var(--acc) 14%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--acc) 14%, transparent) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(circle at 50% 55%, #000 35%, transparent 72%); opacity: 0.5; }
.sol-visual .rings { position: absolute; inset: 0; pointer-events: none; }
.sol-visual .rings i { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 1px solid color-mix(in oklch, var(--acc) 22%, transparent); border-radius: 50%; }
.sol-visual .rings i:nth-child(1) { width: 38%; height: 38%; }
.sol-visual .rings i:nth-child(2) { width: 62%; height: 62%; }
.sol-visual .rings i:nth-child(3) { width: 86%; height: 86%; }
.sol-visual .sweep { position: absolute; left: 50%; top: 50%; width: 140%; height: 140%; transform: translate(-50%,-50%); background: conic-gradient(from 0deg, transparent 0deg, color-mix(in oklch, var(--acc) 42%, transparent) 32deg, transparent 66deg); animation: radarsweep 4.5s linear infinite; }
@keyframes radarsweep { to { transform: translate(-50%,-50%) rotate(360deg); } }
.sol-visual .blip { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%,-50%); background: var(--acc); box-shadow: 0 0 14px var(--acc); }
/* puntos de detección (panel Detectar) */
.sol-visual .targets i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 12px var(--acc); opacity: 0; animation: ping 4.5s linear infinite; }
.sol-visual .targets i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--acc); opacity: 0.6; animation: pingring 4.5s linear infinite; }
.sol-visual .targets i:nth-child(1) { left: 32%; top: 38%; animation-delay: 0.4s; }
.sol-visual .targets i:nth-child(1)::after { animation-delay: 0.4s; }
.sol-visual .targets i:nth-child(2) { left: 66%; top: 33%; animation-delay: 1.7s; }
.sol-visual .targets i:nth-child(2)::after { animation-delay: 1.7s; }
.sol-visual .targets i:nth-child(3) { left: 60%; top: 68%; animation-delay: 2.9s; }
.sol-visual .targets i:nth-child(3)::after { animation-delay: 2.9s; }
.sol-visual .targets i:nth-child(4) { left: 30%; top: 64%; animation-delay: 3.7s; }
.sol-visual .targets i:nth-child(4)::after { animation-delay: 3.7s; }
@keyframes ping { 0%,12%{opacity:0} 16%{opacity:1} 60%{opacity:1} 80%{opacity:0} 100%{opacity:0} }
@keyframes pingring { 0%,12%{opacity:0;transform:scale(.4)} 16%{opacity:.7;transform:scale(.6)} 70%{opacity:0;transform:scale(2.4)} 100%{opacity:0} }
.sol-visual .wm { position: relative; z-index: 2; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.6rem); letter-spacing: -0.02em; color: var(--ink-0); display: inline-flex; align-items: center; gap: 10px; }
.sol-visual .wm .msq { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.sol-visual .wm .msq b { width: 11px; height: 11px; display: block; }
.hpin-progress { position: absolute; left: 50%; bottom: 38px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 4; }
.hpin-progress span { width: 26px; height: 4px; border-radius: 4px; background: var(--glass-brd-2); transition: background .3s, width .3s; }
.hpin-progress span.on { width: 40px; background: var(--cyan); }


/* ============================================================
   SECCIÓN 01 — cadena de ataque (intuitivo)
   ============================================================ */
.attack-chain { display: flex; align-items: stretch; gap: 0; margin-top: 30px; flex-wrap: nowrap; }
.ac-step { flex: 1; position: relative; padding: 18px 14px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-brd); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; min-width: 0; }
.ac-step .ac-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-content: center; background: color-mix(in oklch, #ff7a4d 16%, transparent); border: 1px solid color-mix(in oklch, #ff7a4d 32%, transparent); color: #ff7a4d; }
:root[data-theme="light"] .ac-step .ac-ic { color: #e0481c; }
.ac-step b { font-family: var(--font-body); font-size: 0.86rem; color: var(--ink-0); font-weight: 700; }
.ac-step span { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); line-height: 1.3; }
.ac-arrow { flex: 0 0 30px; display: grid; place-content: center; color: var(--ink-3); }
.ac-step.crit { border-color: color-mix(in oklch, #ff7a4d 45%, transparent); box-shadow: 0 0 30px -10px #ff7a4d; }
.ac-step.crit .ac-ic { background: color-mix(in oklch, #ff7a4d 26%, transparent); }
/* — secuencia viva (loop): cada paso se enciende en orden — */
.attack-chain .ac-step { transition: border-color .4s, box-shadow .4s, transform .4s; }
.attack-chain .ac-arrow svg { opacity: 0.3; transition: opacity .4s; }
.attack-chain.in .ac-step { animation: acSeq 6s var(--ease) infinite; animation-delay: var(--sd, 0s); }
.attack-chain.in .ac-arrow svg { animation: acArrow 6s var(--ease) infinite; animation-delay: var(--sd, 0s); color: #ff7a4d; }
.attack-chain.in .ac-step .ac-ic { animation: acIc 6s var(--ease) infinite; animation-delay: var(--sd, 0s); }
@keyframes acSeq { 0%,9% { border-color: var(--glass-brd); box-shadow: none; transform: translateY(0); } 15% { border-color: color-mix(in oklch,#ff7a4d 55%,transparent); box-shadow: 0 0 34px -8px #ff7a4d; transform: translateY(-4px); } 88% { border-color: color-mix(in oklch,#ff7a4d 26%,transparent); box-shadow: 0 0 16px -10px #ff7a4d; transform: translateY(0); } 100% { border-color: var(--glass-brd); box-shadow: none; } }
@keyframes acArrow { 0%,11% { opacity: 0.25; } 17% { opacity: 1; } 88% { opacity: 0.7; } 100% { opacity: 0.25; } }
@keyframes acIc { 0%,11% { transform: scale(1); } 15% { transform: scale(1.16); } 26% { transform: scale(1); } }
.ac-step .ac-ic { transition: transform .3s; }

/* ============================================================
   SECCIÓN 03 — flujo de respuesta (Detectar→Contener→Recuperar)
   ============================================================ */
.recovery-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; counter-reset: rf; }
.rf-step { position: relative; padding: 26px 22px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-brd); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); text-align: left; --rfa: var(--cyan); overflow: hidden; }
.rf-step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--rfa); }
.rf-step.s2 { --rfa: var(--blue); } .rf-step.s3 { --rfa: var(--green); }
.rf-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-content: center; background: color-mix(in oklch, var(--rfa) 16%, transparent); border: 1px solid color-mix(in oklch, var(--rfa) 34%, transparent); color: var(--rfa); margin-bottom: 16px; }
:root[data-theme="light"] .rf-step.s3 .rf-ic { color: #5f7d00; }
.rf-step h3 { font-family: var(--font-display); font-size: 1.18rem; color: var(--ink-0); margin-bottom: 8px; }
.rf-step p { font-size: 0.9rem; color: var(--ink-2); line-height: 1.5; }
.rf-step .rf-n { position: absolute; top: 20px; right: 22px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-3); }

/* ============================================================
   ALIANZAS / PARTNERS (estilo tarjetas con logo)
   ============================================================ */
.partners-strip .section-head { max-width: 64ch; margin-inline: auto; }
.section-head.center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.section-head.center .kicker { align-self: center; }
.partners-strip .section-head .h2 { white-space: normal; }
.ally-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }
.ally-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 38px 30px 30px; border-radius: 20px; background: var(--glass); border: 1px solid var(--glass-brd); backdrop-filter: blur(16px); transition: transform .45s var(--ease), border-color .3s, box-shadow .4s; }
.ally-card:hover { transform: translateY(-5px); border-color: var(--glass-brd-2); box-shadow: var(--shadow); }
.ally-logo { height: 50px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; }
/* logos oficiales (PNG) en tarjetas de partners */
.plogo { width: auto; max-width: 230px; object-fit: contain; display: block; }
.plogo-zscaler { height: 46px; }
.plogo-druva { height: 34px; }
.ally-card .plogo-light { display: none; }
.ally-card .plogo-dark { display: block; }
:root[data-theme="light"] .ally-card .plogo-light { display: block; }
:root[data-theme="light"] .ally-card .plogo-dark { display: none; }
/* logos en paneles de soluciones */
.sol-logo { height: clamp(26px, 4.4vw, 40px); width: auto; max-width: 200px; object-fit: contain; display: block; }
.sol-logo-zscaler { height: clamp(33px, 5.6vw, 50px); }
.sol-logo-light { display: none; }
.sol-logo-dark { display: block; }
:root[data-theme="light"] .sol-logo-light { display: block; }
:root[data-theme="light"] .sol-logo-dark { display: none; }
/* wordmarks de marca (colores oficiales) */
.lg-ms { font-family: "Segoe UI", var(--font-body); font-weight: 600; font-size: 1.55rem; color: var(--ink-0); letter-spacing: 0; display: inline-flex; align-items: center; gap: 10px; }
.lg-zscaler { font-family: var(--font-display); font-weight: 700; font-size: 1.85rem; letter-spacing: -0.02em; color: #1f63f5; }
:root[data-theme="light"] .lg-zscaler { color: #0b4fd6; }
.lg-druva { font-family: var(--font-display); font-weight: 700; font-size: 1.95rem; letter-spacing: -0.01em; color: #f37021; }
.ally-logo .lg-text { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; color: var(--ink-0); letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 11px; }
.ms-squares { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.ms-squares b { width: 15px; height: 15px; display: block; }
.druva-diamond { width: 16px; height: 16px; background: var(--druva); transform: rotate(45deg); border-radius: 3px; position: relative; top: -8px; }
.zscaler-mark { width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(from 220deg, #00b9f1, #0067b9, #00b9f1); position: relative; }
.zscaler-mark::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--bg); }
.ally-card h3 { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink-0); margin-bottom: 10px; }
.ally-card .ally-desc { font-size: 0.92rem; color: var(--ink-2); line-height: 1.5; margin-bottom: 24px; max-width: 30ch; }
.ally-btns { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 28px; }
.ally-ghost { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 11px; border: 1px solid color-mix(in oklch, var(--acc) 42%, transparent); color: var(--acc); background: transparent; font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; text-decoration: none; transition: background .25s, transform .25s; }
.ally-ghost:hover { background: color-mix(in oklch, var(--acc) 12%, transparent); }
.ally-ghost .arrow { transition: transform .3s var(--ease); }
.ally-ghost:hover .arrow { transform: translateX(4px); }
.ally-solid { display: flex; align-items: center; justify-content: center; padding: 12px; border-radius: 11px; color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; text-decoration: none; background: linear-gradient(100deg, var(--green), var(--blue)); box-shadow: 0 10px 26px -14px var(--blue); transition: transform .25s var(--ease), filter .25s; }
.ally-solid:hover { transform: translateY(-2px); filter: brightness(1.05); }
.ally-card.a-blue { --acc: var(--blue); } .ally-card.a-cyan { --acc: var(--cyan); } .ally-card.a-druva { --acc: var(--druva); }

/* ============================================================
   POR QUÉ DETEXUM (historia fundacional)
   ============================================================ */
#why { position: relative; }
.why-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 60px; align-items: center; }
.why-quote { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.1; letter-spacing: -0.03em; color: var(--ink-0); margin: 18px 0 22px; }
.why-quote .grad { background: linear-gradient(100deg, var(--cyan), var(--green)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.why-body p { font-size: 1.02rem; color: var(--ink-2); line-height: 1.6; margin-bottom: 16px; max-width: 52ch; }
.why-points { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.why-point { padding: 24px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-brd); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.why-point .wp-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-content: center; background: color-mix(in oklch, var(--green) 16%, transparent); color: var(--green); border: 1px solid color-mix(in oklch, var(--green) 30%, transparent); margin-bottom: 14px; }
:root[data-theme="light"] .why-point .wp-ic { color: #5f7d00; }
.why-point h3 { font-family: var(--font-display); font-size: 1.08rem; color: var(--ink-0); margin-bottom: 7px; }
.why-point p { font-size: 0.88rem; color: var(--ink-2); line-height: 1.5; }

/* ============================================================
   LEAD MAGNET + WHATSAPP
   ============================================================ */
.lead-alt { margin-top: 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wa-link { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 100px; background: color-mix(in oklch, #25d366 18%, transparent); border: 1px solid color-mix(in oklch, #25d366 40%, transparent); color: var(--ink-0); text-decoration: none; font-weight: 600; font-size: 0.92rem; transition: background .25s, transform .25s; }
.wa-link:hover { background: color-mix(in oklch, #25d366 28%, transparent); transform: translateY(-2px); }
.wa-link svg { width: 18px; height: 18px; }
.lead-or { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 70; width: 56px; height: 56px; border-radius: 50%; background: #25d366; display: grid; place-content: center; box-shadow: 0 14px 34px -10px rgba(37,211,102,0.6); transition: transform .3s var(--ease), opacity .25s var(--ease); }
.wa-float:hover { transform: scale(1.08); }
.wa-float.wa-hide { opacity: 0; transform: scale(0.6); pointer-events: none; }
.wa-float svg { width: 30px; height: 30px; }

@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 8px; }
  #hero .btn-row { gap: 8px; }
  #hero .btn-row .btn { justify-content: center; padding: 13px 14px; font-size: 0.84rem; gap: 6px; }
  .hero-visual { min-height: 0; margin-top: 10px; }
  /* el hero ya no fuerza 100vh: en vez de dejar aire vacío antes de la
     siguiente sección, usamos ese espacio para el gancho de transición */
  #hero { min-height: 0; padding-bottom: 10px; }
  .scroll-hint { display: none; }
  /* móvil: badge + vaporize (mismo canvas animado del escritorio, más chico) en vez de la mascota */
  #hero .kicker, .hero-visual .mascot-stage { display: none; }
  #hero .hbadge-pill { display: inline-flex; }
  #hero .vapor-wrap { width: 100%; height: clamp(96px, 24vw, 168px); margin: 4px 0 6px; }
  /* inicio limpio: bajo los CTA solo queda la pregunta-gancho hacia "Empieza en
     silencio" (neuromarketing: bucle abierto), centrada, con un resplandor azul
     sutil detrás que le da vida y anticipa lo que sigue */
  .hero-hook { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; margin: 0 auto; padding: 46px 12px; max-width: 360px; text-decoration: none; }
  .hero-hook::before { content: ""; position: absolute; left: 50%; top: 50%; width: 260px; height: 200px; transform: translate(-50%,-50%); background: radial-gradient(ellipse, color-mix(in oklch, var(--blue) 26%, transparent), transparent 72%); filter: blur(6px); z-index: -1; animation: hookGlow 3.6s ease-in-out infinite; }
  @keyframes hookGlow { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
  .hero-hook-label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); }
  .hero-hook-q { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--ink-0); line-height: 1.32; }
  .hero-hook-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: #ff7a4d; }
  .hh-arrow { display: inline-block; animation: hhbounce 1.6s ease-in-out infinite; }
  @keyframes hhbounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
  .stat-cards { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .ally-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .why-grid { grid-template-columns: 1fr; gap: 36px; }
  .recovery-flow { grid-template-columns: 1fr; }
  .attack-chain { flex-wrap: wrap; }
  .ac-step { flex: 1 1 40%; }
  .ac-arrow { display: none; }
}
@media (max-width: 900px) {
  .sol-grid { grid-template-columns: 1fr; }
  .cta-grid { grid-template-columns: 1fr; gap: 40px; }
  .pstrip { grid-template-columns: 1fr; }
  .nav-burger { display: flex; grid-column: 1; background: transparent; border-color: transparent; }
  .navbar { grid-template-columns: auto 1fr auto; }
  /* en móvil la barra es angosta — un radio más grande la redondea del todo,
     como una isla/notch flotante, en vez del rectángulo redondeado actual */
  header.navbar { border-radius: 30px; }
  header.navbar.tight { border-radius: 26px; }
  .navactions { grid-column: 3; gap: 8px; }
  .navactions .btn-contact { display: none; }
  .theme-btn { background: transparent; border-color: transparent; }
  .navbar .brand { grid-column: 2; justify-self: center; }
  .navlinks {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    position: absolute; top: calc(100% + 10px); left: 0; right: 0; width: 100%;
    background: var(--nav-bg-solid); border: 1px solid var(--glass-brd);
    backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
    border-radius: 18px; padding: 14px; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.7);
    opacity: 0; pointer-events: none; transform: translateY(-10px);
    will-change: transform;
    transition: transform .3s var(--ease);
  }
  /* mismo tono que la barra pero sólido (--nav-bg-solid, no el --nav-bg
     translúcido): se comprobó que este navegador no compone bien un fondo
     con canal alfa en un panel que se muestra dinámicamente (hasta un <div>
     de prueba nuevo con fondo translúcido fallaba igual) — un color sólido
     pinta siempre, en cualquier navegador, sin depender de ese comportamiento */
  body.nav-open .navlinks { opacity: 1; pointer-events: auto; transform: none; }
  .navlinks > a, .navitem > a { font-size: 1rem; padding: 13px 16px; border-radius: 12px; }
  /* "Soluciones" (navega) y la flecha (despliega/colapsa) son tap-targets
     independientes en la misma fila; el submenú baja a una fila propia debajo. */
  .navitem { width: 100%; display: flex; align-items: center; flex-wrap: wrap; }
  .navitem > a { flex: 1 1 auto; }
  /* círculo real (no un botón rectangular con esquinas redondeadas): mismo
     lenguaje visual que el punto "en vivo" de las páginas de producto, con
     un anillo que pulsa a su alrededor para señalar que ahí se despliega */
  .chev-btn {
    position: relative; flex: none; width: 34px; height: 34px; margin-right: 6px;
    padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: oklch(0.72 0.12 205 / 0.14);
  }
  .chev-btn:active { background: oklch(0.72 0.12 205 / 0.26); }
  .chev-btn::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--cyan); opacity: 0; animation: chevPulse 2.2s ease-out infinite; pointer-events: none; }
  .navitem.open .chev-btn::before { animation: none; opacity: 0; }
  @keyframes chevPulse { 0% { transform: scale(0.75); opacity: .6; } 100% { transform: scale(1.3); opacity: 0; } }
  .navitem .chev { display: inline-block; font-size: 0.9rem; line-height: 1; color: var(--cyan); transition: transform .3s var(--ease); }
  .navitem.open .chev { transform: rotate(180deg); }
  /* acordeón: colapsado por defecto, la flecha lo despliega.
     la regla de escritorio (.dropdown{visibility:hidden}, solo visible en :hover)
     sigue activa a cualquier ancho, y el toque no dispara :hover — por eso hace
     falta reafirmar visibility:visible aquí, pero SOLO bajo .navitem.open, para
     no volver a "secuestrar" toques cuando el menú entero está cerrado.
     antes usaba max-height+transition para animar el acordeón, pero un
     elemento con transición, anidado varios niveles dentro de .navlinks
     (que a su vez está dentro de header.navbar con backdrop-filter), no
     llegaba a pintarse en este navegador aunque el DOM/CSS fueran correctos
     — mostrar/ocultar con display, sin animar, evita esa capa intermedia */
  .dropdown {
    position: static; transform: none; flex-basis: 100%; width: 100%;
    box-shadow: none; background: transparent; border: none; padding: 0 0 0 14px; margin: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    flex-direction: column; gap: 2px; min-width: 0;
    display: none; opacity: 1; max-height: none; overflow: visible;
  }
  .navitem.open .dropdown { display: flex; padding-top: 2px; padding-bottom: 6px; visibility: visible; }
  /* los navegadores móviles simulan :hover al tocar, y esa regla de escritorio
     (position:absolute + left:50% + translateX(-50%), para centrar el menú bajo
     el link) reaparecía "pegada" tras el toque, corriendo el submenú ~140px
     fuera de pantalla. Mismo selector para igualar especificidad y ganar por
     orden — lo neutralizamos por completo en este ancho. */
  .navitem:hover .dropdown { position: static; left: auto; transform: none; }
  .dropdown a { padding: 10px 14px; }
  .mobile-contact { display: flex; }
  /* Soluciones: desactivar pin horizontal en móvil -> apilar */
  .hpin { height: auto; }
  .hpin-sticky { position: static; height: auto; overflow: visible; display: block; }
  .hpanels { flex-direction: column; transform: none !important; }
  .hpanel { flex: none; width: 100%; height: auto; padding: 64px 0; }
  .hpanel-inner { grid-template-columns: 1fr; gap: 32px; }
  .sol-visual { max-width: 320px; }
  /* backup/identity ahora tienen el logo en flujo normal (no absoluto) porque
     su contenido es más alto que un cuadrado perfecto; dejamos que la altura
     crezca en vez de recortarlo con el aspect-ratio cuadrado. */
  .sv-backup, .sv-identity { aspect-ratio: auto; height: auto; padding-block: 28px; }
  .sv-backup .wm, .sv-identity .wm, .sv-radar .wm { position: static !important; transform: none !important; margin: 22px auto 0; bottom: auto; left: auto; justify-self: center; width: fit-content; }
  .hpin-progress { display: none; }
}
@media (max-width: 560px) {
  .field.row2 { grid-template-columns: 1fr; }
  .wrap { width: min(100% - 36px, var(--maxw)); }
  .navbar { grid-template-columns: 1fr auto; padding-left: 16px; }
  .navbar .brand .word { font-size: 1.12rem; }
  .b-detecta { left: 0; } .b-protege { right: 0; } .b-recupera { left: 2%; }
  .partners-strip .section-head .h2 { white-space: normal; }
  .why-points { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001s !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   NUEVO v5.1 — phishing game · flip · sección 03 viva · sol viz
   ============================================================ */
/* --- mini-juego de phishing (sección 01) --- */
.phish-game { display: flex; flex-direction: column; align-items: center; gap: 22px; margin: 8px auto 0; max-width: 520px; }
.pg-card { width: 100%; max-width: 460px; border-radius: 16px; overflow: hidden; background: var(--glass); border: 1px solid var(--glass-brd); backdrop-filter: blur(16px); box-shadow: var(--shadow); }
.pg-card .mm-top { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid var(--glass-brd); }
.pg-card .mm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); opacity: 0.5; }
.pg-card .mm-tt { margin-left: 8px; font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-3); }
.pg-card .mm-body { padding: 20px; }
.pg-card .mm-from { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.pg-card .mm-ava { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #ff7a4d, var(--purple, #9a6cf0)); flex: none; }
.pg-card .mm-from b { color: var(--ink-0); font-size: 0.9rem; display: block; }
.pg-card .mm-from span { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-3); }
.pg-card .mm-subject { font-weight: 700; color: var(--ink-0); font-size: 1rem; margin-bottom: 8px; }
.pg-card .mm-text { font-size: 0.86rem; color: var(--ink-2); line-height: 1.5; margin-bottom: 18px; }
.pg-trap { position: relative; display: inline-block; }
.pg-trap .mm-link { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 9px; background: oklch(0.55 0.16 262); color: #fff; font-size: 0.86rem; font-weight: 600; position: relative; cursor: pointer; transition: opacity .3s; }
.pg-trap .mm-link .ring { position: absolute; inset: 0; border-radius: 9px; border: 2px solid #ff7a4d; opacity: 0; animation: mmring 3.4s var(--ease) infinite; }
@keyframes mmring { 0%,70%{opacity:0;transform:scale(1)} 78%{opacity:.9;transform:scale(1)} 100%{opacity:0;transform:scale(1.4)} }
.pg-trap .pg-reveal { position: absolute; inset: -28px -40px; width: calc(100% + 80px); height: calc(100% + 56px); pointer-events: none; opacity: 0; transition: opacity .35s; }
.pg-trap.revealed .pg-reveal { opacity: 1; }
.pg-trap.revealed .mm-link { opacity: 0.12; }
.pg-hint { margin-top: 14px; font-family: var(--font-mono); font-size: 0.7rem; color: #ff7a4d; letter-spacing: 0.04em; animation: hintpulse 2.4s ease-in-out infinite; }
@keyframes hintpulse { 0%,100%{opacity:.5} 50%{opacity:1} }
.pg-explain { text-align: center; font-size: 0.96rem; color: var(--ink-2); line-height: 1.55; max-width: 44ch; }
.pg-explain b { color: var(--ink-0); }

/* --- FlipWords (sección 03 título) --- */
.flip-h { min-height: 1.1em; }
.flip-w { display: inline-block; animation: flipIn .5s var(--ease) both; }
@keyframes flipIn { from { opacity: 0; filter: blur(8px); transform: translateY(14px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes flipOut { to { opacity: 0; filter: blur(8px); transform: translateY(-12px); } }

/* --- Sección 03 viva: estados por paso --- */
.recovery-flow .rf-step { position: relative; overflow: hidden; }
.rf-ic { position: relative; overflow: hidden; }
.rf-status { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; padding: 5px 10px; border-radius: 100px; opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s; }
.rf-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.reveal.in .rf-status { opacity: 1; transform: none; }
.rf-status.det { background: color-mix(in oklch, #ff7a4d 16%, transparent); color: #ff7a4d; transition-delay: .5s; }
.rf-status.det::before { background: #ff7a4d; box-shadow: 0 0 8px #ff7a4d; animation: blip 1.4s infinite; }
.rf-status.con { background: color-mix(in oklch, var(--blue) 16%, transparent); color: var(--blue); transition-delay: 1.1s; }
.rf-status.con::before { background: var(--blue); box-shadow: 0 0 8px var(--blue); }
.rf-status.rec { background: color-mix(in oklch, var(--green) 16%, transparent); color: var(--green); transition-delay: 1.7s; }
:root[data-theme="light"] .rf-status.rec { color: #5f7d00; }
.rf-status.rec::before { background: var(--green); box-shadow: 0 0 8px var(--green); }
@keyframes blip { 0%,100%{opacity:1} 50%{opacity:.35} }
/* detectar: línea de escaneo */
.rf-detect .rf-scan { position: absolute; left: 0; right: 0; height: 2px; top: 0; background: linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow: 0 0 8px var(--cyan); animation: rfScan 2.4s var(--ease) infinite; }
@keyframes rfScan { 0%{top:6%;opacity:0} 15%{opacity:1} 85%{opacity:1} 100%{top:90%;opacity:0} }
/* contener: candado que “cierra” */
.rf-contain { animation: rfShake 5s ease-in-out infinite; }
@keyframes rfShake { 0%,86%,100%{transform:none} 90%{transform:translateX(-2px)} 94%{transform:translateX(2px)} }
.rf-contain .rf-lock { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0 var(--blue); animation: rfClose 5s ease-in-out infinite; }
@keyframes rfClose { 0%,40%{box-shadow:inset 0 0 0 0 transparent} 55%,100%{box-shadow:inset 0 0 0 2px color-mix(in oklch,var(--blue) 60%,transparent)} }
/* recuperar: ícono gira como refresh */
.rf-recover svg { animation: rfSpin 4s var(--ease) infinite; transform-origin: center; }
@keyframes rfSpin { 0%,55%{transform:rotate(0)} 80%,100%{transform:rotate(360deg)} }

/* ============================================================
   SOL-VISUAL : variantes vivas
   ============================================================ */
.sol-visual .wm { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 4; }
/* -- radar (Zscaler): alertas rojas -- */
.sv-radar.viz-on .targets i { animation-play-state: running; }
.sv-radar .targets i { background: var(--acc); box-shadow: 0 0 12px var(--acc); }
.sv-radar .targets i:nth-child(2), .sv-radar .targets i:nth-child(3) { background: #ff3b3b; box-shadow: 0 0 14px #ff3b3b; }
.sv-radar .targets i:nth-child(2)::after, .sv-radar .targets i:nth-child(3)::after { border-color: #ff3b3b; }
.radar-alert { position: absolute; top: 16px; left: 50%; transform: translateX(-50%) translateY(-8px); z-index: 5; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; color: #ff5a5a; background: color-mix(in oklch, #ff3b3b 16%, transparent); border: 1px solid color-mix(in oklch, #ff3b3b 40%, transparent); padding: 6px 12px; border-radius: 100px; opacity: 0; white-space: nowrap; width: max-content; text-align: center; }
.sv-radar.viz-on .radar-alert { animation: alertIn 4.5s ease-in-out infinite; }
@keyframes alertIn { 0%,18%{opacity:0;transform:translateX(-50%) translateY(-8px)} 26%,72%{opacity:1;transform:translateX(-50%) translateY(0)} 84%,100%{opacity:0;transform:translateX(-50%) translateY(-8px)} }

/* -- identidad (Microsoft): escudo + checks -- */
.sv-identity { --idc: var(--blue); }
.sv-identity .id-shield { position: relative; width: 116px; height: 116px; color: var(--blue); margin: 0 auto 26px; filter: drop-shadow(0 0 24px color-mix(in oklch, var(--blue) 50%, transparent)); }
.sv-identity .id-shield > svg { width: 100%; height: 100%; }
.sv-identity .id-shield .id-check { position: absolute; inset: 0; display: grid; place-content: center; color: var(--green); opacity: 0; transform: scale(0.5); }
:root[data-theme="light"] .sv-identity .id-shield .id-check { color: #5f7d00; }
.sv-identity .id-shield .id-check svg { width: 42px; height: 42px; }
.sv-identity.viz-on .id-shield .id-check { animation: idCheck 4s var(--ease) infinite; }
@keyframes idCheck { 0%,30%{opacity:0;transform:scale(0.5)} 42%,80%{opacity:1;transform:scale(1)} 92%,100%{opacity:0;transform:scale(0.5)} }
.sv-identity .id-checks { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; width: max-content; margin: 0 auto; }
.sv-identity .idc { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-2); opacity: 0; transform: translateX(-8px); }
.sv-identity .idc i { width: 14px; height: 14px; border-radius: 4px; background: color-mix(in oklch, var(--green) 20%, transparent); position: relative; }
.sv-identity .idc i::after { content: "✓"; position: absolute; inset: 0; display: grid; place-content: center; font-size: 9px; color: var(--green); }
:root[data-theme="light"] .sv-identity .idc i::after { color: #5f7d00; }
.sv-identity.viz-on .idc { animation: idcIn 4s var(--ease) infinite; animation-delay: var(--d); }
@keyframes idcIn { 0%,20%{opacity:0;transform:translateX(-8px)} 35%,88%{opacity:1;transform:none} 96%,100%{opacity:0} }

/* -- backup (Druva): panel de restauración -- */
.sv-backup .bk-panel { width: 84%; max-width: 320px; margin: 0 auto; padding: 18px; border-radius: 14px; background: var(--glass-2); border: 1px solid var(--glass-brd-2); backdrop-filter: blur(10px); }
.sv-backup .bk-row { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.sv-backup .bk-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-content: center; color: var(--druva); background: color-mix(in oklch, var(--druva) 16%, transparent); }
.sv-backup .bk-meta { flex: 1; text-align: left; }
.sv-backup .bk-meta b { display: block; font-size: 0.84rem; color: var(--ink-0); }
.sv-backup .bk-file { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-3); }
.sv-backup .bk-pct { font-family: var(--font-mono); font-size: 0.78rem; color: var(--green); font-weight: 600; }
:root[data-theme="light"] .sv-backup .bk-pct { color: #5f7d00; }
.sv-backup .bk-bar { height: 7px; border-radius: 100px; background: color-mix(in oklch, var(--ink-3) 22%, transparent); overflow: hidden; margin-bottom: 16px; }
.sv-backup .bk-bar i { display: block; height: 100%; width: 0; border-radius: 100px; background: linear-gradient(90deg, var(--druva), var(--green)); }
.sv-backup.viz-on .bk-bar i { /* impulsado por JS para sincronizar con el % */ }
@keyframes bkFill { 0%{width:0} 70%,100%{width:100%} }
.sv-backup.viz-on .bk-pct { animation: bkPct 4s steps(20) infinite; }
@keyframes bkPct { 0%{content:"0%"} 100%{content:"100%"} }
.sv-backup .bk-files { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.sv-backup .bkf { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-2); opacity: 0.3; }
.sv-backup .bkf i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--ink-3); position: relative; }
.sv-backup.viz-on .bkf { animation: bkfDone 6s var(--ease) infinite; animation-delay: var(--d); }
@keyframes bkfDone { 0%,7%{opacity:.3} 17%,100%{opacity:1} }
.sv-backup.viz-on .bkf i::after { content: "✓"; position: absolute; inset: 0; display: grid; place-content: center; font-size: 8px; color: var(--green); opacity: 0; animation: bkfChk 6s var(--ease) infinite; animation-delay: var(--d); }
@keyframes bkfChk { 0%,8%{opacity:0} 18%,100%{opacity:1} }
.sv-backup .bk-done { font-family: var(--font-mono); font-size: 0.68rem; color: var(--green); text-align: center; padding: 8px; border-radius: 8px; background: color-mix(in oklch, var(--green) 12%, transparent); opacity: 0; }
:root[data-theme="light"] .sv-backup .bk-done { color: #5f7d00; }
.sv-backup.viz-on .bk-done { animation: bkDone 6s var(--ease) infinite; }
@keyframes bkDone { 0%,62%{opacity:0} 72%,100%{opacity:1} }

@media (max-width: 1000px) {
  .phish-game { max-width: 100%; }
  .sv-backup .bk-files { grid-template-columns: 1fr; }
}

/* ============================================================
   AJUSTES — feedback del usuario
   ============================================================ */

/* cadena de ataque: MISMO fondo translúcido que las tarjetas de Servicios (.sol) */
.attack-chain .ac-step { background: var(--glass); border-color: var(--glass-brd); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

/* ---- correo de phishing: más aire arriba + cabecera equilibrada + ícono de marca ---- */
.phish-game { margin-top: 38px; }
.pg-card .mm-from { display: flex; align-items: center; gap: 12px; }
.pg-card .mm-id { flex: 1; min-width: 0; text-align: left; }
.pg-card .mm-id b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-card .mm-ava { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--glass-brd-2); display: grid; place-content: center; overflow: hidden; flex: none; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.pg-card .mm-ava img { width: 80%; height: 80%; object-fit: contain; display: block; }
.pg-card .mm-time { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-3); align-self: flex-start; flex: none; }

/* sección 03: alinear los estados (“Amenaza aislada”, etc.) al pie de cada tarjeta */
.recovery-flow .rf-step { display: flex; flex-direction: column; }
.recovery-flow .rf-step p { margin-bottom: 16px; }
.recovery-flow .rf-status { margin-top: auto; align-self: flex-start; }

/* ---- partners: logos ópticamente uniformes + tarjetas con presencia ---- */
.ally-card {
  justify-content: center; gap: 0; padding: 30px 28px; min-height: 188px;
  border-radius: 24px;
  background:
    radial-gradient(120% 120% at 30% 8%, color-mix(in oklch, var(--acc) 14%, transparent), transparent 60%),
    var(--glass);
}
.ally-card::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--acc), transparent); opacity: .55; }
.ally-card { position: relative; overflow: hidden; }
.ally-card:hover { border-color: color-mix(in oklch, var(--acc) 45%, transparent); transform: translateY(-4px); }
.ally-logo { height: 52px; margin-bottom: 26px; }
.ally-card .lg-ms { font-size: 1.45rem; }
.ally-card .plogo { max-width: 180px; }
.ally-card .plogo-zscaler { height: 34px; }
.ally-card .plogo-druva { height: 25px; }
.ally-card .ally-btns { margin-top: 0; }

/* Druva: ícono de restauración (flecha circular) que gira en bucle */
.sv-backup .bk-ic-restore svg { width: 20px; height: 20px; }
.sv-backup.viz-on .bk-ic-restore svg { animation: rfSpin 6s var(--ease) infinite; transform-origin: center; }

/* ---- captcha Cloudflare (invisible: se valida al dar clic) ---- */
.cf-field { margin: 2px 0; }
.cf-field:empty, .cf-field > .cf-turnstile:empty { min-height: 0; }
.btn.verifying { position: relative; opacity: .9; cursor: progress; }
.btn.verifying .ls-label { padding-left: 22px; }
.btn.verifying::before { content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -52px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: cfSpin .7s linear infinite; }
@keyframes cfSpin { to { transform: rotate(360deg); } }

/* ============================================================
   Phishing — puntos de progreso + ciclo de correos
   ============================================================ */
.pg-num { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.pg-num i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); opacity: .4; transition: all .45s var(--ease); }
.pg-num i.on { opacity: 1; width: 17px; border-radius: 3px; background: var(--cyan); box-shadow: 0 0 9px color-mix(in oklch, var(--cyan) 70%, transparent); }

.pg-card { transition: box-shadow .45s var(--ease), border-color .45s var(--ease); }
/* altura constante: el cuerpo y el texto no cambian de tamaño al rotar correos */
.pg-card .mm-body { min-height: 250px; box-sizing: border-box; }
.pg-card .mm-subject { min-height: 1.4em; }
.pg-card .mm-text { min-height: 65px; }
.pg-card .mm-body { transition: opacity .5s var(--ease), transform .5s var(--ease), filter .5s var(--ease); }
.pg-card .mm-body.pg-out { opacity: 0; transform: translateX(-26px) scale(.985); filter: blur(2px); }
.pg-card .mm-body.pg-in { animation: pgMailIn .72s var(--ease); }
@keyframes pgMailIn {
  0% { opacity: 0; transform: translateX(30px) scale(.985); filter: blur(3px); }
  100% { opacity: 1; transform: none; filter: none; }
}
.pg-card.pg-caught {
  border-color: color-mix(in oklch, #ff5a45 60%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklch, #ff5a45 38%, transparent), var(--shadow), 0 0 46px -8px color-mix(in oklch, #ff5a45 45%, transparent);
}
.pg-card.pg-arrive {
  border-color: color-mix(in oklch, var(--blue) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--blue) 34%, transparent), var(--shadow), 0 0 46px -10px color-mix(in oklch, var(--blue) 45%, transparent);
}

/* ============================================================
   Comparativa Sin / Con Detexum (neuromarketing: dolor → alivio)
   ============================================================ */
.diff-sec .section-head { margin-inline: auto; }

/* ---- comparador arrastrable antes/después ---- */
.diff-compare {
  position: relative; margin-top: 54px;
  border: 1px solid var(--glass-brd); border-radius: 22px; overflow: hidden;
  box-shadow: var(--shadow);
  user-select: none; -webkit-user-select: none; touch-action: pan-y;
  cursor: ew-resize;
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.diff-compare.in { opacity: 1; transform: none; }

.dc-pane { padding: 30px clamp(20px, 3.2vw, 46px) 30px; }

/* palabra de fondo en grande que se revela con el arrastre */
.dc-watermark {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.6rem, 9vw, 6rem); letter-spacing: -0.03em; line-height: .85;
  white-space: nowrap; pointer-events: none; z-index: 0; user-select: none;
}
.dc-con .dc-watermark { color: var(--green); opacity: .15; }
.dc-sin .dc-watermark { color: #ff5a45; opacity: .15; }
:root[data-theme="light"] .dc-con .dc-watermark { color: #5f7d00; opacity: .12; }
:root[data-theme="light"] .dc-sin .dc-watermark { opacity: .12; }

/* insignia de estado (esquina superior derecha): versión llamativa de la
   marca de agua, para que "desprotegido/protegido" se note de verdad */
.dc-status {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px;
  border-radius: 100px; font-family: var(--font-mono); font-weight: 700;
  font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.dc-status.sin, .dc-status.con { animation: dcStatusPulse 1.7s ease-in-out infinite; }
.dc-status.sin { color: #ff6a55; background: color-mix(in oklch, #ff5a45 16%, transparent); border: 1px solid color-mix(in oklch, #ff5a45 38%, transparent); }
.dc-status.con { color: var(--green); background: color-mix(in oklch, var(--green) 16%, transparent); border: 1px solid color-mix(in oklch, var(--green) 42%, transparent); }
:root[data-theme="light"] .dc-status.con { color: #5f7d00; }
.dc-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; flex: none; }
.dc-status.con svg { filter: drop-shadow(0 0 4px currentColor); }
.dc-status.con svg { flex: none; }
/* mismo pulso para ambos estados (currentColor se adapta a rojo/verde) */
@keyframes dcStatusPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, currentColor 60%, transparent); }
  50% { box-shadow: 0 0 0 8px transparent; }
}
/* el contenido va por encima de la marca de agua */
.dc-head, .dc-list { position: relative; z-index: 1; }
/* base = Sin Detexum (el problema), define la altura */
.dc-sin {
  position: relative; z-index: 1;
  background: color-mix(in oklch, #ff5a45 7%, var(--glass));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
/* capa revelada = Con Detexum (la solución), recortada por el slider */
.dc-con {
  position: absolute; inset: 0; z-index: 2;
  background: color-mix(in oklch, var(--green) 9%, var(--glass));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  -webkit-clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  box-shadow: inset 0 0 90px -30px color-mix(in oklch, var(--green) 55%, transparent);
}
.diff-compare.anim .dc-con { transition: clip-path .42s var(--ease), -webkit-clip-path .42s var(--ease); }
.diff-compare.anim .dc-handle { transition: left .42s var(--ease); }

/* cabeceras: Con mira a la derecha, Sin mira a la izquierda → se encuentran en el slider */
.dc-head { display: flex; flex-direction: column; gap: 7px; height: 52px; justify-content: center; margin-bottom: 14px; }
.dc-con .dc-head { align-items: flex-start; text-align: left; }
.dc-sin .dc-head { align-items: flex-end; text-align: right; }

.diff-tag {
  font-family: var(--font-mono); font-size: .78rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
}
.diff-tag.sin { color: #ff6a55; flex-direction: row-reverse; }
.diff-tag.con { color: var(--green); }
:root[data-theme="light"] .diff-tag.con { color: #5f7d00; }
.diff-tag .dt-ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-content: center; flex: none; }
.diff-tag.sin .dt-ic { background: color-mix(in oklch, #ff5a45 18%, transparent); }
.diff-tag.con .dt-ic { background: color-mix(in oklch, var(--green) 20%, transparent); }
.diff-sub { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; color: var(--ink-3); }

.dc-list { list-style: none; display: flex; flex-direction: column; }
.dc-row {
  display: flex; gap: 14px; align-items: center;
  height: 80px; padding: 0 4px; border-top: 1px solid var(--glass-brd);
}
.dc-row:first-child { border-top: none; }
.dc-sin .dc-row { flex-direction: row-reverse; text-align: right; }
.di-ic { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-content: center; }
.dc-sin .di-ic { background: color-mix(in oklch, #ff5a45 15%, transparent); color: #ff6a55; }
.dc-con .di-ic { background: color-mix(in oklch, var(--green) 18%, transparent); color: var(--green); }
:root[data-theme="light"] .dc-con .di-ic { color: #5f7d00; }
.di-body { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.dc-sin .di-body { align-items: flex-end; }
.di-body b { color: var(--ink-0); font-size: .96rem; font-weight: 600; font-family: var(--font-body); line-height: 1.25; }
.di-body span { color: var(--ink-2); font-size: .84rem; line-height: 1.4; text-wrap: pretty; }

/* manija */
.dc-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; z-index: 4; transform: translateX(-1px); }
.dc-handle::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, color-mix(in oklch, var(--ink-0) 85%, transparent) 12%, color-mix(in oklch, var(--ink-0) 85%, transparent) 88%, transparent);
}
.dc-grab {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-content: center; color: var(--bg);
  background: var(--ink-0); border: 3px solid var(--bg);
  box-shadow: 0 6px 22px -4px rgba(0,0,0,.5), 0 0 0 1px var(--glass-brd-2);
  cursor: ew-resize; transition: transform .18s var(--ease), box-shadow .25s var(--ease);
}
.diff-compare.dragging .dc-grab { transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 8px 30px -4px rgba(0,0,0,.6), 0 0 0 8px color-mix(in oklch, var(--cyan) 22%, transparent); }
.dc-grab svg { opacity: .9; }
/* respiración hasta el primer arrastre */
.diff-compare:not(.touched) .dc-grab { animation: dcPulse 2.6s var(--ease) infinite; }
@keyframes dcPulse {
  0%, 100% { box-shadow: 0 6px 22px -4px rgba(0,0,0,.5), 0 0 0 0 color-mix(in oklch, var(--cyan) 32%, transparent); }
  55% { box-shadow: 0 6px 22px -4px rgba(0,0,0,.5), 0 0 0 9px transparent; }
}
.dc-drag-hint {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); background: color-mix(in oklch, var(--bg) 72%, transparent);
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--glass-brd);
  white-space: nowrap; pointer-events: none; z-index: 5; backdrop-filter: blur(6px);
  transition: opacity .4s var(--ease);
}
.diff-compare.touched .dc-drag-hint { opacity: 0; }

.diff-cta { margin-top: 42px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.diff-cta p {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.35rem, 2.6vw, 1.95rem); letter-spacing: -0.02em; color: var(--ink-0);
}

.dc-mobile-tabs { display: none; }

@media (max-width: 720px) {
  /* el drag-to-reveal necesita dos columnas anchas lado a lado; en móvil no
     hay espacio para eso sin que el texto de ambas tarjetas se encime. En vez
     de apilarlas planas, mantenemos el "efecto" con dos pestañas que
     transforman la tarjeta de un estado al otro al tocarlas. */
  .dc-mobile-tabs { display: flex; gap: 10px; margin: 28px 0 16px; }
  .dc-mtab {
    flex: 1; padding: 13px 14px; border-radius: 100px; border: 1px solid var(--glass-brd-2);
    background: var(--glass-2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    font-family: var(--font-body); font-weight: 700; font-size: 0.88rem; color: var(--ink-2);
    cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .2s, box-shadow .25s;
  }
  .dc-mtab.active { color: #fff; transform: translateY(-1px); border-color: transparent; }
  .dc-mtab[data-pane="sin"].active { background: linear-gradient(120deg,#ff6a55,#ff4d4d); box-shadow: 0 10px 24px -10px rgba(255,74,58,.65); }
  .dc-mtab[data-pane="con"].active { background: linear-gradient(120deg, var(--green), #6fae00); box-shadow: 0 10px 24px -10px color-mix(in oklch, var(--green) 65%, transparent); }

  .diff-compare { cursor: default; }
  .dc-sin, .dc-con {
    position: relative; inset: auto; z-index: 1;
    clip-path: none; -webkit-clip-path: none; box-shadow: none;
  }
  /* la marca de agua gigante y tenue no se apreciaba bien en móvil; la
     reemplaza la insignia .dc-status, arriba a la derecha, mucho más visible */
  .dc-watermark { display: none; }
  .dc-status { top: 22px; right: 20px; }
  .dc-con { display: none; }
  .diff-compare.show-con .dc-con { display: block; animation: dcPaneIn .4s var(--ease) both; }
  .diff-compare.show-con .dc-sin { display: none; }
  .dc-sin { animation: dcPaneIn .4s var(--ease) both; }
  .dc-handle, .dc-drag-hint { display: none; }
  .dc-sin .dc-head { align-items: flex-start; text-align: left; }
  .dc-sin .dc-row { flex-direction: row; text-align: left; }
  .dc-sin .di-body { align-items: flex-start; }

  .dc-pane { padding: 26px clamp(18px, 4vw, 30px); }
  .dc-watermark { font-size: clamp(1.9rem, 11vw, 2.8rem); }
  .dc-row { height: auto; min-height: 88px; gap: 11px; padding-block: 10px; }
  .di-body b { font-size: .9rem; }
  .di-body span { font-size: .78rem; }
  .diff-tag { font-size: .72rem; }
}
@keyframes dcPaneIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .diff-compare { opacity: 1; transform: none; }
  .diff-compare:not(.touched) .dc-grab { animation: none; }
}

/* ---- scrollspy: enlace activo de la navegación ---- */
.navlinks > a.active, .navitem > a.active { color: var(--ink-0); font-weight: 600; }