/* ==========================================================================
   BookingDesigner — foglio di stile del sito
   Token estratti dall'anteprima approvata (settembre 2026): sono gli stessi
   "Foundation/*" del Figma di Agnese, con il teal scuro sui titoli e il fondo
   menta sulle card. Se serve un colore nuovo va aggiunto prima in Figma.
   ========================================================================== */

:root {
  /* Teal */
  --teal:            #0093a3;
  --teal-hover:      #008493;
  /* Dal 7/10/2026 i colori di base del pitch deck (Gaia): teal di accenti e
     pulsanti #0F7580, teal scuro dei testi #0B3F46. */
  --teal-scuro:      #0f7580;
  --teal-profondo:   #0b3f46;
  --teal-chiaro:     #e6f4f6;
  --menta:           #d9eff1;
  --menta-scura:     #b0dee2;

  /* Neutri */
  --grigio-chiaro:   #edeced;
  /* Era #acacac: 2,3:1 sul bianco, illeggibile. Questo regge il 4,5:1 anche
     sulla fascia grigia (4,6:1) e sulla crema. ⚠️ valore da allineare in Figma. */
  --grigio-tenue:    #6b6b6b;
  --grigio:          #4f6468;   /* testo secondario del pitch deck (Gaia, 7/10/2026) */
  --grigio-scuro:    #4f6468;
  --inchiostro:      #383638;

  /* Accenti */
  --arancio:         #f28c1f;
  --arancio-cupo:    #dd7a12;   /* solo per gli stati al passaggio del mouse */
  /* L'arancio del marchio sul bianco sta a 2,5:1: va bene per superfici,
     icone e puntini, non per il testo. Per date, numeri e parole in evidenza
     si usa questo: 5,4:1 sul bianco, 4,7:1 sulla fascia. NUOVO, vedi in fondo. */
  --arancio-testo:   #a85300;
  --senape-chiara:   #fbf1e6;   /* crema del pitch deck (Gaia, 7/10/2026; era #fdeee2) */
  --verde-chiaro:    #d7ecc8;
  --verde-scuro:     #4f6145;

  /* Superfici */
  /* I colori delle aree, dal pitch deck (Gaia, 7/10/2026): uguali ovunque,
     calendario, serpentina, card del prodotto, target. */
  --area-sh-colore:   #17919c;
  --area-pms-colore:  #2e3f6b;
  --area-oms-colore:  #e0a030;
  --area-hf-colore:   #1a8b8e;
  --area-neutro:      #0b3f46;

  --carta:           #ffffff;
  --fascia:          #eaf0f0;
  --filetto:         #dae4e4;

  /* Tipografia */
  --font:            "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display:    "Fredoka One", "Poppins", ui-sans-serif, system-ui, sans-serif;
  /* I titoli (Gaia, 7/10/2026): Fraunces, serif, un solo file variabile 400-800.
     Il testo, i bottoni, le etichette e il menu restano in Poppins. */
  --font-titoli:     "Fraunces", Georgia, "Times New Roman", serif;

  /* Scala allargata (audit DS-4): l'H1 si fermava a 46px e l'H2 a 34, troppo
     vicino all'H3. Display è per gli hero: 40px su mobile, 68px a 1440.
     ⚠️ --t-h1 e --t-h2 hanno valori nuovi, --t-display e --t-lead sono NUOVI:
     vedi in fondo. */
  --t-display: clamp(2.125rem, 3.6vw + 1rem, 4.25rem);
  --t-h1: clamp(2.25rem, 2.6vw + 1rem, 3.25rem);
  --t-h2: clamp(1.75rem, 1.8vw + 1rem, 2.5rem);
  --t-h3: clamp(1.25rem, 0.8vw + 0.9rem, 1.5rem);
  --t-h4: 1.0625rem;
  --t-body: 1rem;
  --t-piccolo: 0.9375rem;
  --t-etichetta: 0.8125rem;
  --t-lead: 1.1875rem;

  /* Forma */
  --r-pillola: 999px;
  --r-card:    28px;
  --r-media:   18px;
  --r-piccolo: 14px;

  /* Ombre: tre altezze, sempre nel teal profondo e mai nere, così sulle
     fasce colorate non sporcano. NUOVE, vedi in fondo.
     1 = appoggiato (card su fondo tinta), 2 = sollevato (hover, menu),
     3 = galleggiante (card flottanti sopra le foto). */
  --ombra-1: 0 1px 2px rgba(0, 66, 73, 0.06), 0 3px 10px rgba(0, 66, 73, 0.06);
  --ombra-2: 0 4px 10px rgba(0, 66, 73, 0.06), 0 14px 30px rgba(0, 66, 73, 0.11);
  --ombra-3: 0 8px 18px rgba(0, 66, 73, 0.08), 0 24px 56px rgba(0, 66, 73, 0.17);

  /* Layout */
  --pagina: 1200px;
  --bordo:  1.5rem;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--carta);
  color: var(--grigio);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
/* blockquote compreso: senza, il browser gli lascia 40px di margine per lato
   e le citazioni su mobile finivano in una colonna di 180px. */
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

.salta-al-contenuto {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--teal-profondo); color: #fff;
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--r-piccolo) 0;
  text-decoration: none; font-weight: 600;
}
.salta-al-contenuto:focus { left: 0; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Anche il numero di ripetizioni: un'animazione infinita accorciata a
     0,01ms non si ferma, sfarfalla. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Impalcatura
   -------------------------------------------------------------------------- */

.wrap {
  width: min(100% - (var(--bordo) * 2), var(--pagina));
  margin-inline: auto;
}

.sezione { padding-block: clamp(2.5rem, 6vw, 5.5rem); }
.sezione--stretta { padding-block: clamp(2rem, 3.5vw, 3.5rem); }
.sezione--fascia,
.sezione--fascia-senape { background: var(--fascia-tinta); }
.sezione--fascia        { --fascia-tinta: var(--fascia); }
.sezione--fascia-senape { --fascia-tinta: var(--senape-chiara); }

.etichetta {
  font-size: 0.875rem;   /* 14px, come nel pitch deck (Gaia, 7/10/2026; era 13px) */
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* Teal scuro e non teal: a 13px il teal del marchio sta a 3,7:1. */
  color: var(--teal-scuro);
}
.etichetta--tenue { color: var(--grigio-tenue); }

/* Titoli in Fraunces. I mockup (.mk) tengono il font dell'interfaccia. */
/* Specificità zero: qualunque regola di componente può tornare a Poppins. */
:where(h1, h2, h3, .h1, .h2, .h3, .display, .card__titolo):where(:not(.mk *)) {
  font-family: var(--font-titoli);
  font-optical-sizing: auto;
}
/* I titoletti in maiuscolo spaziato (footer, pannelli, colonne) restano in
   Poppins come le etichette. */
:is(.site-footer h2, .pannello__titolo, .nav__colonna-titolo, .strutture-numeri__tipo) { font-family: var(--font); }

h1, .h1 {
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--teal-profondo);
  text-wrap: balance;
}
h2, .h2 {
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--teal-profondo);
  text-wrap: balance;
}
h3, .h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--teal-profondo);
}

.testo { max-width: 62ch; }
.testo p + p { margin-top: 0.85rem; }
.testo strong { font-weight: 600; color: var(--grigio-scuro); }

.centrato { text-align: center; margin-inline: auto; }

/* --------------------------------------------------------------------------
   Bottoni
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-pillola);
  font-family: inherit;
  font-size: var(--t-piccolo);
  font-weight: 600;
  line-height: 1.3;
  /* Un bottone non va mai a capo: fra 1000 e 1230px "Prova una demo" si
     spezzava su tre righe e diventava un cerchio. */
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--piccolo { padding: 0.625rem 1.25rem; }

/* Fondo teal scuro: bianco sul teal-hover stava a 4,4:1, appena sotto soglia. */
.btn--primario { background: var(--teal-scuro); color: #fff; }
.btn--primario:hover { background: var(--teal-profondo); }

.btn--linea { border-color: var(--teal-scuro); color: var(--teal-scuro); background: transparent; }
.btn--linea:hover { background: var(--teal-chiaro); }

/* Testo teal profondo sull'arancio: 4,6:1. Il bianco stava a 2,5:1.
   Al passaggio il fondo NON si scurisce (con l'arancio cupo il testo
   scenderebbe a 3,7:1): si solleva con l'ombra. */
.btn--arancio { background: var(--arancio); color: var(--teal-profondo); }
.btn--arancio:hover { box-shadow: var(--ombra-2); }

.btn--testo { padding: 0; color: var(--teal-scuro); background: none; }
.btn--testo:hover { color: var(--teal-profondo); }

.btn-riga { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn-riga--centro { justify-content: center; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.site-header.is-scorso { border-bottom-color: var(--filetto); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-block: 1rem;
  position: relative;
}
.site-header__logo { flex: none; }
.site-header__logo img { height: 26px; width: auto; }

/* La barra delle voci è un contenitore a pillola, come nel mockup di Agnese,
   ma senza i suoi due grigi: contenitore in teal chiarissimo e pagina corrente
   in teal profondo con testo bianco.
   Il primo tentativo usava la menta scura, più tonale e vicina al mockup: sul
   contenitore stava a 1,3:1 e la pagina corrente non si distingueva. Questa
   sta a 10:1. È il tono più scuro del marchio, diverso dal teal acceso del
   pulsante "Prova una demo": si legge come stato, non come azione. */
.nav {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding: 0.3125rem;
  background: var(--teal-chiaro);
  border-radius: var(--r-pillola);
  font-size: var(--t-piccolo);
  font-weight: 500;
}
.nav__lista { display: flex; align-items: center; gap: 0.25rem; }

/* Voce della barra: un link o il bottone che apre il menu a tendina. */
.nav__voce {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: var(--r-pillola);
  background: none;
  font: inherit;
  line-height: 1.3;
  color: var(--grigio-scuro);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.nav__voce:hover,
.nav__apri[aria-expanded="true"] { color: var(--teal-profondo); background: rgba(255, 255, 255, 0.65); }
/* La pagina corrente; per il menu a tendina vale se la pagina è dentro. */
.nav__voce:is([aria-current="page"], [data-attivo]) {
  background: var(--teal-profondo);
  color: #fff;
  font-weight: 600;
}
.nav__freccia { flex: none; transition: transform 0.2s ease; }
.nav__apri[aria-expanded="true"] .nav__freccia { transform: rotate(180deg); }

/* --- Menu a tendina ----------------------------------------------------- */

.nav__gruppo { position: relative; }

.nav__pannello {
  display: none;
  position: absolute;
  top: calc(100% + 0.875rem);
  left: -0.3125rem;
  z-index: 60;
  grid-template-columns: repeat(2, minmax(16.5rem, auto));
  gap: 0.5rem 1rem;
  padding: 1rem;
  background: var(--carta);
  border: 1px solid var(--filetto);
  border-radius: var(--r-media);
  box-shadow: var(--ombra-3);
}
/* Il ponte invisibile fra bottone e pannello: senza, scendendo col mouse si
   passa sul vuoto e (senza JS) il pannello si richiude. */
.nav__pannello::before {
  content: "";
  position: absolute;
  inset: -0.9375rem 0 100%;
}
/* "Per chi" ha una colonna sola: senza questo restava una seconda colonna vuota. */
@media (min-width: 1181px) {
  .nav__pannello:not(.nav__pannello--aree) { grid-template-columns: minmax(16.5rem, auto); }
}
.nav__apri[aria-expanded="true"] + .nav__pannello { display: grid; }
/* Senza JS: si apre al passaggio e quando il fuoco ci entra da tastiera. */
html:not(.js) .nav__gruppo:is(:hover, :focus-within) > .nav__pannello { display: grid; }

.nav__colonna-titolo {
  padding: 0.25rem 0.75rem 0.5rem;
  font-size: var(--t-etichetta);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grigio-tenue);
}
.nav__colonna ul { display: grid; gap: 0.125rem; }
/* Il titolo della colonna delle tre aree è un link (Funzionalità →). */
.nav__colonna-titolo--link {
  display: inline-block;
  color: var(--teal-scuro);
  text-decoration: none;
  border-radius: var(--r-piccolo);
}
.nav__colonna-titolo--link:hover,
.nav__colonna-titolo--link:focus-visible { color: var(--teal-profondo); text-decoration: underline; text-underline-offset: 0.2em; }
.nav__colonna-titolo--link[aria-current="page"] { color: var(--teal-profondo); }

.nav__link {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--r-piccolo);
  color: var(--grigio-scuro);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.nav__link:hover { background: var(--teal-chiaro); }
.nav__icona {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-piccolo);
  background: var(--teal-chiaro);
  color: var(--teal-profondo);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.nav__link:hover .nav__icona { background: var(--carta); }
.nav__link-corpo { display: grid; gap: 0.125rem; }
.nav__link-nome { font-weight: 600; color: var(--teal-profondo); line-height: 1.3; }
.nav__link-descr { font-size: var(--t-etichetta); line-height: 1.4; color: var(--grigio); max-width: 30ch; }
.nav__link[aria-current="page"] .nav__icona { background: var(--teal-profondo); color: #fff; }
.nav__link[aria-current="page"] .nav__link-nome::after { content: " ·  sei qui"; font-weight: 500; font-size: var(--t-etichetta); color: var(--teal-scuro); }

.site-header__azioni { display: flex; gap: 0.625rem; align-items: center; }

/* Menu mobile aperto: la pagina sotto non scorre e si vela. La classe la
   mette site.js solo sotto il passo del menu. */
html.menu-aperto body { overflow: hidden; }
html.menu-aperto body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 40, 45, 0.32);
}

.nav-toggle { display: none; }
.nav__azioni { display: none; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem); }

.hero__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.hero__titolo { margin-top: 1rem; }
.hero__testo { margin-top: 1.25rem; font-size: 1.0625rem; }
.hero__azioni { margin-top: 2rem; }

.hero__media {
  background: var(--menta);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.hero__media img { width: 100%; border-radius: var(--r-piccolo); }

/* Una fotografia riempie la card fino al bordo. Il riquadro menta con il
   padding qui sopra serve alle schermate di prodotto, che hanno il loro
   fondo bianco e vanno appoggiate su qualcosa. */
.hero__media--foto { background: none; padding: 0; }
.hero__media--foto img { border-radius: var(--r-card); }

/* Striscia loghi clienti */
.clienti { padding-block: clamp(0.5rem, 1.2vw, 1rem); }

/* --------------------------------------------------------------------------
   Moduli: le tre card prodotto
   -------------------------------------------------------------------------- */

.moduli {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.modulo {
  background: var(--carta);
  border: 1px solid var(--filetto);
  border-radius: var(--r-card);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
/* Si solleva solo se è cliccabile: una card che si muove e poi non porta da
   nessuna parte è una promessa mancata (audit B9). */
:is(a.modulo, .modulo:has(a[href])):hover {
  border-color: var(--menta-scura);
  transform: translateY(-3px);
  box-shadow: var(--ombra-2);
}
.modulo__numero {
  font-size: var(--t-etichetta);
  font-weight: 700;
  color: var(--teal-scuro);
  letter-spacing: 0.08em;
}
.modulo__testo { font-size: var(--t-piccolo); }

/* --------------------------------------------------------------------------
   Blocco alternato testo/immagine
   -------------------------------------------------------------------------- */

.blocco {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.blocco--invertito .blocco__media { order: -1; }
.blocco__media img { width: 100%; border-radius: var(--r-card); }
.blocco__testo { margin-top: 1rem; }

/* La riga guida sotto il titolo del modulo. */
.blocco__sintesi {
  margin-top: 0.625rem;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--grigio-scuro);
  max-width: 34ch;
}

/* Solo nelle fasce dei moduli: le foto arrivano con proporzioni diverse
   (fn-channel è verticale), il ritaglio uniforme le mette in riga. Il
   .blocco normale resta libero, lo usano altre pagine. */
.blocco--modulo .blocco__media img { aspect-ratio: 4 / 3; object-fit: cover; }

.spunte { margin-top: 1.5rem; display: grid; gap: 0.75rem; }
.spunta { display: flex; gap: 0.75rem; align-items: flex-start; font-size: var(--t-piccolo); }
.spunta svg { flex: none; margin-top: 0.3rem; color: var(--teal); }

/* --------------------------------------------------------------------------
   Segmenti "a chi è rivolto"
   -------------------------------------------------------------------------- */

.segmenti {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.segmento {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  /* Più alte: l’immagine ha spazio e il testo resta in fondo. */
  min-height: clamp(380px, 34vw, 460px);
  display: flex;
  align-items: flex-end;
  padding: 1.75rem;
  color: #fff;
}
.segmento img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.segmento::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 40, 45, 0) 30%, rgba(0, 40, 45, 0.85) 100%);
}
:is(a.segmento, .segmento:has(a[href])):hover img { transform: scale(1.05); }
.segmento__corpo { position: relative; z-index: 1; }
.segmento__titolo { color: #fff; margin-bottom: 0.4rem; }
.segmento__testo { font-size: var(--t-piccolo); color: rgba(255, 255, 255, 0.88); }

/* --------------------------------------------------------------------------
   Assistenza
   -------------------------------------------------------------------------- */

.assistenza {
  background: var(--teal-profondo);
  color: rgba(255, 255, 255, 0.85);
  border-radius: var(--r-card);
  padding: clamp(2rem, 4vw, 3.5rem);
}
.assistenza h2 { color: #fff; }
.assistenza .etichetta { color: var(--menta-scura); }
.assistenza__griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}



/* --------------------------------------------------------------------------
   Titolo rivelato: l'immagine avanza da sinistra e il testo che copre
   diventa bianco. È l'apertura immaginata nel Figma.

   Come funziona: il titolo è scritto DUE volte, una sotto l'altra alla stessa
   identica posizione — sotto in teal, sopra in bianco — e in mezzo c'è la
   foto. Un taglio (clip-path) che avanza scopre insieme la foto e la copia
   bianca, quindi il testo cambia colore esattamente dove la foto è arrivata.

   I due tagli restano sincronizzati anche se gli elementi hanno larghezze
   diverse: la foto è larga --rivela-fine e il suo bordo va dal 100% allo 0%,
   la copia bianca è larga quanto il titolo e va dal 100% a 100% - --rivela-fine.
   In pixel percorrono la stessa identica distanza.
   -------------------------------------------------------------------------- */


/* Apertura a tutta larghezza, titolo centrato: è l'impaginazione del Figma.
   L'immagine entra da sinistra e viene tagliata dal bordo del contenitore. */
.hero--aperto {
  /* Di quanto la fascia della foto sborda sopra e sotto il titolo. Sta qui e
     non su .rivela perché serve anche a etichetta e paragrafo, che devono
     lasciarle spazio: senza, la fascia si mangiava l'etichetta sopra e
     toccava il paragrafo sotto.
     In rem, non in em: un em qui si risolverebbe sul corpo del titolo e lì
     su quello del paragrafo, e i due valori non coinciderebbero. */
  --rivela-sfondo: 6.25rem;
  text-align: center;
  /* Niente padding sopra: la fascia deve attaccarsi alla barra come nel
     riferimento. Lo spazio lo dà il margine del titolo. */
  padding-block: 0 clamp(2rem, 4vw, 3.5rem);
}
.hero--aperto .hero__titolo {
  margin-top: calc(0.5rem + var(--rivela-sfondo));
  font-size: var(--t-display);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
/* Sul telefono "BookingDesigner" è una parola sola e lunga: a 40px riempiva
   tutta la riga. Qui il titolo segue la larghezza (32px a 375, 27px a 320). */
@media (max-width: 480px) {
  .hero--aperto .hero__titolo { font-size: clamp(1.75rem, 8.5vw, 2.5rem); }
}
.hero--aperto .hero__testo {
  margin-top: calc(1.25rem + var(--rivela-sfondo));
  margin-inline: auto;
  max-width: 54ch;
}
.hero--aperto .btn-riga { justify-content: center; }

/* --------------------------------------------------------------------------
   Titolo rivelato: l'immagine avanza da sinistra e il testo che copre
   diventa bianco. È l'apertura immaginata nel Figma.

   Il titolo è scritto DUE volte, una sopra l'altra alla stessa identica
   posizione — sotto in teal, sopra in bianco — con la foto in mezzo. Un
   taglio (clip-path) che avanza scopre insieme la foto e la copia bianca,
   quindi il testo cambia colore esattamente dove la foto è arrivata.

   Il punto delicato è che i due tagli devono vivere nello STESSO sistema di
   coordinate, altrimenti non restano sincronizzati. Per questo la copia
   bianca non viene ritagliata da sé: sta dentro un velo largo quanto tutto
   il titolo, ed è il velo a essere tagliato — come la foto. Il testo dentro
   resta centrato e allineato al millimetro con la copia sotto.
   -------------------------------------------------------------------------- */

.rivela {
  /* Copertura di arrivo. Al 100% la foto finisce per occupare tutta la
     larghezza e il titolo resta interamente bianco: il mockup del Figma
     mostra un fotogramma a metà corsa, non lo stato finale. */
  --rivela-fine: 100%;
  --rivela-durata: 1.15s;
  --rivela-curva: cubic-bezier(0.65, 0, 0.35, 1);
  position: relative;
  display: block;
  text-align: center;
}

/* Le due copie hanno le stesse identiche regole di impaginazione: se una
   differisse anche solo per la larghezza massima, le righe andrebbero a capo
   in punti diversi e si vedrebbe il doppio testo. */
.rivela__base,
.rivela__sopra {
  display: block;
  /* Larghezza pensata per due righe: l'h1 eredita text-wrap: balance, che le
     bilancia da solo. Sotto una certa finestra torna a tre, ed è giusto così. */
  max-width: 38ch;
  margin-inline: auto;
}
.rivela__base { position: relative; z-index: 1; }
.rivela__sopra { color: #fff; }

.rivela__immagine {
  position: absolute;
  /* A tutta finestra: 50% è metà del titolo, quindi questo porta il bordo
     sinistro esattamente sul bordo della finestra. Il velo qui sotto fa lo
     stesso calcolo — se uno dei due restasse nel contenitore, i due tagli
     viaggerebbero a velocità diverse e il testo cambierebbe colore prima o
     dopo il passaggio della foto. */
  left: calc(50% - 50vw);
  inset-block: calc(var(--rivela-sfondo) * -1);
  width: 100vw;
  border-radius: 0;
  /* Velatura scura sopra la foto: il testo bianco deve reggere ovunque cada
     il ritaglio, e questa foto ha camicie bianche e volti chiari. */
  background:
    linear-gradient(rgba(0, 40, 45, 0.55), rgba(0, 40, 45, 0.55)),
    url("/assets/img/home-reception.jpg") 30% 68% / cover;
  /* La larghezza NON si anima: se il riquadro crescesse, lo sfondo in "cover"
     si riscalerebbe a ogni fotogramma e sembrerebbe uno zoom, non uno
     scorrimento. Il riquadro resta fermo e a scorrere è il taglio. */
  clip-path: inset(0 0 0 0);
  z-index: 2;
  animation: rivela-avanza var(--rivela-durata) var(--rivela-curva) 0.25s both;
}

.rivela__velo {
  position: absolute;
  inset-block: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: 3;
  pointer-events: none;
  clip-path: inset(0 calc(100% - var(--rivela-fine)) 0 0);
  animation: rivela-avanza var(--rivela-durata) var(--rivela-curva) 0.25s both;
}

/* Un fotogramma solo: il valore di arrivo è quello scritto sull'elemento.
   Foto e velo hanno larghezze diverse ma il bordo del taglio percorre la
   stessa identica distanza in pixel, quindi restano appaiati. */
@keyframes rivela-avanza { from { clip-path: inset(0 100% 0 0); } }

@media (prefers-reduced-motion: reduce) {
  /* Niente scorrimento: si parte già dallo stato finale. */
  .rivela__immagine, .rivela__velo { animation: none; }
}

/* --------------------------------------------------------------------------
   Bento dei moduli: schede arancioni e foto a scacchiera
   L'ordine in sorgente è scheda, foto, scheda, foto…: su tre colonne la
   scacchiera viene da sé, e su due o una colonna resta comunque alternata.
   -------------------------------------------------------------------------- */

.bento {
  display: grid;
  /* Tre colonne fisse: con auto-fit a 1240px ne entravano quattro e la
     scacchiera saltava. Sotto passa a due, poi a una. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(0.875rem, 1.5vw, 1.25rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.bento__cella {
  border-radius: var(--r-card);
  overflow: hidden;
  min-height: clamp(260px, 25vw, 340px);
}

.bento__cella--modulo {
  /* Il colore del testo sta in una variabile apposta: sull'arancione del
     marchio il bianco aveva un contrasto di 2,5:1, sotto il minimo di 4,5:1.
     Il teal profondo sta a 4,6:1 e resta nella famiglia del marchio. */
  --bento-testo: var(--teal-profondo);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.5rem, 2.2vw, 2rem);
  background: var(--arancio);
  color: var(--bento-testo);
}
.bento__titolo {
  font-size: clamp(1.375rem, 1.4vw + 0.9rem, 1.875rem);
  color: inherit;
}
.bento__testo {
  font-size: var(--t-piccolo);
  color: inherit;
}

.bento__cella--foto { position: relative; background: var(--menta); }
@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } }

.bento__cella--foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Movimento al passaggio del mouse: la cella si solleva e la foto respira,
   ma SOLO se la cella è un link (audit B9). Oggi le celle della home sono
   <article> e <figure> senza link: restano ferme. Quando in fase 2
   diventeranno <a href="/funzionalita#crm">, l'effetto torna da solo.
   L'arancione non si incupisce più: il testo teal sull'arancio cupo
   scenderebbe a 3,7:1. */
.bento__cella {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease;
}
:is(a.bento__cella, .bento__cella:has(a[href])):hover {
  transform: translateY(-6px);
  box-shadow: var(--ombra-3);
}

.bento__cella--foto img { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
:is(a.bento__cella--foto, .bento__cella--foto:has(a[href])):hover img { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .bento__cella, .bento__cella--foto img { transition: none; }
  .bento__cella:hover { transform: none; }
  .bento__cella--foto:hover img { transform: none; }
}
/* --------------------------------------------------------------------------
   Vetrine: pannello visuale + testo, a due colonne
   Il trattamento dell'anteprima approvata. Tre blocchi sulla home (cloud,
   integrazioni, assistenza) che alternano il lato del pannello.
   -------------------------------------------------------------------------- */

.vetrina {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
/* Pannello a destra: vale anche in colonna singola, dove il testo apre. */
.vetrina--invertita .vetrina__pannello { order: 1; }

.vetrina__testo { max-width: 46ch; }
.vetrina__testo h2 { margin-top: 0.75rem; }
.vetrina__testo p { margin-top: 0.875rem; }
.vetrina__azioni { margin-top: 1.75rem; }

.vetrina__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-card);
}

/* Il pannello menta che contiene righe o tessere */
.pannello {
  background: var(--menta);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.pannello__righe { display: grid; gap: 0.75rem; }
.pannello__riga {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  background: var(--carta);
  border-radius: var(--r-piccolo);
  padding: 0.9375rem 1.125rem;
  font-size: var(--t-piccolo);
  font-weight: 600;
  color: var(--teal-profondo);
  line-height: 1.35;
}
.pannello__riga svg { flex: none; color: var(--teal); }

/* La cifra in basso: al posto della percentuale di uptime dell'anteprima,
   che non è misurata e non possiamo pubblicare. */
.pannello__cifra {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  margin-top: 1.75rem;
  padding-inline: 0.375rem;
}
.pannello__numero {
  font-size: clamp(2.75rem, 4.5vw, 3.75rem);
  font-weight: 700;
  line-height: 1;
  color: var(--teal-profondo);
}
.pannello__nota {
  font-size: var(--t-etichetta);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-scuro);
  max-width: 15ch;
  line-height: 1.4;
}

/* Le tessere delle integrazioni */
.pannello__loghi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.625rem;
}
.tessera {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 84px;
  padding: 0.5rem 0.375rem;
  background: var(--carta);
  border-radius: var(--r-piccolo);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--teal-profondo);
  /* Mai spezzare un nome a metà ("Booking.co / m"): se non ci sta, la
     griglia scende a due colonne qui sotto. */
  overflow-wrap: normal;
  hyphens: manual;
}
.tessera--altre { background: var(--teal-profondo); color: #fff; }
.pannello__didascalia {
  margin-top: 1.25rem;
  text-align: center;
  font-size: var(--t-etichetta);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-scuro);
}

@media (max-width: 560px) {
  .pannello__loghi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .pannello__loghi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Due parole in arancione dentro un titolo, come nell'anteprima. */
/* Sul fondo scuro (.evento-prossimo, .assistenza) l'arancio pieno regge. */
.accento { color: var(--arancio-testo); }
:is(.assistenza, .evento-prossimo) .accento { color: var(--arancio); }

/* --------------------------------------------------------------------------
   Eventi
   -------------------------------------------------------------------------- */

.eventi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.evento {
  /* Bianca anche sulla fascia grigia: la card deve staccarsi dal fondo. */
  background: var(--carta);
  border: 1px solid var(--filetto);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
:is(a.evento, .evento:has(a[href])):hover { transform: translateY(-3px); box-shadow: var(--ombra-2); }
.evento img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.evento__corpo { padding: 1.25rem 1.5rem 1.5rem; }
.evento__data { font-size: var(--t-etichetta); font-weight: 600; color: var(--arancio-testo); letter-spacing: 0.04em; }
.evento__titolo { margin-top: 0.35rem; }
.evento__luogo { font-size: var(--t-piccolo); margin-top: 0.35rem; }


/* --------------------------------------------------------------------------
   Carosello delle testimonianze
   Una citazione per volta. Lo scorrimento è nativo (scroll-snap): senza JS
   resta una fascia che si trascina col dito o con la tastiera, e i comandi
   sotto sono solo un modo più comodo di fare la stessa cosa.
   -------------------------------------------------------------------------- */

.carosello { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.carosello__pista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carosello__pista::-webkit-scrollbar { display: none; }

.diapositiva {
  /* I colori della scheda stanno in quattro variabili: cambiare veste vuol
     dire toccare solo queste righe. Menta: chiaro, così sotto le tre schede
     scure di "Chi ci sceglie" la pagina respira, e nella famiglia fredda del
     marchio. Alternativa già pronta: --senape-chiara, la versione crema. */
  --slide-fondo:   var(--menta);
  --slide-testo:   var(--teal-profondo);
  --slide-dato:    var(--teal-scuro);
  --slide-filetto: rgba(0, 66, 73, 0.16);

  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.75rem, 3.5vw, 3.25rem);
  border-radius: var(--r-card);
  background: var(--slide-fondo);
  color: var(--grigio-scuro);
}
.diapositiva__virgolette { color: var(--slide-dato); opacity: 0.35; }

.diapositiva__testo {
  margin: 0;
  flex: 1;
  font-size: clamp(1.125rem, 0.9vw + 0.95rem, 1.5rem);
  line-height: 1.5;
  color: var(--slide-testo);
  max-width: 54ch;
}

.diapositiva__piede {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--slide-filetto);
}
.diapositiva__nome { font-weight: 600; color: var(--slide-testo); }
.diapositiva__ruolo { font-size: var(--t-piccolo); }
.diapositiva__luogo { font-size: var(--t-etichetta); color: var(--grigio); }

.diapositiva__dato { text-align: right; }
.diapositiva__valore {
  font-size: clamp(1.5rem, 1.6vw + 0.9rem, 2rem);
  font-weight: 700;
  line-height: 1.1;
  /* Teal sul sabbia: 4,5:1, e il freddo sul caldo fa risaltare il numero
     senza urlare. L'arancione qui non si leggerebbe (1,9:1). */
  color: var(--slide-dato);
}
.diapositiva__etichetta { font-size: var(--t-etichetta); max-width: 24ch; margin-left: auto; }

/* --- I comandi ------------------------------------------------------- */

.carosello__comandi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin-top: 1.75rem;
}

.carosello__freccia {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  padding: 0;
  border: 1.5px solid var(--filetto);
  border-radius: var(--r-pillola);
  background: var(--carta);
  color: var(--teal-profondo);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.carosello__freccia:hover { border-color: var(--teal); color: var(--teal); transform: scale(1.06); }

.carosello__punti { display: flex; align-items: center; gap: 0.5rem; }
.carosello__punto {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pillola);
  background: var(--filetto);
  cursor: pointer;
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
}
.carosello__punto:hover { background: var(--menta-scura); }
.carosello__punto[aria-current="true"] { width: 30px; background: var(--arancio); }

@media (prefers-reduced-motion: reduce) {
  .carosello__freccia, .carosello__punto { transition: none; }
  .carosello__freccia:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Strappo che taglia anche il contenuto
   Il bordo qui sopra e' una striscia disegnata SOPRA la fascia: passa
   davanti alle card ma non le taglia. Per strappare davvero le schede e le
   foto serve una maschera sulla sezione intera: due strati, uno pieno per
   tutto tranne gli ultimi 28px, e lo strappo su quei 28px. Quello che resta
   fuori dalla maschera sparisce, fondo e figli insieme.
   Si usa AL POSTO del bordo inferiore, non insieme.
   -------------------------------------------------------------------------- */

.sezione--strappata {
  --strappo-maschera: 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%2C0H600L600%2C17.4L597%2C16.2L594%2C18.1L591%2C19.6L588%2C16.8L585%2C14.1L582%2C19.6L579%2C24.5L576%2C22.2L573%2C15.9L570%2C15.6L567%2C15.4L564%2C12.5L561%2C11.3L558%2C15.2L555%2C18L552%2C15.6L549%2C14.2L546%2C16.3L543%2C19.8L540%2C20.2L537%2C20.1L534%2C18.5L531%2C16.5L528%2C15.1L525%2C17.1L522%2C19.3L519%2C19.9L516%2C20.9L513%2C22.1L510%2C21.1L507%2C18.5L504%2C19.8L501%2C21.5L498%2C19.8L495%2C15.2L492%2C13.9L489%2C14.5L486%2C14.1L483%2C13L480%2C13.8L477%2C14.7L474%2C12.9L471%2C10.6L468%2C10L465%2C11L462%2C10.3L459%2C9.2L456%2C8.5L453%2C8.3L450%2C8.1L447%2C8.9L444%2C10.3L441%2C10.7L438%2C10.5L435%2C10.2L432%2C9.8L429%2C8.4L426%2C8.4L423%2C9.1L420%2C8.9L417%2C6.7L414%2C5.8L411%2C6.9L408%2C7.7L405%2C6.9L402%2C6.5L399%2C7.3L396%2C5.8L393%2C2.8L390%2C1.5L387%2C4L384%2C4.7L381%2C3.7L378%2C3.3L375%2C5L372%2C6.1L369%2C7.3L366%2C9.8L363%2C11L360%2C10.1L357%2C8.4L354%2C8.5L351%2C7.8L348%2C9.5L345%2C12.7L342%2C15.4L339%2C13.4L336%2C11.7L333%2C14.8L330%2C18.3L327%2C16.7L324%2C13.3L321%2C14L318%2C12.7L315%2C8L312%2C5.6L309%2C12L306%2C16.2L303%2C14.1L300%2C11.2L297%2C12.9L294%2C14.4L291%2C13.3L288%2C13.3L285%2C13.5L282%2C12L279%2C8.6L276%2C9.2L273%2C11.3L270%2C14.9L267%2C17.5L264%2C19.7L261%2C17.6L258%2C13.8L255%2C14.3L252%2C17L249%2C16L246%2C11.4L243%2C11.4L240%2C12.4L237%2C11.1L234%2C9.4L231%2C13.7L228%2C17.2L225%2C14.7L222%2C9.9L219%2C9.3L216%2C10.7L213%2C9.9L210%2C9.1L207%2C9.7L204%2C11L201%2C10.2L198%2C11.1L195%2C13.5L192%2C16.1L189%2C16.8L186%2C17L183%2C16.6L180%2C15.6L177%2C16.1L174%2C18.2L171%2C19.6L168%2C18.8L165%2C19.4L162%2C20.7L159%2C21.3L156%2C20.7L153%2C21.6L150%2C22.7L147%2C21.8L144%2C19.4L141%2C18.7L138%2C20.1L135%2C20.6L132%2C20.4L129%2C20.6L126%2C21.9L123%2C21.8L120%2C21.6L117%2C22.5L114%2C24L111%2C24L108%2C23.2L105%2C22.9L102%2C22.7L99%2C23.5L96%2C25.4L93%2C27.5L90%2C26.8L87%2C26.4L84%2C26.8L81%2C27.3L78%2C25.6L75%2C24.7L72%2C25.4L69%2C24.3L66%2C19.9L63%2C17.7L60%2C21.1L57%2C23.7L54%2C22.3L51%2C19.8L48%2C21.1L45%2C19.7L42%2C16.3L39%2C15.3L36%2C17.7L33%2C17.4L30%2C14.2L27%2C13.2L24%2C14.7L21%2C17.6L18%2C20.3L15%2C23.2L12%2C21.5L9%2C18.5L6%2C16.8L3%2C18.1L0%2C17.4Z%22%20fill%3D%22%23000000%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: linear-gradient(#000 0 0), var(--strappo-maschera);
          mask-image: linear-gradient(#000 0 0), var(--strappo-maschera);
  -webkit-mask-size: 100% calc(100% - var(--strappo-h)), auto var(--strappo-h);
          mask-size: 100% calc(100% - var(--strappo-h)), auto var(--strappo-h);
  -webkit-mask-position: top left, bottom left;
          mask-position: top left, bottom left;
  -webkit-mask-repeat: no-repeat, repeat-x;
          mask-repeat: no-repeat, repeat-x;
}
/* La maschera fa gia' il lavoro: la striscia sotto sarebbe di troppo. */
.sezione--strappata::after { display: none; }

/* --------------------------------------------------------------------------
   Grana della carta
   Rumore generato dall'SVG: nessun file da scaricare. NON usa uno
   pseudo-elemento perché sulle fasce ::before e ::after sono già presi dal
   bordo strappato; è uno strato di sfondo che si fonde in multiply con la
   tinta della sezione. Va tenuto bassissimo: deve sporcare, non vedersi.
   -------------------------------------------------------------------------- */

.sfondo-grana {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27200%27 height=%27200%27%3E%3Cfilter id=%27g%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.8%27 numOctaves=%274%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix type=%27saturate%27 values=%270%27/%3E%3C/filter%3E%3Crect width=%27200%27 height=%27200%27 filter=%27url(%23g)%27 opacity=%270.5%27/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  background-blend-mode: multiply;
}

/* --------------------------------------------------------------------------
   Chiusura
   -------------------------------------------------------------------------- */

.chiusura { text-align: center; }
.chiusura__titolo { font-size: var(--t-h1); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: 0;
  /* Il teal di Sales Hub, con il logo bianco e grigio (Gaia, 7/10/2026). */
  --footer-chiaro: #fff;
  --footer-link: #fff;
  background: var(--area-sh-colore);
  color: var(--footer-chiaro);
  border-radius: clamp(28px, 4vw, 52px) clamp(28px, 4vw, 52px) 0 0;
  padding-block: clamp(2.5rem, 4vw, 4rem) 1.75rem;
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 2.5rem;
}
.site-footer__payoff { margin-top: 0.875rem; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--footer-chiaro); }
.site-footer__logo { display: block; width: 223px; max-width: 100%; height: auto; }
.site-footer__claim { margin-top: 0.875rem; font-size: var(--t-piccolo); max-width: 26ch; }
.site-footer h2 {
  font-size: var(--t-etichetta);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0.875rem;
}
.site-footer__list { display: grid; gap: 0.4rem; font-size: var(--t-piccolo); font-style: normal; }
.site-footer__list a { color: var(--footer-link); text-decoration: none; }
.site-footer__list a:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
.site-footer .muted { color: var(--footer-chiaro); opacity: 0.8; }
.muted { color: var(--grigio-tenue); }

.socials { display: flex; gap: 0.625rem; margin-top: 1.25rem; }
.socials a:hover { opacity: 0.7; }

.site-footer__legal {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  font-size: var(--t-etichetta);
  color: var(--footer-chiaro);
  text-align: center;
}
.site-footer__legal a { color: var(--footer-chiaro); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .hero__griglia { grid-template-columns: 1fr; }
  .blocco--invertito .blocco__media { order: 0; }
}

/* Menu a tendina (hamburger).
   ⚠️ 1180px: è lo stesso valore di MENU_MOBILE in site.js. Se cambia qui va
   cambiato anche lì. Sotto questa misura la barra con logo, voci e due
   bottoni non ci sta più (a 1100px il bottone andava a capo). Il layout
   delle pagine resta invece sul passo dei 1000px, qui sopra. */
@media (max-width: 1180px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    margin-left: auto;
    border: 1px solid var(--filetto);
    border-radius: var(--r-pillola);
    background: var(--carta);
    cursor: pointer;
  }
  .nav-toggle__barre,
  .nav-toggle__barre::before,
  .nav-toggle__barre::after {
    display: block; width: 18px; height: 2px;
    background: var(--grigio-scuro); border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .nav-toggle__barre { position: relative; }
  .nav-toggle__barre::before,
  .nav-toggle__barre::after { content: ""; position: absolute; left: 0; }
  .nav-toggle__barre::before { top: -6px; }
  .nav-toggle__barre::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__barre { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__barre::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__barre::after { transform: translateY(-6px) rotate(-45deg); }

  .nav {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding: 0.5rem;
    /* A tendina la pillola non ha senso: torna pannello bianco squadrato. */
    background: var(--carta);
    border: 1px solid var(--filetto);
    border-radius: var(--r-media);
    box-shadow: var(--ombra-3);
  }
  .nav[hidden] { display: none; }
  /* Righe a tutta larghezza allineate a sinistra, come i bottoni sotto: la
     pillola stretta sul testo e centrata seguiva un'altra logica. */
  .nav__lista { flex-direction: column; align-items: stretch; gap: 0.125rem; }
  .nav__voce { width: 100%; justify-content: flex-start; padding: 0.75rem 1rem; border-radius: var(--r-piccolo); }
  .nav__apri { justify-content: space-between; }
  /* Su mobile le tendine ("Software", "Per chi") restano esplose (Luca, 5/10/2026): il bottone
     diventa un'intestazione e il pannello è sempre visibile. */
  .nav__apri { pointer-events: none; cursor: default; }
  .nav__apri .nav__freccia { display: none; }
  .nav__gruppo > .nav__pannello { display: grid; }

  /* Il menu a tendina si apre sul posto, dentro il pannello. */
  .nav__pannello {
    position: static;
    grid-template-columns: 1fr;
    gap: 0.25rem;
    padding: 0.25rem 0 0.5rem 0.5rem;
    border: 0;
    box-shadow: none;
  }
  .nav__pannello::before { content: none; }
  .nav__colonna-titolo { padding-top: 0.5rem; }
  .nav__link { padding: 0.5rem 0.75rem; }

  /* Il pannello non deve uscire dallo schermo su telefoni bassi. */
  .nav { max-height: calc(100dvh - 5.5rem); overflow-y: auto; overscroll-behavior: contain; }

  /* Nella barra restano solo logo e hamburger: i pulsanti passano nel menu. */
  .site-header__azioni { display: none; }

  .nav__azioni {
    display: grid;
    gap: 0.625rem;
    margin-top: 0.625rem;
    padding-top: 0.875rem;
    padding-bottom: 0.25rem;
    border-top: 1px solid var(--filetto);
  }
  .nav__azioni .btn { width: 100%; }
}

@media (max-width: 640px) {
  /* Due colonne anche su telefono: in una sola il footer era una lista
     lunghissima. Marchio e richiamo alla call a tutta larghezza. */
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem; }
  .site-footer__top > :first-child,
  .site-footer__cta { grid-column: 1 / -1; }
  .segmento { min-height: 300px; }
}

/* --------------------------------------------------------------------------
   Profili: tre schede a sinistra, l'approfondimento a destra
   Senza JavaScript sono tre blocchi uno sotto l'altro, tutti leggibili: è il
   JS a nasconderne due e a farli diventare schede. Mai il contrario — una
   scheda che senza JS non si apre è contenuto perso.
   -------------------------------------------------------------------------- */

.profili {
  display: grid;
  /* Colonna delle schede volutamente stretta: sono un indice, il contenuto
     sta a destra. */
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.7fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: start;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.profili__elenco { display: grid; gap: 0.75rem; }

.profili__voce {
  position: relative;
  display: block;
  width: 100%;
  min-height: 152px;
  padding: 0;
  border: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--teal-profondo);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: opacity 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.profili__voce img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* La velatura tiene il testo leggibile su qualsiasi foto ci si metta. */
.profili__voce::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 40, 45, 0.88), rgba(0, 40, 45, 0.55));
  transition: background 0.25s ease;
}
.profili__voce-corpo {
  position: relative;
  z-index: 1;
  display: block;
  padding: 1rem 1.25rem;
}
.profili__nome { display: block; font-size: 1.0625rem; font-weight: 600; }
.profili__riga {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--t-etichetta);
  color: rgba(255, 255, 255, 0.82);
}

.profili__voce:not([aria-selected="true"]) { opacity: 0.66; }
.profili__voce:hover { opacity: 1; transform: translateY(-2px); }
.profili__voce[aria-selected="true"] {
  box-shadow: 0 0 0 3px var(--teal);
}
.profili__voce[aria-selected="true"]::after {
  background: linear-gradient(90deg, rgba(0, 66, 73, 0.92), rgba(0, 66, 73, 0.62));
}

.profili__pannello {
  background: var(--carta);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
/* Senza JS i pannelli si susseguono: un po' d'aria fra uno e l'altro. */
.profili__pannello + .profili__pannello { margin-top: 0.75rem; }
.profili__sintesi {
  margin-top: 0.625rem;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--grigio-scuro);
  max-width: 46ch;
}

@media (max-width: 860px) {
  /* In colonna: prima le tre schede, poi l'approfondimento. */
  .profili { grid-template-columns: 1fr; }
  .profili__voce { min-height: 116px; }
}

@media (prefers-reduced-motion: reduce) {
  .profili__voce { transition: none; }
  .profili__voce:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Testimonianze
   -------------------------------------------------------------------------- */

.citazioni {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.citazione {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2rem;
  background: var(--carta);
  border: 1px solid var(--filetto);
  border-radius: var(--r-card);
}
.citazione--menta { background: var(--menta); border-color: transparent; }
.citazione--scura { background: var(--teal-profondo); border-color: transparent; color: rgba(255, 255, 255, 0.86); }
.citazione--scura .citazione__nome { color: #fff; }
.citazione--scura .citazione__dato-valore { color: var(--menta-scura); }

.citazione__virgolette { color: var(--menta-scura); flex: none; }
.citazione--scura .citazione__virgolette { color: var(--teal); }

.citazione__testo {
  font-size: 1.0625rem;
  line-height: 1.6;
  margin-top: -0.5rem;
}

.citazione__dato {
  padding: 0.875rem 0 0.25rem;
  border-top: 1px solid rgba(0, 66, 73, 0.12);
}
.citazione--scura .citazione__dato { border-top-color: rgba(255, 255, 255, 0.18); }
.citazione__dato-valore {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--teal-profondo);
  line-height: 1.2;
}
.citazione__dato-etichetta { font-size: var(--t-etichetta); margin-top: 0.15rem; }

.citazione__autore { margin-top: auto; padding-top: 0.25rem; }
.citazione__nome { font-weight: 600; color: var(--teal-profondo); }
.citazione__ruolo { font-size: var(--t-piccolo); }
.citazione__luogo { font-size: var(--t-etichetta); color: var(--grigio-tenue); margin-top: 0.1rem; }
.citazione--scura .citazione__ruolo { color: rgba(255, 255, 255, 0.8); }
.citazione--scura .citazione__luogo { color: rgba(255, 255, 255, 0.55); }

/* --------------------------------------------------------------------------
   Fascia di numeri verificati
   -------------------------------------------------------------------------- */

.numeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 1px;
  background: var(--filetto);
  border: 1px solid var(--filetto);
  border-radius: var(--r-media);
  overflow: hidden;
}
.numero { background: var(--carta); padding: 1.5rem 1.75rem; }
.numero__valore {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--teal-profondo);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.numero__etichetta { font-size: var(--t-etichetta); margin-top: 0.4rem; }

/* --------------------------------------------------------------------------
   Elenco integrazioni
   -------------------------------------------------------------------------- */

.gruppo-int { padding-top: clamp(2rem, 4vw, 3rem); }
.gruppo-int__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--menta-scura);
}
.gruppo-int__conteggio {
  font-size: var(--t-etichetta);
  font-weight: 600;
  color: var(--teal-scuro);
  background: var(--teal-chiaro);
  border-radius: var(--r-pillola);
  padding: 0.2rem 0.7rem;
}

.voci-int {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: 0.25rem 1.5rem;
  margin-top: 1.25rem;
}
.voce-int {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--filetto);
  font-size: var(--t-piccolo);
}
.voce-int__nome { color: var(--grigio-scuro); }
.voce-int__attive {
  font-size: var(--t-etichetta);
  color: var(--grigio-tenue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Sicurezza
   -------------------------------------------------------------------------- */

.sicurezza { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.scheda-sic {
  padding: 1.75rem;
  border: 1px solid var(--filetto);
  border-radius: var(--r-card);
  background: var(--carta);
}
.scheda-sic__icona {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: var(--r-pillola);
  background: var(--teal-chiaro);
  color: var(--teal-profondo);
  margin-bottom: 1rem;
}
.scheda-sic h3 { margin-bottom: 0.5rem; }
.scheda-sic p { font-size: var(--t-piccolo); }

/* Riga "+ altri N canali" sotto l'elenco delle OTA. */
.altri-canali {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--teal-chiaro);
  border-radius: var(--r-piccolo);
  font-size: var(--t-piccolo);
  color: var(--teal-profondo);
}
.altri-canali__numero { font-weight: 700; white-space: nowrap; }

/* Schede del team: nome e ruolo sotto il ritratto. */
.team__nome { margin-top: 1.125rem; font-size: var(--t-h4); }
.team__ruolo {
  margin-top: 0.15rem;
  font-size: var(--t-etichetta);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-scuro);
}
.team__card .team__text { margin-top: 0.625rem; }

/* Griglia del team. Tre per riga su desktop: con sei persone fa due righe piene,
   invece della riga spaiata che verrebbe con quattro colonne. */
.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(2rem, 3vw, 2.75rem) 2rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.team__card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* I ritratti sono inquadrati sul viso: tagliare da sotto, mai dall'alto. */
  object-position: center 20%;
  border-radius: var(--r-card);
}

/* --------------------------------------------------------------------------
   Evento in evidenza
   -------------------------------------------------------------------------- */

.evento-prossimo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  background: var(--teal-profondo);
  color: rgba(255, 255, 255, 0.85);
  border-radius: var(--r-card);
}
.evento-prossimo .etichetta { color: var(--menta-scura); }
.evento-prossimo__nome {
  margin-top: 0.75rem;
  font-size: var(--t-h1);
  color: #fff;
  line-height: 1.12;
}
.evento-prossimo__data {
  margin-top: 0.75rem;
  font-size: var(--t-h3);
  font-weight: 600;
  color: var(--arancio);
  font-variant-numeric: tabular-nums;
}
.evento-prossimo__luogo { margin-top: 0.35rem; font-size: 1.0625rem; color: #fff; }
.evento-prossimo__nota { margin-top: 1rem; font-size: var(--t-piccolo); max-width: 44ch; }
.evento-prossimo__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-media);
}

@media (max-width: 900px) {
  .evento-prossimo { grid-template-columns: 1fr; }
  .evento-prossimo__media { order: -1; }
}

/* --------------------------------------------------------------------------
   Pagina contatti
   -------------------------------------------------------------------------- */

.contatti {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.contatti h2 { font-size: var(--t-h3); }

.recapiti { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.recapiti li { display: grid; gap: 0.15rem; }
.recapiti__etichetta {
  font-size: var(--t-etichetta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grigio-tenue);
}
.recapiti__valore { font-size: 1.0625rem; color: var(--teal-profondo); text-decoration: none; }
a.recapiti__valore:hover { color: var(--teal-scuro); text-decoration: underline; }

.contatti__fiera {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--teal-chiaro);
  border-radius: var(--r-piccolo);
  font-size: var(--t-piccolo);
}
.contatti__fiera .etichetta { text-align: left; }

/* Riquadro che dice chiaramente "qui manca una cosa" */
.segnaposto {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 2px dashed var(--menta-scura);
  border-radius: var(--r-card);
  background: var(--fascia);
}
.segnaposto__etichetta {
  font-size: var(--t-etichetta);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-scuro);
}
.segnaposto__testo { margin-top: 0.75rem; font-size: 1.0625rem; color: var(--teal-profondo); }
.segnaposto__nota { margin-top: 0.75rem; font-size: var(--t-etichetta); color: var(--grigio-tenue); }
.segnaposto code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--carta);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Domande frequenti
   -------------------------------------------------------------------------- */

.faq { display: grid; gap: 0.75rem; margin-top: clamp(2rem, 4vw, 3rem); }

.faq__voce {
  background: var(--fascia);
  border: 1px solid var(--filetto);
  border-radius: var(--r-media);
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.faq__voce[open] { border-color: var(--menta-scura); background: var(--carta); }

.faq__domanda {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem clamp(1.25rem, 2.5vw, 1.75rem);
  cursor: pointer;
  list-style: none;
}
.faq__domanda::-webkit-details-marker { display: none; }
.faq__numero {
  font-size: var(--t-etichetta);
  font-weight: 700;
  color: var(--grigio-tenue);
  font-variant-numeric: tabular-nums;
}
.faq__testo { font-size: 1.0625rem; font-weight: 600; color: var(--teal-profondo); text-wrap: balance; }
.faq__segno { color: var(--teal); transition: transform 0.25s ease; }
.faq__voce[open] .faq__segno { transform: rotate(45deg); }

.faq__risposta {
  padding: 0 clamp(1.25rem, 2.5vw, 1.75rem) 1.5rem;
  padding-left: clamp(1.25rem, 2.5vw, 5.25rem);
  font-size: var(--t-piccolo);
  max-width: 68ch;
}

@media (max-width: 900px) {
  .contatti { grid-template-columns: 1fr; }
  .faq__domanda { grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 0.75rem; }
  .faq__risposta { padding-left: clamp(1.25rem, 2.5vw, 2rem); }
}

/* --------------------------------------------------------------------------
   Chiusura in stile Agnese: bordo strappato, cerchi con la giungla,
   la parola ritagliata dentro la texture.
   -------------------------------------------------------------------------- */

.chiusura {
  /* La foglia grande sta su questa variabile perché serve anche qui: la
     sezione deve essere alta almeno quanto la foglia, o il bordo la taglia
     di netto (audit B8: a 1440px la foglia era 571px in una sezione di 449). */
  --foglia-sx: clamp(300px, 40vw, 600px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: center;
  min-height: calc(var(--foglia-sx) / 1.11 + 4rem);
  background: var(--carta);
  padding-block: clamp(4.5rem, 9vw, 8rem) clamp(3.5rem, 7vw, 6rem);
  text-align: center;
}

/* Le illustrazioni ai lati: la texture della giungla ritagliata con la sagoma
   di una foglia. È il meccanismo del Figma di Agnese — lì la foglia è un
   "clippath" con dentro la stessa immagine — non due cerchi come avevo fatto
   prima. La sagoma (assets/img/foglia.svg) è il tracciato esportato dal file.

   Misure prese dal Figma, pagina 1440px:
     sinistra  642px di larghezza, 281 fuori dal bordo (il 44%)
     destra    254px di larghezza,  94 fuori dal bordo (il 37%)
   Rapporto della sagoma: 560,3 / 504,6 = 1,11. */
.chiusura__foglia {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: calc(var(--foglia) / 1.11);
  width: var(--foglia);
  /* Misura FISSA, non percentuale: al 150% una foglia da 642px chiedeva 1926
     pixel di immagine su uno schermo 2x, e leaves.png ne ha 1400 — da lì la
     sgranatura. A 700px il conto torna esatto (700 x 2 = 1400) e il motivo
     resta della stessa taglia nelle due foglie, che hanno larghezze diverse. */
  background: url("/assets/img/leaves.png") center / 700px auto;
  -webkit-mask: url("/assets/img/foglia.svg") no-repeat center / 100% 100%;
          mask: url("/assets/img/foglia.svg") no-repeat center / 100% 100%;
  z-index: -1;
  pointer-events: none;
}
.chiusura__foglia--sx {
  /* Nel Figma è 642px a 1440: qui 576, perché con 642 la sezione dovrebbe
     crescere di altri 60px di bianco solo per contenerla. */
  --foglia: var(--foglia-sx);
  left: calc(var(--foglia) * -0.44);
  background-position: 70% 45%;
}
/* ⚠️ La sagoma destra nel Figma è un'altra: qui c'è la sinistra ribaltata.
   Serve esportare il nodo 9578:932 dal file BD (Copy) e salvarlo come
   assets/img/foglia-dx.svg, poi cambiare la mask qui sotto. */
.chiusura__foglia--dx {
  --foglia: clamp(150px, 17.6vw, 254px);
  right: calc(var(--foglia) * -0.37);
  transform: translateY(-50%) scaleX(-1);
  background-position: 30% 55%;
}

.chiusura__corpo { position: relative; }

.chiusura__titolo {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--teal-profondo);
  text-wrap: balance;
}

/* La parola ritagliata dentro la texture della giungla. Se il browser non
   supporta il ritaglio sul testo resta arancione: leggibile comunque. */
.chiusura__parola {
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--arancio);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .chiusura__parola {
    background-image: url("/assets/img/texture-giungla.jpg");
    background-size: 120% auto;
    background-position: center 38%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.chiusura__testo {
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  max-width: 46ch;
  margin-inline: auto;
}
.chiusura__azioni { margin-top: 2.25rem; }

@media (max-width: 720px) {
  /* Sotto i 720px i cerchi mangiano il testo: si riducono e si spostano. */
  /* Sotto i 720px le foglie mangiano il testo: rientrano quasi tutte fuori
     schermo e si fanno da parte. A 300px di larghezza la sinistra copriva
     mezzo titolo. */
  /* Due foglie al 30% sembravano macchie: ne resta una, piena e piccola,
     nell'angolo in basso a destra, fuori dalla traiettoria del bottone. */
  .chiusura { min-height: 0; }
  .chiusura__foglia--sx { display: none; }
  .chiusura__foglia--dx { --foglia: 100px; right: -40px; top: auto; bottom: 8px; transform: scaleX(-1); }
}

/* --------------------------------------------------------------------------
   Footer: il richiamo alla call, come nel Figma
   -------------------------------------------------------------------------- */

.site-footer__cta {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  /* Senza questo le due righe si dividono l’altezza della colonna
     e il pulsante diventa un ovalone. */
  align-content: start;
}
.site-footer__cta .btn { justify-self: start; }
/* Sul fondo scuro il pulsante primario si stacca in bianco. */
.site-footer .btn--primario { background: #fff; color: var(--teal-profondo); }
.site-footer .btn--primario:hover { background: var(--menta); }
/* Con la colonna "Il software" le colonne sono cinque: il richiamo alla call
   diventa una riga intera in fondo, testo e pulsante affiancati a destra,
   invece di restare da solo sotto il logo. */
@media (min-width: 1001px) {
  .site-footer__top { grid-template-columns: 1.4fr 1fr 0.9fr 1fr 1fr; }
  .site-footer__cta {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    text-align: right;
  }
  .site-footer__cta p { max-width: none !important; }
}

/* --------------------------------------------------------------------------
   Bordo strappato fra le fasce grigie e il bianco.
   Stesso disegno della chiusura, più basso. È un SVG inline nel CSS: nessun
   file da scaricare, e si stira a qualsiasi larghezza.
   -------------------------------------------------------------------------- */

:is(.sezione--fascia, .sezione--fascia-senape, .sezione--strappata, .sezione--strappo, .sezione--tinta) {
  position: relative;
  --strappo-h: 30px;
  /* Lo strappo copre 30px sopra e sotto: si compensa, o mangia il testo. */
  padding-block: calc(clamp(2.5rem, 6vw, 5.5rem) + 1.75rem);
}

/* Deve venire DOPO la regola qui sopra, che è altrettanto specifica e la
   sovrascriverebbe. Il contenuto arriva fino al taglio: senza questo lo
   strappo mangia solo il fondo e non si distingue dalla striscia normale. */
.sezione--strappata { padding-bottom: 0; }

:is(.sezione--fascia, .sezione--fascia-senape, .sezione--strappo, .sezione--tinta)::before,
:is(.sezione--fascia, .sezione--fascia-senape, .sezione--strappo, .sezione--tinta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--strappo-h);
  /* Si RIPETE a grandezza naturale: stirandolo al 100% i denti cambiavano
     misura con la larghezza della finestra e su desktop sparivano. */
  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%23ffffff%22%2F%3E%3C%2Fsvg%3E") repeat-x left bottom / auto var(--strappo-h);
  /* L'ombra segue la sagoma del tracciato, non il riquadro: e' il foglio
     che sta sopra e proietta sulla fascia. Il verso e' -2px perche' lo
     ::before e' ribaltato con scaleY(-1) e si gira da solo. */
  filter: drop-shadow(0 -1px 1.5px rgba(0, 66, 73, 0.13));
  /* L'ombra non deve passare il bordo dritto dello strappo: lì disegnava una
     riga sottile sulla sezione accanto (si vedeva sopra la chiusura). Il
     ritaglio vale anche per lo strappo in alto, che è lo stesso ribaltato. */
  clip-path: inset(-2rem 0 0 0);
  pointer-events: none;
}

/* Sopra: il bianco entra nella fascia. Sotto: la fascia finisce sfrangiata.
   Dal 5/10/2026 (Luca) lo strappo vale per TUTTE le sezioni colorate, anche
   .sezione--tinta: per tornare indietro basta togliere .sezione--tinta dai
   quattro :is() di questo blocco. */
/* Lo strappo sborda di 1px oltre la sezione e sta sopra la vicina: con la
   sezione che finisce a mezzo pixel, nel browser restava una riga sottile
   del colore di sotto fra lo strappo e la sezione accanto. */
:is(.sezione--fascia, .sezione--fascia-senape, .sezione--strappo, .sezione--tinta)::before { top: -1px; transform: scaleY(-1); z-index: 1; }
:is(.sezione--fascia, .sezione--fascia-senape, .sezione--strappo, .sezione--tinta)::after  { bottom: -1px; z-index: 1; }

/* Una sezione stretta che è anche fascia grigia tiene il suo passo ridotto,
   più lo spazio per lo strappo. */
.sezione--stretta:is(.sezione--fascia, .sezione--fascia-senape, .sezione--strappo, .sezione--tinta) {
  padding-block: calc(clamp(2rem, 3.5vw, 3.5rem) + 1.75rem);
}

/* Due sezioni colorate una dopo l'altra: i due strappi lasciavano in mezzo
   una striscia bianca dentellata. Allora lo strappo sotto la prima si colora
   con la tinta della seconda (stessa sagoma, usata come maschera) e la
   seconda non disegna il suo. --tinta-dopo si sceglie in base alla seconda. */
.sezione--tinta:has(+ .sezione--tinta)                   { --tinta-dopo: var(--fascia); }
.sezione--tinta:has(+ .sezione--tinta-senape)            { --tinta-dopo: var(--senape-chiara); }
.sezione--tinta:has(+ .sezione--tinta-menta)             { --tinta-dopo: var(--teal-chiaro); }
.sezione--tinta:has(+ .sezione--tinta[style*="--sezione-tinta"]),
.sezione--tinta:has(+ .anno-autori)                      { --tinta-dopo: var(--teal-profondo); }
.sezione--tinta:has(+ .sezione--tinta)::after {
  background: var(--tinta-dopo);
  -webkit-mask: 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%23ffffff%22%2F%3E%3C%2Fsvg%3E") repeat-x left bottom / auto var(--strappo-h);
          mask: 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%23ffffff%22%2F%3E%3C%2Fsvg%3E") repeat-x left bottom / auto var(--strappo-h);
}
.sezione--tinta + .sezione--tinta::before { display: none; }

/* ==========================================================================
   DESIGN SYSTEM: i pezzi trasversali (audit visivo §5, DS-1 DS-3 DS-4 DS-6)
   Dalla fase 2 (30/09/2026) è applicato alle pagine: le composizioni di
   pagina stanno più in basso, sotto "FASE 2". La vetrina dei pezzi è su /_stile.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Forme riutilizzabili
   Due sagome organiche disegnate per il sito, nello spirito di foglia.svg:
   stanno qui come variabili e non come file perché le usano sia le maschere
   delle foto sia gli sfondi. preserveAspectRatio="none": si adattano a
   qualsiasi riquadro, quindi il rapporto lo decide chi le usa.
   -------------------------------------------------------------------------- */

:root {
  --forma-blob:   url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M100,49.4C99.9,62.9 84.6,76.8 70.2,86C55.8,95.2 38.5,105 25,97.1C11.5,89.3 0,63.6 0,45.2C0,26.9 11.4,7.3 25,1.6C38.6,-4.1 56.4,6.5 70.9,15.7C85.3,24.9 100.1,35.8 100,49.4Z%22/%3E%3C/svg%3E");
  --forma-blob-2: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M97.3,55.5C91.5,72.3 73.5,95.9 58.3,99.5C43,103.1 28.9,87.9 18,74.2C7,60.6 -3.7,42.4 1.2,28.4C6.1,14.3 26.4,4.1 43.2,1C60.1,-2.1 78.2,1.8 88.6,12.2C99,22.7 103.2,38.8 97.3,55.5Z%22/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Tipografia display (DS-4)
   Fredoka resta riservato a "giungla" e a una parola per pagina (.accento
   dentro un titolo, o .chiusura__parola): mai su un titolo intero.
   -------------------------------------------------------------------------- */

.display {
  font-size: var(--t-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--teal-profondo);
  text-wrap: balance;
}
.lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--grigio-scuro);
}

/* Etichetta in capsula, per il badge sopra un titolo ("Nato da albergatori
   alla terza generazione"). */
.pillola {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: var(--r-pillola);
  background: var(--menta);
  color: var(--teal-profondo);
  font-size: var(--t-etichetta);
  font-weight: 600;
  line-height: 1.4;
}
.pillola--bianca { background: var(--carta); box-shadow: var(--ombra-1); }
a.pillola { text-decoration: none; transition: background-color 0.2s ease; }
a.pillola:hover { background: var(--menta-scura); }

/* --------------------------------------------------------------------------
   Card: tre livelli (DS-6)
     .card--piatta   bianca con filetto: il livello base, su fondo bianco o tinta
     .card--tinta    menta senza bordo: per raggruppare, su fondo bianco
     .card--elevata  bianca con ombra: per ciò che sta sopra (su foto, fasce)
   Più .card--scura, in teal profondo, da usare UNA volta per griglia per
   rompere il ritmo: è un accento, non un quarto livello.
   Solo <a class="card"> reagisce al mouse: una card che si solleva deve
   portare da qualche parte.
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border-radius: var(--r-card);
  color: var(--grigio);
  text-decoration: none;
}
.card--piatta  { background: var(--carta); border: 1px solid var(--filetto); }
.card--tinta   { background: var(--menta); }
.card--elevata { background: var(--carta); box-shadow: var(--ombra-2); }
.card--scura   { background: var(--teal-profondo); color: rgba(255, 255, 255, 0.86); }

.card__icona {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-piccolo);
  background: var(--teal-chiaro);
  color: var(--teal-profondo);
}
.card--tinta .card__icona { background: var(--carta); }
.card--scura .card__icona { background: rgba(255, 255, 255, 0.12); color: var(--menta-scura); }

.card__titolo {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--teal-profondo);
}
.card--scura .card__titolo { color: #fff; }
.card__testo { font-size: var(--t-piccolo); }

/* "Scopri →" in fondo alla card: il margine automatico lo tiene sul fondo
   anche quando le card di una riga hanno testi di lunghezza diversa. */
.card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: var(--t-piccolo);
  font-weight: 600;
  color: var(--teal-scuro);
}
.card__link::after { content: "→"; transition: transform 0.2s ease; }
.card--scura .card__link { color: var(--menta-scura); }

a.card { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s ease; }
a.card:hover { transform: translateY(-4px); box-shadow: var(--ombra-3); }
a.card.card--piatta:hover { border-color: var(--menta-scura); }
a.card:hover .card__link::after { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Media: il nuovo trattamento delle immagini (DS-1)

   .media è il contenitore posizionato. Dentro: un'immagine (o un mockup) e,
   se servono, fino a due .flottante. Le varianti si sommano:

     forma      .media--stondata  .media--stondata-sx  .media--arco
                .media--blob  .media--blob-2
     sfondo     .media--sfondo (+ -menta, -senape, -teal, -blob, -sx)
     cornice    .media--finestra  (finestra del browser, per le schermate)
     posizione  .media--sborda-dx  .media--sborda-sx  (fino al bordo finestra)
     rapporto   .media--quadrata  .media--4-3  .media--16-10  .media--ritratto

   Regola: mai più cornici iMac o iPhone con uno screenshot rimpicciolito
   dentro. La schermata va nella finestra, la foto nella maschera.
   -------------------------------------------------------------------------- */

.media {
  --media-raggio: var(--r-card);
  position: relative;
  isolation: isolate;
}
.media > img,
.media > picture > img,
.media__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--media-rapporto, auto);
  object-fit: cover;
  border-radius: var(--media-raggio);
}

.media--quadrata { --media-rapporto: 1; }
.media--4-3      { --media-rapporto: 4 / 3; }
.media--16-10    { --media-rapporto: 16 / 10; }
.media--ritratto { --media-rapporto: 4 / 5; }

/* Ritagli, archi e maschere organiche: TOLTI il 3/10/2026 (Gaia: "forme
   già viste"). Le classi restano nel markup ma non disegnano più niente di
   speciale: l'immagine è un rettangolo con il raggio standard. L'arco tiene
   solo il suo rapporto verticale. */
:is(.media--stondata, .media--stondata-sx, .media--arco, .media--blob, .media--blob-2) {
  --media-raggio: var(--r-media);
}
.media--arco { --media-rapporto: 4 / 5; }

/* Cornice colorata dietro l'immagine (.media--sfondo e varianti): TOLTA il
   3/10/2026 insieme alle forme organiche. Le classi restano nel markup e non
   disegnano nulla: immagini e mockup stanno direttamente sulla sezione. */

/* Finestra del browser: barra con tre pallini sopra la schermata. I pallini
   sono nei toni del marchio, non i semafori del Mac: la finestra è un segno,
   non la foto di un computer. La barra è il ::after, così resta libero il
   ::before per lo sfondo e le due classi si possono sommare. */
.media--finestra {
  --media-raggio: 0 0 var(--r-media) var(--r-media);
  --finestra-barra: 2.25rem;
  padding-top: var(--finestra-barra);
  border-radius: var(--r-media);
  box-shadow: var(--ombra-3);
}
.media--finestra::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--finestra-barra);
  border-radius: var(--r-media) var(--r-media) 0 0;
  border-bottom: 1px solid var(--filetto);
  background:
    radial-gradient(circle, var(--menta-scura) 0 4.5px, transparent 5px) 14px 50% / 12px 12px no-repeat,
    radial-gradient(circle, var(--menta-scura) 0 4.5px, transparent 5px) 32px 50% / 12px 12px no-repeat,
    radial-gradient(circle, var(--menta-scura) 0 4.5px, transparent 5px) 50px 50% / 12px 12px no-repeat,
    var(--carta);
}
.media--finestra > :is(img, picture, .media__img) { background: var(--carta); }

/* Esce dal contenitore fino al bordo della finestra, dal lato indicato.
   Il conto: metà della differenza fra la finestra e la larghezza di .wrap. */
.media--sborda-dx { margin-right: calc((100vw - min(100vw - var(--bordo) * 2, var(--pagina))) / -2); }
.media--sborda-sx { margin-left:  calc((100vw - min(100vw - var(--bordo) * 2, var(--pagina))) / -2); }
.media--sborda-dx:not(.media--finestra) { --media-raggio: var(--r-card) 0 0 var(--r-card); }
.media--sborda-sx:not(.media--finestra) { --media-raggio: 0 var(--r-card) var(--r-card) 0; }
.media--sborda-dx.media--finestra,
.media--sborda-dx.media--finestra::after { border-top-right-radius: 0; }
.media--sborda-dx.media--finestra { --media-raggio: 0 0 0 var(--r-media); }

/* --------------------------------------------------------------------------
   Card flottanti (DS-1)
   Un contenitore posizionato sopra .media: bianco, ombra alta, leggermente
   inclinato, galleggia piano. Il contenuto lo decide la pagina (una notifica,
   un dato, un avatar): qui ci sono solo gli slot di base.
     <div class="media media--blob">
       <img …>
       <div class="flottante flottante--alto-dx">…</div>
       <div class="flottante flottante--basso-sx">…</div>
     </div>
   Al massimo due per immagine, in angoli opposti. Sono decorative rispetto
   al testo della sezione: ciò che dicono deve stare anche nel testo, oppure
   vanno marcate aria-hidden="true".
   -------------------------------------------------------------------------- */

.flottante {
  --inclina: -2deg;
  --fuori: clamp(0.75rem, 3vw, 2rem);
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: min(17.5rem, 75%);
  padding: 0.75rem 1rem;
  background: var(--carta);
  color: var(--grigio-scuro);
  border-radius: var(--r-piccolo);
  box-shadow: var(--ombra-3);
  font-size: var(--t-piccolo);
  line-height: 1.35;
  rotate: var(--inclina);
  animation: galleggia 7s ease-in-out infinite alternate;
}
.flottante--alto-sx  { top: 8%;     left:  calc(var(--fuori) * -1); }
.flottante--alto-dx  { top: 8%;     right: calc(var(--fuori) * -1); --inclina: 2deg; }
.flottante--basso-sx { bottom: 10%; left:  calc(var(--fuori) * -1); --inclina: 1.5deg; }
.flottante--basso-dx { bottom: 10%; right: calc(var(--fuori) * -1); --inclina: -1.5deg; }
/* La seconda si muove in controfase: due card che salgono insieme sembrano
   un'unica cosa incollata. */
.flottante ~ .flottante { animation-delay: -3.5s; }

.flottante__icona {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-pillola);
  background: var(--menta);
  color: var(--teal-profondo);
}
.flottante__titolo { display: block; font-weight: 600; color: var(--teal-profondo); }
.flottante__testo  { display: block; font-size: var(--t-etichetta); color: var(--grigio); }

@keyframes galleggia { to { translate: 0 -8px; } }

@media (max-width: 560px) {
  /* Su mobile non escono dall'immagine: il bordo dello schermo le taglierebbe. */
  .flottante { --fuori: -0.75rem; max-width: 80%; padding: 0.625rem 0.875rem; font-size: var(--t-etichetta); }
}

@media (prefers-reduced-motion: reduce) {
  .flottante { animation: none; }
}

/* --------------------------------------------------------------------------
   Sfondi di sezione (DS-3)
   L'alternativa al bordo strappato, che ripetuto 5-7 volte per pagina
   smetteva di essere un segno. Proposta: strappo al massimo 1-2 volte per
   pagina (sotto l'hero e prima della chiusura), altrove uno di questi.

     .sezione--tinta (+ -senape, -menta)   cambio di tinta, senza strappo
     .sezione--isola                       tinta con angoli da 52px e margini,
                                           come il footer
     .sfondo-aurora (+ --caldo)            macchie di colore sfumate
     .sfondo-punti                         griglia di puntini che sfuma ai bordi
     .sfondo-blob                          una sagoma morbida in un angolo
     .sezione--strappo                     lo strappo, esplicito, su qualsiasi
                                           sezione tinta

   Per ora .sezione--fascia continua a portarsi lo strappo in automatico: le
   pagine non cambiano finché in fase 2 non si sostituisce la classe.
   -------------------------------------------------------------------------- */

.sezione--tinta        { background-color: var(--sezione-tinta, var(--fascia)); }
.sezione--tinta-senape { --sezione-tinta: var(--senape-chiara); }
.sezione--tinta-menta  { --sezione-tinta: var(--teal-chiaro); }
/* Con lo strappo la tinta deve arrivare anche al bordo disegnato. */
.sezione--strappo      { --fascia-tinta: var(--sezione-tinta, var(--fascia)); background-color: var(--fascia-tinta); }

.sezione--isola {
  background-color: var(--sezione-tinta, var(--fascia));
  border-radius: clamp(28px, 4vw, 52px);
  margin-inline: clamp(0.5rem, 1.5vw, 1.5rem);
}

/* Aurora: solo gradienti, niente filtri blur (costano su mobile). Le
   macchie usano i token del marchio mescolati alla trasparenza. */
.sfondo-aurora {
  background-color: var(--sezione-tinta, var(--carta));
  background-image:
    radial-gradient(38% 52% at 10% 18%, color-mix(in srgb, var(--teal) 14%, transparent), transparent 70%),
    radial-gradient(34% 48% at 90% 26%, color-mix(in srgb, var(--menta-scura) 55%, transparent), transparent 72%),
    radial-gradient(46% 58% at 72% 96%, color-mix(in srgb, var(--senape-chiara) 95%, transparent), transparent 70%);
}
.sfondo-aurora--caldo {
  background-image:
    radial-gradient(40% 55% at 14% 22%, color-mix(in srgb, var(--arancio) 16%, transparent), transparent 70%),
    radial-gradient(36% 50% at 88% 20%, color-mix(in srgb, var(--senape-chiara) 100%, transparent), transparent 72%),
    radial-gradient(44% 56% at 60% 100%, color-mix(in srgb, var(--menta) 90%, transparent), transparent 70%);
}

/* Puntini: il primo strato è un velo del colore di fondo che copre i
   puntini ai bordi, così sfumano senza maschere (che taglierebbero anche il
   contenuto). */
.sfondo-punti {
  --punti-fondo: var(--sezione-tinta, var(--carta));
  background-color: var(--punti-fondo);
  background-image:
    radial-gradient(ellipse 70% 65% at 50% 50%, transparent 30%, var(--punti-fondo) 80%),
    radial-gradient(circle, var(--menta-scura) 1.2px, transparent 1.6px);
  background-size: 100% 100%, 22px 22px;
}

/* Blob (.sfondo-blob e varianti): la sagoma morbida in un angolo è TOLTA il
   3/10/2026. La classe resta nel markup e non disegna nulla. */

/* Griglia generica di card: tante colonne quante ne stanno, minimo 260px. */
.griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--griglia-min, 260px), 100%), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.griglia > li { display: grid; }

/* ==========================================================================
   FASE 2: le composizioni delle pagine
   Usano i pezzi del design system qui sopra e i mockup (mockup.css). Ogni
   blocco dice in quale pagina sta; i nomi sono di pagina solo quando il pezzo
   non ha senso altrove.
   ========================================================================== */

/* Apertura di sezione centrata: il titolo può stare su una riga, il
   paragrafo resta stretto e leggibile. */
.intro { max-width: 46rem; margin-inline: auto; text-align: center; }
.intro h2 { margin-top: 0.75rem; }
.intro p:not(.etichetta) { max-width: 58ch; margin: 0.875rem auto 0; }
@media (max-width: 600px) { .lead { font-size: 1.0625rem; } }

/* Le ancore (#crm, #pms, #catalogo…) non devono finire sotto l'header
   appiccicoso, né sotto la barra dei moduli di Funzionalità. */
[id] { scroll-margin-top: 6rem; }
.con-sottomenu [id] { scroll-margin-top: 9.5rem; }

/* --------------------------------------------------------------------------
   Palco: il riquadro in cui sta un mockup, con lo spazio per le card
   flottanti che sporgono (2–3,5em del mockup). Si somma a .media e alle sue
   varianti di sfondo.
   -------------------------------------------------------------------------- */

.palco { position: relative; padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 4vw, 2rem); }
.palco--stretto { max-width: 30rem; margin-inline: auto; }

/* La spiaggia senza cornice (Hotel e villaggi): la sabbia e il mare sono già
   nel mockup, dietro basta un alone caldo. */
.palco--spiaggia { padding-block: clamp(2rem, 4vw, 3rem); }

/* Due mockup insieme: uno grande e, appoggiato sopra in basso a sinistra, il
   telefono (a sinistra copre le tessere dei prodotti, non il conto con il
   totale e i pagamenti della cassa). Sotto i 700px il telefono sparisce:
   da solo il primo basta. */
.coppia { padding-left: clamp(1rem, 11%, 7.5rem); }
.coppia__telefono {
  position: absolute;
  z-index: 4;
  left: 0;
  bottom: -1.5rem;
  width: clamp(9.5rem, 30%, 14rem);
  filter: drop-shadow(0 24px 32px rgba(0, 66, 73, 0.2));
}
.coppia__telefono .mk--selforder .mk__scena { padding: 0; }
@media (max-width: 700px) {
  .coppia { padding-left: clamp(0.5rem, 2.5vw, 2rem); }
  .coppia__telefono { display: none; }
}

/* --------------------------------------------------------------------------
   Home — hero con il product shot
   Il testo e il titolo che si rivela restano come nel Figma; sotto, la
   composizione di prodotto (tableau + telefono) su una fascia di colore che
   finisce a metà dell'immagine: il resto "sborda" sulla sezione dopo.
   -------------------------------------------------------------------------- */

.hero--home { --sborda: clamp(3rem, 9vw, 8.5rem); padding-bottom: 0; }
/* Senza l'immagine che scorreva sotto il titolo (6/10/2026): niente fascia da
   lasciare libera sopra e sotto, solo un po' d'aria sotto la barra. */
.hero--aperto.hero--home { --rivela-sfondo: 0rem; padding-top: clamp(3rem, 7vw, 5.5rem); }
.hero--home .hero__payoff { margin-top: 1.5rem; }
.hero--home .hero__testo { margin-top: 1rem; }
.hero--home .hero__testo { max-width: 58ch; font-size: var(--t-lead); }
.hero__rassicura {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin-top: 1.25rem;
  font-size: var(--t-piccolo);
  color: var(--grigio);
}
.hero__rassicura li { display: inline-flex; align-items: center; gap: 0.5rem; text-align: left; }
@media (max-width: 600px) {
  .hero__rassicura { flex-direction: column; align-items: center; }
}
.hero__rassicura svg { color: var(--teal); flex: none; }

.prodotto {
  position: relative;
  z-index: 2;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: calc(var(--sborda) * -1);
  text-align: left;
}
/* La fascia di colore dietro, a tutta finestra: comincia sotto il bordo
   alto della schermata e finisce dove la schermata esce dalla sezione. */
.prodotto::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 16%;
  bottom: var(--sborda);
  left: calc(50% - 50vw);
  width: 100vw;
  background:
    radial-gradient(40% 70% at 12% 30%, color-mix(in srgb, var(--teal) 16%, transparent), transparent 70%),
    radial-gradient(34% 60% at 92% 20%, color-mix(in srgb, var(--menta-scura) 70%, transparent), transparent 72%),
    radial-gradient(50% 80% at 70% 110%, var(--senape-chiara), transparent 70%),
    var(--teal-chiaro);
}
.prodotto__scena {
  position: relative;
  /* Lo spazio a destra è quello del telefono che si appoggia sopra. */
  padding-right: clamp(0rem, 12vw, 11rem);
  padding-left: clamp(0rem, 2vw, 2rem);
}
.prodotto__telefono {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: -2.5rem;
  width: clamp(12rem, 21vw, 17.5rem);
  filter: drop-shadow(0 30px 40px rgba(0, 66, 73, 0.18));
}
/* Il telefono del mockup ha un margine sinistro per la sua card: qui non
   serve, la card è spenta. */
.prodotto__telefono .mk--selforder .mk__scena { padding: 0; }

@media (max-width: 860px) {
  /* Un filo di margine: la card in alto a destra del tableau sporge. */
  .prodotto__scena { padding-inline: 0.75rem; }
  .prodotto__telefono { display: none; }
}

/* La sezione dopo l'hero riparte più in basso, per quello che sborda. */
.dopo-prodotto { padding-top: calc(var(--sborda-dopo, clamp(3rem, 9vw, 8.5rem)) + clamp(2.5rem, 5vw, 4rem)); }

.clienti__titolo { text-align: center; margin-bottom: 1.25rem; }
.clienti img { opacity: 0.85; margin-inline: auto; }

/* --------------------------------------------------------------------------
   Home — bento dei sei moduli
   4 colonne × 3 righe: PMS grande (2×2), Channel Manager (2×1), gli altri
   (1×1), Sales Hub in scuro a chiudere. Ogni cella è un link al modulo.
   -------------------------------------------------------------------------- */

.bento6 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "pms pms cm  cm"
    "pms pms crm be"
    "ba  pos sh  sh";
  gap: clamp(0.875rem, 1.5vw, 1.25rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.bento6__cella { overflow: hidden; min-height: 18.5rem; gap: 0.5rem; }
.bento6__cella--pms { grid-area: pms; }
.bento6__cella--cm  { grid-area: cm; }
.bento6__cella--crm { grid-area: crm; }
.bento6__cella--be  { grid-area: be; }
.bento6__cella--ba  { grid-area: ba; }
.bento6__cella--pos { grid-area: pos; }
.bento6__cella--sh  { grid-area: sh; }

.bento6__testa { display: flex; align-items: center; gap: 0.75rem; }
.bento6__testa .card__icona { width: 2.5rem; height: 2.5rem; }
.bento6__cella .card__testo { max-width: 46ch; }
.bento6__cella .card__link { margin-top: 0.25rem; padding-top: 0; }

/* La vignetta sta in fondo alla cella. In quella grande la schermata esce
   dal bordo destro e da quello in basso: si vede che continua. */
.bento6__vignetta { margin-top: auto; padding-top: 1rem; }
/* La schermata del PMS NON deve dettare l'altezza delle righe: prende lo
   spazio che resta (flex-basis 0) e il resto lo taglia la cella. */
.bento6__cella--pms .bento6__vignetta {
  flex: 1 1 0;
  min-height: 17rem;
  margin-right: calc(clamp(1.5rem, 2.4vw, 2rem) * -1 - 4rem);
  margin-bottom: calc(clamp(1.5rem, 2.4vw, 2rem) * -1);
  padding-top: 1.25rem;
}
.bento6__cella--sh { justify-content: space-between; }
.bento6__inclusi { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.bento6__inclusi li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem 0.375rem 0.375rem;
  border-radius: var(--r-pillola);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: var(--t-etichetta);
  font-weight: 600;
}
.bento6__inclusi .ch-simbolo { --ch-simbolo: 1.75rem; }
.bento6__inclusi--testo li { padding-left: 0.875rem; }

@media (max-width: 1000px) {
  .bento6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "pms pms" "cm cm" "crm be" "ba pos" "sh sh";
  }
}
/* Su telefono le celle diventano una fila da scorrere col dito (vedi
   .scorri-mobile): sei blocchi in colonna facevano oltre 3000px. */
@media (max-width: 600px) {
  .bento6 { grid-template-areas: none; }
  .bento6__cella { grid-area: auto; min-height: 27rem; }
}

/* --------------------------------------------------------------------------
   Fila da scorrere su telefono: sotto i 600px una griglia di card diventa
   una riga orizzontale con lo scatto, e la card dopo si intravede.
   Senza JS funziona uguale: lo scorrimento è del browser.
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .scorri-mobile {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: 0.875rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--bordo);
    margin-inline: calc(var(--bordo) * -1);
    padding: 0.5rem var(--bordo) 1.5rem;
    scrollbar-width: none;
  }
  .scorri-mobile::-webkit-scrollbar { display: none; }
  .scorri-mobile > * { scroll-snap-align: start; }
}

/* --------------------------------------------------------------------------
   Home — assistenza: la foto nella sagoma, due card sopra
   -------------------------------------------------------------------------- */

.vetrina__media.media { max-width: 34rem; justify-self: center; width: 100%; }

/* --------------------------------------------------------------------------
   Home — integrazioni: numeri e marquee
   -------------------------------------------------------------------------- */

.cifre {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.cifra { text-align: center; }
.cifra__valore {
  display: block;
  font-size: clamp(2rem, 2.4vw + 1rem, 3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--teal-profondo);
  font-variant-numeric: tabular-nums;
}
.cifra__etichetta { display: block; margin-top: 0.25rem; font-size: var(--t-piccolo); color: var(--grigio); }
@media (max-width: 600px) {
  .cifre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
  .cifra__valore { font-size: 1.75rem; }
  .cifra__etichetta { font-size: var(--t-etichetta); line-height: 1.35; }
}
.fascia-marquee { margin-top: clamp(2rem, 4vw, 3rem); }

/* --------------------------------------------------------------------------
   Card con una vignetta in testa (segmenti in home, profili)
   -------------------------------------------------------------------------- */

.card-vetrina { padding: 0; overflow: hidden; gap: 0; }
.card-vetrina__scena {
  position: relative;
  display: grid;
  align-items: center;
  height: 17rem;
  overflow: hidden;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background:
    radial-gradient(60% 80% at 85% 10%, color-mix(in srgb, var(--menta-scura) 60%, transparent), transparent 70%),
    var(--teal-chiaro);
}
.card-vetrina__scena--sabbia {
  background:
    radial-gradient(60% 80% at 15% 100%, #f3e3c8, transparent 70%),
    linear-gradient(180deg, #d9f0f2, var(--senape-chiara));
}
.card-vetrina__scena--senape { background: linear-gradient(160deg, var(--senape-chiara), #fbe3cc); }
/* Variante con la foto (5/10/2026): la foto riempie la scena, senza padding. */
.card-vetrina__scena--foto { padding: 0; display: block; background: var(--fascia); }
.card-vetrina__foto { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.card-vetrina:hover .card-vetrina__foto { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .card-vetrina__foto { transition: none; } .card-vetrina:hover .card-vetrina__foto { transform: none; } }
.card-vetrina__corpo { display: flex; flex-direction: column; gap: 0.625rem; padding: clamp(1.5rem, 2.4vw, 2rem); flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   Eventi senza foto: la data in grande su un fondo pieno (niente cerchi:
   le forme decorative le ha tolte Gaia dal design system)
   Le foto delle fiere arriveranno con la liberatoria: nei dati il campo
   'foto' è già pronto, e la card si usa finché resta vuoto.
   -------------------------------------------------------------------------- */

.ev-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.ev-card { padding: 0; overflow: hidden; gap: 0; }
.ev-card__data {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  min-height: 9.5rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(150deg, var(--menta), var(--teal-chiaro));
  color: var(--teal-profondo);
}
.ev-card__giorni { display: block; font-size: 2.75rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ev-card__giorni--parola { font-size: 2.125rem; letter-spacing: -0.02em; }
.ev-card__foto { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ev-card__corpo:has(.ev-card__cta) { display: flex; flex-direction: column; flex: 1; }
.ev-card__corpo:has(.ev-card__cta) .ev-card__luogo { margin-bottom: 1.25rem; }
.ev-card__cta { margin-top: auto; align-self: flex-start; }
.ev-card__mese { display: block; margin-top: 0.35rem; font-size: var(--t-piccolo); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; }
.ev-card__stato {
  flex: none;
  padding: 0.25rem 0.75rem;
  border-radius: var(--r-pillola);
  background: var(--carta);
  font-size: var(--t-etichetta);
  font-weight: 600;
  color: var(--teal-scuro);
}
.ev-card__corpo { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.25rem 1.5rem 1.5rem; }
.ev-card__luogo { font-size: var(--t-piccolo); }
/* Il prossimo evento: la stessa card, nel colore dell'accento. */
.ev-card--prossimo .ev-card__data { background: linear-gradient(150deg, var(--teal-profondo), var(--teal-scuro)); color: #fff; }
.ev-card--prossimo .ev-card__stato { background: var(--arancio); color: var(--teal-profondo); }

/* La data grande della card scura "prossimo evento" in /eventi, al posto
   della foto. */
.evento-prossimo__badge {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: end;
  min-height: clamp(14rem, 26vw, 20rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-media);
  background: linear-gradient(150deg, var(--teal-scuro), var(--teal) 70%, var(--menta-scura));
  color: #fff;
}
.evento-prossimo__mese { font-size: clamp(3.5rem, 7vw, 6rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.04em; text-transform: lowercase; }
.evento-prossimo__anno { font-size: var(--t-h3); font-weight: 600; opacity: 0.85; }
@media (max-width: 600px) {
  .evento-prossimo__badge { min-height: 9rem; padding: 1.25rem 1.5rem; }
  .evento-prossimo__mese { font-size: 3rem; }
}

/* --------------------------------------------------------------------------
   Hero a due colonne con un mockup (Funzionalità, Hotel e villaggi,
   Chi siamo, Contatti)
   -------------------------------------------------------------------------- */

.hero--prodotto { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem); }
.hero--prodotto .hero__griglia { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.hero--prodotto .hero__titolo { margin-top: 1rem; }
/* Nella colonna stretta il display pieno andava su tre righe. */
.hero--prodotto .display { font-size: clamp(2.125rem, 2.4vw + 1.25rem, 3.75rem); }
.hero--prodotto .hero__testo { font-size: var(--t-lead); }
/* Lo sfondo della foto non deve uscire dalla finestra: a destra resta nel
   margine della pagina. */
@media (max-width: 1000px) {
  .hero--prodotto .hero__griglia { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Funzionalità — la barra dei moduli, appiccicata sotto l'header
   -------------------------------------------------------------------------- */

.sottomenu {
  position: sticky;
  top: var(--altezza-header, 4.75rem);
  z-index: 30;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border-block: 1px solid var(--filetto);
}
.sottomenu__lista {
  display: flex;
  gap: 0.375rem;
  padding-block: 0.625rem;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.sottomenu__lista::-webkit-scrollbar { display: none; }
.sottomenu a {
  flex: none;
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: var(--r-pillola);
  font-size: var(--t-piccolo);
  font-weight: 500;
  color: var(--grigio-scuro);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.sottomenu a:hover { background: var(--teal-chiaro); color: var(--teal-profondo); }
.sottomenu a[aria-current="true"] { background: var(--teal-profondo); color: #fff; }

/* --------------------------------------------------------------------------
   Funzionalità — una fascia per modulo: testo e mockup, lati alterni
   -------------------------------------------------------------------------- */

.modulo-riga {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.modulo-riga--invertita { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
.modulo-riga--invertita .modulo-riga__testo { order: 2; }
.modulo-riga__testo h2 { margin-top: 0.75rem; }
.modulo-riga__testo .spunte { margin-top: 1.25rem; }
.modulo-riga__etichetta { display: inline-flex; align-items: center; gap: 0.625rem; }
.modulo-riga__etichetta .card__icona { width: 2.25rem; height: 2.25rem; }
@media (max-width: 1000px) {
  .modulo-riga, .modulo-riga--invertita { grid-template-columns: minmax(0, 1fr); }
  .modulo-riga--invertita .modulo-riga__testo { order: 0; }
}

/* Sales Hub: il pacchetto. Una card scura larga, con i tre moduli dentro. */
.pacchetto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(2rem, 4.5vw, 3.75rem);
}
.pacchetto h2 { color: #fff; margin-top: 0.75rem; }
.pacchetto .etichetta { color: var(--menta-scura); }
.pacchetto__testo p { margin-top: 0.875rem; }
.pacchetto__moduli { display: grid; gap: 0.75rem; }
.pacchetto__modulo {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  border-radius: var(--r-piccolo);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
a.pacchetto__modulo:hover { background: rgba(255, 255, 255, 0.14); }
.pacchetto__modulo .card__icona { width: 2.5rem; height: 2.5rem; }
.pacchetto__nome { display: block; font-weight: 600; color: #fff; }
.pacchetto__descr { display: block; font-size: var(--t-piccolo); color: rgba(255, 255, 255, 0.78); }
.pacchetto__canali { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.pacchetto__canali > span {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.25rem 0.75rem 0.25rem 0.3rem;
  border-radius: var(--r-pillola);
  background: var(--carta);
  font-size: var(--t-etichetta);
  font-weight: 600;
  color: var(--teal-profondo);
}
.pacchetto__canali .ch-simbolo { --ch-simbolo: 1.5rem; }
@media (max-width: 900px) { .pacchetto { grid-template-columns: minmax(0, 1fr); } }

/* Profili senza foto: schede con icona, il contenuto a destra. */
.profili__voce--icona { min-height: 0; background: var(--carta); color: var(--grigio-scuro); box-shadow: inset 0 0 0 1px var(--filetto); }
.profili__voce--icona::after { content: none; }
.profili__voce--icona .profili__voce-corpo { display: flex; align-items: center; gap: 0.875rem; padding: 1rem 1.125rem; }
.profili__voce--icona .profili__nome { color: var(--teal-profondo); }
.profili__voce--icona .profili__riga { color: var(--grigio); }
.profili__voce--icona .card__icona { width: 2.75rem; height: 2.75rem; }
.profili__voce--icona:not([aria-selected="true"]) { opacity: 1; }
.profili__voce--icona[aria-selected="true"] { background: var(--teal-profondo); box-shadow: none; }
.profili__voce--icona[aria-selected="true"] .profili__nome { color: #fff; }
.profili__voce--icona[aria-selected="true"] .profili__riga { color: rgba(255, 255, 255, 0.8); }
.profili__voce--icona[aria-selected="true"] .card__icona { background: rgba(255, 255, 255, 0.14); color: var(--menta-scura); }
.profili__pannello { box-shadow: var(--ombra-2); }

/* --------------------------------------------------------------------------
   Chi siamo — la cartolina dal Salento e la storia a tappe
   -------------------------------------------------------------------------- */

/* Un'illustrazione fatta di forme: l'arco delle case salentine, il sole,
   il mare. Niente foto finché non arrivano quelle vere del team. */
.cartolina {
  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 5;
  max-width: 26rem;
  width: 100%;
  margin-inline: auto;
  /* Era un arco: tolto il 3/10/2026 con le altre forme stondate. */
  border-radius: var(--r-media);
  overflow: hidden;
  background: linear-gradient(180deg, #fdf2e6 0%, var(--senape-chiara) 46%, var(--menta) 46.2%, var(--menta-scura) 100%);
}
.cartolina__sole {
  position: absolute;
  left: 50%;
  top: 22%;
  width: 34%;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #f7b25e, var(--arancio));
  box-shadow: 0 0 0 1.25rem color-mix(in srgb, var(--arancio) 16%, transparent);
}
.cartolina__mare { position: absolute; inset: auto 0 0; height: 54%; color: var(--teal); opacity: 0.55; }
.cartolina__mare svg { width: 100%; height: 100%; }
.cartolina__marchio {
  position: absolute;
  left: 50%;
  bottom: 12%;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 1.5rem;
  background: var(--carta);
  box-shadow: var(--ombra-3);
}
.cartolina__marchio img { width: 3.5rem; height: 3.5rem; object-fit: contain; }
.cartolina-palco { position: relative; padding: 1rem clamp(1rem, 4vw, 3rem); }
/* Chi siamo: la foto del team al posto della cartolina (5/10/2026). */
.team-foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1400 / 780;
  object-fit: cover;
  border-radius: var(--r-media);
  box-shadow: var(--ombra-2);
}
.team-palco { padding-inline: clamp(0.5rem, 2vw, 1.5rem); }
.team-foto--soci { aspect-ratio: 644 / 512; max-width: 34rem; margin-inline: auto; }

.cartolina-palco .flottante--alto-sx { left: 0; }
.cartolina-palco .flottante--basso-dx { right: 0; }
@media (max-width: 560px) {
  /* Su telefono la card in basso scende sotto la cartolina: sopra copriva il marchio. */
  .cartolina-palco { padding-bottom: 2.5rem; }
  .cartolina-palco .flottante--basso-dx { bottom: -0.25rem; }
}

/* Il ritratto che manca: le iniziali su un tondo, finché non arriva la foto
   vera con la liberatoria. */
.team__iniziali {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-card);
  background: linear-gradient(160deg, var(--menta), var(--teal-chiaro));
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--teal-profondo);
}

.tappe { position: relative; display: grid; gap: 1.25rem; margin-top: 2rem; }
.tappe::before {
  content: "";
  position: absolute;
  left: 1.3125rem;
  top: 1.5rem;
  bottom: 1.5rem;
  border-left: 2px dashed var(--menta-scura);
}
.tappa { position: relative; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.tappa__punto {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--carta);
  color: var(--teal-profondo);
  box-shadow: 0 0 0 4px var(--carta), inset 0 0 0 2px var(--menta-scura);
}
.tappa--prima .tappa__punto { background: var(--teal-profondo); color: #fff; box-shadow: 0 0 0 4px var(--carta); }
.tappa__titolo { font-weight: 600; color: var(--teal-profondo); padding-top: 0.5rem; }
.tappa__testo { font-size: var(--t-piccolo); margin-top: 0.125rem; }
.tappa__chip { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; }
.tappa__chip span {
  padding: 0.25rem 0.75rem;
  border-radius: var(--r-pillola);
  background: var(--carta);
  box-shadow: var(--ombra-1);
  font-size: var(--t-etichetta);
  font-weight: 600;
  color: var(--teal-profondo);
}

/* --------------------------------------------------------------------------
   Contatti — prima il modulo, poi i recapiti (anche su mobile)
   -------------------------------------------------------------------------- */

.contatti--modulo-primo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.contatti__modulo.card { gap: 0; }
.contatti__strade { display: grid; gap: 0.75rem; margin-top: 1.5rem; }
.strada {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--r-piccolo);
  background: var(--teal-chiaro);
  color: var(--teal-profondo);
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.strada:hover { background: var(--menta); transform: translateY(-1px); }
.strada .card__icona { background: var(--carta); width: 2.75rem; height: 2.75rem; }
.strada__testo { display: grid; gap: 0.1rem; min-width: 0; }
.strada__nome { font-weight: 600; }
.strada__valore { font-size: var(--t-piccolo); color: var(--grigio-scuro); overflow-wrap: anywhere; }
.strada::after { content: "→"; margin-left: auto; font-weight: 600; transition: transform 0.2s ease; }
.strada:hover::after { transform: translateX(3px); }
@media (max-width: 900px) { .contatti--modulo-primo { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .strada:hover, a.pacchetto__modulo:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Pagina 404
   -------------------------------------------------------------------------- */

.errore { text-align: center; padding-block: clamp(4rem, 9vw, 7.5rem); }
.errore__corpo { display: grid; justify-items: center; }
.errore__titolo { margin-top: 1.25rem; }
.errore__testo { margin-top: 1.25rem; max-width: 48ch; }
.errore__azioni { margin-top: 2rem; }
.errore__pagine { margin-top: 2rem; }

/* ==========================================================================
   ARCHITETTURA: Vendere / Gestire / Servire (3/10/2026)
   Sales Hub, PMS e OMS (più H-Flow, il lab) hanno un colore ciascuno, preso
   SOLO fra i token esistenti: nessun colore nuovo da portare in Figma.
     .area-sh   Sales Hub  teal scuro      (testo bianco, 5,9:1)
     .area-pms  PMS        teal profondo   (testo bianco, 10:1)
     .area-oms  OMS        arancio         (testo teal profondo, come i
                                            bottoni arancio)
     .area-hf   H-Flow     verde scuro     (testo bianco, 6,9:1)
   La classe imposta tre variabili; i pezzi qui sotto le usano. Il colore
   non è mai l'unico segnale: il nome dell'area è sempre scritto.
   ========================================================================== */

.area-sh  { --area: var(--area-sh-colore);  --area-su: #fff;                --area-tinta: #e3f4f5; }
.area-pms { --area: var(--area-pms-colore); --area-su: #fff;                --area-tinta: #e2e6f1; }
.area-oms { --area: var(--area-oms-colore); --area-su: var(--teal-profondo); --area-tinta: #fbf0da; }
.area-hf  { --area: var(--area-hf-colore);  --area-su: #fff;                --area-tinta: #e1f2f2; }

/* Il cartellino dell'area: pallino colorato e nome. */
.area-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  padding: 0.2rem 0.7rem 0.2rem 0.55rem;
  border-radius: var(--r-pillola);
  background: var(--area-tinta, var(--teal-chiaro));
  color: var(--teal-profondo);
  font-size: var(--t-etichetta);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
.area-tag::before {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--area, var(--teal));
}
.card--scura .area-tag { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* --- Menu: la colonna delle tre aree ----------------------------------- */
/* Tre colonne affiancate uscivano dallo schermo a 1200px: le aree stanno
   in una colonna alta due righe. Dall'8/10/2026 (Luca) a destra: prima
   Panoramica, poi Prodotto. */
.nav__pannello--aree .nav__colonna--aree { grid-row: 1 / span 2; grid-column: 2; }
.nav__colonna--aree {
  padding-block: 0.25rem 0.5rem;
  border-radius: var(--r-piccolo);
  background: var(--teal-chiaro);
}
.nav__colonna--aree .nav__link:hover { background: var(--carta); }
.nav__icona:is(.area-sh, .area-pms, .area-oms) { background: var(--area); color: var(--area-su); }
.nav__link:hover .nav__icona:is(.area-sh, .area-pms, .area-oms) { background: var(--area); }
@media (max-width: 1180px) {
  .nav__pannello--aree .nav__colonna--aree { grid-row: auto; grid-column: auto; margin-bottom: 0.25rem; }
}

/* --- Home: il payoff sotto il titolo che si rivela ---------------------- */
/* Prende lo spazio che il paragrafo lasciava alla fascia della foto. */
.hero--aperto .hero__payoff { margin-top: calc(1.25rem + var(--rivela-sfondo)); }
.hero--aperto .hero__payoff + .hero__testo { margin-top: 0.75rem; }

/* --- Home: il bento delle tre aree --------------------------------------
   Una cella per area: a sinistra Sales Hub (scura, con l'elenco delle sue
   funzioni) e sotto l'OMS, a destra il PMS grande. Ogni cella porta alla
   pagina della sua area. */
.bento-aree {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "sh  sh  pms pms"
    "oms oms pms pms";
  gap: clamp(0.875rem, 1.5vw, 1.25rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.bento-aree__cella { overflow: hidden; gap: 0.5rem; min-height: 18.5rem; }
.bento-aree__cella--sh  { grid-area: sh; min-height: 0; justify-content: space-between; }
.bento-aree__cella--pms { grid-area: pms; }
.bento-aree__cella--oms { grid-area: oms; }
.bento-aree__cella .card__testo { max-width: 46ch; }
.bento-aree__cella .card__link { margin-top: 0.25rem; padding-top: 0; }
.bento-aree .card__icona { width: 2.5rem; height: 2.5rem; background: var(--area-tinta); }
/* Il nome dell'area è più grande di quello delle funzioni. */
.bento-aree__area { font-size: var(--t-h3); }
.bento-aree__cella--sh .area-tag { margin-bottom: 0.75rem; }
.bento-aree__cella--sh .card__testo { margin-top: 0.5rem; color: rgba(255, 255, 255, 0.86); }
.bento-aree__cella--sh .area-tag::before { background: var(--menta-scura); }
.bento-aree__inclusi { margin-top: 1.25rem; }

/* Il PMS: la schermata prende lo spazio che resta ed esce dai bordi. */
.bento-aree__cella--pms .bento6__vignetta {
  flex: 1 1 0;
  min-height: 15rem;
  margin-right: calc(clamp(1.5rem, 2.4vw, 2rem) * -1 - 4rem);
  margin-bottom: calc(clamp(1.5rem, 2.4vw, 2rem) * -1);
  padding-top: 1.25rem;
}
/* L'OMS: testo a sinistra, vignetta a destra. */
.bento-aree__cella--oms {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 1.25rem;
}
.bento-aree__oms-testo { display: flex; flex-direction: column; gap: 0.5rem; }
.bento-aree__cella--oms .bento6__vignetta { margin: 0; padding: 0; }

@media (max-width: 1000px) {
  .bento-aree {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "sh sh" "pms pms" "oms oms";
  }
}
@media (max-width: 600px) {
  /* Le colonne le decide .scorri-mobile: qui va annullato il 2 colonne di sopra. */
  .bento-aree { grid-template-areas: none; grid-template-columns: none; }
  .bento-aree__cella { grid-area: auto; min-height: 27rem; }
  .bento-aree__cella--oms { display: flex; }
  .bento-aree__cella--oms .bento6__vignetta { margin-top: auto; }
}

/* --- Il percorso in 12 tappe (inc/percorso.php) -------------------------
   Desktop: quattro tappe per riga, unite da un tratteggio. Sotto i 1000px
   una colonna, con il tratteggio in verticale. */
.percorso-sezione { --percorso-fondo: var(--carta); }
.percorso-sezione.sezione--tinta { --percorso-fondo: var(--sezione-tinta, var(--fascia)); }
/* Versione B di Gaia (7/10/2026): titolo a sinistra, legenda in fondo. */
.percorso__intro { display: grid; gap: 0.75rem; }
.percorso__intro h2 { margin: 0; }
.percorso__piede {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--filetto);
}
.percorso__piede > p { margin: 0; font-size: 1.125rem; color: var(--grigio-scuro); }
.percorso__piede strong { font-weight: 700; color: var(--teal-profondo); }
/* L'a capo dei titoli vale solo nella serpentina (sopra i 1100px). */
.percorso__a-capo { display: none; }
@media (min-width: 1101px) { .percorso__a-capo { display: inline; } }
.percorso__legenda { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.percorso__legenda li { display: grid; gap: 0.125rem; }
.percorso__legenda a { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--t-piccolo); font-weight: 500; color: var(--teal-profondo); text-decoration: none; }
.percorso__legenda a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.percorso__pallino { width: 1rem; height: 1rem; border-radius: 50%; background: var(--area); }
.percorso__verbo { padding-left: 1.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; color: var(--area-testo, var(--area)); }
/* Il colore dell'area come testo: l'arancio dell'OMS sul chiaro non si legge. */
/* Numeri e verbi nel colore dell'area anche per l'OMS, come nel pitch deck (Gaia). */

.percorso {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.percorso__tappa { position: relative; display: flex; flex-direction: column; gap: 0.875rem; }
/* Il tratteggio verso la tappa dopo, nella stessa riga. */
.percorso__tappa::before {
  content: "";
  position: absolute;
  top: 1.375rem;
  left: 2.75rem;
  right: -1.5rem;
  border-top: 2px dashed var(--menta-scura);
  transform-origin: left center;
}
.percorso__tappa:nth-child(4n)::before,
.percorso__tappa:last-child::before { content: none; }
.percorso__numero {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  /* Solo il contorno, il numero in Fraunces nel colore dell'area (Gaia, 7/10/2026). */
  border: 3px solid var(--area);
  background: var(--carta);
  color: var(--area-testo, var(--area));
  font-family: var(--font-titoli);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 5px var(--percorso-fondo);
}
.percorso__corpo { display: flex; flex-direction: column; gap: 0.25rem; padding-right: 0.5rem; }
.percorso__titolo { font-weight: 600; line-height: 1.3; color: var(--teal-profondo); }
.percorso__testo { font-size: var(--t-piccolo); line-height: 1.5; }
.percorso__corpo .area-tag { margin-top: 0.5rem; }

@media (max-width: 1000px) {
  .percorso { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; max-width: 36rem; margin-inline: auto; }
  .percorso__tappa { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1rem; }
  .percorso__tappa::before,
  .percorso__tappa:nth-child(4n)::before {
    content: "";
    top: 2.75rem;
    bottom: -1.75rem;
    left: 1.3125rem;
    right: auto;
    border-top: 0;
    border-left: 2px dashed var(--menta-scura);
    transform-origin: center top;
  }
  .percorso__tappa:last-child::before { content: none; }
  .percorso__corpo { padding-top: 0.5rem; }
}

/* --- La serpentina (solo desktop largo, 6/10/2026) -----------------------
   Stessa <ol>: 12 colonne, tappe dispari in alto e pari in basso, l'onda SVG
   dietro. Titoli sopra le tappe alte e sotto quelle basse; la descrizione
   compare al passaggio del mouse o col fuoco, l'area è letta dagli screen
   reader. Le misure verticali combaciano con il viewBox dell'SVG (320). */
.percorso__onda { display: none; }
@media (min-width: 1101px) {
  .percorso-onda {
    position: relative;
    height: 22.5rem;                     /* = 360 nel viewBox */
    margin-top: 2.5rem;
  }
  .percorso-onda .percorso {
    position: absolute;
    inset: 0;
    z-index: 1;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0;
    margin: 0;
  }
  .percorso-onda .percorso__tappa { display: block; height: 100%; outline: none; }
  .percorso-onda .percorso__tappa::before { content: none; }
  .percorso-onda .percorso__numero {
    position: absolute;
    left: 50%;
    top: 6.875rem;                       /* 110 */
    translate: -50% -50%;
    width: 2.75rem;
    height: 2.75rem;
    box-shadow: none;
    transition: transform 0.2s ease;
  }
  .percorso-onda .percorso__tappa:nth-child(even) .percorso__numero { top: 15.625rem; }   /* 250 */
  /* Il trattino fra il titolo e il cerchio. */
  .percorso-onda .percorso__numero::before {
    content: "";
    position: absolute;
    left: 50%;
    width: 1px;
    height: 0.625rem;
    background: var(--area);
    opacity: 0.6;
  }
  .percorso-onda .percorso__tappa:nth-child(odd) .percorso__numero::before { bottom: calc(100% + 2px); }
  .percorso-onda .percorso__tappa:nth-child(even) .percorso__numero::before { top: calc(100% + 2px); }
  .percorso-onda .percorso__tappa:is(:hover, :focus-visible) .percorso__numero { transform: scale(1.15); }
  .percorso-onda .percorso__tappa:focus-visible .percorso__numero { box-shadow: 0 0 0 3px var(--percorso-fondo), 0 0 0 5px var(--teal); }

  .percorso-onda .percorso__corpo {
    position: absolute;
    left: 50%;
    translate: -50% 0;
    width: calc(200% - 1rem);
    padding: 0;
    text-align: center;
    gap: 0;
  }
  /* In alto: il titolo sta sopra la tappa, attaccato in basso. */
  .percorso-onda .percorso__tappa:nth-child(odd) .percorso__corpo { bottom: calc(100% - 6.875rem + 2.375rem); }
  .percorso-onda .percorso__tappa:nth-child(even) .percorso__corpo { top: calc(15.625rem + 2.375rem); }
  .percorso-onda .percorso__titolo { font-size: 0.9375rem; font-weight: 600; line-height: 1.33; color: #1f2a2e; }
  .percorso-onda .percorso__numero { font-size: 1rem; }
  .percorso-onda .percorso__corpo .area-tag {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  /* La descrizione: un biglietto che compare nella fascia fra le due file. */
  .percorso-onda .percorso__testo {
    position: absolute;
    left: 50%;
    width: 15rem;
    padding: 0.75rem 0.875rem;
    border-radius: var(--r-piccolo);
    background: var(--carta);
    box-shadow: var(--ombra-3);
    font-size: 0.8125rem;
    text-align: left;
    color: var(--grigio-scuro);
    opacity: 0;
    visibility: hidden;
    translate: -50% 0.25rem;
    transition: opacity 0.2s ease, translate 0.2s ease, visibility 0s linear 0.2s;
    pointer-events: none;
    z-index: 2;
  }
  .percorso-onda .percorso__tappa:nth-child(odd) .percorso__testo { top: calc(100% + 4.5rem); }
  .percorso-onda .percorso__tappa:nth-child(even) .percorso__testo { bottom: calc(100% + 4.5rem); }
  .percorso-onda .percorso__tappa:is(:hover, :focus-visible, :focus-within) .percorso__testo {
    opacity: 1;
    visibility: visible;
    translate: -50% 0;
    transition: opacity 0.2s ease, translate 0.2s ease;
  }
  .percorso-onda .percorso__tappa:first-child .percorso__corpo,
  .percorso-onda .percorso__tappa:first-child .percorso__testo { left: 0; translate: 0 0; text-align: left; }
  .percorso-onda .percorso__tappa:last-child .percorso__corpo,
  .percorso-onda .percorso__tappa:last-child .percorso__testo { left: auto; right: 0; translate: 0 0; text-align: right; }
  .percorso-onda .percorso__tappa:last-child .percorso__testo { text-align: left; }

  .percorso__onda {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  /* Due strati: l'alone largo e tenue, la linea sottile sopra. */
  .percorso__onda path {
    fill: none;
    stroke: var(--area);
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }
  /* Il colore sfuma da un'area all'altra (gradiente in inc/percorso.php). */
  .percorso__onda path { stroke: url(#percorso-sfumato); }
  .percorso__onda .percorso__alone { stroke-width: 18; opacity: 0.12; }
  .percorso__onda .percorso__linea { stroke-width: 3; opacity: 1; }
  .percorso__tappa:is(:hover, :focus-visible) { z-index: 3; }

  /* L'animazione: le tappe in fila e l'onda che si disegna dietro. */
  .percorso--attesa + .percorso__onda path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .percorso--visto + .percorso__onda path {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.35s ease;
    transition-delay: calc(var(--i) * 90ms + 120ms);
  }
}
@media (min-width: 1101px) and (prefers-reduced-motion: reduce) {
  .percorso--attesa + .percorso__onda path { stroke-dashoffset: 0; transition: none; }
  .percorso-onda .percorso__testo { transition: none; }
}

/* L'animazione: la mette site.js (classe .percorso--attesa) solo se il
   visitatore non ha chiesto meno movimento. Le tappe compaiono in fila, il
   tratteggio si disegna verso la tappa dopo. */
.percorso--attesa .percorso__tappa { opacity: 0; translate: 0 0.75rem; }
.percorso--attesa .percorso__tappa::before { scale: 0 1; }
.percorso--visto .percorso__tappa {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.5s ease, translate 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i) * 90ms);
}
.percorso--visto .percorso__tappa::before {
  scale: 1 1;
  transition: scale 0.45s ease;
  transition-delay: calc(var(--i) * 90ms + 250ms);
}
@media (max-width: 1000px) {
  .percorso--attesa .percorso__tappa::before { scale: 1 0; }
  .percorso--visto .percorso__tappa::before { scale: 1 1; }
}
@media (prefers-reduced-motion: reduce) {
  .percorso--attesa .percorso__tappa { opacity: 1; translate: none; transition: none; }
  .percorso--attesa .percorso__tappa::before { scale: none; transition: none; }
}

/* --- Funzionalità: le tre aree nell'hero ---------------------------------- */
.aree-trio { display: grid; gap: 0.875rem; align-content: center; }
.aree-trio__voce {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  border-radius: var(--r-media);
  background: var(--carta);
  box-shadow: var(--ombra-2);
  text-decoration: none;
  color: var(--grigio);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}
/* Leggermente sfalsati: si leggono come tre biglietti, non come un elenco. */
.aree-trio__voce:nth-child(2) { margin-left: clamp(0rem, 4vw, 2.5rem); }
.aree-trio__voce:nth-child(3) { margin-left: clamp(0rem, 8vw, 5rem); }
.aree-trio__voce:hover { transform: translateY(-3px); box-shadow: var(--ombra-3); }
.aree-trio__icona {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-piccolo);
  background: var(--area);
  color: var(--area-su);
}
.aree-trio__corpo { display: grid; gap: 0.125rem; }
.aree-trio__verbo { font-size: var(--t-etichetta); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-scuro); }
.aree-trio__nome { font-size: var(--t-h3); font-weight: 600; line-height: 1.25; color: var(--teal-profondo); }
.aree-trio__lead { font-size: var(--t-piccolo); line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .aree-trio__voce:hover { transform: none; } }

/* --- Funzionalità: apertura di ogni area e le sue 8 funzioni ------------- */
.area-testa .area-testa__verbo { margin-inline: auto; padding-block: 0.3rem; font-size: var(--t-piccolo); }
.area-testa .area-testa__verbo + h2 { margin-top: 0.875rem; font-size: var(--t-h1); }

.funzioni {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.funzioni > li { display: grid; }
.funzione { gap: 0.5rem; padding: 1.375rem 1.375rem 1.5rem; }
.funzione .card__icona { width: 2.5rem; height: 2.5rem; background: var(--area-tinta); }
.funzione__nome { font-size: var(--t-h4); font-weight: 600; line-height: 1.3; color: var(--teal-profondo); margin-top: 0.25rem; }
.funzione__testo { font-size: var(--t-piccolo); line-height: 1.55; }
/* Le funzioni che hanno una riga con il mockup portano lì. */
a.funzione::after {
  content: "→";
  position: absolute;
  top: 1.375rem;
  right: 1.375rem;
  font-weight: 600;
  color: var(--teal-scuro);
  transition: transform 0.2s ease;
}
a.funzione:hover::after { transform: translateX(3px); }
@media (max-width: 1000px) { .funzioni { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  /* Su telefono otto card in colonna erano lunghissime: icona a sinistra. */
  .funzioni { grid-template-columns: minmax(0, 1fr); gap: 0.625rem; }
  .funzione {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.125rem 0.875rem;
    padding: 1rem 2.5rem 1.125rem 1.125rem;
  }
  .funzione .card__icona { grid-row: span 2; width: 2.25rem; height: 2.25rem; }
  .funzione__nome { margin-top: 0.125rem; }
  a.funzione::after { top: 1rem; right: 1rem; }
}

/* Il titolo di una riga è un h3 (sta sotto l'h2 dell'area) con l'aspetto di un h2. */
.modulo-riga__testo .h2 { margin-top: 0.75rem; }
.ancora-vecchia { position: absolute; }

/* --- Funzionalità: i vantaggi di un'area, in una fascia scura ------------ */
.vantaggi { padding: clamp(1.75rem, 4vw, 3rem); gap: 1.5rem; }
.vantaggi__titolo { color: var(--menta-scura); }
.vantaggi__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem clamp(1.25rem, 3vw, 2.5rem);
}
.vantaggi__segno {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  /* Bianco con la spunta nel colore dell'area: il blu del PMS sul fondo
     scuro della fascia non si vedeva (colori del pitch deck, 7/10/2026). */
  background: #fff;
  color: var(--area);
}
.vantaggi__nome { margin-top: 0.875rem; font-size: var(--t-h4); font-weight: 600; line-height: 1.3; color: #fff; }
.vantaggi__testo { margin-top: 0.375rem; font-size: var(--t-piccolo); line-height: 1.55; color: rgba(255, 255, 255, 0.82); }
@media (max-width: 1000px) { .vantaggi__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .vantaggi__lista { grid-template-columns: minmax(0, 1fr); } }

/* --- Funzionalità: Business Intelligence e l'assistente AI --------------- */
.bi__sotto { margin-top: 1.5rem; font-weight: 600; color: var(--teal-profondo); }
.bi__sotto + .spunte { margin-top: 0.75rem; }
.assistente {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.75rem, 4vw, 3rem);
}
.assistente__testo { display: grid; gap: 0.875rem; justify-items: start; }
.assistente__chat { display: grid; gap: 0.75rem; }
.assistente__bolla {
  max-width: 34rem;
  padding: 0.875rem 1.125rem;
  border-radius: var(--r-media);
  font-size: var(--t-piccolo);
  line-height: 1.55;
}
.assistente__bolla--domanda {
  justify-self: end;
  border-bottom-right-radius: 4px;
  background: var(--teal-profondo);
  color: #fff;
}
.assistente__bolla--risposta {
  justify-self: start;
  border-bottom-left-radius: 4px;
  background: var(--teal-chiaro);
  color: var(--grigio-scuro);
}
.assistente__chi { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.25rem; font-size: var(--t-etichetta); font-weight: 600; color: var(--teal-scuro); }
.assistente__nota { font-size: var(--t-etichetta); color: var(--grigio-tenue); }
.assistente__testo .assistente__nota { margin-top: 0.875rem; }
.assistente code {
  padding: 0.1em 0.4em;
  border-radius: 6px;
  background: var(--teal-chiaro);
  color: var(--teal-profondo);
  font-size: 0.95em;
  overflow-wrap: anywhere;
}
@media (max-width: 900px) { .assistente { grid-template-columns: minmax(0, 1fr); } }

/* --- Funzionalità: H-Flow, il lab ----------------------------------------- */
.hflow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(1.75rem, 4.5vw, 3.5rem);
  border-radius: var(--r-card);
  background: linear-gradient(150deg, var(--verde-chiaro), color-mix(in srgb, var(--verde-chiaro) 45%, var(--carta)));
}
.hflow__testo h2 { margin-top: 0.875rem; }
.hflow__testo p:not(.area-tag) { margin-top: 0.875rem; color: var(--grigio-scuro); }
.hflow .area-tag { background: var(--carta); }
.hflow__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.hflow__lista li {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  padding: 1.125rem;
  border-radius: var(--r-media);
  background: var(--carta);
  font-size: var(--t-piccolo);
  line-height: 1.5;
}
.hflow__lista b { display: block; margin-bottom: 0.125rem; color: var(--teal-profondo); }
.hflow__lista .card__icona { width: 2.5rem; height: 2.5rem; background: var(--area); color: var(--area-su); }
.hflow .btn--linea { border-color: var(--verde-scuro); color: var(--verde-scuro); }
@media (max-width: 900px) { .hflow { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .hflow__lista { grid-template-columns: minmax(0, 1fr); } }

/* --- Hotel e villaggi: segnali di complessità e problemi ------------------ */
.segnali {
  display: grid;
  justify-items: center;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.segnali__titolo { font-size: var(--t-h4); }
.segnali__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; max-width: 52rem; }
.segnali__lista li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--r-pillola);
  background: var(--carta);
  box-shadow: var(--ombra-1);
  font-size: var(--t-piccolo);
  font-weight: 500;
  color: var(--teal-profondo);
}
.segnali__lista svg { flex: none; color: var(--teal); }

.problemi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.problemi__gruppo {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-card);
  background: var(--area-tinta);
}
.problemi__gruppo .area-tag { background: var(--carta); }
.problemi__titolo { margin-top: 0.875rem; }
.problemi__lista { display: grid; gap: 1.125rem; margin: 1.25rem 0 0; }
.problemi__lista dt { font-weight: 600; color: var(--teal-profondo); }
.problemi__lista dd { margin: 0.25rem 0 0; font-size: var(--t-piccolo); line-height: 1.6; color: var(--grigio-scuro); }
.problemi__sintesi {
  max-width: 60ch;
  margin: clamp(2rem, 4vw, 2.75rem) auto 0;
  text-align: center;
  font-size: 1.0625rem;
  color: var(--teal-profondo);
}
@media (max-width: 860px) { .problemi { grid-template-columns: minmax(0, 1fr); } }

/* --- Chi siamo: mission, vision, filosofia -------------------------------- */
.manifesto .card { gap: 0.875rem; }
.manifesto__etichetta { font-size: var(--t-etichetta); }
.card--scura .manifesto__etichetta { color: var(--menta-scura); }
.manifesto__frase {
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--teal-profondo);
  text-wrap: balance;
}
.card--scura .manifesto__frase { color: #fff; }

/* --- Chi siamo: la cronologia con gli anni ------------------------------- */
/* Il punto della tappa diventa una pillola con l'anno. */
.tappe--anni .tappa { grid-template-columns: 4rem minmax(0, 1fr); }
.tappe--anni::before { left: 1.9375rem; }
.tappe--anni .tappa__anno {
  width: 4rem;
  height: 2.25rem;
  margin-top: 0.25rem;
  border-radius: var(--r-pillola);
  font-size: var(--t-piccolo);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tappe--anni .tappa__titolo { padding-top: 0.3rem; }
.tappe--anni .tappa:last-child .tappa__anno { background: var(--verde-scuro); color: #fff; box-shadow: 0 0 0 4px var(--carta); }
.tappa__testo a { color: var(--teal-scuro); font-weight: 600; }

/* --- Chi siamo: i sei valori --------------------------------------------- */
.valore { height: 100%; }
.valore__numero {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--menta-scura);
  font-variant-numeric: tabular-nums;
}

/* --- Chi siamo: la squadra, accanto ai fondatori -------------------------- */
#team .intro p:not(.etichetta) { max-width: 60ch; }
.squadra__titolo { margin-top: clamp(3rem, 6vw, 4rem); text-align: center; font-size: var(--t-h3); }
.squadra {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.squadra__card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--r-media);
  background: var(--carta);
  box-shadow: var(--ombra-1);
}
.squadra__iniziali,
.squadra__foto {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
}
.squadra__iniziali {
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--menta), var(--teal-chiaro));
  font-weight: 700;
  color: var(--teal-profondo);
}
.squadra__foto { object-fit: cover; object-position: center 18%; }
/* Con i ritratti veri (5/10/2026) il tondo cresce, se no il viso non si legge. */
.squadra__foto, .squadra__iniziali { width: 4.75rem; height: 4.75rem; }
.squadra__nome { display: block; font-weight: 600; color: var(--teal-profondo); line-height: 1.3; }
.squadra__ruolo { display: block; margin-top: 0.125rem; font-size: var(--t-etichetta); color: var(--grigio); }
/* I fondatori su fondo tinta: il ritratto che manca resta leggibile. */
#team .team__iniziali { background: linear-gradient(160deg, var(--carta), var(--menta)); }
/* I soci (6/10/2026): foto verticale, nome, ruolo, la prima frase della
   biografia; il resto sulla foto (desktop) o dietro "Continua a leggere". */
/* Foto di nuovo verticali 4:5 (Luca: si deve vedere la maglietta). */
#team .team__foto { position: relative; overflow: hidden; border-radius: var(--r-card); }
#team .team__foto img { display: block; }
.team__velo, .team__invito { display: none; }

/* La biografia sale sulla foto, su desktop e su telefono (6/10/2026): il tocco
   o il clic su "Leggi la storia" la apre e la tiene aperta, aprirne un'altra
   chiude la prima (site.js). Col mouse si apre anche al passaggio. Senza JS
   resta "Continua a leggere" sotto la foto. */
.js #team .team__bio { display: none; }
.js #team .team__foto[data-bio] { cursor: pointer; outline: none; }
.js #team .team__foto[data-bio]:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--teal); }
.js #team .team__foto img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.js .team__velo {
  display: flex;
  flex-direction: column;
  position: absolute;
  inset: 0;
  padding: 1.5rem 1.5rem 1.625rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, rgba(0, 46, 52, 0) 0%, rgba(0, 46, 52, 0.45) 22%, rgba(0, 46, 52, 0.9) 45%, rgba(0, 46, 52, 0.95) 100%);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.js .team__velo p {
  margin-top: auto;
  font-size: 0.9375rem;
  line-height: 1.6;
  translate: 0 1.5rem;
  transition: translate 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .team__invito {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  padding: 0.4rem 0.875rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--ombra-2);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--teal-profondo);
  transition: opacity 0.25s ease;
}
.js .team__invito::after { content: "+"; font-size: 1rem; line-height: 1; }
/* Aperta: col clic/tocco sempre, col passaggio del mouse solo dove c'è il mouse. */
.js #team .team__foto[aria-expanded="true"] .team__velo { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }
.js #team .team__foto[aria-expanded="true"] .team__velo p { translate: 0 0; }
.js #team .team__foto[aria-expanded="true"] img { transform: scale(1.04); }
.js #team .team__foto[aria-expanded="true"] .team__invito { opacity: 0; }
@media (hover: hover) {
  .js #team .team__foto[data-bio]:is(:hover, :focus-visible) .team__velo { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }
  .js #team .team__foto[data-bio]:is(:hover, :focus-visible) .team__velo p { translate: 0 0; }
  .js #team .team__foto[data-bio]:is(:hover, :focus-visible) img { transform: scale(1.04); }
  .js #team .team__foto[data-bio]:is(:hover, :focus-visible) .team__invito { opacity: 0; }
}
@media (max-width: 560px) {
  .js .team__velo { padding: 1.25rem; }
  .js .team__velo p { font-size: 0.875rem; line-height: 1.55; }
}
@media (prefers-reduced-motion: reduce) {
  .js .team__velo, .js .team__velo p, .js #team .team__foto img { transition: none; }
  .js #team .team__foto[data-bio][aria-expanded="true"] img,
  .js #team .team__foto[data-bio]:hover img { transform: none; }
}

#team .team__gancio { font-size: 1rem; color: var(--grigio-scuro); }
.team__bio { margin-top: 0.5rem; }
.team__bio summary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--teal-scuro);
  border-radius: 6px;
}
.team__bio summary::-webkit-details-marker { display: none; }
.team__bio summary::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: 45deg;
  translate: 0 -0.15rem;
  transition: rotate 0.2s ease, translate 0.2s ease;
}
.team__bio[open] summary::after { rotate: 225deg; translate: 0 0.1rem; }
.team__bio summary:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.team__bio summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.team__chiudi,
.team__bio[open] .team__apri { display: none; }
.team__bio[open] .team__chiudi { display: inline; }
.team__bio .team__text { margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.65; }
@media (prefers-reduced-motion: reduce) { .team__bio summary::after { transition: none; } }

/* --------------------------------------------------------------------------
   Hotel e villaggi — rimando ai property manager (sotto i segnali) e
   l'apertura della spiaggia con il telefono del bar spiaggia (4/10/2026).
   -------------------------------------------------------------------------- */
.pm-rimando { max-width: 62ch; margin-top: clamp(1.75rem, 3vw, 2.25rem); color: var(--grigio-scuro); }
.pm-rimando a { font-weight: 600; color: var(--teal-scuro); text-decoration: underline; text-underline-offset: 0.2em; }
.spiaggia-riga .palco { width: 100%; max-width: 24rem; }
/* Property manager: testo su due colonne (racconto + spunte) e sotto il
   Rooms Manager a tutta larghezza, senza riquadro dietro (decisione di Gaia:
   niente cornici colorate). Il padding lascia posto alle card flottanti. */
.pm-intro {
  display: grid;
  gap: clamp(1rem, 3vw, 2.5rem);
}
@media (min-width: 1001px) {
  .pm-intro > .modulo-riga__testo { display: grid; grid-template-columns: 1.1fr 1fr; column-gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
  .pm-intro > .modulo-riga__testo > :is(.etichetta, h2) { grid-column: 1; }
  .pm-intro > .modulo-riga__testo > .testo { grid-column: 1; }
  .pm-intro > .modulo-riga__testo > .spunte { grid-column: 2; grid-row: 2 / span 2; align-self: end; }
}
.pm-palco { margin-top: clamp(2rem, 4vw, 3rem); padding-block: clamp(1rem, 2.5vw, 2rem); }

/* Funzionalità — i punti di forza di una riga (Aurora: 0 secondi, 0
   operatori, tutto automatico). Una riga per punto: la colonna di testo è
   stretta e in tre colonne "Tutto automatico" non ci stava. */
.punti-forza {
  list-style: none;
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  max-width: 30rem;
}
.punti-forza li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 0.875rem;
  padding: 0.75rem 1rem;
  border-radius: var(--r-piccolo);
  background: var(--carta);
  box-shadow: var(--ombra-1);
}
.punti-forza b { min-width: 11.5rem; font-size: 1.25rem; line-height: 1.2; color: var(--teal-scuro); letter-spacing: -0.01em; }
.punti-forza span { font-size: 0.9375rem; color: var(--grigio-scuro); }

/* --------------------------------------------------------------------------
   Eventi — la card grafica del prossimo evento (5/10/2026) e il blocco del
   prossimo evento senza la data ripetuta accanto.
   -------------------------------------------------------------------------- */
.locandina {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1.5rem;
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
  aspect-ratio: 4 / 5;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-card);
  background: var(--teal-profondo);
  color: #fff;
  box-shadow: var(--ombra-3);
}
.locandina__testa { display: grid; gap: 0.25rem; }
.locandina__sopra { font-size: var(--t-etichetta); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--menta-scura); }
.locandina__nome { font-size: clamp(1.375rem, 2.2vw, 1.75rem); font-weight: 700; line-height: 1.15; }
.locandina__date { align-self: center; display: grid; }
.locandina__giorni {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 10vw, 7.5rem);
  line-height: 0.95;
  color: var(--arancio);
  letter-spacing: -0.01em;
}
.locandina__mese { margin-top: 0.5rem; font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 600; }
.locandina__piede { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.locandina__pillola {
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.875rem;
  font-weight: 600;
}
.locandina__pillola--stand { background: var(--arancio); color: var(--teal-profondo); }
.locandina__marchio {
  margin-left: auto;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.375rem;
  border-radius: 0.75rem;
  background: #fff;
  object-fit: contain;
}
/* La giungla dello stand, in un angolo: la stessa foglia della chiusura. */
.locandina__foglia {
  position: absolute;
  z-index: -1;
  right: -12%;
  top: 18%;
  width: 62%;
  aspect-ratio: 0.8;
  background: url("/assets/img/leaves.png") center / 520px auto;
  -webkit-mask: url("/assets/img/foglia.svg") no-repeat center / 100% 100%;
          mask: url("/assets/img/foglia.svg") no-repeat center / 100% 100%;
  opacity: 0.35;
  transform: rotate(-18deg);
  pointer-events: none;
}
.evento-prossimo--solo-testo { grid-template-columns: minmax(0, 1fr); }
/* Con la foto di Rimini sotto (come le card evento dei concorrenti): la foto
   copre tutto, un velo teal scuro in alto e in basso tiene leggibili le scritte. */
.locandina--foto { background: var(--teal-profondo); }
.locandina__sfondo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.locandina--foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(0, 46, 52, 0.82) 0%, rgba(0, 46, 52, 0.35) 38%,
    rgba(0, 46, 52, 0.25) 55%, rgba(0, 46, 52, 0.85) 100%);
}
.locandina--foto .locandina__giorni { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
.locandina--foto .locandina__mese { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); }
.locandina--foto .locandina__sopra { color: var(--menta); }

/* ==========================================================================
   ⚠️ DA RIPORTARE IN FIGMA (file BD (Copy), Foundation/*)
   Regola del progetto: ogni token del sito deve esistere anche nel Figma di
   Agnese. Questi sono nati o cambiati con il lavoro sul design system e il
   contrasto (settembre 2026). Vetrina: /_stile.

   NUOVI
     --arancio-testo   #a85300   arancio per il TESTO (date, numeri, .accento):
                                 5,4:1 sul bianco, 4,7:1 sulla fascia
     --ombra-1         0 1px 2px  rgba(0,66,73,.06), 0 3px 10px rgba(0,66,73,.06)
     --ombra-2         0 4px 10px rgba(0,66,73,.06), 0 14px 30px rgba(0,66,73,.11)
     --ombra-3         0 8px 18px rgba(0,66,73,.08), 0 24px 56px rgba(0,66,73,.17)
     --t-display       clamp(2.5rem, 3.6vw + 1rem, 4.25rem)   40 → 68px, hero
     --t-lead          1.1875rem                               19px, paragrafi d'apertura
     --forma-blob, --forma-blob-2   due sagome organiche (maschere e sfondi):
                                 vanno disegnate in Figma come vettori

   VALORE CAMBIATO
     --grigio-tenue    #acacac → #6b6b6b   (2,3:1 → 5,3:1 sul bianco)
     --t-h1            max 46px → 52px     clamp(2.25rem, 2.6vw + 1rem, 3.25rem)
     --t-h2            max 34px → 40px     clamp(1.75rem, 1.8vw + 1rem, 2.5rem)

   USO CAMBIATO (stessi token, applicati diversamente, per il WCAG AA)
     bottone primario        fondo --teal-scuro (era --teal-hover, 4,4:1)
     bottone a linea         bordo e testo --teal-scuro
     bottone arancio         testo --teal-profondo (era bianco, 2,5:1)
     celle arancio del bento testo --teal-profondo (era bianco, 2,5:1)
     .etichetta (eyebrow)    --teal-scuro (era --teal, 3,7:1 a 13px)
   ========================================================================== */

/* ==========================================================================
   Revisione mobile (ottobre 2026)
   Misurata a 390 e 360 px. Sul desktop non cambia niente: tutto sta dentro
   le media query (i minimi dei clamp di titoli e sezioni sono in alto, nei
   token). Obiettivi: testo meno grande intorno, mockup più grandi, card
   meno alte, bersagli al tocco di almeno 44 px.
   ========================================================================== */

@media (max-width: 600px) {
  /* Sistema ----------------------------------------------------------------- */
  :root { --t-lead: 1.0625rem; }   /* 19 → 17 px: i lead degli hero facevano 8-12 righe */
  :is(.hero__testo, .lead, .intro > p:not(.etichetta)) { line-height: 1.55; }
  /* Bottoni: quando vanno a capo sono larghi uguali (erano 184 e 267 px). */
  .btn-riga > .btn:not(.btn--testo) { flex: 1 1 auto; }
  :is(.bento, .bento6, .carosello, .moduli, .profili, .funzioni) { margin-top: 2rem; }
  .hero--prodotto { padding-bottom: 2rem; }

  /* Mockup a tutta colonna: in compatto la card flottante sta dentro il
     riquadro, i 16 px di margine per lato non servivano. 310 → 342 px. */
  .palco:not(.palco--stretto), .pm-hero__palco, .prodotto__scena { padding-inline: 0; }
  .coppia { padding-left: 0; }

  /* Card con icona: l'icona accanto al titolo invece che su una riga da sola. */
  .griglia .card:has(> .card__icona) {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    column-gap: 0.875rem;
    row-gap: 0.5rem;
    padding: 1.25rem 1.25rem 1.375rem;
  }
  .griglia .card:has(> .card__icona) > * { grid-column: 1 / -1; }
  .griglia .card:has(> .card__icona) > .card__icona { grid-column: 1; width: 2.5rem; height: 2.5rem; align-self: center; }
  .griglia .card:has(> .card__icona) > .card__icona:has(+ .etichetta) { grid-row: span 2; }
  .griglia .card:has(> .card__icona) > :is(.card__titolo, .etichetta) { grid-column: 2; align-self: center; margin: 0; }
  .griglia .card:has(> .card__icona) > .card__testo { margin-top: 0.25rem; }

  /* Home: hero ---------------------------------------------------------------- */
  .hero--aperto.hero--home { padding-top: 2rem; }
  .hero--home .hero__payoff { margin-top: 1.25rem; }
  .hero--home .hero__dettaglio { display: none; }
  .hero--home .hero__azioni { margin-top: 1.5rem; gap: 0.625rem; }
  .hero__rassicura { margin-top: 1rem; gap: 0.25rem; font-size: 0.875rem; }
  .hero--home .prodotto { margin-top: 2rem; margin-bottom: 2.5rem; }   /* la notifica del tableau sporge sotto */

  /* Home: percorso dell'ospite, la pillola dell'area accanto al titolo (−550 px). */
  .percorso { gap: 1.25rem; margin-top: 2rem; }
  .percorso__tappa { grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.875rem; }
  .percorso__numero { width: 2.25rem; height: 2.25rem; font-size: 0.9375rem; box-shadow: 0 0 0 4px var(--percorso-fondo); }
  .percorso__tappa::before,
  .percorso__tappa:nth-child(4n)::before { top: 2.25rem; bottom: -1.25rem; left: 1.0625rem; }
  .percorso__corpo { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.625rem; row-gap: 0.2rem; padding: 0.35rem 0 0; }
  .percorso__titolo { grid-column: 1; grid-row: 1; }
  .percorso__corpo .area-tag { grid-column: 2; grid-row: 1; align-self: start; margin-top: 0; font-size: 0.75rem; padding: 0.1rem 0.55rem 0.1rem 0.45rem; }
  .percorso__testo { grid-column: 1 / -1; }

  /* Home: tre aree. La regola desktop align-items: center lasciava la
     vignetta della cassa larga 0 px (un contenitore centrato non ha larghezza). */
  .bento-aree__cella--oms { align-items: stretch; }
  .bento-aree__cella { min-height: 0; }

  /* Home: assistenza. Le due card coprivano la foto e ripetevano le spunte. */
  .vetrina__media .flottante { display: none; }
  .vetrina__testo .spunta { margin-top: 0; }
  .vetrina__testo .spunte { gap: 0.625rem; margin-top: 1.25rem; }

  /* Home: segmenti ed eventi. */
  .card-vetrina__scena--foto { height: auto; aspect-ratio: 16 / 10; }
  .ev-griglia.scorri-mobile { grid-template-columns: none; }
  .scorri-mobile .ev-card__cta { align-self: stretch; padding-inline: 1rem; }
  .ev-card__foto, .ev-card__data { aspect-ratio: 16 / 9; }
  .ev-card__data { min-height: 0; }

  /* Menu mobile --------------------------------------------------------------- */
  /* Le voci delle tendine non si toccano: si presentano come intestazioni. */
  .nav__apri { min-height: 0; padding: 0.625rem 1rem 0.25rem; font-size: var(--t-etichetta); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grigio-tenue); }
  .nav__colonna:not(.nav__colonna--aree) .nav__link-descr { display: none; }
  .nav__colonna:not(.nav__colonna--aree) .nav__link { align-items: center; min-height: 44px; }
  .nav__colonna:not(.nav__colonna--aree) .nav__icona { width: 2rem; height: 2rem; }
  .nav__colonna-titolo--link { padding-block: 0.75rem; }
  /* La CTA resta sempre visibile in fondo al pannello che scorre. */
  .nav__azioni {
    position: sticky; bottom: -0.5rem; z-index: 1;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0.5rem;
    margin-inline: -0.5rem; padding: 0.75rem 0.5rem;
    background: var(--carta); box-shadow: 0 -10px 16px -12px rgba(0, 66, 73, 0.25);
  }
  .nav__azioni .btn { min-width: 0; padding-inline: 0.75rem; }

  /* Footer e chiusura ------------------------------------------------------- */
  .site-footer__logo { width: 190px; }
  .site-footer__claim { max-width: 36ch; }
  .site-footer__list { gap: 0; }
  .site-footer__list a { display: inline-block; padding-block: 0.5rem; }   /* 21 → ~40 px */
  .site-footer__list .muted { display: block; margin-top: -0.375rem; padding-bottom: 0.25rem; font-size: var(--t-etichetta); }
  .site-footer h2 { margin-bottom: 0.25rem; }
  .site-footer__legal a { display: inline-block; padding-block: 0.375rem; }
  /* Con la chiusura arancione mezzo schermo sopra, il secondo invito è un doppione. */
  body:has(.chiusura) .site-footer__cta { display: none; }
  .chiusura { padding-block: 3.5rem 3rem; }
  .chiusura__titolo { font-size: var(--t-h2); }               /* era più grande dell'H1 della home */
  .chiusura .btn-riga > .btn { flex: 0 1 auto; }              /* a tutta larghezza finiva sotto la foglia */

  /* Chi siamo (le schede dei soci restano come sono) -------------------------- */
  .team-palco.cartolina-palco { padding: 0; }
  .team-foto--soci { max-width: none; }
  .modulo-riga > .card--elevata { padding: 1.25rem; }
  .tappe--anni .tappa { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0.75rem; }
  .tappe--anni::before { left: 1.6875rem; }
  .tappe--anni .tappa__anno { width: 3.5rem; height: 2rem; font-size: 0.875rem; }
  .tappe { gap: 1rem; margin-top: 1.25rem; }
  .valore .card__titolo { font-size: 1.0625rem; padding-right: 2.5rem; }
  .valore__numero { font-size: 1.25rem; top: 1.75rem; right: 1.25rem; }
  .griglia.valori { gap: 0.75rem; }
  .assistenza { padding: 1.75rem 1.5rem; }

  /* Eventi -------------------------------------------------------------------- */
  .locandina { aspect-ratio: 1 / 1; gap: 1rem; }
  .locandina__giorni { font-size: 4rem; }
  .locandina--foto::after { background: linear-gradient(180deg, rgba(0, 46, 52, 0.85) 0%, rgba(0, 46, 52, 0.5) 38%, rgba(0, 46, 52, 0.5) 60%, rgba(0, 46, 52, 0.88) 100%); }
  /* La card scura ripeteva nome, date e luogo della locandina subito sopra. */
  .evento-prossimo--solo-testo :is(.evento-prossimo__nome, .evento-prossimo__data, .evento-prossimo__luogo) { display: none; }
  .evento-prossimo--solo-testo .evento-prossimo__nota { margin-top: 0.5rem; font-size: 1rem; }
  .evento-prossimo--solo-testo .btn-riga { margin-top: 1.25rem !important; }
  .evento-prossimo { padding: 1.5rem; }

  /* Contatti ------------------------------------------------------------------ */
  .contatti__modulo.card { padding: 1.25rem; }
  .strada { gap: 0.75rem; padding: 0.875rem 1rem; }
  .recapiti { gap: 0.25rem; margin-top: 0 !important; }
  .recapiti__valore { display: block; padding-block: 0.5rem; }   /* 28 → 44 px */
  .faq__numero { display: none; }
  .faq__domanda { grid-template-columns: minmax(0, 1fr) auto; padding: 1rem 1.125rem; }
  .faq__risposta { padding: 0 1.125rem 1.25rem; }
  .faq { gap: 0.5rem; }
  body:has(.contatti__strade) .recapiti__doppione { display: none; }

  /* Doppioni: in Chi siamo il titolo della sezione è la stessa frase della
     card Mission subito sotto (resta per i lettori di schermo); in
     Funzionalità i tre biglietti dell'hero ripetono le tre card che seguono. */
  .manifesto-intro h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hero .aree-trio { display: none; }

  /* 404: le nove pagine come elenco compatto -------------------------------- */
  .errore { padding-block: 3rem 2.5rem; }
  .errore__pagine { gap: 0.5rem; margin-top: 1.25rem; }
  .errore__pagine .card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.75rem; row-gap: 0.125rem; padding: 0.875rem 1.125rem; border-radius: var(--r-media); }
  .errore__pagine .card__titolo { font-size: 1.0625rem; }
  .errore__pagine .card__testo { grid-column: 1; font-size: 0.875rem; line-height: 1.45; }
  .errore__pagine .card__link { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 0; font-size: 0; }
  .errore__pagine .card__link::after { font-size: 1.25rem; }
}

/* Gutter: 24 px fino a 375, 20 px sotto (360, 320). */
@media (max-width: 374px) { :root { --bordo: 1.25rem; } }

/* Chiusura semplice (home e H-Flow, versione B): niente foglie, seconda riga
   in teal, titolo grande in Fraunces. */
.chiusura--semplice .chiusura__titolo { font-family: var(--font-titoli); font-weight: 800; }
.chiusura--semplice .chiusura__parola { display: block; font-family: var(--font-titoli); font-weight: 800; color: var(--teal-scuro); background: none; -webkit-text-fill-color: currentColor; }
.chiusura--semplice .chiusura__titolo { font-size: clamp(2.5rem, 4vw + 1rem, 4.75rem); line-height: 1.02; letter-spacing: -0.02em; }

/* --------------------------------------------------------------------------
   Banner del consenso ai cookie (inc/consenso.php, 9/10/2026). In basso a
   sinistra, non copre la pagina: si può continuare a navigare. Rifiuta e
   Accetta hanno lo stesso peso visivo (Garante): stessa misura, stessa riga.
   -------------------------------------------------------------------------- */
.consenso {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 200;
  width: min(30rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1.5rem 1.5rem 1.25rem;
  border-radius: 20px;
  background: #fff;
  color: var(--teal-profondo);
  box-shadow: 0 18px 40px rgba(11, 63, 70, 0.22), 0 0 0 1px rgba(11, 63, 70, 0.08);
}
.consenso[hidden] { display: none; }
.consenso__chiudi {
  position: absolute; top: 0.625rem; right: 0.75rem;
  width: 2.25rem; height: 2.25rem;
  border: 0; border-radius: 50%; background: none;
  color: var(--grigio); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.consenso__chiudi:hover { background: var(--teal-chiaro); color: var(--teal-profondo); }
.consenso__titolo { padding-right: 2rem; font-family: var(--font-titoli); font-size: 1.25rem; font-weight: 700; }
.consenso__testo { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.55; color: var(--grigio); }
.consenso__testo a { color: var(--teal-scuro); }
.consenso__scelte { display: grid; gap: 0.625rem; margin-top: 1rem; }
.consenso__scelte[hidden] { display: none; }
.consenso__voce { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.8125rem; line-height: 1.45; color: var(--grigio); cursor: pointer; }
.consenso__voce input { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.125rem; accent-color: var(--teal-scuro); }
.consenso__voce b { display: block; font-size: 0.875rem; color: var(--teal-profondo); }
.consenso__azioni { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.5rem; margin-top: 1.125rem; }
@media (max-width: 420px) {
  .consenso__azioni { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .consenso__azioni [data-consenso="accetta"] { grid-column: 1 / -1; grid-row: 1; }
}
.consenso__azioni .btn { justify-content: center; padding-inline: 0.5rem; font-size: 0.875rem; }
.consenso__azioni [hidden] { display: none; }
@media (max-width: 420px) {
  .consenso { left: 0.5rem; bottom: 0.5rem; width: calc(100vw - 1rem); padding: 1.25rem 1rem 1rem; }
}