/* ══════════════════════════════════════════════════════════════════════════
   Capa 2 de 3 — BASE. Reset, tipografía, layout y accesibilidad.
   Consume tokens.css. Aquí no hay ni un color en crudo.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── RESET ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;   /* no romper el zoom en iOS */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--sp-5));
}

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;              /* jamás scroll horizontal */
  min-height: 100svh;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul[class], ol[class] { list-style: none; padding: 0; }

/* ── TIPOGRAFÍA ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: -0.025em;
  color: var(--fg-strong);
  text-wrap: balance;            /* sin líneas huérfanas en titulares */
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.015em; }

p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

strong, b { font-weight: 600; color: var(--fg-strong); }

/* Texto con gradiente de marca. -webkit-* es obligatorio: sin él no recorta. */
.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Etiqueta HUD monoespaciada — la «telemetría» del sistema */
.hud {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: var(--wrap-text);
}

.muted   { color: var(--fg-muted); }
.center  { text-align: center; }
.balance { text-wrap: balance; }

/* ── LAYOUT ──────────────────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-wide { max-width: var(--wrap-wide); }

section { position: relative; }

.sec { padding-block: var(--sec-y); }

/* Cabecera de sección reutilizable */
.sec-head { max-width: 52rem; margin-bottom: var(--sp-7); }
.sec-head.center { margin-inline: auto; }
.sec-head .hud { display: block; margin-bottom: var(--sp-3); }
.sec-head h2 { margin-bottom: var(--sp-4); }
.sec-head.center .lead { margin-inline: auto; }

/* Rejillas */
.grid { display: grid; gap: var(--sp-5); }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }

.stack   { display: flex; flex-direction: column; gap: var(--sp-4); }
.row     { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.row-end { justify-content: flex-end; }

/* Separador luminoso */
.hr {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--glass-border-hi), transparent);
  margin-block: var(--sp-7);
}

/* ── ACCESIBILIDAD ───────────────────────────────────────────────────────── */

/* `hidden` significa oculto. Siempre.
   El navegador aplica `[hidden] { display: none }` en su hoja por defecto,
   pero CUALQUIER regla propia con `display` la gana por especificidad. Es
   una trampa silenciosa: se escribe `<div hidden>` en el HTML, el elemento
   se ve igualmente, y nadie lo relaciona con el CSS.
   Ya había mordido dos veces en este proyecto: el panel de detalle del
   banner de cookies (`display:flex`) salía siempre desplegado, y el aviso
   de «formulario enviado» (`display:flex`) se veía antes de enviar nada.
   Con esta regla, el atributo manda y no hay que acordarse de escribir el
   guardia en cada componente nuevo. */
[hidden] { display: none !important; }

/* Foco visible SIEMPRE. Nunca se elimina el anillo de foco. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Solo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Salto al contenido — primer tabulable de la página */
.skip {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: var(--z-toast);
  padding: var(--sp-3) var(--sp-5);
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--r-md);
  font-weight: 600;
  transform: translateY(-150%);
  transition: transform var(--d-fast) var(--e-out);
}
.skip:focus { transform: translateY(0); }

/* Todo lo clicable lo parece */
a, button, summary, [role="button"], label[for] { cursor: pointer; }

/* Área táctil mínima 44×44 en controles interactivos */
button, .btn, .nav-link, input[type="submit"] { min-height: 44px; }

/* ── FONDO CÓSMICO ───────────────────────────────────────────────────────
   Dos capas fijas detrás de todo: auroras de color + malla neuronal.
   `position: fixed` evita repintar en cada scroll (coste GPU ~0).        */
.cosmos {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
  overflow: hidden;
}

.cosmos::before,
.cosmos::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .5;
}

/* Aurora índigo — arriba a la izquierda */
.cosmos::before {
  width: 60vw; height: 60vw;
  max-width: 900px; max-height: 900px;
  top: -22vw; left: -14vw;
  background: radial-gradient(circle, rgba(99,102,241,.5) 0%, transparent 68%);
  animation: deriva 26s var(--e-inout) infinite alternate;
}

/* Aurora cian — a la derecha, más abajo */
.cosmos::after {
  width: 52vw; height: 52vw;
  max-width: 780px; max-height: 780px;
  top: 34vh; right: -18vw;
  background: radial-gradient(circle, rgba(34,211,238,.34) 0%, transparent 68%);
  animation: deriva 32s var(--e-inout) 3s infinite alternate-reverse;
}

@keyframes deriva {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6vw, 8vh, 0) scale(1.16); }
}

/* Malla neuronal: rejilla finísima con desvanecido radial en los bordes */
.cosmos .malla {
  position: absolute;
  inset: -1px;
  background-image:
    linear-gradient(to right, var(--glass-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--glass-border) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 32%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 32%, #000 20%, transparent 78%);
  opacity: .55;
}

[data-theme="light"] .cosmos::before { opacity: .3; }
[data-theme="light"] .cosmos::after  { opacity: .26; }

/* El contenido siempre por encima del cosmos */
.page { position: relative; z-index: var(--z-content); }

/* ── MOVIMIENTO REDUCIDO ─────────────────────────────────────────────────
   Regla no negociable: quien lo pide ve la página en su estado FINAL,
   legible, sin animación — no una versión rota ni vacía.               */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* El contenido revelado por scroll aparece ya visible */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ── IMPRESIÓN ───────────────────────────────────────────────────────────── */
@media print {
  .cosmos, .nav, .footer-cta, .cookie-bar, .theme-toggle { display: none !important; }
  body { background: #fff; color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}