/* RedScopeX — sistema visual del sitio público (vanilla, sin build).
 * Paleta y tokens heredados sin cambios del sitio anterior; el resto son
 * componentes nuevos para la IA multi-página (nav con dropdowns, breadcrumbs,
 * scrollytelling, comparación, capacidades, legales). */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#070809;--bg2:#101216;--bg3:#15171d;--panel:rgba(255,255,255,.03);
  --border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.14);
  --text:#eceef2;--text2:#8b919c;--text3:#5a616e;
  --accent:#e6363f;--accent2:#f24d57;--accent-soft:rgba(230,54,63,.12);
  --green:#2bbd93;--green-soft:rgba(43,189,147,.13);--steel:#6d8aad;--steel-soft:rgba(109,138,173,.14);
  --amber:#cf8a44;--amber-soft:rgba(207,138,68,.14);
  --font:Inter,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  --maxw:1180px;--maxw-prose:760px;
}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent2)}
h1,h2,h3{font-weight:600;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
p{text-wrap:pretty}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:8px;
  font-size:14px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:all .18s;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent2);transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:var(--border2);color:var(--text)}
.btn-ghost:hover{border-color:var(--text2);background:var(--panel)}
@media(prefers-reduced-motion:reduce){.btn-primary:hover{transform:none}}

/* ── Accesibilidad transversal ───────────────────────────────────────── */
:focus-visible{outline:2px solid var(--accent2);outline-offset:3px;border-radius:3px}
.skip-link{position:absolute;left:12px;top:-60px;z-index:200;background:var(--accent);color:#fff;
  padding:10px 16px;border-radius:8px;font-size:13px;font-weight:600;transition:top .15s ease}
.skip-link:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Nav ──────────────────────────────────────────────────────────────
   Header transparente sobre el hero, sólido tras `.scrolled`. Dropdowns
   accesibles: <button aria-expanded> + panel; Escape cierra, click fuera
   cierra, funcionan sin JS como enlaces normales (el primer item de cada
   dropdown es la página de índice de esa sección). */
header.nav{position:fixed;top:0;left:0;right:0;z-index:60;
  backdrop-filter:blur(14px);background:rgba(7,8,9,.72);border-bottom:1px solid var(--border);
  transition:background-color .3s ease,box-shadow .3s ease}
header.nav.scrolled{background:rgba(7,8,9,.94);box-shadow:0 8px 28px rgba(0,0,0,.35)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.02em;font-size:18px;flex-shrink:0}
.brand img{height:38px;width:auto}
.brand b{color:var(--accent2)}
/* El header necesita más ancho que --maxw para 6 ítems + CTA sin apretarse;
   solo afecta la barra de navegación, no el resto del contenido de la página. */
header.nav .wrap{max-width:1340px}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links>a,.nd>button{font-size:14px;color:var(--text2);transition:color .15s;padding:8px 10px;
  border-radius:7px;background:none;border:none;font:inherit;cursor:pointer;display:flex;align-items:center;gap:5px}
.nav-links>a:hover,.nd>button:hover,.nd.open>button{color:var(--text)}
.nd{position:relative}
.nd>button svg{transition:transform .15s}
.nd.open>button svg{transform:rotate(180deg)}
.nd-panel{position:absolute;top:calc(100% + 8px);left:0;min-width:260px;background:var(--bg2);
  border:1px solid var(--border2);border-radius:12px;padding:8px;box-shadow:0 16px 40px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .15s,transform .15s,visibility .15s}
.nd.open .nd-panel{opacity:1;visibility:visible;transform:none}
.nd-panel a{display:block;padding:9px 12px;border-radius:8px;font-size:13.5px;color:var(--text2)}
.nd-panel a:hover,.nd-panel a:focus-visible{background:var(--panel);color:var(--text)}
.nd-panel a .d{display:block;font-size:12px;color:var(--text3);margin-top:1px;font-weight:400}
/* Panel agrupado (Soluciones): grid de 2 columnas, cada grupo con su título;
   como los 3 grupos tienen tamaño par (2/4/2 ítems) el auto-flow siempre
   completa filas enteras, sin huecos. Ancho fijo (no "min-width" suelto) para
   que no se vea como tarjeta flotante improvisada, y para no desbordar el
   viewport en desktop angosto (1024px) — verificado. */
.nd-panel-grouped{width:min(560px,calc(100vw - 48px));padding:14px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:2px 18px;align-content:start}
.nd-group-title{grid-column:1/-1;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text3);padding:14px 12px 6px;margin:0}
.nd-group-title:first-child{padding-top:6px}
@media(prefers-reduced-motion:reduce){.nd-panel,.nd>button svg{transition:none}}
.nav-cta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.lang-switch{display:flex;align-items:center;gap:2px;border:1px solid var(--border2);border-radius:8px;padding:3px;font-size:12px;font-weight:600}
.lang-switch a{padding:3px 9px;border-radius:5px;color:var(--text2);line-height:1}
.lang-switch a.on{background:var(--panel);color:var(--text)}
.lang-switch a:hover{color:var(--text)}
.nav-burger{display:none;background:none;border:1px solid var(--border2);border-radius:8px;
  width:38px;height:38px;align-items:center;justify-content:center;color:var(--text);cursor:pointer}
/* 1320px, no 980px: con 6 ítems (Plataforma/Soluciones dropdowns + Servicios/
   Recursos/Por qué RedScopeX/Planes) más brand+CTA, el nav de escritorio no
   entra en una sola línea por debajo de ~1270px de viewport (medido con
   Playwright) — probarlo solo visualmente con `overflow-x` no lo detecta,
   porque flexbox encoge el texto en vez de desbordar. */
@media(max-width:1320px){
  .nav-links{display:none}
  .nav-burger{display:flex}
  /* height explícito, no bottom:0 — header.nav tiene backdrop-filter, que
     por spec crea containing block para sus descendientes position:fixed;
     bottom:0 se resolvía contra la caja de 64px de header.nav (colapsando
     el menú a una franja) en vez de contra el viewport. height evita
     depender de ese containing block. */
  header.nav.menu-open .nav-links{display:flex;position:fixed;top:64px;right:0;left:0;height:calc(100vh - 64px);
    flex-direction:column;align-items:stretch;gap:0;background:var(--bg);padding:10px 20px 30px;overflow-y:auto}
  header.nav.menu-open .nav-links>a,header.nav.menu-open .nd>button{width:100%;justify-content:space-between;
    padding:14px 6px;border-bottom:1px solid var(--border);border-radius:0}
  header.nav.menu-open .nd-panel{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:none;background:none;padding:0 0 0 12px;display:none;width:auto}
  header.nav.menu-open .nd.open .nd-panel{display:block}
  /* Móvil/tablet: acordeón de una sola columna, sin grid de 2 — el ancho de
     pantalla no alcanza para 2 columnas legibles con target táctil correcto. */
  header.nav.menu-open .nd-panel-grouped{display:none;grid-template-columns:1fr;gap:0}
  header.nav.menu-open .nd.open .nd-panel-grouped{display:grid}
  header.nav.menu-open .nd-group-title{padding:16px 6px 6px}
  header.nav.menu-open .nd-panel a{padding:11px 6px;min-height:44px;display:flex;flex-direction:column;
    justify-content:center;font-size:15px}
  header.nav.menu-open .nd-panel a .d{font-size:14px}
}
@media(max-width:560px){
  .wrap{padding:0 16px}
  .nav-cta{gap:5px}
  .nav-cta .btn-ghost{display:none}
  .nav-cta .btn-primary{padding:10px 12px;font-size:12.5px}
  .lang-switch{padding:2px}
  .lang-switch a{padding:3px 6px}
  .nav-burger{width:34px;height:34px}
}

/* ── Breadcrumb ───────────────────────────────────────────────────────── */
.crumbs{padding:104px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--text3)}
.crumbs a{color:var(--text3)}
.crumbs a:hover{color:var(--text2)}
.crumbs li:not(:last-child)::after{content:'/';margin-left:8px;color:var(--text3);opacity:.5}
.crumbs li[aria-current]{color:var(--text2)}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:96vh;display:flex;align-items:center;overflow:hidden;padding-top:64px}
.hero-grad{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(1100px 640px at 74% 40%,rgba(109,138,173,.10),transparent 62%),
    linear-gradient(90deg,var(--bg) 10%,transparent 58%)}
/* Grid real de 2 columnas (~46/54) en vez del overlay position:absolute
   anterior: el texto y el visual ahora son pistas de grid reales que nunca
   se pisan por construcción, sin depender de anchos afinados a mano por
   breakpoint (ver commit de la sesión anterior que tuvo que reducir el
   ratio del 52% al 35.5% para evitar solapamiento — con grid ese problema
   deja de poder existir). */
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:48px;align-items:center;width:100%;padding:56px 0}
.hero-in{min-width:0}
.hero h1{font-size:clamp(32px,4.3vw,50px);max-width:15ch;margin:16px 0}
.hero p.lead{font-size:clamp(16px,1.8vw,19px);color:var(--text2);max-width:42ch;margin-bottom:28px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-proof{display:flex;gap:20px 28px;margin-top:42px;flex-wrap:wrap;max-width:480px}
.hero-proof span{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text2)}
.hero-proof svg{color:var(--green);flex-shrink:0}
.hero-a11y{margin-top:24px}
.hero-in>*{opacity:0;animation:heroIn .7s cubic-bezier(.34,1.56,.64,1) both}
.hero-in>*:nth-child(1){animation-delay:.05s}.hero-in>*:nth-child(2){animation-delay:.14s}
.hero-in>*:nth-child(3){animation-delay:.23s}.hero-in>*:nth-child(4){animation-delay:.32s}
.hero-in>*:nth-child(5){animation-delay:.41s}.hero-in>*:nth-child(6){animation-delay:.5s}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero-in>*{animation:none;opacity:1}}

/* ── Hero visual: globo SVG ligero (reemplaza three.js/globe.js pesado Y el
   grafo anterior "organización + activos") ───────────────────────────────
   Retícula de esfera 100% declarativa (clip-path + elipses de latitud/
   longitud, sin canvas/WebGL/imágenes), con activos conocidos, shadow IT/
   desconocidos y una ruta de exposición que RedScopeX detecta y contiene.
   DEFAULT (sin JS / reduced-motion) = estado final "contenido" completo:
   todo visible, ruta verde, escudo, icono de escudo. hero-visual.js recorre
   hacia atrás los data-stage="known|shadow|path|detected" para reproducir
   la secuencia y repetirla cada ~25s mientras el hero esté en viewport; sin
   JS nunca se setea data-stage, así que el diagrama completo se ve igual. */
.hero-visual{width:100%;max-width:600px;aspect-ratio:1/1;margin-inline:auto}
.hero-visual svg{width:100%;height:100%;overflow:visible}
/* Parallax sutil (JS, máx. ~11px) del grupo completo — nunca del contenedor,
   así que no genera layout shift. */
.hv-parallax{transition:transform .25s ease-out}
/* Rotación lenta pero perceptible de la retícula únicamente (no de los
   nodos/ruta). Segura porque el clip circular está centrado exactamente en
   el eje de rotación (280,280): un círculo es simétrico por rotación. */
.hv-wire{fill:none;stroke:var(--steel);stroke-width:1.1;opacity:.4;
  transform-box:view-box;transform-origin:280px 280px;animation:hvRotate 85s linear infinite}
@keyframes hvRotate{to{transform:rotate(360deg)}}
.hv-sphere{fill:var(--bg2);stroke:var(--border2);stroke-width:1.6;opacity:.9}
.hv-ambient circle{fill:var(--steel);opacity:.28}
/* Grupo de contenido "revelable": hero-visual.js lo desvanece brevemente
   entre repeticiones del ciclo para resetear sin que se note el salto. */
.hv-reveal{transition:opacity .3s ease}
.hv-edge{fill:none;stroke:var(--border2);stroke-width:1.4}
.hv-edge.crit{stroke:var(--green);stroke-dashoffset:0;
  transition:stroke-dashoffset 1.1s cubic-bezier(.16,.84,.44,1),stroke .5s ease}
.hv-node{fill:var(--bg2);stroke:var(--border2);stroke-width:1.4}
.hv-node.known{stroke:var(--steel)}
.hv-node.unknown{stroke:var(--amber);stroke-dasharray:3 2;transition:opacity .6s ease}
.hv-node.crit{stroke:var(--accent);stroke-width:2.6}
.hv-identity{stroke:var(--green);transition:stroke .5s ease}
.hv-identity-icon-default{opacity:0;color:var(--accent2);transition:opacity .4s ease}
.hv-identity-icon-detected{opacity:0;color:var(--amber);transition:opacity .4s ease}
.hv-identity-icon-contained{opacity:1;color:var(--green);transition:opacity .4s ease}
.hv-dot{fill:var(--text2)}
.hv-dot.crit{fill:var(--green);transition:fill .5s ease}
.hv-label{font-family:var(--mono);font-size:10px;fill:var(--text3);transition:opacity .6s ease}
.unknown-label{transition:opacity .6s ease}
/* Aparición de shadow IT/desconocidos con un pequeño escalonado entre los
   tres nodos (transition-delay, no animation-delay: así puede repetirse). */
.hv-delay-1{transition-delay:0s}.hv-delay-2{transition-delay:.15s}.hv-delay-3{transition-delay:.3s}
/* "Ruta detectada" (ámbar) vs. "Ruta contenida" (verde) — color distinto,
   no solo texto distinto. */
.only-detect{opacity:0;fill:var(--amber);transition:opacity .3s ease}
.only-contained{opacity:1;fill:var(--green);transition:opacity .3s ease}
.hv-detect-ring{fill:none;stroke:var(--green);stroke-width:1.5;opacity:.9;
  transition:opacity .4s ease,stroke .4s ease}
.hv-shield-group{opacity:1;transition:opacity .4s ease}
.hv-shield{fill:var(--bg2);stroke:var(--green);stroke-width:1.6}
.hv-shield-check{fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hv-pulse{animation:hvPulse 2.6s ease-in-out infinite}
@keyframes hvPulse{0%,100%{opacity:1}50%{opacity:.35}}
/* ── Estados por etapa (JS, mismo patrón que el scrollytelling de más abajo:
   data-stage en el <svg>, todo lo demás son overrides puntuales del final
   "contenido" de arriba) — known/shadow/path/detected retroceden desde ahí. */
[data-stage="known"] .hv-node.unknown,[data-stage="known"] .unknown-label{opacity:0}
[data-stage="known"] .hv-edge.crit,[data-stage="shadow"] .hv-edge.crit{opacity:0}
[data-stage="path"] .hv-edge.crit,[data-stage="detected"] .hv-edge.crit{stroke:var(--accent)}
[data-stage="known"] .hv-identity,[data-stage="shadow"] .hv-identity,
[data-stage="path"] .hv-identity,[data-stage="detected"] .hv-identity{stroke:var(--accent)}
[data-stage="known"] .hv-dot.crit,[data-stage="shadow"] .hv-dot.crit,
[data-stage="path"] .hv-dot.crit,[data-stage="detected"] .hv-dot.crit{fill:var(--accent)}
[data-stage="known"] .hv-identity-icon-default,[data-stage="shadow"] .hv-identity-icon-default,
[data-stage="path"] .hv-identity-icon-default{opacity:1}
[data-stage="known"] .hv-identity-icon-contained,[data-stage="shadow"] .hv-identity-icon-contained,
[data-stage="path"] .hv-identity-icon-contained,[data-stage="detected"] .hv-identity-icon-contained{opacity:0}
[data-stage="detected"] .hv-identity-icon-detected{opacity:1}
[data-stage="known"] .hv-detect-ring,[data-stage="shadow"] .hv-detect-ring,
[data-stage="path"] .hv-detect-ring{opacity:0}
[data-stage="detected"] .hv-detect-ring{stroke:var(--amber);stroke-dasharray:3 3}
[data-stage="known"] .hv-shield-group,[data-stage="shadow"] .hv-shield-group,
[data-stage="path"] .hv-shield-group,[data-stage="detected"] .hv-shield-group{opacity:0}
[data-stage="known"] .only-contained,[data-stage="shadow"] .only-contained,
[data-stage="path"] .only-contained,[data-stage="detected"] .only-contained{opacity:0}
[data-stage="detected"] .only-detect{opacity:1}
@media(prefers-reduced-motion:reduce){
  .hv-wire{animation:none}
  .hv-pulse{animation:none}
  .hv-edge.crit{transition:none}
  .hv-node.unknown,.unknown-label,.hv-identity,.hv-identity-icon-default,
  .hv-identity-icon-detected,.hv-identity-icon-contained,.hv-dot.crit,.only-detect,.only-contained,
  .hv-detect-ring,.hv-shield-group{transition:none}
}
@media(max-width:980px){
  .hero{min-height:auto;padding-bottom:36px}
  .hero-grid{display:block;padding:40px 0}
  /* El visual queda debajo del copy en el DOM real (orden fuente = orden
     visual en mobile, sin necesitar order:2) porque ya no vive en una
     pista de grid separada — ver HTML: hero-in cierra antes de que abra
     hero-visual. */
  .hero-visual{max-width:360px;margin:28px auto 0}
  .hero-grad{display:none}
}

/* ── Secciones genéricas ─────────────────────────────────────────────── */
section{padding:88px 0;position:relative;scroll-margin-top:76px}
.sec-head{max-width:64ch;margin-bottom:44px}
.sec-head h2{font-size:clamp(24px,3.2vw,38px);margin:12px 0 14px}
.sec-head p{color:var(--text2);font-size:16.5px}
.sec-head.center{text-align:center;margin-left:auto;margin-right:auto}

/* ── Conocido vs. desconocido ─────────────────────────────────────────── */
.known-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px}
@media(max-width:820px){.known-grid{grid-template-columns:1fr}}
.kv-col{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:26px}
.kv-col.warn{border-color:rgba(207,138,68,.35)}
.kv-col h3{font-size:15px;letter-spacing:.02em;text-transform:uppercase;color:var(--text2);margin-bottom:16px;
  display:flex;align-items:center;gap:8px}
.kv-col.warn h3{color:var(--amber)}
.kv-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.kv-col li{font-size:14.5px;color:var(--text2);display:flex;gap:10px;align-items:flex-start}
.kv-col li::before{content:'';width:7px;height:7px;border-radius:50%;margin-top:7px;flex-shrink:0;background:var(--steel)}
.kv-col.warn li::before{background:var(--amber)}

/* ── Scrollytelling (RS-SITE-CONTINUUM, reconstruido) ─────────────────────
   Modelo: las 6 `.story-stage` son la ÚNICA copia del contenido — viven
   siempre en flujo normal, siempre visibles, y SON el equivalente accesible
   (no existe un transcript aparte que las duplique). En desktop, la columna
   visual es un panel sticky que vive en SU PROPIA fila de grid — la altura
   de esa fila la da la columna de texto (6 bloques con min-height), nunca
   contenido adicional dentro de la columna visual — así el panel se
   "suelta" exactamente cuando termina el texto, nunca antes, nunca
   solapando lo que viene después. Ver diagnóstico completo en
   docs/tickets/site-scrollytelling-overlap-diagnosis.md. */
.story{position:relative}
/* Franja más ancha que el --maxw general (1180px) del resto del sitio:
   con 1fr/1fr dentro de 1180px el panel visual quedaba topado en ~534px
   en TODOS los anchos >=1366px (nunca crecía con el viewport). El panel
   ahora usa clamp() para escalar de verdad; misma especificidad que .wrap
   pero declarado después, por lo tanto gana. */
.story-grid{display:grid;grid-template-columns:minmax(300px,1fr) clamp(520px,42vw,780px);
  gap:56px;align-items:start;max-width:1500px}
.story-col-text{display:flex;flex-direction:column;min-width:0}
.story-stage{min-height:72vh;display:flex;flex-direction:column;justify-content:center;
  padding:30px 0;border-top:1px solid var(--border)}
.story-stage:first-child{border-top:none}
.story-stage .n{font-family:var(--mono);font-size:12px;color:var(--accent2);font-weight:600;letter-spacing:.04em}
.story-stage h3{font-size:clamp(22px,2.6vw,30px);margin:10px 0 12px}
.story-stage p{color:var(--text2);font-size:16px;max-width:46ch}
.story-col-visual{position:relative;align-self:stretch}
.story-sticky-panel{position:sticky;top:80px}
.story-progress{display:flex;gap:6px;margin-top:22px}
.story-progress button{flex:1;height:4px;border-radius:2px;background:var(--border2);border:none;
  cursor:pointer;padding:0;position:relative}
.story-progress button[aria-current="true"]{background:var(--accent)}
.story-visual{background:var(--bg2);border:1px solid var(--border);border-radius:20px;overflow:hidden;
  aspect-ratio:23/20;display:flex;align-items:center;justify-content:center;padding:16px}
.story-visual svg{width:100%;height:100%}
/* Visual simplificada por etapa, solo para móvil/tablet — ver @media abajo. */
.story-stage-visual-mobile{display:none}
/* Ruta con 6 nodos diferenciados por icono (nunca círculos idénticos para
   conceptos distintos): Subdominio olvidado → Portal expuesto → Secreto en
   repo → Credencial cloud → Identidad sin MFA → Producción. El propio
   gráfico narra la cadena — ver docs/tickets/redscopex-continuum-public-
   site-visual-improvements-and-licensing.md. */
.core-node{fill:var(--bg3);stroke:var(--border2);stroke-width:2.2;transition:stroke .35s,opacity .35s}
.core-node.production{stroke-width:2.6}
.core-edge{fill:none;stroke:var(--border2);stroke-width:2.2;transition:stroke .35s,opacity .35s}
.core-icon{color:var(--text2);transition:color .35s,opacity .35s}
.core-label{font-family:var(--mono);font-size:9.8px;fill:var(--text3);transition:fill .35s,opacity .35s}
.ctx-node{fill:var(--bg3);stroke:var(--steel);stroke-width:1.5;opacity:.85;transition:opacity .4s}
.ctx-node.noisy{stroke:var(--amber);stroke-dasharray:2.5 2}
.ctx-label{font-family:var(--mono);font-size:9px;fill:var(--text3);opacity:.85;transition:opacity .4s}
.only-prioritize,.only-remediate,.only-govern,.only-verify{opacity:0;transition:opacity .3s}
.tag-pill rect{fill:var(--bg3);stroke:var(--border2);stroke-width:1.2}
.tag-pill text{font-family:var(--mono);font-size:8.6px;fill:var(--text2)}
.verify-shield{fill:var(--bg2);stroke:var(--green);stroke-width:1.8}
.verify-check{fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.verify-ring{fill:none;stroke:var(--green);stroke-width:1.5;stroke-dasharray:3 3;opacity:0;transition:opacity .4s}
@media(prefers-reduced-motion:reduce){.core-node,.core-edge,.core-icon,.core-label,.ctx-node,.ctx-label,.only-prioritize,.only-remediate,.only-govern,.only-verify,.verify-ring{transition:none}}

/* ── Estados por etapa — data-stage="discover|connect|prioritize|remediate|
   govern|verify" en el <svg>, ver scroll-story.js. En "discover" solo se ve
   el inventario disperso (contexto + subdominio/portal, aún sin conectar).
   Desde "connect" la cadena completa se conecta y el contexto pasa a ruido
   de fondo. El color de la ruta evoluciona igual que en el hero: gris
   (descubierta) → rojo (priorizada) → ámbar (remediación/gobierno) → verde
   (verificada y contenida). Todo vía selectores de atributo. */
.s-from-connect{opacity:0}
[data-stage="connect"] .s-from-connect,[data-stage="prioritize"] .s-from-connect,
[data-stage="remediate"] .s-from-connect,[data-stage="govern"] .s-from-connect,
[data-stage="verify"] .s-from-connect{opacity:1}
[data-stage="connect"] .ctx-node,[data-stage="connect"] .ctx-label,
[data-stage="prioritize"] .ctx-node,[data-stage="prioritize"] .ctx-label,
[data-stage="remediate"] .ctx-node,[data-stage="remediate"] .ctx-label,
[data-stage="govern"] .ctx-node,[data-stage="govern"] .ctx-label,
[data-stage="verify"] .ctx-node,[data-stage="verify"] .ctx-label{opacity:.14}
[data-stage="prioritize"] .core-edge,[data-stage="prioritize"] .core-node,[data-stage="prioritize"] .core-icon{stroke:var(--accent);color:var(--accent)}
[data-stage="remediate"] .core-edge,[data-stage="remediate"] .core-node,[data-stage="remediate"] .core-icon,
[data-stage="govern"] .core-edge,[data-stage="govern"] .core-node,[data-stage="govern"] .core-icon{stroke:var(--amber);color:var(--amber)}
[data-stage="verify"] .core-edge,[data-stage="verify"] .core-node,[data-stage="verify"] .core-icon{stroke:var(--green);color:var(--green)}
[data-stage="prioritize"] .only-prioritize,[data-stage="remediate"] .only-remediate,
[data-stage="govern"] .only-govern,[data-stage="verify"] .only-verify{opacity:1}
/* Verify: la última arista (identidad → producción) se atenúa y un tramo
   corto + escudo con check marca el punto de contención, en vez de terminar
   en un nodo "abierto". */
.edge-final-full{transition:opacity .35s}
[data-stage="verify"] .edge-final-full{opacity:0}
[data-stage="verify"] .verify-ring{opacity:1}
@media(max-width:900px){
  /* Sin sticky por debajo del breakpoint: secuencia normal, cada etapa con
     su propia visual simplificada (misma plantilla SVG, estado fijo por
     etapa — sin JS, sin duplicar el panel compartido de desktop). */
  .story-grid{display:block}
  .story-col-visual{display:none}
  .story-stage{min-height:0;border-top:none;padding:20px 0;gap:0}
  .story-stage:first-child{padding-top:0}
  .story-stage-visual-mobile{display:block;aspect-ratio:16/10;max-width:420px;margin:0 0 18px;
    background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:14px}
  .story-stage-visual-mobile svg{width:100%;height:100%}
}

/* ── Fragmentación: herramientas → núcleo Continuum → ruta conectada ─────
   Reemplaza el grid de tarjetas + flecha de texto + tarjeta explicativa
   estática por una composición de 3 zonas. Visible y completo sin JS
   (DEFAULT = estado final "conectado": herramientas visibles, núcleo
   activo, ruta trazada, nodo final priorizado). frag-visual.js recorre
   hacia atrás data-stage="tools|signals|core|path" para reproducir la
   secuencia y repetirla cada ~16s, mismo patrón que hero-visual.js. */
.frag-viz{display:flex;flex-direction:column;gap:36px;margin:8px 0 40px}
.frag-reveal{transition:opacity .3s ease}

/* Zona 1 — herramientas */
.frag-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.frag-tool{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:18px 14px;text-align:center}
.ft-icon{width:46px;height:46px;margin:0 auto 12px;border-radius:12px;position:relative;
  display:flex;align-items:center;justify-content:center}
.ft-icon svg{width:26px;height:26px}
.frag-tool.steel .ft-icon{background:var(--steel-soft);color:var(--steel)}
.frag-tool.teal .ft-icon{background:var(--green-soft);color:var(--green)}
.ft-dot{position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;
  background:currentColor;opacity:0;transition:opacity .3s ease}
.frag-tool h4{font-size:13.5px;font-weight:600;color:var(--text2);margin-bottom:4px}
.frag-tool .ft-signal{font-size:12px;color:var(--text3)}

/* Zona 2 — núcleo Continuum */
.frag-core{display:flex;flex-direction:column;align-items:center;gap:10px;
  opacity:1;transform:scale(1);transition:opacity .5s ease,transform .5s ease}
.frag-core-icon{width:88px;height:88px;border-radius:50%;background:var(--bg3);
  border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;color:var(--green)}
.frag-core-icon svg{width:48px;height:48px}
.core-link{stroke-dasharray:24;stroke-dashoffset:0;transition:stroke-dashoffset .8s ease}
.frag-core h4{font-size:14px;font-weight:600;color:var(--text)}

/* Zona 3 — ruta conectada */
.frag-path{width:100%;max-width:900px;margin:0 auto;opacity:1;transition:opacity .4s ease}
.frag-path svg{width:100%;height:auto;overflow:visible;display:block}
.frag-path .frag-path-v{display:none}
.fp-edge{fill:none;stroke:var(--border2);stroke-width:1.6}
.fp-node{fill:var(--bg2);stroke:var(--steel);stroke-width:1.5}
.fp-node.risk{stroke:var(--amber)}
.fp-icon{color:var(--text2)}
.fp-label{font-family:var(--mono);font-size:11px;fill:var(--text3)}
.fp-node-1{opacity:1;transition:opacity .5s ease}
.fp-node-2{opacity:1;transition:opacity .5s ease .25s}
.fp-node-3{opacity:1;transition:opacity .5s ease .5s}
.fp-node-4{opacity:1;transition:opacity .5s ease .75s}
.fp-node-5{opacity:1;transition:opacity .5s ease 1s}
.fp-priority{fill:none;stroke:var(--accent);stroke-width:1.6;opacity:1;transition:opacity .4s ease}

/* Mensaje de cierre, fuera de tarjeta */
.frag-headline{text-align:center;font-size:19px;font-weight:600;color:var(--text);margin-top:4px}
.frag-support{text-align:center;font-size:14.5px;color:var(--text2);max-width:62ch;margin:8px auto 0}

/* ── Estados por etapa (JS): tools/signals/core/path retroceden desde el
   estado final "conectado" de arriba — mismo patrón que el hero. ── */
[data-stage="tools"] .frag-core,[data-stage="signals"] .frag-core{opacity:0;transform:scale(.9)}
[data-stage="tools"] .core-link,[data-stage="signals"] .core-link{stroke-dashoffset:24}
[data-stage="signals"] .ft-dot{opacity:1}
[data-stage="tools"] .frag-path,[data-stage="signals"] .frag-path,[data-stage="core"] .frag-path{opacity:0}
[data-stage="tools"] .fp-node-1,[data-stage="signals"] .fp-node-1,[data-stage="core"] .fp-node-1,
[data-stage="tools"] .fp-node-2,[data-stage="signals"] .fp-node-2,[data-stage="core"] .fp-node-2,
[data-stage="tools"] .fp-node-3,[data-stage="signals"] .fp-node-3,[data-stage="core"] .fp-node-3,
[data-stage="tools"] .fp-node-4,[data-stage="signals"] .fp-node-4,[data-stage="core"] .fp-node-4,
[data-stage="tools"] .fp-node-5,[data-stage="signals"] .fp-node-5,[data-stage="core"] .fp-node-5{opacity:0}
[data-stage="tools"] .fp-priority,[data-stage="signals"] .fp-priority,
[data-stage="core"] .fp-priority,[data-stage="path"] .fp-priority{opacity:0}
@media(prefers-reduced-motion:reduce){
  .frag-tool,.frag-core,.core-link,.ft-dot,.frag-path,.fp-node-1,.fp-node-2,.fp-node-3,.fp-node-4,
  .fp-node-5,.fp-priority{transition:none;opacity:1;transform:none}
}
@media(max-width:900px){
  .frag-tools{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .frag-tools{grid-template-columns:repeat(2,1fr)}
  .frag-path .frag-path-h{display:none}
  .frag-path .frag-path-v{display:block;max-width:300px}
  .frag-path-v .fp-label{font-size:15px}
}

/* ── Capacidades (6, interactivas) ─────────────────────────────────────────
   Basado en <details name="capflow"> nativo: el navegador ya garantiza "solo
   una abierta a la vez" sin una sola línea de JS — el requisito central
   ("una sola capacidad activa") queda resuelto por HTML puro, funciona sin
   JS y con teclado/lector de pantalla de forma nativa. capabilities.js solo
   añade una mejora cosmética (scroll suave al abrir), nunca comportamiento
   requerido. Mobile: la MISMA lista es ya un acordeón vertical real, no una
   copia comprimida del desktop. */
.cap-flow{border-top:1px solid var(--border)}
.cap-item{border-bottom:1px solid var(--border);position:relative}
.cap-item::before{content:'';position:absolute;left:22px;top:52px;bottom:-1px;width:1px;background:var(--border)}
.cap-item:last-child::before{display:none}
.cap-item summary{display:flex;align-items:center;gap:16px;padding:20px 6px;cursor:pointer;
  list-style:none;-webkit-user-select:none;user-select:none}
.cap-item summary::-webkit-details-marker{display:none}
.cap-item summary:hover{background:var(--panel)}
.cap-item summary:focus-visible{outline:2px solid var(--accent2);outline-offset:-2px;border-radius:6px}
.cap-n{font-family:var(--mono);font-size:12px;color:var(--text3);width:20px;flex-shrink:0;position:relative;z-index:1}
.cap-item[open] .cap-n{color:var(--accent2)}
.cap-icon-box{width:40px;height:40px;border-radius:11px;background:var(--bg2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--text2);flex-shrink:0;transition:color .2s,border-color .2s}
.cap-item[open] .cap-icon-box{color:var(--accent2);border-color:var(--accent)}
.cap-title{font-size:17px;font-weight:600;color:var(--text2);flex:1;transition:color .2s}
.cap-item[open] .cap-title{color:var(--text);font-size:19px}
.cap-chevron{color:var(--text3);transition:transform .2s;flex-shrink:0}
.cap-item[open] .cap-chevron{transform:rotate(180deg)}
.cap-body{display:grid;grid-template-columns:1.3fr 1fr;gap:36px;padding:2px 6px 32px 62px;align-items:center}
.cap-text p{color:var(--text2);font-size:15px;margin-bottom:16px;max-width:52ch}
.cap-features{list-style:none;display:flex;flex-direction:column;gap:10px}
.cap-features li{font-size:14px;color:var(--text2);display:flex;gap:9px}
.cap-features li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent2);margin-top:8px;flex-shrink:0}
.cap-visual{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:10px;aspect-ratio:4/3}
.cap-visual svg{width:100%;height:100%}
.cap-visual-node{fill:var(--bg3);stroke:var(--accent2);stroke-width:1.8}
.cap-visual-dot{fill:var(--bg3);stroke:var(--border2);stroke-width:1.4}
.cap-visual-edge{stroke:var(--border2);stroke-width:1.4}
.cap-visual-icon{color:var(--accent2)}
@media(prefers-reduced-motion:reduce){.cap-icon-box,.cap-title,.cap-chevron{transition:none}}
@media(max-width:760px){
  .cap-body{grid-template-columns:1fr;padding:2px 6px 28px 46px;gap:18px}
  .cap-visual{order:-1;max-width:260px;aspect-ratio:16/9}
  .cap-item::before{left:16px}
  .cap-n{width:14px;font-size:11px}
  .cap-icon-box{width:34px;height:34px}
  .cap-title{font-size:15.5px}
  .cap-item[open] .cap-title{font-size:16.5px}
}

/* ── Por qué RedScopeX ────────────────────────────────────────────────── */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
@media(max-width:900px){.why-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.why-grid{grid-template-columns:1fr}}
.why-card{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:24px}
.why-card .ico{width:40px;height:40px;border-radius:11px;background:var(--accent-soft);
  border:1px solid var(--border2);color:var(--accent2);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.why-card h3{font-size:16px;margin-bottom:8px;color:var(--text)}
.why-card p{font-size:13.5px;color:var(--text2);margin:0;line-height:1.55}

/* ── Comparación ───────────────────────────────────────────────────────── */
.cmp-table{width:100%;border-collapse:collapse;background:var(--bg2);border:1px solid var(--border);
  border-radius:16px;overflow:hidden}
.cmp-table th{text-align:left;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text3);padding:16px 26px;background:var(--bg3)}
.cmp-table th:last-child{color:var(--accent2);background:var(--accent-soft)}
.cmp-table td{padding:20px 26px;font-size:14.5px;border-top:1px solid var(--border);color:var(--text2)}
.cmp-table td:last-child{color:var(--text);background:linear-gradient(90deg,var(--accent-soft),transparent 70%);
  font-weight:500;display:flex;align-items:center;gap:10px}
.cmp-check{color:var(--green);flex-shrink:0}
@media(max-width:720px){
  .cmp-table thead{display:none}
  .cmp-table,.cmp-table tbody,.cmp-table tr,.cmp-table td{display:block;width:100%}
  .cmp-table tr{border-top:1px solid var(--border);padding:18px 0}
  .cmp-table tr:first-child{border-top:none}
  .cmp-table td{padding:6px 24px;border:none}
  .cmp-table td:last-child{background:none}
  .cmp-table td::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:10.5px;
    color:var(--text3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
}

/* ── Planes ─────────────────────────────────────────────────────────────
   Licenciamiento por alcance de superficie, no por usuarios — ver
   backend/services/plans.py. P1 (2026-09-01, alineación con el enforcement
   de backend cerrado en P0): Starter/Professional muestran precio público
   fijo (.plan-price); Business/Enterprise muestran "Contact Sales" en el
   mismo slot, mismo peso visual que un precio — nunca un fallback de menor
   jerarquía. Resultado y tipo de organización primero; capacidad incluida
   en un <details> secundario, colapsado por defecto (renombrado desde
   "límites del plan": ver docs/products/packaging.md — no todos los
   valores tienen enforcement técnico confirmado, así que se presentan como
   capacidad incluida por plan, no como un tope duro garantizado). */
.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:8px;align-items:stretch}
@media(max-width:1080px){.plan-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.plan-grid{grid-template-columns:1fr}}
.plan-card{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:26px;
  display:flex;flex-direction:column;gap:16px;position:relative}
.plan-card.featured{border-color:var(--accent);background:linear-gradient(180deg,var(--accent-soft),var(--bg2) 45%)}
.plan-badge{position:absolute;top:-12px;left:24px;background:var(--accent);color:#fff;font-size:11px;
  font-weight:600;padding:4px 13px;border-radius:20px;letter-spacing:.03em}
.plan-head h3{font-size:19px;margin-bottom:8px}
.plan-audience{font-size:13.5px;color:var(--text2);min-height:5.4em}
.plan-price{display:flex;align-items:baseline;gap:6px;padding:10px 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.plan-price-amount{font-family:var(--mono);font-size:27px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.plan-price-amount.is-contact{font-size:19px}
.plan-price-period{font-size:13px;color:var(--text3)}
.plan-note{font-size:11.5px;color:var(--text3);margin:-4px 0 0}
.plan-features{list-style:none;display:flex;flex-direction:column;gap:9px;flex:1;margin:0}
.plan-features li{font-size:13.5px;color:var(--text2);display:flex;gap:8px;align-items:flex-start}
.plan-check{color:var(--green);flex-shrink:0;margin-top:2px}
.plan-limits summary{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text3);
  cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}
.plan-limits summary::-webkit-details-marker{display:none}
.plan-chevron{transition:transform .2s;flex-shrink:0}
.plan-limits[open] .plan-chevron{transform:rotate(180deg)}
.plan-limits ul{list-style:none;margin:10px 0 0;display:flex;flex-direction:column;gap:6px}
.plan-limits li{font-size:12.5px;color:var(--text3);padding-left:14px;position:relative}
.plan-limits li::before{content:'';position:absolute;left:0;top:7px;width:4px;height:4px;border-radius:50%;background:var(--border2)}
.plan-cta{width:100%;justify-content:center;margin-top:auto}
@media(prefers-reduced-motion:reduce){.plan-chevron{transition:none}}
/* Comparativa expandible — <details> nativo, visible y operable sin JS. */
.plan-compare-wrap{margin-top:28px;border-top:1px solid var(--border);padding-top:20px}
.plan-compare-wrap summary{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
  color:var(--text);cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}
.plan-compare-wrap summary::-webkit-details-marker{display:none}
.plan-compare-wrap[open] .plan-chevron{transform:rotate(180deg)}
.plan-compare-table{width:100%;border-collapse:collapse;background:var(--bg2);border:1px solid var(--border);
  border-radius:14px;overflow:hidden;margin-top:18px;font-size:13.5px}
.plan-compare-table th,.plan-compare-table td{text-align:left;padding:12px 20px;border-top:1px solid var(--border)}
.plan-compare-table thead th{border-top:none;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text3);background:var(--bg3)}
.plan-compare-table thead th:not(:first-child){color:var(--accent2)}
.plan-compare-table tbody th{font-weight:500;color:var(--text2);white-space:nowrap}
.plan-compare-table td{color:var(--text2)}
.plan-compare-table .plan-check{color:var(--green)}
@media(max-width:720px){
  .plan-compare-table thead{display:none}
  .plan-compare-table,.plan-compare-table tbody,.plan-compare-table tr,.plan-compare-table th,.plan-compare-table td{display:block;width:100%}
  .plan-compare-table tr{border-top:1px solid var(--border);padding:14px 0}
  .plan-compare-table tr:first-child{border-top:none}
  .plan-compare-table th,.plan-compare-table td{padding:4px 20px;border:none}
  .plan-compare-table tbody th{padding-bottom:6px}
  .plan-compare-table td::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:10px;
    color:var(--text3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
}

/* ── Servicios (subordinados) ─────────────────────────────────────────────
   Deliberadamente más liviano que Capacidades: sin tarjetas ni iconos en
   caja, padding de sección reducido, filas separadas por un borde fino en
   vez de un grid de cajas — se lee como un apéndice de apoyo, no como un
   segundo pilar del producto compitiendo con la plataforma. */
#servicios{padding-top:56px;padding-bottom:56px}
#servicios .sec-head h2{font-size:clamp(22px,2.6vw,30px)}
.svc-note{color:var(--text2);font-size:14.5px;max-width:64ch;margin-bottom:4px}
/* Servicio principal destacado — visualmente por encima de los 4
   complementarios, pero deliberadamente más liviano que la plataforma
   (capacidades/comparativa arriba en la página). */
.svc-featured{display:flex;align-items:center;gap:18px;margin-top:24px;padding:22px 24px;
  background:var(--bg2);border:1px solid var(--border2);border-radius:16px;transition:border-color .2s,transform .2s}
.svc-featured:hover{border-color:var(--accent2);transform:translateY(-2px)}
.svc-featured .ico{width:48px;height:48px;border-radius:13px;background:var(--accent-soft);
  border:1px solid var(--border2);color:var(--accent2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.svc-featured h3{font-size:18px;margin-bottom:4px;color:var(--text)}
.svc-featured p{font-size:14.5px;color:var(--text2);margin:0}
.svc-arrow{color:var(--text3);flex-shrink:0;margin-left:auto;transition:transform .2s}
.svc-featured:hover .svc-arrow{transform:translateX(3px);color:var(--accent2)}
@media(prefers-reduced-motion:reduce){.svc-featured,.svc-featured:hover,.svc-arrow,.svc-featured:hover .svc-arrow{transition:none;transform:none}}
.services{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;margin-top:8px;
  border-top:1px solid var(--border)}
@media(max-width:760px){.services{grid-template-columns:1fr}}
.services-3col{grid-template-columns:repeat(3,1fr)}
@media(max-width:1024px){.services-3col{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.services-3col{grid-template-columns:1fr}}
.svc{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--border)}
.svc .ico{width:36px;height:36px;border-radius:10px;background:var(--bg2);border:1px solid var(--border);
  color:var(--text2);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:color .2s,border-color .2s}
.svc:hover .ico{color:var(--accent2);border-color:var(--border2)}
.svc h3{font-size:14.5px;font-weight:500;margin:0 0 2px;color:var(--text)}
.svc p{font-size:13px;color:var(--text3);margin:0}
@media(prefers-reduced-motion:reduce){.svc .ico{transition:none}}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq{max-width:820px;margin:0 auto}
.qa{border-bottom:1px solid var(--border)}
.qa summary{cursor:pointer;list-style:none;padding:20px 0;font-size:17px;font-weight:600;
  display:flex;justify-content:space-between;gap:16px;align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+';color:var(--accent2);font-size:22px;font-weight:400;transition:transform .2s}
.qa[open] summary::after{transform:rotate(45deg)}
.qa .a{padding:0 0 20px;color:var(--text2);font-size:14.5px;max-width:70ch;line-height:1.65}
@media(prefers-reduced-motion:reduce){.qa summary::after{transition:none}}

/* ── Capability list (feature rows, reutilizado en Security/Platform) ──── */
.feat-list{display:flex;flex-direction:column;gap:20px}
.feat{display:flex;gap:16px}
.feat .fi{width:36px;height:36px;border-radius:10px;background:var(--steel-soft);color:var(--steel);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.feat h3{font-size:15.5px;margin-bottom:4px}
.feat p{font-size:13.5px;color:var(--text2);margin:0}

/* ── Prosa (páginas Platform/Solutions/Security/legales) ─────────────────── */
.prose{max-width:var(--maxw-prose)}
.prose h2{font-size:24px;margin:44px 0 14px;scroll-margin-top:96px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:17px;margin:26px 0 10px;color:var(--text)}
.prose p{color:var(--text2);font-size:15.5px;margin-bottom:14px}
.prose ul,.prose ol{color:var(--text2);font-size:15px;margin:0 0 16px;padding-left:22px}
.prose li{margin-bottom:7px}
.prose strong{color:var(--text)}
.page-head{padding:104px 0 8px}
.page-head .eyebrow{display:block;margin-bottom:12px}
.page-head h1{font-size:clamp(28px,4vw,44px);max-width:20ch;margin-bottom:16px}
.page-head .dek{color:var(--text2);font-size:17px;max-width:60ch}
.definition{background:var(--bg2);border-left:3px solid var(--accent2);border-radius:0 12px 12px 0;
  padding:18px 22px;margin:22px 0 32px;font-size:15.5px;color:var(--text2)}
.definition b{color:var(--text)}
.note-box{background:var(--steel-soft);border:1px solid var(--border2);border-radius:12px;padding:16px 20px;
  font-size:14px;color:var(--text2);margin:24px 0}
.note-box b{color:var(--text)}

/* ── CTA final ────────────────────────────────────────────────────────── */
.cta{background:linear-gradient(120deg,rgba(230,54,63,.13),rgba(16,18,22,.4));
  border:1px solid var(--border2);border-radius:20px;padding:52px;text-align:center}
.cta h2{font-size:clamp(24px,3.4vw,36px);margin-bottom:12px}
.cta p{color:var(--text2);font-size:16px;max-width:52ch;margin:0 auto 26px}

/* ── Formulario ───────────────────────────────────────────────────────── */
.demo-form{position:relative;max-width:560px;margin:0 auto;background:var(--bg2);
  border:1px solid var(--border2);border-radius:20px;padding:36px;overflow:hidden}
.demo-form::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--steel))}
.ff-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ff{margin-bottom:18px}
.ff label{display:block;font-size:12.5px;font-weight:600;color:var(--text2);margin-bottom:8px;letter-spacing:.01em}
.ff input,.ff select,.ff textarea{width:100%;height:46px;background:var(--bg3);border:1px solid var(--border2);
  border-radius:9px;color:var(--text);font:inherit;font-size:14px;padding:0 14px;transition:border-color .15s,box-shadow .15s}
.ff input::placeholder,.ff textarea::placeholder{color:var(--text3)}
.ff input:focus,.ff select:focus,.ff textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ff input[aria-invalid="true"],.ff textarea[aria-invalid="true"]{border-color:var(--accent)}
.ff-err{display:none;color:var(--accent2);font-size:12.5px;margin-top:6px}
.ff-err.show{display:block}
.ff textarea{height:auto;resize:vertical;min-height:84px;padding:12px 14px;font-family:inherit;line-height:1.5}
.ff select{cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%238b919c' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.ff-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ff-trust{display:flex;align-items:center;gap:7px;margin-top:14px;font-size:12px;color:var(--text3)}
.ff-trust svg{flex-shrink:0;color:var(--text3)}
.ff-spin{display:inline-block;animation:ffSpin .7s linear infinite}
@keyframes ffSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ff-spin{animation-duration:1.4s}}
.ff-status{min-height:20px;margin-top:14px;font-size:13px;text-align:center;font-weight:600}
.ff-status.ok{color:var(--green)}.ff-status.err{color:#ef8b8b}
.ff-alt{text-align:center;font-size:13px;color:var(--text3);margin:18px 0 0}
.ff-alt a{color:var(--text2);text-decoration:underline;text-underline-offset:2px}
.ff-alt a:hover{color:var(--text)}
@media(max-width:640px){.demo-form{padding:26px 22px}.ff-row{grid-template-columns:1fr}}

/* ── Footer ───────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--border);background:var(--bg2);padding:56px 0 40px;color:var(--text2);font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px 36px}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-logo{height:50px;width:auto;display:block;margin-bottom:14px}
.foot-brand p{color:var(--text3);max-width:34ch;font-size:13.5px}
.foot-col h4{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin-bottom:16px}
.foot-col a{display:block;color:var(--text2);font-size:13.5px;margin-bottom:12px}
.foot-col a:hover{color:var(--text)}
.foot-bottom{margin-top:40px;padding-top:24px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--text3)}
.foot-bottom a{color:var(--text3)}
.foot-bottom a:hover{color:var(--text2)}

/* ── Progressive-enhancement reveal (idéntico al patrón anterior) ────────
   Sin JS/IO el contenido es visible por defecto (nunca en blanco). */
.reveal-on .reveal{opacity:0;transform:translateY(22px);
  transition:opacity .65s cubic-bezier(.34,1.56,.64,1),transform .65s cubic-bezier(.34,1.56,.64,1)}
.reveal-on .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal-on .reveal{opacity:1;transform:none;transition:none}}