/* ============================================================
   RIFUGIO TERREROSSE — terrerosse.css
   Design system "Terra rossa"

   Concept: il nome del rifugio è un colore. Il rosso Verrucano
   del logo è usato in modo strutturale (hero, footer, bande),
   la pagina è carta calda, i dati (quote, orari, prezzi, gradi)
   parlano in monospazio come su una carta topografica.
   Le etichette di sezione sono in monospazio rosso maiuscolo.

   Indice:
   1. Token          6. Sezioni & segnavia   11. Meteo
   2. Base           7. Il Rifugio            12. Eventi
   3. Bottoni        8. Come arrivare         13. Galleria
   4. Topbar         9. Dormire               14. Contatti
   5. Hero          10. Mangiare              15. Footer
                                              16. Utility & motion
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKEN
   ------------------------------------------------------------ */
:root {
  /* Palette — dal logo e dalla roccia rossa (Verrucano Lombardo) */
  --rosso:       #A52A1E;
  --rosso-cupo:  #6E1B12;
  --rosso-notte: #4A120C;
  --carta:       #FAF5EC;
  --sabbia:      #F1E8D8;
  --carbone:     #261C16;
  --bruno:       #6B5B4E;
  --ocra:        #C9922E;
  --avorio:      #FFF9F0;
  --bianco:      #FFFFFF;
  --verde-wa:    #128442;   /* solo per i bottoni WhatsApp (AA: 4.77:1 col bianco) */

  /* Tipografia */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Karla', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Geometria */
  --radius:     10px;
  --radius-lg:  16px;
  --bordo:      1px solid rgba(38, 28, 22, 0.14);
  --container:  1160px;
  --section-py: clamp(56px, 9vw, 120px);
}

/* ------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--carbone);
  background: var(--carta);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 550;
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.35rem, 2.5vw, 1.7rem); }
h4 { font-size: 1.1rem; font-weight: 600; }

p { margin: 0 0 1em; }
a { color: var(--rosso); }

ul { padding: 0; margin: 0; list-style: none; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

/* Dati in monospazio: quote, orari, prezzi, temperature */
.dato {
  font-family: var(--font-mono);
  font-size: 0.85em;
  letter-spacing: 0.02em;
}

:focus-visible {
  outline: 3px solid var(--rosso);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link: invisibile finché non riceve il focus da tastiera */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  background: var(--carbone);
  color: var(--avorio);
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

::selection { background: var(--rosso); color: var(--avorio); }

.icon-svg {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.22em;
  flex-shrink: 0;
}

/* ------------------------------------------------------------
   3. BOTTONI
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: none;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-whatsapp {
  background: var(--verde-wa);
  color: var(--bianco);
  box-shadow: 0 2px 10px rgba(18, 132, 66, 0.35);
}
.btn-whatsapp:hover { background: #0E6B35; }

.btn-outline {
  background: transparent;
  color: var(--carbone);
  border: 2px solid currentColor;
}

.btn-sm { padding: 10px 20px; font-size: 0.9rem; }

/* ------------------------------------------------------------
   4. TOPBAR — appare solo dopo l'hero
   ------------------------------------------------------------ */
.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px clamp(16px, 3vw, 32px);
  background: rgba(110, 27, 18, 0.96);
  backdrop-filter: blur(8px);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.topbar.visible { transform: translateY(0); }

.topbar-logo img { height: 34px; width: auto; }

.topbar-nav {
  display: flex;
  gap: clamp(10px, 2vw, 24px);
}

.topbar-nav a {
  color: var(--avorio);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
}
.topbar-nav a:hover { color: var(--ocra); }

.topbar .btn { padding: 8px 18px; font-size: 0.85rem; box-shadow: none; }

@media (max-width: 720px) {
  .topbar-nav { display: none; }
}

/* ------------------------------------------------------------
   5. HERO — foto di sfondo velata di rosso, logo, panorama etichettato

   La foto (hero-rifugio.jpg) è uno scatto reale del rifugio: tramonto
   estivo sulla cresta della valle. È VERTICALE, come tutte le foto
   arrivate dal rifugista — l'hero invece è largo ~2,5:1, quindi ne
   mostra solo una fascia. Il fuoco verticale è al 70% e NON a metà:
   più in alto si prenderebbe solo cielo vuoto, il crinale sta in basso.
   Se un giorno arriva una foto orizzontale, rimettere il fuoco al 30-40%.

   Il velo scuro sopra tiene leggibili logo, titolo e navigazione; il
   gradiente vira al rosso in basso per raccordarsi al panorama SVG.
   ------------------------------------------------------------ */
.hero {
  position: relative;
  --hero-foto: url('img/hero-rifugio.webp');
  background:
    linear-gradient(180deg,
      rgba(38, 28, 22, 0.62) 0%,
      rgba(74, 18, 12, 0.34) 42%,
      rgba(110, 27, 18, 0.48) 100%),
    var(--hero-foto) center 70% / cover no-repeat;
  background-color: var(--rosso-cupo); /* fallback finché la foto carica */
  color: var(--avorio);
  text-align: center;
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: 2;
  /* Ombra morbida dietro logo e titolo per staccarli dalla foto */
  text-shadow: 0 1px 18px rgba(38, 28, 22, 0.45);
  padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 40px) 0;
  max-width: 900px;
  margin-inline: auto;
}

.hero-logo {
  width: clamp(220px, 34vw, 340px);
  height: auto;
  margin-inline: auto;
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(0.7rem, 1.6vw, 0.85rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 249, 240, 0.75);
  margin: 24px 0 26px;
}

.hero h1 {
  font-size: clamp(1.6rem, 4.2vw, 2.7rem);
  font-weight: 480;
  max-width: 20ch;
  margin-inline: auto;
}

.hero h1 em {
  font-style: italic;
  font-weight: 560;
  color: #F4C98A;
}

/* Navigazione a paletti segnavia */
.hero-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(28px, 4vw, 40px);
}

.hero-nav a {
  padding: 10px 20px;
  border: 1.5px solid rgba(255, 249, 240, 0.4);
  border-radius: 999px;
  color: var(--avorio);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 700;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.hero-nav a:hover {
  background: var(--avorio);
  border-color: var(--avorio);
  color: var(--rosso-cupo);
}

/* Panorama — cresta reale con vette etichettate */
.panorama {
  position: relative;
  z-index: 1;
  margin-top: clamp(24px, 4vw, 48px);
}

.panorama svg {
  display: block;
  width: 100%;
  height: auto;
}

.peak-label {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  fill: rgba(255, 249, 240, 0.85);
}

.peak-quota { font-size: 11px; fill: rgba(255, 249, 240, 0.55); }

.peak-line {
  stroke: rgba(255, 249, 240, 0.4);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.rifugio-label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  fill: var(--rosso-cupo);
}

/* Paesi in valle: più discreti del rifugio */
.paese-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  fill: var(--bruno);
}

/* Su mobile resta solo la sagoma: etichette, linee e punti spariscono */
@media (max-width: 640px) {
  .panorama text,
  .panorama line,
  .panorama circle { display: none; }
}

/* ------------------------------------------------------------
   6. SEZIONI & SEGNAVIA
   ------------------------------------------------------------ */
.section { padding-block: var(--section-py); scroll-margin-top: 64px; }
.section-alt { background: var(--sabbia); }

.section-head {
  max-width: 640px;
  margin: 0 auto clamp(36px, 6vw, 64px);
  text-align: center;
}

.section-head p {
  color: var(--bruno);
  font-size: 1.1rem;
  margin-bottom: 0;
}

/* Etichetta di sezione: monospazio rosso maiuscolo */
.segnavia {
  display: inline-block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rosso);
}

/* CTA in coda a ogni sezione */
.section-cta {
  text-align: center;
  margin-top: clamp(36px, 5vw, 56px);
}

.section-cta p { color: var(--bruno); margin-bottom: 16px; }

/* Copy che accompagna un bottone WhatsApp (sta sopra, mai dentro) */
.btn-copy { margin: 0 0 12px; color: var(--bruno); }
.listino .btn-copy { text-align: center; margin-top: 4px; }

/* ------------------------------------------------------------
   7. IL RIFUGIO
   ------------------------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.split-img img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.split-img {
  position: relative;
}

/* Quota stampigliata sull'angolo della foto */
.split-img::after {
  content: "1800 m s.l.m.";
  position: absolute;
  bottom: 14px;
  left: 14px;
  padding: 6px 12px;
  background: var(--rosso-cupo);
  color: var(--avorio);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  border-radius: 6px;
}

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split-img img { min-height: 260px; }
}

.servizi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  margin: 24px 0 28px;
}

.servizi li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.98rem;
  padding-block: 3px;
}

.servizi .icon-svg { color: var(--rosso); }

@media (max-width: 560px) {
  .servizi { grid-template-columns: 1fr; }
}

/* Griglia stagioni / apertura */
.stagioni {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: clamp(40px, 6vw, 64px);
}

.stagione-box {
  background: var(--avorio);
  border: var(--bordo);
  border-radius: var(--radius);
  padding: 22px 20px;
  text-align: center;
}

.stagione-box .icon-svg {
  width: 1.7em;
  height: 1.7em;
  color: var(--rosso);
  margin-bottom: 8px;
}

.stagione-box h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 4px; }
.stagione-box p { font-size: 0.92rem; color: var(--bruno); margin: 0; }

/* ------------------------------------------------------------
   8. COME ARRIVARE
   ------------------------------------------------------------ */
.tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.tab-btn {
  padding: 11px 26px;
  border: 1.5px solid rgba(38, 28, 22, 0.25);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--carbone);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tab-btn.active {
  background: var(--rosso);
  border-color: var(--rosso);
  color: var(--avorio);
}

.tab-content { display: none; }
.tab-content.active { display: block; }

.percorsi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: clamp(32px, 5vw, 48px);
}

.percorso {
  background: var(--avorio);
  border: var(--bordo);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
}

.percorso--highlight {
  border: 2px solid var(--rosso);
  background: var(--bianco);
}

.percorso h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 1.2rem;
}

.percorso h3 .icon-svg { color: var(--rosso); width: 1.3em; height: 1.3em; }

.percorso li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 0.95rem;
  padding-block: 5px;
  border-top: 1px dashed rgba(38, 28, 22, 0.15);
}

.percorso li:first-child { border-top: none; }
.percorso li .icon-svg { color: var(--bruno); width: 1em; height: 1em; }

/* Modi di salita dentro allo stesso versante (a piedi, seggiovia, jeep) */
.percorso .modo + .modo {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(38, 28, 22, 0.14);
}

.percorso .modo h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rosso);
  margin-bottom: 8px;
}

.percorso .modo h4 .icon-svg { width: 1.15em; height: 1.15em; }

/* Avviso di sicurezza dentro a un percorso (es. ciaspole sulle piste) */
.percorso .avviso {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 16px 0 0;
  padding: 11px 14px;
  background: var(--sabbia);
  border-left: 3px solid var(--rosso);
  border-radius: 6px;
  font-size: 0.88rem;
  color: var(--carbone);
}

.percorso .avviso .icon-svg {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  margin-top: 0.2em;
  color: var(--rosso);
}
/* Il copy e il bottone stanno in coppia: spazio sopra il copy, poco sotto */
.percorso .btn-copy { margin: 16px 0 8px; }
.percorso .btn { margin-top: 0; }

.map-frame iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
  border-radius: var(--radius-lg);
}

/* ------------------------------------------------------------
   9. DORMIRE
   ------------------------------------------------------------ */
.foto-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  gap: 12px;
  margin-bottom: clamp(40px, 6vw, 64px);
}

.foto-grid .foto-item { overflow: hidden; border-radius: var(--radius); }

.foto-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.foto-item:hover img { transform: scale(1.04); }

.foto-item--wide { grid-column: span 2; }
.foto-item--tall { grid-row: span 2; }

@media (max-width: 760px) {
  .foto-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
}

.dotazioni {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: clamp(40px, 6vw, 56px);
}

/* Promo infrasettimanale — timbro ocra */
.promo {
  max-width: 700px;
  margin: 0 auto clamp(32px, 5vw, 48px);
  border: 2px dashed var(--ocra);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  text-align: center;
  background: var(--avorio);
}

.promo-badge {
  display: inline-block;
  background: var(--ocra);
  color: var(--carbone);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.promo p { margin: 0; font-size: 0.98rem; }
.promo strong { color: var(--rosso-cupo); }

/* Listino — righe con puntini di conduzione, come un menù stampato */
.listino {
  max-width: 640px;
  margin: 0 auto;
  background: var(--avorio);
  border: var(--bordo);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 44px);
}

.listino h3 { text-align: center; margin-bottom: 4px; }

.listino-nota {
  text-align: center;
  color: var(--bruno);
  font-size: 0.92rem;
  margin-bottom: 26px;
}

.listino-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-block: 12px;
}

.listino-row .voce { font-weight: 700; }

.listino-row .voce small {
  display: block;
  font-weight: 400;
  color: var(--bruno);
  font-size: 0.85rem;
}

.listino-row .fill {
  flex: 1;
  border-bottom: 2px dotted rgba(38, 28, 22, 0.3);
  transform: translateY(-4px);
}

.listino-row .prezzo {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  white-space: nowrap;
}

.listino-row--featured .voce::after {
  content: "più richiesta";
  display: inline-block;
  margin-left: 10px;
  padding: 2px 10px;
  background: var(--rosso);
  color: var(--avorio);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  vertical-align: 2px;
}

.listino-disclaimer {
  margin: 20px 0 24px;
  font-size: 0.85rem;
  color: var(--bruno);
  text-align: center;
}

.listino .btn { display: flex; justify-content: center; }

/* ------------------------------------------------------------
   10. MANGIARE
   ------------------------------------------------------------ */
.menu-oggi {
  max-width: 700px;
  margin: 0 auto clamp(40px, 6vw, 64px);
  background: var(--avorio);
  border: var(--bordo);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 4vw, 40px);
}

.menu-oggi-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--rosso);
  padding-bottom: 12px;
  margin-bottom: 18px;
}

.menu-oggi-head h3 { margin: 0; }

.menu-nota { font-size: 0.92rem; color: var(--bruno); margin: 18px 0 20px; }

.ristoro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.ristoro-item {
  background: var(--avorio);
  border: var(--bordo);
  border-radius: var(--radius);
  padding: 24px 22px;
}

.section-alt .ristoro-item,
.section-alt .stagione-box,
.section-alt .percorso,
.section-alt .menu-oggi,
.section-alt .listino,
.section-alt .promo {
  background: var(--bianco);
}

.ristoro-item .icon-svg {
  width: 1.6em;
  height: 1.6em;
  color: var(--rosso);
  margin-bottom: 10px;
}

.ristoro-item h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 4px; }
.ristoro-item p { font-size: 0.92rem; color: var(--bruno); margin: 0; }

.link-piatti {
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 1px;
}

/* ------------------------------------------------------------
   11. METEO — bollettino alla porta del rifugio
   ------------------------------------------------------------ */
/* Un solo riquadro: il bollettino live. La bacheca "meteo dal rifugio"
   è stata tolta perché non veniva aggiornata dal rifugista. */
.meteo-layout {
  max-width: 760px;
  margin-inline: auto;
}

.bollettino {
  background: var(--carbone);
  color: var(--avorio);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 4vw, 38px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.bollettino-now {
  display: flex;
  align-items: center;
  gap: 22px;
}

.bollettino-now .wx-icon .icon-svg {
  width: 64px;
  height: 64px;
  color: var(--ocra);
}

.bollettino-temp {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  font-weight: 480;
  line-height: 1;
}

.bollettino-desc { font-size: 1rem; opacity: 0.85; }

.bollettino-luogo {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-top: 6px;
}

.forecast {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  border-top: 1px solid rgba(255, 249, 240, 0.15);
  padding-top: 18px;
}

.forecast-day { text-align: center; font-family: var(--font-mono); }
.forecast-day-name { font-size: 0.72rem; text-transform: uppercase; opacity: 0.6; }
.forecast-day .icon-svg { width: 26px; height: 26px; margin-block: 6px; color: var(--avorio); }
.forecast-day-max { font-size: 0.85rem; font-weight: 600; }
.forecast-day-min { font-size: 0.75rem; opacity: 0.55; }

.bollettino .btn { align-self: flex-start; color: var(--avorio); }

/* ------------------------------------------------------------
   12. EVENTI
   ------------------------------------------------------------ */
.eventi-list { max-width: 760px; margin-inline: auto; }

.event-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--bianco);
  border: var(--bordo);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 12px;
}

.event-date {
  font-family: var(--font-mono);
  text-align: center;
  background: var(--rosso);
  color: var(--avorio);
  border-radius: 8px;
  padding: 8px 14px;
  line-height: 1.2;
  flex-shrink: 0;
}

.event-date div:first-child { font-size: 1.3rem; font-weight: 600; }
.event-date div:last-child { font-size: 0.7rem; letter-spacing: 0.1em; }

.event-body h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 2px; }
.event-body p { margin: 0; font-size: 0.95rem; color: var(--bruno); }

.eventi-empty { text-align: center; }

/* Banda rossa — feste private */
.banda-rossa {
  margin-top: clamp(48px, 7vw, 80px);
  background:
    radial-gradient(110% 120% at 50% 0%, var(--rosso) 0%, var(--rosso-cupo) 90%);
  color: var(--avorio);
  border-radius: var(--radius-lg);
  padding: clamp(36px, 6vw, 64px) clamp(24px, 5vw, 64px);
  text-align: center;
}

.banda-rossa h3 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }

.banda-rossa p {
  max-width: 52ch;
  margin-inline: auto;
  opacity: 0.9;
}

.banda-rossa .btn-whatsapp { margin-top: 12px; box-shadow: none; }

/* ------------------------------------------------------------
   13. GALLERIA
   ------------------------------------------------------------ */
.filtri {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: clamp(28px, 4vw, 40px);
}

.filtro-btn {
  padding: 8px 18px;
  border: 1.5px solid rgba(38, 28, 22, 0.25);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--carbone);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.filtro-btn.active {
  background: var(--carbone);
  border-color: var(--carbone);
  color: var(--avorio);
}

/* Lightbox — <dialog> nativo: focus trap, Esc e backdrop gratis */
.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  overflow: visible;
}

.lightbox::backdrop { background: rgba(20, 12, 9, 0.92); }

.lightbox img {
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  border-radius: var(--radius);
  display: block;
}

.lightbox button {
  position: fixed;
  background: none;
  border: none;
  color: var(--avorio);
  font-size: 2.2rem;
  cursor: pointer;
  padding: 12px;
  line-height: 1;
}

.lightbox-close { top: 16px; right: 20px; }
.lightbox-prev  { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 12px; top: 50%; transform: translateY(-50%); }

/* ------------------------------------------------------------
   14. CONTATTI & COLLABORAZIONI
   ------------------------------------------------------------ */
.contatti-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

@media (max-width: 820px) {
  .contatti-layout { grid-template-columns: 1fr; }
}

.contatti-info address { font-style: normal; margin-bottom: 22px; }

.contatti-info h3 { margin-bottom: 6px; }

.contatti-blocco { margin-top: 26px; }

.contatti-blocco h4 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rosso);
  margin-bottom: 6px;
}

.contatti-blocco p { margin: 0; font-size: 0.98rem; }

/* Collaborazioni — chi lavora col rifugio, in quota e a valle */
.collab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.collab-card {
  background: var(--avorio);
  border: var(--bordo);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  text-align: center;
}

.section-alt .collab-card { background: var(--bianco); }

.collab-card .icon-svg { width: 30px; height: 30px; color: var(--rosso); }
.collab-card h3 { font-size: 1.15rem; margin: 12px 0 6px; }
.collab-card p { font-size: 0.94rem; color: var(--bruno); margin: 0; }

.collab-card .collab-contatto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--rosso);
  text-decoration: none;
  font-weight: 600;
}

.collab-card .collab-contatto:hover { text-decoration: underline; }
.collab-card .collab-contatto .icon-svg { width: 1em; height: 1em; }

/* ------------------------------------------------------------
   15. FOOTER — rosso cupo, il logo torna a casa
   ------------------------------------------------------------ */
.footer {
  background:
    linear-gradient(to bottom, var(--rosso-cupo), var(--rosso-notte));
  color: var(--avorio);
  padding: clamp(48px, 7vw, 80px) 0 32px;
  margin-top: 0;
}

.footer a { color: var(--avorio); text-decoration: none; }
.footer a:hover { color: var(--ocra); }

.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  margin-bottom: clamp(36px, 5vw, 56px);
}

@media (max-width: 760px) {
  .footer-inner { grid-template-columns: 1fr; }
}

.footer-logo { width: 190px; height: auto; margin-bottom: 14px; }

.footer-tagline {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  opacity: 0.75;
}

.footer h4 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 14px;
}

.footer li { padding-block: 4px; font-size: 0.95rem; }

.footer-bottom {
  border-top: 1px solid rgba(255, 249, 240, 0.18);
  padding-top: 22px;
  font-size: 0.8rem;
  opacity: 0.65;
  text-align: center;
}

.footer-bottom p { margin: 0 0 4px; }
.footer-bottom a { text-decoration: underline; }

/* ------------------------------------------------------------
   16. UTILITY & MOTION
   ------------------------------------------------------------ */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-up.visible { opacity: 1; transform: none; }

/* Sequenza di caricamento hero */
.hero-reveal { opacity: 0; transform: translateY(14px); animation: heroIn 0.7s ease forwards; }
.hero-reveal:nth-child(2) { animation-delay: 0.12s; }
.hero-reveal:nth-child(3) { animation-delay: 0.24s; }
.hero-reveal:nth-child(4) { animation-delay: 0.36s; }

@keyframes heroIn { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-up { opacity: 1; transform: none; transition: none; }
  .hero-reveal { animation: none; opacity: 1; transform: none; }
  .btn, .foto-item img { transition: none; }
}