:root {
  --primary-color: #B07E50;
  --primary-color-rgb: 176, 126, 80;
  --secondary-color: #B07E50;
  --secondary-color-rgb: 176, 126, 80;

  /* Rosso pieno del logo: usato dai titoli di sezione, che stanno su fondo
     chiaro (8:1 di contrasto su bianco). */
  --brand-red: #9B1D21;

  /* Variante schiarita, solo per i titoli sopra le foto degli hero: lì il
     rosso pieno scenderebbe sotto la soglia di leggibilità. */
  --brand-red-on-photo: #E63946;
}

/* Titoli sopra le foto: rosso schiarito e alone scuro, perché lo sfondo
   cambia da immagine a immagine. */
.text-light h1,
.text-light h2,
.text-light h3,
.text-light h4,
.text-light h5,
.text-light h6 {
  color: var(--brand-red-on-photo);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85), 0 0 30px rgba(0, 0, 0, 0.5);
}

/* Titoli di sezione su fondo chiaro: rosso pieno, nessuna ombra. */
.title-brand {
  color: var(--brand-red);
  text-shadow: none;
}

/* Sezioni compatte: in origine erano 100px sopra e sotto, cioè 200px fra due
   sezioni adiacenti. Le utility .no-top/.no-bottom/.pt-*/.pb-* restano valide. */
section {
  padding: 40px 0;
}