/* =====================================================================
   SentinelX — sitio web v5 (2026-11-10): lo común a todas las páginas.
   Sale de la v4 (paleta y aspecto de la aplicación: fondo #05060F con la aurora violeta/rosa/azul,
   cristal claro en vez de cajas, un solo botón blanco por zona). Sin dependencias externas salvo la fuente.
   ===================================================================== */
:root{
  --profundo:#05060f; --fondo:#080b16;
  --texto:#d8ecf8; --texto-2:#9da7ba; --texto-3:#7d8aa3; --blanco:#fff; --blanco-hover:#e6eefb;
  --acento:#98c0ef;
  --borde:rgba(186,215,247,.12); --borde-alto:rgba(186,215,247,.24);
  --wash:rgba(186,214,247,.05); --wash-alto:rgba(186,214,247,.10); --panel:rgba(186,214,247,.04);
  --violeta:#625fff; --rosa:#ff7dda;
  --titular:linear-gradient(180deg,#d8ecf8 0%,#98c0ef 100%);
  --exito:#4ade80;
  --curva:cubic-bezier(.2,.8,.2,1);
  --fuente:"Segoe UI Variable Text","Segoe UI","Inter",system-ui,-apple-system,sans-serif;
  --fuente-titulo:"Segoe UI Variable Display","Segoe UI","Inter",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;background:var(--profundo)}
body{margin:0;background:transparent;color:var(--texto-2);font:400 16px/1.6 var(--fuente);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}ul,ol{list-style:none}a{color:inherit;text-decoration:none}
::selection{background:rgba(152,192,239,.3);color:#fff}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:8px}
.ico{width:22px;height:22px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.envoltura{width:min(1120px,100% - 32px);margin-inline:auto}
.saltar{position:absolute;left:16px;top:-60px;z-index:50;background:var(--blanco);color:var(--profundo);padding:10px 16px;border-radius:999px;font-weight:600}
.saltar:focus{top:12px}
.grad{background:var(--titular);-webkit-background-clip:text;background-clip:text;color:transparent}

/* La aurora de la aplicación, detrás de toda la página */
.aurora{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;border-radius:50%;filter:blur(20px);will-change:transform}
.aurora .l1{width:900px;height:720px;left:-260px;top:-300px;background:radial-gradient(closest-side,rgba(98,95,255,.27),transparent);animation:deriva1 23s ease-in-out infinite alternate}
.aurora .l2{width:820px;height:680px;right:-240px;bottom:-320px;background:radial-gradient(closest-side,rgba(255,125,218,.18),transparent);animation:deriva2 31s ease-in-out infinite alternate}
.aurora .l3{width:640px;height:560px;left:calc(50% - 320px);top:calc(50% - 280px);background:radial-gradient(closest-side,rgba(152,192,239,.13),transparent);animation:deriva3 37s ease-in-out infinite alternate}
@keyframes deriva1{to{transform:translate(140px,90px)}}
@keyframes deriva2{to{transform:translate(-160px,-80px)}}
@keyframes deriva3{to{transform:translate(120px,-110px)}}

/* Botones (los de la app: píldora; blanco = el principal) */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 22px;border-radius:999px;border:0;font:500 15px var(--fuente);cursor:pointer;white-space:nowrap;
  transition:background-color .18s var(--curva),transform .18s var(--curva),box-shadow .18s var(--curva)}
.boton:active{transform:scale(.97)}
.boton.principal{background:var(--blanco);color:var(--profundo)}
.boton.principal:hover{background:var(--blanco-hover)}
.boton.secundario{background:var(--wash);color:var(--texto);box-shadow:inset 0 0 0 1px var(--borde)}
.boton.secundario:hover{background:var(--wash-alto)}
.boton.grande{min-height:52px;padding:0 30px;font-size:16px}
.boton.ancho{width:100%}
.enlace{color:var(--acento);font-weight:500;display:inline-flex;align-items:center;gap:6px;transition:color .16s var(--curva)}
.enlace:hover{color:var(--texto)}

/* Barra de arriba */
.barra{position:sticky;top:0;z-index:30;background:rgba(5,6,15,.66);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--borde)}
.barra .envoltura{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.marca{display:flex;align-items:center;gap:10px;font:600 17px var(--fuente-titulo);color:var(--texto);letter-spacing:-.01em}
.marca svg{width:26px;height:26px}
.menu{display:flex;align-items:center;gap:28px}
.menu a:not(.boton){color:var(--texto-2);font-size:14.5px;transition:color .16s var(--curva)}
.menu a:not(.boton):hover,.menu a[aria-current="page"]{color:var(--texto)}
.menu .boton{min-height:38px;padding:0 18px;font-size:14px}

/* Pie */
.pie{padding:44px 0 36px;box-shadow:inset 0 1px 0 var(--borde)}
.pie .envoltura{display:flex;flex-wrap:wrap;gap:24px 56px;justify-content:space-between;align-items:flex-start}
.pie p{font-size:13.5px;color:var(--texto-3);max-width:40ch;margin-top:10px}
.pie nav{display:flex;flex-wrap:wrap;gap:12px 30px}
.pie nav a{font-size:14px;color:var(--texto-2);transition:color .16s var(--curva)}
.pie nav a:hover,.pie nav a[aria-current="page"]{color:var(--texto)}
.derechos{width:min(1120px,100% - 32px);margin:28px auto 0;padding-top:20px;border-top:1px solid var(--borde);font-size:13px;color:var(--texto-3)}

/* =====================================================================
   POR MÓDULOS (pedido del dueño, 2026-11-10: «no me gusta lineal o vertical, me gusta por módulo»):
   cada módulo es su propia página corta que llena la pantalla, como los módulos de la aplicación.
   ===================================================================== */
body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.modulo{flex:1;display:flex;flex-direction:column;justify-content:center;padding:40px 0 48px}
.etiqueta{font:600 12px var(--fuente);letter-spacing:.12em;text-transform:uppercase;color:var(--texto-3);margin-bottom:12px}
.cabeza{margin-bottom:34px}
.cabeza h2{font:600 clamp(28px,3.4vw,40px)/1.12 var(--fuente-titulo);letter-spacing:-.02em;text-wrap:balance;max-width:24ch}
.cabeza .bajada{font-size:16.5px;color:var(--texto-2);max-width:60ch;margin-top:12px;text-wrap:pretty}
.cabeza.centro{text-align:center}.cabeza.centro h2,.cabeza.centro .bajada{margin-inline:auto}
.siguiente{margin-top:34px;text-align:center}
/* Menú: el módulo en el que estás se marca como en la barra lateral de la app */
.menu a[aria-current="page"]:not(.boton){color:var(--texto);box-shadow:inset 0 -2px 0 var(--acento);padding-bottom:4px}
/* Pie de los módulos: una sola línea, para que el módulo quepa en la pantalla */
.pie.corto{padding:18px 0 22px}
.pie.corto .envoltura{align-items:center}
.pie.corto p{margin:0}
.pie.corto .derechos{display:none}
/* Cambiar de módulo = transición de CONTEXTO (principios de UI del dueño): fundido corto entre páginas, donde el navegador lo admite */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}

/* Movimiento reducido: la aurora se queda quieta y no hay transiciones */
@media (prefers-reduced-motion:reduce){
  .aurora i{animation:none}
  *{transition-duration:.01ms!important;scroll-behavior:auto!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
/* En pantallas estrechas el menú pasa a una fila que se desliza de lado, debajo de la marca */
@media (max-width:900px){
  .barra .envoltura{flex-wrap:wrap;height:auto;padding:10px 0;row-gap:8px}
  .menu{width:100%;overflow-x:auto;gap:22px;padding-bottom:4px;scrollbar-width:none}
  .menu::-webkit-scrollbar{display:none}
  .menu a{flex-shrink:0}
  .modulo{padding:28px 0 36px}
}
@media (max-width:520px){
  .aurora .l1{width:560px;height:480px}.aurora .l2{width:520px;height:460px}.aurora .l3{width:420px;height:380px;left:calc(50% - 210px)}
}
/* Los títulos de módulo son h1 (uno por página) pero con el tamaño de sección */
.h2-como,.cabeza h1{font:600 clamp(28px,3.4vw,40px)/1.12 var(--fuente-titulo);letter-spacing:-.02em;text-wrap:balance;max-width:24ch}
.cabeza.centro h1{margin-inline:auto}