/* Sistema visual — Señeros Halloween Run 3ª Edición.
   Sin degradados. Sin sombras suaves. Bloques de color planos. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;900&display=swap');

:root {
  --morado: #92488f;
  --plum: #46224c;
  --naranja: #F26722;
  --crema: #FDF7F2;
  --tinta: #2A1430;

  --fuente: 'Poppins', system-ui, sans-serif;

  --paso-1: 0.5rem;
  --paso-2: 1rem;
  --paso-3: 2rem;
  --paso-4: 4rem;
  --paso-5: 6rem;

  --ancho-max: 1120px;
}

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

body {
  margin: 0;
  font-family: var(--fuente);
  font-weight: 500;              /* nunca Light 300 */
  color: var(--tinta);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 900; line-height: 0.95; letter-spacing: -0.02em; margin: 0; }

.seccion { padding: var(--paso-5) var(--paso-3); }
/* width:100% es obligatorio: .hero es un flex column y los márgenes `auto` en el
   eje transversal cancelan el `stretch`, así que sin esto el contenedor se
   encoge a fit-content y todo lo que mida en % (el logotipo) se calcula mal. */
.contenedor { width: 100%; max-width: var(--ancho-max); margin: 0 auto; }

.bloque-morado { background: var(--plum); color: var(--crema); }
.bloque-naranja { background: var(--naranja); color: var(--plum); }

.badge {
  display: inline-block;
  background: var(--naranja);
  color: var(--plum);
  font-weight: 900;
  padding: var(--paso-1) var(--paso-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pendiente {
  display: inline-block;
  border: 2px dashed currentColor;
  padding: 2px 8px;
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.7;
}