/* Copia literal de sitio-edge/src/styles/global.css del worktree octapus-sitio-v3,
   rama feat/octapus-sitio-v3, commit 5d17a778. Recopiada el 25-sep-2026 (antes: 21-sep) para
   traer el oscuro en berenjena y el claro por defecto. No se edita aquí: si el sistema
   cambia, se vuelve a copiar. */
/* Sistema de diseño · Octapus v3 (11-sep-2026)
 *
 * Fuente de verdad de los VALORES. La documentación del sistema (qué es cada
 * token, cada componente y cuándo se usa) vive en el arnés:
 * marketing/design-system/web/. Si un valor cambia aquí, se actualiza allá.
 *
 * Los cuatro colores de marca salen del brand kit oficial y no se tocan. Los
 * roles (tinta, superficies, líneas, acción) son DERIVADOS para pasar contraste
 * AA en los dos temas; están medidos, no estimados.
 *
 * Referencias que dieron la dirección (Pierre, 11-sep): la versión anterior de
 * Strike, el mensaje de Arctic Wolf, 7AI y Jazz. Ver sitio-edge/REFERENCIAS-2026-09-11.md.
 *
 * Tema por defecto (25-sep-2026, reunión de gerencia): CLARO para toda visita
 * nueva, sin importar el sistema. El pie trae el selector (Claro, Oscuro,
 * Automático) y public/js/tema.js aplica la elección antes del primer cuadro.
 *
 * Temas por bloque (24-sep-2026, kit de identidad): cualquier elemento con
 * data-tema="claro" u data-tema="oscuro" fija su propio tema, no solo la raíz.
 * Las propiedades personalizadas se heredan, así que un bloque claro dentro de
 * una página oscura necesita los valores claros declarados en él: por eso el
 * bloque base también apunta a [data-tema="claro"]. Lo usan /kit (claro y oscuro
 * lado a lado) y /presentacion. El panel privado no cambia.
 */
:root, [data-tema="claro"] {
  color-scheme: light;

  /* ---- Marca (brand kit, fijo) ---- */
  --coral: #F66859;
  --pink: #FF578F;
  --violet: #5C206A;
  --off-white: #FEF9F8;
  --dive: linear-gradient(120deg, var(--violet) 0%, var(--pink) 55%, var(--coral) 100%);
  --dive-calido: linear-gradient(120deg, var(--pink), var(--coral));
  /* Dive mezclado hacia el negro violáceo: fondo de franjas de cierre, con
     off-white encima a 7,16:1. */
  --dive-hondo: linear-gradient(120deg, #301638 0%, #712C46 55%, #6D3331 100%);
  /* Dive oscurecido para TEXTO grande sobre off-white: el rosa y el coral
     puros no llegan a 3:1. Estos pasan (5,9:1 y 4,1:1). */
  --texto-dive: linear-gradient(100deg, #5C206A 0%, #C22E6A 58%, #D9483A 100%);
  --borde-dive: linear-gradient(120deg, #5C206A, #FF578F 55%, #F66859);

  /* ---- Roles ---- */
  --ground: var(--off-white);
  --surface: #FFFFFF;
  --surface-2: #F4EEF2;
  --glass: rgb(255 255 255 / .74);
  --cabecera-fondo: rgb(254 249 248 / .86);
  --ink: var(--violet);
  --ink-2: #614A65;
  --muted: #715E75;
  --line: #E8DEE6;
  --line-strong: #CDBDCB;
  --line-control: #876F8A;
  --rejilla: rgb(92 32 106 / .07);
  --accent-ink: #943D32;
  --focus: #87304F;
  --action: var(--coral);
  --action-hover: #FF806F;
  --action-ink: #301638;
  --acento: var(--pink);
  --selection: #F7CFD9;
  --selection-ink: #301638;
  --ok: #136747;
  --warn: #825200;

  /* Estados de un hallazgo o evento. Semánticos, separados del acento. */
  --sev-critica: #B42318; --sev-critica-fondo: #FDE8E6;
  --sev-alta: #8F4700;    --sev-alta-fondo: #FCEEDB;
  --sev-media: #665400;   --sev-media-fondo: #F5EFCF;
  --sev-ok: #136747;      --sev-ok-fondo: #E0F2E8;

  /* Brillos del hero: la versión en marca de los brillos azules de Strike. */
  --brillo-1: rgb(246 104 89 / .30);
  --brillo-2: rgb(255 87 143 / .22);
  --brillo-3: rgb(92 32 106 / .16);

  /* Franja oscura (Akila). Una sola por página. */
  --franja: #2A1231;
  --franja-2: #371B41;
  --franja-ink: #FEF9F8;
  --franja-muted: #D9C8DD;
  --franja-line: rgb(254 249 248 / .14);

  /* Mapa regional */
  --mapa-punto: rgb(92 32 106 / .24);
  --mapa-arco: rgb(217 72 58 / .50);
  --mapa-base: #EE5A4B;   /* coral un punto más hondo: el puro da 2,9:1 sobre off-white */
  --mapa-presencia: #C22E6A;
  --mapa-texto: #614A65;

  /* WhatsApp: verde oscurecido para que el texto blanco pase 5:1. */
  --wa-fondo: #13803F;
  --logo-filtro: none;

  --sombra-alta: 0 18px 40px -12px rgb(23 8 30 / .3);
  --sombra-panel: 0 34px 64px -30px rgb(48 22 56 / .38), 0 2px 6px rgb(48 22 56 / .06);
  --sombra-control: 0 4px 0 rgb(92 32 106 / .14);

  /* ---- Tipografía ---- */
  --fuente-display: 'Basic', 'Trebuchet MS', system-ui, sans-serif;
  --fuente-cuerpo: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --fuente-datos: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --paso--2: .75rem;
  --paso--1: clamp(.875rem, .85rem + .15vw, .9375rem);
  --paso-0: clamp(1rem, .96rem + .2vw, 1.09rem);
  --paso-1: clamp(1.2rem, 1.13rem + .35vw, 1.36rem);
  --paso-2: clamp(1.44rem, 1.33rem + .55vw, 1.7rem);
  --paso-3: clamp(1.73rem, 1.55rem + .9vw, 2.13rem);
  --paso-4: clamp(2.07rem, 1.8rem + 1.4vw, 2.66rem);
  --paso-5: clamp(2.3rem, 1.6rem + 2.4vw, 3.4rem);
  --paso-6: clamp(2.5rem, 1.3rem + 3.1vw, 4rem);
  --display-muestra: clamp(2.5rem, 1.3rem + 4vw, 5rem);

  /* ---- Espacio, forma, movimiento ---- */
  --e-3xs: .25rem; --e-2xs: .5rem; --e-xs: .75rem; --e-s: 1rem;
  --e-m: 1.5rem; --e-l: 2rem; --e-xl: 3rem; --e-2xl: 4rem; --e-3xl: 6rem;
  --seccion: clamp(64px, 8vw, 112px);
  --radio: 6px;
  --radio-m: 10px;
  --radio-l: 16px;
  --solapa: var(--e-2xl);
  --ancho-texto: 68ch;
  --ancho-pagina: 1180px;
  --duracion-control: 160ms;
  --curva-control: cubic-bezier(.2, .7, .2, 1);

  /* ---- Kit de identidad dinámica (24-sep-2026) ----
     Claro con intención propia, no el oscuro invertido: papel cálido, tinta
     violeta, el rosa hondo como color de dato, el coral solo en brillos y en la
     tercera serie. Contraste medido en qa/v3/medir-contraste-v3.mjs. Detalle en
     docs/KIT-IDENTIDAD.md. */
  --kit-hondo: #F7EFF4;          /* fondo de gráficos y consola: papel rosado */
  --kit-rejilla: rgb(92 32 106 / .09);
  --kit-eje: #DCCBD9;            /* anillos y ejes: decorativo, no lleva dato */
  --kit-serie: #C22E6A;          /* dato principal: rosa hondo, 5,17 sobre el fondo */
  --kit-serie-2: #5C206A;        /* estructura y meta: violeta */
  --kit-serie-3: #C8412F;        /* coral hondo: 4,73 sobre el fondo */
  --kit-relleno: rgb(194 46 106 / .14);
  --kit-activo: #FCEAF0;         /* paso o fila activa */
  --kit-activo-borde: rgb(194 46 106 / .38);
  --kit-chip: #FBE3EC; --kit-chip-ink: #9C2456;
  --kit-consola: #F6EEF3; --kit-consola-barra: #EEE3EB; --kit-consola-ink: #3F1649;
  --kit-consola-prompt: #B0245F; --kit-consola-nota: #6E5A72;
  --kit-brillo: rgb(246 104 89 / .20);
}

/* Oscuro en berenjena (Pierre, board, 25-sep-2026): "mezclar el negro con
   morado oscuro, coherente con la paleta de Octapus, en vez de negro total".
   Fondos y superficies salen del violeta de marca #5C206A llevado casi a negro
   (tono 275 a 280); el rosa y el coral siguen de acento. Contraste medido con
   qa/v3/medir-contraste-v3.mjs, antes y después en el commit del cambio. */
/* Las dos entradas al tema oscuro comparten exactamente los mismos valores.
   Desde el 25-sep el sitio público nace claro aunque el sistema esté en oscuro:
   el tema del sistema solo manda con data-tema="auto" (la opción Automático del
   pie, public/js/tema.js). El panel privado no carga ese script y sigue al
   sistema como antes: por eso la segunda condición. :is() tolera un navegador
   sin :has() y conserva la primera. */
@media (prefers-color-scheme: dark) {
  :root:is([data-tema="auto"], :not([data-tema]):has(body.panel)) {
    color-scheme: dark;
    --ground: #1B0F23; --surface: #25162F; --surface-2: #2E1C3A;
    --glass: rgb(40 24 52 / .74); --cabecera-fondo: rgb(27 15 35 / .86);
    --ink: #F6EFF8; --ink-2: #D6C9DE; --muted: #B09FBC;
    --line: #3B2848; --line-strong: #5A4468; --line-control: #A58DAF;
    --rejilla: rgb(246 239 248 / .05);
    --accent-ink: #FF998C; --focus: var(--pink);
    --action-ink: #241028; --acento: #FF7AA6;
    --selection: #673147; --selection-ink: var(--off-white);
    --ok: #82D7AF; --warn: #F3C377;
    --texto-dive: linear-gradient(100deg, #E7B3F2 0%, #FF86AE 55%, #FF9A8B 100%);
    --sev-critica: #FF9C90; --sev-critica-fondo: rgb(255 120 100 / .14);
    --sev-alta: #FFC27A;    --sev-alta-fondo: rgb(255 170 80 / .13);
    --sev-media: #E6D57A;   --sev-media-fondo: rgb(230 213 122 / .12);
    --sev-ok: #7ED8A6;      --sev-ok-fondo: rgb(126 216 166 / .12);
    --brillo-1: rgb(246 104 89 / .20); --brillo-2: rgb(255 87 143 / .16); --brillo-3: rgb(150 70 170 / .26);
    --franja: #2C1438; --franja-2: #3A1F48; --franja-ink: #F6EFF8; --franja-muted: #D2BEDB;
    --franja-line: rgb(246 239 248 / .12);
    --mapa-punto: rgb(246 239 248 / .19); --mapa-arco: rgb(255 142 127 / .55);
    --mapa-base: #FF8E7F; --mapa-presencia: #FF86AE; --mapa-texto: #D6C9DE;
    --logo-filtro: brightness(0) invert(1);
    --sombra-alta: 0 18px 40px -12px rgb(8 3 12 / .55);
    --sombra-panel: 0 34px 64px -30px rgb(8 3 12 / .8), 0 2px 6px rgb(8 3 12 / .3);
    --sombra-control: 0 4px 0 rgb(8 3 12 / .35);
    --kit-hondo: #20122A; --kit-rejilla: rgb(246 239 248 / .07); --kit-eje: #463255;
    --kit-serie: #FF86AE; --kit-serie-2: #E7B3F2; --kit-serie-3: #FF9A8B;
    --kit-relleno: rgb(255 134 174 / .20);
    --kit-activo: #352040; --kit-activo-borde: rgb(255 138 170 / .45);
    --kit-chip: #4A2140; --kit-chip-ink: #FFB3CB;
    --kit-consola: #160B1D; --kit-consola-barra: #25162F; --kit-consola-ink: #EDE3F2;
    --kit-consola-prompt: #FF86AE; --kit-consola-nota: #B09FBC;
    --kit-brillo: rgb(255 87 143 / .14);
  }
}
:root[data-tema="oscuro"], [data-tema="oscuro"] {
  color-scheme: dark;
  --ground: #1B0F23; --surface: #25162F; --surface-2: #2E1C3A;
  --glass: rgb(40 24 52 / .74); --cabecera-fondo: rgb(27 15 35 / .86);
  --ink: #F6EFF8; --ink-2: #D6C9DE; --muted: #B09FBC;
  --line: #3B2848; --line-strong: #5A4468; --line-control: #A58DAF;
  --rejilla: rgb(246 239 248 / .05);
  --accent-ink: #FF998C; --focus: var(--pink);
  --action-ink: #241028; --acento: #FF7AA6;
  --selection: #673147; --selection-ink: var(--off-white);
  --ok: #82D7AF; --warn: #F3C377;
  --texto-dive: linear-gradient(100deg, #E7B3F2 0%, #FF86AE 55%, #FF9A8B 100%);
  --sev-critica: #FF9C90; --sev-critica-fondo: rgb(255 120 100 / .14);
  --sev-alta: #FFC27A;    --sev-alta-fondo: rgb(255 170 80 / .13);
  --sev-media: #E6D57A;   --sev-media-fondo: rgb(230 213 122 / .12);
  --sev-ok: #7ED8A6;      --sev-ok-fondo: rgb(126 216 166 / .12);
  --brillo-1: rgb(246 104 89 / .20); --brillo-2: rgb(255 87 143 / .16); --brillo-3: rgb(150 70 170 / .26);
  --franja: #2C1438; --franja-2: #3A1F48; --franja-ink: #F6EFF8; --franja-muted: #D2BEDB;
  --franja-line: rgb(246 239 248 / .12);
  --mapa-punto: rgb(246 239 248 / .19); --mapa-arco: rgb(255 142 127 / .55);
  --mapa-base: #FF8E7F; --mapa-presencia: #FF86AE; --mapa-texto: #D6C9DE;
  --logo-filtro: brightness(0) invert(1);
  --sombra-alta: 0 18px 40px -12px rgb(8 3 12 / .55);
  --sombra-panel: 0 34px 64px -30px rgb(8 3 12 / .8), 0 2px 6px rgb(8 3 12 / .3);
  --sombra-control: 0 4px 0 rgb(8 3 12 / .35);
  --kit-hondo: #20122A; --kit-rejilla: rgb(246 239 248 / .07); --kit-eje: #463255;
  --kit-serie: #FF86AE; --kit-serie-2: #E7B3F2; --kit-serie-3: #FF9A8B;
  --kit-relleno: rgb(255 134 174 / .20);
  --kit-activo: #352040; --kit-activo-borde: rgb(255 138 170 / .45);
  --kit-chip: #4A2140; --kit-chip-ink: #FFB3CB;
  --kit-consola: #160B1D; --kit-consola-barra: #25162F; --kit-consola-ink: #EDE3F2;
  --kit-consola-prompt: #FF86AE; --kit-consola-nota: #B09FBC;
  --kit-brillo: rgb(255 87 143 / .14);
}
/* Un bloque con tema propio pinta su fondo y su tinta: el color del cuerpo ya
   viene calculado con el tema de la raíz y no se recalcula solo. */
[data-tema]:not(:root) { background-color: var(--ground); color: var(--ink); }

/* Compatibilidad privada: el panel conserva su paleta, su escala y su ancho.
   Nada del sistema público debe filtrarse aquí. */
:root:has(body.panel) {
  color-scheme: normal;
  --ground: var(--off-white); --surface: #FFFFFF; --surface-2: #F5F2F5;
  --ink: var(--violet); --ink-2: #6E4577; --muted: #7D6283; --line: #E7E2E8;
  --ok: #0F7A54; --warn: #9A6200; --focus: var(--pink);
  --paso--1: clamp(.83rem, .8rem + .15vw, .9rem);
  --radio: 12px; --radio-l: 20px;
  --ancho-pagina: 1140px;
  --sombra-alta: 0 18px 40px -12px rgb(23 8 30 / .45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]):has(body.panel) {
    --ground: #141119; --surface: #1C1824; --surface-2: #241F2E;
    --ink: #F4F1F7; --ink-2: #CFC8D8; --muted: #9C94A8; --line: #2F2839;
    --coral: #FF8577; --pink: #FF7DA8;
  }
}
:root[data-tema="oscuro"]:has(body.panel) {
  --ground: #2A0E31; --surface: #3A1443; --surface-2: #4A1B55;
  --ink: var(--off-white); --ink-2: #E4CFE8; --muted: #B79BBE; --line: #572463;
  --coral: #FF8577; --pink: #FF7DA8;
}

/* ================= Base ================= */
*, *::before, *::after { box-sizing: border-box; }
/* hidden tiene que ganarle a cualquier display de clase: las salidas de WhatsApp
   nacen ocultas y dependen de esto para no aparecer sin número. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--fuente-cuerpo);
  font-size: var(--paso-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body.panel { font-family: 'Basic', system-ui, -apple-system, 'Segoe UI', sans-serif; }
body:not(.panel) :is(h1, h2, h3, .titulo-nav) { font-family: var(--fuente-display); font-weight: 400; }

h1, h2, h3 { text-wrap: balance; line-height: 1.12; margin: 0; letter-spacing: -0.012em; color: var(--ink); }
h1 { font-size: var(--paso-5); }
h2 { font-size: var(--paso-3); }
h3 { font-size: var(--paso-2); }
p { margin: 0; }
p, li { max-width: var(--ancho-texto); }

a { color: inherit; text-decoration-color: color-mix(in srgb, var(--pink) 60%, transparent); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--pink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
body:not(.panel) ::selection { background: var(--selection); color: var(--selection-ink); }

.contenedor { max-width: var(--ancho-pagina); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }
:root:has(body.panel) .contenedor { padding-inline: var(--e-m); }
.seccion { padding-block: var(--seccion); }
.prosa > * + * { margin-block-start: var(--e-s); }
.prosa h2 { margin-block-start: var(--e-xl); }
.prosa h3 { margin-block-start: var(--e-l); }
.dato { font-family: var(--fuente-datos); font-variant-numeric: tabular-nums; }
.desborda { overflow-x: auto; }

/* ================= Acciones ================= */
/* Coral lleva texto oscuro: presencia de marca y 5,4:1. Blanco sobre coral no pasa. */
.boton, .cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-block-size: 48px; padding: 0 var(--e-m);
  font-family: var(--fuente-cuerpo); font-size: 1rem; font-weight: 600; line-height: 1.2;
  border: 1px solid transparent; border-radius: var(--radio); text-decoration: none; cursor: pointer;
  transition: background-color var(--duracion-control), border-color var(--duracion-control),
    box-shadow var(--duracion-control), transform var(--duracion-control) var(--curva-control);
}
.cta, .boton-principal { background: var(--action); color: var(--action-ink); }
.cta:hover, .boton-principal:hover { background: var(--action-hover); box-shadow: var(--sombra-control); }
.boton-secundario { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.boton-secundario:hover { border-color: var(--ink-2); background: var(--surface); }
.boton-chico { min-block-size: 40px; padding: 0 var(--e-s); font-size: var(--paso--1); }
.boton-claro { background: transparent; color: var(--off-white); border-color: rgb(254 249 248 / .45); }
.boton-claro:hover { border-color: var(--off-white); background: rgb(254 249 248 / .07); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .boton:hover, .cta:hover { transform: translateY(-1px); }
  .boton:active, .cta:active { transform: translateY(0); box-shadow: none; }
}
/* Kit (25-sep): botón de texto y estado deshabilitado. Deshabilitado baja la
   opacidad (WCAG exime los controles inactivos) y no reacciona. */
.boton-texto { background: transparent; color: var(--ink); padding-inline: 4px; min-block-size: 40px;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--pink) 60%, transparent); text-underline-offset: .25em; }
.boton-texto:hover { text-decoration-color: var(--pink); }
.boton:disabled, .boton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none; }
.boton-principal:disabled:hover { background: var(--action); }
.boton .icono-kit { inline-size: 18px; block-size: 18px; }
/* Compatibilidad: nombre heredado del hero anterior. */
.cta-dive { background: var(--action); color: var(--action-ink); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-xs); margin-block-start: var(--e-l); }
.icono-wa { inline-size: 20px; block-size: 20px; flex: none; }
.boton-secundario .icono-wa { color: var(--wa-fondo); }

/* ================= Rótulos ================= */
.antetitulo {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--fuente-datos); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.antetitulo a { color: inherit; text-decoration: none; }
.antetitulo a:hover { color: var(--ink); }
.punto-marca { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--acento); flex: none; }
.pulso { animation: pulso 2.4s ease-out infinite; }
@keyframes pulso {
  0% { box-shadow: 0 0 0 0 rgb(255 87 143 / .55); }
  70% { box-shadow: 0 0 0 9px rgb(255 87 143 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(255 87 143 / 0); }
}
.rotulo { font-family: var(--fuente-datos); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0; }
.entrada { font-size: clamp(1.08rem, 1rem + .3vw, 1.24rem); line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.bajada { margin-block-start: var(--e-s); max-width: 58ch; color: var(--ink-2); font-size: var(--paso-1); line-height: 1.5; }
.dos-tonos { color: var(--ink); display: inline-block; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .dos-tonos { background: var(--texto-dive); -webkit-background-clip: text; background-clip: text; color: transparent; }
}

/* ================= Hero claro ================= */
/* Fondo off-white con brillos de marca y una rejilla que se desvanece. Reemplaza
   a los heroes violeta con fotografía, que el board leyó como "TI tradicional". */
.hero-claro { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(28px, 4vw, 48px) clamp(52px, 6vw, 84px); }
.hero-claro .hero-fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* Los brillos se apagan antes del borde inferior: sin esto, la sección los corta en seco. */
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
          mask-image: linear-gradient(to bottom, #000 62%, transparent);
  background:
    radial-gradient(38% 52% at 80% 38%, var(--brillo-2), transparent 72%),
    radial-gradient(30% 42% at 95% 78%, var(--brillo-1), transparent 70%),
    radial-gradient(42% 56% at 62% 12%, var(--brillo-3), transparent 70%);
}
.hero-claro .hero-fondo::after { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--rejilla) 1px, transparent 1px), linear-gradient(90deg, var(--rejilla) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(58% 72% at 72% 45%, #000 15%, transparent 78%);
          mask-image: radial-gradient(58% 72% at 72% 45%, #000 15%, transparent 78%);
}
.hero-claro.compacto { padding-block-end: clamp(36px, 4vw, 56px); }
.hero-rejilla { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; margin-block-start: clamp(24px, 3vw, 40px); }
@media (min-width: 62rem) {
  .hero-rejilla { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
}
.hero-claro h1 { font-size: var(--paso-5); line-height: 1.03; letter-spacing: -.015em; margin-block: var(--e-s) var(--e-m); max-width: 20ch; }
.hero-texto { min-width: 0; }

/* ================= Migas ================= */
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e-2xs); padding: 0; margin: 0;
  font-family: var(--fuente-datos); font-size: .75rem; letter-spacing: .04em; color: var(--muted); }
.migas li { max-width: none; }
.migas li + li::before { content: '/'; margin-inline-end: var(--e-2xs); opacity: .6; }
.migas a { color: var(--muted); text-decoration: none; }
.migas a:hover { color: var(--ink); }

/* ================= Enlaces relacionados ================= */
.relacionadas ul { list-style: none; padding: 0; margin: var(--e-s) 0 0; display: grid; }
.relacionadas li { max-width: none; }
.relacionadas a { display: flex; justify-content: space-between; align-items: center; gap: var(--e-s);
  padding-block: 12px; border-block-start: 1px solid var(--line); text-decoration: none; font-weight: 600; font-size: var(--paso--1); }
.relacionadas a::after, .flecha::after { content: ""; inline-size: 8px; block-size: 8px; border-block-start: 1.5px solid currentColor;
  border-inline-end: 1.5px solid currentColor; transform: rotate(45deg); flex: none; opacity: .7;
  transition: transform var(--duracion-control), opacity var(--duracion-control); }
.relacionadas a:hover::after, .flecha:hover::after { transform: translateX(3px) rotate(45deg); opacity: 1; }
.titulo-nav { font-size: var(--paso-1); margin: 0; }

/* ================= Preguntas frecuentes ================= */
.preguntas details { border-block-start: 1px solid var(--line); max-width: 820px; }
.preguntas details:last-child { border-block-end: 1px solid var(--line); }
.preguntas summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 18px; gap: var(--e-s);
  align-items: center; padding-block: 18px; font-family: var(--fuente-display); font-size: clamp(1.1rem, 1.02rem + .35vw, 1.3rem); line-height: 1.3; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: ""; inline-size: 14px; block-size: 14px; justify-self: end;
  background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
              linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  transition: transform 200ms; }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { padding-block-end: 20px; color: var(--ink-2); max-width: 64ch; }

/* ================= Franja oscura ================= */
.franja { background: var(--franja); color: var(--franja-ink); position: relative; overflow: hidden; isolation: isolate; }
.franja::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(40% 60% at 100% 0%, rgb(255 87 143 / .20), transparent 70%),
              radial-gradient(35% 50% at 0% 100%, rgb(246 104 89 / .14), transparent 70%); }
.franja :is(h1, h2, h3) { color: var(--franja-ink); }
.franja .rotulo { color: var(--franja-muted); }

/* ================= Cierre ================= */
/* Off-white sobre Dive hondo: combinación sancionada por el brand kit. Igual en los dos temas. */
.cierre-banda { background: var(--dive-hondo); color: var(--off-white); }
.cierre-banda .contenedor { display: grid; gap: var(--e-l); align-items: end; padding-block: clamp(56px, 7vw, 96px); }
@media (min-width: 62rem) { .cierre-banda .contenedor { grid-template-columns: minmax(0, 1.2fr) auto; } }
.cierre-banda .titulo-cierre { margin: 0; color: var(--off-white); font-family: var(--fuente-display); font-weight: 400; text-wrap: balance; letter-spacing: -0.012em; font-size: var(--paso-4); line-height: 1.06; max-width: none; }
.cierre-banda p { margin-block-start: var(--e-s); color: #F1DCE4; font-size: var(--paso-1); max-width: 44ch; }
.cierre-banda .acciones { margin: 0; }
.cierre-banda .boton-secundario { color: var(--off-white); border-color: rgb(254 249 248 / .5); }
.cierre-banda .boton-secundario:hover { background: rgb(254 249 248 / .08); border-color: var(--off-white); }
.cierre-banda .boton-secundario .icono-wa { color: #7FE3A8; }

/* ================= Fichas de estado ================= */
/* Semánticas, separadas del acento: texto sobre su fondo tintado, medidas AA en
   los dos temas (tokens --sev-*). Vivían dentro de PanelOperacion; pasan aquí el
   24-sep porque el kit de identidad las usa en la línea de incidente, la consola
   y los casos. Mismos valores. */
.estado { font-family: var(--fuente-datos); font-size: .68rem; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.e-critica { color: var(--sev-critica); background: var(--sev-critica-fondo); }
.e-alta { color: var(--sev-alta); background: var(--sev-alta-fondo); }
.e-media { color: var(--sev-media); background: var(--sev-media-fondo); }
.e-ok { color: var(--sev-ok); background: var(--sev-ok-fondo); }
/* Kit (25-sep): severidad baja y "en curso". Tinta y fondo ya medidos AA. */
.e-baja { color: var(--ink-2); background: var(--surface-2); }
.e-curso { color: var(--kit-chip-ink); background: var(--kit-chip); }

/* ================= Tarjetas (también las usa el panel) ================= */
.tarjeta { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radio); padding: var(--e-m); }
.tarjeta-vidrio { background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--line); border-radius: var(--radio-l); box-shadow: var(--sombra-panel); padding: var(--e-l); }

/* ================= Formularios ================= */
.campo-base { display: grid; gap: var(--e-2xs); }
.campo-base :is(input, select, textarea) {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-control); border-radius: var(--radio);
  padding: var(--e-xs); min-block-size: 44px; inline-size: 100%;
}
.nota { font-size: var(--paso--1); color: var(--muted); }

/* Formularios propios (contacto y boletín, 24-sep-2026). Reemplazan los incrustados de HubSpot.
   Componentes: FormularioContacto.astro, FormularioNewsletter.astro, Consentimiento.astro.
   Errores en --sev-critica y éxito en --ok: los dos ya medidos AA en claro y oscuro. */
.formulario-nativo { display: grid; gap: var(--e-s); }
.formulario-nativo .campos { display: grid; gap: var(--e-s); }
.formulario-nativo .par { display: grid; gap: var(--e-s); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.campo-base label { font-weight: 600; font-size: var(--paso--1); color: var(--ink); line-height: 1.3; }
.campo-base .opcional { font-weight: 400; color: var(--muted); }
.campo-base :is(input, select, textarea):focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.campo-base :is(input, select)[aria-invalid="true"] { border-color: var(--sev-critica); box-shadow: 0 0 0 1px var(--sev-critica); }
.campo-base select { appearance: auto; }
.error-campo { font-size: var(--paso--1); color: var(--sev-critica); line-height: 1.4; margin: 0; }
.consentimiento { display: flex; gap: var(--e-2xs); align-items: flex-start; font-size: var(--paso--1); line-height: 1.45; cursor: pointer; color: var(--ink-2); }
.consentimiento input { inline-size: 1.1rem; block-size: 1.1rem; margin-block-start: .15rem; flex: none; accent-color: var(--acento); }
.consentimiento input[aria-invalid="true"] { outline: 2px solid var(--sev-critica); outline-offset: 2px; }
.casilla-campo { display: grid; gap: var(--e-3xs); }
.formulario-nativo .enviar { display: flex; flex-wrap: wrap; gap: var(--e-xs); align-items: center; }
.formulario-nativo button[aria-busy="true"] { opacity: .7; cursor: progress; }
.aviso { border-radius: var(--radio); padding: var(--e-s); display: grid; gap: var(--e-3xs); font-size: var(--paso--1); }
.aviso:focus { outline: none; }
.aviso:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.aviso-titulo { font-family: var(--fuente-display); font-size: var(--paso-1); line-height: 1.25; }
.aviso-ok { background: var(--sev-ok-fondo); color: var(--ink); border: 1px solid var(--ok); }
.aviso-ok .aviso-titulo { color: var(--ok); }
.aviso-error { background: var(--sev-critica-fondo); color: var(--ink); border: 1px solid var(--sev-critica); }
/* La trampa para robots: fuera de la vista y del foco, pero en el HTML. */
.campo-trampa { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Boletín compacto (25-sep-2026): una línea de entrada, el correo y el botón
   unidos en una fila (el campo crece, el botón va pegado), casillas en letra
   chica y juntas. En angosto se apilan, cada uno con sus esquinas. */
.newsletter { gap: var(--e-2xs); }
.newsletter .campos { gap: var(--e-2xs); }
.newsletter .bajada-boletin { font-size: var(--paso--1); color: var(--ink-2); line-height: 1.4; }
.newsletter .bajada-boletin .rotulo { display: inline; margin-inline-end: 6px; }
.fila-boletin { display: flex; align-items: stretch; }
.fila-boletin .campo-base { flex: 1 1 auto; min-width: 0; }
.fila-boletin :is(input, .boton) { min-block-size: 44px; }
.fila-boletin input { border-start-end-radius: 0; border-end-end-radius: 0; }
.fila-boletin input::placeholder { color: var(--muted); opacity: 1; }
.fila-boletin .boton { flex: none; margin-inline-start: -1px; border-color: var(--line-control); background: var(--surface-2);
  border-start-start-radius: 0; border-end-start-radius: 0; padding-inline: var(--e-s); }
.fila-boletin .boton:hover { background: var(--surface); border-color: var(--ink-2); }
.fila-boletin .boton:focus-visible { position: relative; z-index: 1; }
.newsletter .consentimiento { font-size: var(--paso--1); line-height: 1.4; gap: 8px; }
.newsletter .consentimiento input { inline-size: 1rem; block-size: 1rem; margin-block-start: .12rem; }
@media (max-width: 26rem) {
  .fila-boletin { flex-direction: column; gap: var(--e-2xs); }
  .fila-boletin input { border-radius: var(--radio); }
  .fila-boletin .boton { margin-inline-start: 0; border-radius: var(--radio); }
}
/* Oculto a la vista, presente para lectores de pantalla. */
.solo-lector { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ================= Listados (blog, glosario, alertas, casos) ================= */
.listado { list-style: none; padding: 0; margin: var(--e-xl) 0 0; display: grid; }
.listado li { max-width: none; border-block-start: 1px solid var(--line); }
.listado li:last-child { border-block-end: 1px solid var(--line); }
.listado a { display: grid; gap: 6px; padding-block: var(--e-m); text-decoration: none; }
.listado h2 { font-size: var(--paso-2); }
.listado p { color: var(--ink-2); }
.listado a:hover h2 { text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: .15em; }
.vacio { color: var(--muted); margin-block-start: var(--e-l); max-width: var(--ancho-texto); }

/* ================= Tablas dentro del contenido ================= */
/* Van envueltas en un contenedor que se desplaza solo: una tabla de comparación
   no cabe en 375px y sin esto arrastra la página entera de lado. */
.tabla-envuelta { overflow-x: auto; margin-block-start: var(--e-s); }
.prosa table { border-collapse: collapse; width: 100%; min-width: 32rem; font-size: var(--paso--1); }
.prosa th { text-align: left; font-weight: 600; color: var(--ink); padding: var(--e-2xs) var(--e-xs);
  border-block-end: 2px solid var(--line-strong); font-family: var(--fuente-datos); font-size: .78rem; letter-spacing: .03em; }
.prosa td { padding: var(--e-2xs) var(--e-xs); border-block-end: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.prosa td:first-child { color: var(--ink); font-weight: 600; }
.prosa ol { padding-inline-start: 1.2rem; }
.prosa ol li { margin-block-start: var(--e-2xs); }

/* ================= Movimiento ================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}