/* ==========================================================================
   "Un anno da albergatore" (idea di Gaia, ottobre 2026) — inc/anno.php
   L'hero con le dodici tessere dei mesi e il calendario che racconta un mese
   alla volta. Colori delle aree: .area-sh/pms/oms/hf di site.css, più
   .area-neutro per i mesi che non sono di un'area (assistenza).
   ========================================================================== */

.area-neutro { --area: var(--area-neutro); --area-su: #fff; --area-tinta: var(--grigio-chiaro); }

/* Interruttore Mare / Montagna ------------------------------------------- */
.anno-tipi {
  display: inline-flex;
  gap: 0.375rem;
  padding: 0.375rem;
  border: 1px solid var(--filetto);
  border-radius: var(--r-pillola);
  background: var(--carta);
}
.anno-tipi[hidden] { display: none; }
.anno-tipi__voce {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0 1.125rem;
  border: 0; border-radius: var(--r-pillola);
  background: transparent; color: var(--teal-profondo);
  font: 600 var(--t-piccolo) var(--font);
  cursor: pointer;
}
.anno-tipi__voce[aria-pressed="true"] { background: var(--teal-profondo); color: #fff; }
.anno-tipi__voce:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* Hero ------------------------------------------------------------------ */
/* Bordo strappato sopra e sotto come tutte le sezioni colorate (.sezione--tinta
   in site.css): al passo si aggiungono i 28px che lo strappo copre. */
.anno-hero { padding-block: clamp(3rem, 7vw, 6rem) calc(clamp(3rem, 7vw, 6.5rem) + 1.75rem); }
/* Sotto la barra del menu niente strappo: l'apertura parte dritta. */
.anno-hero::before { display: none; }
.anno-hero__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 31rem);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.anno-hero__testo { display: grid; gap: 1.5rem; justify-items: start; }
.anno-hero__etichetta { color: var(--arancio-testo); }
.anno-hero__titolo {
  margin: 0;
  font-size: clamp(2.75rem, 6vw + 0.5rem, 6rem);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--teal-profondo);
  text-wrap: balance;
}
.anno-hero__lead { margin: 0; max-width: 35rem; font-size: clamp(1.0625rem, 0.5vw + 0.95rem, 1.375rem); line-height: 1.55; color: var(--grigio); }
.anno-hero__azioni { margin-top: 0.5rem; }

.anno-hero__mesi { display: grid; gap: 1.125rem; justify-items: start; }
.anno-hero__domanda { margin: 0; font-weight: 600; color: var(--teal-profondo); }
.anno-tessere { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
/* Versione B di Gaia (7/10/2026): tessere bianche con il punto del colore
   dell'area del mese; il mese scelto pieno in teal, quello di picco in arancio. */
.anno-tessera {
  height: 6.5rem;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1rem 1.125rem;
  border: 1.5px solid var(--filetto);
  border-radius: 20px;
  background: var(--carta);
  color: var(--teal-profondo);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
button.anno-tessera { font: inherit; text-align: left; cursor: pointer; }
.anno-tessera:hover { border-color: var(--teal); color: var(--teal-profondo); }
.anno-tessera__sigla { font-size: 1.375rem; font-weight: 700; }
.anno-tessera__punto { width: 10px; height: 10px; border-radius: 50%; background: var(--area, var(--teal)); }
.anno-tessera--picco { border-color: var(--arancio); background: var(--arancio); color: var(--teal-profondo); }
.anno-tessera--picco:hover { border-color: var(--arancio-cupo); }
.anno-tessera--picco .anno-tessera__punto { background: var(--teal-profondo); }
.anno-tessera--scelta, .anno-tessera--scelta:hover { border-color: var(--teal-scuro); background: var(--teal-scuro); color: #fff; }
.anno-tessera--scelta .anno-tessera__punto { background: #fff; }
.anno-tessera:focus-visible { outline: 3px solid var(--teal-profondo); outline-offset: 3px; }
.anno-hero .anno-hero__titolo { font-family: var(--font-titoli); font-weight: 800; letter-spacing: -0.02em; }

/* Calendario ------------------------------------------------------------- */
.anno__intro { display: grid; gap: 1rem; max-width: 52rem; }
.anno__etichetta { color: var(--arancio-testo); }
.anno__titolo { margin: 0; font-size: clamp(2rem, 3vw + 1rem, 3.5rem); line-height: 1.1; text-wrap: balance; }
.anno-tipi--calendario { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
/* Domanda, tessere e mese prima/dopo dentro il calendario: solo su telefono (sotto). */
.anno__domanda, .anno__tessere, .anno__vicini { display: none; }
.anno__pannelli { scroll-margin-top: 6rem; }   /* sotto la barra del menu */
.anno__vicini { justify-content: space-between; gap: 0.75rem; }
/* Come i link delle card (.card__link): testo e freccia, niente pulsante.
   Restano alti 44px per il tocco. */
.anno__vicino {
  display: inline-flex; align-items: center; gap: 0.375rem;
  min-height: 2.75rem; padding: 0 0.25rem;
  border: 0; background: none; color: var(--teal-scuro);
  font: 600 var(--t-piccolo) var(--font);
  cursor: pointer;
}
.anno__vicino span[aria-hidden] { transition: transform 0.2s ease; }
.anno__vicino:hover span[aria-hidden] { transform: translateX(-3px); }
.anno__vicino--dopo:hover span[aria-hidden] { transform: translateX(3px); }
.anno__vicino:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 6px; }

.anno__corpo { display: flex; flex-direction: column; gap: 1.75rem; margin-top: 1.75rem; }

.anno__mese {
  display: flex; flex-direction: column;
  border: 1px solid var(--filetto);
  border-radius: 36px;
  overflow: hidden;
  background: var(--senape-chiara);   /* crema per tutti i mesi (versione B) */
}
.anno__mese + .anno__mese { margin-top: 1.5rem; }            /* senza JS: uno sotto l'altro */
.anno--attivo .anno__mese + .anno__mese { margin-top: 0; }
.anno__mese[hidden] { display: none; }
/* La scheda ha sempre la stessa misura, qualunque mese (Gaia): con JS tutti i
   mesi stanno nella stessa cella della griglia e quelli non scelti sono solo
   invisibili, così il riquadro prende l'altezza del mese più lungo. */
.anno--attivo .anno__pannelli { display: grid; }
.anno--attivo .anno__mese { grid-area: 1 / 1; }
.anno--attivo .anno__mese[hidden] { display: flex; visibility: hidden; }
.anno--attivo .anno__scena { flex: 1 1 auto; }
.anno:not(.anno--attivo) .anno__mese[data-tipo="montagna"] { display: none; }

.anno__scena {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.75rem, 4vw, 3.5rem);
  min-height: clamp(0rem, 30vw, 26rem);
}
.anno__data { margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.anno__numero { font-family: var(--font-titoli); font-size: clamp(4rem, 8vw, 8.75rem); line-height: 0.85; font-weight: 800; color: var(--area-testo, var(--area)); }
.anno__nome { font-family: var(--font-titoli); font-size: clamp(1.75rem, 2vw + 1rem, 2.75rem); line-height: 1.1; font-weight: 600; color: var(--teal-profondo); }
.anno__racconto {
  margin: 0; align-self: center;
  font-family: var(--font-titoli);
  font-size: clamp(1.125rem, 0.6vw + 1rem, 1.5rem);
  line-height: 1.5;
  color: var(--teal-profondo);
}

.anno__soluzione {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.75rem) clamp(1.75rem, 4vw, 3.5rem);
  background: var(--area);
  color: var(--area-su);
  text-decoration: none;
}
a.anno__soluzione:hover { color: var(--area-su); }
/* Etichetta e link come nel mockup di Gaia (7/10/2026): il nome del modulo
   in maiuscolo spaziato, "Scopri come →" sottolineato. */
.anno__modulo { padding-top: 0.375rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.23em; text-transform: uppercase; color: var(--area-su); }
.anno__righe { display: grid; gap: 0.25rem; font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.375rem); line-height: 1.45; font-weight: 600; }
.anno__righe a { color: inherit; }
.anno__soluzione .anno__cta { justify-self: end; padding-bottom: 2px; border-bottom: 2px solid currentColor; white-space: nowrap; font-size: 0.9375rem; font-weight: 600; color: var(--area-su); text-decoration: none; }
.anno__marchio { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }
.anno__marchio span { opacity: 0.75; }

.anno__comandi { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.anno__comandi[hidden] { display: none; }
.anno__pillole { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.anno__pillola {
  min-width: 4rem; height: 2.75rem; padding: 0 1rem;
  border: 2px solid var(--filetto); border-radius: var(--r-pillola);
  background: var(--carta); color: var(--teal-profondo);
  font: 600 var(--t-piccolo) var(--font);
  cursor: pointer;
}
.anno__pillola--picco { border-color: var(--arancio); }
.anno__pillola[aria-pressed="true"] { background: var(--teal-profondo); border-color: var(--teal-profondo); color: #fff; }
.anno__freccia {
  flex: none; width: 3.25rem; height: 3.25rem;
  display: grid; place-items: center;
  border: 2px solid var(--teal-scuro); border-radius: 50%;
  background: var(--carta); color: var(--teal-scuro);
  cursor: pointer;
}
.anno__freccia--avanti { background: var(--teal-scuro); color: #fff; }
:is(.anno__pillola, .anno__freccia):focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* Chi ha scritto quest'anno ------------------------------------------------ */
.anno-autori { --sezione-tinta: var(--teal-profondo); color: #fff; }
.anno-autori__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 32.5rem); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.anno-autori__testo { display: grid; gap: 1.5rem; justify-items: start; }
.anno-autori .etichetta { color: #fff; }
.anno-autori__parola { color: var(--arancio); }
.anno-autori__titolo { margin: 0; color: #fff; font-size: clamp(1.875rem, 1.6vw + 1rem, 2.5rem); font-weight: 700; line-height: 1.15; }
.anno-autori__testo p:not(.etichetta) { margin: 0; max-width: 37rem; color: #cfe3e5; font-size: clamp(1rem, 0.4vw + 0.9rem, 1.25rem); line-height: 1.6; }
.anno-autori__foto { margin: 0; border-radius: var(--r-card); overflow: hidden; }
/* Più grande, ritagliata come nel file di Gaia (520×380, volti in alto). */
.anno-autori__foto img { display: block; width: 100%; height: auto; aspect-ratio: 520 / 380; object-fit: cover; object-position: center 30%; }

/* Tablet e telefono -------------------------------------------------------- */
@media (max-width: 1000px) {
  .anno-hero__griglia, .anno-autori__griglia { grid-template-columns: minmax(0, 1fr); }
  .anno-hero__mesi { max-width: 34rem; }
  .anno__scena, .anno__soluzione { grid-template-columns: minmax(0, 1fr); }
  .anno__scena { min-height: 0; }
  .anno__data { flex-direction: row; align-items: baseline; gap: 0.75rem; }
  .anno__soluzione .anno__cta { justify-self: start; }
}
@media (max-width: 600px) {
  .anno-hero { padding-block: 2.25rem calc(2.75rem + 1.75rem); }
  .anno-hero__testo { gap: 1.125rem; }
  .anno-hero__titolo { font-size: clamp(2.5rem, 12vw, 3.25rem); }
  .anno-hero__mesi { gap: 0.875rem; }
  /* Dodici tessere in due righe da sei: stanno in mezzo schermo. */
  .anno-tessere { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; }
  .anno-tessera { height: 3.5rem; padding: 0.5rem 0.625rem; border-radius: 14px; }
  .anno-tessera__sigla { font-size: 0.9375rem; }
  .anno-tessera__punto { width: 7px; height: 7px; }

  /* Un calendario solo: le tessere passano dall'hero al calendario, al
     posto delle pillole (e delle frecce). */
  .anno-hero__mesi { display: none; }
  .anno__domanda { display: block; margin-top: 1.5rem; }
  .anno-tipi--calendario { margin-top: 0.75rem; }
  .anno__corpo { gap: 1rem; margin-top: 1rem; }
  .anno__tessere { display: block; }
  .anno__comandi, .anno__comandi[hidden] { display: none; }
  .anno__vicini:not([hidden]) { display: flex; }
  .anno__mese { border-radius: var(--r-card); }
  .anno__scena { padding: 1.5rem 1.375rem; gap: 1rem; }
  .anno__numero { font-size: 3rem; }
  .anno__nome { font-size: 1.625rem; }
  .anno__soluzione { padding: 1.375rem; gap: 0.875rem; }
}

/* Tre aree: la frase in fondo all'introduzione (versione B). */
.aree-motto { margin: 1.25rem 0 0; font-family: var(--font-titoli); font-size: clamp(1.375rem, 1vw + 1rem, 1.75rem); font-weight: 600; color: var(--teal-scuro); }

/* Per la tua struttura: tre colonne di numeri (versione B di Gaia). */
.strutture-numeri__griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: clamp(2rem, 4vw, 3rem); }
.strutture-numeri__colonna { display: flex; flex-direction: column; --colonna: var(--area-sh-colore); }
.strutture-numeri__colonna--hotel { --colonna: var(--area-pms-colore); }
.strutture-numeri__colonna--pm    { --colonna: var(--area-oms-colore); }
.strutture-numeri__tipo { margin: 0 0 0.75rem; font-family: var(--font); font-size: var(--t-etichetta); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--colonna); }
.strutture-numeri__righe { margin: 0; border-top: 1px solid var(--filetto); }
.strutture-numeri__righe > div { display: flex; align-items: baseline; gap: 0.625rem; padding: 0.5rem 0; border-bottom: 1px solid var(--filetto); }
.strutture-numeri__righe dt { font-family: var(--font-titoli); font-size: clamp(2.25rem, 2.5vw + 1rem, 3.25rem); font-weight: 800; line-height: 1.1; color: var(--teal-profondo); }
.strutture-numeri__righe dd { margin: 0; font-size: var(--t-piccolo); color: var(--grigio-scuro); }
.strutture-numeri__chiusa { margin: 1rem 0 0.75rem; font-family: var(--font-titoli); font-size: clamp(1.75rem, 1.5vw + 1rem, 2.5rem); font-weight: 800; line-height: 1.1; color: var(--colonna); }
@media (max-width: 860px) {
  .strutture-numeri__griglia { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; max-width: 30rem; }
}


/* La testimonianza (versione B di Gaia). */
.testimone__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: clamp(2rem, 6vw, 5rem); align-items: end; }
.testimone__corpo { margin: 0; display: grid; gap: 1.5rem; }
.testimone__virgolette { fill: var(--arancio); }
.testimone blockquote { margin: 0; }
.testimone blockquote p { margin: 0; font-family: var(--font-titoli); font-size: clamp(1.375rem, 1vw + 1rem, 2rem); line-height: 1.45; color: var(--teal-profondo); }
.testimone figcaption { color: var(--grigio-scuro); }
.testimone figcaption strong { color: var(--teal-profondo); }
.testimone__cifra { margin: 0; display: grid; gap: 0.25rem; padding-top: 1.25rem; border-top: 4px solid var(--arancio); color: var(--grigio-scuro); }
.testimone__cifra span { font-size: clamp(3.5rem, 5vw, 5.5rem); line-height: 1; font-weight: 800; color: var(--teal-scuro); }
@media (max-width: 860px) {
  .testimone__griglia { grid-template-columns: minmax(0, 1fr); }
}

/* Su telefono le card delle tre aree non si allungano sulla più alta. */
@media (max-width: 600px) { .bento-aree.scorri-mobile { align-items: start; } }

/* I loghi dei clienti, sotto l'apertura: una riga sola che scorre (Gaia,
   7/10/2026). File già in scala di grigi; i bordi sfumano. */
.clienti-loghi { padding-block: clamp(1.5rem, 2.5vw, 2rem); border-bottom: 1px solid var(--filetto); }
.clienti-loghi__finestra {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.clienti-loghi__pista { display: flex; width: max-content; animation: clienti-scorri 55s linear infinite; }
.clienti-loghi__finestra:hover .clienti-loghi__pista { animation-play-state: paused; }
.clienti-loghi__lista { display: flex; align-items: center; gap: clamp(2.5rem, 5vw, 4.5rem); margin: 0; padding: 0 clamp(1.25rem, 2.5vw, 2.25rem); list-style: none; }
.clienti-loghi__lista img { display: block; max-width: none; height: auto; opacity: 0.8; }
@keyframes clienti-scorri { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .clienti-loghi__pista { animation: none; }
  .clienti-loghi__finestra { overflow-x: auto; }
}

/* Misure dei titoli della home come nel file di Gaia (versione B): sezioni a
   52-56px, nomi delle aree a 34px, chiusura a 76px. Solo sulla home. */
.anno__titolo, .percorso__intro h2, #aree .intro h2, .strutture-numeri .intro h2, .integrazioni-b .intro h2 { font-size: clamp(2rem, 2.6vw + 1rem, 3.375rem); font-weight: 700; line-height: 1.1; }
.anno__titolo { font-size: clamp(2rem, 2.8vw + 1rem, 3.5rem); }
#aree .bento-aree__area { font-size: clamp(1.625rem, 1vw + 1.125rem, 2.125rem); font-weight: 700; }
.strutture-numeri__righe dt { font-size: clamp(2.25rem, 2vw + 1.25rem, 3.25rem); }
.strutture-numeri__chiusa { font-size: clamp(1.75rem, 1.5vw + 1.125rem, 2.75rem); }

/* Gli sfondi delle sezioni della home come nel file di Gaia (versione B,
   7/10/2026): crema #FBF1E6, grigio #F4F6F5, scuro #0B3F46; calendario,
   numeri e chiusura bianchi. */
.anno-hero, #aree, .testimone { --sezione-tinta: #fbf1e6; }
.percorso-sezione, .integrazioni-b { --sezione-tinta: #f4f6f5; }
.anno-autori { --sezione-tinta: #0b3f46; }
.percorso-sezione:has(+ .anno-autori) { --tinta-dopo: #0b3f46; }
.anno-autori:has(+ #aree) { --tinta-dopo: #fbf1e6; }
/* Fra le tre aree e le integrazioni lo strappo è il disegno di sempre, già
   riempito con il grigio di sotto, con un'ombra un po' più marcata (Luca,
   7/10/2026). Lo strappo "fuso" (maschera) non può avere ombra: la maschera
   la taglierebbe. */
#aree:has(+ .integrazioni-b)::after {
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%2230%22%20viewBox%3D%220%200%20600%2030%22%3E%3Cpath%20d%3D%22M0%2C17.4L3%2C18.1L6%2C16.8L9%2C18.5L12%2C21.5L15%2C23.2L18%2C20.3L21%2C17.6L24%2C14.7L27%2C13.2L30%2C14.2L33%2C17.4L36%2C17.7L39%2C15.3L42%2C16.3L45%2C19.7L48%2C21.1L51%2C19.8L54%2C22.3L57%2C23.7L60%2C21.1L63%2C17.7L66%2C19.9L69%2C24.3L72%2C25.4L75%2C24.7L78%2C25.6L81%2C27.3L84%2C26.8L87%2C26.4L90%2C26.8L93%2C27.5L96%2C25.4L99%2C23.5L102%2C22.7L105%2C22.9L108%2C23.2L111%2C24L114%2C24L117%2C22.5L120%2C21.6L123%2C21.8L126%2C21.9L129%2C20.6L132%2C20.4L135%2C20.6L138%2C20.1L141%2C18.7L144%2C19.4L147%2C21.8L150%2C22.7L153%2C21.6L156%2C20.7L159%2C21.3L162%2C20.7L165%2C19.4L168%2C18.8L171%2C19.6L174%2C18.2L177%2C16.1L180%2C15.6L183%2C16.6L186%2C17L189%2C16.8L192%2C16.1L195%2C13.5L198%2C11.1L201%2C10.2L204%2C11L207%2C9.7L210%2C9.1L213%2C9.9L216%2C10.7L219%2C9.3L222%2C9.9L225%2C14.7L228%2C17.2L231%2C13.7L234%2C9.4L237%2C11.1L240%2C12.4L243%2C11.4L246%2C11.4L249%2C16L252%2C17L255%2C14.3L258%2C13.8L261%2C17.6L264%2C19.7L267%2C17.5L270%2C14.9L273%2C11.3L276%2C9.2L279%2C8.6L282%2C12L285%2C13.5L288%2C13.3L291%2C13.3L294%2C14.4L297%2C12.9L300%2C11.2L303%2C14.1L306%2C16.2L309%2C12L312%2C5.6L315%2C8L318%2C12.7L321%2C14L324%2C13.3L327%2C16.7L330%2C18.3L333%2C14.8L336%2C11.7L339%2C13.4L342%2C15.4L345%2C12.7L348%2C9.5L351%2C7.8L354%2C8.5L357%2C8.4L360%2C10.1L363%2C11L366%2C9.8L369%2C7.3L372%2C6.1L375%2C5L378%2C3.3L381%2C3.7L384%2C4.7L387%2C4L390%2C1.5L393%2C2.8L396%2C5.8L399%2C7.3L402%2C6.5L405%2C6.9L408%2C7.7L411%2C6.9L414%2C5.8L417%2C6.7L420%2C8.9L423%2C9.1L426%2C8.4L429%2C8.4L432%2C9.8L435%2C10.2L438%2C10.5L441%2C10.7L444%2C10.3L447%2C8.9L450%2C8.1L453%2C8.3L456%2C8.5L459%2C9.2L462%2C10.3L465%2C11L468%2C10L471%2C10.6L474%2C12.9L477%2C14.7L480%2C13.8L483%2C13L486%2C14.1L489%2C14.5L492%2C13.9L495%2C15.2L498%2C19.8L501%2C21.5L504%2C19.8L507%2C18.5L510%2C21.1L513%2C22.1L516%2C20.9L519%2C19.9L522%2C19.3L525%2C17.1L528%2C15.1L531%2C16.5L534%2C18.5L537%2C20.1L540%2C20.2L543%2C19.8L546%2C16.3L549%2C14.2L552%2C15.6L555%2C18L558%2C15.2L561%2C11.3L564%2C12.5L567%2C15.4L570%2C15.6L573%2C15.9L576%2C22.2L579%2C24.5L582%2C19.6L585%2C14.1L588%2C16.8L591%2C19.6L594%2C18.1L597%2C16.2L600%2C17.4V30H0Z%22%20fill%3D%22%23f4f6f5%22%2F%3E%3C%2Fsvg%3E") repeat-x left bottom / auto var(--strappo-h);
  -webkit-mask: none;
          mask: none;
  filter: drop-shadow(0 -2px 3px rgba(0, 66, 73, 0.16));
}

/* Misure dal secondo giro di Gaia (7/10/2026). */
.anno-autori .etichetta { margin: 0; }
.integrazioni-b .cifra__valore { font-size: clamp(2.5rem, 3vw + 1rem, 4rem); font-weight: 800; line-height: 1; }
.chiusura--semplice .chiusura__testo { font-size: clamp(1.125rem, 0.6vw + 1rem, 1.375rem); max-width: none; }
@media (min-width: 1001px) {
  .anno__soluzione { min-height: 16.25rem; }   /* la fascia della soluzione, 260px come nel mockup */
}
/* "Albergatori prima che sviluppatori." su una riga, tre righe in tutto (Gaia). */
@media (min-width: 1001px) {
  .anno-autori__titolo { white-space: nowrap; font-size: min(2.5rem, 2.6vw); }
  .anno-autori__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: 3rem; }
}