/* ==========================================================================
   Leucantica · DiscoVereto — Material 3 Expressive
   Restyling allineato all'export "Material 3 Home page review".
   Palette DiscoVereto: Oat / Caramel / Fern / Moss / Kimber / Rosso
   Caratteri: Roboto Flex (display) · Roboto (testo) · Roboto Mono (etichette)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,400..800&family=Roboto:wght@400;500;700&family=Roboto+Mono:wght@500&family=DM+Sans:wght@700&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0&display=swap');

/* --- Token ------------------------------------------------------------- */
:root {
  --oat:       #FAF7F0;
  --oat-scuro: #F0EADD;
  --caramel:   #C59F73;
  --fern:      #854628;
  --moss:      #7C7458;
  --kimber:    #2D2D23;
  --kimber-alto: #3A3A2E;
  --rosso:     #A50000;

  --ink-soft:  #3C2E24;   /* testo su carta caldo */
  --testo-soft:#5C5540;   /* corpo secondario */
  --bordo:     #E4DACB;   /* bordo schede */
  --bordo-2:   #E9E1D0;
  --scuro-testo: #F1E8DF; /* testo su fondo scuro */
  --scuro-testo-2: #E9DFD4;
  --scuro-meta:  #A99B84; /* meta su fondo scuro */
  --tonale:    rgba(197,159,115,.34); /* riempimento tonale caramel */

  --font-display: 'Roboto Flex', system-ui, sans-serif;
  --font-testo:   'Roboto', system-ui, -apple-system, sans-serif;
  --font-mono:    'Roboto Mono', ui-monospace, monospace;

  /* Material 3: forme espressive */
  --r-hero:  40px;
  --r-scura: 36px;
  --r-scheda:28px;
  --r-fisar: 24px;
  --r-menu:  20px;
  --r-btn:   14px;
  --r-pill:  999px;
  --r-sm:    12px;

  --ombra-btn:   0 2px 8px rgba(133,70,40,.28);
  --ombra-scheda:0 12px 28px rgba(45,42,37,.12);
  --ombra-menu:  0 16px 40px rgba(45,45,35,.16);
  --ombra-pop:   0 16px 40px rgba(45,45,35,.16);

  --track-mono: 0.16em;
  --max: 1240px;
  --gutter: clamp(16px, 4vw, 32px);
  --t: 260ms cubic-bezier(.2,.7,.2,1);
}

/* --- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--oat);
  color: var(--kimber);
  font-family: var(--font-testo);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--fern); text-underline-offset: 0.2em; transition: color var(--t); }
a:hover { color: var(--rosso); }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- Tipografia -------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700; line-height: 1.05; letter-spacing: -0.03em;
  margin: 0 0 0.5em; text-wrap: balance;
}
h1 { font-weight: 800; font-size: clamp(2.6rem, 7vw, 4.2rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.6rem); }
h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
p  {
  margin: 0 0 1.1em; max-width: 66ch; text-wrap: pretty;
  /* SU 06 — giustificato e sillabazione automatica su tutto il sito */
  text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}
strong { color: var(--ink-soft); }

.accento, .ini { color: var(--rosso); }

/* Etichetta mono — occhiello di sezione */
.meta {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--moss);
  margin: 0 0 0.5rem; display: block;
}
.meta--chiaro { color: var(--caramel); }

.occhiello {
  font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.5;
  color: var(--testo-soft); max-width: 56ch;
}

/* --- Impaginazione ----------------------------------------------------- */
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* Le sezioni interne sono "riquadri" M3: pannelli arrotondati impilati */
.sezione { padding-block: clamp(2.5rem, 6vw, 4rem); }
.sezione--stretta { padding-block: clamp(1.75rem, 4vw, 2.5rem); }

/* Sezione scura → banda piena Kimber */
.sezione--scura {
  background: var(--kimber); color: var(--scuro-testo);
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}
.sezione--scura h1, .sezione--scura h2, .sezione--scura h3 { color: var(--scuro-testo); }
.sezione--scura p { color: rgba(241,232,223,.82); }
.sezione--scura strong { color: var(--oat); }
.sezione--scura a:not(.btn) { color: var(--caramel); }
.sezione--scura a:not(.btn):hover { color: #E8C79E; }
.sezione--scura .occhiello { color: var(--caramel); }
.sezione--scura .meta { color: var(--caramel); }

/* Sezione fern e oat-scuro → pannelli tonali */
.sezione--fern {
  background: var(--fern); color: var(--oat);
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}
.sezione--fern h2, .sezione--fern h3 { color: var(--oat); }
.sezione--fern p { color: rgba(250,247,240,.86); }
.sezione--fern .occhiello { color: rgba(250,247,240,.82); }
.sezione--fern .meta { color: var(--caramel); }
.sezione--oat-scuro { background: var(--oat-scuro); }

.griglia { display: grid; gap: 20px; }
.griglia--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.griglia--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

/* --- Occhiello di sezione con filo ------------------------------------- */
.titolo-sezione { margin-bottom: 1.75rem; }
.titolo-sezione .strati { display: none; }        /* la vecchia colonna non serve in M3 */
.titolo-sezione .meta { display: flex; align-items: center; gap: 12px; }
.titolo-sezione .meta::after { content: ""; flex: 1; height: 1px; background: var(--bordo); }
.sezione--scura .titolo-sezione .meta::after,
.sezione--fern  .titolo-sezione .meta::after { background: rgba(255,255,255,.16); }
.titolo-sezione h2 { margin: 0.5rem 0 0; }

/* --- Testata (Top App Bar) --------------------------------------------- */
.testata {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250,247,240,.86); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--bordo);
}
.testata__interno {
  max-width: var(--max); margin-inline: auto; padding: 12px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.marchio { text-decoration: none; display: flex; flex-direction: row; align-items: center; gap: 12px; line-height: 1; }
.marchio:hover { color: inherit; }
.marchio__logo { width: 36px; height: 36px; flex: none; display: block; }
.marchio__blocco { display: flex; flex-direction: column; line-height: 1; }
.marchio .marchio__testo {
  font-family: var(--font-display); font-weight: 800; font-size: 1.45rem;
  letter-spacing: -0.03em; color: var(--kimber); transition: color var(--t);
}
.marchio:hover .marchio__testo { color: var(--fern); }
.marchio span { color: inherit; }
.marchio .ini { color: var(--rosso); }
.marchio small {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: var(--track-mono);
  text-transform: uppercase; color: var(--moss); margin-top: 5px; display: block;
}

.nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.nav a, .nav__voce > button {
  font-family: var(--font-testo); font-size: 0.875rem; font-weight: 500;
  color: var(--kimber-alto); text-decoration: none;
  padding: 9px 15px; border-radius: var(--r-pill); border: 0; background: none;
  cursor: pointer; transition: background var(--t), color var(--t);
}
.nav a:hover, .nav__voce > button:hover { background: var(--oat-scuro); color: var(--fern); }
.nav a[aria-current="page"], .nav__voce[data-attivo="true"] > button {
  background: var(--tonale); color: var(--fern); font-weight: 600;
}
.nav a.nav__en { border: 1px solid #D8C6B9; color: var(--fern); font-weight: 600; }
.nav a.nav__en:hover { background: var(--oat-scuro); }

.nav-toggle {
  display: none; width: 48px; height: 48px; border: 1px solid #D8C6B9;
  border-radius: var(--r-btn); background: none; cursor: pointer;
  color: transparent; font-size: 0; position: relative;
}
.nav-toggle::before, .nav-toggle::after,
.nav-toggle span {
  content: ""; position: absolute; left: 14px; right: 14px; height: 2px;
  background: var(--kimber-alto); border-radius: 2px;
}
.nav-toggle::before { top: 17px; }
.nav-toggle span { top: 23px; }
.nav-toggle::after { top: 29px; }

.nav__voce { position: relative; }
.nav__voce > button { display: inline-flex; align-items: center; gap: 5px; }
.nav__voce > button::after {
  font-family: 'Material Symbols Outlined'; content: "arrow_drop_down";
  font-size: 1.35rem; line-height: 1;
}
.nav__voce[data-aperto="true"] > button::after { content: "arrow_drop_up"; }
.sottomenu {
  display: none; position: absolute; top: calc(100% + 8px); left: -8px;
  min-width: 250px; list-style: none; margin: 0; padding: 8px;
  background: var(--oat); border: 1px solid var(--bordo); border-radius: var(--r-menu);
  box-shadow: var(--ombra-menu); z-index: 50;
}
/* Ponte invisibile che copre il vuoto tra pulsante e popup: evita che il
   menu si chiuda quando il mouse attraversa lo spazio per raggiungere le voci. */
.sottomenu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
.nav__voce[data-aperto="true"] .sottomenu { display: block; }
.sottomenu a {
  display: block; padding: 11px 16px; border-radius: var(--r-btn);
  text-decoration: none; font-size: 0.875rem; color: var(--kimber-alto);
}
.sottomenu a:hover { background: var(--oat-scuro); color: var(--fern); }

@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px; justify-content: flex-start;
    background: var(--oat); border-bottom: 1px solid var(--bordo);
    padding: 12px var(--gutter) 20px; box-shadow: var(--ombra-menu);
  }
  .nav.aperto { display: flex; }
  .nav a, .nav__voce > button { height: 52px; display: flex; align-items: center; padding: 0 18px; font-size: 0.95rem; }
  .nav a.nav__en { justify-content: flex-start; }
  .nav__voce { width: 100%; }
  .nav__voce > button { width: 100%; justify-content: space-between; }
  .sottomenu {
    position: static; border: 0; box-shadow: none; padding: 4px 0 4px 16px;
    border-radius: 0; min-width: 0; background: none;
  }
}

/* --- Hero -------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; border-radius: var(--r-hero);
  margin-top: 14px;
  background: linear-gradient(150deg, rgba(197,159,115,.60) 0%, rgba(197,159,115,.30) 52%, rgba(197,159,115,.12) 100%);
  padding: clamp(48px,9vw,104px) clamp(28px,6vw,80px);
  color: var(--kimber);
}
.hero::before {
  content: ""; position: absolute; right: -70px; top: -70px;
  width: 320px; height: 320px; border-radius: 50%; background: rgba(133,70,40,.10);
}
.hero::after {
  content: ""; position: absolute; right: 120px; bottom: -90px;
  width: 220px; height: 220px; border-radius: 50%; background: rgba(165,0,0,.06);
}
.hero__interno { position: relative; z-index: 1; max-width: 760px; }
.hero .meta { color: var(--fern); }
.hero h1 { margin: 18px 0 0; color: var(--kimber); }
.hero .occhiello { margin-top: 22px; color: var(--testo-soft); max-width: 56ch; }

/* Hero secondario (pagine interne): pannello tonale più contenuto */
.hero--interno { padding-block: clamp(38px, 7vw, 68px); }
.hero--interno h1 { font-size: clamp(2.15rem, 5.5vw, 3.2rem); }

/* Hero con immagine di sfondo */
.hero--foto::before, .hero--foto::after { display: none; }
.hero--foto .hero__sfondo {
  position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .5;
}

/* Hero video (homepage) */
.hero-video { display: block; text-decoration: none; margin-top: 14px; cursor: pointer; }
.hero-video__cornice {
  position: relative; width: 100%; padding-bottom: 56.25%; overflow: hidden;
  border-radius: var(--r-hero); background: #000;
}
.hero-video__iframe {
  position: absolute; top: 50%; left: 50%; width: 177.78%; height: 177.78%;
  transform: translate(-50%,-50%); border: none; pointer-events: none; display: block;
}
.hero-video__velo { position: absolute; inset: 0; background: rgba(0,0,0,.3); pointer-events: none; }
.hero-video__marchio {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1;
  width: 100%; text-align: center; font-family: 'DM Sans', var(--font-display), sans-serif;
  font-weight: 700; font-size: clamp(28px, 6vw, 60px); color: rgba(250,247,240,.7);
  text-shadow: 3px 3px 15px rgba(0,0,0,.9);
}
.hero-video__marchio .ini { color: rgba(165,0,0,.65); }
.hero-video__audio {
  position: absolute; bottom: 16px; right: 16px; z-index: 2; width: 44px; height: 44px;
  border-radius: var(--r-pill); border: none; background: rgba(45,45,35,.6); color: var(--oat);
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--t);
}
.hero-video__audio:hover { background: rgba(45,45,35,.82); }

/* --- Pulsanti ---------------------------------------------------------- */
.azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; height: 56px; padding: 0 30px;
  border-radius: var(--r-pill); font-family: var(--font-testo); font-size: 0.94rem;
  font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform var(--t), background var(--t), color var(--t), box-shadow var(--t);
}
.btn:hover { transform: translateY(-1px); }
.btn--primario { background: var(--fern); color: var(--oat); box-shadow: var(--ombra-btn); }
.btn--primario:hover { background: #6F3A21; color: var(--oat); }
.btn--fantasma { background: rgba(250,247,240,.55); color: var(--kimber); border-color: rgba(133,70,40,.30); }
.btn--fantasma:hover { background: var(--oat); color: var(--fern); }
.btn--chiaro { background: var(--caramel); color: var(--kimber); }
.btn--chiaro:hover { background: #B48D5F; color: var(--kimber); }
.sezione--scura .btn--fantasma { background: none; border-color: var(--caramel); color: var(--caramel); }
.sezione--scura .btn--fantasma:hover { background: var(--caramel); color: var(--kimber); }

/* --- Dati salienti ----------------------------------------------------- */
.dato { border-top: 2px solid var(--rosso); padding-top: 1rem; }
.dato__cifra { font-family: var(--font-display); font-size: clamp(2.2rem,4.5vw,3rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-bottom: 0.4rem; }
.dato__etichetta { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--moss); line-height: 1.5; }
.sezione--scura .dato__etichetta { color: var(--caramel); }

/* --- Schede ------------------------------------------------------------ */
.scheda {
  background: #fff; border: 1px solid var(--bordo); border-radius: var(--r-scheda);
  padding: 1.75rem; transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.scheda h3 { margin-bottom: 0.5rem; color: var(--kimber); }
.scheda p { font-size: 0.95rem; color: var(--testo-soft); margin-bottom: 0; }
a.scheda { text-decoration: none; color: inherit; display: block; }
a.scheda:hover { transform: translateY(-4px); box-shadow: var(--ombra-scheda); }
a.scheda:hover h3 { color: var(--rosso); }

/* Scheda con immagine */
.scheda--foto { padding: 0; overflow: hidden; }
.scheda--foto .scheda__foto {
  aspect-ratio: 16 / 10;
  padding: 0;
  background: none;
  display: block;
  /*background: repeating-linear-gradient(135deg, var(--oat-scuro), var(--oat-scuro) 12px, var(--bordo-2) 12px, var(--bordo-2) 24px);
  display: grid; place-items: center; text-align: center; padding: 1rem;*/
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--moss);
}
.scheda--foto .scheda__foto img { width: 100%; height: 100%; object-fit: cover; }
.scheda--foto .scheda__foto .segnaposto { aspect-ratio: auto; background: none; border-radius: 0; padding: 0; color: inherit; }
.scheda--foto .scheda__testo { padding: 24px 26px 28px; }
.scheda--foto h3 { margin-bottom: 0.5rem; font-size: 1.25rem; }

/* --- Galleria video (TeleVereto) ---------------------------------------- */
.video-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
.video-scheda {
  display: block; background: #fff; border: 1px solid var(--bordo); border-radius: var(--r-scheda);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform var(--t), box-shadow var(--t);
}
.video-scheda:hover { transform: translateY(-4px); box-shadow: var(--ombra-scheda); }
.video-scheda:hover h3 { color: var(--rosso); }
.video-scheda__thumb { position: relative; aspect-ratio: 16 / 9; background: var(--oat-scuro); }
.video-scheda__thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-scheda__play { position: absolute; inset: 0; display: grid; place-items: center; }
.video-scheda__play svg { filter: drop-shadow(0 2px 8px rgba(45,42,37,.35)); transition: transform var(--t); }
.video-scheda:hover .video-scheda__play svg { transform: scale(1.08); }
.video-scheda__testo { padding: 1rem 1.15rem 1.2rem; }
.video-scheda__testo h3 { margin: 0; font-size: 1rem; line-height: 1.4; transition: color var(--t); }

/* --- Riquadri intro (due colonne) -------------------------------------- */
.riquadro {
  background: #fff; border: 1px solid var(--bordo); border-radius: var(--r-scheda);
  padding: clamp(28px,4vw,40px); margin-bottom: 0;
}
.riquadro > :last-child { margin-bottom: 0; }
.riquadro p { font-size: clamp(1.05rem,2vw,1.25rem); line-height: 1.6; color: var(--ink-soft); max-width: none; }
.riquadro--moss {
  background: var(--moss); color: var(--oat); border-color: transparent;
  display: flex; flex-direction: column; justify-content: center;
}
.riquadro--moss .meta { color: var(--oat-scuro); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.riquadro--moss .meta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--oat-scuro); }
.riquadro--moss .riquadro__titolo {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem,2.6vw,1.7rem);
  line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 14px; color: var(--oat);
}
.riquadro--moss p { color: rgba(250,247,240,.9); font-size: 0.95rem; max-width: none; }
.riquadro--moss a:not(.btn) { color: var(--oat); text-decoration: underline; }

/* Pannello scuro arrotondato (es. "Dove siamo") */
.riquadro--scuro {
  background: var(--kimber); color: var(--scuro-testo);
  border-color: transparent; border-radius: var(--r-scura);
  padding: clamp(32px,5vw,60px);
}
.riquadro--scuro h2, .riquadro--scuro h3 { color: var(--scuro-testo); }
.riquadro--scuro p { color: rgba(241,232,223,.82); max-width: none; }
.riquadro--scuro strong { color: var(--oat); }
.riquadro--scuro .meta { color: var(--caramel); }
.riquadro--scuro a:not(.btn) { color: var(--caramel); }

/* --- Fisarmonica (accordion tonale) ------------------------------------ */
.fisarmonica {
  background: var(--oat-scuro); border: 1px solid var(--bordo);
  border-radius: var(--r-fisar); overflow: hidden; margin-bottom: 12px;
}
.fisarmonica > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; padding: 24px clamp(22px,3vw,32px);
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem,2.4vw,1.5rem);
  letter-spacing: -0.02em; color: var(--kimber);
}
.fisarmonica > summary::-webkit-details-marker { display: none; }
.fisarmonica > summary::after {
  content: "＋"; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  background: var(--tonale); color: var(--fern); display: grid; place-items: center;
  font-size: 1.25rem; transition: transform var(--t);
}
.fisarmonica[open] > summary::after { content: "－"; transform: rotate(180deg); }
.fisarmonica > summary:hover { color: var(--fern); }
.fisarmonica__corpo { padding: 0 clamp(22px,3vw,32px) 28px; color: var(--testo-soft); font-size: 1rem; line-height: 1.7; }
.fisarmonica__corpo > :last-child { margin-bottom: 0; }
.fisarmonica__corpo p { max-width: none; }

/* --- Cronologia -------------------------------------------------------- */
.cronologia { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--bordo); }
.cronologia li { position: relative; padding: 0 0 2rem 1.75rem; }
.cronologia li::before { content: ""; position: absolute; left: -6px; top: 0.5rem; width: 10px; height: 10px; border-radius: 50%; background: var(--caramel); box-shadow: 0 0 0 3px var(--oat); }
.cronologia li:last-child { padding-bottom: 0; }
.cronologia h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.cronologia p { font-size: 0.96rem; color: var(--testo-soft); margin-bottom: 0; }

/* --- Elenchi dinamici da CSV ------------------------------------------- */
.filtri { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 2rem; }
.filtri input[type="search"] {
  flex: 1 1 16rem; padding: 0.85rem 1.25rem; font: inherit; font-size: 0.95rem;
  color: var(--kimber); background: #fff; border: 1px solid var(--bordo);
  border-radius: var(--r-pill); transition: border-color var(--t), box-shadow var(--t);
}
.filtri input[type="search"]:focus { border-color: var(--caramel); box-shadow: 0 0 0 3px rgba(197,159,115,.25); outline: none; }
.filtri input[type="search"]::placeholder { color: var(--moss); }
.chip {
  padding: 0.55rem 1.15rem; border-radius: var(--r-pill); font-size: 0.85rem; font-family: inherit;
  background: none; border: 1px solid var(--bordo); color: var(--moss); cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.chip:hover { border-color: var(--caramel); color: var(--fern); }
.chip[aria-pressed="true"] { background: var(--tonale); border-color: transparent; color: var(--fern); font-weight: 600; }

.elenco { display: grid; gap: 16px; }
.elenco--schede { gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; }

/* Notizia — scheda con anteprima (immagine, data, categoria, titolo);
   il testo completo si vede solo aprendo il dettaglio (SU13, 02/09/2026) */
.notizia {
  background: #fff; border: 1px solid var(--bordo); border-radius: var(--r-scheda);
  overflow: hidden; display: flex; flex-direction: column;
}
.notizia__foto { aspect-ratio: 16 / 10; }
.notizia__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.notizia__corpo { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.notizia__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.9rem; }
.notizia__data { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--moss); }
.notizia__cat { display: inline-block; padding: 0.28rem 0.7rem; border-radius: var(--r-pill); background: var(--tonale); color: var(--fern); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.notizia__dettagli { margin-top: auto; }
.notizia__cima { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.notizia__cima::-webkit-details-marker { display: none; }
.notizia__cima h3 { font-size: 1.15rem; margin: 0; color: var(--kimber); }
.notizia__cima::after {
  font-family: 'Material Symbols Outlined'; content: "arrow_drop_down";
  font-size: 1.35rem; line-height: 1.3; flex: 0 0 auto; color: var(--moss);
  transition: color var(--t);
}
.notizia__dettagli[open] .notizia__cima::after { content: "arrow_drop_up"; }
.notizia__testo { padding-top: 12px; color: var(--testo-soft); font-size: 0.95rem; line-height: 1.6; }
.notizia__testo p { margin-bottom: 0.75em; }
.notizia__testo p:last-child { margin-bottom: 0; }
.notizia__link { display: inline-block; margin-top: 0.4rem; font-size: 0.9rem; font-weight: 600; color: var(--fern); }

/* Rassegna stampa */
.stampa {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--bordo); border-radius: var(--r-scheda);
  padding: 1.5rem 1.75rem; transition: transform var(--t), box-shadow var(--t);
}
.stampa:hover { transform: translateY(-3px); box-shadow: var(--ombra-scheda); color: inherit; }
.stampa:hover h3 { color: var(--rosso); }
.stampa__testata { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fern); display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.6rem; }
.stampa__testata span:not(:first-child) { color: var(--moss); }
.stampa h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.stampa p { font-size: 0.95rem; color: var(--testo-soft); margin-bottom: 0; }

/* Stati */
.stato { padding: 2.5rem 1.5rem; text-align: center; color: var(--moss); border: 1px dashed var(--bordo); border-radius: var(--r-fisar); }
.stato p { max-width: 46ch; margin-inline: auto; }
.stato p:last-child { margin-bottom: 0; }
.stato code { font-family: var(--font-mono); font-size: 0.85em; background: var(--oat-scuro); padding: 0.15em 0.4em; border-radius: var(--r-sm); }
.stato--errore { border-color: rgba(165,0,0,0.3); color: var(--kimber); }
.stato--errore strong { color: var(--rosso); }

/* --- Segnaposto immagini ----------------------------------------------- */
figure { margin: 2.5rem 0; }
figure img { border-radius: var(--r-fisar); }
figure .segnaposto, .segnaposto {
  aspect-ratio: 3 / 2; border-radius: var(--r-fisar);
  background: repeating-linear-gradient(135deg, var(--oat-scuro), var(--oat-scuro) 12px, var(--bordo-2) 12px, var(--bordo-2) 24px);
  display: grid; place-items: center; text-align: center; padding: 1.5rem;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--moss);
}
figcaption { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--moss); margin-top: 0.85rem; text-align: center; }

/* --- Bibliografia / Citazione ------------------------------------------ */
.bibliografia { list-style: none; margin: 0; padding: 0; }
.bibliografia li { padding: 0.9rem 0; border-bottom: 1px solid var(--bordo); font-size: 0.96rem; line-height: 1.55; }
.bibliografia li:last-child { border-bottom: 0; }
.citazione { margin: 0; text-align: center; max-width: 48ch; margin-inline: auto; }
.citazione p { font-family: var(--font-display); font-size: clamp(1.25rem,2.6vw,1.6rem); line-height: 1.4; font-weight: 500; max-width: none; margin-bottom: 1rem; }
.citazione footer { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--caramel); }

/* --- Loghi ------------------------------------------------------------- */
.loghi { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.logo { background: #fff; border: 1px solid var(--bordo); border-radius: var(--r-scheda); padding: 1.5rem; text-align: center; display: flex; flex-direction: column; gap: 0.75rem; }
.logo__spazio { display: grid; place-items: center; border-radius: var(--r-sm); background: var(--oat-scuro); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--moss); padding: 0.5rem; overflow: hidden; }
.logo__spazio img { width: 100%; height: auto; display: block; }
.logo__spazio .segnaposto { width: 100%; aspect-ratio: 1 / 1; }

/* Muro di loghi (Collaborazioni scientifiche): celle quadrate uniformi */
.logo .logo__spazio { aspect-ratio: 1 / 1; }
.logo .logo__spazio img { height: 100%; object-fit: contain; }
.logo h3 { font-size: 1rem; margin: 0; }
.logo p { font-size: 0.86rem; color: var(--moss); margin: 0; max-width: none; }

/* --- Incorporati (mappa, video, calendario) ---------------------------- */
.incorpora { border-radius: var(--r-fisar); overflow: hidden; background: var(--oat-scuro); }
.incorpora iframe { display: block; width: 100%; border: 0; }
.incorpora__vuoto {
  aspect-ratio: 4 / 3; display: grid; place-items: center; text-align: center; padding: 2rem;
  background: repeating-linear-gradient(135deg, var(--oat-scuro), var(--oat-scuro) 14px, var(--bordo-2) 14px, var(--bordo-2) 28px);
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--moss); line-height: 1.5;
}
.sezione--scura .incorpora, .riquadro--scuro .incorpora { background: var(--kimber-alto); }
.sezione--scura .incorpora__vuoto, .riquadro--scuro .incorpora__vuoto {
  background: repeating-linear-gradient(135deg, var(--kimber-alto), var(--kimber-alto) 14px, #33332A 14px, #33332A 28px);
  color: var(--scuro-meta);
}
.incorpora__vuoto code { font-family: var(--font-mono); font-size: 0.85em; background: #fff; padding: 0.15em 0.4em; border-radius: var(--r-sm); }

/* --- Piè di pagina ----------------------------------------------------- */
.pie {
  background: var(--kimber); color: var(--scuro-testo-2);
  margin-top: 24px; padding: clamp(48px,7vw,72px) 0 40px;
}
.pie .wrap { max-width: var(--max); }
.pie a { color: var(--scuro-testo-2); text-decoration: none; font-size: 0.875rem; }
.pie a:hover { color: var(--caramel); }
.pie h4 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--caramel); font-weight: 500; margin: 0 0 1rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pie__crediti { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%,220px),1fr)); padding-bottom: 36px; }
.pie__loghi { display: flex; flex-wrap: wrap; gap: 8px; }
.pie__loghi div { min-width: 74px; padding: 8px 10px; border-radius: var(--r-sm); background: rgba(250,247,240,.3); font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--scuro-meta); text-align: center; line-height: 1.35; display: grid; place-items: center; }
.pie__loghi img { max-height: 2.4rem; width: auto; }
.pie__griglia { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%,180px),1fr)); padding: 36px 0; border-top: 1px solid rgba(233,223,212,.14); border-bottom: 1px solid rgba(233,223,212,.14); }
.pie__coda { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; padding-top: 28px; font-size: 0.75rem; line-height: 1.6; color: var(--scuro-meta); }
.pie__coda p { margin: 0; max-width: 70ch; }
.pie__coda a { color: var(--caramel); }

/* --- Utilità ----------------------------------------------------------- */
.salta { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--rosso); color: var(--oat); padding: 0.75rem 1.25rem; text-decoration: none; border-radius: 0 0 var(--r-sm) 0; }
.salta:focus { left: 0; color: var(--oat); }

/* ===== Carosello ===== */
.carosello { position: relative; margin: 2rem 0; }

.carosello__pista {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carosello__pista::-webkit-scrollbar { display: none; }

.carosello__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
}
.carosello__slide img {
  width: 70%;
  height: auto;
  object-fit: cover;
  border-radius: var(--r-fisar);
  display: block;
  margin-inline: auto;
}
.carosello__slide .segnaposto {
  width: 70%;
  aspect-ratio: 3 / 2;
  margin-inline: auto;
}

.carosello__puntini {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.carosello__puntino {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--caramel);
  opacity: 0.35;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
}
.carosello__puntino:hover { opacity: 0.7; }
.carosello__puntino.attivo { opacity: 1; transform: scale(1.25); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ================================================================
   Team — persone (direzione, gruppi con schede a tendina)
   ================================================================ */

/* Persona in evidenza (direzione scientifica) */
.team-evidenza{
  display:grid; grid-template-columns:280px 1fr; gap:clamp(28px,4vw,48px);
  background:#fff; border:1px solid var(--bordo); border-radius:var(--r-scheda);
  padding:clamp(24px,3vw,36px);
}
.team-evidenza__foto{
  width:100%; aspect-ratio:1/1; border-radius:var(--r-fisar); overflow:hidden;
}
.team-evidenza__foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.team-evidenza__foto .segnaposto{ width:100%; height:100%; aspect-ratio:auto; border-radius:0; }
.team-evidenza__ruolo{ color:var(--fern); font-weight:600; margin-bottom:.15rem; }
.team-evidenza__ente{ color:var(--moss); font-size:.92rem; margin-bottom:1.1rem; }
@media (max-width:720px){
  .team-evidenza{ grid-template-columns:1fr; }
  .team-evidenza__foto{ max-width:220px; margin-inline:auto; }
}

/* Titolo di gruppo (Team Scientifico, Collaborazioni Scientifiche, ecc.) */
.team-gruppo{ margin-top:clamp(5rem,9vw,7.5rem); }
.pagina-fornitori .team-gruppo{ margin-top:0; }
.team-gruppo__titolo{ text-align:center; font-size:clamp(1.55rem,3.2vw,2.05rem); margin-bottom:2.75rem; }
.team-gruppo__titolo:has(+ .team-gruppo__nota){ margin-bottom:.4rem; } /* quando c'è la nota sotto, lo spazio lo dà lei */
.team-gruppo__nota{
  text-align:center; color:var(--moss); font-family:var(--font-testo); font-style:italic; font-size:.95rem;
  letter-spacing:0; text-transform:none; margin:0 auto 2.75rem; max-width:none;
}

/* Griglia persone */
.team-griglia{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr)); gap:30px 36px; }
.team-persona{ display:flex; gap:16px; align-items:flex-start; }
.team-persona__foto{ width:160px; height:160px; flex:none; border-radius:var(--r-sm); overflow:hidden; }
.team-persona__foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.team-persona__foto .segnaposto{ width:100%; height:100%; aspect-ratio:auto; border-radius:0; padding:.5rem; font-size:.52rem; line-height:1.35; }
.team-persona__foto .segnaposto--persona{ display:flex; align-items:center; justify-content:center; background:var(--caramel); padding:0; }
.team-persona__foto .segnaposto--persona img{ width:50%; height:50%; object-fit:contain; display:block; }
.team-persona__contenuto{ flex:1; min-width:0; }
.team-persona__cima{
  list-style:none; cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  padding-bottom:10px; border-bottom:1px solid var(--bordo);
}
.team-persona__cima::-webkit-details-marker{ display:none; }
.team-persona__nome{ font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:var(--kimber); line-height:1.3; }
.team-persona__ruolo{ display:block; font-size:.8rem; color:var(--fern); font-weight:600; margin-top:3px; }
.team-persona__cima::after{
  /*content:"⌄"; flex:0 0 auto; color:var(--moss); font-size:1rem; line-height:1.4;*/
  font-family: 'Material Symbols Outlined'; content: "arrow_drop_down";
  font-size: 1.35rem; line-height: 1;
  transition:transform var(--t), color var(--t);
}
.team-persona__contenuto[open] .team-persona__cima::after{ content: "arrow_drop_up"; }
.team-persona__cima--senza-bio::after{ content:none; }
/*.team-persona__contenuto[open] .team-persona__cima::after{ transform:rotate(180deg); color:var(--fern); }*/
.team-persona__bio{ padding-top:12px; color:var(--testo-soft); font-size:.92rem; line-height:1.65; }
.team-persona__bio p{ margin-bottom:.75em; max-width:none; }
.team-persona__bio p:last-child{ margin-bottom:0; }
.team-persona__bio--segnaposto{ color:var(--moss); font-style:italic; }


/* ================================================================
   CTA flottante — invito newsletter (compare su tutte le pagine,
   generata una volta sola nel MODELLO di costruisci.py)
   ================================================================ */
.cta-flottante { position: fixed; right: 20px; bottom: 20px; z-index: 150; }
.cta-flottante__pulsante {
  width: 62px; height: 62px; border-radius: var(--r-pill); background: var(--oat);
  border: 3px solid var(--rosso); box-shadow: var(--ombra-menu);
  display: grid; place-items: center; cursor: pointer; padding: 13px;
  transition: transform var(--t), box-shadow var(--t);
}
.cta-flottante__pulsante img { width: 100%; height: 100%; display: block; }
/* Bug (03/09) — su smartphone il tasto di chiusura (x) del popup
   sembrava non funzionare: il primo tocco su un elemento con :hover
   attiva lo stato hover invece del click (comportamento noto di
   iOS/Android), quindi il popup restava visibile per via di
   ".cta-flottante:hover" anche dopo che il click sulla x aveva
   rimosso la classe "aperto". Le regole :hover sono ora attive solo
   sui dispositivi che hanno davvero un puntatore (mouse); su touch
   apertura/chiusura dipendono solo dalla classe "aperto" (JS). */
@media (hover: hover) and (pointer: fine) {
  .cta-flottante__pulsante:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 20px 44px rgba(45,45,35,.22); }
}
.cta-flottante.aperto .cta-flottante__pulsante {
  transform: translateY(-3px) scale(1.05); box-shadow: 0 20px 44px rgba(45,45,35,.22);
}
.cta-flottante__popup {
  position: absolute; right: 0; bottom: calc(100% + 14px); width: min(300px, 84vw);
  background: #fff; border: 1px solid var(--bordo); border-radius: var(--r-scheda);
  box-shadow: var(--ombra-pop); padding: 22px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
@media (hover: hover) and (pointer: fine) {
  .cta-flottante:hover .cta-flottante__popup { opacity: 1; visibility: visible; transform: translateY(0); }
}
.cta-flottante.aperto .cta-flottante__popup { opacity: 1; visibility: visible; transform: translateY(0); }
.cta-flottante__popup h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.cta-flottante__popup p { font-size: .9rem; color: var(--testo-soft); margin-bottom: 1.1rem; }
.cta-flottante__popup .btn { width: 100%; justify-content: center; height: 46px; padding: 0 20px; }
@media (max-width: 640px) {
  .cta-flottante { right: 14px; bottom: 14px; }
  .cta-flottante__pulsante { width: 54px; height: 54px; padding: 11px; }
}


/* ================================================================
   Cookie e testi legali (29/09/2026)
   Il banner cookie e il pannello delle preferenze sono di Termly (script
   nel <head>, aspetto deciso nel pannello di Termly). Qui: il pulsante
   "Preferenze cookie" nel pie' di pagina, che deve sembrare un link come
   quelli accanto, e l'impaginazione di Policy Privacy e Cookie Policy.
   ================================================================ */
.pie__preferenze {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-size: 0.875rem; color: var(--caramel);
  text-underline-offset: 0.2em; cursor: pointer;
}
.pie__preferenze:hover { text-decoration: underline; }
/* La riga del copyright ora va a capo: niente giustificato, che allargherebbe gli spazi */
.pie__coda p:has(.pie__preferenze) { text-align: left; hyphens: manual; }

.testo-legale { max-width: 860px; margin-inline: auto; }
.testo-legale h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin: 2.2em 0 .6em; scroll-margin-top: 110px; }
.testo-legale h3 { font-size: 1.1rem; margin: 1.6em 0 .5em; scroll-margin-top: 110px; }
.testo-legale > :first-child { margin-top: 0; }
.testo-legale p, .testo-legale li {
  font-size: 1rem; line-height: 1.65; color: var(--ink-soft);
  text-align: left; hyphens: auto;
}
.testo-legale ul, .testo-legale ol { padding-left: 1.4em; margin: 0 0 1em; }
.testo-legale li { margin-bottom: .35em; }
.testo-legale a { overflow-wrap: anywhere; }
.testo-legale .policy-data { font-size: .9rem; color: var(--fern); font-weight: 600; }
.testo-legale .policy-fonte { font-size: .85rem; margin-top: 2.5em; opacity: .8; }
.tabella-scorre { overflow-x: auto; margin: 0 0 1.4em; }
.tabella-cookie { width: 100%; border-collapse: collapse; font-size: .85rem; line-height: 1.45; min-width: 720px; }
.tabella-cookie th, .tabella-cookie td {
  text-align: left; vertical-align: top; padding: .55em .7em;
  border-bottom: 1px solid var(--bordo); color: var(--ink-soft);
}
.tabella-cookie th { background: var(--oat-scuro); font-weight: 600; }
.tabella-cookie td:first-child { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .78rem; white-space: nowrap; }


/* ================================================================
   News e aggiornamenti — Facebook + Instagram affiancati (Elfsight)
   Regole isolate sotto .social-doppio: non toccano la .incorpora
   di base, usata anche in Territorio, TeleVereto, Dicono di noi,
   Contatti e Newsletter.
   ================================================================ */
.social-doppio { display: flex; gap: 24px; align-items: stretch; }
.social-doppio > .incorpora:first-child { flex: 0 0 896px; height: 800px; }
.social-doppio > .incorpora:last-child { flex: 0 0 260px; height: 800px; }
.social-doppio .incorpora { display: block; overflow: hidden; }
.social-doppio .incorpora > div { width: 100%; height: 100%; }
@media (max-width: 1220px) {
  .social-doppio { flex-direction: column; }
  .social-doppio > .incorpora:first-child { flex-basis: auto; width: 100%; height: 850px; }
  .social-doppio > .incorpora:last-child { flex-basis: auto; width: 100%; height: 500px; }
}


/* ================================================================
   SU 02 — Campagne di scavo e pagine congelate
   ================================================================ */

/* Fascia sulle pagine storiche congelate (iniettata da congela_campagna.py)
   Sfondo moss (richiesta 31/08): testo interno passato ai toni chiari
   della palette (stesso principio gia' in uso su .riquadro--moss) per
   restare leggibile a contrasto sopra un fondo medio-scuro. */
.etichetta-storica { background: var(--moss); border-bottom: 1px solid var(--moss); }
.etichetta-storica__interno {
  max-width: var(--max); margin-inline: auto; padding: 10px var(--gutter);
  display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
}
.etichetta-storica__interno span { color: var(--oat-scuro); text-transform: uppercase; }
.etichetta-storica__interno a { color: var(--oat); text-decoration: underline; }
.etichetta-storica__interno a:hover { color: var(--oat); text-decoration-color: var(--rosso); }

/* Sfondo moss dell'intera pagina "Campagne di scavo", per distinguerla a
   colpo d'occhio dalle altre pagine (tutte su --oat chiaro). L'header,
   l'hero (ha gia' un proprio sfondo chiaro) e il piede restano invariati
   perche' hanno tutti uno sfondo proprio indipendente dalla pagina: qui
   basta ridefinire lo sfondo/testo di base e i due punti in cui il testo
   era a contatto diretto col fondo con un colore scuro (il "filo" del
   finanziamento). Le schede (.scheda, sfondo bianco) e i pulsanti del
   selettore (sfondo bianco/kimber) restano leggibili senza bisogno di
   eccezioni: hanno gia' un proprio sfondo indipendente. */
.pagina-campagne { background: var(--moss); color: var(--oat); }
.pagina-campagne .hero { background: var(--oat); }
.pagina-campagne .finanziamento-campagna { border-left-color: var(--oat-scuro); }
.pagina-campagne .finanziamento-campagna .data { color: var(--oat-scuro); }
/* La campagna "in corso" (scheda--viva) ha di suo uno sfondo quasi
   trasparente (pensato per il fondo oat chiaro): sul fondo moss il testo
   interno (colori fissi, non ereditati) andava quasi illeggibile. Le
   schede storiche (.scheda semplice, sfondo bianco pieno) non hanno
   invece bisogno di alcuna eccezione. */
.pagina-campagne .scheda--viva h3 { color: var(--oat); }
.pagina-campagne .scheda--viva p { color: rgba(250,247,240,.82); }

/* Selettore campagne */
.selettore-campagne { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 2rem; }
.selettore-campagne button {
  font-family: var(--font-testo); font-size: 0.95rem; font-weight: 700; text-align: left;
  padding: 10px 22px; border-radius: 20px; border: 1px solid var(--bordo);
  background: #fff; color: var(--kimber); cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.selettore-campagne button:hover { border-color: var(--fern); color: var(--fern); }
.selettore-campagne button[aria-pressed="true"] { background: var(--kimber); border-color: var(--kimber); color: var(--oat); }
.selettore-campagne button[aria-pressed="true"].e-viva { background: var(--fern); border-color: var(--fern); }
.selettore-campagne button .sotto {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.07em; font-weight: 500;
  text-transform: none; opacity: 0.8; display: block; margin-top: 3px;
}

/* Paragrafo finanziamento */
.finanziamento-campagna { border-left: 3px solid var(--caramel); padding: 0.2rem 0 0.2rem 1.2rem; margin-bottom: 2.2rem; }
.finanziamento-campagna .data { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--fern); display: block; margin-bottom: 0.4rem; }
.finanziamento-campagna p { margin-bottom: 0; }

/* Schede delle 5 sezioni per campagna (riusa .scheda esistente) */
.griglia-campagna { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.scheda--viva { border-color: var(--fern); background: linear-gradient(180deg, rgba(133,70,40,.05), transparent 60%); }

/* ================================================================
   SU 06 — Formattazione testo, estesa a tutto il sito (simulazione)
   - Giustificato + sillabazione automatica: sul <p> di base qui sopra,
     quindi vale ovunque (schede, notizie, occhielli, footer inclusi).
   - Corpo ingrandito e colonna centrata: solo sui paragrafi e i titoli
     "narrativi" (figli diretti di .wrap, come nelle sezioni di testo
     lungo di Scoperte, Territorio, Storia della ricerca, Team...),
     NON sui paragrafi dentro schede/notizie/riquadri (restano alla
     loro dimensione) né sull'occhiello introduttivo (già centrato e
     stilizzato a parte).
   ================================================================ */
.wrap > p:not(.occhiello) {
  font-size: 13pt; /* +1pt sopra i 12pt/1rem di base */
  margin-inline: auto;
}
.wrap > h3 {
  /* Stesso blocco del paragrafo sottostante, per allinearli sullo
     stesso bordo. Nota: qui il max-width è in rem (non ch come per i
     paragrafi) perché il titolo usa un font/dimensione diversi dal
     corpo — 66ch del font dei titoli sarebbe più largo dell'intera
     colonna e non lo vincolerebbe; 47rem corrisponde alla larghezza
     reale dei paragrafi a 13pt (verificata via rendering). */
  font-size: 16pt; /* +1pt sopra i 15pt/1.25rem di base, stesso criterio del corpo */
  max-width: 45.5rem;
  margin-inline: auto;
  margin-bottom: 1.5rem;
}

/* Eccezione (31/08): il giustificato sitewide qui sopra crea spazi
   irregolari tra le parole nelle colonne strette a più card per riga
   (poche parole a riga). Rimane solo la sillabazione automatica
   (ereditata dalla regola di base su p), che qui aiuta comunque a
   evitare che parole lunghe sporgano dalla card. Selettore per
   contenitore di griglia (non per singolo componente), perché lo
   stesso componente — es. .riquadro — è stretto quando sta dentro una
   di queste griglie e normale altrove (verificato: 476px dentro
   .griglia--2 su index.html contro 1054px da solo su
   comunita-patrimoniale.html/policy-privacy.html).
   Verificato via rendering: .scheda p 311px, .team-persona__bio p
   179px, .riquadro--moss p (dentro .griglia--2) 476px,
   .cta-flottante__popup p 254px — tutte sotto la soglia ragionevole
   di leggibilità per il giustificato (~40 caratteri a riga). */
.griglia--2 p,
.griglia--3 p,
.team-griglia p,
.video-griglia p,
.loghi p,
.griglia-campagna p,
.cta-flottante__popup p {
  text-align: left;
}

/* SU 08 (31/08) — immagini nelle fisarmoniche di Territorio: centrate
   e rimpicciolite al 50% di larghezza. height:auto e' gia' ereditato
   dalla regola globale "img", quindi le proporzioni originali restano
   intatte (nessuna deformazione). */
.fisarmonica__corpo img { max-width: 50%; margin-inline: auto; }

/* SU 10 (01/09) — bandierina al posto della scritta "EN"/"IT" nel
   pulsante di cambio lingua: l'immagine riempie tutta la pillola
   (object-fit: cover taglia leggermente i bordi corti della bandiera
   per aderire alla forma 44x22, senza deformarla), i bordi restano
   arrotondati grazie al border-radius gia' presente su .nav a e al
   overflow:hidden sull'anchor. */
.nav a.nav__en { padding: 0; overflow: hidden; }
.nav__bandiera { display: block; width: 22px; height: 22px; object-fit: cover; }

/* SU 01 (01/09) — apertura automatica del popup newsletter al primo
   caricamento della sessione (vedi dati.js): pulsante di chiusura
   visibile nell'angolo, dato che ora il popup puo' comparire senza
   un'azione dell'utente. */
.cta-flottante__popup__chiudi {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px;
  border-radius: var(--r-pill); border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--testo-soft); font-size: 1.15rem;
  line-height: 1; transition: background var(--t), color var(--t);
}
.cta-flottante__popup__chiudi:hover { background: var(--oat-scuro); color: var(--fern); }
.cta-flottante__popup h3 { padding-right: 30px; }

/* SU 01 (01/09) — ponte invisibile che copre il vuoto tra il pulsante
   flottante e il popup: senza questo, se il mouse sosta anche solo
   ~250ms nello spazio tra i due, il popup si chiude e non si riapre
   piu' muovendosi verso di esso (visibility passa a hidden a fine
   transizione). Stessa tecnica gia' usata per .sottomenu::before nel
   menu Organizzazione. */
.cta-flottante__popup::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -20px; height: 20px;
}


/* ================================================================
   Link alle aree di scavo (Acropoli, Porto messapico) — 24/09/2026
   Sezione "Dove siamo" in home e colonna "Dove" in Contatti:
   +2pt rispetto al testo intorno, in grassetto.
   ================================================================ */
p.aree-scavo a { font-size: calc(1em + 2pt); font-weight: 700; }


/* ================================================================
   Widget TripAdvisor in "Dicono di noi" a tutta larghezza — 01/10/2026
   Il widget (iswide=true, 4 recensioni) occupa tutta la colonna del
   sito, allineato alla rassegna stampa sotto; altezza naturale, senza
   scorrimento interno. Il contenitore .recensioni-ta e' in contenuti.py
   e contenuti_en.py (pagina dicono-di-noi.html).
   ================================================================ */
.recensioni-ta #CDSWIDSSP {
  width: 100% !important; max-width: 100% !important;
  box-sizing: border-box; margin: 0 !important;
}


/* Fornitori (01/10/2026) — schede come in Comunita' Patrimoniale.
   Con auto-fill le colonne vuote restano: le 2 schede hanno la stessa
   larghezza di quelle della Comunita' invece di allargarsi a mezza pagina. */
.pagina-fornitori .griglia--3 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}


/* ================================================================
   Scoperte — II Campagna (13/10/2026)
   ================================================================ */
/* Foto verticali nei caroselli: non piu' alte del 75% dello schermo.
   Le orizzontali restano larghe il 70% come prima. */
.carosello__slide img { width: auto; max-width: 70%; max-height: 75vh; }

/* Foto singola nel testo: stessa larghezza delle foto dei caroselli */
.figura--carosello img { width: 70%; margin-inline: auto; }

/* Video YouTube nel testo: stessa larghezza delle foto dei caroselli */
.video-testo {
  width: 70%; margin: 2.5rem auto; aspect-ratio: 16 / 9;
  border-radius: var(--r-fisar); overflow: hidden; background: var(--kimber);
}
.video-testo iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Collegamenti alle Scoperte delle campagne precedenti (in fondo alla pagina) */
.scoperte-archivio__griglia {
  display: grid; gap: 24px; margin-top: 1.75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.scoperte-archivio .scheda .meta { display: block; margin-bottom: 0.5rem; color: var(--fern); }
.scoperte-archivio .scheda h3 { margin-bottom: 0; }
.scoperte-archivio .wrap > p { margin-inline: 0; }
.scoperte-archivio .azioni { margin-top: 1.75rem; }

/* ================================================================
   News — notizia in evidenza (sopra le schede del foglio Google)
   Carosello a sinistra, titolo e lancio a destra; il testo completo
   si apre sotto, a tutta larghezza, in colonna di lettura.
   ================================================================ */
.evidenza {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 20px clamp(24px, 4vw, 48px); align-items: start;
  padding-bottom: clamp(2rem, 5vw, 3rem); margin-bottom: clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid var(--bordo);
}
.evidenza__carosello { margin: 0; }
.evidenza__carosello .carosello__slide img {
  width: 100%; max-width: none; max-height: none; aspect-ratio: 4 / 3; object-fit: cover;
}
.evidenza__testa h2 { font-size: clamp(1.5rem, 2.8vw, 2.05rem); line-height: 1.15; margin: 0.4rem 0 1rem; }
.evidenza__lancio { font-size: 1.05rem; color: var(--testo-soft); }
.evidenza__apri, .evidenza__chiudi {
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 24px;
  border-radius: var(--r-pill); border: 1px solid rgba(133,70,40,.30); background: #fff;
  font: 600 0.94rem var(--font-testo); color: var(--kimber); cursor: pointer;
  transition: background var(--t), color var(--t);
}
.evidenza__apri::after {
  font-family: 'Material Symbols Outlined'; content: "expand_more"; font-size: 1.3rem; line-height: 1;
}
.evidenza__apri[aria-expanded="true"]::after { content: "expand_less"; }
.evidenza__apri:hover, .evidenza__chiudi:hover { background: var(--oat-scuro); color: var(--fern); }
.evidenza__corpo { grid-column: 1 / -1; max-width: 66ch; margin-inline: auto; padding-top: 1rem; }
.evidenza__corpo > p { font-size: 13pt; }
.evidenza__corpo h3 { margin: 2.5rem 0 1.25rem; }
.dichiarazione { margin: 0 0 2rem; }
.dichiarazione blockquote { margin: 0; padding-left: 1.2rem; border-left: 3px solid var(--caramel); }
.dichiarazione blockquote p { font-size: 1rem; color: var(--ink-soft); max-width: none; margin-bottom: 0.6rem; }
.dichiarazione figcaption {
  text-align: left; font-family: var(--font-testo); font-size: 0.9rem; letter-spacing: 0;
  color: var(--testo-soft); padding-left: 1.2rem; margin-top: 0.4rem;
}
.dichiarazione figcaption strong { color: var(--kimber); }
.evidenza__coda { font-weight: 500; }
@media (max-width: 860px) {
  .evidenza { grid-template-columns: 1fr; }
}

/* Home, apertura: i due riquadri affiancati (verde + bianco) con la stessa
   dimensione del testo, per equilibrio. Vale solo qui: .riquadro--moss
   esiste solo in home e il bianco e' quello subito accanto. */
.riquadro--moss p,
.riquadro--moss + .riquadro p { font-size: 1.05rem; line-height: 1.65; }