/* ============================================================
   MAEStudio · BASE — reset, tipografía, materiales, a11y
   Consume SOLO tokens semánticos (tokens.css).
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--obs-noche-0);
  color: var(--text, var(--obs-texto-n));
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--obs-coral-deep); color: #fff; }

/* ---------- Foco visible (a11y) ---------- */
:focus-visible {
  outline: 2px solid var(--obs-lila);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ⚠️⚠️ FIJO, NO ABSOLUTO — corregido el 2026-08-17, y era un fallo de verdad.
   Con `absolute` el enlace de salto cuelga del PRINCIPIO DEL DOCUMENTO, no de la
   ventana. En una página de una pantalla da igual; aquí no: `web3` mide 26
   pantallas e `index` veinte secciones. Medido con el foco puesto: arriba del
   todo salía en `top −48` y a mitad del raíl en **−9048**, o sea a nueve mil
   píxeles fuera de la vista. Un salto de contenido que no se ve al enfocarlo no
   le sirve a nadie, y es justo lo que WCAG 2.4.11 llama foco oscurecido.
   Con `fixed` aparece siempre en la esquina de la VENTANA, y su z-index (99)
   pasa por delante de la navbar (90), que es lo que hace que se vea de verdad. */
.skip-link {
  position: fixed; top: -48px; left: 16px; z-index: var(--z-overlay);
  background: var(--obs-coral-deep); color: #fff; padding: 10px 18px;
  border-radius: 8px; text-decoration: none; font-size: var(--fs-small);
  transition: top var(--dur-micro);
}
.skip-link:focus { top: 12px; }

/* ---------- Tipografía ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--title);
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: 0.02em;
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { color: var(--text); }

.kicker {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  font-weight: 500;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-2);
}

.lead {
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--title);
}

.data, .hud {
  font-family: var(--font-data);
  font-size: var(--fs-data);
  letter-spacing: 0.04em;
}

a { color: var(--link); }

/* ---------- Botones ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--r-btn);
  padding: 13px 26px;
  transition: transform var(--dur-micro), box-shadow var(--dur-micro),
              background var(--dur-micro), border-color var(--dur-micro);
}
.btn:hover { transform: translateY(-2px); }

/* CTA = coral profundo + texto blanco (D-046; el vivo solo en hover/gráficos) */
.btn--cta {
  background: var(--cta);
  color: var(--cta-text);
  box-shadow: 0 6px 22px rgba(194, 42, 40, 0.30);
}
.btn--cta:hover { background: var(--cta-hover); }

.btn--ghost {
  border: 1px solid var(--mat-veil-line);
  color: var(--title);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--dim); }

/* ---------- Materiales (la opacidad es énfasis — se raciona) ---------- */
/* Velo: tarjeta translúcida sobre el fondo continuo */
.mat-veil {
  background: var(--mat-veil);
  border: 1px solid var(--mat-veil-line);
  border-radius: var(--r-card);
  backdrop-filter: blur(2px);
}

/* Panel opaco: bandas S9/S10/S12 — scanlines ~2%, eco del reboot (D-044) */
.mat-panel {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(238, 243, 255, 0.02) 0px, rgba(238, 243, 255, 0.02) 1px,
      transparent 1px, transparent 4px
    ),
    var(--mat-panel);
  border-block: 1px solid var(--mat-panel-line);
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
}
.reveal.on { opacity: 1; transform: none; }

/* ---------- Reduced motion (obligatorio — gramática §6) ---------- */
@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;
  }
  .reveal { opacity: 1; transform: none; }
}