/* ===== 10-base.css ===== */
/* =========================================================================
   TORENE — design system «Taccuino di viaggio» (base, dalla versione aggiornata del 1° ottobre 2026)
   Struttura pensata per essere riportata 1:1 in Elementor:
   1. Token  → Impostazioni sito › Colori globali / Tipografia globale
   2. Base   → child theme hello-torene/style.css
   3. Componenti → classi CSS dei widget / Loop Item
   ========================================================================= */

/* ---------- 1. Font (ospitati in locale: GDPR e velocità) ---------------- */
@font-face { font-family: 'Young Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/young-serif-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Young Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/young-serif-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Special Elite: usato solo dall'indice del taccuino (menu mobile), quindi non scaricato su desktop */
@font-face { font-family: 'Special Elite'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/special-elite-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Special Elite'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/special-elite-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Caveat: dichiarato qui ma scaricato solo se una pagina usa .nota-mano (max 1 per schermata) */
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/caveat-latin.woff2') format('woff2'); }

/* ---------- 2. Token ---------------------------------------------------- */
:root {
  /* Palette (nomi = colori globali Elementor) — contrasti AA verificati su Carta */
  --c-carta: #F6F1E7;
  --c-carta-2: #EDE5D6;
  --c-inchiostro: #1F2A2E;
  --c-seppia: #6B5E50;
  --c-terracotta: #A94B29;
  --c-oliva: #5F6B3A;
  --c-adriatico: #2E5E73;
  --c-ocra: #D9A441;
  --c-pietra: #D8CFBF;
  /* Derivati (usati solo come fondi o stati, mai per testo piccolo) */
  --c-terracotta-scuro: #8C3C1F;
  --c-terracotta-chiaro: #E6BBA5;
  --c-terracotta-velo: #F3DDD0;
  --c-oliva-velo: #E4E6D3;
  --c-adriatico-velo: #D9E5EA;
  --c-ocra-velo: #F4E3BD;
  --c-bianco-carta: #FBF8F2;

  /* Tipografia */
  --f-display: 'Young Serif', Georgia, 'Times New Roman', serif;
  --f-testo: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mano: 'Caveat', 'Comic Sans MS', cursive;
  --f-macchina: 'Special Elite', 'American Typewriter', 'Courier New', monospace;
  --t-h1: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem);   /* 36 → 56 */
  --t-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem);    /* 28 → 40 */
  --t-h3: clamp(1.25rem, 1.15rem + .45vw, 1.5rem);   /* 20 → 24 */
  --t-testo: clamp(1.0625rem, 1.04rem + .12vw, 1.125rem); /* 17 → 18 */
  --t-piccolo: .875rem;                                /* 14 */
  --lh-testo: 1.6;

  /* Spazi, bordi, ritmo */
  --gutter: clamp(16px, 4vw, 32px);
  --max: 1240px;
  --max-testo: 68ch;
  --r: 4px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --sezione: clamp(56px, 8vw, 104px);
  --filetto: 1px solid var(--c-pietra);
  --tratteggio: 2px dashed var(--c-pietra);
  --ombra: 0 1px 0 rgba(31, 42, 46, .06);
  --focus: 2px solid var(--c-adriatico);

  color-scheme: light; /* niente tema scuro: il taccuino ha un solo aspetto */
}

/* ---------- 3. Base ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; overflow-x: clip; }
body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0; background: var(--c-carta); color: var(--c-inchiostro);
  font-family: var(--f-testo); font-size: var(--t-testo); line-height: var(--lh-testo);
  font-feature-settings: 'kern', 'liga'; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  /* grana della carta: rumore SVG leggerissimo, niente immagini da scaricare */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .37 0 0 0 0 .31 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[hidden] { display: none !important; }  /* batte i display dei componenti (filtri, voci nascoste) */
img, svg, video { display: block; max-width: 100%; height: auto; }
img { background: var(--c-carta-2); }
a { color: var(--c-terracotta); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--c-terracotta-scuro); }
a[aria-disabled="true"] { cursor: default; } /* link verso pagine non incluse (mockup di consegna) */
:focus-visible { outline: var(--focus); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--c-ocra-velo); }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.15; font-weight: 400; text-wrap: balance; }
h1, .h1 { font-family: var(--f-display); font-size: var(--t-h1); letter-spacing: -.01em; }
h2, .h2 { font-family: var(--f-display); font-size: var(--t-h2); letter-spacing: -.005em; }
h3, .h3 { font-family: var(--f-testo); font-size: var(--t-h3); font-weight: 700; line-height: 1.25; }
h4, .h4 { font-family: var(--f-testo); font-size: 1rem; font-weight: 700; letter-spacing: .02em; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
small, .piccolo { font-size: var(--t-piccolo); }
hr { border: 0; border-top: var(--filetto); margin: var(--s-6) 0; }
blockquote { margin: 0; }
button { font: inherit; color: inherit; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s-4); top: -60px; z-index: 100; background: var(--c-inchiostro); color: var(--c-carta); padding: var(--s-2) var(--s-4); border-radius: var(--r); }
.skip:focus { top: var(--s-4); color: var(--c-carta); }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--stretto { max-width: calc(880px + var(--gutter) * 2); }
.sezione { padding-block: var(--sezione); }
.sezione--carta2 { background: var(--c-carta-2); }
.sezione--filetto { border-top: var(--filetto); }
.testo-lungo { max-width: var(--max-testo); }
.testo-lungo p:last-child { margin-bottom: 0; }
.muted { color: var(--c-seppia); }
.centro { text-align: center; }
.stack > * + * { margin-top: var(--s-4); }
/* i figli delle griglie di layout non devono allargare la colonna (min-width:auto) */
.evidenza > *, .chi > *, .mappa-home > *, .due-col > *, .scheda > *, .pers-hero > *, .luoghi > *, .bio > *, .sfide-hero .wrap > *, .hero-scheda__testo > * { min-width: 0; }

/* Occhiello e intestazioni di sezione */
.occhiello { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3);
  font-size: var(--t-piccolo); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-seppia); }
.intesta { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-4) var(--s-6); margin-bottom: var(--s-6); }
.intesta h2 { margin: 0; }
.intesta p { margin: var(--s-2) 0 0; color: var(--c-seppia); max-width: 56ch; }
.nota-mano { font-family: var(--f-mano); font-weight: 500; font-size: 1.6rem; line-height: 1.1; color: var(--c-terracotta); }

/* Icone (Lucide, tratto 1,5) */
.i { width: 1.25em; height: 1.25em; flex: none; stroke-width: 1.5; vertical-align: -.25em; }
.i--s { width: 1em; height: 1em; }
.i--l { width: 28px; height: 28px; }

/* ---------- 4. Bottoni e link ------------------------------------------- */
.btn { --bg: var(--c-terracotta); --fg: #fff; --bd: var(--c-terracotta);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 12px 22px; border: 1.5px solid var(--bd); border-radius: var(--r);
  background: var(--bg); color: var(--fg); font-weight: 700; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s; }
.btn:hover { --bg: var(--c-terracotta-scuro); --bd: var(--c-terracotta-scuro); color: var(--fg); }
.btn:active { transform: translateY(1px); }
.btn--secondario { --bg: transparent; --fg: var(--c-inchiostro); --bd: var(--c-inchiostro); }
.btn--secondario:hover { --bg: var(--c-inchiostro); --fg: var(--c-carta); --bd: var(--c-inchiostro); }
.btn--chiaro { --bg: var(--c-carta); --fg: var(--c-inchiostro); --bd: var(--c-carta); }
.btn--chiaro:hover { --bg: #fff; --bd: #fff; --fg: var(--c-inchiostro); }
.btn--oliva { --bg: var(--c-oliva); --bd: var(--c-oliva); }
.btn--oliva:hover { --bg: #4B552D; --bd: #4B552D; }
.btn--whatsapp { --bg: transparent; --fg: var(--c-oliva); --bd: var(--c-oliva); }
.btn--whatsapp:hover { --bg: var(--c-oliva); --fg: #fff; --bd: var(--c-oliva); }
.btn--piccolo { min-height: 40px; padding: 8px 14px; font-size: .9375rem; }
.btn--blocco { width: 100%; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .5; pointer-events: none; }
.link-freccia { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 700; text-decoration: none; }
.link-freccia .i { transition: transform .15s; }
.link-freccia:hover .i { transform: translateX(3px); }

/* ---------- 5. Badge per entità (codice colore fisso) ------------------ */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: var(--r);
  font-size: .8125rem; font-weight: 700; letter-spacing: .04em; line-height: 1.5; text-decoration: none; white-space: nowrap;
  border: 1px solid currentColor; background: var(--c-bianco-carta); }
.badge .i { width: 14px; height: 14px; }
.badge--esperienza { color: var(--c-terracotta-scuro); background: var(--c-terracotta-velo); border-color: transparent; }
.badge--personaggio { color: var(--c-oliva); background: var(--c-oliva-velo); border-color: transparent; }
.badge--regione { color: var(--c-adriatico); background: var(--c-adriatico-velo); border-color: transparent; }
.badge--itinerario { color: var(--c-inchiostro); background: var(--c-carta-2); border-color: var(--c-pietra); }
.badge--ocra { color: var(--c-inchiostro); background: var(--c-ocra-velo); border-color: transparent; }
.badge--neutro { color: var(--c-seppia); background: transparent; border-color: var(--c-pietra); font-weight: 500; letter-spacing: 0; }
a.badge:hover { filter: brightness(.96); }
.badges { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }

/* ---------- 6. Timbro regione ------------------------------------------ */
.timbro { --tc: var(--c-adriatico); display: inline-block; width: 76px; height: 76px; color: var(--tc); flex: none; line-height: 0; vertical-align: middle; }
.timbro svg { width: 100%; height: 100%; overflow: visible; }
.timbro text { font-family: var(--f-testo); font-weight: 700; font-size: 9.5px; letter-spacing: 2.4px; text-transform: uppercase; fill: currentColor; }
.timbro--grande { width: 132px; height: 132px; }
.timbro--piccolo { width: 56px; height: 56px; }
.timbro--chiaro { --tc: var(--c-carta); }
.timbro--ruotato svg { transform: rotate(-8deg); }

/* ---------- 7. Header --------------------------------------------------- */
.testata { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--c-carta) 94%, transparent);
  backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.testata.is-scrolled { border-bottom-color: var(--c-pietra); }
.testata__barra { display: flex; align-items: center; gap: var(--s-5); min-height: 76px; }
/* Marchio: artwork completo (simbolo + lettering + payoff), un solo file SVG. */
.marchio { display: inline-flex; align-items: center; text-decoration: none; margin-right: auto; }
.marchio__img { display: block; width: auto; height: 52px; background: none; }  /* niente fondo segnaposto: l'SVG è trasparente */
.marchio__img--corto { height: 44px; }
.marchio__segno { width: 40px; height: 40px; flex: none; background: none; }
.nav { display: flex; align-items: center; gap: var(--s-1); }
.nav__titolo { display: none; }
.nav__lista { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav__link { display: block; padding: 10px 12px; border-radius: var(--r); color: var(--c-inchiostro); text-decoration: none; font-weight: 500; font-size: 1rem; }
.nav__link:hover { background: var(--c-carta-2); color: var(--c-inchiostro); }
.nav__link[aria-current='page'], .nav__link.is-sezione { color: var(--c-terracotta); box-shadow: inset 0 -2px 0 var(--c-terracotta); border-radius: var(--r) var(--r) 0 0; }
.nav__etichetta { display: none; }
.nav__nome { display: inline; }
.nav__azioni { display: flex; align-items: center; gap: var(--s-2); margin-left: var(--s-3); }
.nav__mappa { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); border: 1px solid var(--c-pietra);
  background: transparent; color: var(--c-inchiostro); text-decoration: none; position: relative; }
.nav__mappa:hover { background: var(--c-carta-2); color: var(--c-inchiostro); }
.nav__mappa-testo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); border: 1px solid var(--c-pietra);
  background: transparent; color: var(--c-inchiostro); cursor: pointer; text-decoration: none; }
.icon-btn:hover { background: var(--c-carta-2); color: var(--c-inchiostro); }
.menu-btn { display: none; }
/* Desktop: gli elementi del taccuino (spirale, nastro, linguette…) non esistono */
@media (min-width: 1081px) {
  .nav__foglio { display: contents; }
  .nav__gruppo { display: block; }   /* batte [hidden] se si torna al desktop con l'altra linguetta aperta */
  .nav__gruppo--progetto, .nav__spirale, .nav__nastro, .nav__segnalibro,
  .nav__intesta, .nav__timbro, .nav__linguette, .nav__resto,
  .nav__numero, .nav__conta, .nav__matita,
  .nav__segno, .nav__sotto-voce, .nav__extra { display: none; }
}

/* Mobile: il menu è la pagina dell'indice del taccuino, che si ribalta dall'alto.
   Le classi stanno tutte sotto .nav, così in Elementor è un unico blocco. */
@media (max-width: 1080px) {
  .menu-btn { display: inline-grid; }
  .menu-btn[aria-expanded='true'] { background: var(--c-inchiostro); border-color: var(--c-inchiostro); color: var(--c-carta); }

  /* Niente backdrop-filter su mobile: renderebbe la testata il riferimento del
     posizionamento fixed, e il foglio seguirebbe l'header appiccicato invece di
     stare fermo sullo schermo (position: sticky da sola non lo fa). */
  .testata { backdrop-filter: none; background: var(--c-carta); }

  /* Il foglio è un riquadro a tutto schermo, ancorato alla finestra: copre anche
     la barra, e porta la × sul segnalibro per chiudersi. */
  .nav {
    position: fixed; inset: 0; z-index: 60;
    height: 100vh; height: 100dvh;
    padding-top: env(safe-area-inset-top, 0px);
    display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0;
    background: var(--c-carta); border-top: var(--filetto);
    /* la prospettiva sta nella transform: metterla sul contenitore renderebbe
       .testata il riferimento del posizionamento fixed, e il foglio collasserebbe */
    transform-origin: top center; transform: perspective(1400px) rotateX(-14deg) translateY(-14px);
    opacity: 0; visibility: hidden;
    transition: transform .42s cubic-bezier(.22, .78, .3, 1), opacity .3s ease, visibility 0s .42s;
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible;
    transition: transform .42s cubic-bezier(.22, .78, .3, 1), opacity .3s ease; }
  body.nav-aperta { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

  /* grana della carta e ombra della rilegatura */
  .nav::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(90deg, rgba(107, 94, 80, .16), rgba(107, 94, 80, .04) 10px, transparent 26px),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  }

  /* spirale, nastro di carta, segnalibro */
  .nav__spirale { position: relative; z-index: 2; flex: none; height: 30px;
    background: linear-gradient(180deg, #E2D8C4, #EFE7D8); border-bottom: 1px solid var(--c-pietra);
    box-shadow: 0 2px 4px -2px rgba(31, 42, 46, .18); }
  .nav__spirale svg { display: block; width: 100%; height: 100%; }
  .nav__nastro {
    position: absolute; top: 14px; left: 30px; z-index: 3; width: 112px; height: 30px;
    transform: rotate(-5.5deg); background: rgba(217, 164, 65, .38);
    border-left: 1px dashed rgba(140, 60, 31, .16); border-right: 1px dashed rgba(140, 60, 31, .16);
    box-shadow: 0 1px 2px rgba(31, 42, 46, .12); pointer-events: none;
    -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 5px, rgba(0,0,0,.82) 5px 10px);
    mask-image: repeating-linear-gradient(90deg, #000 0 5px, rgba(0,0,0,.82) 5px 10px);
  }
  .nav__segnalibro {
    position: absolute; top: env(safe-area-inset-top, 0px); right: 20px; z-index: 5;
    width: 44px; height: 64px; padding: 0 0 12px; border: 0;
    display: grid; place-items: center;
    background: var(--c-terracotta); color: #fff; cursor: pointer; line-height: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
    box-shadow: -1px 0 2px rgba(31, 42, 46, .18);
  }
  .nav__segnalibro-x { width: 20px; height: 20px; }
  .nav__segnalibro:hover { background: var(--c-terracotta-scuro); }

  /* il foglio */
  .nav__foglio { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column;
    padding: var(--s-5) var(--gutter) 0; overflow-y: auto; overscroll-behavior: contain; }
  .nav__foglio::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--gutter) + 38px); width: 3px;
    border-left: 1px solid rgba(169, 75, 41, .42); border-right: 1px solid rgba(169, 75, 41, .16); }

  .nav__intesta { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); }
  .nav__titolo { display: block; margin: 0; font-family: var(--f-mano); font-weight: 500; font-size: 2.4rem; line-height: .95; color: var(--c-terracotta); }
  .nav__sottotitolo { margin: 4px 0 0; font-family: var(--f-macchina); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c-seppia); }
  .nav__firma { margin: 0; font-family: var(--f-macchina); font-size: .6875rem; letter-spacing: .1em; color: var(--c-seppia); text-align: right; }

  .nav__timbro { position: absolute; right: 26px; bottom: 26px; z-index: 0; width: 116px; height: 116px;
    color: var(--c-adriatico); opacity: .15; transform: rotate(-11deg); pointer-events: none; }
  .nav__timbro svg { width: 100%; height: 100%; }
  .nav__timbro text { font-family: var(--f-macchina); font-size: 9px; letter-spacing: 1.6px; fill: currentColor; }

  /* linguette: i separatori del taccuino */
  .nav__linguette { position: relative; z-index: 1; display: flex; gap: 6px; margin-bottom: -1px; }
  .nav__linguetta {
    position: relative; flex: 1; min-height: 42px; padding: 10px 12px;
    border: 1px solid var(--c-pietra); border-bottom-color: transparent; border-radius: 3px 12px 0 0;
    background: linear-gradient(180deg, var(--c-carta-2), #E6DCC9); color: var(--c-seppia);
    font-family: var(--f-macchina); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
  }
  .nav__linguetta:hover { color: var(--c-inchiostro); }
  .nav__linguetta[aria-selected='true'] { background: var(--c-bianco-carta); color: var(--c-inchiostro);
    box-shadow: inset 0 3px 0 var(--linguetta); transform: translateY(-2px); }
  .nav__linguetta:nth-child(1) { --linguetta: var(--c-terracotta); }
  .nav__linguetta:nth-child(2) { --linguetta: var(--c-adriatico); }
  .nav__graffetta { position: absolute; top: -12px; right: 14px; width: 16px; height: 32px; color: #9AA0A6;
    opacity: 0; rotate: 8deg; transform: translateY(5px); transition: opacity .2s ease, transform .25s var(--posa); }
  .nav__linguetta[aria-selected='true'] .nav__graffetta { opacity: 1; transform: none; }

  /* voci dell'indice: una voce = una riga della rigatura */
  .nav__gruppo { position: relative; z-index: 1; border-top: 1px solid var(--c-pietra); padding-top: var(--s-2); }
  .nav__lista { flex-direction: column; gap: 0; }
  .nav__link {
    position: relative; display: grid; grid-template-columns: 34px 30px minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-3);
    min-height: 68px; padding: 9px 0; border-bottom: var(--tratteggio); border-radius: 0;
    font-weight: 400; background: transparent;
    transition: color .18s ease, padding-left .25s var(--posa);
  }
  .nav__link:hover, .nav__link:focus-visible { background: transparent; color: var(--c-terracotta); padding-left: 4px; }
  .nav__link:hover .nav__nome { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
  .nav__segno { display: grid; place-items: center; width: 30px; height: 30px; color: var(--c-seppia);
    transition: color .18s ease, transform .25s var(--posa); }
  .nav__segno .i { width: 21px; height: 21px; }
  .nav__link:hover .nav__segno, .nav__link.is-sezione .nav__segno { color: var(--c-terracotta); transform: rotate(-6deg) scale(1.08); }
  .nav__link[aria-current='page'], .nav__link.is-sezione { box-shadow: none; color: var(--c-terracotta); }
  .nav__numero { font-family: var(--f-macchina); font-size: .8125rem; color: var(--c-seppia); }
  .nav__link.is-sezione .nav__numero, .nav__link[aria-current='page'] .nav__numero { color: var(--c-terracotta); }
  .nav__testo { display: grid; gap: 2px; min-width: 0; line-height: 1.15; }
  .nav__etichetta { display: inline; font-size: .625rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-seppia); }
  .nav__link.is-sezione .nav__etichetta, .nav__link[aria-current='page'] .nav__etichetta { color: var(--c-terracotta); }
  .nav__nome { position: relative; justify-self: start; font-family: var(--f-macchina); font-size: 1.3rem; line-height: 1.2; }
  .nav__sotto-voce { font-size: .8125rem; line-height: 1.3; color: var(--c-seppia); }
  .nav__link.is-sezione .nav__sotto-voce { color: var(--c-terracotta-scuro); }
  .nav__conta { display: grid; justify-items: center; gap: 0; padding-left: var(--s-2); font-family: var(--f-macchina); color: var(--c-seppia); line-height: 1; }
  .nav__conta b { font-size: 1.25rem; font-weight: 400; color: var(--c-inchiostro); }
  .nav__conta span { font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase; }
  .nav__link.is-sezione .nav__conta b { color: var(--c-terracotta); }
  .nav__conta--vuota { color: var(--c-pietra); }
  .nav__link:hover .nav__conta--vuota { color: var(--c-terracotta); }

  /* cerchio a matita sulla sezione in cui ti trovi */
  .nav__matita { position: absolute; left: -7px; right: -13px; top: -6px; bottom: -14px;
    width: auto; height: auto; overflow: visible; pointer-events: none; color: var(--c-terracotta); }
  .nav__matita path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round;
    vector-effect: non-scaling-stroke; opacity: .8; }

  /* il foglio resta rigato sotto l'ultima voce */
  /* Riempitivo: la rigatura chiude il foglio solo se avanza spazio davvero. */
  .nav__resto { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; margin-top: -1px; overflow: hidden;
    background-image: repeating-linear-gradient(to bottom, transparent 0 56.5px, #CFC3AE 56.5px 58px);
    background-position: 0 14px; opacity: .4; }
  .nav__resto::after { content: 'le pagine che restano le scrivi tu'; position: absolute; left: 2px; top: 26px;
    font-family: var(--f-mano); font-size: 1.35rem; color: var(--c-seppia); opacity: .85; rotate: -1.5deg; }

  /* Sotto l'elenco: scorciatoie vere, al posto di mezza pagina bianca. */
  .nav__extra { position: relative; z-index: 1; display: grid; gap: var(--s-5); padding: var(--s-5) 0 var(--s-4); }
  .nav__blocco-titolo { margin: 0 0 var(--s-3); font-family: var(--f-macchina); font-size: .6875rem;
    letter-spacing: .16em; text-transform: uppercase; color: var(--c-seppia); display: flex; align-items: center; gap: var(--s-2); }
  .nav__passioni, .nav__regioni { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .nav__passioni a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 7px 14px; border-radius: 999px;
    border: 1px solid var(--c-pietra); background: var(--c-bianco-carta); color: var(--c-inchiostro); text-decoration: none;
    font-size: .9375rem; font-weight: 500; transition: border-color .2s, color .2s, transform .2s var(--posa); }
  .nav__passioni a .i { color: var(--c-terracotta); }
  .nav__passioni a:hover, .nav__passioni a:focus-visible { border-color: var(--c-terracotta); color: var(--c-terracotta); transform: translateY(-1px); }
  .nav__regioni { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: var(--s-2); }
  .nav__regioni a { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: var(--r);
    color: var(--c-inchiostro); text-decoration: none; font-size: .75rem; line-height: 1.2; text-align: center;
    transition: background .2s, color .2s; }
  .nav__regioni .timbro { width: 46px; height: 46px; transition: transform .25s var(--posa), color .2s; }
  .nav__regioni a:hover, .nav__regioni a:focus-visible { background: var(--c-bianco-carta); color: var(--c-terracotta); }
  .nav__regioni a:hover .timbro { color: var(--c-terracotta); transform: rotate(-10deg) scale(1.06); }
  .nav__blocco--firma .nav__manifesto { margin: 0; font-family: var(--f-display); font-size: 1.375rem; line-height: 1.3; max-width: 26ch; }
  .nav__blocco--firma .nav__manifesto b { font-weight: 400; color: var(--c-terracotta); }
  .nav__firma-mano { margin: var(--s-4) 0 0; font-family: var(--f-mano); font-size: 1.4rem; color: var(--c-seppia); }

  /* Su tablet l'elenco sta su due colonne: niente righe lunghissime e mezze vuote. */
  @media (min-width: 620px) {
    .nav__lista { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-6); }
    .nav__extra { grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: start; }
    .nav__foglio { padding-inline: clamp(24px, 5vw, 56px); }
    .nav__foglio::before { left: calc(clamp(24px, 5vw, 56px) + 38px); }
  }

  /* piede: mappa e sfide */
  .nav__azioni { position: relative; z-index: 2; flex: none; display: grid; gap: var(--s-2); margin: 0;
    padding: var(--s-4) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
    background: var(--c-bianco-carta); border-top: var(--filetto); }
  .nav__mappa { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    width: auto; min-height: 48px; padding: 12px 14px; background: var(--c-bianco-carta); font-weight: 700; }
  .nav__mappa-testo { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; white-space: normal; }
  .nav__azioni .btn { width: 100%; }

  /* entrata in scena: stato di riposo visibile, così senza JS non si perde nulla */
  .nav.is-open .nav__intesta, .nav.is-open .nav__linguetta,
  .nav.is-open .nav__link, .nav.is-open .nav__blocco, .nav.is-open .nav__azioni { animation: sale-foglio .34s var(--posa) both; }
  .nav.is-open .nav__intesta { animation-delay: .1s; }
  .nav.is-open .nav__linguetta { animation-delay: .16s; }
  .nav.is-open .nav__link { animation-delay: calc(.2s + var(--i, 0) * .045s); }
  .nav.is-open .nav__blocco { animation-delay: .44s; }
  .nav.is-open .nav__blocco:nth-child(2) { animation-delay: .5s; }
  .nav.is-open .nav__azioni { animation-delay: .4s; }
  @keyframes sale-foglio { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
  .nav.is-open .nav__matita path { animation: traccia-matita .7s ease-out .5s both; }
  @keyframes traccia-matita { from { stroke-dasharray: 460; stroke-dashoffset: 460; } to { stroke-dasharray: 460; stroke-dashoffset: 0; } }
  .nav.is-open .nav__nastro { animation: posa-nastro .3s ease-out .26s both; }
  @keyframes posa-nastro { from { opacity: 0; transform: rotate(-12deg) translateY(-6px); } to { opacity: 1; transform: rotate(-5.5deg); } }
}
@media (max-width: 480px) { .marchio__img { height: 40px; } }

/* ---------- 8. Breadcrumb ---------------------------------------------- */
.briciole { font-size: var(--t-piccolo); color: var(--c-seppia); padding-block: var(--s-4); }
.briciole ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.briciole li:not(:last-child)::after { content: '/'; margin-left: 6px; color: var(--c-pietra); }
.briciole a { color: var(--c-seppia); text-decoration: none; }
.briciole a:hover { color: var(--c-terracotta); text-decoration: underline; }
.briciole [aria-current] { color: var(--c-inchiostro); }

/* ---------- 9. Hero ----------------------------------------------------- */
.hero { position: relative; isolation: isolate; min-height: min(86vh, 760px); display: grid; align-items: end; color: var(--c-inchiostro); }
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* velatura Carta in basso, come da wireframe */
.hero__media::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(246,241,231,0) 14%, rgba(246,241,231,.52) 40%, rgba(246,241,231,.88) 64%, var(--c-carta) 92%); }
.hero__contenuto { padding-block: var(--s-9) var(--s-7); }
.hero .occhiello { color: var(--c-inchiostro); }
.hero h1 { max-width: 14ch; margin-bottom: var(--s-3); }
.hero__lead { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); max-width: 46ch; margin-bottom: var(--s-6); }

/* Ricerca a tre campi */
.cerca { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 0; max-width: 920px;
  background: var(--c-bianco-carta); border: 1px solid var(--c-pietra); border-radius: var(--r); padding: 6px; box-shadow: 0 10px 30px -18px rgba(31,42,46,.35); }
.cerca__campo { display: grid; gap: 2px; padding: 8px 14px; border-right: var(--filetto); min-width: 0; }
.cerca__campo:nth-child(3) { border-right: 0; }
.cerca__campo label { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-seppia); }
.cerca__campo select { appearance: none; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%231F2A2E' stroke-width='1.5'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right center;
  padding: 2px 18px 2px 0; font: inherit; font-weight: 500; color: var(--c-inchiostro); cursor: pointer; width: 100%; text-overflow: ellipsis; }
.cerca__campo select:focus-visible { outline: none; }
.cerca__campo:focus-within { box-shadow: inset 0 -2px 0 var(--c-adriatico); }
.cerca .btn { min-height: 56px; }
@media (max-width: 760px) {
  .cerca { grid-template-columns: 1fr; padding: 4px; }
  .cerca__campo { border-right: 0; border-bottom: var(--filetto); }
  .cerca__campo:nth-child(3) { border-bottom: 0; }
  .cerca .btn { margin: 4px; }
  .hero { min-height: 0; }
  .hero__media { position: relative; height: 46vh; min-height: 280px; }
  .hero { display: block; }
  .hero__contenuto { padding-block: 0 var(--s-7); margin-top: -96px; position: relative; }
}

/* Hero scheda (16:9 con testo sotto) */
.hero-scheda { padding-bottom: var(--s-6); }
.hero-scheda__media { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; max-height: 620px; width: 100%; }
.hero-scheda__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-scheda__media .timbro { position: absolute; right: var(--s-5); bottom: var(--s-5); background: var(--c-carta); border-radius: 50%; padding: 6px; box-shadow: 0 6px 20px -10px rgba(0,0,0,.5); }
.hero-scheda__testo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5); align-items: end; margin-top: var(--s-6); }
.hero-scheda__testo h1 { margin-bottom: var(--s-3); max-width: 22ch; }
.sottotitolo { font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem); color: var(--c-seppia); max-width: 60ch; margin: 0; }
.hero-scheda__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; margin-bottom: var(--s-4); }
@media (max-width: 760px) {
  .hero-scheda__media { aspect-ratio: 4 / 3; margin-inline: calc(var(--gutter) * -1); width: calc(100% + var(--gutter) * 2); border-radius: 0; }
  .hero-scheda__testo { grid-template-columns: 1fr; margin-top: var(--s-5); }
  .hero-scheda__media .timbro { right: var(--gutter); }
}

/* ---------- 10. Griglie e Loop Item ------------------------------------ */
.griglia { display: grid; gap: var(--s-6) var(--s-5); grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.griglia--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.griglia--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1024px) { .griglia, .griglia--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .griglia, .griglia--4, .griglia--2 { grid-template-columns: 1fr; } }

/* Loop Item 1 — Card esperienza (foto 4:5, timbro, titolo, comune, durata, per chi) */
.card-esp { position: relative; display: flex; flex-direction: column; height: 100%; }
.card-esp__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--c-carta-2); }
.card-esp__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card-esp:hover .card-esp__media img { transform: scale(1.03); }
.card-esp__timbro { position: absolute; top: 12px; right: 12px; background: var(--c-carta); border-radius: 50%; padding: 3px; }
.card-esp__stato { position: absolute; left: 12px; top: 12px; }
.card-esp__corpo { padding-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.card-esp__titolo { margin: 0; font-size: 1.25rem; }
.card-esp__titolo a { color: var(--c-inchiostro); text-decoration: none; }
.card-esp__titolo a::after { content: ''; position: absolute; inset: 0; z-index: 1; } /* card cliccabile, link esplicito */
.card-esp:hover .card-esp__titolo a { color: var(--c-terracotta); }
.card-esp__luogo { margin: 0; color: var(--c-seppia); font-size: .9375rem; display: flex; align-items: center; gap: 6px; }
.card-esp__dati { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: auto; padding-top: var(--s-3); border-top: var(--filetto); font-size: .9375rem; }
.card-esp__dati > span { display: inline-flex; align-items: center; gap: 6px; }
.card-esp__perchi { display: inline-flex; gap: 6px; margin-left: auto; color: var(--c-seppia); }
.card-esp__personaggio { font-size: .875rem; color: var(--c-oliva); display: flex; align-items: center; gap: 6px; margin: 0; }

/* Loop Item 2 — Card personaggio (ritratto tondo) */
.card-pers { position: relative; display: grid; justify-items: center; text-align: center; gap: var(--s-2); }
.card-pers__ritratto { width: 148px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 3px solid var(--c-carta); outline: 1px solid var(--c-pietra); transition: outline-color .2s; }
.card-pers__ritratto img { width: 100%; height: 100%; object-fit: cover; }
.card-pers:hover .card-pers__ritratto { outline-color: var(--c-oliva); }
.card-pers__nome { font-family: var(--f-display); font-size: 1.125rem; line-height: 1.2; margin: var(--s-2) 0 0; }
.card-pers__nome a { color: var(--c-inchiostro); text-decoration: none; }
.card-pers__nome a::after { content: ''; position: absolute; inset: 0; }
.card-pers:hover .card-pers__nome a { color: var(--c-oliva); }
.card-pers__date { font-size: var(--t-piccolo); color: var(--c-seppia); margin: 0; }
.card-pers__n { font-size: .8125rem; font-weight: 700; color: var(--c-oliva); margin: 0; }

/* Card personaggio orizzontale (Oliva) — «Il personaggio di questa esperienza» */
.card-pers-h { position: relative; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--s-6); align-items: center;
  padding: var(--s-5); border-radius: var(--r); background: var(--c-oliva); color: var(--c-carta); }
.card-pers-h__ritratto { aspect-ratio: 3 / 4; border-radius: var(--r); overflow: hidden; }
.card-pers-h__ritratto img { width: 100%; height: 100%; object-fit: cover; }
.card-pers-h h3 { font-family: var(--f-display); font-weight: 400; font-size: var(--t-h2); margin: var(--s-2) 0; }
.card-pers-h p { color: color-mix(in srgb, var(--c-carta) 88%, transparent); }
.card-pers-h .occhiello { color: var(--c-carta); }
.card-pers-h .link-freccia { color: var(--c-carta); }
.card-pers-h .link-freccia::after { content: ''; position: absolute; inset: 0; }
.card-pers-h__date { font-size: var(--t-piccolo); letter-spacing: .06em; }
.card-pers-h + .card-pers-h { margin-top: var(--s-4); }
@media (max-width: 640px) { .card-pers-h { grid-template-columns: 96px 1fr; gap: var(--s-4); padding: var(--s-4); } .card-pers-h h3 { font-size: 1.375rem; } .card-pers-h p:not(.card-pers-h__date) { display: none; } }

/* Loop Item 3 — Card itinerario */
.card-iti { position: relative; display: grid; grid-template-rows: auto 1fr; border: var(--filetto); border-radius: var(--r); overflow: hidden; background: var(--c-bianco-carta); height: 100%; }
.card-iti__media { aspect-ratio: 4 / 3; overflow: hidden; }
.card-iti__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card-iti:hover img { transform: scale(1.03); }
.card-iti__corpo { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.card-iti h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 1.375rem; }
.card-iti h3 a { color: var(--c-inchiostro); text-decoration: none; }
.card-iti h3 a::after { content: ''; position: absolute; inset: 0; }
.card-iti:hover h3 a { color: var(--c-terracotta); }
.card-iti p { margin: 0; color: var(--c-seppia); font-size: .9375rem; }
.card-iti__piede { margin-top: auto; padding-top: var(--s-3); display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; font-size: .875rem; }

/* ---------- 11. Tracciato (linea tratteggiata che collega) ------------- */
.come-box { position: relative; }
.come { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.come__traccia { position: absolute; left: 12%; right: 12%; top: 38px; height: 60px; z-index: 0; color: var(--c-pietra); pointer-events: none; }
.come__passo { position: relative; z-index: 1; text-align: center; display: grid; justify-items: center; align-content: start; gap: var(--s-2); }
.come__icona { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--c-carta); border: 1.5px solid currentColor; }
.come__icona .i { width: 30px; height: 30px; }
.come__passo:nth-child(2) { color: var(--c-oliva); } .come__passo:nth-child(3) { color: var(--c-adriatico); } .come__passo:nth-child(4) { color: var(--c-terracotta); }
.come__passo h3 { color: var(--c-inchiostro); margin: var(--s-3) 0 0; }
.come__passo p { color: var(--c-seppia); margin: 0; max-width: 32ch; }
.come__passo::before { counter-increment: passo; content: counter(passo); position: absolute; top: -6px; left: calc(50% + 24px); width: 26px; height: 26px; border-radius: 50%; background: var(--c-ocra); color: var(--c-inchiostro); font-weight: 700; font-size: .8125rem; display: grid; place-items: center; }
@media (max-width: 760px) {
  .come { grid-template-columns: 1fr; gap: var(--s-6); }
  .come__traccia { display: none; }
  .come__passo { grid-template-columns: 76px 1fr; text-align: left; justify-items: start; column-gap: var(--s-4); }
  .come__passo .come__icona { grid-row: span 2; }
  .come__passo h3 { margin: 0; align-self: end; }
  .come__passo::before { left: 54px; }
  .come__passo:not(:last-child)::after { content: ''; position: absolute; left: 37px; top: 84px; bottom: calc(var(--s-6) * -1 + 4px); border-left: var(--tratteggio); }
}

/* Tappe in verticale (itinerari, programma) */
.tappe { list-style: none; margin: 0; padding: 0; counter-reset: tappa; }
.tappa { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-4); padding-bottom: var(--s-5); }
.tappa:not(:last-child)::before { content: ''; position: absolute; left: 21px; top: 44px; bottom: 0; border-left: var(--tratteggio); }
.tappa__segno { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--c-carta); border: 1.5px solid var(--c-terracotta); color: var(--c-terracotta); font-weight: 700; }
.tappa__segno .i { width: 20px; height: 20px; }
.tappa__testo { padding-top: 9px; }
.tappa__testo p { margin: 0; }

/* ---------- 12. Etichetta dati (come quella di un prodotto tipico) ----- */
.etichetta { border: 1.5px solid var(--c-inchiostro); border-radius: var(--r); background: var(--c-bianco-carta); padding: var(--s-5); position: relative; }
.etichetta::before { content: ''; position: absolute; inset: 4px; border: 1px solid var(--c-pietra); border-radius: 2px; pointer-events: none; }
.etichetta__testa { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); border-bottom: 1.5px solid var(--c-inchiostro); padding-bottom: var(--s-3); margin-bottom: var(--s-2); }
.etichetta__testa h2 { font-family: var(--f-testo); font-size: .8125rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin: 0; }
.etichetta__codice { font-size: .75rem; color: var(--c-seppia); letter-spacing: .06em; }
.etichetta dl { margin: 0; display: grid; }
.etichetta__riga { display: grid; grid-template-columns: 22px 112px minmax(0, 1fr); gap: var(--s-3); padding: 10px 0; border-bottom: 1px dotted var(--c-pietra); align-items: start; font-size: .9375rem; }
.etichetta__riga:last-child { border-bottom: 0; }
.etichetta__riga .i { color: var(--c-seppia); margin-top: 2px; width: 20px; height: 20px; }
.etichetta dt { color: var(--c-seppia); }
.etichetta dd { margin: 0; font-weight: 500; }
.etichetta dd .piccolo { display: block; font-weight: 400; color: var(--c-seppia); }
.etichetta__prezzo { display: flex; justify-content: space-between; gap: var(--s-3); align-items: baseline; border-top: 1.5px solid var(--c-inchiostro); margin-top: var(--s-2); padding-top: var(--s-3); font-size: .9375rem; }
.etichetta__prezzo strong { font-size: 1.0625rem; text-align: right; }

/* ---------- 13. Scheda: layout a due colonne con aside fisso ---------- */
.scheda { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-8); align-items: start; }
.scheda__aside { position: sticky; top: 96px; display: grid; gap: var(--s-4); }
.scheda__corpo > section + section { margin-top: var(--s-8); }
.scheda__corpo h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.lead { font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem); line-height: 1.55; }
.lead::first-letter { font-family: var(--f-display); float: left; font-size: 3.6em; line-height: .82; padding: .08em .1em 0 0; color: var(--c-terracotta); }
@media (max-width: 1024px) { .scheda { grid-template-columns: 1fr; gap: var(--s-7); } .scheda__aside { position: static; } }

.riquadro { border: var(--filetto); border-radius: var(--r); padding: var(--s-5); background: var(--c-bianco-carta); }
.riquadro h3 { font-size: 1rem; letter-spacing: .02em; margin-bottom: var(--s-3); display: flex; align-items: center; gap: var(--s-2); }
.riquadro p:last-child, .riquadro ul:last-child { margin-bottom: 0; }
.riquadro--ocra { background: var(--c-ocra-velo); border-color: transparent; }
.riquadro--avviso { border-left: 3px solid var(--c-ocra); }
.date-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.date-lista li { display: grid; grid-template-columns: 52px 1fr; gap: var(--s-3); align-items: center; }
.data-foglio { display: grid; text-align: center; border: 1px solid var(--c-inchiostro); border-radius: var(--r); overflow: hidden; line-height: 1; background: #fff; }
.data-foglio b { background: var(--c-terracotta); color: #fff; font-size: .6875rem; letter-spacing: .1em; padding: 3px 0; text-transform: uppercase; }
.data-foglio span { font-family: var(--f-display); font-size: 1.375rem; padding: 5px 0 4px; }
.operatore { display: grid; grid-template-columns: 48px 1fr; gap: var(--s-3); align-items: center; }
.operatore__logo { width: 48px; height: 48px; border-radius: 50%; background: var(--c-adriatico); color: #fff; display: grid; place-items: center; font-weight: 700; letter-spacing: .04em; font-size: .875rem; }
.operatore__nome { font-weight: 700; margin: 0; }
.azioni-prenota { display: grid; gap: var(--s-2); }
.nota-vetrina { font-size: .8125rem; color: var(--c-seppia); margin: 0; display: flex; gap: 6px; }

/* Barra prenotazione fissa su mobile */
.barra-prenota { display: none; }
@media (max-width: 1024px) {
  .barra-prenota { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; align-items: center; gap: var(--s-3);
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--c-carta); border-top: 1px solid var(--c-pietra);
    box-shadow: 0 -8px 24px -16px rgba(31,42,46,.4); transform: translateY(110%); transition: transform .25s; }
  .barra-prenota.is-visibile { transform: none; }
  .barra-prenota__info { display: grid; line-height: 1.25; min-width: 0; margin-right: auto; }
  .barra-prenota__info strong { font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .barra-prenota__info span { font-size: .8125rem; color: var(--c-seppia); }
  body.ha-barra { padding-bottom: 76px; }
}

/* Programma con icone */
.programma { list-style: none; margin: 0; padding: 0; counter-reset: att; }
.programma li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: var(--s-4); padding: 12px 0; align-items: start; }
.programma li:not(:last-child)::before { content: ''; position: absolute; left: 19px; top: 52px; bottom: -8px; border-left: var(--tratteggio); }
.programma__icona { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--c-terracotta); background: var(--c-terracotta-velo); }
.programma__icona .i { width: 20px; height: 20px; }
.programma__testo { padding-top: 7px; }

/* Host (le persone sono il prodotto) */
.host { display: flex; gap: var(--s-4); align-items: center; padding: var(--s-4) var(--s-5); border-radius: var(--r); background: var(--c-carta-2); margin-top: var(--s-5); }
.host__iniziali { width: 56px; height: 56px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--c-terracotta); color: #fff; font-family: var(--f-display); font-size: 1.25rem; }
.host p { margin: 0; }
.host__nome { font-weight: 700; }
.host__ruolo { font-size: .9375rem; color: var(--c-seppia); }

/* Galleria + lightbox */
.galleria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.galleria li:first-child { grid-column: span 2; grid-row: span 2; }
.galleria button { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--r); overflow: hidden; cursor: zoom-in; background: var(--c-carta-2); }
.galleria img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform .4s; }
.galleria button:hover img { transform: scale(1.03); }
.galleria--2 li:first-child { grid-column: span 1; grid-row: span 1; }
.galleria--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lightbox { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: 1fr auto; background: rgba(20, 26, 28, .94); color: var(--c-carta); padding: var(--s-5); border: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; }
.lightbox:not([open]) { display: none; }
.lightbox::backdrop { background: rgba(20, 26, 28, .94); }
.lightbox__img { place-self: center; max-height: calc(100vh - 140px); width: auto; object-fit: contain; background: transparent; }
.lightbox__barra { display: flex; gap: var(--s-3); align-items: center; justify-content: space-between; padding-top: var(--s-3); font-size: var(--t-piccolo); }
.lightbox .icon-btn { color: var(--c-carta); border-color: rgba(246,241,231,.3); }
.lightbox .icon-btn:hover { background: rgba(246,241,231,.12); }

/* Segnaposto del video dell’operatore (il file verrà caricato sul sito) */
.video-segnaposto { display: grid; place-items: center; text-align: center; gap: var(--s-3); aspect-ratio: 16 / 9; border-radius: var(--r); padding: var(--s-5);
  background: repeating-linear-gradient(-45deg, var(--c-carta-2) 0 12px, var(--c-carta) 12px 24px); border: var(--filetto); }
.video-segnaposto p { margin: 0; max-width: 44ch; color: var(--c-seppia); font-size: .9375rem; }
.video-segnaposto--basso { aspect-ratio: auto; min-height: 200px; }
.video-frame { aspect-ratio: 16 / 9; width: 100%; border: 0; border-radius: var(--r); }

/* Badge qualità Storyliving */
.qualita { display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); align-items: center; padding: var(--s-5); border: 1.5px dashed var(--c-oliva); border-radius: var(--r); }
.qualita__sigillo { width: 84px; height: 84px; color: var(--c-oliva); }
.qualita p { margin: 0; font-size: .9375rem; color: var(--c-seppia); }
.qualita strong { color: var(--c-inchiostro); display: block; font-size: 1.0625rem; margin-bottom: 2px; }

/* ---------- 14. Mappe --------------------------------------------------- */
.mappa-home { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.italia { position: relative; max-width: 560px; margin-inline: auto; width: 100%; }
.italia svg { width: 100%; height: auto; overflow: visible; }
.italia path { fill: var(--c-carta-2); stroke: var(--c-seppia); stroke-width: .7; stroke-linejoin: round; transition: fill .2s; vector-effect: non-scaling-stroke; }
.italia a path { fill: var(--c-terracotta-chiaro); cursor: pointer; }
.italia a:hover path, .italia a:focus path, .italia a.is-hover path { fill: var(--c-terracotta); }
.italia a:focus { outline: none; }
.italia a:focus-visible path { stroke: var(--c-adriatico); stroke-width: 2.5; }
.italia .italia__vuota path { fill: var(--c-carta-2); stroke-dasharray: 2 2; }
.italia a.italia__vuota:hover path { fill: var(--c-pietra); }
.italia .punto { fill: var(--c-inchiostro); stroke: var(--c-carta); stroke-width: 1.5; pointer-events: none; }
.italia__nota { position: absolute; left: 0; bottom: 8%; transform: rotate(-4deg); white-space: nowrap; }
.italia__tip { position: absolute; pointer-events: none; transform: translate(-50%, -130%); background: var(--c-inchiostro); color: var(--c-carta); padding: 6px 10px; border-radius: var(--r); font-size: .8125rem; white-space: nowrap; opacity: 0; transition: opacity .15s; }
.italia__tip.is-visibile { opacity: 1; }
.lista-regioni { list-style: none; margin: 0; padding: 0; border-top: var(--filetto); }
.lista-regioni li { border-bottom: var(--filetto); }
.lista-regioni a { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-4); align-items: center; padding: 14px 4px; text-decoration: none; color: var(--c-inchiostro); transition: background .15s, padding .15s; }
.lista-regioni a:hover, .lista-regioni a.is-hover { background: var(--c-bianco-carta); padding-inline: 12px; }
.lista-regioni__nome { font-family: var(--f-display); font-size: 1.375rem; }
.lista-regioni__n { font-size: .9375rem; color: var(--c-seppia); text-align: right; }
.lista-regioni__n b { color: var(--c-terracotta); font-size: 1.125rem; }
.lista-regioni .timbro { width: 44px; height: 44px; }
.lista-regioni .is-vuota .lista-regioni__nome { color: var(--c-seppia); }
@media (max-width: 900px) { .mappa-home { grid-template-columns: 1fr; gap: var(--s-6); } .italia { max-width: 440px; } .italia__nota { display: none; } }

.mappa-box { position: relative; margin: 0; border: var(--filetto); border-radius: var(--r); overflow: hidden; background: var(--c-carta-2); }
.mappa-box__statica { display: block; width: 100%; height: auto; }
.mappa-box__statica path { fill: var(--c-bianco-carta); stroke: var(--c-seppia); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mappa-box__statica .regione-attiva { fill: var(--c-terracotta-velo); stroke: var(--c-terracotta); }
.mappa-box__statica .punto-mappa { fill: var(--c-terracotta); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.mappa-box__statica .punto-mappa--oliva { fill: var(--c-oliva); }
.mappa-box__statica .etichetta-mappa { font-family: var(--f-testo); font-weight: 700; fill: var(--c-inchiostro); paint-order: stroke; stroke: var(--c-bianco-carta); stroke-width: 3px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mappa-box__barra { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-4); background: var(--c-bianco-carta); border-top: var(--filetto); font-size: .875rem; }
.mappa-box__barra p { margin: 0; color: var(--c-seppia); display: flex; gap: 6px; align-items: center; }
/* ---------- 15. Striscia orizzontale di ritratti ----------------------- */
.striscia { display: grid; grid-auto-flow: column; grid-auto-columns: 172px; gap: var(--s-5); overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--s-2) 2px var(--s-5); margin: 0; list-style: none;
  scrollbar-width: thin; scrollbar-color: var(--c-pietra) transparent; }
.striscia > li { scroll-snap-align: start; }
.striscia-nav { display: flex; gap: var(--s-2); }
@media (min-width: 1240px) { .striscia--home { grid-auto-flow: row; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: visible; } .striscia--home + .striscia-nav, .striscia-nav--home { display: none; } }

/* ---------- 16. Personaggio in evidenza (home) -------------------------- */
.evidenza { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: center; }
.evidenza__ritratto { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r); overflow: hidden; max-width: 460px; }
.evidenza__ritratto img { width: 100%; height: 100%; object-fit: cover; }
.evidenza__ritratto figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-6) var(--s-4) var(--s-3); font-size: .75rem; color: var(--c-carta); background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.evidenza h2 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); margin-bottom: var(--s-2); }
.evidenza__frase { font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem); max-width: 46ch; }
.evidenza__tracce { margin: var(--s-6) 0 var(--s-5); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); list-style: none; padding: 0; position: relative; }
.evidenza__tracce::before { content: ''; position: absolute; left: 8%; right: 8%; top: 38%; border-top: var(--tratteggio); z-index: -1; }
.mini-esp { position: relative; display: grid; gap: var(--s-2); }
.mini-esp img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); width: 100%; }
.mini-esp a { color: var(--c-inchiostro); text-decoration: none; font-weight: 700; font-size: .9375rem; line-height: 1.3; }
.mini-esp a::after { content: ''; position: absolute; inset: 0; }
.mini-esp:hover a { color: var(--c-terracotta); }
.mini-esp span { font-size: .8125rem; color: var(--c-seppia); }
@media (max-width: 900px) { .evidenza { grid-template-columns: 1fr; gap: var(--s-6); } .evidenza__ritratto { max-width: 340px; } }
@media (max-width: 520px) { .evidenza__tracce { grid-template-columns: repeat(3, 60vw); overflow-x: auto; scroll-snap-type: x mandatory; } .evidenza__tracce > li { scroll-snap-align: start; } }

/* ---------- 17. Banda Ocra (Sfide) e Chi siamo ------------------------- */
.banda-ocra { background: var(--c-ocra); color: var(--c-inchiostro); position: relative; overflow: hidden; }
.banda-ocra__griglia { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); align-items: center; }
.banda-ocra h2 { margin-bottom: var(--s-2); }
.banda-ocra p { margin: 0; max-width: 54ch; font-size: 1.125rem; }
.banda-ocra .btn { --bg: var(--c-inchiostro); --bd: var(--c-inchiostro); --fg: var(--c-carta); }
.banda-ocra .btn:hover { --bg: #000; --bd: #000; }
.banda-ocra__stelle { position: absolute; right: -20px; top: -30px; width: 240px; opacity: .18; color: var(--c-inchiostro); pointer-events: none; }
@media (max-width: 760px) { .banda-ocra__griglia { grid-template-columns: 1fr; } }

.chi { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: center; }
.chi blockquote { font-family: var(--f-display); font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); line-height: 1.12; margin-bottom: var(--s-5); }
.chi blockquote em { font-style: normal; color: var(--c-terracotta); }
.loghi-qualita { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; margin-top: var(--s-5); }
.logo-q { display: inline-flex; align-items: center; gap: var(--s-2); padding: 10px 14px; border: var(--filetto); border-radius: var(--r); background: var(--c-bianco-carta); font-weight: 700; font-size: .875rem; letter-spacing: .06em; }
.logo-q small { display: block; font-weight: 500; letter-spacing: 0; color: var(--c-seppia); font-size: .75rem; }
@media (max-width: 900px) { .chi { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ---------- 18. Personaggio: hero diviso, biografia, fonti ------------- */
.pers-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: center; padding-block: var(--s-4) var(--s-8); }
.pers-hero__ritratto { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r); overflow: hidden; max-width: 480px; box-shadow: 0 0 0 1px var(--c-pietra), 14px 14px 0 -1px var(--c-carta-2), 14px 14px 0 0 var(--c-pietra); }
.pers-hero__ritratto img { width: 100%; height: 100%; object-fit: cover; }
.pers-hero h1 { margin: var(--s-3) 0 var(--s-2); font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); }
.pers-hero__epiteto { font-size: 1.25rem; color: var(--c-seppia); margin: 0 0 var(--s-4); }
.pers-hero__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-bottom: var(--s-5); font-size: .9375rem; }
.pers-hero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.pers-hero .citazione { margin: var(--s-5) 0 var(--s-6); padding-left: var(--s-5); border-left: 3px solid var(--c-ocra); }
.pers-hero .citazione p { margin: 0 0 6px; }
.pers-hero .citazione footer { font-size: var(--t-piccolo); color: var(--c-seppia); }
.salto-esperienze { display: inline-flex; align-items: center; gap: var(--s-3); padding: 10px 16px 10px 10px; border-radius: var(--r); background: var(--c-oliva); color: var(--c-carta); text-decoration: none; font-weight: 700; }
.salto-esperienze:hover { background: #4B552D; color: var(--c-carta); }
.salto-esperienze__n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--c-carta); color: var(--c-oliva); font-family: var(--f-display); font-size: 1.125rem; }
@media (max-width: 900px) { .pers-hero { grid-template-columns: 1fr; gap: var(--s-6); } .pers-hero__ritratto { max-width: 300px; } }

.in-breve { font-family: var(--f-display); font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem); line-height: 1.25; max-width: 30ch; margin: 0; }
.in-breve::before { content: '“'; display: block; font-size: 3em; line-height: 1; height: .5em; margin-top: .15em; color: var(--c-ocra); }

.bio { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.bio__indice { position: sticky; top: 104px; }
.bio__indice ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--c-pietra); counter-reset: cap; }
.bio__indice a { display: block; padding: 8px 0 8px 16px; margin-left: -2px; border-left: 2px solid transparent; color: var(--c-seppia); text-decoration: none; font-size: .9375rem; line-height: 1.35; }
.bio__indice a::before { counter-increment: cap; content: counter(cap, upper-roman) '. '; font-family: var(--f-display); color: var(--c-oliva); }
.bio__indice a:hover { color: var(--c-inchiostro); }
.bio__indice a.is-attivo { border-left-color: var(--c-oliva); color: var(--c-inchiostro); font-weight: 700; }
.bio__capitolo { max-width: var(--max-testo); padding-bottom: var(--s-6); }
.bio__capitolo + .bio__capitolo { border-top: var(--filetto); padding-top: var(--s-6); }
.bio__capitolo h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.75rem; }
.bio__num { display: block; font-family: var(--f-display); color: var(--c-oliva); font-size: 1rem; margin-bottom: 4px; }
@media (max-width: 900px) { .bio { grid-template-columns: 1fr; gap: var(--s-5); } .bio__indice { position: static; } .bio__indice ol { display: flex; overflow-x: auto; border-left: 0; border-bottom: 2px solid var(--c-pietra); } .bio__indice a { border-left: 0; border-bottom: 2px solid transparent; margin: 0 0 -2px; padding: 8px 12px; white-space: nowrap; } .bio__indice a.is-attivo { border-bottom-color: var(--c-oliva); } }

.luoghi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.luoghi__lista { list-style: none; margin: 0; padding: 0; counter-reset: luogo; }
.luoghi__lista li { display: grid; grid-template-columns: 32px 1fr; gap: var(--s-3); padding: 12px 0; border-bottom: var(--filetto); }
.luoghi__lista li::before { counter-increment: luogo; content: counter(luogo); width: 28px; height: 28px; border-radius: 50%; background: var(--c-oliva); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .8125rem; }
.luoghi__lista b { display: block; }
.luoghi__lista span { color: var(--c-seppia); font-size: .9375rem; }
@media (max-width: 900px) { .luoghi { grid-template-columns: 1fr; } }

.fonti { font-size: .9375rem; color: var(--c-seppia); }
.fonti ol { padding-left: 1.2em; }
.fonti a { color: var(--c-seppia); word-break: break-word; }
.proposta-nota { display: flex; gap: var(--s-3); align-items: start; padding: var(--s-4); border-radius: var(--r); background: var(--c-ocra-velo); font-size: .9375rem; }

/* ---------- 19. Regione ------------------------------------------------- */
.reg-hero { position: relative; isolation: isolate; color: var(--c-carta); min-height: min(76vh, 640px); display: grid; align-items: end; }
.reg-hero__media { position: absolute; inset: 0; z-index: -1; }
.reg-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.reg-hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,26,28,.15) 0%, rgba(20,26,28,.25) 40%, rgba(20,26,28,.78) 100%); }
.reg-hero__contenuto { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-6); align-items: end; padding-block: var(--s-9) var(--s-7); }
.reg-hero h1 { font-size: clamp(3rem, 2rem + 5vw, 5.5rem); margin: 0 0 var(--s-3); }
.reg-hero p { max-width: 58ch; font-size: 1.125rem; margin: 0; color: rgba(246,241,231,.92); }
.reg-hero .briciole, .reg-hero .briciole a, .reg-hero .briciole [aria-current] { color: rgba(246,241,231,.85); }
@media (max-width: 760px) { .reg-hero__contenuto { grid-template-columns: 1fr; gap: var(--s-4); } .reg-hero .timbro--grande { width: 96px; height: 96px; } }
.contatori { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--filetto); border-radius: var(--r); background: var(--c-bianco-carta); }
.contatori a, .contatori div { display: grid; gap: 2px; padding: var(--s-5); text-decoration: none; color: var(--c-inchiostro); border-right: var(--filetto); }
.contatori > :last-child { border-right: 0; }
.contatori a:hover { background: var(--c-carta-2); color: var(--c-inchiostro); }
.contatori b { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem); line-height: 1; }
.contatori span { color: var(--c-seppia); font-size: .9375rem; }
.contatori .c-esp b { color: var(--c-terracotta); } .contatori .c-pers b { color: var(--c-oliva); } .contatori .c-iti b { color: var(--c-adriatico); }
@media (max-width: 520px) { .contatori a, .contatori div { padding: var(--s-4) var(--s-3); } }
.prodotti { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-5); list-style: none; margin: 0; padding: 0; }
.prodotto { display: grid; gap: var(--s-3); }
.prodotto img { aspect-ratio: 1; object-fit: cover; border-radius: 50%; width: 100%; max-width: 200px; border: 6px solid var(--c-bianco-carta); outline: 1px solid var(--c-pietra); }
.prodotto h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 1.375rem; }
.prodotto p { margin: 0; color: var(--c-seppia); font-size: .9375rem; }

/* ---------- 23. Footer -------------------------------------------------- */
.piede { background: var(--c-inchiostro); color: rgba(246,241,231,.86); padding-top: var(--s-8); margin-top: 0; }
.piede a { color: rgba(246,241,231,.86); text-decoration: none; }
.piede a:hover { color: #fff; text-decoration: underline; }
.piede a.btn, .piede a.btn:hover { color: var(--fg); text-decoration: none; }
.piede__griglia { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s-7); padding-bottom: var(--s-7); }
.piede .marchio { margin: 0 0 var(--s-4); }
.piede .marchio__img { height: 64px; }
.piede h2 { font-family: var(--f-testo); font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ocra); margin-bottom: var(--s-4); }
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.piede p { font-size: .9375rem; }
.piede__proponi { display: grid; gap: var(--s-3); padding: var(--s-5); border: 1px dashed rgba(246,241,231,.3); border-radius: var(--r); margin-top: var(--s-5); }
.piede__proponi .btn { justify-self: start; }
.piede__tutte { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 700; color: var(--c-ocra); }
.piede__tutte .i { transition: transform .2s var(--posa); }
.piede__tutte:hover .i { transform: translateX(3px); }
.piede__fondo { border-top: 1px solid rgba(246,241,231,.14); padding-block: var(--s-5); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); font-size: .8125rem; color: rgba(246,241,231,.64); }
.piede__fondo ul { display: flex; flex-wrap: wrap; gap: var(--s-4); }
@media (max-width: 900px) { .piede__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } .piede__griglia > :first-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .piede__griglia { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ---------- 25. Pagine istituzionali ----------------------------------- */
.pagina-testa { padding-block: var(--s-4) var(--s-7); }
.pagina-testa h1 { max-width: 18ch; }
.pagina-testa .lead::first-letter { all: unset; }
.due-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
@media (max-width: 900px) { .due-col { grid-template-columns: 1fr; gap: var(--s-6); } }
.valori { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); list-style: none; padding: 0; margin: 0; }
.valori li { padding-top: var(--s-4); border-top: 2px solid var(--c-inchiostro); }
.valori h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; }
.valori p { color: var(--c-seppia); margin: 0; }
@media (max-width: 900px) { .valori { grid-template-columns: 1fr; } }
.passi-proponi { counter-reset: pp; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
.passi-proponi li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--s-4); row-gap: 2px; align-items: start; }
/* numero (::before) in colonna 1, titolo e testo incolonnati nella 2: senza questo
   il testo finisce sotto al numero, in una colonna larga 44px */
.passi-proponi li > * { grid-column: 2; }
.passi-proponi li::before { counter-increment: pp; content: counter(pp); width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--c-terracotta); color: var(--c-terracotta); display: grid; place-items: center; font-family: var(--f-display); font-size: 1.25rem; }
.passi-proponi b { display: block; }
.passi-proponi span { color: var(--c-seppia); }
.crediti-lista { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-4); }
.crediti-lista li { display: grid; grid-template-columns: 72px 1fr; gap: var(--s-3); font-size: .8125rem; color: var(--c-seppia); align-items: start; }
.crediti-lista img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r); }
.crediti-lista b { color: var(--c-inchiostro); display: block; font-size: .875rem; }
.crediti-lista a { color: var(--c-seppia); }
.errore-404 { text-align: center; padding-block: var(--s-9); display: grid; justify-items: center; gap: var(--s-4); }
.errore-404 h1 { margin: 0; }

/* ---------- 25b. Scheda esperienza: arricchimenti -------------------- */
/* Quota del luogo sulla foto d'apertura */
.hero-scheda__media .timbro { z-index: 1; }
.hero-scheda__quota { position: absolute; z-index: 1; left: var(--s-5); top: var(--s-5); display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; background: rgba(251,248,242,.92); color: var(--c-inchiostro);
  font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 760px) { .hero-scheda__quota { left: var(--gutter); top: var(--s-4); } }

/* Hero «copertina»: su desktop titolo, aggancio e prenotazione sopra la foto */
.hero-scheda__aggancio { margin: 0 0 var(--s-2); font-family: var(--f-mano); font-weight: 500; font-size: 1.75rem; line-height: 1.1; color: var(--c-terracotta); }
.hero-scheda__fatti { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: .9375rem; font-weight: 500; }
.hero-scheda__fatti li { display: inline-flex; align-items: center; gap: 6px; }
.hero-scheda__azioni { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (min-width: 901px) {
  .hero-scheda--copertina { position: relative; padding-bottom: 0; margin-bottom: var(--s-7); border-radius: var(--r); overflow: hidden; }
  .hero-scheda--copertina .hero-scheda__media { aspect-ratio: auto; height: clamp(560px, calc(100vh - 200px), 760px); max-height: none; border-radius: 0; }
  .hero-scheda--copertina .hero-scheda__media::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(20,27,30,.86) 0%, rgba(20,27,30,.62) 40%, rgba(20,27,30,.08) 72%, transparent 100%),
                linear-gradient(0deg, rgba(20,27,30,.55) 0%, transparent 45%); }
  .hero-scheda--copertina .hero-scheda__media .timbro { bottom: auto; top: var(--s-5); }
  .hero-scheda--copertina .hero-scheda__testo { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; margin: 0;
    padding: var(--s-7) clamp(32px, 4vw, 56px); grid-template-columns: minmax(0, 1fr) auto; align-items: end; color: var(--c-carta); }
  .hero-scheda--copertina .hero-scheda__testo > div:first-child { max-width: 680px; }
  .hero-scheda--copertina h1 { color: var(--c-carta); max-width: 18ch; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
  .hero-scheda--copertina .hero-scheda__aggancio { color: var(--c-ocra); font-size: 2rem; }
  .hero-scheda--copertina .sottotitolo { color: color-mix(in srgb, var(--c-carta) 90%, transparent); max-width: 54ch; }
  .hero-scheda--copertina .hero-scheda__fatti { padding-top: var(--s-4); border-top: 1px solid rgba(246,241,231,.28); max-width: 54ch; }
  .hero-scheda--copertina .hero-scheda__fatti .i { color: var(--c-ocra); }
  .hero-scheda--copertina .badge--regione { background: rgba(251,248,242,.92); }
  .hero-scheda--copertina .hero-scheda__azioni { flex-direction: column; align-items: stretch; min-width: 240px; }
  .hero-scheda--copertina .hero-scheda__condividi { --fg: var(--c-carta); --bd: rgba(246,241,231,.7); --bg: transparent; color: var(--c-carta); border-color: rgba(246,241,231,.7); }
  .hero-scheda--copertina .hero-scheda__condividi:hover { background: rgba(246,241,231,.12); color: var(--c-carta); }
}
@media (max-width: 900px) {
  .hero-scheda--copertina .hero-scheda__testo { grid-template-columns: 1fr; }
  .hero-scheda__fatti { color: var(--c-seppia); }
  .hero-scheda__azioni .btn { flex: 1 1 auto; }
}

/* Quattro numeri del luogo */
.cifre { list-style: none; margin: var(--s-6) 0 0; padding: var(--s-5) 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1.5px solid var(--c-inchiostro); border-bottom: 1.5px solid var(--c-inchiostro); }
.cifre li { padding: 0 var(--s-4); display: grid; gap: 4px; align-content: start; }
.cifre li + li { border-left: var(--tratteggio); }
.cifre li:first-child { padding-left: 0; }
.cifre b { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); line-height: 1; color: var(--c-terracotta); }
.cifre span { font-size: .8125rem; line-height: 1.35; color: var(--c-seppia); }
@media (max-width: 640px) {
  .cifre { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-5); }
  .cifre li:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* Programma con titolo e descrizione per tappa */
.programma--esteso li { padding: var(--s-3) 0 var(--s-4); }
.programma--esteso li:not(:last-child)::before { top: 56px; }
.programma--esteso .programma__testo { padding-top: 0; }
.programma__n { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-terracotta); }
.programma--esteso h3 { margin: 2px 0 6px; font-size: 1.1875rem; }
.programma--esteso p { margin: 0; color: var(--c-seppia); max-width: 60ch; }

/* Galleria a tre: una foto grande e due affiancate */
.galleria--trittico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.galleria--trittico li:first-child { grid-column: 1 / -1; grid-row: auto; }
.galleria--trittico li:first-child img { aspect-ratio: 16 / 9; }

/* Linea del tempo (verticale; variante orizzontale per la banda scura) */
.linea-tempo { list-style: none; margin: 0; padding: 0; position: relative; }
.linea-tempo::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; border-left: var(--tratteggio); border-left-color: var(--c-terracotta-chiaro); }
.linea-tempo li { position: relative; padding: 0 0 var(--s-5) var(--s-6); }
.linea-tempo li:last-child { padding-bottom: 0; }
.linea-tempo li::before { content: ''; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--c-carta); border: 2px solid var(--c-terracotta); }
.linea-tempo__anno { display: block; font-family: var(--f-display); font-size: 1.375rem; line-height: 1.2; color: var(--c-terracotta); }
.linea-tempo p { margin: 4px 0 0; max-width: 56ch; }

.storia-luogo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
.storia-luogo > * { min-width: 0; }
.storia-luogo__nota { margin-top: var(--s-5); transform: rotate(-2deg); max-width: 18ch; }
@media (max-width: 900px) { .storia-luogo { grid-template-columns: 1fr; gap: var(--s-6); } }

/* Banda personaggio: fondo Oliva (colore dei personaggi), ritratto in primo piano */
.banda-personaggio { background: #4E5830; color: var(--c-carta); position: relative; overflow: hidden; }
.banda-personaggio::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 90% at 90% 0%, rgba(217,164,65,.18), transparent 70%), radial-gradient(60% 70% at 0% 100%, rgba(31,42,46,.35), transparent 70%); }
.banda-personaggio > .wrap { position: relative; }
.banda-personaggio .occhiello { color: var(--c-ocra-velo); }
.banda-personaggio h2 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); margin-bottom: var(--s-2); }
.banda-personaggio a:not(.btn) { color: var(--c-ocra-velo); }
/* Il nome resta bianco come un titolo: si scopre link solo passandoci sopra. */
.banda-personaggio h2 a { color: inherit; text-decoration: none; text-underline-offset: .12em; }
.banda-personaggio h2 a:hover { color: var(--c-ocra-velo); text-decoration: underline; text-decoration-thickness: 2px; }
.banda-personaggio__testa { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8); align-items: start; }
.banda-personaggio__testa > * { min-width: 0; }
.banda-personaggio__ritratto { margin: 0; position: relative; max-width: 400px; }
.banda-personaggio__ritratto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r);
  border: 6px solid var(--c-bianco-carta); box-shadow: 0 24px 48px -24px rgba(0,0,0,.7); transform: rotate(-2deg); }
.banda-personaggio__ritratto figcaption { margin-top: var(--s-4); font-size: .75rem; color: color-mix(in srgb, var(--c-carta) 70%, transparent); }
.banda-personaggio__epiteto { font-size: var(--t-piccolo); letter-spacing: .06em; color: color-mix(in srgb, var(--c-carta) 75%, transparent); }
.banda-personaggio__lead { font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem); line-height: 1.55; max-width: 52ch; }
.banda-personaggio__colonne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-6);
  padding-top: var(--s-5); border-top: 1px solid rgba(246,241,231,.2); }
.banda-personaggio__colonne h3 { font-size: 1.0625rem; display: flex; gap: var(--s-2); align-items: center; color: var(--c-ocra-velo); }
.banda-personaggio__colonne p { margin: 0; font-size: .9375rem; color: color-mix(in srgb, var(--c-carta) 85%, transparent); }
.linea-tempo--orizzontale { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-8); }
.linea-tempo--orizzontale::before { left: 8px; right: 8px; top: 7px; bottom: auto; border-left: 0; border-top: 2px dashed rgba(244,227,189,.45); }
.linea-tempo--orizzontale li { padding: var(--s-6) 0 0; }
.linea-tempo--orizzontale li::before { top: 0; background: #4E5830; border-color: var(--c-ocra-velo); }
.linea-tempo--orizzontale .linea-tempo__anno { color: var(--c-ocra-velo); font-size: 1.5rem; }
.linea-tempo--orizzontale p { font-size: .875rem; line-height: 1.45; color: color-mix(in srgb, var(--c-carta) 82%, transparent); }
.banda-personaggio__piede { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-5);
  margin-top: var(--s-8); padding: var(--s-5); border: 1px dashed rgba(244,227,189,.55); border-radius: var(--r); }
.banda-personaggio__nota { max-width: 62ch; }
.banda-personaggio__nota h3 { font-size: 1rem; display: flex; gap: var(--s-2); align-items: center; margin-bottom: var(--s-2); }
.banda-personaggio__nota p { margin: 0; font-size: .9375rem; color: color-mix(in srgb, var(--c-carta) 85%, transparent); }
.banda-personaggio__fonti { margin: var(--s-5) 0 0; font-size: .75rem; color: color-mix(in srgb, var(--c-carta) 65%, transparent); }
@media (max-width: 1024px) { .linea-tempo--orizzontale { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-6); } .linea-tempo--orizzontale::before { display: none; } }
@media (max-width: 900px) {
  .banda-personaggio__testa { grid-template-columns: 1fr; gap: var(--s-6); }
  .banda-personaggio__ritratto { max-width: 260px; }
}
@media (max-width: 640px) {
  .banda-personaggio__colonne { grid-template-columns: 1fr; gap: var(--s-5); }
  .linea-tempo--orizzontale { grid-template-columns: 1fr; gap: 0; }
  .linea-tempo--orizzontale::before { display: block; left: 7px; right: auto; top: 8px; bottom: 8px; border-top: 0; border-left: 2px dashed rgba(244,227,189,.45); }
  .linea-tempo--orizzontale li { padding: 0 0 var(--s-5) var(--s-6); }
  .linea-tempo--orizzontale li::before { top: 6px; }
}

/* ---------- 25c. Collegamenti in evidenza e scheda personaggio arricchita */
/* Card esperienza «vetrina»: foto grande + testo, tutta cliccabile (link vero sul titolo) */
.esp-vetrina { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-radius: var(--r); overflow: hidden;
  background: var(--c-bianco-carta); border: var(--filetto); box-shadow: 0 18px 40px -28px rgba(31,42,46,.45); transition: box-shadow .25s, transform .25s; }
.esp-vetrina:hover { box-shadow: 0 24px 48px -26px rgba(31,42,46,.55); transform: translateY(-2px); }
.esp-vetrina__media { min-height: 100%; overflow: hidden; }
.esp-vetrina__media img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; transition: transform .6s ease; }
.esp-vetrina:hover .esp-vetrina__media img { transform: scale(1.03); }
.esp-vetrina__corpo { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.esp-vetrina__occhiello { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-terracotta); }
.esp-vetrina__titolo { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; }
.esp-vetrina__titolo a { color: var(--c-inchiostro); text-decoration: none; }
.esp-vetrina__titolo a::after { content: ''; position: absolute; inset: 0; }
.esp-vetrina:hover .esp-vetrina__titolo a { color: var(--c-terracotta); }
.esp-vetrina__gancio { margin: 0; color: var(--c-seppia); }
.esp-vetrina__fatti { list-style: none; margin: 0; padding: var(--s-3) 0; display: flex; flex-wrap: wrap; gap: 6px var(--s-4); font-size: .875rem; font-weight: 500;
  border-top: 1px dotted var(--c-pietra); border-bottom: 1px dotted var(--c-pietra); }
.esp-vetrina__fatti li { display: inline-flex; align-items: center; gap: 6px; }
.esp-vetrina__fatti .i { color: var(--c-terracotta); }
.esp-vetrina__tappe { margin: 0; padding: 0; list-style: none; counter-reset: tappa; display: grid; gap: 6px; font-size: .9375rem; }
.esp-vetrina__tappe li { display: grid; grid-template-columns: 24px 1fr; gap: var(--s-2); align-items: center; }
.esp-vetrina__tappe li::before { counter-increment: tappa; content: counter(tappa); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-terracotta-velo); color: var(--c-terracotta); font-size: .75rem; font-weight: 700; }
.esp-vetrina__cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: var(--s-2); padding: 12px 20px; border-radius: var(--r);
  background: var(--c-terracotta); color: #fff; font-weight: 700; transition: background .2s; }
.esp-vetrina:hover .esp-vetrina__cta { background: var(--c-terracotta-scuro); }
.esp-vetrina__cta .i { transition: transform .2s; }
.esp-vetrina:hover .esp-vetrina__cta .i { transform: translateX(3px); }
.esp-vetrina--compatta { grid-template-columns: 120px minmax(0, 1fr); box-shadow: none; }
.esp-vetrina--compatta .esp-vetrina__media img { min-height: 0; aspect-ratio: auto; }
.esp-vetrina--compatta .esp-vetrina__corpo { padding: var(--s-4) var(--s-5); gap: var(--s-2); }
.esp-vetrina--compatta .esp-vetrina__titolo { font-size: 1.25rem; }
.esp-vetrina--compatta .esp-vetrina__fatti { border: 0; padding: 0; font-size: .8125rem; }
.esp-vetrina--compatta .esp-vetrina__fatti li:nth-child(n+3) { display: none; }
.esp-vetrina--compatta .esp-vetrina__cta { background: none; color: var(--c-terracotta); padding: 0; font-size: .9375rem; }
.esp-vetrina--compatta:hover .esp-vetrina__cta { background: none; color: var(--c-terracotta-scuro); }
@media (max-width: 900px) {
  .esp-vetrina:not(.esp-vetrina--compatta) { grid-template-columns: 1fr; }
  .esp-vetrina:not(.esp-vetrina--compatta) .esp-vetrina__media img { min-height: 0; aspect-ratio: 16 / 9; }
  .esp-vetrina__corpo { padding: var(--s-5); }
}
@media (max-width: 520px) { .esp-vetrina--compatta { grid-template-columns: 96px minmax(0, 1fr); } }

/* Scorciatoie sotto la ricerca della home */
.scorciatoie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: var(--s-4) 0 0; }
.scorciatoie__label { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.scorciatoie a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgba(251,248,242,.94);
  border: 1px solid var(--c-pietra); color: var(--c-inchiostro); text-decoration: none; font-weight: 700; font-size: .875rem; box-shadow: 0 6px 16px -10px rgba(0,0,0,.4); }
.scorciatoie a:hover { border-color: var(--c-terracotta); color: var(--c-terracotta); }
.scorciatoie a .i { color: var(--c-terracotta); }
.scorciatoie a + a .i { color: var(--c-oliva); }

/* Home: personaggio in evidenza con esperienza collegata */
.evidenza__nome { color: inherit; text-decoration: none; }
.evidenza__nome:hover { color: var(--c-oliva); }
.evidenza__esperienza { margin: var(--s-5) 0 var(--s-5); max-width: 560px; }
.card-esp__nastro { position: absolute; z-index: 1; left: 12px; top: 12px; padding: 4px 10px; border-radius: 999px; background: var(--c-terracotta); color: #fff;
  font-size: .75rem; font-weight: 700; letter-spacing: .04em; }

/* Archivio: vetrina in cima */
.archivio-vetrina { margin-bottom: var(--s-7); }
.archivio-vetrina__pers { margin: var(--s-3) 0 0; font-size: .9375rem; color: var(--c-seppia); }
.archivio-vetrina__pers .i { margin-right: 4px; }
.archivio-vetrina__pers a { color: var(--c-oliva); font-weight: 700; }

/* Scheda esperienza: aggancio verso il personaggio */
.hero-scheda__aggancio a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.hero-scheda__aggancio a:hover { color: var(--c-ocra-velo); }
@media (max-width: 900px) { .hero-scheda__aggancio a:hover { color: var(--c-terracotta-scuro); } }

/* Scheda personaggio: accesso diretto all'esperienza, numeri, nota, altri luoghi */
.pers-hero__esperienza { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; max-width: 560px;
  padding: 10px 18px 10px 10px; border-radius: var(--r); background: var(--c-oliva); color: var(--c-carta); text-decoration: none;
  box-shadow: 0 14px 30px -20px rgba(31,42,46,.6); transition: background .2s; }
.pers-hero__esperienza:hover { background: #4B552D; color: var(--c-carta); }
.pers-hero__esperienza img { width: 96px; height: 72px; object-fit: cover; border-radius: 2px; }
.pers-hero__esperienza b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 1.125rem; line-height: 1.2; }
.pers-hero__esperienza-occhiello { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ocra-velo); margin-bottom: 2px; }
.pers-hero__esperienza-dati { display: block; font-size: .8125rem; opacity: .85; margin-top: 2px; }
.pers-hero__esperienza .i { transition: transform .2s; }
.pers-hero__esperienza:hover .i { transform: translateX(3px); }
.cifre--larga { margin-top: var(--s-7); max-width: 980px; }
.cifre--larga b { color: var(--c-oliva); }
.bio__nota { max-width: var(--max-testo); margin-top: var(--s-4); padding: var(--s-5); border-radius: var(--r); background: var(--c-oliva-velo); border-left: 3px solid var(--c-oliva); }
.bio__nota .occhiello { color: var(--c-oliva); margin-bottom: var(--s-2); }
.bio__nota p:last-child { margin: 0; }
.luoghi__altri { margin-top: var(--s-5); }
.luoghi__altri .occhiello { margin-bottom: var(--s-3); }

/* ---------- 25d. Personaggio: copertina a tutto schermo e racconto illustrato */
.pers-copertina { position: relative; isolation: isolate; min-height: clamp(600px, calc(100vh - 110px), 860px); display: grid; align-items: end;
  color: var(--c-carta); background: #17202A; overflow: hidden; }
.pers-copertina__media { position: absolute; inset: 0; z-index: -1; }
.pers-copertina__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; background: #22313A; }
.pers-copertina__media::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14,20,24,.94) 0%, rgba(14,20,24,.8) 34%, rgba(14,20,24,.25) 66%, rgba(14,20,24,.1) 100%),
              linear-gradient(0deg, rgba(14,20,24,.7) 0%, transparent 40%); }
.pers-copertina__contenuto { position: relative; display: grid; gap: var(--s-6); padding-block: var(--s-5) var(--s-7); min-height: inherit; align-content: space-between; }
.pers-copertina__testo { max-width: 640px; }
.pers-copertina .badges { margin-bottom: var(--s-4); }
.pers-copertina .badge--regione { background: rgba(251,248,242,.92); }
.pers-copertina h1 { margin: 0 0 var(--s-3); font-size: clamp(2.75rem, 1.6rem + 5vw, 5.5rem); line-height: .98; color: var(--c-carta); text-shadow: 0 4px 30px rgba(0,0,0,.4); }
.pers-copertina h1 span { display: block; font-size: .62em; color: var(--c-ocra); margin-top: .12em; }
.pers-copertina__epiteto { font-size: 1.25rem; margin: 0 0 var(--s-3); color: color-mix(in srgb, var(--c-carta) 88%, transparent); }
.pers-copertina .pers-hero__meta { color: color-mix(in srgb, var(--c-carta) 85%, transparent); margin-bottom: var(--s-5); }
.pers-copertina__gancio { font-family: var(--f-mano); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; color: var(--c-ocra-velo);
  margin: 0 0 var(--s-6); max-width: 30ch; padding-left: var(--s-4); border-left: 3px solid var(--c-ocra); }
.pers-copertina__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }
.pers-copertina .pers-hero__esperienza { background: rgba(95,107,58,.92); backdrop-filter: blur(4px); border: 1px solid rgba(244,227,189,.25); }
.pers-copertina__leggi { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-carta); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(246,241,231,.5); padding-bottom: 2px; }
.pers-copertina__leggi:hover { color: var(--c-ocra-velo); border-color: var(--c-ocra-velo); }
.pers-copertina__credito { position: absolute; right: var(--gutter); bottom: var(--s-3); margin: 0; font-size: .6875rem; color: rgba(246,241,231,.7); }
.briciole--chiare a, .briciole--chiare li { color: rgba(246,241,231,.8); }
.briciole.briciole--chiare [aria-current] { color: var(--c-carta); }
.briciole--chiare li:not(:last-child)::after { color: rgba(246,241,231,.4); }
.briciole--chiare a:hover { color: var(--c-carta); }
@media (max-width: 760px) {
  .pers-copertina { min-height: 0; }
  .pers-copertina__media { position: relative; min-height: 240px; z-index: 0; }
  .pers-copertina__media img { object-position: 60% 20%; }
  .pers-copertina__media::after { background: linear-gradient(0deg, #17202A 0%, rgba(23,32,42,.2) 45%, transparent 100%); }
  .pers-copertina { display: block; }
  .pers-copertina__media { height: 72vw; }
  .pers-copertina__contenuto { padding-block: var(--s-2) var(--s-6); min-height: 0; gap: var(--s-4); }
  .pers-copertina .briciole { padding-top: 0; }
  .pers-copertina__credito { position: static; }
  .pers-copertina__azioni { flex-direction: column; align-items: stretch; }
}

.pers-intro { background: var(--c-carta-2); padding-block: var(--s-8); }
.pers-intro__griglia { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: center; }
.pers-intro__griglia > * { min-width: 0; }
.cifre--colonna { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-5); margin: 0; }
.cifre--colonna li:nth-child(odd) { padding-left: 0; border-left: 0; }
.cifre--colonna b { color: var(--c-oliva); }
@media (max-width: 900px) { .pers-intro__griglia { grid-template-columns: 1fr; gap: var(--s-6); } }

/* Racconto: indice a linguette fisso in alto, capitoli alternati testo/immagine */
.racconto__indice { position: sticky; top: 72px; z-index: 5; margin: 0 calc(var(--gutter) * -1) var(--s-7); padding: var(--s-3) var(--gutter);
  background: color-mix(in srgb, var(--c-carta) 94%, transparent); backdrop-filter: blur(6px); border-bottom: var(--filetto); }
.racconto__indice ol { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; }
.racconto__indice a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--c-pietra);
  color: var(--c-seppia); text-decoration: none; font-size: .875rem; font-weight: 500; background: var(--c-bianco-carta); transition: background .2s, color .2s, border-color .2s; }
.racconto__indice a span { font-family: var(--f-display); color: var(--c-oliva); }
.racconto__indice a:hover { border-color: var(--c-oliva); color: var(--c-inchiostro); }
.racconto__indice a.is-attivo { background: var(--c-oliva); border-color: var(--c-oliva); color: var(--c-carta); }
.racconto__indice a.is-attivo span { color: var(--c-ocra-velo); }
.racconto__capitolo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-8); align-items: center; padding-block: var(--s-7); scroll-margin-top: 150px; }
.racconto__capitolo + .racconto__capitolo { border-top: var(--filetto); }
.racconto__capitolo:nth-child(even) .racconto__testo { order: 2; }
.racconto__testo { position: relative; max-width: var(--max-testo); }
.racconto__num { position: absolute; z-index: -1; top: 0; left: -.06em; font-family: var(--f-display); font-size: clamp(5rem, 3.5rem + 6vw, 8.5rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--c-oliva) 35%, transparent); pointer-events: none; }
.racconto__testo { isolation: isolate; padding-top: clamp(4.25rem, 3rem + 5vw, 6.75rem); }
.racconto__testo h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem); margin-bottom: var(--s-4); }
.racconto__testo p:last-child { margin-bottom: 0; }
.racconto__figura { margin: 0; }
.racconto__figura button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r); overflow: hidden;
  box-shadow: 0 0 0 1px var(--c-pietra), 12px 12px 0 -1px var(--c-carta-2), 12px 12px 0 0 var(--c-pietra); }
.racconto__figura img { width: 100%; object-fit: cover; transition: transform .5s ease; }
.racconto__figura button:hover img { transform: scale(1.03); }
.racconto__figura--ritratto { max-width: 380px; justify-self: center; }
.racconto__figura--ritratto img { aspect-ratio: 3 / 4; }
.racconto__figura--largo img { aspect-ratio: 4 / 3; }
.racconto__figura--quadro { max-width: 360px; justify-self: center; }
.racconto__figura--quadro button { transform: rotate(2deg); }
.racconto__figura figcaption { margin-top: var(--s-4); font-size: .75rem; color: var(--c-seppia); }
.racconto__nota { margin: 0; align-self: center; padding: var(--s-6); }
.racconto__nota p:not(.occhiello) { font-family: var(--f-display); font-size: 1.375rem; line-height: 1.35; }
@media (max-width: 900px) {
  .racconto__capitolo { grid-template-columns: 1fr; gap: var(--s-5); padding-block: var(--s-6); }
  .racconto__capitolo:nth-child(even) .racconto__testo { order: 0; }
  .racconto__indice { top: 64px; }
}

/* ---------- 26. Stampa ------------------------------------------------- */
@media print { .testata, .piede, .barra-prenota { display: none !important; } body { background: #fff; } }

/* ===== 20-taccuino.css ===== */
/* =========================================================================
   TORENE — sito statico, livello «taccuino»
   Componenti nuovi: segni a penna, nastro di carta, polaroid, bollo del prodotto,
   biglietti, scheda tecnica su carta millimetrata, taccuino aperto, cartoline.
   Si appoggia ai token di 10-base.css.
   ========================================================================= */

:root { --fondo: var(--c-carta); --ombra-foto: 0 1px 1px rgba(31,42,46,.08), 0 22px 38px -22px rgba(31,42,46,.6);
  /* una sola curva per tutto il taccuino: la carta che si posa */
  --posa: cubic-bezier(.2, .75, .3, 1);
  --ombra-alta: 0 1px 1px rgba(31,42,46,.08), 0 30px 50px -24px rgba(31,42,46,.62); }
.sezione--carta2 { --fondo: var(--c-carta-2); }
.macchina { font-family: var(--f-macchina); }

/* Inclinazione dei fogli. Usa `rotate`, non `transform`: così l'entrata in scena
   (che muove `translate`) e gli hover (che usano `transform`) non si pestano i piedi. */
.polaroid, .figurina, .cartolina, .lingue-tabella, .org__foglio, .busta, .viaggio__foglio,
.racconto__nota--foglio, .ingredienti-esp li, .biglietto-visita--grande, .mappa-box--foglio,
.organizzatori__passi li, .sapori__lista li, .iti-testa__mappa,
.album__carta, .arch-testa__figurina, .banco-sapori li { rotate: var(--ruota, 0deg); }

/* ---------- Segni a penna ------------------------------------------------- */
/* La linea vera: spessore costante comunque si stiri il riquadro.
   `max-width: none` annulla il reset su img/svg, altrimenti i segni larghi più del
   testo (il cerchio è 114%) venivano tagliati a 100%. */
.segno { position: absolute; overflow: visible; pointer-events: none; color: var(--c-terracotta); max-width: none; }
.segno__linea { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* Il tratto che scopre la linea, dentro la maschera: niente non-scaling-stroke,
   così `pathLength="1"` resta esatto e il segno arriva fino in fondo.
   Largo abbastanza da coprire la linea anche nei segni piccoli (vedi segno() in componenti.mjs). */
.segno__traccia { fill: none; stroke: #fff; stroke-width: var(--traccia, 10); stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .segno__traccia { stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.6,.1,.3,1) var(--ritardo-segno, .25s); }
.js .is-visibile > .segno .segno__traccia, .js .is-visibile .segno__traccia { stroke-dashoffset: 0; }

.a-mano { position: relative; display: inline-block; white-space: nowrap; }
.a-mano--cerchio .segno { left: -7%; right: -7%; top: -16%; width: 114%; height: 136%; }
.a-mano--sottolinea .segno { left: -1%; width: 102%; bottom: -.22em; height: .32em; color: var(--c-ocra); }
.a-mano--sottolinea .segno__linea { stroke-width: 3.2; }

/* ---------- Nastro di carta ----------------------------------------------- */
.nastro { position: absolute; z-index: 3; top: -13px; left: 50%; width: 92px; height: 26px; pointer-events: none;
  transform: translateX(-50%) rotate(var(--nr, -4deg)); background: rgba(217, 164, 65, .58);
  box-shadow: 0 1px 2px rgba(31,42,46,.12);
  clip-path: polygon(0 8%, 4% 0, 9% 10%, 14% 0, 100% 0, 100% 92%, 96% 100%, 91% 90%, 86% 100%, 0 100%);
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 6px, rgba(0,0,0,.84) 6px 12px);
  mask-image: repeating-linear-gradient(90deg, #000 0 6px, rgba(0,0,0,.84) 6px 12px); }
.nastro--terracotta { background: rgba(169, 75, 41, .42); --nr: 5deg; }
.nastro--adriatico { background: rgba(46, 94, 115, .36); --nr: 3deg; }
.nastro--sx { left: 10%; transform: rotate(-32deg); top: -6px; }
.nastro--dx { left: auto; right: 4%; transform: rotate(28deg); top: -4px; }

/* ---------- Polaroid ------------------------------------------------------ */
.polaroid { position: relative; margin: 0; padding: 10px 10px 12px; background: var(--c-bianco-carta); box-shadow: var(--ombra-foto);
  transition: transform .45s var(--posa), rotate .45s var(--posa), box-shadow .45s; }
.polaroid img { width: 100%; height: 100%; object-fit: cover; }
.polaroid figcaption { margin-top: 8px; font-family: var(--f-mano); font-weight: 500; font-size: 1.3rem; line-height: 1.1; text-align: center; color: var(--c-inchiostro); }
.polaroid a { color: inherit; text-decoration: none; display: block; }

/* ---------- Bollo «Esperienza Torene» ---------------------------------------- */
.bollo { display: inline-block; width: 120px; aspect-ratio: 1; color: var(--c-terracotta); line-height: 0; }
.bollo svg { width: 100%; height: 100%; overflow: visible; }
.bollo__giro { font-family: var(--f-macchina); font-size: 7.4px; letter-spacing: .95px; fill: currentColor; }
.bollo__n { font-family: var(--f-display); font-size: 22px; fill: currentColor; }
.bollo__sotto { font-family: var(--f-macchina); font-size: 6px; letter-spacing: 1.5px; fill: currentColor; }
.bollo--grande { width: min(240px, 60vw); }
.bollo--ruotato svg { transform: rotate(-14deg); }
@media (prefers-reduced-motion: no-preference) {
  .bollo--grande svg { animation: gira-bollo 80s linear infinite; }
  @keyframes gira-bollo { to { transform: rotate(360deg); } }
}

/* ---------- Rivela: carte posate una dopo l'altra ---------------------------- */
/* Entrata su `translate` + `opacity`: proprietà indipendenti, quindi un hover che
   usa `transform` non cancella più l'animazione (e viceversa). */
/* La transizione è dichiarata qui per tutti: questa regola vince su quella dei
   componenti, quindi deve elencare anche le proprietà che usano al passaggio del mouse. */
.js [data-rivela] { opacity: 0; translate: 0 20px;
  transition: opacity .55s ease var(--ritardo, 0ms), translate .65s var(--posa) var(--ritardo, 0ms),
    transform .35s var(--posa), rotate .35s var(--posa), box-shadow .35s ease, border-color .25s ease, background-color .2s ease; }
.js [data-rivela].is-visibile { opacity: 1; translate: none; }
/* Rete di sicurezza: se il JS non parte, dopo il caricamento la pagina resta leggibile. */
.js.carta-scoperta [data-rivela] { opacity: 1; translate: none; }

/* ---------- Bottoni in più -------------------------------------------------- */
.btn--grande { min-height: 56px; padding: 14px 28px; font-size: 1.0625rem; }
.btn--ocra { --bg: var(--c-ocra); --bd: var(--c-ocra); --fg: var(--c-inchiostro); }
.btn--ocra:hover { --bg: #E8B85A; --bd: #E8B85A; --fg: var(--c-inchiostro); }

/* ---------- Testata: selettore lingua e invito -------------------------------- */
.lingua { position: relative; }
.lingua__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--c-pietra); border-radius: 999px;
  background: transparent; cursor: pointer; font-family: var(--f-macchina); font-size: .875rem; letter-spacing: .08em; color: var(--c-inchiostro); }
.lingua__btn:hover, .lingua__btn[aria-expanded='true'] { background: var(--c-bianco-carta); border-color: var(--c-inchiostro); }
.lingua__freccia { transition: transform .2s; }
.lingua__btn[aria-expanded='true'] .lingua__freccia { transform: rotate(180deg); }
.lingua__foglio { position: absolute; right: 0; top: calc(100% + 10px); z-index: 70; width: 280px; padding: 14px 16px 12px;
  background: var(--c-bianco-carta); border: 1px solid var(--c-pietra); border-radius: 3px; box-shadow: 0 24px 40px -24px rgba(31,42,46,.55);
  background-image: repeating-linear-gradient(to bottom, transparent 0 39px, rgba(216,207,191,.6) 39px 40px); background-position: 0 34px; }
.lingua__foglio::before { content: ''; position: absolute; top: 0; bottom: 0; left: 44px; border-left: 1px solid rgba(169,75,41,.3); }
.lingua__titolo { margin: 0 0 6px; font-family: var(--f-macchina); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c-seppia); }
.lingua ul { list-style: none; margin: 0; padding: 0; }
.lingua__voce { position: relative; display: grid; grid-template-columns: 36px 1fr auto; gap: 4px; align-items: center; width: 100%; min-height: 40px; padding: 0;
  border: 0; background: none; text-align: left; cursor: pointer; font-size: .9375rem; color: var(--c-inchiostro); }
.lingua__voce:hover span:nth-child(2) { text-decoration: underline; text-underline-offset: .2em; }
.lingua__codice { font-family: var(--f-macchina); color: var(--c-seppia); }
.lingua__voce.is-attiva { font-weight: 700; color: var(--c-terracotta); }
.lingua__voce.is-attiva .lingua__codice { color: var(--c-terracotta); }
.lingua__presto { font-family: var(--f-mano); font-size: 1.05rem; color: var(--c-adriatico); }
.lingua__nota { margin: 8px 0 0; font-size: .75rem; color: var(--c-seppia); line-height: 1.4; }
.avviso-lingua { position: fixed; left: 50%; bottom: 24px; z-index: 95; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 10px 18px; border-radius: 3px; background: var(--c-inchiostro); color: var(--c-carta); font-family: var(--f-macchina); font-size: .9375rem;
  box-shadow: 0 16px 30px -16px rgba(0,0,0,.6); transition: opacity .25s, transform .25s; }
.avviso-lingua.is-visibile { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 1081px) {
  .nav__azioni .lingua { order: 0; }
  .nav__cta { white-space: nowrap; }
}
@media (min-width: 1081px) and (max-width: 1240px) { .nav__cta { display: none; } }
@media (max-width: 1080px) {
  .nav__azioni { grid-template-columns: auto 1fr; align-items: center; }
  .nav__azioni .btn { width: auto; }
  .lingua--menu .lingua__btn { min-height: 48px; padding-inline: 16px; background: var(--c-bianco-carta); }
  .lingua--menu .lingua__foglio { top: auto; bottom: calc(100% + 10px); left: 0; right: auto; }
}

/* ---------- Home · copertina ------------------------------------------------ */
.copertina { position: relative; overflow: hidden; padding-block: clamp(32px, 5vw, 72px) clamp(56px, 7vw, 104px); }
.copertina__righe { position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, transparent 0 35px, rgba(46,94,115,.11) 35px 36px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.7) 50%, transparent 85%); mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.7) 50%, transparent 85%); }
.copertina__righe::before { content: ''; position: absolute; top: 0; bottom: 0; left: clamp(12px, 3vw, 48px); width: 3px;
  border-left: 1px solid rgba(169,75,41,.38); border-right: 1px solid rgba(169,75,41,.16); }
.copertina__griglia { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.copertina__occhiello { display: inline-block; margin: 0 0 var(--s-5); padding: 4px 10px; border: 1px dashed var(--c-seppia); border-radius: 2px;
  font-family: var(--f-macchina); font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-seppia); transform: rotate(-1.2deg); }
.copertina h1 { font-size: clamp(2.7rem, 1.3rem + 4.4vw, 5.4rem); line-height: 1.02; letter-spacing: -.02em; max-width: 12ch; margin-bottom: var(--s-5); }
.copertina h1 .a-mano { color: var(--c-terracotta); }
.copertina__lead { font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.4375rem); line-height: 1.5; max-width: 40ch; margin-bottom: var(--s-6); }
.copertina__lead b { font-weight: 700; color: var(--c-terracotta-scuro); }
.copertina__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-bottom: var(--s-7); }
.passioni-rapide__label { margin: 0 0 var(--s-2); font-family: var(--f-mano); font-size: 1.5rem; line-height: 1; color: var(--c-terracotta); }
.passioni-rapide ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.passioni-rapide a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--c-pietra);
  background: var(--c-bianco-carta); color: var(--c-inchiostro); text-decoration: none; font-size: .9375rem; font-weight: 500; transition: border-color .2s, transform .2s; }
.passioni-rapide a:hover { border-color: var(--c-terracotta); color: var(--c-terracotta); transform: translateY(-1px); }
.passioni-rapide .i { color: var(--c-terracotta); }

/* Collage: i quattro ingredienti posati sulla pagina */
.collage { position: relative; aspect-ratio: 1 / 1.02; width: 100%; max-width: 640px; justify-self: end; }
.collage__voce { position: absolute; }
.collage__voce .polaroid img { aspect-ratio: inherit; }
.collage__voce--arte { left: 0; top: 7%; width: 37%; z-index: 2; }
.collage__voce--arte .polaroid { aspect-ratio: auto; }
.collage__voce--arte img { aspect-ratio: 3 / 4; }
.collage__voce--territorio { right: 2%; top: 0; width: 50%; z-index: 1; }
.collage__voce--territorio img { aspect-ratio: 4 / 4.4; }
.collage__voce--persone { left: 12%; bottom: 0; width: 40%; z-index: 3; }
.collage__voce--persone img { aspect-ratio: 4 / 4.6; }
.collage__voce--sapori { right: 0; bottom: 7%; width: 44%; z-index: 4; }
.collage__voce--sapori img { aspect-ratio: 4 / 3; }
.collage__voce:hover .polaroid { rotate: 0deg; transform: scale(1.035); box-shadow: var(--ombra-alta); }
.collage__voce:hover, .collage__voce:focus-within { z-index: 5; }
.collage__nota { position: absolute; margin: 0; font-family: var(--f-mano); font-weight: 500; font-size: clamp(1.4rem, 1rem + 1vw, 2rem); line-height: 1; color: var(--c-terracotta); white-space: nowrap; }
.collage__nota .segno { width: 70px; height: 38px; }
.collage__voce--arte .collage__nota { left: 4%; top: -13%; transform: rotate(-6deg); }
.collage__voce--arte .collage__nota .segno { display: none; }
.collage__voce--territorio .collage__nota { left: -2%; top: -11%; transform: rotate(-3deg); color: var(--c-adriatico); }
.collage__voce--persone .collage__nota { right: 104%; top: 38%; transform: rotate(-8deg); text-align: right; }
.collage__voce--persone .collage__nota .segno { left: 30%; top: 100%; width: 54px; height: 46px; }
.collage__voce--sapori .collage__nota { right: 2%; bottom: -15%; transform: rotate(3deg); color: var(--c-oliva); }
.collage__bollo { position: absolute; z-index: 6; left: 45%; top: 44%; width: 128px; transform: translate(-50%, -50%); }
.collage__bollo .bollo { width: 100%; background: var(--c-carta); border-radius: 50%; padding: 4px; box-shadow: 0 10px 24px -16px rgba(0,0,0,.6); }
.js .collage__voce { opacity: 0; transform: translateY(24px) scale(.97); animation: posa-foto .8s cubic-bezier(.2,.7,.3,1) forwards; }
.js .collage__voce--territorio { animation-delay: .1s; } .js .collage__voce--arte { animation-delay: .25s; }
.js .collage__voce--persone { animation-delay: .4s; } .js .collage__voce--sapori { animation-delay: .55s; }
.js .collage__bollo { opacity: 0; animation: timbra .45s cubic-bezier(.3,1.6,.5,1) .95s forwards; }
@keyframes posa-foto { to { opacity: 1; transform: none; } }
@keyframes timbra { from { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@media (max-width: 1000px) {
  .copertina__griglia { grid-template-columns: 1fr; }
  .collage { justify-self: center; max-width: 560px; margin-top: var(--s-5); }
}
@media (max-width: 560px) {
  .copertina h1 { font-size: clamp(2.4rem, 1.4rem + 5vw, 3.2rem); }
  .collage__nota { font-size: 1.25rem; }
  .collage__nota .segno { display: none; }
  .collage__voce--persone .collage__nota { right: auto; left: 0; top: auto; bottom: -13%; transform: rotate(-4deg); }
  .collage__bollo { width: 92px; }
}

/* ---------- Home · manifesto ---------------------------------------------- */
.manifesto { position: relative; overflow: hidden; background: var(--c-inchiostro); color: var(--c-carta); text-align: center; padding-block: clamp(72px, 10vw, 136px); }
.manifesto::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(60% 80% at 15% 0%, rgba(169,75,41,.25), transparent 70%), radial-gradient(50% 70% at 90% 100%, rgba(46,94,115,.35), transparent 70%); }
.manifesto .wrap { position: relative; }
.manifesto__intro { margin: 0 0 var(--s-4); font-family: var(--f-macchina); font-size: .875rem; letter-spacing: .24em; text-transform: uppercase; color: rgba(246,241,231,.6); }
.manifesto__no { display: flex; flex-wrap: wrap; justify-content: center; gap: .1em .7em; margin: 0 0 var(--s-5);
  font-family: var(--f-display); font-size: clamp(2rem, 1.1rem + 3.6vw, 4.25rem); line-height: 1.15; color: rgba(246,241,231,.42); }
.barrato { position: relative; display: inline-block; }
.barrato .segno { left: -5%; width: 110%; top: 48%; height: .45em; transform: translateY(-50%); color: var(--c-terracotta-chiaro); }
.barrato .segno__linea { stroke-width: 4; }
.barrato:nth-child(2) .segno { --ritardo-segno: .55s; } .barrato:nth-child(3) .segno { --ritardo-segno: .85s; }
.manifesto__si { font-size: clamp(2.3rem, 1.2rem + 4.2vw, 4.75rem); line-height: 1.08; max-width: 16ch; margin: 0 auto var(--s-6); color: var(--c-carta); }
.manifesto__si .a-mano { white-space: normal; }
.manifesto__si .segno { --ritardo-segno: 1.15s; }
.manifesto__testo { max-width: 58ch; margin: 0 auto; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); color: rgba(246,241,231,.82); }

/* ---------- Scheda tecnica del prodotto (carta millimetrata) ---------------- */
.scheda-prodotto { position: relative;
  background-color: var(--c-bianco-carta);
  background-image: linear-gradient(rgba(46,94,115,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(46,94,115,.09) 1px, transparent 1px),
    linear-gradient(rgba(46,94,115,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(46,94,115,.05) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; background-position: -1px -1px; border-block: 1px solid var(--c-pietra); }
.scheda-prodotto__testa { max-width: 820px; margin: 0 auto; text-align: center; }
.scheda-prodotto__testa .occhiello { justify-content: center; }
.scheda-prodotto__testa h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); line-height: 1.1; }
.scheda-prodotto__lead { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); color: var(--c-seppia); max-width: 62ch; margin: var(--s-4) auto 0; }
.scheda-prodotto__schema { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) minmax(0, 1fr);
  grid-template-areas: 'arte centro territorio' 'persone centro sapori'; gap: var(--s-6) var(--s-5); align-items: center; margin-top: var(--s-8); }
.scheda-prodotto__fili { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; color: var(--c-seppia); }
.scheda-prodotto__fili path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-dasharray: .012 .014; vector-effect: non-scaling-stroke; }
.js .scheda-prodotto__fili { opacity: 0; transition: opacity 1.2s ease .5s; } .js .scheda-prodotto__fili.is-visibile { opacity: .7; }
.scheda-prodotto__centro { grid-area: centro; text-align: center; position: relative; z-index: 1; }
.scheda-prodotto__centro .bollo { background: var(--c-bianco-carta); border-radius: 50%; }
.scheda-prodotto__centro .nota-mano { margin: var(--s-3) 0 0; transform: rotate(-3deg); }
.ingrediente { --ing: var(--c-terracotta); --ing-velo: var(--c-terracotta-velo);
  position: relative; z-index: 1; padding: var(--s-5) var(--s-5) var(--s-5) var(--s-5); background: var(--c-bianco-carta);
  border: 1.5px solid var(--c-inchiostro); border-radius: 3px; box-shadow: 7px 7px 0 var(--ing-velo); }
.ingrediente--arte { grid-area: arte; } .ingrediente--territorio { grid-area: territorio; }
.ingrediente--persone { grid-area: persone; } .ingrediente--sapori { grid-area: sapori; }
.ingrediente__n { position: absolute; top: 14px; right: 16px; font-family: var(--f-macchina); font-size: .875rem; color: var(--c-seppia); }
.ingrediente__icona { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; margin-bottom: var(--s-3); background: var(--ing-velo); color: var(--ing); }
.ingrediente__icona .i { width: 26px; height: 26px; }
.ingrediente h3 { margin: 0 0 6px; font-family: var(--f-display); font-weight: 400; font-size: 1.75rem; color: var(--ing); }
.ingrediente p { margin: 0; color: var(--c-seppia); }
.ing--terracotta { --ing: var(--c-terracotta); --ing-velo: var(--c-terracotta-velo); }
.ing--oliva { --ing: var(--c-oliva); --ing-velo: var(--c-oliva-velo); }
.ing--adriatico { --ing: var(--c-adriatico); --ing-velo: var(--c-adriatico-velo); }
.ing--ocra { --ing: #8A6214; --ing-velo: var(--c-ocra-velo); }
.specifiche { max-width: 920px; margin: var(--s-8) auto 0; padding: var(--s-5) var(--s-6) var(--s-4); background: var(--c-bianco-carta);
  border: 1.5px solid var(--c-inchiostro); border-radius: 3px; position: relative; box-shadow: 0 18px 36px -28px rgba(31,42,46,.5); }
.specifiche::before { content: ''; position: absolute; inset: 4px; border: 1px solid var(--c-pietra); pointer-events: none; }
.specifiche__titolo { margin: 0 0 var(--s-3); padding-bottom: var(--s-3); border-bottom: 1.5px solid var(--c-inchiostro);
  font-family: var(--f-macchina); font-size: .875rem; letter-spacing: .18em; text-transform: uppercase; }
.specifiche dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-6); margin: 0; }
.specifiche dl > div { display: grid; grid-template-columns: 116px 1fr; gap: var(--s-3); padding: 10px 0; border-bottom: 1px dotted var(--c-pietra); font-size: .9375rem; }
.specifiche dt { font-family: var(--f-macchina); color: var(--c-seppia); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; padding-top: 2px; }
.specifiche dd { margin: 0; font-weight: 500; }
@media (max-width: 900px) {
  .scheda-prodotto__schema { grid-template-columns: 1fr 1fr; grid-template-areas: 'centro centro' 'arte territorio' 'persone sapori'; gap: var(--s-4); }
  .scheda-prodotto__fili { display: none; }
  .specifiche dl { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .scheda-prodotto__schema { grid-template-columns: 1fr; grid-template-areas: 'centro' 'arte' 'territorio' 'persone' 'sapori'; }
  .specifiche { padding-inline: var(--s-4); }
  .specifiche dl > div { grid-template-columns: 100px 1fr; }
}

/* ---------- Vetrina e biglietti ----------------------------------------------- */
.filtro-passioni { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--s-6); }
.filtro-passioni__voce { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--c-pietra);
  background: var(--c-bianco-carta); cursor: pointer; font-size: .9375rem; font-weight: 500; transition: background .2s, color .2s, border-color .2s; }
.filtro-passioni__voce:hover { border-color: var(--c-inchiostro); }
.filtro-passioni__voce[aria-pressed='true'] { background: var(--c-inchiostro); border-color: var(--c-inchiostro); color: var(--c-carta); }
.filtro-passioni__conta { margin: 0 0 0 auto; font-family: var(--f-macchina); color: var(--c-seppia); }
.vetrina__griglia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); margin: 0; padding: 0; list-style: none; }
.vetrina__primo { grid-column: 1 / -1; }
.vetrina__griglia > li[hidden] { display: none; }
.vetrina__vuota { margin-top: var(--s-5); color: var(--c-seppia); }
.vetrina__vuota .link-freccia { border: 0; background: none; color: var(--c-terracotta); cursor: pointer; font-size: 1rem; }
@media (max-width: 1100px) { .vetrina__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vetrina__griglia { grid-template-columns: 1fr; } .filtro-passioni__conta { margin-left: 0; width: 100%; } }

.biglietto { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--c-bianco-carta); border: 1px solid var(--c-pietra);
  border-radius: 6px; box-shadow: 0 1px 0 rgba(31,42,46,.05), 0 20px 34px -28px rgba(31,42,46,.55);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, opacity .7s ease var(--ritardo, 0ms); }
.biglietto:hover { transform: translateY(-5px) rotate(-.5deg); box-shadow: 0 1px 0 rgba(31,42,46,.05), 0 30px 46px -26px rgba(31,42,46,.6); }
.biglietto__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 5px 5px 0 0; background: var(--c-carta-2); }
.biglietto__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.biglietto:hover .biglietto__media img { transform: scale(1.04); }
.biglietto__timbro { position: absolute; top: 12px; right: 12px; background: var(--c-carta); border-radius: 50%; padding: 3px; }
.biglietto__numero { position: absolute; left: 0; top: 16px; padding: 4px 12px 4px 10px; background: var(--c-carta); font-family: var(--f-macchina); font-size: .875rem;
  letter-spacing: .08em; color: var(--c-inchiostro); clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%); padding-right: 20px; }
.biglietto__corpo { padding: var(--s-4) var(--s-5) var(--s-4); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.biglietto__testa { display: flex; justify-content: space-between; gap: var(--s-3); margin: 0; font-family: var(--f-macchina); font-size: .6875rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-seppia); }
.biglietto__titolo { margin: 2px 0 0; font-family: var(--f-display); font-weight: 400; font-size: 1.375rem; line-height: 1.18; }
.biglietto__titolo a { color: var(--c-inchiostro); text-decoration: none; }
.biglietto__titolo a::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.biglietto:hover .biglietto__titolo a { color: var(--c-terracotta); }
.biglietto__aggancio { margin: 0; font-family: var(--f-mano); font-weight: 500; font-size: 1.35rem; line-height: 1.1; color: var(--c-terracotta); }
.biglietto__gancio { margin: var(--s-2) 0 0; color: var(--c-seppia); }
.biglietto__ingredienti { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; font-size: .875rem; line-height: 1.35; }
.biglietto__ingredienti li { display: grid; grid-template-columns: 98px 1fr; gap: 8px; padding: 6px 0; border-top: 1px dotted var(--c-pietra); }
.biglietto__ing-nome { display: inline-flex; align-items: center; gap: 5px; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ing); padding-top: 2px; }
.biglietto__matrice { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px var(--s-5); border-top: 2px dashed var(--c-pietra); font-size: .875rem; }
.biglietto__matrice::before, .biglietto__matrice::after { content: ''; position: absolute; top: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--fondo); border: 1px solid var(--c-pietra); }
.biglietto__matrice::before { left: -10px; clip-path: inset(0 0 0 50%); } .biglietto__matrice::after { right: -10px; clip-path: inset(0 50% 0 0); }
.biglietto__matrice > span { display: inline-flex; align-items: center; gap: 5px; }
.biglietto__matrice .i { color: var(--c-terracotta); }
.biglietto__prezzo { font-weight: 700; }
.biglietto__vai { margin-left: auto; display: grid !important; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-terracotta); color: #fff; transition: transform .25s; }
.biglietto__vai .i { color: #fff; width: 18px; height: 18px; }
.biglietto:hover .biglietto__vai { transform: translateX(3px); }
/* La freccia resta ferma a destra della matrice. Prima era un elemento in fila:
   con i comuni dal nome lungo (Corigliano-Rossano) andava a capo da sola e la riga
   dei biglietti si disallineava. Il biglietto grande ha la matrice in colonna e resta com'è. */
.biglietto:not(.biglietto--grande) .biglietto__matrice { padding-right: calc(var(--s-5) + 46px); }
.biglietto:not(.biglietto--grande) .biglietto__vai { position: absolute; right: var(--s-5); top: 50%; margin: 0; transform: translateY(-50%); }
.biglietto:not(.biglietto--grande):hover .biglietto__vai { transform: translate(3px, -50%); }
.biglietto--compatto .biglietto__matrice .biglietto__prezzo { display: none; }

/* Biglietto grande: foto, corpo e matrice verticale strappabile */
.biglietto--grande { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) 150px; }
.biglietto--grande .biglietto__media { aspect-ratio: auto; min-height: 480px; border-radius: 5px 0 0 5px; }
.biglietto--grande .biglietto__corpo { padding: var(--s-6); gap: 8px; }
.biglietto--grande .biglietto__titolo { font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.375rem); }
.biglietto--grande .biglietto__aggancio { font-size: 1.6rem; }
.biglietto--grande .biglietto__matrice { flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--s-3); border-top: 0; border-left: 2px dashed var(--c-pietra); padding: var(--s-5); }
.biglietto--grande .biglietto__matrice::before { top: -10px; left: -10px; clip-path: inset(50% 0 0 0); }
.biglietto--grande .biglietto__matrice::after { top: auto; bottom: -10px; right: auto; left: -10px; clip-path: inset(0 0 50% 0); }
.biglietto--grande .biglietto__prezzo { font-family: var(--f-display); font-weight: 400; font-size: 1.375rem; line-height: 1.15; }
.biglietto--grande .biglietto__vai { margin: var(--s-3) 0 0; width: 48px; height: 48px; }
@media (max-width: 1100px) {
  .biglietto--grande { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .biglietto--grande .biglietto__media { grid-row: span 2; min-height: 420px; }
  .biglietto--grande .biglietto__matrice { flex-direction: row; flex-wrap: wrap; align-items: center; border-left: 0; border-top: 2px dashed var(--c-pietra); }
  .biglietto--grande .biglietto__matrice::before { left: -10px; top: -10px; clip-path: inset(0 0 0 50%); }
  .biglietto--grande .biglietto__matrice::after { left: auto; right: -10px; top: -10px; bottom: auto; clip-path: inset(0 50% 0 0); }
  .biglietto--grande .biglietto__vai { margin: 0 0 0 auto; }
}
@media (max-width: 760px) {
  .biglietto--grande { display: flex; }
  .biglietto--grande .biglietto__media { min-height: 0; aspect-ratio: 4 / 3; border-radius: 5px 5px 0 0; }
  .biglietto--grande .biglietto__corpo { padding: var(--s-5); }
}

/* ---------- Home · viaggio sulla mappa ---------------------------------------- */
.viaggio { background: var(--c-carta-2); --fondo: var(--c-carta-2); }
.viaggio__griglia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.viaggio__foglio { --ruota: -1.2deg; position: relative; padding: 14px 14px 12px; background: var(--c-bianco-carta); box-shadow: var(--ombra-foto); max-width: 520px; margin-inline: auto; }
.viaggio__nota { position: absolute; left: 6%; bottom: 7%; margin: 0; transform: rotate(-6deg); font-size: 1.5rem; }
.mappa { display: block; width: 100%; height: auto; }
.mappa--italia { aspect-ratio: .86; }
.mappa__mare { fill: var(--c-adriatico-velo); }
.mappa__regione { fill: var(--c-bianco-carta); stroke: var(--c-seppia); stroke-width: .8; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .9; }
.mappa__regione.is-attiva { fill: var(--c-terracotta-velo); stroke: var(--c-terracotta); stroke-width: 1.2; opacity: 1; }
.mappa__percorso { fill: none; stroke: var(--c-terracotta-scuro); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mappa__traccia { fill: none; stroke: #fff; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .mappa__traccia { stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s cubic-bezier(.5,.1,.3,1) .3s; }
.js .mappa.is-visibile .mappa__traccia { stroke-dashoffset: 0; }
.mappa__punto circle { fill: var(--c-terracotta); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; transition: fill .2s; }
.mappa__punto.is-spento circle { fill: var(--c-seppia); opacity: .7; }
.mappa__punto a:hover circle, .mappa__punto a:focus-visible circle { fill: var(--c-inchiostro); }
.mappa__n { font-family: var(--f-testo); font-weight: 700; fill: #fff; pointer-events: none; }
.mappa__etichetta { font-family: var(--f-mano); font-weight: 500; fill: var(--c-inchiostro); paint-order: stroke; stroke: var(--c-bianco-carta); stroke-width: 3px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.regioni-lista { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--c-inchiostro); counter-reset: reg; }
.regioni-lista li { border-bottom: var(--tratteggio); }
.regioni-lista li:last-child { border-bottom: 1.5px solid var(--c-inchiostro); }
.regioni-lista a { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 24px; gap: var(--s-4); align-items: center; padding: 14px 8px;
  color: var(--c-inchiostro); text-decoration: none; transition: background .2s, padding .2s; }
.regioni-lista a:hover { background: var(--c-bianco-carta); padding-inline: 16px; }
.regioni-lista .timbro { width: 60px; height: 60px; transition: transform .3s; }
.regioni-lista a:hover .timbro { transform: rotate(-12deg) scale(1.06); color: var(--c-terracotta); }
.regioni-lista__testo { display: grid; line-height: 1.25; }
.regioni-lista__testo b { font-family: var(--f-display); font-weight: 400; font-size: 1.625rem; }
.regioni-lista__testo span { color: var(--c-seppia); font-size: .9375rem; }
.regioni-lista__esp { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-macchina); font-size: .8125rem; color: var(--c-terracotta-scuro); }
.regioni-lista__vai { color: var(--c-terracotta); transition: transform .2s; }
.regioni-lista a:hover .regioni-lista__vai { transform: translateX(4px); }
.timbro--medio { width: 64px; height: 64px; }
@media (max-width: 900px) { .viaggio__griglia { grid-template-columns: 1fr; } .viaggio__foglio { max-width: 420px; } }
@media (max-width: 560px) { .regioni-lista a { grid-template-columns: 52px minmax(0, 1fr) 20px; } .regioni-lista .timbro { width: 50px; height: 50px; } .regioni-lista__esp { display: none; } }

/* ---------- Home · taccuino aperto (ieri / oggi) ------------------------------- */
.taccuino-aperto { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--c-bianco-carta);
  border-radius: 6px; box-shadow: 0 2px 0 var(--c-pietra), 0 4px 0 #E9E1D2, 0 6px 0 var(--c-pietra), 0 36px 60px -36px rgba(31,42,46,.6); }
.taccuino-aperto::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 60px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(107,94,80,.12) 45%, rgba(107,94,80,.22) 50%, rgba(107,94,80,.12) 55%, transparent); }
.taccuino-aperto__pagina { position: relative; padding: clamp(24px, 4vw, 48px);
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(46,94,115,.1) 31px 32px); background-position: 0 20px; }
.taccuino-aperto__titolo { margin: 0; font-family: var(--f-mano); font-weight: 500; font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: .9; color: var(--c-oliva); }
.taccuino-aperto__pagina--oggi .taccuino-aperto__titolo { color: var(--c-terracotta); }
.taccuino-aperto__sotto { margin: 4px 0 var(--s-6); font-family: var(--f-macchina); font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-seppia); }
.figurine { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); }
.figurina { position: relative; padding: 8px 8px 12px; background: #fff; box-shadow: var(--ombra-foto);
  transition: transform .35s var(--posa), rotate .35s var(--posa), box-shadow .35s; }
.figurina:hover, .figurina:focus-within { rotate: 0deg; transform: translateY(-4px); box-shadow: var(--ombra-alta); }
.figurina__foto { position: relative; }
.figurina__foto .nastro { width: 60px; height: 20px; top: -14px; }
.figurina__foto img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: sepia(.15); }
.figurina__ruolo { margin: 8px 0 0; font-family: var(--f-macchina); font-size: .625rem; letter-spacing: .06em; color: var(--c-seppia); }
.figurina__nome { margin: 2px 0 0; font-family: var(--f-display); font-weight: 400; font-size: 1.0625rem; line-height: 1.15; }
.figurina__nome a { color: var(--c-inchiostro); text-decoration: none; }
.figurina__nome a::after { content: ''; position: absolute; inset: 0; }
.figurina:hover .figurina__nome a { color: var(--c-oliva); }
.figurina__esp { margin: 4px 0 0; font-family: var(--f-mano); font-size: 1.05rem; line-height: 1.05; color: var(--c-oliva); }
.biglietti-visita { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.biglietti-visita li:nth-child(odd) .biglietto-visita { rotate: -.6deg; }
.biglietti-visita li:nth-child(even) .biglietto-visita { rotate: .5deg; transform: translateX(10px); }
.biglietto-visita { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s-4); padding: 14px 18px; background: #fff; border: 1px solid var(--c-pietra);
  box-shadow: 0 12px 22px -18px rgba(31,42,46,.55); color: var(--c-inchiostro); text-decoration: none; transition: transform .3s, border-color .3s; }
.biglietto-visita { transition: transform .3s var(--posa), rotate .3s var(--posa), border-color .3s, box-shadow .3s; }
.biglietto-visita:hover, .biglietto-visita:focus-visible { rotate: 0deg; transform: translateY(-3px); border-color: var(--c-terracotta); color: var(--c-inchiostro); box-shadow: 0 20px 30px -20px rgba(31,42,46,.5); }
.biglietto-visita__nome { font-family: var(--f-display); font-size: 1.25rem; line-height: 1.2; }
.biglietto-visita__ruolo { grid-column: 1; font-size: .9375rem; color: var(--c-seppia); line-height: 1.4; }
.biglietto-visita__luogo { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-macchina); font-size: .75rem; color: var(--c-terracotta-scuro); white-space: nowrap; }
@media (max-width: 900px) {
  .taccuino-aperto { grid-template-columns: 1fr; }
  .taccuino-aperto::after { display: none; }
  .taccuino-aperto__pagina--oggi { border-top: 2px dashed var(--c-pietra); }
}
@media (max-width: 560px) {
  .figurine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .biglietto-visita { grid-template-columns: 1fr; }
  .biglietto-visita__luogo { grid-column: 1; grid-row: auto; }
  .biglietti-visita li:nth-child(even) .biglietto-visita { transform: none; }
}

/* ---------- Itinerari (card) ------------------------------------------------- */
.itinerari__griglia { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5); }
@media (max-width: 1100px) { .itinerari__griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .itinerari__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .itinerari__griglia { grid-template-columns: 1fr; } }
.card-iti { position: relative; display: flex; flex-direction: column; height: 100%; border: 1px solid var(--c-pietra); border-radius: 3px; overflow: visible;
  background: var(--c-bianco-carta); box-shadow: 0 16px 30px -26px rgba(31,42,46,.6); transition: transform .3s, box-shadow .3s; }
.card-iti:hover { transform: translateY(-4px); box-shadow: 0 26px 40px -26px rgba(31,42,46,.6); }
.card-iti__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px 3px 0 0; }
.card-iti__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.card-iti:hover .card-iti__media img { transform: scale(1.04); }
.card-iti__tappe { position: absolute; left: 10px; bottom: 10px; padding: 2px 10px; background: rgba(217,164,65,.88); font-family: var(--f-mano); font-size: 1.15rem; color: var(--c-inchiostro); transform: rotate(-3deg); }
.card-iti__corpo { padding: var(--s-4); display: flex; flex-direction: column; gap: 6px; flex: 1;
  background-image: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(46,94,115,.08) 27px 28px); }
.card-iti__regioni { margin: 0; display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-macchina); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-seppia); }
.card-iti h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 1.25rem; line-height: 1.2; }
.card-iti h3 a { color: var(--c-inchiostro); text-decoration: none; }
.card-iti h3 a::after { content: ''; position: absolute; inset: 0; }
.card-iti:hover h3 a { color: var(--c-terracotta); }
.card-iti p { margin: 0; color: var(--c-seppia); font-size: .875rem; line-height: 1.45; }
.card-iti__guida { margin-top: auto !important; padding-top: var(--s-2); font-family: var(--f-mano); font-size: 1.15rem !important; color: var(--c-oliva) !important; }

/* ---------- Home · per chi (cartoline) ------------------------------------------ */
.per-chi__griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.cartolina { position: relative; padding: var(--s-6) var(--s-6) var(--s-6); padding-right: 120px; background: var(--c-bianco-carta); border: 1px solid var(--c-pietra);
  box-shadow: 0 22px 40px -30px rgba(31,42,46,.6); --ruota: -.8deg; }
.cartolina--lontano { --ruota: .8deg; }
.cartolina__francobollo { position: absolute; top: 20px; right: 20px; width: 72px; height: 88px; display: grid; place-items: center; background: var(--c-terracotta-velo); color: var(--c-terracotta);
  outline: 1px solid var(--c-terracotta-chiaro); outline-offset: -6px;
  padding: 5px; background-clip: border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle at 4px 4px, transparent 2.4px, #000 2.9px) -4px -4px / 8px 8px;
  mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle at 4px 4px, transparent 2.4px, #000 2.9px) -4px -4px / 8px 8px; transform: rotate(4deg); }
.cartolina--lontano .cartolina__francobollo { background: var(--c-adriatico-velo); color: var(--c-adriatico); outline-color: rgba(46,94,115,.4); }
.cartolina__francobollo .i { width: 30px; height: 30px; }
.cartolina__occhiello { margin: 0 0 4px; font-family: var(--f-mano); font-size: 1.6rem; line-height: 1; color: var(--c-terracotta); }
.cartolina--lontano .cartolina__occhiello { color: var(--c-adriatico); }
.cartolina h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.cartolina p:last-child { margin-bottom: 0; }
.cartolina__en { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px dashed var(--c-pietra); font-family: var(--f-macchina); font-size: 1rem; color: var(--c-inchiostro); }
.cartolina__en span { display: block; margin-top: 6px; font-family: var(--f-testo); font-size: .8125rem; letter-spacing: .06em; color: var(--c-seppia); }
@media (max-width: 900px) { .per-chi__griglia { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cartolina { padding: var(--s-5); padding-top: 100px; } }

/* ---------- Home · organizzatori ------------------------------------------------ */
.organizzatori { position: relative; overflow: hidden; background: #1E4352; color: var(--c-carta); padding-block: var(--sezione); }
.organizzatori::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(246,241,231,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(246,241,231,.05) 1px, transparent 1px); background-size: 24px 24px; }
.organizzatori .wrap { position: relative; }
.organizzatori__griglia { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.organizzatori .occhiello { color: var(--c-ocra-velo); }
.organizzatori h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); max-width: 16ch; }
.organizzatori__lead { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); color: rgba(246,241,231,.85); max-width: 52ch; margin-bottom: var(--s-6); }
.organizzatori__passi { list-style: none; margin: 0; padding: 0; counter-reset: passo; display: grid; gap: var(--s-3); }
.organizzatori__passi li { counter-increment: passo; position: relative; display: grid; gap: 2px; padding: var(--s-4) var(--s-5) var(--s-4) 76px; background: var(--c-bianco-carta); color: var(--c-inchiostro); border-radius: 2px; box-shadow: 0 16px 30px -22px rgba(0,0,0,.6); }
.organizzatori__passi li:nth-child(odd) { --ruota: -.8deg; } .organizzatori__passi li:nth-child(even) { --ruota: .6deg; }
.organizzatori__passi li::before { content: counter(passo, decimal-leading-zero); position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-family: var(--f-macchina); font-size: 1.5rem; color: var(--c-terracotta); }
.organizzatori__passi b { font-family: var(--f-display); font-weight: 400; font-size: 1.25rem; }
.organizzatori__passi span { color: var(--c-seppia); font-size: .9375rem; }
@media (max-width: 900px) { .organizzatori__griglia { grid-template-columns: 1fr; } }

/* ---------- Piede ---------------------------------------------------------------- */
.piede__lingue { display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; font-size: .875rem; margin-top: var(--s-4); }
.piede__lingue .i { align-self: center; }
.piede__lingue-elenco { opacity: .62; }
.piede__lingue-elenco b { font-weight: 400; opacity: 1; color: var(--c-carta); }
.piede__lingue em { font-family: var(--f-mano); font-style: normal; font-size: 1.1rem; color: var(--c-ocra); }
.piede__crediti { margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid rgba(246,241,231,.15); font-size: .8125rem; color: rgba(246,241,231,.7); }
.piede__crediti summary { cursor: pointer; font-weight: 700; color: rgba(246,241,231,.85); }
.piede__crediti ul { list-style: none; padding: 0; margin: var(--s-3) 0 0; columns: 2; column-gap: var(--s-6); }
.piede__crediti li { break-inside: avoid; margin-bottom: 4px; }
.piede__crediti a { color: var(--c-ocra-velo); }
.piede__demo { font-family: var(--f-macchina); }
@media (max-width: 760px) { .piede__crediti ul { columns: 1; } }

/* ---------- Scheda esperienza -------------------------------------------------- */
.etichetta--prodotto { padding-top: var(--s-4); }
.etichetta__marchio { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1.5px solid var(--c-inchiostro); }
.etichetta__tipo { margin: 0; font-family: var(--f-macchina); font-size: 1.125rem; letter-spacing: .04em; color: var(--c-terracotta); }
.etichetta__marchio h2 { margin: 2px 0 0; font-family: var(--f-testo); font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.bollo--etichetta { width: 74px; transform: rotate(-10deg); flex: none; }
.etichetta__codice { margin: 6px 0 0; font-family: var(--f-macchina); font-size: .75rem; letter-spacing: .08em; color: var(--c-seppia); }
.etichetta__ingredienti { margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1.5px solid var(--c-inchiostro); }
.etichetta__ingredienti p { margin: 0 0 6px; font-family: var(--f-macchina); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-seppia); }
.etichetta__ingredienti ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px var(--s-3); }
.etichetta__ingredienti li { position: relative; padding-left: 26px; font-weight: 700; color: var(--ing); font-size: .9375rem; }
.etichetta__ingredienti .segno { left: 0; top: 0; width: 18px; height: 18px; color: var(--ing); }
.etichetta__ingredienti .segno__linea { stroke-width: 2.4; }
.etichetta--prodotto .segno__traccia { stroke-dashoffset: 0; }

.ingredienti-esp { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.ingredienti-esp li { position: relative; padding: var(--s-5); background: var(--c-bianco-carta); border: 1px solid var(--c-pietra); border-top: 4px solid var(--ing);
  box-shadow: 0 16px 28px -24px rgba(31,42,46,.55);
  background-image: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(46,94,115,.08) 27px 28px); background-position: 0 14px; }
.ingredienti-esp__nome { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ing); }
.ingredienti-esp h3 { margin: 6px 0 4px; font-family: var(--f-display); font-weight: 400; font-size: 1.375rem; }
.ingredienti-esp p { margin: 0; color: var(--c-seppia); font-size: .9375rem; }
@media (max-width: 640px) { .ingredienti-esp { grid-template-columns: 1fr; } }

.incontri { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.biglietto-visita--grande { display: grid; grid-template-columns: 1fr; gap: 4px; padding: var(--s-5) var(--s-5) var(--s-5) calc(var(--s-5) + 8px); position: relative;
  border-left: 6px solid var(--c-terracotta); }
.biglietto-visita--grande .biglietto-visita__nome { font-size: 1.5rem; }
.biglietto-visita--grande .biglietto-visita__ruolo { grid-column: auto; }
.biglietto-visita--grande .biglietto-visita__luogo { grid-column: auto; grid-row: auto; justify-self: start; white-space: normal; margin-top: var(--s-2); }
@media (max-width: 640px) { .incontri { grid-template-columns: 1fr; } }

.riquadro--certificata { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: center; border: 1.5px dashed var(--c-oliva); }
.riquadro--certificata .i { color: var(--c-oliva); }
.riquadro--certificata p { margin: 0; font-size: .9375rem; color: var(--c-seppia); }
.riquadro--certificata strong { display: block; color: var(--c-inchiostro); }

.banda-personaggio__ritratto { position: relative; }
.banda-personaggio__ritratto .nastro { top: -8px; z-index: 2; }
.banda-personaggio__citazione { margin: var(--s-5) 0 0; padding-left: var(--s-5); border-left: 3px solid var(--c-ocra); max-width: 52ch; }
.banda-personaggio__citazione p { margin: 0 0 6px; font-family: var(--f-display); font-size: 1.375rem; line-height: 1.35; }
.banda-personaggio__citazione footer { font-size: .8125rem; color: color-mix(in srgb, var(--c-carta) 70%, transparent); }
.banda-personaggio__gancio { margin: var(--s-5) 0 0; font-family: var(--f-mano); font-size: 1.75rem; line-height: 1.15; color: var(--c-ocra-velo); max-width: 32ch; }
.banda-personaggio__altri { margin: var(--s-5) 0 0; font-size: .9375rem; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.banda-personaggio--persone { background: #213C47; }
.banda-persone { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-8); align-items: center; }
.banda-persone__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); color: var(--c-inchiostro); }
.banda-persone__lista .biglietto-visita { color: var(--c-inchiostro); }
@media (max-width: 900px) { .banda-persone { grid-template-columns: 1fr; gap: var(--s-6); } }

.mappa-box--foglio { --ruota: .8deg; overflow: visible; background: var(--c-bianco-carta); padding: 10px; border: 0; box-shadow: var(--ombra-foto); }
.mappa-box--foglio .mappa { border: 1px solid var(--c-pietra); }
.mappa-box--foglio .mappa-box__barra { border: 0; padding-inline: 4px; background: none; }

/* ---------- Scheda personaggio ------------------------------------------------- */
.pers-copertina__corpo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-7); align-items: end; }
.pers-copertina__ritratto { width: clamp(220px, 22vw, 320px); margin-bottom: var(--s-6); }
.pers-copertina__ritratto .polaroid img { aspect-ratio: 3 / 4; }
.pers-copertina--polaroid .pers-copertina__media::after {
  background: linear-gradient(90deg, rgba(14,20,24,.92) 0%, rgba(14,20,24,.74) 40%, rgba(14,20,24,.35) 75%, rgba(14,20,24,.25) 100%), linear-gradient(0deg, rgba(14,20,24,.7) 0%, transparent 40%); }
.js .pers-copertina__ritratto .polaroid { animation: posa-foto .9s cubic-bezier(.2,.7,.3,1) .3s both; }
@media (max-width: 900px) { .pers-copertina__corpo { grid-template-columns: 1fr; } .pers-copertina__ritratto { display: none; } }
.pers-citazione { margin: var(--s-6) 0 0; padding-left: var(--s-5); border-left: 3px solid var(--c-oliva); max-width: 48ch; }
.pers-citazione p { margin: 0 0 6px; font-family: var(--f-mano); font-size: 1.6rem; line-height: 1.2; color: var(--c-oliva); }
.pers-citazione footer { font-size: .8125rem; color: var(--c-seppia); }
.racconto__nota--foglio { position: relative; background: var(--c-bianco-carta); border: 1px solid var(--c-pietra); box-shadow: var(--ombra-foto); --ruota: 1.5deg;
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(46,94,115,.1) 31px 32px); background-position: 0 18px; }
.racconto__nota--foglio .occhiello { color: var(--c-oliva); }
.vetrina__griglia--due { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
.itinerari__griglia--pochi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .vetrina__griglia--due { grid-template-columns: 1fr; } .itinerari__griglia--pochi { grid-template-columns: 1fr; } }
.luoghi .mappa-box--foglio { align-self: start; }

/* ---------- Pagina regione ------------------------------------------------------ */
.reg-hero__zona { margin: 0 0 var(--s-2); font-family: var(--f-macchina); font-size: .875rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(246,241,231,.85); }
.reg-hero__motto { font-family: var(--f-mano); font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem) !important; line-height: 1.1; color: var(--c-ocra-velo) !important; }
.reg-hero .timbro--grande { width: 150px; height: 150px; }
.reg-intro__griglia { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: center; }
.reg-intro__testo { font-family: var(--f-display); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.35; margin: 0; }
.reg-intro__nota { margin: var(--s-5) 0 0; transform: rotate(-2deg); }
.contatori--4 { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contatori--4 li { display: grid; gap: 2px; padding: var(--s-5); border-right: var(--filetto); border-bottom: var(--filetto); }
.contatori--4 li:nth-child(2n) { border-right: 0; } .contatori--4 li:nth-child(n+3) { border-bottom: 0; }
.contatori .c-sap b { color: #8A6214; }
@media (max-width: 900px) { .reg-intro__griglia { grid-template-columns: 1fr; gap: var(--s-6); } }

.in-arrivo { margin-top: var(--s-7); }
.in-arrivo__titolo { margin: 0 0 var(--s-4); color: var(--c-seppia); }
.in-arrivo__titolo .nota-mano { display: block; font-size: 1.75rem; }
.in-arrivo__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s-5) var(--s-4); }
.in-arrivo__lista li { display: grid; gap: 4px; font-size: .875rem; line-height: 1.35; }
.in-arrivo__lista b { font-weight: 700; } .in-arrivo__lista span { color: var(--c-seppia); }
.in-arrivo__foto { position: relative; margin-bottom: 6px; }
.in-arrivo__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; filter: grayscale(.85) sepia(.2); opacity: .8; }
.in-arrivo__bollino { position: absolute; right: 8px; bottom: 8px; padding: 2px 10px; border: 1.5px solid var(--c-terracotta); border-radius: 2px; background: rgba(251,248,242,.9);
  font-family: var(--f-macchina); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-terracotta); transform: rotate(-6deg); }

.sapori__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-7) var(--s-6); }
.sapori__lista li { display: grid; gap: var(--s-2); align-content: start; }
.sapori__lista .polaroid { max-width: 240px; margin-bottom: var(--s-3); }
.sapori__lista .polaroid img { aspect-ratio: 1; }
.sapori__lista h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 1.375rem; }
.sapori__lista p { margin: 0; color: var(--c-seppia); font-size: .9375rem; }
.sapori__lista li .polaroid { rotate: 0deg; }

.figurine--riga { grid-template-columns: repeat(auto-fill, minmax(170px, 210px)); gap: var(--s-6); }
.itinerari__griglia--colonna { grid-template-columns: 1fr; max-width: 420px; }

.altre-regioni__lista { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.altre-regioni__lista a { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: var(--s-3); align-items: center; padding: var(--s-3); border: 1px solid var(--c-pietra); border-radius: 3px; background: var(--c-bianco-carta); color: var(--c-inchiostro); text-decoration: none; transition: transform .25s, border-color .25s; }
.altre-regioni__lista .timbro { grid-row: span 2; }
.altre-regioni__lista b { font-family: var(--f-display); font-weight: 400; font-size: 1.25rem; align-self: end; }
.altre-regioni__lista span { font-size: .8125rem; color: var(--c-seppia); align-self: start; line-height: 1.3; }
.altre-regioni__lista a:hover { transform: translateY(-3px); border-color: var(--c-terracotta); }
.altre-regioni__lista a:hover .timbro { color: var(--c-terracotta); transform: rotate(-10deg); transition: transform .3s; }
@media (max-width: 1000px) { .altre-regioni__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .altre-regioni__lista { grid-template-columns: 1fr; } }
.reg-hero .briciole { text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.reg-hero__media::before { content: ''; position: absolute; inset: 0 0 auto; height: 40%; z-index: 1; background: linear-gradient(180deg, rgba(20,26,28,.45), transparent); }
.itinerari__griglia--colonna .card-iti { flex-direction: row; }
.itinerari__griglia--colonna .card-iti__media { flex: 0 0 160px; aspect-ratio: auto; border-radius: 3px 0 0 3px; }
.itinerari__griglia--colonna .card-iti__tappe { font-size: 1rem; }

/* ---------- Scheda itinerario ------------------------------------------------- */
.iti-testa { position: relative; padding-bottom: var(--s-7);
  background-image: repeating-linear-gradient(to bottom, transparent 0 35px, rgba(46,94,115,.1) 35px 36px); }
.iti-testa__griglia { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-top: var(--s-5); }
.iti-testa__occhiello { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 var(--s-4); font-family: var(--f-macchina); font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-adriatico); }
.iti-testa h1 { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem); line-height: 1.04; max-width: 14ch; }
.iti-testa__sotto { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); color: var(--c-seppia); max-width: 44ch; }
.iti-testa__fatti { list-style: none; margin: var(--s-5) 0 0; padding: var(--s-4) 0 0; border-top: 1.5px solid var(--c-inchiostro); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); font-weight: 500; }
.iti-testa__fatti li { display: inline-flex; align-items: center; gap: 6px; }
.iti-testa__fatti .i { color: var(--c-terracotta); }
.iti-testa__nota { margin: var(--s-6) 0 0; transform: rotate(-2deg); font-size: 1.9rem; }
.iti-testa__mappa { --ruota: 1.4deg; }
@media (max-width: 900px) { .iti-testa__griglia { grid-template-columns: 1fr; } }

.iti-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-8); align-items: start; }
.iti-intro__testo { max-width: var(--max-testo); }
.iti-guida { text-align: center; padding: var(--s-5); }
.iti-guida .figurina { max-width: 240px; margin: var(--s-3) auto var(--s-4); }
.iti-guida__frase { font-family: var(--f-mano); font-size: 1.5rem; line-height: 1.15; color: var(--c-oliva); margin: 0; }
@media (max-width: 900px) { .iti-intro { grid-template-columns: 1fr; gap: var(--s-6); } }

.iti-tappe { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); max-width: 900px; }
.iti-tappa { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-4); align-items: center; }
.iti-tappa:not(:last-child)::before { content: ''; position: absolute; left: 27px; top: 50%; height: calc(100% + var(--s-5)); border-left: 2px dashed var(--c-terracotta-chiaro); }
.iti-tappa__n { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c-terracotta); color: #fff; font-family: var(--f-display); font-size: 1.5rem; box-shadow: 0 0 0 6px var(--c-carta-2); }
.iti-tappa--arrivo .iti-tappa__n { background: var(--c-seppia); opacity: .7; }
.iti-tappa__scheda { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: var(--s-5); align-items: center; padding: 12px var(--s-5) 12px 12px; background: var(--c-bianco-carta);
  border: 1px solid var(--c-pietra); border-radius: 3px; color: var(--c-inchiostro); text-decoration: none; box-shadow: 0 16px 30px -26px rgba(31,42,46,.6); transition: transform .3s, border-color .3s; }
a.iti-tappa__scheda:hover { transform: translateX(4px); border-color: var(--c-terracotta); color: var(--c-inchiostro); }
.iti-tappa__foto { position: relative; display: block; }
.iti-tappa__foto .nastro { width: 64px; height: 20px; top: -16px; }
.iti-tappa__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.iti-tappa--arrivo .iti-tappa__foto img { filter: grayscale(.85) sepia(.2); opacity: .8; }
.iti-tappa--arrivo .iti-tappa__scheda { background: transparent; border-style: dashed; box-shadow: none; }
.iti-tappa__testo { display: grid; gap: 4px; }
.iti-tappa__tipo { font-family: var(--f-macchina); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-seppia); }
.iti-tappa__testo b { font-family: var(--f-display); font-weight: 400; font-size: 1.375rem; line-height: 1.2; }
.iti-tappa__aggancio { font-family: var(--f-mano); font-size: 1.3rem; line-height: 1.1; color: var(--c-terracotta); }
.iti-tappa--arrivo .iti-tappa__aggancio { color: var(--c-seppia); }
.iti-tappa__dati { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--c-seppia); }
.iti-tappa__vai { color: var(--c-terracotta); width: 24px; height: 24px; }
@media (max-width: 640px) {
  .iti-tappa { grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); }
  .iti-tappa__n { width: 40px; height: 40px; font-size: 1.125rem; }
  .iti-tappa:not(:last-child)::before { left: 19px; }
  .iti-tappa__scheda { grid-template-columns: 1fr; padding: 10px 10px var(--s-4); gap: var(--s-3); }
  .iti-tappa__vai { display: none; }
}
.iti-pratico { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-5); margin-top: var(--s-8); padding: var(--s-5) var(--s-6); background: var(--c-bianco-carta); border: 1.5px solid var(--c-inchiostro); border-radius: 3px; }
.iti-pratico h3 { font-size: 1rem; display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.iti-pratico h3 .i { color: var(--c-terracotta); }
.iti-pratico p { margin: 0; color: var(--c-seppia); font-size: .9375rem; }
.itinerari__griglia--quattro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .itinerari__griglia--quattro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .itinerari__griglia--quattro { grid-template-columns: 1fr; } }

/* ---------- Chi siamo ---------------------------------------------------------- */
.chi-testa { position: relative; overflow: hidden; padding-bottom: clamp(48px, 7vw, 96px); }
.chi-testa__griglia { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-top: var(--s-5); }
.chi-testa h1 { font-size: clamp(2.5rem, 1.4rem + 3.8vw, 4.6rem); line-height: 1.04; max-width: 14ch; }
.chi-testa h1 .a-mano { color: var(--c-terracotta); }
.chi-testa__firma { font-family: var(--f-mano); font-size: 1.75rem; line-height: 1.15; color: var(--c-terracotta); transform: rotate(-1.5deg); max-width: 26ch; margin: var(--s-5) 0 0; }
.chi-testa__collage { position: relative; aspect-ratio: 1; max-width: 520px; justify-self: end; width: 100%; }
.chi-testa__collage .polaroid { position: absolute; }
.chi-testa__collage .polaroid:nth-child(1) { left: 0; top: 4%; width: 74%; }
.chi-testa__collage .polaroid:nth-child(1) img { aspect-ratio: 16 / 10; }
.chi-testa__collage .polaroid:nth-child(2) { right: 0; top: 30%; width: 40%; z-index: 2; }
.chi-testa__collage .polaroid:nth-child(2) img { aspect-ratio: 4 / 5; }
.chi-testa__collage .polaroid:nth-child(3) { left: 10%; bottom: 0; width: 48%; z-index: 1; }
.chi-testa__collage .polaroid:nth-child(3) img { aspect-ratio: 4 / 3; }
.js .chi-testa__collage .polaroid { animation: posa-foto .8s cubic-bezier(.2,.7,.3,1) both; }
.js .chi-testa__collage .polaroid:nth-child(2) { animation-delay: .15s; } .js .chi-testa__collage .polaroid:nth-child(3) { animation-delay: .3s; }
@media (max-width: 900px) { .chi-testa__griglia { grid-template-columns: 1fr; } .chi-testa__collage { justify-self: center; max-width: 440px; } }

.regole { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.regole li { position: relative; padding: var(--s-6) var(--s-5) var(--s-5); background: var(--c-bianco-carta); border: 1px solid var(--c-pietra); box-shadow: 0 18px 32px -26px rgba(31,42,46,.55);
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(46,94,115,.09) 31px 32px); background-position: 0 22px; }
.regole__n { position: absolute; top: -22px; left: var(--s-5); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-terracotta); color: #fff; font-family: var(--f-display); font-size: 1.25rem; }
.regole h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.625rem; }
.regole p { margin: 0; color: var(--c-seppia); }
@media (max-width: 900px) { .regole { grid-template-columns: 1fr; gap: var(--s-7); } }

.pubblico { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.1fr); gap: var(--s-6); align-items: start; }
.pubblico__voce .nota-mano { margin: 0; font-size: 2.2rem; }
.pubblico__voce h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; margin-top: 4px; }
.pubblico__voce p:last-child { color: var(--c-seppia); margin: 0; }
.lingue-tabella { padding: var(--s-5); background: var(--c-bianco-carta); border: 1.5px solid var(--c-inchiostro); border-radius: 3px; --ruota: 1deg; }
.lingue-tabella__titolo { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--s-3); padding-bottom: var(--s-3); border-bottom: 1.5px solid var(--c-inchiostro); font-family: var(--f-macchina); font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; }
.lingue-tabella ul { list-style: none; margin: 0; padding: 0; }
.lingue-tabella li { display: grid; grid-template-columns: 36px 1fr auto; gap: var(--s-2); align-items: center; padding: 8px 0; border-bottom: 1px dotted var(--c-pietra); }
.lingue-tabella li:last-child { border-bottom: 0; }
.lingue-tabella__codice { font-family: var(--f-macchina); color: var(--c-seppia); }
.lingue-tabella__stato { font-family: var(--f-mano); font-size: 1.15rem; color: var(--c-adriatico); }
.lingue-tabella__stato.is-attiva { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-testo); font-size: .8125rem; font-weight: 700; color: var(--c-oliva); }
@media (max-width: 1000px) { .pubblico { grid-template-columns: 1fr 1fr; } .lingue-tabella { grid-column: 1 / -1; max-width: 480px; } }
@media (max-width: 640px) { .pubblico { grid-template-columns: 1fr; } }

.org { background: #1E4352; color: var(--c-carta); position: relative; }
.org::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(246,241,231,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(246,241,231,.05) 1px, transparent 1px); background-size: 24px 24px; }
.org .wrap { position: relative; }
.org .occhiello { color: var(--c-ocra-velo); }
.org h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); }
.org__lead { font-size: 1.1875rem; color: rgba(246,241,231,.85); max-width: 50ch; }
.org__griglia { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.org__passi { margin-top: var(--s-6); }
.org__passi li::before { border-color: var(--c-ocra); color: var(--c-ocra); }
.org__passi span { color: rgba(246,241,231,.75); }
.org__passi b { color: var(--c-carta); font-size: 1.125rem; }
.org__cosa { display: grid; gap: var(--s-5); }
.org__foglio { padding: var(--s-5) var(--s-5) var(--s-4); background: var(--c-bianco-carta); color: var(--c-inchiostro); border-radius: 2px; box-shadow: 0 20px 40px -24px rgba(0,0,0,.6); --ruota: 1deg;
  background-image: repeating-linear-gradient(to bottom, transparent 0 35px, rgba(46,94,115,.12) 35px 36px); background-position: 0 50px; }
.org__foglio--giallo { background-color: #F7E9C6; --ruota: -1.2deg; }
.org__foglio-titolo { margin: 0 0 var(--s-3); font-family: var(--f-mano); font-size: 1.9rem; line-height: 1; color: var(--c-terracotta); }
.spunte { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.spunte li { position: relative; padding: 6px 0 6px 34px; line-height: 1.4; }
.spunte .segno { left: 2px; top: 6px; width: 20px; height: 20px; color: var(--c-oliva); }
@media (max-width: 900px) { .org__griglia { grid-template-columns: 1fr; } }

.rete { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-5); }
.rete .biglietto-visita { height: 100%; align-content: start; }
.rete .biglietto-visita--grande { border-left-color: var(--c-adriatico); }

.busta { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-6); padding: clamp(24px, 4vw, 56px); background: var(--c-bianco-carta);
  border: 1px solid var(--c-pietra); box-shadow: 0 30px 50px -36px rgba(31,42,46,.6); --ruota: -.5deg;
  background-image: repeating-linear-gradient(-45deg, var(--c-terracotta) 0 14px, transparent 14px 28px, var(--c-adriatico) 28px 42px, transparent 42px 56px);
  background-size: 100% 8px; background-repeat: no-repeat; background-position: 0 0; }
.busta::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: inherit; background-position: 0 0; }
.busta h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.busta__indirizzo { position: relative; align-self: end; padding: var(--s-6) 0 0 var(--s-5); border-left: 1px dashed var(--c-pietra); }
.busta__bollo { position: absolute; right: 0; top: -12px; width: 110px; }
.busta__a { margin: 0; font-family: var(--f-mano); font-size: 1.4rem; color: var(--c-seppia); }
.busta__nome, .busta__riga { margin: 0; padding: 6px 0; border-bottom: 1px solid var(--c-pietra); font-family: var(--f-mano); font-size: 1.7rem; line-height: 1.2; }
@media (max-width: 760px) { .busta { grid-template-columns: 1fr; } .busta__indirizzo { border-left: 0; padding-left: 0; } }

/* ===== 30-archivi.css ===== */
/* =========================================================================
   TORENE — le quattro pagine indice (esperienze, regioni, personaggi, itinerari).
   Stesso taccuino: testata rigata con margine rosso, carte che si posano,
   e in fondo il rimando agli altri indici.
   ========================================================================= */

/* ---------- Testata comune degli archivi ---------------------------------- */
.arch-testa { position: relative; overflow: hidden; padding-block: var(--s-3) clamp(40px, 5vw, 72px); }
.arch-testa__righe { position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, transparent 0 35px, rgba(46, 94, 115, .1) 35px 36px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .65) 55%, transparent 88%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .65) 55%, transparent 88%); }
.arch-testa__righe::before { content: ''; position: absolute; top: 0; bottom: 0; left: clamp(12px, 3vw, 48px); width: 3px;
  border-left: 1px solid rgba(169, 75, 41, .38); border-right: 1px solid rgba(169, 75, 41, .16); }
.arch-testa .wrap { position: relative; }
.arch-testa__griglia { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.arch-testa__testo > * { min-width: 0; }
.arch-testa h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.5rem); line-height: 1.04; letter-spacing: -.015em; max-width: 16ch; margin-bottom: var(--s-5); }
.arch-testa h1 .a-mano { color: var(--c-terracotta); }
.arch-testa__lead { font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem); line-height: 1.55; max-width: 52ch; margin: 0; color: var(--c-seppia); }
.arch-testa__nota { margin: var(--s-5) 0 0; rotate: -1.6deg; }

.arch-testa__bollo { justify-self: center; width: min(260px, 60vw); color: var(--c-terracotta); }
.arch-testa__bollo .bollo { width: 100%; }
@media (prefers-reduced-motion: no-preference) { .arch-testa__bollo .bollo svg { animation: gira-bollo 90s linear infinite; } }
.arch-testa__mappa { max-width: 420px; justify-self: center; width: 100%; }
.arch-testa__mappa .mappa { aspect-ratio: .78; }

.arch-testa__figurine { position: relative; display: flex; justify-content: center; align-items: flex-start; padding-top: var(--s-5); }
.arch-testa__figurina { position: relative; width: clamp(110px, 16vw, 164px); padding: 8px 8px 10px; background: #fff;
  box-shadow: var(--ombra-foto); margin-inline: -10px; transition: transform .35s var(--posa), rotate .35s var(--posa); }
.arch-testa__figurina:nth-child(2) { margin-top: 26px; z-index: 2; }
.arch-testa__figurina:nth-child(3) { margin-top: 10px; }
.arch-testa__figurina img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: sepia(.15); }
.arch-testa__figurine:hover .arch-testa__figurina { rotate: 0deg; transform: translateY(-4px); }

/* I numeri dell'indice: una striscia di schedario sotto la testata */
.arch-cifre { list-style: none; margin: clamp(32px, 5vw, 56px) 0 0; padding: var(--s-5) 0 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1.5px solid var(--c-inchiostro); }
.arch-cifre li { padding: 0 var(--s-4); display: grid; gap: 4px; align-content: start; }
.arch-cifre li + li { border-left: var(--tratteggio); }
.arch-cifre li:first-child { padding-left: 0; }
.arch-cifre b { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1; color: var(--c-terracotta); }
.arch-cifre span { font-size: .8125rem; line-height: 1.35; color: var(--c-seppia); }
.arch-cifre .c-pers b { color: var(--c-oliva); } .arch-cifre .c-iti b { color: var(--c-adriatico); } .arch-cifre .c-sap b { color: #8A6214; }
@media (max-width: 1000px) { .arch-testa__griglia { grid-template-columns: 1fr; } .arch-testa__bollo { width: min(200px, 44vw); } }
@media (max-width: 640px) {
  .arch-cifre { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-5); }
  .arch-cifre li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .arch-testa__figurine { padding-top: 0; }
}

.arch-testa + .sezione { padding-top: clamp(32px, 4vw, 56px); }

/* ---------- Filtri incrociati della vetrina -------------------------------- */
.filtri { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); padding: var(--s-5) var(--s-5) var(--s-4);
  background: var(--c-bianco-carta); border: 1.5px solid var(--c-inchiostro); border-radius: 3px;
  box-shadow: 0 18px 36px -30px rgba(31, 42, 46, .5); }
.filtri__riga { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-3) var(--s-4); align-items: start;
  padding-bottom: var(--s-3); border-bottom: 1px dotted var(--c-pietra); }
.filtri__etichetta { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0;
  font-family: var(--f-macchina); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-seppia); }
.filtri__etichetta .i { color: var(--c-terracotta); }
.filtri .filtro-passioni { margin: 0; }
.filtri__esito { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin: 0; padding-top: 2px; }
.filtri__conta { font-family: var(--f-macchina); color: var(--c-seppia); }
.filtri__azzera { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--c-pietra); background: transparent; color: var(--c-terracotta); cursor: pointer; font-size: .875rem; font-weight: 700;
  transition: background .2s, border-color .2s; }
.filtri__azzera:hover { background: var(--c-terracotta-velo); border-color: var(--c-terracotta); }
@media (max-width: 720px) {
  .filtri { padding-inline: var(--s-4); }
  .filtri__riga { grid-template-columns: 1fr; gap: var(--s-2); }
  .filtri__etichetta { margin: 0; }
}
.vetrina__griglia--archivio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .vetrina__griglia--archivio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vetrina__griglia--archivio { grid-template-columns: 1fr; } }

/* ---------- Legenda del biglietto ------------------------------------------ */
.legenda { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5); counter-reset: leg; }
.legenda li { display: grid; gap: 4px; align-content: start; padding-top: var(--s-4); border-top: 2px solid var(--c-inchiostro); }
.legenda__n { font-family: var(--f-macchina); font-size: .8125rem; letter-spacing: .1em; color: var(--c-terracotta); }
.legenda b { font-family: var(--f-display); font-weight: 400; font-size: 1.1875rem; line-height: 1.2; }
.legenda span:not(.legenda__n) { font-size: .875rem; line-height: 1.45; color: var(--c-seppia); }
@media (max-width: 1000px) { .legenda { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .legenda { grid-template-columns: 1fr; gap: var(--s-4); } }

/* ---------- Elenco delle tappe accanto alla mappa --------------------------- */
.elenco-tappe { list-style: none; margin: var(--s-5) 0 0; padding: 0; border-top: 1.5px solid var(--c-inchiostro); counter-reset: t; }
.elenco-tappe li { border-bottom: var(--tratteggio); }
.elenco-tappe a { display: grid; grid-template-columns: 34px 56px minmax(0, 1fr) 24px; gap: var(--s-3); align-items: center;
  padding: 12px 6px; color: var(--c-inchiostro); text-decoration: none; transition: background .2s, padding .25s var(--posa); }
.elenco-tappe a:hover, .elenco-tappe a:focus-visible { background: var(--c-bianco-carta); padding-inline: 14px 0; }
.elenco-tappe__n { justify-self: center; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-terracotta); color: #fff; font-family: var(--f-testo); font-weight: 700; font-size: .8125rem;
  box-shadow: 0 0 0 3px var(--fondo); transition: transform .25s var(--posa); }
.elenco-tappe a:hover .elenco-tappe__n { transform: scale(1.08); }
.elenco-tappe .timbro { width: 52px; height: 52px; transition: transform .3s var(--posa), color .2s; }
.elenco-tappe a:hover .timbro { color: var(--c-terracotta); transform: rotate(-10deg) scale(1.05); }
.elenco-tappe__testo { display: grid; line-height: 1.3; min-width: 0; }
.elenco-tappe__testo b { font-family: var(--f-display); font-weight: 400; font-size: 1.3125rem; }
.elenco-tappe__testo span { font-size: .875rem; color: var(--c-seppia); }
.elenco-tappe__vai { color: var(--c-terracotta); transition: transform .2s var(--posa); }
.elenco-tappe a:hover .elenco-tappe__vai { transform: translateX(4px); }

.in-arrivo__lista--archivio { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.in-arrivo__regione { justify-self: start; margin-top: 2px; font-family: var(--f-macchina); font-size: .6875rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-terracotta-scuro); text-decoration: none; }
.in-arrivo__regione:hover { text-decoration: underline; text-underline-offset: .2em; }

/* ---------- Indice delle regioni -------------------------------------------- */
.reg-griglia { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
.reg-carta { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--c-bianco-carta);
  border: 1px solid var(--c-pietra); border-radius: 4px; overflow: hidden;
  box-shadow: 0 18px 32px -28px rgba(31, 42, 46, .6); transition: transform .35s var(--posa), box-shadow .35s, border-color .3s; }
.reg-carta:hover, .reg-carta:focus-within { transform: translateY(-5px); border-color: var(--c-terracotta); box-shadow: var(--ombra-alta); }
.reg-carta__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-carta-2); }
.reg-carta__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.reg-carta:hover .reg-carta__media img { transform: scale(1.045); }
.reg-carta__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 26, 28, .12), rgba(20, 26, 28, .5)); }
.reg-carta__timbro { position: absolute; z-index: 1; right: 12px; bottom: 12px; line-height: 0; padding: 4px;
  background: var(--c-carta); border-radius: 50%; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .55);
  transition: transform .35s var(--posa); }
.reg-carta__timbro .timbro { --tc: var(--c-terracotta); }
.reg-carta:hover .reg-carta__timbro { transform: rotate(-10deg) scale(1.06); }
.reg-carta__corpo { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: var(--s-4) var(--s-5) var(--s-5); }
.reg-carta__zona { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-family: var(--f-macchina);
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-seppia); }
.reg-carta h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 1.875rem; line-height: 1.1; }
.reg-carta h3 a { color: var(--c-inchiostro); text-decoration: none; }
.reg-carta h3 a::after { content: ''; position: absolute; inset: 0; }
.reg-carta:hover h3 a { color: var(--c-terracotta); }
.reg-carta__motto { margin: 0; font-family: var(--f-mano); font-size: 1.4rem; line-height: 1.1; color: var(--c-terracotta); }
.reg-carta__conti { list-style: none; margin: var(--s-3) 0 0; padding: var(--s-3) 0; display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px dotted var(--c-pietra); border-bottom: 1px dotted var(--c-pietra); }
.reg-carta__conti li { display: grid; gap: 0; line-height: 1.1; }
.reg-carta__conti li + li { border-left: 1px dotted var(--c-pietra); padding-left: var(--s-3); }
.reg-carta__conti b { font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; color: var(--c-adriatico); }
.reg-carta__conti span { font-size: .6875rem; letter-spacing: .04em; color: var(--c-seppia); }
.reg-carta__sapori { margin: var(--s-3) 0 0; font-size: .875rem; line-height: 1.45; color: var(--c-seppia); }
.reg-carta__vai { margin-top: auto; padding-top: var(--s-4); display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: .9375rem; color: var(--c-terracotta); }
.reg-carta__vai .i { transition: transform .2s var(--posa); }
.reg-carta:hover .reg-carta__vai .i { transform: translateX(4px); }
@media (max-width: 1100px) { .reg-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .reg-griglia { grid-template-columns: 1fr; } }

.banco-sapori { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-7) var(--s-5); }
.banco-sapori li { display: grid; gap: var(--s-2); align-content: start; }
.banco-sapori .polaroid { max-width: 220px; margin-bottom: var(--s-3); rotate: 0deg; }
.banco-sapori .polaroid img { aspect-ratio: 1; }
.banco-sapori__regione { margin: 0; font-family: var(--f-macchina); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-terracotta); }
.banco-sapori h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 1.3125rem; }
.banco-sapori p:last-child { margin: 0; color: var(--c-seppia); font-size: .9375rem; }

.regioni-bianche { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.regioni-bianche li { padding: 7px 14px; border: 1px dashed var(--c-pietra); border-radius: 999px;
  font-family: var(--f-macchina); font-size: .875rem; color: var(--c-seppia); background: var(--c-bianco-carta); }

/* ---------- Indice dei personaggi: l'album ---------------------------------- */
.album { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); position: relative; }
.album__voce { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.album__voce::before { content: ''; position: absolute; left: 150px; top: 14px; bottom: calc(var(--s-6) * -1); width: 0;
  border-left: 2px dashed var(--c-oliva); opacity: .35; margin-left: calc(var(--s-6) / -2 - 1px); }
.album__voce:last-child::before { display: none; }
.album__tempo { position: relative; text-align: right; padding-top: var(--s-4); }
.album__tempo::after { content: ''; position: absolute; right: calc(var(--s-6) / -2 - 7px); top: 22px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--fondo); border: 2px solid var(--c-oliva); }
.album__tempo b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 1.375rem; line-height: 1.1; color: var(--c-oliva); }
.album__tempo span { font-size: .8125rem; color: var(--c-seppia); }
.album__carta { --ruota: -.6deg; position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-6);
  padding: var(--s-5); background: var(--c-bianco-carta); border: 1px solid var(--c-pietra); border-radius: 3px;
  box-shadow: 0 18px 34px -28px rgba(31, 42, 46, .6);
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(46, 94, 115, .07) 31px 32px); background-position: 0 24px;
  transition: transform .35s var(--posa), rotate .35s var(--posa), box-shadow .35s, border-color .3s; }
.album__voce:nth-child(even) .album__carta { --ruota: .5deg; }
.album__carta:hover, .album__carta:focus-within { rotate: 0deg; transform: translateY(-4px); border-color: var(--c-oliva); box-shadow: var(--ombra-alta); }
.album__foto { position: relative; align-self: start; padding: 8px 8px 10px; background: #fff; box-shadow: 0 10px 20px -16px rgba(31, 42, 46, .7); }
.album__foto img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: sepia(.15); }
.album__testo { display: grid; gap: 4px; align-content: start; }
.album__ruolo { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-family: var(--f-macchina);
  font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-oliva); }
.album__testo h3 { margin: 2px 0 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); line-height: 1.1; }
.album__testo h3 a { color: var(--c-inchiostro); text-decoration: none; }
.album__testo h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.album__carta:hover h3 a { color: var(--c-oliva); }
.album__epiteto { margin: 0; font-size: .9375rem; color: var(--c-seppia); }
.album__gancio { margin: var(--s-3) 0 0; font-family: var(--f-mano); font-size: 1.45rem; line-height: 1.2; color: var(--c-terracotta); max-width: 42ch; }
.album__tracce { position: relative; z-index: 2; list-style: none; margin: var(--s-4) 0 0; padding: var(--s-3) 0 0;
  border-top: 1px dotted var(--c-pietra); display: flex; flex-wrap: wrap; gap: 6px var(--s-5); font-size: .9375rem; }
.album__tracce li { display: inline-flex; align-items: center; gap: 6px; }
.album__tracce .i { color: var(--c-terracotta); }
.album__tracce-vuoto { color: var(--c-seppia); font-style: italic; }
.album__tracce-vuoto .i { color: var(--c-seppia); }
@media (max-width: 1000px) {
  .album__voce { grid-template-columns: 1fr; gap: var(--s-3); }
  .album__voce::before { display: none; }
  .album__tempo { text-align: left; padding-top: 0; display: flex; align-items: baseline; gap: var(--s-3); }
  .album__tempo::after { display: none; }
  .album__tempo b { font-size: 1.1875rem; }
}
@media (max-width: 640px) {
  .album__carta { grid-template-columns: 1fr; gap: var(--s-4); }
  .album__foto { max-width: 190px; }
}
.luoghi-pers { list-style: none; margin: var(--s-5) 0 0; padding: 0; border-top: 1.5px solid var(--c-inchiostro); }
.luoghi-pers + * { margin-top: var(--s-5); }
.due-col--centrata { align-items: center; }
.luoghi-pers li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--s-4); padding: 12px 0; border-bottom: var(--tratteggio); }
.luoghi-pers b { font-family: var(--f-display); font-weight: 400; font-size: 1.1875rem; }
.luoghi-pers span { color: var(--c-seppia); font-size: .9375rem; }
@media (max-width: 520px) { .luoghi-pers li { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Indice degli itinerari ------------------------------------------ */
.iti-griglia { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
.iti-carta { position: relative; display: grid; grid-template-columns: 190px minmax(0, 1fr); height: 100%;
  background: var(--c-bianco-carta); border: 1px solid var(--c-pietra); border-radius: 3px; overflow: hidden;
  box-shadow: 0 18px 32px -28px rgba(31, 42, 46, .6); transition: transform .35s var(--posa), box-shadow .35s, border-color .3s; }
.iti-carta:hover, .iti-carta:focus-within { transform: translateY(-4px); border-color: var(--c-terracotta); box-shadow: var(--ombra-alta); }
.iti-carta__media { position: relative; overflow: hidden; background: var(--c-carta-2); }
.iti-carta__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.iti-carta:hover .iti-carta__media img { transform: scale(1.05); }
.iti-carta__durata { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; background: rgba(217, 164, 65, .92); color: var(--c-inchiostro);
  font-family: var(--f-macchina); font-size: .75rem; letter-spacing: .06em; rotate: -3deg; }
.iti-carta__corpo { display: flex; flex-direction: column; gap: 6px; padding: var(--s-5);
  background-image: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(46, 94, 115, .07) 27px 28px); background-position: 0 18px; }
.iti-carta__regioni { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-family: var(--f-macchina);
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-adriatico); }
.iti-carta h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; line-height: 1.15; }
.iti-carta h3 a { color: var(--c-inchiostro); text-decoration: none; }
.iti-carta h3 a::after { content: ''; position: absolute; inset: 0; }
.iti-carta:hover h3 a { color: var(--c-terracotta); }
.iti-carta__sotto { margin: 0; font-size: .9375rem; line-height: 1.4; color: var(--c-seppia); }
.iti-carta__tappe { list-style: none; margin: var(--s-3) 0 0; padding: 0; counter-reset: tp; display: grid; gap: 2px; font-size: .875rem; }
.iti-carta__tappe li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: var(--s-2); align-items: center; }
/* i titoli lunghi delle tappe in arrivo si accorciano invece di far crescere la riga */
.iti-carta__tappe li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iti-carta__tappe li::before { counter-increment: tp; content: counter(tp); width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--c-terracotta-velo); color: var(--c-terracotta-scuro); font-size: .6875rem; font-weight: 700; }
.iti-carta__tappe li.is-arrivo::before { background: var(--c-carta-2); color: var(--c-seppia); }
.iti-carta__tappe li.is-arrivo span { color: var(--c-seppia); }
.iti-carta__tappe em { font-family: var(--f-macchina); font-style: normal; font-size: .6875rem; letter-spacing: .06em; color: var(--c-seppia); }
.iti-carta__piede { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-4); margin: var(--s-4) 0 0;
  padding-top: var(--s-3); border-top: 1px dotted var(--c-pietra); }
.iti-carta__guida { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mano); font-size: 1.2rem; color: var(--c-oliva); }
.iti-carta__guida .i { color: var(--c-oliva); }
.iti-carta__pronte { margin-left: auto; font-family: var(--f-macchina); font-size: .6875rem; letter-spacing: .06em; color: var(--c-seppia); }
.iti-carta__vai { margin-top: auto; padding-top: var(--s-4); display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9375rem; color: var(--c-terracotta); }
.iti-carta__vai .i { transition: transform .2s var(--posa); }
.iti-carta:hover .iti-carta__vai .i { transform: translateX(4px); }
@media (max-width: 1100px) { .iti-griglia { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .iti-carta { grid-template-columns: 1fr; }
  .iti-carta__media { aspect-ratio: 16 / 9; }
  .iti-carta__pronte { margin-left: 0; }
}

.per-durata { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-6); }
.per-durata__blocco { padding: var(--s-5); background: var(--c-bianco-carta); border: 1.5px solid var(--c-inchiostro); border-radius: 3px; }
.per-durata h3 { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); padding-bottom: var(--s-3);
  border-bottom: 1.5px solid var(--c-inchiostro); font-family: var(--f-macchina); font-weight: 400; font-size: .9375rem;
  letter-spacing: .14em; text-transform: uppercase; }
.per-durata h3 .i { color: var(--c-terracotta); }
.per-durata ul { list-style: none; margin: 0; padding: 0; }
.per-durata li + li { border-top: 1px dotted var(--c-pietra); }
.per-durata a { display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: var(--s-3); align-items: center; padding: 11px 0;
  color: var(--c-inchiostro); text-decoration: none; transition: padding .25s var(--posa), color .2s; }
.per-durata a:hover, .per-durata a:focus-visible { color: var(--c-terracotta); padding-left: 6px; }
.per-durata__testo { display: grid; gap: 2px; min-width: 0; }
.per-durata a b { font-family: var(--f-display); font-weight: 400; font-size: 1.1875rem; line-height: 1.2; }
.per-durata__testo > span { font-size: .8125rem; color: var(--c-seppia); line-height: 1.35; }
.per-durata a .i { color: var(--c-terracotta); transition: transform .2s var(--posa); }
.per-durata a:hover .i { transform: translateX(3px); }

/* ---------- In fondo: gli altri indici -------------------------------------- */
.altri-indici { padding-block: clamp(40px, 5vw, 64px); }
.altri-indici__lista { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.altri-indici__lista a { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 20px; gap: var(--s-4); align-items: center;
  padding: var(--s-4); border: 1px solid var(--c-pietra); border-radius: 3px; background: var(--c-bianco-carta);
  color: var(--c-inchiostro); text-decoration: none; transition: transform .3s var(--posa), border-color .25s, box-shadow .3s; }
.altri-indici__lista a:hover, .altri-indici__lista a:focus-visible { transform: translateY(-3px); border-color: var(--c-terracotta);
  box-shadow: 0 20px 32px -26px rgba(31, 42, 46, .6); }
.altri-indici__icona { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--c-terracotta-velo); color: var(--c-terracotta); transition: transform .3s var(--posa); }
.altri-indici__icona .i { width: 24px; height: 24px; }
.altri-indici__lista a:hover .altri-indici__icona { transform: rotate(-8deg) scale(1.06); }
.altri-indici__lista b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 1.3125rem; line-height: 1.2; }
.altri-indici__lista span span { font-size: .8125rem; color: var(--c-seppia); line-height: 1.35; }
.altri-indici__vai { color: var(--c-terracotta); transition: transform .2s var(--posa); }
.altri-indici__lista a:hover .altri-indici__vai { transform: translateX(4px); }
@media (max-width: 860px) { .altri-indici__lista { grid-template-columns: 1fr; } }