/* ==========================================================================
   Little Stories by Zitoli — alessiazitoli.it
   Impianto ricalcato su headspace.com. Le misure vengono da getComputedStyle,
   non a occhio: contenitore 1344, griglia 1016, colonna stretta 672, raggio
   dominante 32, pillole alte 48 con raggio 32, titoli 32/500, schede 18/700,
   corpo 16/400 con interlinea 20.8. La specifica sta in
   materiali/headspace/LAYOUT.md.
   Copiato l'impianto, non i contenuti: testi, foto e tavolozza sono di Alessia.
   Carattere Manrope; la radice sale a 17 px (106,25%), quindi la scala qui
   sopra va letta moltiplicata per 1,0625.
   ========================================================================== */

/* ---------- 1. Carattere ---------- */
/* Un solo grottesco, come l'originale: li' non c'e' un serif in tutta la
   pagina. Manrope, variabile, sottoinsieme latino, servito da qui.
   Non ha il corsivo: <em> resta obliquo sintetico, che e' il compromesso
   giusto rispetto a caricare una seconda famiglia per due parole. */

@font-face {
  font-family: 'Manrope';
  src: url('/assets/font/manrope-normal.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Gettoni ---------- */

:root {
  /* Il fondo è chiaro e il colore sta nei PANNELLI, come nell'originale.
     Cinque colori dati dal titolare, più tre tinte scure ricavate: il verde
     dato (#6f8469) regge 3,64 contro l'inchiostro e 4,05 contro il bianco,
     quindi non può portare testo corrente. Fa il decoro; il testo sta sulle
     tinte che passano il 4,5. */
  --carta: #ffffff;
  --carta-calda: #fbf7f1;
  --bianco: #ffffff;

  --inchiostro: #232a20;          /* 12,81 su crema · 5,83 su salvia */
  --inchiostro-tenue: #576053;    /* 6,56 su carta · 5,69 su crema */
  --inchiostro-fioco: #656c61;   /* 5,42 su carta · 4,71 su crema */

  /* i cinque dati */
  --crema: #f6eee1;
  --sabbia: #d9cebf;
  --rosa: #f1d6d0;
  --salvia: #86ac8d;
  --verde: #6f8469;               /* solo decoro: pallini, striscia, filetti */

  /* i tre ricavati, per il contrasto */
  --verde-velo: #e9efe9;
  --muschio: #4f6349;             /* azioni e collegamenti: 6,54 sul bianco */
  --muschio-cupo: #3e4d39;
  --bosco: #3c4a38;               /* pannello scuro: 9,42 col bianco */

  --filo: #d9cebf;
  --filo-tenue: #eae3d8;

  /* raggi misurati */
  --r-32: 32px;
  --r-24: 24px;
  --r-16: 16px;
  --r-pillola: 32px;

  /* contenitori misurati */
  --esterno: 1344px;
  --griglia: 1016px;
  --stretto: 672px;
  --medio: 792px;

  --gutter: clamp(20px, 4vw, 48px);

  /* ritmo verticale misurato: 64 sopra, da 96 a 128 sotto */
  --sopra: clamp(40px, 5vw, 64px);
  --sotto: clamp(56px, 8vw, 112px);

  --ombra: 0 2px 10px rgba(35, 42, 32, .05);
  --ombra-alta: 0 8px 34px rgba(35, 42, 32, .10);
}

/* ---------- 3. Base ---------- */

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

/* La scala misurata sull'originale parte da 16. Qui la radice sale a 17
   (106,25%) su richiesta del titolare: tutto quello che è in rem cresce
   dell'8%, le geometrie in px (pillole alte 48, raggio 32) restano quelle. */
html { font-size: 106.25%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, video { max-width: 100%; height: auto; display: block; }

/* Scala misurata: 32/500 per i titoli di sezione, 18/700 per le schede.
   Qui diventa fluida, ma i valori a 1440 sono quelli. */
h1, h2, h3, h4 {
  font-family: inherit;
  color: var(--inchiostro);
  margin: 0 0 .5em;
  letter-spacing: -.018em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); font-weight: 500; line-height: 1.1; }
h2 { font-size: clamp(1.65rem, 1.25rem + 1.7vw, 2.5rem); font-weight: 500; line-height: 1.2; }
h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.2; letter-spacing: -.008em; }
h4 { font-size: 1rem; font-weight: 700; line-height: 1.25; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--muschio); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--muschio-cupo); }

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

.salta-al-contenuto {
  position: absolute; left: -9999px;
  background: var(--inchiostro); color: #fff;
  padding: 12px 20px; border-radius: 0 0 var(--r-16) 0; z-index: 200;
}
.salta-al-contenuto:focus { left: 0; top: 0; }

.wrap { width: min(100% - var(--gutter) * 2, var(--esterno)); margin-inline: auto; }
.wrap-griglia { width: min(100% - var(--gutter) * 2, var(--griglia)); margin-inline: auto; }
.wrap-stretto { width: min(100% - var(--gutter) * 2, var(--stretto)); margin-inline: auto; }
.wrap-medio { width: min(100% - var(--gutter) * 2, var(--medio)); margin-inline: auto; }

.solo-lettori {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 4. Etichette e finestre ---------- */

.occhiello {
  font-size: .75rem;          /* 12/500, la misura delle etichette piccole */
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--inchiostro-fioco);
  margin: 0 0 1em;
  display: block;
}

/* La finestra temporale: resta il segnale del sito, ora in forma di pillola
   piccola, coerente con il resto dell'impianto. */
.finestra {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1;
  padding: 9px 14px;
  border-radius: var(--r-pillola);
  background: var(--verde-velo);
  color: #2f3b2b;
  white-space: nowrap;
}
.finestra::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--verde); flex: none;
}

/* ---------- 5. Pillole ---------- */
/* Misurate: alte 48, raggio 32, testo da 16 a 18 peso 700. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--r-pillola);
  border: 2px solid transparent;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primario { background: var(--muschio); color: #fff; }
.btn-primario:hover { background: var(--muschio-cupo); color: #fff; }

.btn-secondario { background: transparent; color: var(--inchiostro); border-color: var(--inchiostro); }
.btn-secondario:hover { background: var(--inchiostro); color: #fff; }

.btn-chiaro { background: #fff; color: var(--inchiostro); }
.btn-chiaro:hover { background: var(--crema); color: var(--inchiostro); }

/* la pillola gigante della chiusura */
.btn-gigante { font-size: 1.375rem; min-height: 68px; padding: 16px 44px; }

/* sui pannelli scuri i pulsanti si invertono */
.pannello-scuro .btn-primario { background: #fff; color: var(--inchiostro); }
.pannello-scuro .btn-primario:hover { background: var(--crema); }
.pannello-scuro .btn-secondario { color: #fff; border-color: rgba(255,255,255,.6); }
.pannello-scuro .btn-secondario:hover { background: #fff; color: var(--inchiostro); }

:root {
  --icona-wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91C21.96 6.45 17.5 2 12.04 2zm0 18.15h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.38c0-4.54 3.7-8.23 8.25-8.23a8.2 8.2 0 0 1 8.23 8.24c0 4.54-3.69 8.23-8.23 8.23zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.78.97-.14.16-.29.18-.54.06-.25-.13-1.05-.39-1.99-1.23-.74-.66-1.24-1.47-1.38-1.72-.15-.25-.02-.38.11-.51.11-.11.25-.29.37-.43.12-.15.16-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.4-.42-.56-.43h-.47c-.16 0-.43.06-.65.31-.23.25-.86.84-.86 2.05s.88 2.38 1 2.54c.13.17 1.74 2.65 4.21 3.72.59.25 1.05.4 1.4.52.59.19 1.13.16 1.55.1.47-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.15-1.18-.06-.11-.23-.17-.48-.29z'/%3E%3C/svg%3E");
}
.btn-wa::before {
  content: '';
  width: 1.15em; height: 1.15em; flex: none;
  background: currentColor;
  -webkit-mask: var(--icona-wa) center / contain no-repeat;
  mask: var(--icona-wa) center / contain no-repeat;
}

/* ---------- 6. Striscia in cima ---------- */
/* Nell'originale è una riga sottile con un solo link centrato. Qui porta la
   finestra del newborn, che è l'informazione che fa scrivere le persone. */

.striscia-alta {
  /* sul verde dato il testo a 14,9/700 sta a 3,40 e non passa: qui serve una
     tinta che regga il corpo piccolo, quindi salvia. */
  background: var(--salvia);
  color: #232a20;
  text-align: center;
  font-size: .875rem;
  font-weight: 500;
  padding: 9px var(--gutter);
}
.striscia-alta a { color: inherit; font-weight: 700; }

/* ---------- 7. Barra ---------- */

.barra {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.barra.staccata { border-bottom-color: var(--filo); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .barra { background: #fff; }
}

.barra-dentro { display: flex; align-items: center; gap: clamp(10px, 2vw, 26px); min-height: 72px; }

.marchio { display: inline-flex; flex-direction: column; gap: 1px; text-decoration: none; color: var(--inchiostro); flex: none; margin-right: auto; }
.marchio b { font-size: 1.25rem; font-weight: 700; letter-spacing: -.025em; line-height: 1; }
.marchio span { font-size: .625rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--inchiostro-fioco); }

.menu { display: none; }
.menu ul { display: flex; gap: clamp(12px, 1.7vw, 24px); list-style: none; margin: 0; padding: 0; }
.menu a { color: var(--inchiostro); text-decoration: none; font-size: .9375rem; font-weight: 500; white-space: nowrap; }
.menu a:hover { color: var(--muschio); }
.menu a[aria-current='page'] { font-weight: 700; }

/* Voce con sottomenu. Il padre e' un <button> perche' «Eventi» non ha una
   pagina: eredita l'aspetto delle altre voci, piu' una freccina. */
.menu .ha-sotto { position: relative; }
.menu-padre {
  display: inline-flex; align-items: center; gap: .4em;
  background: transparent; border: 0; padding: 0; margin: 0;
  font: inherit; font-size: .9375rem; font-weight: 500;
  color: var(--inchiostro); white-space: nowrap; cursor: pointer;
}
.menu-padre:hover { color: var(--muschio); }
.menu-padre[data-attivo] { font-weight: 700; }
.menu-padre::after {
  content: ""; flex: none; width: .38em; height: .38em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-.12em) rotate(45deg);
  transition: transform .18s ease;
}
.menu-padre[aria-expanded='true']::after { transform: translateY(.06em) rotate(-135deg); }

.barra .btn { min-height: 44px; padding: 10px 20px; font-size: .9375rem; }
.barra-cta { display: none; }

.apri-menu {
  display: inline-flex; align-items: center; gap: .5em;
  background: transparent; border: 2px solid var(--inchiostro);
  border-radius: var(--r-pillola); padding: 10px 18px;
  font: inherit; font-size: .9375rem; font-weight: 700; color: var(--inchiostro); cursor: pointer;
}

/* Scelta della lingua: la stessa pastiglia di divainfissi.it, coi gettoni di
   questo sito. Le due lingue restano sempre in vista: sono due parole di due
   lettere, una tendina costerebbe un tocco in piu' per niente. Nel markup sta
   subito dopo il marchio, che col suo margin-right:auto la spinge a destra:
   sul telefono finisce accanto a «Menu», sullo schermo largo prima delle voci.
   Il codice a due lettere si legge anche senza sapere la lingua della pagina,
   il nome per esteso resta allo screen reader (.ai-lettori). */
.selettore-lingua {
  flex: none; display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: var(--r-pillola); background: var(--verde-velo);
}
.selettore-lingua-i {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; min-height: 30px; padding: 0 7px;
  border-radius: var(--r-pillola);
  font-size: .75rem; font-weight: 700; letter-spacing: .05em; line-height: 1;
  color: var(--inchiostro-tenue); text-decoration: none;
  transition: color .16s ease, background-color .16s ease;
}
/* La pastiglia si vede piccola ma il dito ne trova una alta 44px: il bersaglio
   visibile e quello toccabile non devono per forza coincidere. */
.selettore-lingua-i::after {
  content: ""; position: absolute; left: -3px; right: -3px;
  top: 50%; height: 44px; transform: translateY(-50%);
}
.selettore-lingua-i:hover { color: var(--inchiostro); }
.selettore-lingua-i.is-on {
  background: #fff; color: var(--inchiostro);
  box-shadow: 0 1px 2px rgba(35, 42, 32, .16);
}
.selettore-lingua-i.is-on::after { content: none; }

/* nel piede, sopra la riga finale: serve anche a Google, che ci trova i
   collegamenti all'altra lingua anche senza leggere gli hreflang.
   ⚠ .piede a e .piede a:hover pesano piu' della sola classe: senza queste
   righe le pastiglie prenderebbero il colore e la sottolineatura dei link. */
.piede .selettore-lingua { margin-bottom: 22px; }
.piede .selettore-lingua-i { color: var(--inchiostro-tenue); text-decoration: none; }
.piede .selettore-lingua-i:hover,
.piede .selettore-lingua-i.is-on { color: var(--inchiostro); text-decoration: none; }

/* ⚠ La barra larga parte da 1220px, non piu' da 1040 (13 set 2026). Il
   selettore di lingua le toglie 76px: fra 1040 e 1219 «Richiedi informazioni»
   andava a capo (alto 62 invece di 44) e a 1040 la pagina sforava di 18px.
   Misurato su tutte le pagine, voce attiva in grassetto compresa: in italiano
   la riga regge da 1220, in inglese da 1180. Sul sito vivo senza selettore il
   bottone andava gia' a capo fino a 1060. */
@media (min-width: 1220px) {
  .menu { display: block; }
  .barra-cta { display: inline-flex; }
  .apri-menu { display: none; }
}

/* Il pannello del sottomenu.
   ⚠ Fondo PIENO, e nessun backdrop-filter qui: .barra ne ha gia' uno, e due
   filtri annidati creano un backdrop root che spegne il fondo del figlio. Con
   un bianco traslucido le foto della pagina si leggerebbero attraverso le voci
   (costato sul menu di lucianozitoli il 29 ago 2026). */
.menu .ha-sotto .sottomenu {
  position: absolute; top: calc(100% + 15px); left: 50%; transform: translateX(-50%);
  display: block; min-width: 200px; margin: 0; padding: 8px; gap: 0;
  background: #fff;
  border: 1px solid var(--filo-tenue); border-radius: var(--r-16);
  box-shadow: var(--ombra-alta);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, visibility .16s ease;
}
/* ponte invisibile sui 15px fra il pulsante e il pannello: senza, il mouse
   che scende attraversa il vuoto e il pannello si chiude a meta' strada. */
.menu .ha-sotto .sottomenu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 15px;
}
.menu .ha-sotto:hover .sottomenu,
.menu .ha-sotto:focus-within .sottomenu,
/* il tocco non produce :hover: apre il JS alzando aria-expanded */
.menu-padre[aria-expanded='true'] + .sottomenu {
  opacity: 1; visibility: visible; pointer-events: auto;
}
.menu .ha-sotto .sottomenu li + li { margin-top: 2px; }
.menu .ha-sotto .sottomenu a {
  display: block; padding: 9px 12px; border-radius: 10px;
  font-size: .9375rem; font-weight: 500; white-space: nowrap;
}
.menu .ha-sotto .sottomenu a:hover { background: var(--carta-calda); color: var(--muschio); }
.menu .ha-sotto .sottomenu a[aria-current='page'] { background: var(--carta-calda); font-weight: 700; }

.tendina {
  border: 0; padding: 0; width: min(92vw, 420px); max-height: 88vh;
  margin: 0 0 0 auto; border-radius: var(--r-32) 0 0 var(--r-32);
  background: #fff; color: var(--inchiostro); box-shadow: var(--ombra-alta);
}
.tendina::backdrop { background: rgba(35, 42, 32, .45); }
.tendina-dentro { padding: 26px 26px 32px; }
.tendina-testa { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.tendina ul { list-style: none; margin: 0 0 22px; padding: 0; }
.tendina li + li { border-top: 1px solid var(--filo-tenue); }
.tendina li a { display: block; padding: 13px 0; color: var(--inchiostro); text-decoration: none; font-size: 1.0625rem; font-weight: 500; }
.chiudi { background: transparent; border: 0; cursor: pointer; font-size: 1.7rem; line-height: 1; color: var(--inchiostro-tenue); padding: 4px 8px; }

/* Gruppo nel pannello del telefono: sempre aperto, con l'etichetta sopra.
   In verticale lo spazio c'e', quindi non serve niente da premere. */
.tendina-gruppo { padding-top: 14px; }
.tendina-etichetta {
  display: block; padding-bottom: 4px;
  font-size: .625rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--inchiostro-fioco);
}
.tendina-gruppo > ul { margin: 0; }
.tendina-gruppo > ul > li:first-child { border-top: 0; }
.tendina-gruppo > ul > li > a { padding-left: 14px; }

/* ---------- 8. Sezioni: tutto centrato ---------- */

.sez { padding-top: var(--sopra); padding-bottom: var(--sotto); }
/* Le sezioni con un'ancora nel menu: la barra e' sticky e alta 72,
   senza questo il titolo atterra sotto la barra e sembra saltato. */
.sez[id] { scroll-margin-top: 88px; }
.sez-fitta { padding-top: var(--sopra); padding-bottom: clamp(28px, 4vw, 40px); }

/* La testa di sezione è centrata, come nell'originale, con la riga guida
   a 20/30 sotto il titolo. */
.testa-sez { text-align: center; max-width: var(--medio); margin: 0 auto clamp(28px, 4vw, 48px); }
.testa-sez p { font-size: 1.25rem; line-height: 1.5; color: var(--inchiostro-tenue); margin-bottom: 0; }

.prosa { max-width: var(--stretto); margin-inline: auto; }
.prosa p { color: var(--inchiostro-tenue); }
.prosa > p:first-of-type { color: var(--inchiostro); }

/* la prima risposta sotto una domanda: è quella che Google estrae */
.risposta { font-size: 1.25rem; line-height: 1.5; font-weight: 500; color: var(--inchiostro); margin-bottom: 1.1em; }

/* ---------- 9. Copertina ---------- */
/* H1 centrato, riga di prove, poi DUE SCHEDE AFFIANCATE 70/30: è
   l'asimmetria misurata (914 + 398 dentro 1332, gap 20). */

.copertina { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(40px, 6vw, 80px); }
.copertina-testa { text-align: center; max-width: var(--medio); margin: 0 auto clamp(20px, 3vw, 32px); }
.copertina h1 { margin-bottom: .35em; }
.copertina-sottotitolo { font-size: 1.25rem; line-height: 1.5; color: var(--inchiostro-tenue); margin-bottom: 1em; }
.copertina-testo { font-size: 1.0625rem; line-height: 1.55; color: var(--inchiostro-tenue); max-width: 60ch; margin-inline: auto; }
.copertina .finestra { margin-bottom: 1.1em; }

.bottoniera { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.5em; }
.copertina .bottoniera { justify-content: center; }

/* la riga di prove sotto il titolo */
.prove {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px clamp(16px, 3vw, 40px);
  margin: clamp(20px, 3vw, 30px) auto 0;
  padding: 0; list-style: none;
  font-size: .875rem; font-weight: 500; color: var(--inchiostro-tenue);
}
.prove li { display: inline-flex; align-items: center; gap: .5em; }
.prove li::before {
  content: ''; width: 16px; height: 16px; border-radius: 50%; flex: none;
  background: var(--verde);
}

/* le due schede della copertina */
.copertina-schede { display: grid; gap: 20px; margin-top: clamp(28px, 4vw, 44px); }
@media (min-width: 900px) {
  .copertina-schede { grid-template-columns: 2.3fr 1fr; }   /* 914 / 398 misurati */
}

.scheda-copertina {
  border-radius: var(--r-32);
  overflow: hidden;
  background: var(--crema);
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.scheda-copertina:hover { transform: translateY(-3px); box-shadow: var(--ombra-alta); color: inherit; }
@media (prefers-reduced-motion: reduce) { .scheda-copertina:hover { transform: none; } }
.scheda-copertina.tinta-b { background: var(--rosa); }
.scheda-copertina-testo {
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px) 0; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.scheda-copertina-testo .finestra { margin-bottom: 1.1em; }
.scheda-copertina-testo h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); margin-bottom: .5em; }
.scheda-copertina-testo .btn { margin-bottom: clamp(20px, 3vw, 30px); }
.scheda-copertina-foto { margin-top: auto; }
.scheda-copertina-foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.scheda-copertina.alta .scheda-copertina-foto img { aspect-ratio: 4 / 5; }

/* Sulle pagine interne la copertina ha una scheda sola: deve prendere tutta la
   riga, se no resta larga il 70% con mezzo schermo bianco accanto. E a tutta
   larghezza il 16/10 diventerebbe alto 840 px, quindi il taglio si allarga. */
@media (min-width: 900px) {
  .copertina-schede-sola { grid-template-columns: 1fr; }
}
.scheda-copertina-sola .scheda-copertina-foto img { aspect-ratio: 12 / 5; }
@media (max-width: 899px) {
  .scheda-copertina-sola .scheda-copertina-foto img { aspect-ratio: 3 / 2; }
}

/* ---------- 10. Schede-riga: la scelta rapida ---------- */
/* Nell'originale è una griglia 3×2 di rettangoli bordati, etichetta a sinistra
   e freccia a destra. */

.righe-scelta { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .righe-scelta { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .righe-scelta { grid-template-columns: repeat(3, 1fr); } }

.riga-scelta {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  border: 1.5px solid var(--filo);
  border-radius: var(--r-16);
  background: #fff;
  text-decoration: none; color: inherit;
  transition: border-color .18s ease, background-color .18s ease;
}
.riga-scelta:hover { border-color: var(--inchiostro); background: var(--carta-calda); color: inherit; }
.riga-scelta-testo { flex: 1; min-width: 0; }
.riga-scelta b { display: block; font-size: 1rem; font-weight: 700; line-height: 1.25; }
.riga-scelta span { display: block; font-size: .8125rem; color: var(--inchiostro-fioco); margin-top: 3px; }
.riga-scelta-pallino { width: 34px; height: 34px; border-radius: 50%; flex: none; overflow: hidden; background: var(--verde-velo); }
.riga-scelta-pallino img { width: 100%; height: 100%; object-fit: cover; }
.riga-scelta::after { content: '›'; font-size: 1.5rem; line-height: 1; color: var(--inchiostro-fioco); flex: none; }

/* ---------- 11. Pannello pieno ---------- */
/* Il blocco colorato a tutta larghezza con raggio 32: è il contenitore
   caratteristico dell'originale. */

.pannello {
  border-radius: var(--r-32);
  padding: clamp(28px, 4.5vw, 64px);
  background: var(--salvia);
}
.pannello-sabbia { background: var(--sabbia); }
.pannello-crema { background: var(--crema); }
.pannello-salvia { background: var(--salvia); }
.pannello-rosa { background: var(--rosa); }
.pannello-scuro { background: var(--bosco); color: #eef1ea; }
.pannello-scuro h2, .pannello-scuro h3 { color: #fff; }
.pannello-scuro p { color: rgba(255,255,255,.82); }
.pannello-scuro a { color: #c3d9c6; }

.pannello-split { display: grid; gap: clamp(24px, 3.5vw, 48px); align-items: center; }
@media (min-width: 880px) { .pannello-split { grid-template-columns: 1fr 1fr; } }
.pannello-split .split-foto { border-radius: var(--r-24); overflow: hidden; }
.pannello-split .split-foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 12. La linea del tempo, dentro il pannello ---------- */

.linea-scorri {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 8px;
  margin-inline: calc(clamp(28px, 4.5vw, 64px) * -1);
  padding-inline: clamp(28px, 4.5vw, 64px);
}
.linea-scorri::-webkit-scrollbar { height: 6px; }
.linea-scorri::-webkit-scrollbar-thumb { background: rgba(35,42,32,.18); border-radius: 3px; }

.linea-binario {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  position: relative; min-width: 100%; padding-top: 44px;
}
.linea-binario::before {
  content: ''; position: absolute; top: 31px; left: 0; right: 0; height: 2px;
  background: rgba(35, 42, 32, .16);
}
.linea-binario::after {
  content: ''; position: absolute; top: 31px; left: 0; right: 0; height: 2px;
  background: var(--inchiostro);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.22, .8, .3, 1);
  will-change: transform;
}
.linea.accesa .linea-binario::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .linea-binario::after { transition: none; transform: scaleX(1); }
}

.tappa { position: relative; padding: 0 20px 0 0; scroll-snap-align: start; }
.tappa::before {
  content: ''; position: absolute; top: -19px; left: 0;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--verde); border: 2.5px solid rgba(35,42,32,.18);
  transition: border-color .4s ease;
}
.linea.accesa .tappa::before { border-color: var(--inchiostro); }
.tappa-quando { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--inchiostro-tenue); margin-bottom: .6em; }
.tappa h3 { font-size: 1.0625rem; margin-bottom: .35em; }
.tappa p { font-size: .9375rem; line-height: 1.45; color: var(--inchiostro-tenue); margin: 0; }
.tappa h3 a { color: var(--inchiostro); text-decoration: none; }
.tappa h3 a:hover { text-decoration: underline; }
.linea-nota { margin-top: 24px; font-size: .875rem; color: var(--inchiostro-tenue); }

/* ---------- 13. Schede in griglia ---------- */
/* Misurate: 3 o 4 colonne dentro 1016, gap 40 di riga e 16 di colonna. */

.schede { display: grid; gap: 40px 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.scheda {
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: var(--r-24);
  overflow: hidden;
  text-decoration: none; color: inherit;
  border: 1.5px solid var(--filo-tenue);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.scheda:hover { transform: translateY(-4px); box-shadow: var(--ombra-alta); border-color: var(--filo); color: inherit; }
@media (prefers-reduced-motion: reduce) { .scheda:hover { transform: none; } }
.scheda-foto { aspect-ratio: 4 / 3; background: var(--filo-tenue); overflow: hidden; }
.scheda-foto img { width: 100%; height: 100%; object-fit: cover; }
.scheda-corpo { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.scheda-corpo h3 { margin: 0; }
.scheda-corpo p { color: var(--inchiostro-tenue); font-size: .9375rem; margin: 0; flex: 1; }
.scheda .finestra { align-self: flex-start; }
.scheda-vai { font-weight: 700; font-size: .9375rem; color: var(--muschio); display: inline-flex; align-items: center; gap: .35em; }
.scheda-vai::after { content: '→'; transition: transform .2s ease; }
.scheda:hover .scheda-vai::after { transform: translateX(3px); }

.scheda-senza-foto { background: var(--crema); }
.scheda-senza-foto::before {
  content: ''; display: block; aspect-ratio: 4 / 3;
  background:
    radial-gradient(circle at 32% 34%, rgba(134, 172, 141, .4), transparent 56%),
    radial-gradient(circle at 72% 68%, rgba(241, 214, 208, .32), transparent 58%),
    var(--rosa);
}

/* ---------- 14. Carosello orizzontale ---------- */
/* Nell'originale le schede della libreria scorrono di lato e sbordano. */

.carosello { position: relative; }
.carosello-pista {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 300px);
  gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  /* ⚠ lo snap allinea al bordo dello scrollport, non al padding: senza
     scroll-padding la prima scheda parte sotto il bordo e resta tagliata. */
  scroll-padding-inline: var(--gutter);
}
.carosello-pista > * { scroll-snap-align: start; }
.carosello-pista::-webkit-scrollbar { height: 6px; }
.carosello-pista::-webkit-scrollbar-thumb { background: var(--filo); border-radius: 3px; }
.carosello-coda { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 18px; }

.scheda-alta {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(360px, 34vw, 430px); border-radius: var(--r-24); overflow: hidden;
  position: relative; text-decoration: none; color: #fff;
  background: var(--bosco);
}
.scheda-alta > picture { position: absolute; inset: 0; }
.scheda-alta img { width: 100%; height: 100%; object-fit: cover; }
.scheda-alta::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18,24,16,.82) 0%, rgba(18,24,16,.28) 45%, rgba(18,24,16,0) 72%);
}
.scheda-alta-testo { position: relative; z-index: 1; padding: 20px; }
.scheda-alta-testo h3 { color: #fff; margin-bottom: .3em; }
.scheda-alta-testo p { color: rgba(255,255,255,.86); font-size: .875rem; margin: 0; }
.scheda-alta:hover { color: #fff; }
.scheda-alta:hover img { transform: scale(1.03); transition: transform .4s ease; }

/* ---------- 15. Punti ---------- */

.punti { display: grid; gap: 40px 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.punto { background: var(--crema); border-radius: var(--r-24); padding: 26px 24px 28px; }
.punto h3 { margin-bottom: .5em; }
.punto p { color: var(--inchiostro-tenue); margin: 0; font-size: .9375rem; }
.pannello-scuro .punto { background: rgba(255,255,255,.08); }
.pannello-scuro .punto p { color: rgba(255,255,255,.8); }

/* ---------- 16. Striscia scorrevole ---------- */
/* L'originale ne infila una alta 134 px fra due blocchi alti: serve da respiro. */

.marquee {
  /* sul verde dato l'inchiostro sta a 3,64: passa solo come «testo grande» e
     legge male. Sulla sabbia sta a 9,51 e la striscia resta un respiro. */
  background: var(--sabbia);
  overflow: hidden;
  padding: 22px 0;
  white-space: nowrap;
}
.marquee-pista { display: inline-flex; gap: 40px; animation: scorri 34s linear infinite; }
.marquee-pista span { font-size: 1.25rem; font-weight: 700; color: #26301f; display: inline-flex; align-items: center; gap: 40px; }
.marquee-pista span::after { content: '•'; color: var(--verde); opacity: .9; }
@keyframes scorri { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-pista { animation: none; } }

/* ---------- 17. Pannello fotografico con la riga di dati ---------- */

.pannello-foto {
  position: relative; border-radius: var(--r-32); overflow: hidden;
  min-height: clamp(400px, 46vw, 540px);
  display: flex; flex-direction: column; justify-content: center;
  text-align: center; padding: clamp(32px, 5vw, 64px);
  color: #fff;
}
/* ⚠ Il selettore deve passare da picture: l'immagine non e' figlia diretta
   del pannello, e con `> img` la foto restava nel flusso e faceva il pannello
   alto 1496 px invece di 540.
   (Scritto senza il tag fra parentesi angolari di proposito: il controllo di
   design lo leggeva come immagine rotta, e l'ignore andava rifatto a ogni
   riga aggiunta piu' su.) */
.pannello-foto > picture { position: absolute; inset: 0; }
.pannello-foto > picture img { width: 100%; height: 100%; object-fit: cover; }
/* Il velo va calcolato sul punto piu' chiaro della foto: a .48 il bianco
   scendeva sotto il 4,5 sulle zone luminose. A .58 regge ovunque. */
.pannello-foto::after { content: ''; position: absolute; inset: 0; background: rgba(20, 26, 18, .58); }
.pannello-foto-dentro { position: relative; z-index: 1; }
.pannello-foto h2 { color: #fff; max-width: 18ch; margin-inline: auto; }
.pannello-foto p { color: rgba(255,255,255,.88); font-size: 1.125rem; max-width: 52ch; margin-inline: auto; }
.pannello-foto .bottoniera { justify-content: center; }

/* la riga di 4 dati: qui porta le finestre, non i numeri di scarico */
.dati {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 28px 20px; margin-top: clamp(28px, 4vw, 44px);
  padding-top: clamp(24px, 3vw, 34px); border-top: 1px solid rgba(255,255,255,.25);
  list-style: none;
}
.dati b { display: block; font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem); font-weight: 700; color: #fff; line-height: 1.15; }
.dati span { display: block; font-size: .8125rem; color: rgba(255,255,255,.76); margin-top: 5px; }

/* ---------- 18. Galleria ---------- */

.griglia-foto { columns: 3 250px; column-gap: 16px; }
.griglia-foto figure { margin: 0 0 16px; break-inside: avoid; border-radius: var(--r-16); overflow: hidden; background: var(--filo-tenue); }
.griglia-foto img { width: 100%; display: block; }
/* il display del foglio scavalca lo stile del browser per [hidden]: senza
   questa riga le foto restano invisibili ma tengono il posto */
.griglia-foto figure[hidden] { display: none; }
.mostra-altre { margin-top: 24px; display: flex; justify-content: center; }
@media (max-width: 620px) { .griglia-foto { columns: 1; } }

.galleria-vuota {
  border: 1.5px dashed var(--filo); border-radius: var(--r-32);
  padding: clamp(30px, 5vw, 54px); text-align: center;
  color: var(--inchiostro-tenue); background: var(--carta-calda);
}

/* ---------- 19. Tabella ---------- */

.tabella-avvolge { overflow-x: auto; border-radius: var(--r-24); border: 1.5px solid var(--filo); background: #fff; }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .9375rem; }
th, td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--filo-tenue); vertical-align: top; }
thead th { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--inchiostro-fioco); background: var(--crema); }
tbody tr:last-child td { border-bottom: 0; }
tbody th { font-weight: 700; font-size: .9375rem; }

/* ---------- 20. Domande ---------- */
/* Righe con il + a destra e divisori sottili, come l'originale. */

.faq { max-width: var(--medio); margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--filo); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 22px 48px 22px 0; position: relative;
  font-weight: 700; font-size: 1.0625rem; color: var(--inchiostro);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%); font-size: 1.5rem; font-weight: 400;
  color: var(--inchiostro-tenue); line-height: 1; transition: transform .2s ease;
}
.faq details[open] summary::after { content: '−'; }
.faq summary:hover { color: var(--muschio); }
.faq-risposta { padding: 0 48px 24px 0; color: var(--inchiostro-tenue); }
.faq-risposta p:first-child { margin-top: 0; }

/* ---------- 21. Chiusura col bordo curvo ---------- */
/* L'originale chiude con un blocco pieno il cui bordo superiore è curvo, e
   dentro una sola pillola gigante. */

.chiusura {
  background: var(--salvia);
  text-align: center;
  padding: clamp(56px, 9vw, 120px) var(--gutter) clamp(56px, 9vw, 120px);
  position: relative;
  border-radius: 50% 50% 0 0 / 90px 90px 0 0;
  margin-top: clamp(40px, 6vw, 80px);
}
.chiusura h2 { max-width: 20ch; margin-inline: auto; color: var(--inchiostro); }
.chiusura p { color: #2b3427; max-width: 52ch; margin-inline: auto; font-size: 1.125rem; }
.chiusura .bottoniera { justify-content: center; margin-top: 2em; }
.chiusura .btn-primario { background: var(--inchiostro); color: #fff; }
.chiusura .btn-primario:hover { background: #000; }
.chiusura .btn-secondario { border-color: var(--inchiostro); color: var(--inchiostro); }
.chiusura .btn-secondario:hover { background: var(--inchiostro); color: var(--salvia); }

/* ---------- 22. Modulo ---------- */

.modulo { background: #fff; border: 1.5px solid var(--filo); border-radius: var(--r-32); padding: clamp(24px, 3.4vw, 40px); }
.modulo-riga { display: grid; gap: 16px; margin-bottom: 16px; }
@media (min-width: 640px) { .modulo-riga.due { grid-template-columns: 1fr 1fr; } }
.campo { display: flex; flex-direction: column; gap: 7px; }
.campo label { font-size: .875rem; font-weight: 700; }
.campo .aiuto { font-size: .8125rem; color: var(--inchiostro-fioco); font-weight: 400; }
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: 1rem; padding: 13px 16px;
  border: 1.5px solid var(--filo); border-radius: var(--r-16);
  background: var(--carta-calda); color: var(--inchiostro); width: 100%;
}
.campo textarea { min-height: 128px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--muschio); background: #fff;
  box-shadow: 0 0 0 3px var(--rosa);
}
.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235c574c' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1em center; background-size: 12px;
  padding-right: 2.6em;
}
.consenso { display: flex; gap: 11px; align-items: flex-start; font-size: .875rem; color: var(--inchiostro-tenue); }
.consenso input { width: 19px; height: 19px; margin-top: 2px; flex: none; accent-color: var(--muschio); }
.esito { border-radius: var(--r-16); padding: 14px 18px; font-size: .9375rem; margin-top: 16px; }
.esito.ok { background: #e6f0e4; color: #2c4a28; }
.esito.ko { background: var(--rosa); color: var(--muschio-cupo); }

.popup { border: 0; padding: 0; width: min(94vw, 620px); max-height: 90vh; border-radius: var(--r-32); background: #fff; box-shadow: var(--ombra-alta); }
.popup::backdrop { background: rgba(35, 42, 32, .5); }
.popup-dentro { padding: clamp(24px, 3.4vw, 38px); }
.popup-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.popup-testa h2 { font-size: 1.5rem; margin: 0; }
.popup .modulo { border: 0; padding: 0; background: transparent; }

/* ---------- 23. WhatsApp fisso ---------- */

.wa-fisso {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25d366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(35, 42, 32, .22); text-decoration: none;
  transition: transform .2s ease;
}
.wa-fisso:hover { transform: scale(1.06); color: #fff; }
.wa-fisso::before {
  content: ''; width: 30px; height: 30px; background: currentColor;
  -webkit-mask: var(--icona-wa) center / contain no-repeat;
  mask: var(--icona-wa) center / contain no-repeat;
}
@media (prefers-reduced-motion: reduce) { .wa-fisso:hover { transform: none; } }

/* ---------- 24. Briciole ---------- */

.briciole { font-size: .8125rem; color: var(--inchiostro-fioco); padding-top: 18px; }
.briciole ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5em; margin: 0; padding: 0; }
.briciole li + li::before { content: '/'; margin-right: .5em; color: var(--filo); }
.briciole a { color: var(--inchiostro-tenue); text-decoration: none; }
.briciole a:hover { color: var(--muschio); text-decoration: underline; }

/* ---------- 25. Piede ---------- */

.piede { background: var(--carta-calda); color: var(--inchiostro-tenue); padding-block: clamp(40px, 6vw, 72px) 26px; font-size: .9375rem; border-top: 1px solid var(--filo-tenue); }
.piede a { color: var(--inchiostro-tenue); text-decoration: none; }
.piede a:hover { color: var(--muschio); text-decoration: underline; }

/* la riga contatti in cima al piede, al posto dell'iscrizione dell'originale */
.piede-contatti {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px;
  background: #fff; border: 1.5px solid var(--filo); border-radius: var(--r-24);
  padding: 22px 26px; margin-bottom: clamp(32px, 4vw, 48px);
}
.piede-contatti div { flex: 1; min-width: 240px; }
.piede-contatti b { display: block; font-size: 1.0625rem; color: var(--inchiostro); }
.piede-contatti p { margin: 4px 0 0; font-size: .9375rem; }

.piede-griglia { display: grid; gap: clamp(26px, 4vw, 44px); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 36px; }
.piede h4 { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--inchiostro-fioco); font-weight: 700; margin-bottom: 1.1em; }
.piede ul { list-style: none; margin: 0; padding: 0; }
.piede li { margin-bottom: .6em; }
.piede-marchio b { font-size: 1.25rem; font-weight: 700; color: var(--inchiostro); display: block; margin-bottom: .35em; }
.piede-coda { border-top: 1px solid var(--filo); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; font-size: .8125rem; color: var(--inchiostro-fioco); }

/* ---------- 26. Consensi ---------- */

.consensi {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 130;
  background: #fff; border-radius: var(--r-32); box-shadow: var(--ombra-alta);
  padding: clamp(20px, 2.6vw, 28px); max-width: 560px; display: none;
}
.consensi[data-visibile='1'] { display: block; }
.consensi h2 { font-size: 1.25rem; margin-bottom: .4em; }
.consensi p { font-size: .9375rem; color: var(--inchiostro-tenue); margin-bottom: 1em; }
.consensi .bottoniera { margin-top: 0; }
.consensi .btn { min-height: 44px; padding: 10px 20px; font-size: .9375rem; }
.consensi-scelte { margin: 0 0 16px; display: grid; gap: 12px; }
.consensi-scelta { display: flex; gap: 11px; align-items: flex-start; font-size: .9375rem; }
.consensi-scelta input { width: 19px; height: 19px; margin-top: 2px; flex: none; accent-color: var(--muschio); }
.consensi-scelta b { display: block; font-size: .9375rem; }
.consensi-scelta span { color: var(--inchiostro-fioco); font-size: .875rem; }

/* ---------- 27. Pagine legali ---------- */

.legale { max-width: var(--stretto); margin-inline: auto; }
.legale h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem); margin-top: 2em; }
.legale h3 { margin-top: 1.6em; }
.legale ul, .legale ol { color: var(--inchiostro-tenue); padding-left: 1.3em; }
.legale li { margin-bottom: .5em; }
.legale p { color: var(--inchiostro-tenue); }
.legale table { min-width: 0; font-size: .9375rem; }
.legale .aggiornato { font-size: .8125rem; color: var(--inchiostro-fioco); font-weight: 500; }

/* ---------- 28. Elenco guide ---------- */

.guide-elenco { display: grid; gap: 14px; max-width: var(--medio); margin-inline: auto; }
.guida-voce {
  display: block; background: #fff; border: 1.5px solid var(--filo);
  border-radius: var(--r-24); padding: 22px 26px; text-decoration: none; color: inherit;
  transition: border-color .2s ease;
}
.guida-voce:hover { border-color: var(--inchiostro); color: inherit; }
.guida-voce h3 { margin-bottom: .3em; }
.guida-voce p { color: var(--inchiostro-tenue); font-size: .9375rem; margin: 0; }

/* ---------- 30. Pillole di filtro ---------- */
/* Misurate sull'originale: alte 48, raggio 32, testo 16-18 peso 700.
   Quella attiva e' scura con il pallino davanti, le altre grigio chiaro. */

.pillole-filtro {
  display: flex; gap: 12px; justify-content: flex-start; flex-wrap: nowrap;
  overflow-x: auto; overscroll-behavior-x: contain;
  margin: 0 0 clamp(24px, 3.5vw, 40px);
  padding: 4px var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: none;
}
.pillole-filtro::-webkit-scrollbar { display: none; }
/* ⚠ justify-content:center dentro un contenitore che scorre taglia la prima
   pillola e la rende irraggiungibile. I margini automatici centrano quando
   la riga ci sta e si annullano quando sborda. */
.pillole-filtro > :first-child { margin-left: auto; }
.pillole-filtro > :last-child { margin-right: auto; }

.pillola-filtro {
  flex: none;
  display: inline-flex; align-items: center; gap: .55em;
  min-height: 48px; padding: 0 24px;
  border: 0; border-radius: var(--r-pillola);
  background: var(--crema); color: var(--inchiostro);
  font: inherit; font-size: 1rem; font-weight: 700; line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.pillola-filtro:hover { background: var(--filo-tenue); }
.pillola-filtro[aria-current='true'] { background: var(--inchiostro); color: #fff; }
.pillola-filtro[aria-current='true']::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--verde); flex: none;
}

/* ---------- 31. Carosello di pannelli ---------- */
/* Il blocco 5 dell'originale: pannelli pieni a tutta larghezza che sbordano
   ai lati, uno per volta, con i puntini sotto. */

.pista-temi {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: min(var(--griglia), 86vw);
  gap: 20px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 4px max(var(--gutter), calc((100vw - min(var(--griglia), 86vw)) / 2)) 4px;
  scroll-padding-inline: max(var(--gutter), calc((100vw - min(var(--griglia), 86vw)) / 2));
  scrollbar-width: none;
}
.pista-temi::-webkit-scrollbar { display: none; }

.pannello-tema { scroll-snap-align: center; padding: clamp(24px, 3.4vw, 48px); }
.tema-dentro { display: grid; gap: clamp(20px, 3vw, 44px); align-items: center; }
@media (min-width: 820px) { .tema-dentro { grid-template-columns: 1fr 1fr; } }
.tema-foto { border-radius: var(--r-24); overflow: hidden; aspect-ratio: 4 / 3; }
/* Pannello a slide senza foto: una colonna sola, e il testo tenuto a una
   misura leggibile invece di correre per tutta la larghezza del pannello. */
@media (min-width: 820px) {
  .tema-dentro-testo { grid-template-columns: 1fr; }
  .tema-dentro-testo .tema-testo { max-width: 58ch; }
}
.tema-foto img { width: 100%; height: 100%; object-fit: cover; }
.tema-quando {
  /* l'inchiostro tenue sta a 2,59 sulla salvia: sui pannelli pieni
     l'etichetta va in inchiostro pieno, non nella tinta smorzata */
  display: block; font-size: .75rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--inchiostro); margin-bottom: .8em;
}
.pannello-scuro .tema-quando { color: rgba(255,255,255,.7); }
.tema-testo h3 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); margin-bottom: .45em; }
.tema-testo p { margin-bottom: 1.4em; }

.puntini { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.puntino {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
  background: var(--filo); cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.puntino[aria-current='true'] { background: var(--inchiostro); transform: scale(1.25); }

.ai-lettori {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- 32. Libreria ---------- */
/* Il blocco 9: titolo grande, pillole, carosello di schede alte, e in fondo a
   destra il «vedi tutte» con le due frecce tonde. */

.titolo-grande { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.75rem); line-height: 1.05; }

.scheda-alta-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: #fff; color: var(--inchiostro);
  font-size: .75rem; font-weight: 700; line-height: 1;
  padding: 7px 12px; border-radius: var(--r-pillola);
}
.scheda-alta-senza-foto {
  background:
    radial-gradient(circle at 30% 28%, rgba(134, 172, 141, .6), transparent 58%),
    radial-gradient(circle at 76% 74%, rgba(241, 214, 208, .5), transparent 60%),
    var(--bosco);
}
.scheda-alta[hidden] { display: none; }

.vedi-tutte {
  margin-right: auto; font-weight: 700; font-size: .9375rem;
  color: var(--inchiostro); text-decoration: underline; text-underline-offset: 3px;
}
.freccia {
  width: 48px; height: 48px; flex: none;
  border: 0; border-radius: 50%; background: var(--crema);
  color: var(--inchiostro); font-size: 1.5rem; line-height: 1;
  cursor: pointer; transition: background-color .18s ease;
}
.freccia:hover { background: var(--filo-tenue); }
.freccia[disabled] { opacity: .35; cursor: default; }

/* ---------- 29. Comparse ---------- */

@media (prefers-reduced-motion: no-preference) {
  .comparsa { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
  .comparsa.vista { opacity: 1; transform: none; }
}

/* ---------- 33. Telefoni stretti ---------- */
/* In fondo apposta: a meta' foglio le regole base che vengono dopo le
   scavalcherebbero. Col selettore di lingua marchio, pastiglia e «Menu» non
   stavano piu' in riga sotto i 360px (a 320 la pagina sforava di 38px). Si
   stringono un poco tutti e tre invece di toglierne uno: il bersaglio del
   dito resta alto 44px grazie al ::after del selettore. */
@media (max-width: 359px) {
  .barra-dentro { gap: 6px; }
  .marchio span { letter-spacing: .06em; }
  .selettore-lingua { padding: 2px; gap: 0; }
  .selettore-lingua-i { min-width: 30px; padding: 0 5px; letter-spacing: .03em; }
  .apri-menu { padding: 10px 12px; }
}