body {
  font-family: var(--font);
  font-size: 1rem;
  color: var(--text-1);
  line-height: 1.6;
  /* Escala global — ver --app-zoom en base/01-variables.css */
  zoom: var(--app-zoom);

  /* Estadio de noche — base casi negro con tinte teal profundo + focos
     floodlight que bajan desde arriba como conos de luz. */
  background: #030607;
  position: relative;
  min-height: 100vh;
}
/* Capa de luces de estadio (focos + halos) — fixed para que no scrollee */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    /* 6 conos floodlight grandes, blanco-cyan, bien visibles */
    radial-gradient(ellipse 240px 95vh at 12% -10%, rgba(225, 245, 255, 0.85), rgba(160, 220, 240, 0.22) 22%, transparent 62%),
    radial-gradient(ellipse 260px 95vh at 28% -10%, rgba(225, 245, 255, 0.72), rgba(160, 220, 240, 0.20) 25%, transparent 65%),
    radial-gradient(ellipse 280px 95vh at 44% -10%, rgba(225, 245, 255, 0.85), rgba(160, 220, 240, 0.24) 23%, transparent 63%),
    radial-gradient(ellipse 280px 95vh at 56% -10%, rgba(225, 245, 255, 0.85), rgba(160, 220, 240, 0.24) 23%, transparent 63%),
    radial-gradient(ellipse 260px 95vh at 72% -10%, rgba(225, 245, 255, 0.72), rgba(160, 220, 240, 0.20) 25%, transparent 65%),
    radial-gradient(ellipse 240px 95vh at 88% -10%, rgba(225, 245, 255, 0.85), rgba(160, 220, 240, 0.22) 22%, transparent 62%),
    /* Halo soft alrededor de cada bombilla */
    radial-gradient(56px 42px at 12% 1%, rgba(255,255,255,0.85), transparent 70%),
    radial-gradient(56px 42px at 28% 1%, rgba(255,255,255,0.85), transparent 70%),
    radial-gradient(60px 46px at 44% 1%, rgba(255,255,255,0.95), transparent 70%),
    radial-gradient(60px 46px at 56% 1%, rgba(255,255,255,0.95), transparent 70%),
    radial-gradient(56px 42px at 72% 1%, rgba(255,255,255,0.85), transparent 70%),
    radial-gradient(56px 42px at 88% 1%, rgba(255,255,255,0.85), transparent 70%);
  filter: blur(3px);
}
/* Capa de "bombillas" crisp encima del blur + iluminación teal sobre el césped */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    /* Bombillas puntuales bien nítidas */
    radial-gradient(circle 6px at 12% 1.2%, #fff 60%, rgba(220,250,255,0.6) 90%, transparent),
    radial-gradient(circle 6px at 28% 1.2%, #fff 60%, rgba(220,250,255,0.6) 90%, transparent),
    radial-gradient(circle 7px at 44% 1.2%, #fff 60%, rgba(220,250,255,0.6) 90%, transparent),
    radial-gradient(circle 7px at 56% 1.2%, #fff 60%, rgba(220,250,255,0.6) 90%, transparent),
    radial-gradient(circle 6px at 72% 1.2%, #fff 60%, rgba(220,250,255,0.6) 90%, transparent),
    radial-gradient(circle 6px at 88% 1.2%, #fff 60%, rgba(220,250,255,0.6) 90%, transparent),
    /* Convergencia teal donde apuntan los focos (al "césped") */
    radial-gradient(70% 35% at 50% 78%, rgba(10, 219, 198, 0.10), transparent 70%);
  animation: stadium-pulse 8s ease-in-out infinite alternate;
}
@keyframes stadium-pulse {
  0%   { opacity: 0.92; }
  50%  { opacity: 1; }
  100% { opacity: 0.92; }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-1);
  letter-spacing: -0.02em;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }

a {
  color: var(--green);
  text-decoration: none;
}
/* `:where(:hover)` mantiene la especificidad en (0,0,1): el hover de los links
   de texto sigue funcionando, pero cualquier botón con clase propia
   (ej. .mhome-cta, .btn) conserva su color de texto en hover en vez de que esta
   regla lo pise y lo vuelva ilegible sobre un fondo de color. */
a:where(:hover) {
  color: var(--green-hover);
}

small {
  font-size: 0.875rem;
  color: var(--text-2);
}