/* =====================================================================
   WAW - Wild Animal Watching | Design System
   Un solo foglio di stile, nessun framework, nessun build step.
   Mobile-first: le media query aggiungono, non correggono.
   ===================================================================== */

:root {
  /* --- Palette ---------------------------------------------------
     Verde profondo del sottobosco, terra, luce dell alba.
     Nessun verde "eco" saturo: la natura italiana non e fluorescente. */
  --waw-forest:      #1B4332;   /* primario */
  --waw-forest-dark: #0F2A1E;
  --waw-forest-soft: #2D6A4F;
  --waw-moss:        #52796F;
  --waw-sage:        #B7C9BE;
  --waw-mist:        #EAF0EC;

  --waw-earth:       #6B4F3A;   /* secondario */
  --waw-clay:        #A97155;
  --waw-sand:        #E8DCC8;

  --waw-dawn:        #E07A3E;   /* accento decorativo: alba, richiami grafici */
  /* Per i BOTTONI con testo bianco serve piu' scuro: #E07A3E da' 2,99:1 di
     contrasto, sotto il minimo di leggibilita (4,5:1). L alba bruciata tiene
     il colore caldo del marchio e arriva a 4,98:1. */
  --waw-dawn-btn:    #B25523;
  --waw-dawn-dark:   #96481D;
  --waw-gold:        #D9A441;

  --waw-night:       #0F1A14;   /* osservazione notturna */
  --waw-ink:         #16211B;
  --waw-slate:       #4A5A52;
  --waw-grey:        #8A968F;
  --waw-line:        #DCE4DE;
  --waw-paper:       #FBFCFB;
  --waw-white:       #FFFFFF;

  --waw-ok:      #2F7D4F;
  --waw-warn:    #C98A1B;
  --waw-danger:  #B23B2E;
  --waw-info:    #2C6E8F;

  /* --- Tipografia ------------------------------------------------
     Nessun font remoto: stack di sistema, zero richieste di rete,
     zero CLS, prestazioni migliori su rete mobile in montagna. */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
                  "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Scala tipografica fluida: 1.250 su mobile, 1.333 su desktop */
  --t-xs:  clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --t-sm:  clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --t-base: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);
  --t-lg:  clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --t-xl:  clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem);
  --t-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem);
  --t-3xl: clamp(2.125rem, 1.7rem + 2vw, 3rem);
  --t-4xl: clamp(2.5rem, 1.9rem + 3vw, 4rem);

  /* --- Spaziatura: scala a 4 px ---------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.5rem;   --s-8: 3rem;
  --s-9: 4rem;     --s-10: 5rem;    --s-11: 6rem;    --s-12: 8rem;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 26, 20, 0.06), 0 1px 3px rgba(15, 26, 20, 0.08);
  --shadow: 0 4px 6px -1px rgba(15, 26, 20, 0.08), 0 2px 4px -2px rgba(15, 26, 20, 0.06);
  --shadow-lg: 0 12px 24px -8px rgba(15, 26, 20, 0.18);

  /* Il contenitore segue lo schermo invece di fermarsi a una misura fissa:
     su un monitor largo due fasce bianche di trecento pixel per lato sono
     spazio buttato. Il limite serve solo a non far correre le griglie
     all infinito sui monitor ultrawide. */
  --container: 1560px;
  --container-narrow: 900px;
  --header-h: 64px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Reset essenziale ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--waw-ink);
  background: var(--waw-paper);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }

a { color: var(--waw-forest-soft); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--waw-forest); }

/* Focus visibile e coerente ovunque: requisito WCAG, non un dettaglio. */
:focus-visible {
  outline: 3px solid var(--waw-dawn);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--waw-forest); color: #fff; padding: var(--s-3) var(--s-5);
}
.skip-link:focus { left: 0; }

/* --- Layout ------------------------------------------------------ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-4); }
.container-narrow { max-width: var(--container-narrow); }
@media (min-width: 768px) { .container { padding-inline: var(--s-6); } }

.section { padding-block: var(--s-8); }
.section-lg { padding-block: var(--s-9); }
@media (min-width: 768px) {
  .section { padding-block: var(--s-9); }
  .section-lg { padding-block: var(--s-11); }
}
.section-tint { background: var(--waw-mist); }
.section-dark { background: var(--waw-forest-dark); color: var(--waw-mist); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--waw-white); }
.section-dark a { color: var(--waw-sand); }

/*
   Griglie che si adattano a quanti elementi contengono.

   Con un numero fisso di colonne, una griglia da quattro con due soli elementi
   lascia due celle vuote in fila: la pagina sembra incompiuta anche quando il
   contenuto e' semplicemente quello che c e'. Con auto-fit le colonne che non
   servono spariscono e gli elementi presenti occupano tutta la riga.

   Il minimo per colonna decide quando si va a capo; il massimo evita che due
   sole schede diventino due lenzuoli.
*/
/*
   Griglie con due vincoli insieme: mai celle vuote, mai piu' colonne del dovuto.

   Con un numero fisso di colonne, quattro schede su una griglia da sei lasciano
   due buchi in fila. Con auto-fit senza tetto succede il contrario: otto schede
   si dispongono sei piu' due, e la seconda riga sembra un avanzo.

   La larghezza minima di ogni colonna e' quindi il piu' grande fra una misura
   assoluta e un quarto (o un terzo, o meta') dello spazio disponibile. Cosi' le
   colonne non superano mai il numero voluto, e quando gli elementi sono pochi si
   allargano a riempire la riga invece di lasciare vuoti.
*/
.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(max(300px, (100% - var(--s-5)) / 2), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(max(260px, (100% - var(--s-5) * 2) / 3), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(max(220px, (100% - var(--s-5) * 3) / 4), 1fr)); }
@media (max-width: 720px) {
  /* Sotto questa soglia il calcolo per colonne non serve piu': si impila. */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
}

.flex { display: flex; gap: var(--s-3); }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--s-2); } .gap-4 { gap: var(--s-4); } .gap-6 { gap: var(--s-6); }
.mt-2 { margin-top: var(--s-2); } .mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); }
.mb-2 { margin-bottom: var(--s-2); } .mb-4 { margin-bottom: var(--s-4); }
.mb-6 { margin-bottom: var(--s-6); } .mb-8 { margin-bottom: var(--s-8); }
.text-center { text-align: center; }
.text-sm { font-size: var(--t-sm); }
.text-xs { font-size: var(--t-xs); }
.text-lg { font-size: var(--t-lg); }
.muted { color: var(--waw-slate); }
.strong { font-weight: 650; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Header ------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 252, 251, 0.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--waw-line);
}
.header-inner { display: flex; align-items: center; gap: var(--s-4); height: var(--header-h); }

.logo { display: flex; align-items: center; gap: var(--s-2); text-decoration: none; flex-shrink: 0; }
.logo-mark {
  font-family: var(--font-display); font-weight: 700; font-size: 1.4rem;
  letter-spacing: -0.03em; color: var(--waw-forest); line-height: 1;
}
.logo-sub {
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--waw-dawn); font-weight: 600; line-height: 1;
}

.main-nav { display: none; margin-left: auto; }
.main-nav a {
  padding: var(--s-2) var(--s-3); text-decoration: none; color: var(--waw-ink);
  font-weight: 550; font-size: var(--t-sm); border-radius: var(--radius-sm);
}
.main-nav a:hover, .main-nav a.is-active { background: var(--waw-mist); color: var(--waw-forest); }
@media (min-width: 900px) { .main-nav { display: flex; gap: var(--s-1); } }

.header-actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
@media (min-width: 900px) { .header-actions { margin-left: var(--s-4); } }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: none; border: 1px solid var(--waw-line);
  border-radius: var(--radius-sm); cursor: pointer;
}
@media (min-width: 900px) { .nav-toggle { display: none; } }

.mobile-nav {
  display: none; padding: var(--s-4) 0 var(--s-6);
  border-top: 1px solid var(--waw-line); background: var(--waw-white);
}
.mobile-nav.is-open { display: block; }
.mobile-nav a {
  display: block; padding: var(--s-3) var(--s-4); text-decoration: none;
  color: var(--waw-ink); font-weight: 550; border-radius: var(--radius-sm);
}
.mobile-nav a:hover { background: var(--waw-mist); }

/* --- Bottoni ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: var(--s-3) var(--s-5);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font-weight: 600; font-size: var(--t-sm); text-decoration: none;
  cursor: pointer; transition: background 0.18s var(--ease), transform 0.12s var(--ease);
  text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--waw-dawn-btn); color: #fff; }
.btn-primary:hover { background: var(--waw-dawn-dark); color: #fff; }
.btn-forest { background: var(--waw-forest); color: #fff; }
.btn-forest:hover { background: var(--waw-forest-dark); color: #fff; }
.btn-ghost { background: transparent; color: var(--waw-forest); border-color: var(--waw-forest); }
.btn-ghost:hover { background: var(--waw-forest); color: #fff; }
.btn-light { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.5); }
.btn-light:hover { background: #fff; color: var(--waw-forest); }
.btn-quiet { background: var(--waw-mist); color: var(--waw-forest); }
.btn-quiet:hover { background: var(--waw-sage); }
.btn-danger { background: var(--waw-danger); color: #fff; }
.btn-sm { min-height: 36px; padding: var(--s-2) var(--s-4); font-size: var(--t-xs); }
.btn-lg { min-height: 52px; padding: var(--s-4) var(--s-7); font-size: var(--t-base); }
.btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* --- Card -------------------------------------------------------- */
.card {
  background: var(--waw-white); border: 1px solid var(--waw-line);
  border-radius: var(--radius); overflow: hidden;
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
  display: flex; flex-direction: column;
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.card-media { position: relative; aspect-ratio: 4 / 3; background: var(--waw-sage); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.card-title { font-size: var(--t-lg); margin: 0; }
.card-title a { text-decoration: none; color: var(--waw-ink); }
.card-title a:hover { color: var(--waw-forest-soft); }
.card-meta { font-size: var(--t-xs); color: var(--waw-slate); text-transform: uppercase; letter-spacing: 0.04em; }
.card-footer { margin-top: auto; padding-top: var(--s-3); }

/* --- Badge e chip ------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 3px var(--s-2); border-radius: var(--radius-pill);
  font-size: var(--t-xs); font-weight: 600; line-height: 1.5;
  background: var(--waw-mist); color: var(--waw-forest);
}
.badge-waw { background: var(--waw-forest); color: #fff; }
.badge-gold { background: var(--waw-gold); color: var(--waw-night); }
.badge-silver { background: var(--waw-sage); color: var(--waw-forest-dark); }

/* Livelli di certificazione WAW Safari: un colore per grado, dal verde chiaro
   dell'Explorer all'arancio "alba" del Safari Master. Sostituiscono i vecchi
   badge Gold/Silver sulle schede delle strutture. */
.badge-cert { color: #fff; }
.badge-cert.cert-explorer      { background: #3f7d54; }
.badge-cert.cert-tracker       { background: #2f6f8f; }
.badge-cert.cert-ranger        { background: #7a5b1e; }
.badge-cert.cert-safari_master { background: #B25523; }
.badge-night { background: var(--waw-night); color: var(--waw-sand); }
.badge-warn { background: #FBF0DA; color: #8A5F0B; }
.badge-danger { background: #FBE4E1; color: #8A2A20; }
.badge-ok { background: #E1F2E8; color: #1E5C38; }
.badge-info { background: #E1EDF3; color: #1E4E66; }

/* Probabilita di avvistamento: quattro livelli, mai una percentuale inventata */
.prob-doc   { background: #E1F2E8; color: #1E5C38; }
.prob-freq  { background: #E8F0DC; color: #4A5F1E; }
.prob-occ   { background: #FBF0DA; color: #8A5F0B; }
.prob-rara  { background: #F0E8E4; color: #6B4F3A; }

.chip {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4); min-height: 40px;
  border: 1px solid var(--waw-line); border-radius: var(--radius-pill);
  background: var(--waw-white); font-size: var(--t-sm); font-weight: 550;
  cursor: pointer; white-space: nowrap; color: var(--waw-ink); text-decoration: none;
}
.chip:hover { border-color: var(--waw-moss); }
/* Selezione inequivocabile: l'intero ovale si riempie e in alto a destra
   compare una spunta (segnalazione Riccardo). */
.chip.is-active,
.chip:has(input:checked) {
  background: var(--waw-forest); color: #fff; border-color: var(--waw-forest);
  padding-right: calc(var(--s-4) + 10px);
}
.chip.is-active > span,
.chip:has(input:checked) > span { color: #fff; }
.chip.is-active::after,
.chip:has(input:checked)::after {
  content: "\2713"; position: absolute; top: 4px; right: 5px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--waw-gold); color: var(--waw-forest-dark);
  font-size: 11px; font-weight: 800; line-height: 1;
  display: grid; place-content: center;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
/* Il fuoco della tastiera cade sull input invisibile dentro al chip: senza
   questa regola chi naviga con il tabulatore non vede DOVE si trova. Il
   contorno si disegna sul chip che contiene il campo focalizzato. */
.chip:has(input:focus-visible),
.chip:has(select:focus-visible) {
  outline: 3px solid var(--waw-dawn); outline-offset: 2px;
}
/* Un select dentro un chip eredita width:100% dalla regola base e collassa:
   qui torna a dimensionarsi sul contenuto. */
.chip select {
  width: auto; min-width: 0; border: 0; background: none;
  min-height: auto; padding: 0 var(--s-1) 0 0; font-size: var(--t-sm);
  font-weight: 550; color: inherit; cursor: pointer;
}
.chip select:focus { outline: none; }
.chip-row { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-2); scrollbar-width: thin; }
/* Da tablet in su i filtri vanno a capo: una striscia che scorre di lato
   nasconde meta' delle opzioni proprio a chi ha spazio per vederle tutte. */
@media (min-width: 900px) {
  .chip-row { flex-wrap: wrap; overflow-x: visible; padding-bottom: 0; }
}
.chip-row::-webkit-scrollbar { height: 4px; }
.chip-row::-webkit-scrollbar-thumb { background: var(--waw-line); border-radius: 2px; }

/* --- Form -------------------------------------------------------- */
.field { margin-bottom: var(--s-4); }
.field label { display: block; font-weight: 600; font-size: var(--t-sm); margin-bottom: var(--s-2); }
.field .hint { font-size: var(--t-xs); color: var(--waw-slate); margin-top: var(--s-1); }
.input, .select, .textarea {
  width: 100%; min-height: 44px; padding: var(--s-3);
  border: 1px solid var(--waw-line); border-radius: var(--radius-sm);
  background: var(--waw-white); font-size: var(--t-base);
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--waw-moss); }
.textarea { min-height: 120px; resize: vertical; }
.input[aria-invalid="true"] { border-color: var(--waw-danger); }
.checkbox-row { display: flex; gap: var(--s-3); align-items: flex-start; margin-bottom: var(--s-3); }
.checkbox-row input[type="checkbox"], .checkbox-row input[type="radio"] {
  width: 22px; height: 22px; margin-top: 2px; flex-shrink: 0; accent-color: var(--waw-forest);
}
.field-error { color: var(--waw-danger); font-size: var(--t-sm); margin-top: var(--s-1); }
fieldset { border: 1px solid var(--waw-line); border-radius: var(--radius); padding: var(--s-4); margin-bottom: var(--s-5); }
legend { font-weight: 650; padding-inline: var(--s-2); }

/* --- Avvisi ------------------------------------------------------ */
.alert {
  padding: var(--s-4); border-radius: var(--radius); margin-bottom: var(--s-4);
  border-left: 4px solid; font-size: var(--t-sm);
}
.alert-success { background: #E9F5EE; border-color: var(--waw-ok); color: #14512F; }
.alert-error   { background: #FBEDEB; border-color: var(--waw-danger); color: #7A241A; }
.alert-info    { background: #E7F0F5; border-color: var(--waw-info); color: #184A61; }
.alert-warning { background: #FCF4E3; border-color: var(--waw-warn); color: #7A5407; }

/* Riquadro etico: presente in ogni scheda con coordinate o fauna sensibile */
.ethics-box {
  background: var(--waw-forest-dark); color: var(--waw-mist);
  padding: var(--s-5); border-radius: var(--radius); font-size: var(--t-sm);
}
.ethics-box h3 { color: var(--waw-white); font-size: var(--t-lg); margin-bottom: var(--s-2); }

/* --- Hero -------------------------------------------------------- */
.hero {
  /* Le fotografie dell hero sono larghe 1536px e alte 509: a 78vh su un
     1080p andrebbero ingrandite di un terzo e si sgranerebbero. Il tetto a
     620px tiene l ingrandimento entro il visibile e l hero resta imponente. */
  position: relative; min-height: clamp(420px, 62vh, 620px); display: flex; align-items: flex-end;
  background: linear-gradient(160deg, var(--waw-forest-dark), var(--waw-forest) 55%, var(--waw-moss));
  color: #fff; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.9;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 20%, rgba(224,122,62,0.22), transparent 60%),
              linear-gradient(to top, rgba(15,26,20,0.92) 8%, rgba(15,26,20,0.45) 45%, transparent 78%);
}
.hero-content { position: relative; z-index: 2; padding-block: var(--s-9) var(--s-8); max-width: 720px; }
.hero-kicker {
  text-transform: uppercase; letter-spacing: 0.22em; font-size: var(--t-xs);
  font-weight: 700; color: var(--waw-gold); margin-bottom: var(--s-3);
}
.hero h1 { font-size: var(--t-4xl); color: #fff; margin-bottom: var(--s-3); }
.hero-claim { font-size: var(--t-xl); color: var(--waw-sand); margin-bottom: var(--s-6); font-family: var(--font-display); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* --- Ricerca ----------------------------------------------------- */
.search-box { position: relative; margin-top: var(--s-6); }
.search-box input {
  width: 100%; min-height: 52px; padding: var(--s-3) var(--s-5);
  border-radius: var(--radius-pill); border: none; font-size: var(--t-base);
  box-shadow: var(--shadow-lg);
}
.search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  max-height: 60vh; overflow-y: auto; display: none; color: var(--waw-ink);
}
.search-results.is-open { display: block; }
.search-group-title {
  padding: var(--s-2) var(--s-4); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--waw-slate); background: var(--waw-mist);
}
.search-item { display: block; padding: var(--s-3) var(--s-4); text-decoration: none; color: var(--waw-ink); }
.search-item:hover, .search-item.is-highlighted { background: var(--waw-mist); }
.search-item small { display: block; color: var(--waw-slate); font-size: var(--t-xs); }

/* --- Mappa ------------------------------------------------------- */
.map-page { display: flex; flex-direction: column; height: calc(100vh - var(--header-h)); }
.map-filters {
  padding: var(--s-3) var(--s-4); background: var(--waw-white);
  border-bottom: 1px solid var(--waw-line); flex-shrink: 0;
}
.map-body { flex: 1; position: relative; display: flex; min-height: 0; }
.map-canvas { flex: 1; height: 100%; background: var(--waw-mist); }
.map-list { display: none; width: 380px; overflow-y: auto; border-right: 1px solid var(--waw-line); background: var(--waw-paper); }
@media (min-width: 1024px) { .map-list { display: block; } }

.map-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 500;
  background: #fff; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -8px 24px rgba(15,26,20,0.18); max-height: 65%;
  transform: translateY(calc(100% - 56px)); transition: transform 0.25s var(--ease);
  display: flex; flex-direction: column;
}
.map-sheet.is-open { transform: translateY(0); }
.map-sheet-handle { padding: var(--s-3); text-align: center; cursor: grab; border-bottom: 1px solid var(--waw-line); }
.map-sheet-handle::before {
  content: ""; display: block; width: 40px; height: 4px; border-radius: 2px;
  background: var(--waw-line); margin: 0 auto var(--s-2);
}
.map-sheet-body { overflow-y: auto; padding: var(--s-4); }
@media (min-width: 1024px) { .map-sheet { display: none; } }

.leaflet-container { font-family: var(--font-sans) !important; }
.waw-marker {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); border: 2px solid #fff; box-shadow: var(--shadow);
  background: var(--waw-forest); color: #fff; font-size: 15px;
}
.waw-marker span { transform: rotate(45deg); }
.waw-cluster {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(27,67,50,0.9); color: #fff;
  border: 3px solid rgba(255,255,255,0.85); font-weight: 700; box-shadow: var(--shadow);
}

/* --- WAW ID ------------------------------------------------------ */
.wawid { background: var(--waw-night); color: var(--waw-mist); min-height: calc(100vh - var(--header-h)); }
.wawid-step { display: none; padding-block: var(--s-6) var(--s-9); }
.wawid-step.is-active { display: block; }
.wawid h1, .wawid h2, .wawid h3 { color: #fff; }

.capture-zone {
  border: 2px dashed var(--waw-moss); border-radius: var(--radius-lg);
  padding: var(--s-8) var(--s-4); text-align: center; cursor: pointer;
  background: rgba(82,121,111,0.12); transition: background 0.2s var(--ease);
}
.capture-zone:hover, .capture-zone.is-dragover { background: rgba(82,121,111,0.25); }
.capture-icon { font-size: 3rem; margin-bottom: var(--s-3); }

.preview-image {
  width: 100%; max-height: 46vh; object-fit: contain;
  border-radius: var(--radius); background: #000; margin-bottom: var(--s-4);
}

.result-card {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius); padding: var(--s-4); margin-bottom: var(--s-4);
}
.result-card h3 { font-size: var(--t-base); text-transform: uppercase; letter-spacing: 0.08em;
                  color: var(--waw-sage); margin-bottom: var(--s-3); font-family: var(--font-sans); }

.candidate {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  padding: var(--s-3); border-radius: var(--radius-sm); cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid transparent;
  color: inherit; text-align: left; margin-bottom: var(--s-2);
}
.candidate:hover { background: rgba(255,255,255,0.1); }
.candidate.is-selected { border-color: var(--waw-dawn); background: rgba(224,122,62,0.18); }
.candidate-name { font-weight: 650; }
.candidate-sci { font-style: italic; font-size: var(--t-sm); color: var(--waw-sage); }

.confidence-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.15); overflow: hidden; margin-top: var(--s-1); }
.confidence-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--waw-gold), var(--waw-dawn)); }

.ctx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
@media (min-width: 640px) { .ctx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ctx-item { background: rgba(255,255,255,0.05); border-radius: var(--radius-sm); padding: var(--s-3); }
.ctx-label { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--waw-sage); }
.ctx-value { font-weight: 650; font-size: var(--t-sm); }

.spinner {
  width: 44px; height: 44px; border: 3px solid rgba(255,255,255,0.2);
  border-top-color: var(--waw-dawn); border-radius: 50%;
  animation: spin 0.9s linear infinite; margin: var(--s-6) auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.progress-steps { display: flex; flex-direction: column; gap: var(--s-2); max-width: 320px; margin: 0 auto; }
.progress-step { display: flex; align-items: center; gap: var(--s-3); opacity: 0.4; font-size: var(--t-sm); }
.progress-step.is-done { opacity: 1; }
.progress-step.is-active { opacity: 1; color: var(--waw-gold); }

/* --- Tabelle ----------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--waw-line); border-radius: var(--radius); background: #fff; }
table.waw-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.waw-table th, .waw-table td { padding: var(--s-3); text-align: left; border-bottom: 1px solid var(--waw-line); }
.waw-table th { background: var(--waw-mist); font-weight: 650; white-space: nowrap; position: sticky; top: 0; }
.waw-table tbody tr:hover { background: var(--waw-mist); }
.waw-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Grafici a barre (senza librerie) ---------------------------- */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.bars .bar { flex: 1; background: var(--waw-moss); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; }
.bars .bar:hover { background: var(--waw-dawn); }
.bar-labels { display: flex; gap: 3px; margin-top: var(--s-2); }
.bar-labels span { flex: 1; text-align: center; font-size: 0.6rem; color: var(--waw-slate); }

.stat-tile {
  background: #fff; border: 1px solid var(--waw-line); border-radius: var(--radius);
  padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-1);
}
.stat-value { font-size: var(--t-2xl); font-weight: 700; font-family: var(--font-display); line-height: 1; color: var(--waw-forest); }
.stat-label { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--waw-slate); }

/* --- Percorso narrativo ------------------------------------------ */
.path-steps { display: grid; gap: var(--s-5); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 900px) { .path-steps { grid-template-columns: repeat(4, 1fr); } }
.path-step { position: relative; padding-top: var(--s-6); }
.path-step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--waw-dawn-btn); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.path-step h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }

/* --- Dashboard (host e admin) ------------------------------------ */
.dash { display: grid; grid-template-columns: 1fr; min-height: calc(100vh - var(--header-h)); }
@media (min-width: 1024px) { .dash { grid-template-columns: 250px 1fr; } }
.dash-side { background: var(--waw-forest-dark); color: var(--waw-mist); padding: var(--s-4); }
.dash-side a {
  display: block; padding: var(--s-3); border-radius: var(--radius-sm);
  color: var(--waw-sage); text-decoration: none; font-size: var(--t-sm); font-weight: 550;
}
.dash-side a:hover, .dash-side a.is-active { background: rgba(255,255,255,0.1); color: #fff; }
.dash-side h4 {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--waw-moss); margin: var(--s-5) 0 var(--s-2); padding-inline: var(--s-3);
  font-family: var(--font-sans);
}
.dash-main { padding: var(--s-5) var(--s-4); background: var(--waw-paper); overflow-x: hidden; }
@media (min-width: 768px) { .dash-main { padding: var(--s-6); } }

.progress-bar { height: 8px; background: var(--waw-line); border-radius: 4px; overflow: hidden; }
.progress-bar > span { display: block; height: 100%; background: var(--waw-forest-soft); border-radius: 4px; }

.state-pill { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4);
              border-radius: var(--radius-pill); font-weight: 650; font-size: var(--t-sm); }
.tone-neutral { background: var(--waw-mist); color: var(--waw-slate); }
.tone-info { background: #E1EDF3; color: #1E4E66; }
.tone-success { background: #E1F2E8; color: #1E5C38; }
.tone-warning { background: #FBF0DA; color: #8A5F0B; }
.tone-danger { background: #FBE4E1; color: #8A2A20; }

/* --- Footer ------------------------------------------------------ */
.site-footer { background: var(--waw-forest-dark); color: var(--waw-sage); margin-top: auto; padding-block: var(--s-8) var(--s-5); }
.site-footer h4, .site-footer nav h2 { color: #fff; font-size: var(--t-sm); text-transform: uppercase; letter-spacing: 0.08em;
                  margin-bottom: var(--s-3); font-family: var(--font-sans); }
.site-footer a { color: var(--waw-sage); text-decoration: none; display: block; padding: 3px 0; font-size: var(--t-sm); }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12); margin-top: var(--s-6);
  padding-top: var(--s-4); font-size: var(--t-xs); display: flex;
  flex-wrap: wrap; gap: var(--s-3); justify-content: space-between;
}

/* --- Cookie banner ----------------------------------------------- */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 900;
  background: var(--waw-white); border-top: 2px solid var(--waw-forest);
  padding: var(--s-4); box-shadow: 0 -4px 16px rgba(15,26,20,0.14);
}
.cookie-banner[hidden] { display: none; }

/* --- Paginazione -------------------------------------------------- */
.pagination { display: flex; gap: var(--s-2); justify-content: center; flex-wrap: wrap; margin-top: var(--s-7); }
.pagination a, .pagination span {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--s-3); border: 1px solid var(--waw-line); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--waw-ink); font-size: var(--t-sm);
}
.pagination a:hover { background: var(--waw-mist); }
.pagination .is-current { background: var(--waw-forest); color: #fff; border-color: var(--waw-forest); }

/* --- Breadcrumb --------------------------------------------------- */
.breadcrumb { font-size: var(--t-xs); color: var(--waw-slate); padding-block: var(--s-3); }
.breadcrumb ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: var(--s-2); color: var(--waw-line); }
.breadcrumb a { color: var(--waw-slate); }

/* --- Prosa (contenuti editoriali) --------------------------------- */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-7); }
.prose h3 { margin-top: var(--s-6); }
.prose ul, .prose ol { padding-left: var(--s-5); }
.prose li + li { margin-top: var(--s-2); }
.prose blockquote {
  border-left: 3px solid var(--waw-dawn); padding-left: var(--s-4);
  font-family: var(--font-display); font-size: var(--t-lg); color: var(--waw-slate);
}
.prose img { border-radius: var(--radius); }
.prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--waw-mist); padding: 2px 5px; border-radius: 4px; }
.prose pre { background: var(--waw-night); color: var(--waw-mist); padding: var(--s-4); border-radius: var(--radius); overflow-x: auto; }
.prose pre code { background: none; color: inherit; padding: 0; }

/* --- Utility di stampa -------------------------------------------- */
@media print {
  .site-header, .site-footer, .cookie-banner, .btn, .map-canvas { display: none !important; }
  body { background: #fff; }
}

/* --- Scheda struttura: copertina immersiva + fauna --------------- */
.card-media img { transition: transform 0.45s var(--ease); }
.card:hover .card-media img { transform: scale(1.045); }

.card-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(15,26,20,0.78) 0%, rgba(15,26,20,0.18) 38%, transparent 62%);
}
.card-flag { position: absolute; top: 10px; left: 10px; z-index: 2; box-shadow: var(--shadow); }
.card-place {
  position: absolute; left: var(--s-4); right: var(--s-4); bottom: var(--s-3); z-index: 2;
  margin: 0; color: #fff; font-size: var(--t-xs); font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.06em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.card-acc .card-media { aspect-ratio: 16 / 10; }

.fauna-strip {
  display: flex; align-items: center; gap: var(--s-3);
  padding-top: var(--s-3); border-top: 1px solid var(--waw-line);
}
.fauna-strip p { margin: 0; }
.fauna-faces { display: flex; flex: none; }
.fauna-faces img {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--waw-white); background: var(--waw-sage);
  box-shadow: 0 0 0 1px rgba(15,26,20,0.10);
  margin-left: -10px; transition: transform 0.2s var(--ease);
}
.fauna-faces img:first-child { margin-left: 0; }
.fauna-faces img:hover { transform: translateY(-3px) scale(1.12); z-index: 2; }

/* --- Credito fotografico discreto -------------------------------- */
.photo-credit {
  position: absolute; right: var(--s-3); bottom: var(--s-2); z-index: 3;
  margin: 0; font-size: 11px; line-height: 1.4; color: rgba(255,255,255,0.72);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6); max-width: 60%; text-align: right;
}
.photo-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.photo-credit a:hover { color: #fff; }

/* --- Intestazione di sezione ------------------------------------- */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6);
}
.section-head h2 { margin: 0; }
.section-head p { margin: var(--s-2) 0 0; max-width: 62ch; }
.eyebrow {
  text-transform: uppercase; letter-spacing: 0.16em; font-size: var(--t-xs);
  font-weight: 700; color: var(--waw-moss); margin-bottom: var(--s-2);
}
.section-dark .eyebrow { color: var(--waw-gold); }

/* --- Scheda struttura -------------------------------------------- */
.acc-hero {
  position: relative; width: 100%;
  /* Niente aspect-ratio insieme a max-height: insieme restringono la larghezza. */
  height: clamp(240px, 42vw, 460px);
  overflow: hidden; background: var(--waw-sage);
  display: flex; align-items: flex-end;
}
.acc-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acc-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,26,20,0.88) 0%, rgba(15,26,20,0.35) 45%, rgba(15,26,20,0.05) 75%);
}
.acc-hero-body { position: relative; z-index: 2; padding-block: var(--s-6); color: #fff; }
.acc-hero-body h1 { color: #fff; margin: 0; text-shadow: 0 2px 14px rgba(0,0,0,0.45); }
.acc-hero-place { margin: var(--s-2) 0 0; color: rgba(255,255,255,0.9); font-size: var(--t-sm); }
.acc-hero-place a { color: var(--waw-sand); }

.acc-layout { display: grid; gap: var(--s-7); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) {
  .acc-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-8); }
  .acc-contact { position: sticky; top: var(--s-5); }
}
.acc-block + .acc-block { margin-top: var(--s-9); }
.acc-main > .lede {
  font-size: var(--t-lg); line-height: 1.6; color: var(--waw-ink);
  margin: 0 0 var(--s-6); max-width: 62ch;
}
.acc-contact h2 { font-size: var(--t-lg); margin: 0 0 var(--s-4); }

/* Elenco specie: una riga leggibile, non una tabella sparsa */
.species-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--waw-line); }
.species-row {
  display: grid; align-items: center; gap: var(--s-3);
  grid-template-columns: 56px minmax(0, 1fr);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--waw-line);
}
@media (min-width: 720px) {
  .species-row { grid-template-columns: 56px minmax(0, 1.4fr) minmax(0, 1.3fr) minmax(0, 0.9fr); }
}
.species-row:hover { background: var(--waw-mist); }
.species-row-face img {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  background: var(--waw-sage); box-shadow: 0 0 0 1px rgba(15,26,20,0.10);
}
.species-row-name a { font-weight: 600; text-decoration: none; color: var(--waw-ink); }
.species-row-name a:hover { color: var(--waw-forest-soft); }
.species-row-name .sci { display: block; font-size: var(--t-xs); font-style: italic; color: var(--waw-slate); }
.species-row-meta { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.species-row-when { margin: 0; display: flex; flex-direction: column; font-size: var(--t-xs); }
@media (max-width: 719px) {
  .species-row-meta, .species-row-when { grid-column: 2; }
}

/* Riquadri: esperienze e punti di osservazione */
.tile .card-body { gap: var(--s-2); }
.tile-icon { font-size: 1.9rem; line-height: 1; }
.tile .card-title { font-size: var(--t-base); }
.tile-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
.tile-facts { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin: auto 0 0;
  font-size: var(--t-xs); color: var(--waw-slate); }
.tile-facts span + span::before { content: "·"; margin-right: var(--s-3); color: var(--waw-line); }

/* Galleria */
.gallery { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery figure { margin: 0; }
.gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); background: var(--waw-sage); display: block;
}
.gallery figcaption { font-size: var(--t-xs); color: var(--waw-slate); margin-top: var(--s-2); }

/* Mappa incorniciata */
.map-frame {
  border: 1px solid var(--waw-line); border-radius: var(--radius);
  overflow: hidden; background: var(--waw-mist);
}
.map-frame > div { height: clamp(280px, 38vw, 420px); width: 100%; }

/* Coppie etichetta/valore */
.fact-list { list-style: none; margin: 0; padding: 0; }
.fact-list li {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-2) 0; border-bottom: 1px solid var(--waw-line);
  font-size: var(--t-sm);
}
.fact-list li:last-child { border-bottom: 0; }
.fact-list span { color: var(--waw-slate); }
.fact-list strong { text-align: right; font-weight: 600; }

/* Schede rilevazione */
.obs-card { text-decoration: none; }
.obs-card .card-media { aspect-ratio: 1 / 1; }
.obs-card .card-title { font-size: var(--t-sm); }
.obs-flag {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  background: rgba(15,26,20,0.72); color: #fff; border-radius: var(--radius-pill);
  padding: 2px 8px; font-size: 10px; letter-spacing: 0.03em;
}

/* --- Marchio ------------------------------------------------------ */
.logo { display: inline-flex; align-items: center; gap: var(--s-3); }
.logo-emblem {
  /* File quadrato dedicato: un SVG non si ritaglia con object-fit, perche' non
     ha pixel da tagliare ma coordinate che si adattano al contenitore. Il
     tentativo di ritagliare il logo esteso dava un riquadro bianco. */
  width: 46px; height: 46px; flex: none;
}
@media (max-width: 640px) { .logo-emblem { width: 38px; height: 38px; } }

/* --- Testata delle pagine con mappa ------------------------------- */
.map-intro {
  padding: var(--s-6) var(--s-5) var(--s-4);
  max-width: 78ch;
}
.map-intro h1 { margin: 0 0 var(--s-3); font-size: var(--t-2xl); }
.map-intro p { margin: 0; color: var(--waw-slate); font-size: var(--t-sm); line-height: 1.65; }
@media (min-width: 900px) { .map-intro { padding-inline: var(--s-7); } }

/* Le colonne del footer sono <nav>: mantengono l aspetto di prima. */
.site-footer nav { display: block; }
.site-footer nav h2 {
  font-size: var(--t-sm); font-family: var(--font-body); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--waw-sand); margin: 0 0 var(--s-3);
}

/* --- Sezione senza contenuti --------------------------------------- */
.empty-state {
  border: 1px solid var(--waw-line); border-radius: var(--radius);
  background: var(--waw-mist); padding: var(--s-6);
}
.empty-state h2 { margin: 0 0 var(--s-3); font-size: var(--t-xl); }
.empty-state p { max-width: 68ch; }
.empty-state .card { background: var(--waw-white); text-decoration: none; }
.empty-state .card-title { font-size: var(--t-base); }

/* --- Comodita' d uso su schermo tattile ---------------------------- */
/*
   Il bottone piccolo resta piccolo con il mouse, dove un clic e' preciso,
   ma su un dito torna della misura giusta. Le linee guida chiedono 24 px,
   44 e' la misura oltre la quale una persona anziana non sbaglia bersaglio.
*/
@media (pointer: coarse) {
  .btn-sm, .chip { min-height: 44px; }
  .chip { padding-inline: var(--s-4); }
}

/* --- Chi chiede piu' contrasto al sistema -------------------------- */
@media (prefers-contrast: more) {
  :root {
    --waw-slate: #3D4A44;      /* testo secondario piu' scuro */
    --waw-line: #8A9691;       /* bordi visibili, non accennati */
    --waw-moss: #24513C;
  }
  .card, .input, .select, .chip { border-width: 2px; }
  a { text-decoration: underline; text-underline-offset: 2px; }
  .muted { color: var(--waw-ink); }
}

/* --- Intestazione sugli schermi stretti ---------------------------- */
/*
   Su un telefono da 375 px logo, carrello, accesso e menu insieme sforavano
   di quattro pixel: abbastanza per far scorrere lateralmente tutta la pagina,
   che e' uno dei difetti piu' fastidiosi da usare e uno dei piu' facili da
   non notare in ufficio su un monitor grande.
*/
@media (max-width: 430px) {
  .header-inner { gap: var(--s-2); }
  .logo { min-width: 0; }
  .logo-sub { display: none; }
  .header-actions { gap: var(--s-1); min-width: 0; }
  .header-actions .btn { padding-inline: var(--s-3); }
}

/* Rete di sicurezza: nessun figlio diretto puo' allargare il documento. */
html, body { overflow-x: clip; }

/* --- Testata di una categoria di fauna ----------------------------- */
.cat-head { display: grid; gap: var(--s-5); align-items: end; margin-bottom: var(--s-6); }
@media (min-width: 720px) { .cat-head { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); } }
.cat-head-photo { margin: 0; position: relative; }
.cat-head-photo img {
  width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius);
  background: var(--waw-mist); display: block;
}
.cat-head-photo figcaption {
  margin-top: var(--s-2); font-size: var(--t-xs); color: var(--waw-slate);
}
.cat-head-photo figcaption a { color: var(--waw-forest); }
.cat-head-text h1 { margin: 0; }

/* --- Marchio nell intestazione ------------------------------------- */
.logo-full { height: 46px; width: auto; display: block; flex: none; }
.logo { flex: none; }
@media (max-width: 640px) { .logo-full { height: 38px; } }
@media (max-width: 430px) { .logo-full { height: 34px; } }

/* --- Articolo del magazine ----------------------------------------- */
.post-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  margin: var(--s-5) 0 0; padding-top: var(--s-4);
  border-top: 1px solid var(--waw-line);
  font-size: var(--t-sm); color: var(--waw-slate);
}
.prose h2 { margin: var(--s-8) 0 var(--s-3); font-size: var(--t-2xl); }
.prose h3 { margin: var(--s-6) 0 var(--s-2); font-size: var(--t-lg); }
.prose p, .prose li { line-height: 1.75; }
.prose ul, .prose ol { padding-left: 1.3em; margin: var(--s-4) 0; }
.prose li + li { margin-top: var(--s-2); }
.prose > p:first-child { font-size: var(--t-lg); }

/* Collegamenti costruiti dal motore interno: si vedono, ma non gridano. */
.auto-link {
  color: var(--waw-forest); text-decoration: underline;
  text-decoration-color: var(--waw-sage); text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.auto-link:hover { text-decoration-color: var(--waw-terracotta, #E07A3E); }

.post-faq { margin-top: var(--s-9); border-top: 1px solid var(--waw-line); padding-top: var(--s-6); }
.post-faq h2 { margin: 0 0 var(--s-4); }
.post-faq details {
  border: 1px solid var(--waw-line); border-radius: var(--radius);
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3); background: var(--waw-white);
}
.post-faq summary {
  cursor: pointer; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: var(--s-3); min-height: 32px;
  align-items: center;
}
.post-faq summary::-webkit-details-marker { display: none; }
.post-faq summary::after { content: "+"; font-size: var(--t-xl); color: var(--waw-moss); line-height: 1; }
.post-faq details[open] summary::after { content: "\2212"; }
.post-faq details p { margin: var(--s-3) 0 0; color: var(--waw-slate); line-height: 1.7; }

/* --- Pagina mappa: la mappa deve restare la cosa piu grande --------- */
.map-intro { padding: var(--s-4) var(--s-5) var(--s-2); max-width: 78ch; }
.map-intro h1 { margin: 0 0 var(--s-2); font-size: var(--t-xl); }
.map-intro p { margin: 0; color: var(--waw-slate); font-size: var(--t-sm); line-height: 1.6; }
@media (min-width: 900px) { .map-intro { padding-inline: var(--s-6); } }
/*
   Su schermi bassi il testo introduttivo si mangia la mappa. Da 800 px di
   altezza in giu' resta il titolo e sparisce il paragrafo: l informazione
   completa e' comunque nella pagina, ma la mappa torna utilizzabile.
*/
@media (max-height: 800px) {
  .map-intro { padding-block: var(--s-3) var(--s-1); }
  .map-intro p { display: none; }
  .map-intro h1 { font-size: var(--t-lg); }
}

.map-filters { padding-block: var(--s-2); }
.map-list { padding-bottom: var(--s-4); }

/* --- Schede: cliccabili tutte, non solo il titolo ------------------- */
/*
   Il collegamento resta uno solo, sul titolo: e' quello che legge uno screen
   reader ed e' l unica cosa che riceve il fuoco da tastiera. Lo pseudo-elemento
   ne estende l area sensibile a tutta la scheda, foto compresa. Cliccare una
   fotografia e non ottenere niente e' il tipo di attrito che fa chiudere la pagina.
*/
.card { position: relative; }
.card-title a::after,
.card > .card-body > .card-title a::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
/* Quello che deve restare cliccabile per conto suo sta sopra all overlay. */
.card .badge,
.card .fauna-faces img,
.card-body a:not(.card-title a),
.card .card-flag { position: relative; z-index: 2; }
.card:focus-within { box-shadow: var(--shadow-lg); }
.card:focus-within .card-title a { text-decoration: underline; }

/* --- Testo dell articolo: respiro ---------------------------------- */
/*
   Una colonna troppo stretta accanto a una fotografia larga fa sembrare la
   pagina schiacciata. Qui il testo sale a 900 px con corpo e interlinea
   proporzionati: restano circa 75 caratteri per riga, che e' la misura in cui
   si legge meglio.
*/
.prose { font-size: 1.0625rem; line-height: 1.8; }
.prose p { margin-bottom: var(--s-4); }
.prose > p:first-child { font-size: var(--t-lg); line-height: 1.7; color: var(--waw-ink); }
.post-meta { font-size: var(--t-sm); }
article > header.container-narrow h1 { font-size: clamp(2rem, 1.2rem + 2.6vw, 2.75rem); line-height: 1.15; }
article > header.container-narrow .lede { font-size: var(--t-lg); line-height: 1.6; max-width: 62ch; }

/* --- Riferimenti a specie dentro il testo --------------------------- */
/*
   Un collegamento a un animale porta con se' la sua faccia: chi legge capisce
   di che bestia si parla senza uscire dall articolo, e chi non conosce il nome
   ha comunque un immagine a cui agganciarlo.
*/
/*
   Riferimento a una specie dentro il testo.

   Prima l immagine era un elemento a se' dentro il collegamento e si comportava
   come tale: andava a capo per conto suo, alzava l interlinea della riga e
   lasciava un buco nel paragrafo. Ora faccia e nome stanno in una pastiglia
   inline-flex che il browser tratta come una parola sola: non si spezza mai a
   meta' e non tocca il ritmo delle righe intorno.

   L allineamento e' sulla base del testo, non al centro: cosi' la parola resta
   sulla stessa linea di scrittura delle altre.
*/
.auto-link {
  color: var(--waw-forest); text-decoration: underline;
  text-decoration-color: var(--waw-sage); text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.auto-link-face {
  display: inline-flex; align-items: center; gap: 0.3em;
  white-space: nowrap; vertical-align: baseline;
  text-decoration: none; padding: 0.05em 0.5em 0.05em 0.15em;
  border-radius: var(--radius-pill); background: var(--waw-mist);
  line-height: inherit;
}
.auto-link-face img {
  width: 1.35em; height: 1.35em; border-radius: 50%; object-fit: cover;
  flex: none; background: var(--waw-sage);
  box-shadow: 0 0 0 1px rgba(15,26,20,0.12);
}
.auto-link-face > span {
  text-decoration: underline; text-decoration-color: var(--waw-sage);
  text-underline-offset: 3px; text-decoration-thickness: 2px;
}
.auto-link-face:hover { background: var(--waw-sage); }
.auto-link-face:hover > span { text-decoration-color: var(--waw-forest); }

/* --- Articolo su tre colonne --------------------------------------- */
.post-layout {
  display: grid; gap: var(--s-7);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--s-7);
  align-items: start;
}
@media (min-width: 1000px) {
  /* Due colonne: testo e approfondimenti. L indice compare piu' avanti,
     quando c e' spazio per tutte e tre senza stringere il testo. */
  .post-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-8); }
  .post-index { display: none; }
}
@media (min-width: 1320px) {
  .post-layout { grid-template-columns: 230px minmax(0, 1fr) 340px; }
  .post-index { display: block; }
}

.post-main { min-width: 0; max-width: 78ch; }
.post-main > header h1 { font-size: clamp(2rem, 1.2rem + 2.4vw, 2.9rem); line-height: 1.14; margin: var(--s-2) 0; }
.post-main .lede { font-size: var(--t-lg); line-height: 1.6; color: var(--waw-slate); max-width: 62ch; }

.post-cover { margin: var(--s-6) 0 var(--s-7); }
.post-cover img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: var(--radius); display: block; background: var(--waw-sage);
}
.post-cover figcaption { font-size: var(--t-xs); color: var(--waw-slate); margin-top: var(--s-2); }

/* Indice agganciato: segue la lettura senza rubare spazio al testo */
.post-index { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
.post-index h2 {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--waw-moss); margin: 0 0 var(--s-3);
}
.post-index ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--waw-line); }
.post-index li { margin: 0; }
.post-index a {
  display: block; padding: var(--s-2) var(--s-3); margin-left: -2px;
  border-left: 2px solid transparent; font-size: var(--t-sm);
  color: var(--waw-slate); text-decoration: none; line-height: 1.4;
}
.post-index a:hover { color: var(--waw-forest); border-left-color: var(--waw-forest-soft); background: var(--waw-mist); }

/* Colonna degli approfondimenti */
.post-side { position: sticky; top: calc(var(--header-h) + var(--s-4)); display: grid; gap: var(--s-5); }
@media (max-width: 999px) { .post-side { position: static; } }
.side-block {
  border: 1px solid var(--waw-line); border-radius: var(--radius);
  padding: var(--s-4); background: var(--waw-white);
}
.side-block > h2 {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--waw-moss); margin: 0 0 var(--s-3);
}
.side-species, .side-posts { list-style: none; margin: 0; padding: 0; }
.side-species li + li, .side-posts li + li { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--waw-line); }
.side-species a { display: flex; gap: var(--s-3); align-items: center; text-decoration: none; }
.side-species img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; background: var(--waw-sage); }
.side-species strong { display: block; color: var(--waw-ink); font-size: var(--t-sm); }
.side-species em { display: block; font-size: var(--t-xs); color: var(--waw-slate); }
.side-posts a { display: block; text-decoration: none; }
.side-posts img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.side-posts strong { display: block; margin-top: var(--s-2); font-size: var(--t-sm); color: var(--waw-ink); line-height: 1.35; }
.side-cta { background: var(--waw-mist); }
.side-cta p { margin: 0 0 var(--s-3); }

/* --- Vincolo di larghezza delle pagine ----------------------------- */
/*
   Ogni pagina, tranne la home, vive dentro lo stesso contenitore
   dell intestazione: dal bordo sinistro del logo al bordo destro dell ultimo
   bottone in alto. Cosi' nessun blocco inizia o finisce a una larghezza
   diversa dagli altri, che e' la cosa che fa sembrare un sito disallineato
   anche quando ogni singolo pezzo e' corretto.

   Il vincolo sta sul <main> del layout, non nei template: vale da solo per
   tutte le pagine, comprese quelle che verranno scritte dopo.
*/
.page-bounded {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
/* Su schermi larghi il margine laterale cresce: le scritte non toccano
   il bordo e restano gradevoli e leggibili (segnalazione Riccardo). */
@media (min-width: 768px)  { .page-bounded { padding-inline: var(--s-7); } }
@media (min-width: 1200px) { .page-bounded { padding-inline: var(--s-9); } }
/* Dentro una pagina gia' vincolata i contenitori interni non devono
   restringere una seconda volta ne' aggiungere un secondo margine. */
.page-bounded .container { max-width: none; padding-inline: 0; }
.page-bounded .container-narrow { max-width: var(--container-narrow); }

/* Le fasce che prima uscivano dai bordi ora si fermano al contenitore
   e prendono gli angoli arrotondati, perche' un rettangolo a filo pagina
   dentro uno spazio delimitato sembra un errore. */
.page-bounded .acc-hero,
.page-bounded .map-page { border-radius: var(--radius); overflow: hidden; }
.page-bounded .map-page { height: calc(100vh - var(--header-h) - var(--s-8)); margin-block: var(--s-5); }
.page-bounded .acc-hero { margin-top: var(--s-5); }

/* --- Testata delle pagine mappa: niente spazio sprecato ------------- */
.map-head {
  display: grid; gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--s-5) var(--s-5) var(--s-4);
  align-items: start;
}
@media (min-width: 860px)  { .map-head { grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.9fr); } }
@media (min-width: 1200px) { .map-head { grid-template-columns: minmax(0, 1.5fr) minmax(240px, 0.8fr) minmax(260px, 0.9fr); } }
.map-intro { padding: 0; max-width: 62ch; }

/* Numeri della rete: densi, allineati, leggibili di sbieco */
.map-numbers {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3) var(--s-4); margin: 0;
  padding: var(--s-4); border: 1px solid var(--waw-line);
  border-radius: var(--radius); background: var(--waw-white);
}
.map-numbers > div { min-width: 0; }
.map-numbers dt {
  font-size: var(--t-xs); color: var(--waw-slate); line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.map-numbers dd {
  margin: 2px 0 0; font-family: var(--font-display);
  font-size: var(--t-xl); color: var(--waw-forest); line-height: 1;
}

/* Legenda: si legge una volta e non si torna piu' a chiedersi cosa sia un cerchio */
.map-legend {
  padding: var(--s-4); border: 1px solid var(--waw-line);
  border-radius: var(--radius); background: var(--waw-mist);
}
.map-legend h2 {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--waw-moss); margin: 0 0 var(--s-3);
}
.map-legend ul { list-style: none; margin: 0; padding: 0; }
.map-legend li {
  display: flex; gap: var(--s-2); align-items: flex-start;
  font-size: var(--t-sm); color: var(--waw-slate); line-height: 1.5;
}
.map-legend li + li { margin-top: var(--s-3); }
.legend-dot, .legend-pin {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--waw-forest); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; box-shadow: 0 0 0 3px rgba(45,106,79,0.18);
}
.legend-pin { width: 16px; height: 16px; margin: 5px; }

@media (max-height: 800px) {
  .map-head { padding-block: var(--s-3) var(--s-2); }
  .map-intro p { display: none; }
}

/* --- Provenienza di un testo generato ------------------------------ */
/*
   Non e' una nota legale nascosta in fondo: sta subito sotto il testo a cui si
   riferisce, con lo stesso peso visivo di una didascalia. Chi legge deve poterlo
   sapere senza cercarlo, e senza che gli venga urlato addosso.
*/
.nota-provenienza {
  margin-top: var(--s-4); padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--waw-sage);
  background: var(--waw-mist); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--t-xs); color: var(--waw-slate); line-height: 1.6;
}
.nota-provenienza a { color: var(--waw-forest); }

/* Collegamento al validatore nel piede: presente, non invadente. */
.footer-w3c {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--waw-sand); text-decoration: none;
  border: 1px solid rgba(242,232,213,0.28); border-radius: var(--radius-pill);
  padding: 2px 10px; font-size: var(--t-xs); white-space: nowrap;
}
.footer-w3c::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--waw-sage); flex: none;
}
.footer-w3c:hover { border-color: var(--waw-sand); color: #fff; }

/* --- Hero a due scene: giorno e notte ------------------------------ */
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 900ms var(--ease);
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-controls {
  position: absolute; right: var(--s-5); bottom: var(--s-5); z-index: 3;
  display: flex; gap: var(--s-2);
}
.hero-dot {
  min-height: 40px; padding: 0 var(--s-4);
  border: 1px solid rgba(255,255,255,0.45); border-radius: var(--radius-pill);
  background: rgba(15,26,20,0.45); color: rgba(255,255,255,0.85);
  font-size: var(--t-xs); font-weight: 650; letter-spacing: 0.04em;
  cursor: pointer; backdrop-filter: blur(4px);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.hero-dot:hover { background: rgba(15,26,20,0.7); color: #fff; }
.hero-dot.is-active { background: var(--waw-terracotta, #E07A3E); border-color: transparent; color: #fff; }
@media (max-width: 640px) {
  .hero-controls { right: var(--s-4); bottom: var(--s-4); }
  .hero-dot { padding: 0 var(--s-3); }
}
/* Chi ha chiesto meno animazioni non vede la dissolvenza. */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

/* --- I tre passaggi di WAW ID -------------------------------------- */
.passi { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-4); }
.passi li { display: flex; gap: var(--s-4); align-items: flex-start; }
.passo-numero {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--waw-forest); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--t-base); line-height: 1;
}
.passi strong { display: block; color: var(--waw-ink); }
.passi span:not(.passo-numero) {
  display: block; margin-top: 2px; font-size: var(--t-sm);
  color: var(--waw-slate); line-height: 1.55;
}

/* --- Distribuzione equilibrata delle griglie ------------------------ */
/*
   Regola del progetto: una riga piena e una riga con un elemento solo e'
   sbilanciata. Sei schede devono fare tre e tre, non cinque e uno.

   Il CSS non sa contare, ma puo' chiederlo: :has() combinato con :nth-child
   riconosce quante schede ci sono dentro la griglia e sceglie il numero di
   colonne che lascia l ultima riga piu' piena possibile.

   Casi in cui il numero massimo di colonne va abbassato:
     5 elementi su 4 colonne -> 4+1   diventa 3+2
     6 elementi su 4 colonne -> 4+2   diventa 3+3
     9 elementi su 4 colonne -> 4+4+1 diventa 3+3+3
     4 elementi su 3 colonne -> 3+1   diventa 2+2
   Negli altri casi il massimo va gia' bene: 7 fa 4+3, 8 fa 4+4, 10 fa 4+4+2.

   I browser senza :has() ignorano queste righe e restano al comportamento
   precedente, che e' corretto anche se meno elegante.
*/
@media (min-width: 721px) {
  .grid-4:has(> :nth-child(5):last-child),
  .grid-4:has(> :nth-child(6):last-child),
  .grid-4:has(> :nth-child(9):last-child) {
    grid-template-columns: repeat(auto-fit, minmax(max(260px, (100% - var(--s-5) * 2) / 3), 1fr));
  }

  .grid-3:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(auto-fit, minmax(max(300px, (100% - var(--s-5)) / 2), 1fr));
  }

  /* Due elementi soli non devono diventare due lenzuoli: restano larghi
     al massimo come sarebbero in una riga da tre. */
  .grid-4:has(> :nth-child(2):last-child),
  .grid-3:has(> :nth-child(2):last-child) {
    /* "fr" dentro min() non e' CSS valido e la regola veniva ignorata in
       blocco: i browser la scartavano in silenzio. La larghezza fissa di un
       terzo di riga ottiene lo stesso risultato con sintassi lecita. */
    grid-template-columns: repeat(2, calc((100% - var(--s-5) * 2) / 3));
    justify-content: start;
  }
}

/* --- Richiesta di adesione delle strutture --------------------------- */
/*
   Modulo a sinistra, ragioni per compilarlo a destra. Chi sta per lasciare
   i propri dati aziendali ha bisogno di leggere cosa succede dopo mentre
   compila, non prima e non in un altra pagina: se deve tornare indietro a
   controllare, spesso non torna.
*/
.apply-head { max-width: 760px; padding-block: var(--s-6) var(--s-2); }
.apply-head h1 { margin-top: var(--s-2); }
.apply-head .lede { margin-top: var(--s-3); }

.apply-numbers {
  list-style: none; margin: var(--s-6) 0 0; padding: 0;
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.apply-numbers li {
  border-left: 3px solid var(--waw-moss); padding-left: var(--s-3);
}
.apply-numbers strong {
  display: block; font-family: var(--font-display);
  font-size: var(--t-2xl); line-height: 1.1; color: var(--waw-forest);
}
.apply-numbers span { font-size: var(--t-xs); color: var(--waw-slate); }

.apply-layout {
  display: grid; gap: var(--s-7);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  padding-block: var(--s-6) var(--s-8);
}
@media (min-width: 1000px) {
  .apply-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-8); }
  /* La colonna informativa segue la lettura: il modulo e' lungo e le risposte
     devono restare a portata d occhio fino all ultimo campo. */
  .apply-side { position: sticky; top: calc(var(--header-h, 72px) + var(--s-4)); }
}

.apply-form fieldset {
  border: 0; padding: 0; margin: 0 0 var(--s-7);
}
.apply-form legend {
  font-family: var(--font-display); font-size: var(--t-lg);
  color: var(--waw-forest); padding: 0 0 var(--s-3);
  border-bottom: 1px solid var(--waw-line); width: 100%;
  margin-bottom: var(--s-5);
}
.apply-form .req { color: var(--waw-danger); }
.apply-form .input.is-wrong { border-color: var(--waw-danger); }
.apply-form textarea.input { resize: vertical; min-height: 90px; }

/* Campo esca: fuori dallo schermo, ma non display:none, perche' alcuni
   programmi saltano proprio i campi nascosti in quel modo. */
.esca {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

.apply-side .side-block + .side-block { margin-top: var(--s-5); }
.side-quiet { background: var(--waw-paper); }
.side-list { margin: var(--s-4) 0 0; padding-left: var(--s-5); }
.side-list li { font-size: var(--t-sm); line-height: 1.6; margin-bottom: var(--s-3); }
.side-block details { border-top: 1px solid var(--waw-line); padding: var(--s-3) 0; }
.side-block details summary {
  cursor: pointer; font-weight: 600; font-size: var(--t-sm);
}
.side-block details p { margin-top: var(--s-2); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }

/* Conferma di invio ------------------------------------------------- */
.esito { text-align: center; max-width: 640px; margin: 0 auto; padding-top: var(--s-8); }
.esito-segno {
  width: 64px; height: 64px; margin: 0 auto var(--s-4);
  border-radius: 50%; background: var(--waw-forest); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; line-height: 1;
}

/* --- Contatti -------------------------------------------------------- */
/*
   La scheda della struttura e' l unica in evidenza: e' il percorso che porta
   valore al progetto e quello che chi arriva qui cerca senza sapere che
   esiste una pagina apposita.
*/
.card-strong {
  border-color: var(--waw-moss);
  box-shadow: 0 2px 0 var(--waw-moss) inset;
}
.card-strong .card-body { background: linear-gradient(180deg, rgba(122,150,110,.07), transparent 120px); }

.fatto { border-top: 2px solid var(--waw-line); padding-top: var(--s-3); }
.fatto h3 {
  font-family: var(--font-display); font-size: var(--t-base);
  color: var(--waw-forest); margin-bottom: var(--s-2);
}

/* --- Scheda del potenziale cliente (amministrazione) ----------------- */
/*
   Elenco di coppie etichetta/valore. Su schermo largo due colonne, perche'
   una struttura ha una dozzina di dati brevi e incolonnarli tutti a sinistra
   costringerebbe a scorrere durante una telefonata.
*/
.dati { margin: 0; display: grid; gap: var(--s-3); }
@media (min-width: 700px) { .dati { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dato dt {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em;
  color: var(--waw-grey);
}
.dato dd { margin: 2px 0 0; font-size: var(--t-sm); color: var(--waw-ink); }

/* Nella scheda la riga specie ha il conteggio a destra, senza immagine. */
.side-species li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.side-species em { display: block; font-size: var(--t-xs); color: var(--waw-slate); }

/* --- Quando il contenuto e' uno solo --------------------------------- */
/*
   Un articolo, una struttura, un punto di osservazione: mettere una scheda
   sola dentro una griglia da tre lascia due terzi di riga vuota. Non e' un
   difetto di impaginazione, e' una scarsita' di contenuto - e va gestita
   cambiando forma alla scheda, non allargando la colonna.

   Con la classe "uno" la griglia diventa a colonna unica e la scheda si
   distende in orizzontale: immagine a sinistra, testo a destra. La riga si
   riempie per davvero e la scheda ha piu' spazio per dire qualcosa.
*/
.grid.uno { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 760px) {
  .grid.uno > .card {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    align-items: stretch;
  }
  .grid.uno > .card > .card-media {
    height: 100%; aspect-ratio: auto; min-height: 220px;
  }
  .grid.uno > .card > .card-media img { height: 100%; object-fit: cover; }
  .grid.uno > .card > .card-body { align-self: center; padding: var(--s-6); }
  .grid.uno > .card > .card-body .card-title { font-size: var(--t-xl); }
  /* Le schede senza immagine si distendono comunque su tutta la riga. */
  .grid.uno > .card:not(:has(> .card-media)) { grid-template-columns: minmax(0, 1fr); }
}

/* --- Sottoscrizione dell adesione ------------------------------------ */
/*
   I documenti stanno dentro riquadri con scorrimento proprio: la pagina resta
   navigabile anche con testi lunghi, ma il testo e' tutto presente - non
   caricato dopo, non nascosto dietro un collegamento. Chi firma deve poterlo
   leggere per intero senza uscire dalla pagina.
*/
.documento {
  max-height: 420px; overflow-y: auto;
  padding: var(--s-4); border: 1px solid var(--waw-line);
  border-radius: var(--radius); background: var(--waw-paper);
  font-size: var(--t-sm); line-height: 1.65;
}
.documento:focus-visible { outline: 2px solid var(--waw-moss); outline-offset: 2px; }

/* Un campo che mostra un dato senza permettere di cambiarlo: sembra un campo
   perche' sta in mezzo agli altri, ma non e' un input e non finisce nell invio. */
.input-statico {
  background: var(--waw-paper); color: var(--waw-slate);
  display: flex; align-items: center; margin: 0;
}

.dati-verticali { margin: 0; display: grid; gap: var(--s-3); }
.esito-segno-quiet { background: var(--waw-slate); }

/* --- Area di lavoro: menu con contatori e blocco utente --------------- */
/*
   Il numero accanto alla voce e' un carico di lavoro, non una decorazione:
   rosso caldo su fondo scuro, leggibile senza cercare. Il blocco utente in
   fondo dice CHI e' dentro e con che ruolo: quando piu' persone condividono
   uno schermo, saperlo evita di lavorare con i permessi di un altro.
*/
.dash-side a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
}
.dash-badge {
  flex: none; min-width: 22px; padding: 1px 6px; border-radius: 999px;
  background: var(--waw-dawn-btn); color: #fff; text-align: center;
  font-size: var(--t-xs); font-weight: 700; line-height: 1.5;
}
.dash-utente {
  margin-top: var(--s-6); padding: var(--s-3);
  border-top: 1px solid rgba(255,255,255,.16);
}
.muted-inverse { color: rgba(255,255,255,.55); }

/* Matrice dei permessi ------------------------------------------------ */
.acl-table td, .acl-table th { vertical-align: middle; }
.acl-col { text-align: center; }
.acl-n { display: block; font-weight: 400; }
.acl-cella { text-align: center; }
.acl-cella input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--waw-forest); }
/* Le celle diverse dai valori di fabbrica si vedono a colpo d occhio. */
.acl-diverso { background: rgba(224,122,62,.12); }
.acl-gruppo td {
  background: var(--waw-paper); font-family: var(--font-display);
  color: var(--waw-forest); padding-top: var(--s-4);
}
.acl-check { display: inline-flex; padding: var(--s-2); cursor: pointer; }
.acl-tre { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.acl-tre label {
  display: inline-flex; gap: 6px; align-items: center;
  font-size: var(--t-sm); cursor: pointer; white-space: nowrap;
}
.d-block { display: block; }

/* --- Editor di redazione --------------------------------------------- */
.redazione {
  display: grid; gap: var(--s-7);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1100px) {
  .redazione { grid-template-columns: minmax(0, 1fr) 320px; }
}
.input-titolo { font-size: var(--t-xl); font-family: var(--font-display); }
.testo-articolo { font-family: var(--font-mono, monospace); font-size: var(--t-sm); line-height: 1.6; }
.barra-editor {
  display: flex; flex-wrap: wrap; gap: var(--s-1);
  padding: var(--s-2) 0;
}
.barra-editor button {
  border: 1px solid var(--waw-line); background: var(--waw-paper);
  border-radius: var(--radius-sm, 6px); padding: 4px 10px;
  font-size: var(--t-xs); cursor: pointer; color: var(--waw-ink);
}
.barra-editor button:hover { border-color: var(--waw-moss); }
.faq-riga { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.input-sm { min-height: 34px; padding-block: 4px; font-size: var(--t-sm); }

/* --- Stelle, barre e grafici ----------------------------------------- */
.stelle { color: var(--waw-gold); letter-spacing: 2px; font-size: var(--t-lg); }
.barre { margin: 0; display: grid; gap: var(--s-3); }
.barra-riga dt { font-size: var(--t-sm); margin-bottom: 2px; }
.barra-riga dd { margin: 0; display: flex; align-items: center; gap: var(--s-2); }
.barra {
  display: block; height: 14px; min-width: 3px; border-radius: 7px;
  background: var(--waw-forest);
}
.barra-valore { font-size: var(--t-sm); font-weight: 600; }
.grafico-visite svg { width: 100%; height: 140px; display: block; }

/* --- Diario della struttura e recensioni ----------------------------- */
/*
   Il diario e' una colonna di voci datate: la data a sinistra fa da spina
   dorsale visiva, come in un registro. Le recensioni sono schede sobrie:
   la stella piena e' l unico colore, il resto e' testo - la voce di un
   ospite non ha bisogno di cornici.
*/
.diario { display: grid; gap: var(--s-5); }
.diario-voce {
  display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--s-4);
  border-left: 3px solid var(--waw-sage); padding-left: var(--s-4);
}
.diario-data { margin: 0; font-size: var(--t-xs); color: var(--waw-slate); padding-top: 3px; }
.diario-voce h3 { font-size: var(--t-base); margin-bottom: var(--s-1); }
@media (max-width: 640px) {
  .diario-voce { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
}

.voto-medio { margin: 0; font-size: var(--t-sm); color: var(--waw-slate); }
.voto-medio strong { font-size: var(--t-lg); color: var(--waw-ink); }
.recensioni { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .recensioni { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.recensione {
  border: 1px solid var(--waw-line); border-radius: var(--radius);
  padding: var(--s-4); background: var(--waw-white);
}
.recensione header {
  display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2);
}
.recensione-scrivi summary { list-style: none; display: inline-flex; cursor: pointer; }
.recensione-scrivi summary::-webkit-details-marker { display: none; }
.voto-scelta { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.voto-scelta label {
  display: inline-flex; gap: 6px; align-items: center;
  font-size: var(--t-sm); cursor: pointer;
}
.field-label { display: block; font-weight: 600; font-size: var(--t-sm); margin-bottom: var(--s-2); }

/* --- Scatto rapido e notifiche --------------------------------------- */
/* In modalita rapida il riquadro di scatto pulsa piano: dice "tocca qui"
   senza scrivere un manuale. Chi ha gia toccato non lo vede piu. */
.capture-zone.is-rapido { animation: batti 1.6s ease-in-out infinite; }
@keyframes batti {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,164,65,.55); }
  50%      { box-shadow: 0 0 0 14px rgba(217,164,65,0); }
}
@media (prefers-reduced-motion: reduce) {
  .capture-zone.is-rapido { animation: none; outline: 3px solid var(--waw-gold); }
}
[data-notifiche].is-attive { opacity: .75; cursor: default; }

/* Identita del titolare nel piede: piccola ma leggibile, mai nascosta. */
.footer-titolare { display: block; margin-top: var(--s-2); font-size: var(--t-xs); opacity: .85; }
.footer-titolare a { color: inherit; }

/* --- Calendario naturalistico e fenologia ---------------------------- */
/*
   La striscia dei mesi e' una riga di dodici caselle: si legge come un
   calendario vero, non come un menu a tendina. Il mese corrente ha un punto
   sotto, quello scelto e' pieno: due segnali diversi per due cose diverse.
*/
.cal-head { max-width: 74ch; margin-bottom: var(--s-6); }
.mesi {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-1);
  border: 1px solid var(--waw-line); border-radius: var(--radius);
  padding: var(--s-1); background: var(--waw-white);
}
.mese {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: var(--s-2) 2px; border-radius: calc(var(--radius) - 4px);
  text-decoration: none; color: var(--waw-slate); font-size: var(--t-xs);
  position: relative; min-height: 46px;
}
.mese:hover { background: var(--waw-paper); color: var(--waw-forest); }
.mese.is-active { background: var(--waw-forest); color: #fff; }
.mese-i { font-weight: 700; font-size: var(--t-sm); }
.mese-n { display: none; }
/* Il mese di oggi resta segnalato anche quando se ne guarda un altro. */
.mese.is-oggi::after {
  content: ""; position: absolute; bottom: 4px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--waw-dawn);
}
.mese.is-active.is-oggi::after { background: var(--waw-gold); }
@media (min-width: 900px) {
  .mese-n { display: block; }
  .mese-i { display: none; }
}
.cal-filtro {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  margin-top: var(--s-4);
}
.cal-filtro label { font-size: var(--t-sm); color: var(--waw-slate); }
.cal-filtro .input { max-width: 260px; }

.specie-cal .specie-cal-foto img,
.specie-cal .specie-cal-foto picture { display: block; width: 100%; height: 170px; object-fit: cover; }
.specie-cal .quota {
  margin: 0 0 var(--s-1); font-size: var(--t-xs); font-weight: 600;
  color: var(--waw-dawn-btn, #B25523); text-transform: uppercase; letter-spacing: .04em;
}
.specie-cal h3 { font-size: var(--t-base); margin: 0; }
.specie-cal .sci { margin: 2px 0 0; font-style: italic; font-size: var(--t-xs); color: var(--waw-slate); }

/* Classifica del mese: numeri allineati, niente decorazioni inutili. */
.classifica { list-style: none; counter-reset: none; margin: 0; padding: 0; }
.classifica li {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) 0; border-bottom: 1px solid var(--waw-line-soft, #EFEDE4);
}
.classifica li:last-child { border-bottom: none; }
.classifica .pos {
  flex: none; width: 26px; text-align: right; font-variant-numeric: tabular-nums;
  color: var(--waw-slate); font-size: var(--t-sm);
}
.classifica .nome { font-weight: 550; }
.classifica .cat {
  font-size: var(--t-xs); color: var(--waw-slate);
  border-left: 3px solid var(--c, var(--waw-forest)); padding-left: var(--s-2);
}
.classifica .n {
  margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600;
  font-size: var(--t-sm);
}

/* Istogramma della fenologia: dodici barre, nessuna libreria. */
.feno-grid { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .feno-grid { grid-template-columns: 1.25fr 1fr; } }
.feno-graf svg { width: 100%; height: auto; display: block; }
.feno-bar { fill: var(--waw-sage, #DCE8DC); }
.feno-bar-ora { fill: var(--waw-forest); }
.feno-m { font-size: 10px; fill: var(--waw-slate); font-family: var(--font-body, sans-serif); }

/* Taccuino personale: schede piccole, la foto fa il lavoro. */
.taccuino { text-decoration: none; display: block; }
.taccuino .taccuino-foto,
.taccuino picture img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* Selettore di lingua: discreto, ma trovabile. */
.lang-switch {
  display: inline-flex; align-items: center; padding: 4px 9px;
  border: 1px solid var(--waw-line); border-radius: var(--radius-pill, 999px);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em;
  color: var(--waw-slate); text-decoration: none; white-space: nowrap;
}
.lang-switch:hover { border-color: var(--waw-moss); color: var(--waw-forest); }
.site-header .lang-switch { margin-right: var(--s-1); }

/* --- Riconoscimento del canto ---------------------------------------- */
/*
   Il riquadro vive dentro WAW ID, che ha fondo scuro. Mentre registra pulsa
   un punto rosso: e' il segnale universale, si capisce senza leggere.
*/
.audio-controlli { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.audio-tempo {
  font-family: var(--font-mono, monospace); font-size: var(--t-sm);
  color: var(--waw-gold); font-variant-numeric: tabular-nums;
}
.audio-barra {
  height: 4px; border-radius: 2px; background: rgba(255,255,255,.14);
  margin-top: var(--s-3); overflow: hidden;
}
.audio-barra span {
  display: block; height: 100%; width: 0; background: var(--waw-gold);
  transition: width .9s linear;
}
.audio-box.sta-registrando { outline: 2px solid var(--waw-dawn); outline-offset: 4px; }
.audio-box.sta-registrando h2::before {
  content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: #E04B4B; margin-right: 8px; animation: pulsa-rec 1.1s ease-in-out infinite;
}
@keyframes pulsa-rec { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) {
  .audio-box.sta-registrando h2::before { animation: none }
  .audio-barra span { transition: none }
}
.audio-link { text-decoration: underline; cursor: pointer; color: var(--waw-gold); }

/* Esiti del riconoscimento */
.canti { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.canto {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border-radius: var(--radius);
  background: rgba(255,255,255,.06);
}
.canto img { border-radius: 6px; object-fit: cover; flex: none; }
.canto-nome { display: flex; flex-direction: column; min-width: 0; }
.canto-nome em { font-size: var(--t-xs); opacity: .75; }
.canto-conf {
  margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--waw-gold);
}

/* --- Scatto da webcam (computer) ------------------------------------- */
.webcam-box {
  border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius);
  overflow: hidden; background: #000;
}
.webcam-box video { display: block; width: 100%; max-height: 60vh; object-fit: contain; }
.webcam-azioni {
  display: flex; gap: var(--s-2); justify-content: center;
  padding: var(--s-3); background: rgba(0,0,0,.5);
}

/* --- Intestazione su schermo stretto --------------------------------- */
/*
   Sotto i 900px la barra ha: marchio, EN, Carrello, Accedi e il menu. Non ci
   stanno, e sbordavano oltre il bordo destro portandosi via il pulsante del
   menu. Le voci secondarie spariscono dalla barra - restano tutte dentro il
   menu a scomparsa, dove c e' spazio per leggerle - e in barra rimane cio'
   che serve davvero: entrare e aprire il menu.
*/
@media (max-width: 899px) {
  .site-header .lang-switch { display: none; }
  .header-actions .btn-quiet[href="/carrello"] { display: none; }
  .header-inner { gap: var(--s-2); flex-wrap: nowrap; }
  .header-actions { gap: var(--s-1); flex: none; }
  .logo-full { height: 38px !important; }
}
/* Sotto i 380px anche "Accedi" starebbe stretto: lo si accorcia invece di
   farlo andare a capo dentro il suo bottone. */
@media (max-width: 379px) {
  .header-actions .btn { padding-inline: var(--s-2); font-size: var(--t-xs); }
}

/* --- Barra delle azioni rapide (solo app installata) ----------------- */
/*
   Fissa in fondo, dove arriva il pollice. Il pulsante centrale e' piu' grande
   e pieno: e' il gesto principale e si deve poter premere senza guardare.
   Il riquadro rispetta la barra di sistema dell iPhone con env(safe-area).
   Nel browser normale resta nascosta: la accende barra-app.js.
*/
/* L attributo hidden deve valere davvero: display:grid qui sotto e' una
   regola d autore e da sola batte il display:none del browser, cosi' la
   barra finiva disegnata anche fuori dall app. */
.barra-app[hidden] { display: none !important; }

.barra-app {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: repeat(5, 1fr);
  align-items: end; gap: 2px;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--waw-forest-dark, #12200F) 96%, transparent);
  border-top: 1px solid rgba(255,255,255,.10);
  backdrop-filter: saturate(140%) blur(8px);
}
.barra-voce, .barra-scatto {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-decoration: none; border-radius: 12px;
  padding: 7px 2px; min-height: 52px;
  color: rgba(255,255,255,.72); font-size: 10.5px; line-height: 1.1;
}
.barra-voce .barra-icona { font-size: 19px; line-height: 1; }
.barra-voce:hover, .barra-voce.is-active { color: #fff; background: rgba(255,255,255,.10); }

/* Il gesto principale: sporge verso l alto e ha il colore pieno. */
.barra-scatto {
  background: var(--waw-dawn-btn, #B25523); color: #fff; font-weight: 600;
  margin-top: -14px; min-height: 62px; border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.barra-scatto .barra-icona { font-size: 24px; }
.barra-scatto:active { transform: translateY(1px); }

/* La barra copre il fondo: il contenuto si alza per non finirci sotto. */
html.con-barra body { padding-bottom: 76px; }
html.con-barra .site-footer { padding-bottom: calc(var(--s-5) + 76px); }

@media (min-width: 900px) {
  /* Su schermo largo l app si usa col mouse: la barra non serve. */
  html.con-barra .barra-app { display: none !important; }
  html.con-barra body { padding-bottom: 0; }
}

/* Nell app installata il banner dei cookie si appoggia SOPRA la barra delle
   azioni, invece di coprirla: due elementi fissi in fondo si nascondono a
   vicenda, e quello che si perde e' sempre il piu' utile. */
html.con-barra .cookie-banner {
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 16px rgba(15,26,20,.24);
}
@media (min-width: 900px) {
  html.con-barra .cookie-banner { bottom: 0; }
}

/* ============================================================
   PERCORSO DEL GUARDIANO DELLA BIODIVERSITA' — area struttura
   Gamification: anello di completamento, livello, scala, obiettivi,
   mascotte guida, tab orizzontali e stepper delle sezioni.
   ============================================================ */
.percorso { background: linear-gradient(135deg, var(--waw-forest) 0%, var(--waw-forest-dark) 100%);
  color: #fff; border-radius: var(--radius-lg); padding: var(--s-6); box-shadow: var(--shadow); }
.percorso a { color: #fff; }
.percorso-top { display: grid; grid-template-columns: auto 1fr; gap: var(--s-6); align-items: center; }
@media (max-width: 720px){ .percorso-top { grid-template-columns: 1fr; text-align: center; justify-items: center; } }

.ring { position: relative; width: 108px; height: 108px; flex: none; }
.ring svg { transform: rotate(-90deg); }
.ring-val { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-val b { font-size: var(--t-2xl); line-height: 1; }
.ring-val span { display: block; font-size: var(--t-xs); opacity: .85; }

.liv-head { display: flex; align-items: center; gap: var(--s-3); }
.liv-emoji { font-size: 2rem; line-height: 1; }
.liv-nome { font-size: var(--t-xl); font-weight: 800; }
.liv-frase { opacity: .92; margin-top: var(--s-1); max-width: 52ch; }
.liv-barra { height: 10px; background: rgba(255,255,255,.22); border-radius: 999px; overflow: hidden; margin-top: var(--s-3); }
.liv-barra > span { display: block; height: 100%; background: var(--waw-gold); border-radius: 999px; }
.liv-manca { font-size: var(--t-sm); margin-top: var(--s-2); opacity: .95; }
.liv-manca b { color: var(--waw-gold); }

.scala { display: flex; align-items: flex-start; gap: 0; margin-top: var(--s-5); }
.scala-nodo { flex: 1; text-align: center; position: relative; font-size: var(--t-xs); }
.scala-nodo::before { content: ""; position: absolute; top: 14px; left: -50%; width: 100%; height: 3px;
  background: rgba(255,255,255,.25); z-index: 0; }
.scala-nodo:first-child::before { display: none; }
.scala-nodo.raggiunto::before { background: var(--waw-gold); }
.scala-dot { position: relative; z-index: 1; width: 30px; height: 30px; margin: 0 auto var(--s-1);
  border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-content: center;
  border: 2px solid rgba(255,255,255,.35); font-size: 1rem; }
.scala-nodo.raggiunto .scala-dot { background: var(--waw-gold); border-color: var(--waw-gold); }
.scala-nodo.attuale .scala-dot { box-shadow: 0 0 0 4px rgba(255,255,255,.30); transform: scale(1.12); }
.scala-nome { font-weight: 700; }
.scala-soglia { opacity: .7; }

.obiettivi { margin-top: var(--s-5); background: rgba(255,255,255,.10); border-radius: var(--radius); padding: var(--s-4); }
.obiettivi h3 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .05em; opacity: .85; margin-bottom: var(--s-2); }
.obiettivo { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid rgba(255,255,255,.14); }
.obiettivo:first-of-type { border-top: 0; }
.obiettivo .ob-ico { color: var(--waw-gold); font-weight: 800; }
.obiettivo .ob-label { flex: 1; }

.mascotte { display: flex; gap: var(--s-4); align-items: flex-start; background: var(--waw-sand);
  border: 1px solid var(--waw-line); border-radius: var(--radius-lg); padding: var(--s-4); margin-top: var(--s-5); }
.mascotte-img { width: 64px; height: 64px; flex: none; border-radius: 50%; object-fit: cover; background: var(--waw-mist); }
.mascotte-bolla { position: relative; background: #fff; border: 1px solid var(--waw-line);
  border-radius: var(--radius); padding: var(--s-3) var(--s-4); color: var(--waw-ink); }
.mascotte-bolla::before { content: ""; position: absolute; left: -8px; top: 18px;
  border: 8px solid transparent; border-right-color: #fff; }
.mascotte-nome { font-weight: 800; color: var(--waw-forest); font-size: var(--t-sm); }

.struttura-tabs { display: flex; flex-wrap: wrap; gap: var(--s-1); border-bottom: 2px solid var(--waw-line); margin: var(--s-5) 0 var(--s-6); }
.struttura-tabs a { padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--waw-slate); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.struttura-tabs a:hover { color: var(--waw-forest); }
.struttura-tabs a.attivo { color: var(--waw-forest); border-bottom-color: var(--waw-forest); }

.sez-stepper { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0 var(--s-6); }
.sez-step { flex: 1 1 150px; display: block; border: 1px solid var(--waw-line); border-radius: var(--radius);
  padding: var(--s-3); background: #fff; }
.sez-step .sez-n { font-size: var(--t-xs); font-weight: 800; color: var(--waw-grey); }
.sez-step .sez-t { font-weight: 700; color: var(--waw-ink); font-size: var(--t-sm); margin-top: 2px; }
.sez-step .sez-s { font-size: var(--t-xs); margin-top: var(--s-1); color: var(--waw-slate); }
.sez-step.fatto { border-color: var(--waw-forest-soft); background: #f2f7f3; }
.sez-step.fatto .sez-n { color: var(--waw-forest); }
.sez-step.corrente { box-shadow: 0 0 0 2px var(--waw-forest); }

/* Barra di anteprima: il proprietario vede la propria scheda non pubblica. */
.anteprima-barra { position: sticky; top: 0; z-index: 50; background: var(--waw-gold);
  color: var(--waw-ink); text-align: center; padding: var(--s-2) var(--s-4);
  font-size: var(--t-sm); box-shadow: var(--shadow-sm); }
.anteprima-barra a { color: var(--waw-forest-dark); font-weight: 700; }

.percorso-azioni { display: flex; justify-content: flex-end; margin-bottom: var(--s-3); }
.percorso-azioni .btn-light { background: rgba(255,255,255,.92); }