/* ═══════════════════════════════════════════════════════════
   Reset + body + fondo (aurora ambiental + grain SVG)
   ═══════════════════════════════════════════════════════════ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--base);
  color: var(--body);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

/* Aurora ambiental muy suave: iluminación cálida arriba-derecha + fría abajo-izquierda */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 90% 10%, rgba(255, 160, 90, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 70% 70% at 5% 90%, rgba(100, 150, 235, 0.10) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Grain sutil tipo papel para textura táctil */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.25  0 0 0 0 0.3  0 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  mix-blend-mode: multiply;
}

/* Accesibilidad: skip link (visible solo con focus) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 12px 0;
  text-decoration: none;
  font-family: 'Inter', system-ui, sans-serif;
}
.skip-link:focus {
  left: 0;
  outline: 3px solid var(--heading);
  outline-offset: 2px;
}

/* Focus visible naranja en todos los interactivos */
*:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}