/* ==========================================================================
   Pagine prodotto (/sales-hub, /pms, /oms) e panoramica (/funzionalita)
   5/10/2026: Funzionalità si divide in tre pagine d'area più una panoramica.
   Si carica con css_tag('prodotto') DOPO site.css e mockup.css. Le pagine
   d'area seguono il mockup di Gaia (8/10/2026, sotto), con i suoi colori;
   la panoramica usa i pezzi di site.css (.aree-trio__voce, .area-*).
   ========================================================================== */

/* ==========================================================================
   Le pagine d'area come nel mockup di Gaia per Sales Hub (8/10/2026).
   Colori del file di Gaia: crema #FBF1E6, grigio #F4F6F5, scuro #0B3F46,
   arancio #EE8A2A (accenti) e #B3580C (etichette, 4,6:1 sul crema). Le
   schermate restano le nostre, senza avvisi.
   ========================================================================== */
:root {
  --sh-crema: #fbf1e6;
  --sh-grigio: #f4f6f5;
  --sh-scuro: #0b3f46;
  --sh-arancio: #ee8a2a;
  --sh-ruggine: #b3580c;
  --sh-filetto: #dce7e8;
  --sh-ombra: 0 18px 40px rgba(11, 63, 70, 0.14);
  /* La sagoma dello strappo di site.css, come maschera. */
  --strappo-sagoma: 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");
}

/* --- Fondi e strappi -------------------------------------------------------
   Ogni cambio di fondo ha lo strappo. Due fondi colorati vicini fondono lo
   strappo in uno solo (vedi --tinta-dopo in site.css): qui il colore giusto
   per ciascun fondo che segue. */
.fondo-crema  { --sezione-tinta: var(--sh-crema); }
.fondo-grigio { --sezione-tinta: var(--sh-grigio); }
.fondo-scuro  { --sezione-tinta: var(--sh-scuro); color: #fff; }
.sezione--tinta:has(+ .fondo-crema)  { --tinta-dopo: var(--sh-crema); }
.sezione--tinta:has(+ .fondo-grigio) { --tinta-dopo: var(--sh-grigio); }
.sezione--tinta:has(+ .fondo-scuro)  { --tinta-dopo: var(--sh-scuro); }

/* --- Hero: crema, il nome in etichetta, il titolo con la coda arancio ---- */
.hero--area { background: var(--sh-crema); padding-bottom: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 1001px) {
  .hero--area .hero__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 40.625rem); gap: clamp(2rem, 4vw, 3.5rem); }
}
.hero-area__nome { color: var(--sh-ruggine); }
.hero--area .hero__titolo { margin-top: 1.5rem; font-size: clamp(2.375rem, 2.6vw + 1.4rem, 3.625rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.026em; }
.hero-area__evidenza { color: var(--sh-arancio); }
.hero--area .hero__testo { margin-top: 1.25rem; font-size: 1.0625rem; }
.hero--area .timeline { margin-top: 2.25rem; }
.hero--area .hero__azioni { margin-top: 2rem; }
/* Senza card flottanti il palco non deve fare spazio: la schermata prende
   tutta la colonna. */
.hero-area__palco { padding-block: 0; }
:is(.hero-area__palco, .prodotto-riga .palco):not(:has(.mk--con-flottanti)) { padding: 0; }
.hero-area__palco.coppia { padding-bottom: clamp(2rem, 4vw, 3rem); }

/* --- La timeline: ora, pallino, fatto ------------------------------------ */
.timeline__titolo {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--sh-ruggine);
}
.timeline__voci { list-style: none; margin: 0.875rem 0 0; padding: 0; }
.timeline__voce {
  display: grid;
  grid-template-columns: 3.25rem 0.875rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}
.timeline__ora { font-family: var(--font-titoli); font-size: 1.0625rem; font-weight: 700; line-height: 1.4; color: var(--teal-profondo); }
.timeline__segno { display: flex; flex-direction: column; align-items: center; align-self: stretch; }
.timeline__segno::before { content: ""; flex: none; width: 12px; height: 12px; margin-top: 6px; border-radius: 50%; background: var(--teal-scuro); }
.timeline__segno::after  { content: ""; flex: 1; width: 2px; margin-top: 4px; background: #cfe3e5; }
.timeline__voce:last-child .timeline__segno::before { background: var(--sh-arancio); }
.timeline__voce:last-child .timeline__segno::after { display: none; }
.timeline__corpo { display: flex; flex-direction: column; gap: 2px; padding-bottom: 1.125rem; }
.timeline__voce:last-child .timeline__corpo { padding-bottom: 0; }
.timeline__corpo b { font-size: 0.9375rem; font-weight: 600; line-height: 1.45; color: var(--teal-profondo); }
.timeline__corpo span { font-size: 0.8125rem; line-height: 1.45; color: var(--grigio); }

/* --- Barra delle sezioni a pillole, sul crema dell'hero ------------------- */
.sottomenu--pillole { background: rgba(251, 241, 230, 0.94); border-block: 0; }
.sottomenu--pillole .sottomenu__lista { justify-content: center; gap: 0.5rem; }
.sottomenu--pillole a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9375rem;
  border: 1px solid var(--sh-filetto);
  background: #fff;
  font-size: 0.875rem;
  color: var(--teal-profondo);
}
.sottomenu--pillole a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--area, var(--area-sh-colore)); }
.sottomenu--pillole a.sottomenu__arancio::before { background: var(--sh-arancio); }
.sottomenu--pillole a.sottomenu__ruggine::before { background: var(--sh-ruggine); }
.sottomenu--pillole a:hover { background: #fff; border-color: var(--teal-scuro); }
.sottomenu--pillole a[aria-current="true"] { background: var(--sh-scuro); border-color: var(--sh-scuro); color: #fff; font-weight: 600; }
@media (max-width: 1200px) {
  .sottomenu--pillole .sottomenu__lista { justify-content: flex-start; }
}
/* Sotto la barra il crema continua e si strappa sul grigio delle funzioni:
   il bordo alto della sezione fa da crema, lo strappo sta subito sotto. */
.sottomenu--pillole + .sezione--tinta { border-top: clamp(1.5rem, 3.5vw, 3rem) solid var(--sh-crema); }
.sottomenu--pillole + .sezione--tinta::before {
  background: var(--sh-crema);
  -webkit-mask: var(--strappo-sagoma) repeat-x left bottom / auto var(--strappo-h);
          mask: var(--strappo-sagoma) repeat-x left bottom / auto var(--strappo-h);
}

/* --- Testata a sinistra (perché, resto della piattaforma) ---------------- */
.testata { max-width: 52rem; }
.testata h2 { margin-top: 0.875rem; }
.testata p:not(.etichetta) { margin-top: 0.875rem; font-size: 1.125rem; color: var(--grigio); }
.testata__etichetta--arancio { color: var(--sh-ruggine); }
:is(#funzioni, .vantaggi-n, .altre-aree) h2 { font-size: clamp(2.125rem, 2.4vw + 1.25rem, 3.25rem); font-weight: 700; line-height: 1.1; }

/* --- Le 8 funzioni numerate ---------------------------------------------- */
.funzioni-n {
  list-style: none;
  margin: clamp(2rem, 3.5vw, 2.75rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
.funzioni-n > li { display: flex; }
.funzione-n {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  padding: 1.625rem 1.5rem;
  border-radius: 18px;
  border-top: 4px solid var(--area, var(--area-sh-colore));
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.funzione-n:hover { transform: translateY(-3px); box-shadow: var(--ombra-2); }
@media (prefers-reduced-motion: reduce) { a.funzione-n:hover { transform: none; } }
.funzione-n__numero { font-family: var(--font-titoli); font-size: 2rem; font-weight: 800; line-height: 1; color: var(--area, var(--area-sh-colore)); }
.funzione-n__nome { font-size: 1.375rem; font-weight: 700; line-height: 1.2; color: var(--teal-profondo); }
.funzione-n__testo { font-size: 0.9375rem; line-height: 1.6; color: var(--grigio); }
@media (max-width: 1000px) { .funzioni-n { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .funzioni-n { grid-template-columns: minmax(0, 1fr); gap: 0.875rem; } }

/* --- Le righe modulo: numero, passi, titolo, sintesi --------------------- */
/* Colonne come nel mockup: la schermata a 600px, il testo nel resto. Più
   stretta, la schermata passa alla versione compatta (sotto i 560px). */
@media (min-width: 1001px) {
  .prodotto-riga .modulo-riga:not(.modulo-riga--pannello) { grid-template-columns: minmax(0, 1fr) minmax(0, 37.5rem); }
  .prodotto-riga .modulo-riga--invertita:not(.modulo-riga--pannello) { grid-template-columns: minmax(0, 37.5rem) minmax(0, 1fr); }
}
.prodotto-riga .modulo-riga__testo { display: flex; flex-direction: column; }
.riga-numero { display: flex; align-items: center; gap: 1rem; }
.riga-numero__cifra { font-family: var(--font-titoli); font-size: 2.125rem; font-weight: 800; line-height: 1; color: var(--teal-scuro); }
.riga-numero__destra { display: flex; flex-direction: column; gap: 0.5rem; }
.riga-numero__passi { display: flex; gap: 5px; }
.riga-numero__passi span { width: 18px; height: 6px; border-radius: 999px; background: #d5e3e3; }
.riga-numero__passi .fatto { background: var(--teal-scuro); }
.riga-numero__passi .qui { width: 44px; background: var(--sh-arancio); }
.riga-numero__azione { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.23em; text-transform: uppercase; color: var(--teal-profondo); }
.prodotto-riga .riga__titolo { margin-top: 1.25rem; font-size: clamp(2.125rem, 2.4vw + 1.25rem, 3.25rem); font-weight: 700; line-height: 1.1; }
.riga__sintesi { margin-top: 1.25rem; font-family: var(--font-titoli); font-size: clamp(1.3125rem, 0.8vw + 1rem, 1.625rem); font-weight: 600; line-height: 1.3; color: var(--teal-scuro); text-wrap: balance; }
.prodotto-riga .blocco__testo { margin-top: 1.25rem; max-width: none; font-size: clamp(1rem, 0.3vw + 0.95rem, 1.125rem); line-height: 1.65; color: var(--teal-profondo); }
.prodotto-riga .blocco__testo p + p { margin-top: 1.25rem; }
.prodotto-riga .timeline { margin-top: 2rem; }

/* Il riquadro con i colori della struttura (booking engine). */
.riquadro {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  padding: 1rem 1.25rem;
  border-radius: 16px;
  background: var(--sh-grigio);
}
.fondo-grigio .riquadro { background: #fff; }
.riquadro__colori { display: flex; flex: none; }
.riquadro__colori span { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 3px rgba(11, 63, 70, 0.18); }
.riquadro__colori span + span { margin-left: -9px; }
.riquadro > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.riquadro__titolo { font-family: var(--font-titoli); font-size: 1.1875rem; font-weight: 700; line-height: 1.25; color: var(--teal-profondo); }
.riquadro__testo { font-size: 1rem; line-height: 1.45; color: var(--grigio); }

/* I punti di forza (Aurora): tre colonne col filetto arancio. */
/* Flex e non griglia: "Tutto automatico" è più lungo degli altri due e,
   se non ci sta, va a capo intero invece di sovrapporsi. */
.prodotto-riga .punti-forza {
  max-width: none;
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 1rem;
}
.prodotto-riga .punti-forza li {
  flex: 1 1 8.5rem;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1rem 0 0;
  border-top: 4px solid var(--sh-arancio);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.prodotto-riga .punti-forza b { min-width: 0; font-family: var(--font-titoli); font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: var(--teal-profondo); white-space: nowrap; }
.prodotto-riga .punti-forza span { font-size: 0.9375rem; color: var(--grigio); }
@media (max-width: 560px) {
  .prodotto-riga .punti-forza { flex-direction: column; gap: 1.25rem; }
  .prodotto-riga .punti-forza li { flex: none; }
}

/* La riga su fondo scuro (Aurora). */
.fondo-scuro .riga-numero__cifra,
.fondo-scuro .riga-numero__passi .fatto { color: #7fd0d7; background: none; }
.fondo-scuro .riga-numero__passi .fatto { background: #7fd0d7; }
.fondo-scuro .riga-numero__passi span:not(.fatto, .qui) { background: #2a5a61; }
.fondo-scuro :is(.riga-numero__azione, .riga__titolo, .blocco__testo, .punti-forza b) { color: #fff; }
.fondo-scuro .blocco__testo p + p,
.fondo-scuro .punti-forza span { color: #cfe3e5; }
.fondo-scuro .riga__sintesi { color: var(--sh-arancio); }

/* --- Il pannello della prima riga: bianco, con l'ombra ------------------- */
.pannello--riga {
  width: 100%;
  max-width: 30rem;
  justify-self: center;
  padding: 2rem 2rem 1.875rem;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--sh-ombra);
}
.pannello--riga .pannello__riga { background: #e6efee; border-radius: 12px; font-size: 1rem; }
.modulo-riga--pannello { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); }
.modulo-riga--pannello.modulo-riga--invertita { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); }
.pannello__titolo {
  margin-bottom: 1rem;
  font-size: var(--t-etichetta);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal-scuro);
}
.pannello--riga .pannello__righe { list-style: none; margin: 0; padding: 0; }
.pannello__icona {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9px;
  background: var(--area, var(--teal-profondo));
  color: var(--area-su, #fff);
}
.pannello__icona svg { color: inherit; }
.pannello--riga .pannello__cifra { margin-top: 1.5rem; flex-wrap: wrap; row-gap: 0.375rem; }
.pannello--riga .pannello__numero { font-size: clamp(2.25rem, 3.6vw, 3rem); letter-spacing: -0.02em; white-space: nowrap; }
.pannello--riga .pannello__nota { max-width: 22ch; }
/* Sul fondo scuro (PMS, fiscale): pannello teal scuro, righe bianche. */
.fondo-scuro .pannello--riga { background: #15545c; box-shadow: none; }
.fondo-scuro .pannello--riga .pannello__titolo { color: #cfe3e5; }
.fondo-scuro .pannello--riga .pannello__riga { background: #fff; }
@media (max-width: 560px) {
  .pannello--riga { padding: 1.5rem 1.25rem; }
  .pannello--riga .pannello__numero { font-size: 2rem; }
}
@media (max-width: 1000px) {
  .modulo-riga--pannello,
  .modulo-riga--pannello.modulo-riga--invertita { grid-template-columns: minmax(0, 1fr); }
  .pannello--riga { justify-self: start; }
}

/* --- Perché: quattro colonne col filetto arancio, su crema --------------- */
.vantaggi-n__lista {
  list-style: none;
  margin: clamp(2rem, 3.5vw, 2.75rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}
.vantaggi-n__lista li { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 1.25rem; border-top: 4px solid var(--sh-arancio); }
.vantaggi-n__nome { font-size: clamp(1.375rem, 0.6vw + 1.1rem, 1.625rem); font-weight: 700; line-height: 1.2; color: var(--teal-profondo); }
.vantaggi-n__testo { font-size: 1rem; line-height: 1.6; color: var(--grigio); }
@media (max-width: 1000px) { .vantaggi-n__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .vantaggi-n__lista { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; } }

/* --- Il resto della piattaforma: card col filetto dell'area -------------- */
.altre-aree__griglia {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: clamp(2rem, 3.5vw, 2.5rem);
}
.area-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.75rem;
  border: 1px solid var(--sh-filetto);
  border-top: 6px solid var(--area, var(--teal-scuro));
  border-radius: 18px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.area-card:hover { transform: translateY(-3px); box-shadow: var(--ombra-2); }
/* La panoramica resta teal anche dentro la pagina di un'altra area. */
.area-card--panoramica { --area: var(--teal-scuro); }
@media (prefers-reduced-motion: reduce) { .area-card:hover { transform: none; } }
.area-card__verbo { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: var(--area, var(--teal-scuro)); }
.area-card__nome { font-family: var(--font-titoli); font-size: clamp(1.625rem, 1vw + 1.2rem, 2rem); font-weight: 700; line-height: 1.15; color: var(--teal-profondo); }
.area-card__lead { font-size: 1rem; line-height: 1.6; color: var(--grigio); }
.area-card__link { margin-top: auto; font-size: 1rem; font-weight: 600; color: var(--teal-scuro); }
@media (max-width: 900px) { .altre-aree__griglia { grid-template-columns: minmax(0, 1fr); } }

/* --- Chiusura su grigio, e il grigio dietro gli angoli del footer -------- */
.chiusura--grigia { min-height: 0; }
.chiusura--grigia::after { display: none; }
.chiusura--grigia .chiusura__testo { font-size: clamp(1.125rem, 0.6vw + 1rem, 1.375rem); max-width: none; color: var(--grigio); }
body:has(.chiusura--grigia) .site-footer { position: relative; }
body:has(.chiusura--grigia) .site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4rem;
  background: var(--sh-grigio);
  z-index: -1;
}

/* ==========================================================================
   Panoramica (/funzionalita), dal mockup di Gaia (8/10/2026)
   ========================================================================== */

/* --- Hero: titolo più grande e il percorso dell'ospite in una card ------- */
@media (min-width: 1001px) {
  .hero--panoramica .hero__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 35rem); gap: clamp(2rem, 4.5vw, 4rem); }
}
.hero--panoramica .hero__titolo { font-size: clamp(2.5rem, 3vw + 1.4rem, 4rem); letter-spacing: -0.022em; }
.hero--panoramica .hero__testo { max-width: none; font-size: clamp(1rem, 0.3vw + 0.95rem, 1.125rem); line-height: 1.65; color: var(--teal-profondo); }
.hero--panoramica .hero__testo p + p { margin-top: 1.5rem; }
.hero-panoramica__nota { color: var(--grigio); }
.nowrap { white-space: nowrap; }

.percorso-card {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
  padding: 2rem 2.125rem 1.75rem;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--sh-ombra);
}
.percorso-card__titolo { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.23em; text-transform: uppercase; color: var(--sh-ruggine); }
/* Due colonne da sei, lette dall'alto in basso. */
.percorso-card__elenco {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: repeat(6, auto);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  column-gap: 1.75rem;
}
.percorso-card__voce { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0.75rem; min-height: 58px; }
.percorso-card__numero {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--area);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}
/* Il filo fra una tappa e la successiva, nella stessa colonna. */
.percorso-card__voce::after {
  content: "";
  position: absolute;
  top: 34px;
  bottom: 4px;
  left: 14px;
  width: 2px;
  background: var(--sh-filetto);
}
.percorso-card__voce:nth-child(6n)::after,
.percorso-card__voce:last-child::after { display: none; }
.percorso-card__nome { padding-top: 5px; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: var(--teal-profondo); }
.percorso-card__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.125rem;
  padding-top: 1rem;
  border-top: 1px solid #e6eceb;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--grigio);
}
.percorso-card__legenda span { display: inline-flex; align-items: center; gap: 6px; }
.percorso-card__legenda span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--area); }
/* Su telefono la card non c'è (Luca, 10/10/2026): in colonna erano dodici
   righe prima del contenuto; il percorso animato resta in home. */
@media (max-width: 760px) {
  .percorso-card { display: none; }
}

/* --- Le tre aree: card col filetto, la schermata in testa ---------------- */
.panoramica #aree .intro { max-width: 52rem; }
.panoramica #aree h2 { font-size: clamp(1.875rem, 2.4vw + 1.1rem, 3.25rem); line-height: 1.1; }
.sintesi-aree {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
}
.sintesi-area {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-top: 6px solid var(--area);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--sh-ombra);
}
.sintesi-area__scena {
  position: relative;
  height: 14.75rem;
  overflow: hidden;
  padding: 1.25rem 0 0 1.25rem;
  background: var(--area-tinta);
}
/* La schermata parte dall'angolo e continua oltre il bordo della card. */
.sintesi-area__scena > .mk { width: 38rem; max-width: none; zoom: 0.6; }
.sintesi-area__corpo { display: flex; flex-direction: column; gap: 0.875rem; flex: 1 1 auto; padding: 1.625rem 1.75rem 1.875rem; }
.sintesi-area__nome { font-size: clamp(1.625rem, 1vw + 1.2rem, 2rem); font-weight: 700; line-height: 1.15; }
.sintesi-area__lead { font-size: 1rem; line-height: 1.6; color: var(--grigio); }
.sintesi-area .area-card__link { margin-top: auto; text-decoration: none; }
/* L'OMS: spunte e testo più scuri del giallo, che sul bianco non si legge. */
.sintesi-area.area-oms { --spunta: #b57a10; }
@media (max-width: 1000px) {
  .sintesi-aree { grid-template-columns: minmax(0, 1fr); max-width: 36rem; margin-inline: auto; }
}

/* Spunte nel colore dell'area. */
.spunte-n { list-style: none; margin: 0; padding: 0.25rem 0 0.375rem; display: grid; gap: 0.375rem; }
.spunte-n li { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.9375rem; line-height: 1.5; color: var(--teal-profondo); }
.spunte-n svg { flex: none; margin-top: 3px; width: 16px; height: 16px; color: var(--spunta, var(--area, var(--teal-scuro))); }
.spunte-n--grandi { gap: 0.5rem; }
.spunte-n--grandi li { font-size: 1rem; }

/* Link "Scopri… →" fuori dalle card d'area. */
a.area-card__link { text-decoration: none; }
a.area-card__link:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* --- Analytics ------------------------------------------------------------- */
.panoramica-bi .riga__titolo { margin-top: 1.25rem; font-size: clamp(2.125rem, 2.4vw + 1.25rem, 3.25rem); font-weight: 700; line-height: 1.1; }
.panoramica-bi .blocco__testo { margin-top: 1.25rem; max-width: none; font-size: clamp(1rem, 0.3vw + 0.95rem, 1.125rem); line-height: 1.65; color: var(--teal-profondo); }
.panoramica-bi .blocco__testo p + p { margin-top: 1.25rem; }
.panoramica-bi .bi__sotto { margin-top: 1.5rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--teal-scuro); }
.panoramica-bi .spunte-n { margin-top: 0.5rem; }
.panoramica-bi .palco { padding: 0; }
@media (min-width: 1001px) {
  .panoramica-bi { grid-template-columns: minmax(0, 1fr) minmax(0, 37.5rem); }
}
.panoramica .assistente { margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.5rem, 3.5vw, 2.75rem); border-radius: 24px; box-shadow: var(--sh-ombra); }
.panoramica .assistente .h3 { font-size: clamp(1.5rem, 1vw + 1.1rem, 2rem); line-height: 1.15; }
.panoramica .assistente__testo > p:not(.pillola, .assistente__nota) { font-size: clamp(1rem, 0.3vw + 0.95rem, 1.125rem); line-height: 1.65; color: var(--grigio); }
.pillola--arancio { background: #fdebd9; color: var(--sh-ruggine); font-size: 0.875rem; }
.pillola--arancio::before,
.pillola--punto::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--sh-arancio); }
.pillola--punto::before { background: var(--area, var(--teal-scuro)); }
.pillola--punto { font-size: 0.875rem; box-shadow: none; }

/* --- H-Flow e come lavora -------------------------------------------------- */
.panoramica-hf { padding-top: 0; }
.panoramica-hf .hflow { border-radius: 28px; background: #e3f4f5; padding: clamp(1.75rem, 3.5vw, 3rem); }
@media (min-width: 901px) {
  .panoramica-hf .hflow { grid-template-columns: minmax(0, 1fr) minmax(0, 35rem); gap: 3rem; }
}
.panoramica-hf .hflow__testo h2 { margin-top: 1.125rem; font-size: clamp(2.125rem, 2.4vw + 1.25rem, 3.25rem); line-height: 1.1; }
.panoramica-hf .hflow__testo p:not(.pillola) { margin-top: 1.125rem; font-size: clamp(1rem, 0.3vw + 0.95rem, 1.125rem); line-height: 1.65; color: var(--teal-profondo); }
.panoramica-hf .hflow__lista li { padding: 1.25rem; border-radius: 16px; font-size: 0.875rem; color: var(--grigio); }
.panoramica-hf .hflow__lista b { font-size: 1rem; margin-bottom: 0.25rem; }
.panoramica-hf .hflow__lista .card__icona { width: 34px; height: 34px; border-radius: 10px; }
.come-lavora__intro { max-width: 60rem; margin-top: clamp(3rem, 6vw, 4rem); }
.come-lavora__intro h2 { font-size: clamp(1.875rem, 2.4vw + 1.1rem, 3.25rem); line-height: 1.1; }
.come-lavora {
  list-style: none;
  margin: clamp(1.75rem, 3vw, 2.25rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
.come-lavora li { display: flex; flex-direction: column; gap: 0.875rem; padding: 1.75rem 1.625rem; border: 1px solid var(--sh-filetto); border-radius: 20px; background: #fff; }
.come-lavora .card__icona { width: 34px; height: 34px; border-radius: 10px; background: var(--area); color: #fff; }
.come-lavora h3 { font-size: 1.375rem; line-height: 1.2; }
.come-lavora p { font-size: 0.9375rem; line-height: 1.6; color: var(--grigio); }
@media (max-width: 1000px) { .come-lavora { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .come-lavora { grid-template-columns: minmax(0, 1fr); } }

/* --- Cloud e assistenza: due card bianche sul crema ----------------------- */
.nuvola {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 23.75rem) 10rem;
  gap: 2.5rem;
  align-items: center;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3.5vw, 3rem);
  border-radius: 28px;
  background: #fff;
}
.nuvola + .nuvola { margin-top: 2rem; }
.nuvola--assistenza { grid-template-columns: minmax(0, 1fr) minmax(0, 35rem); gap: 3.5rem; }
.nuvola__testo { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.nuvola__testo .h3 { font-size: clamp(1.625rem, 1vw + 1.2rem, 2.125rem); line-height: 1.15; }
.nuvola__testo p:not(.etichetta) { font-size: clamp(1rem, 0.3vw + 0.95rem, 1.125rem); line-height: 1.65; color: var(--teal-profondo); }
.nuvola__testo .nuvola__nota { color: var(--grigio); }
.nuvola__righe { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.nuvola__righe li { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border-radius: 12px; background: #e3f0f0; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: var(--teal-profondo); }
.nuvola__righe svg { flex: none; color: var(--teal-scuro); }
.nuvola__cifra { display: flex; flex-direction: column; gap: 0.625rem; }
.nuvola__zero { font-size: 6rem; font-weight: 700; line-height: 0.9; color: var(--teal-profondo); }
.nuvola__cifra span:last-child { font-size: 0.8125rem; font-weight: 600; line-height: 1.5; letter-spacing: 0.15em; text-transform: uppercase; color: var(--teal-scuro); }
.nuvola__dati { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.nuvola__dati li { display: flex; flex-direction: column; gap: 0.375rem; padding-top: 1rem; border-top: 4px solid var(--sh-arancio); }
.nuvola__dati b { font-family: var(--font-titoli); font-size: clamp(2.25rem, 2vw + 1.25rem, 3rem); font-weight: 800; line-height: 1; color: var(--teal-scuro); }
.nuvola__dati b.nuvola__dato-testo { font-size: 1.375rem; font-weight: 700; line-height: 1.2; }
.nuvola__dati span { font-size: 0.9375rem; line-height: 1.4; color: var(--grigio); }
@media (max-width: 1100px) {
  .nuvola { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nuvola__cifra { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 1rem; }
  .nuvola--assistenza { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .nuvola { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .nuvola__zero { font-size: 4.5rem; }
}
@media (max-width: 560px) {
  .nuvola__dati { grid-template-columns: minmax(0, 1fr); }
}

/* Chiusura semplice senza le foglie: non serve l'altezza minima. */
.panoramica .chiusura--semplice { min-height: 0; }
.panoramica .chiusura--semplice .chiusura__testo { font-size: clamp(1.125rem, 0.6vw + 1rem, 1.375rem); max-width: none; color: var(--grigio); }

/* --- Per chi: quattro card col filetto e il motto colorato --------------- */
.profili-n {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
}
.profilo-n {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.875rem 2rem;
  border-top: 6px solid var(--area);
  border-radius: 22px;
  background: #fff;
}
.profilo-n__nome { font-size: clamp(1.5rem, 0.8vw + 1.2rem, 1.875rem); font-weight: 700; line-height: 1.2; }
.profilo-n__motto { font-family: var(--font-titoli); font-size: clamp(2rem, 1.6vw + 1.3rem, 2.75rem); font-weight: 800; line-height: 1.05; color: var(--area); }
.profilo-n__sintesi { font-size: 1rem; line-height: 1.6; color: var(--grigio); }
.profilo-n .spunte-n svg { color: var(--teal-scuro); }
.profilo-n .area-card__link { margin-top: auto; padding-top: 0.75rem; font-weight: 600; color: var(--teal-scuro); }
@media (max-width: 900px) { .profili-n { grid-template-columns: minmax(0, 1fr); } }

/* Revisione mobile (ottobre 2026) ------------------------------------------ */
/* Righe modulo su una colonna: la schermata sale subito dopo titolo e
   sintesi, il corpo del testo va sotto. Prima il mockup arrivava dopo una
   schermata intera di testo. I mockup non hanno elementi focalizzabili:
   l'ordine di tabulazione non cambia. */
@media (max-width: 1000px) {
  .modulo-riga:not(.modulo-riga--pannello) { row-gap: 0; }
  .modulo-riga:not(.modulo-riga--pannello) > .modulo-riga__testo { display: contents; }
  .modulo-riga:not(.modulo-riga--pannello) > .palco { order: 1; margin-top: 1.5rem; }
  .modulo-riga:not(.modulo-riga--pannello) > .modulo-riga__testo > :is(.blocco__testo, .punti-forza, .bi__sotto, .spunte, .spunte-n, .timeline) { order: 2; }
  .modulo-riga:not(.modulo-riga--pannello) > .modulo-riga__testo > .blocco__testo { margin-top: 2.25rem; }
}
/* Panoramica: nelle card delle tre aree le schermate erano una texture da
   4-6 px; più vicine, si legge l'angolo in alto a sinistra. */
@media (max-width: 560px) {
  .sintesi-area__scena > .mk { width: 30rem; zoom: 0.72; }
}

/* ==========================================================================
   Pagine "per chi" dal mockup di Gaia (/hotel-e-villaggi, /property-manager):
   pezzi in comune. <main class="pagina-g">.
   ========================================================================== */
/* L'hero crema si strappa sul grigio della sezione dopo. */
.hero--area + .sezione--tinta::before {
  background: var(--sh-crema);
  -webkit-mask: var(--strappo-sagoma) repeat-x left bottom / auto var(--strappo-h);
          mask: var(--strappo-sagoma) repeat-x left bottom / auto var(--strappo-h);
}
.pagina-g .hero__testo { max-width: none; }

/* Intestazioni centrate più larghe e titoli come nel mockup. */
.pagina-intro { max-width: 56rem; }
.pagina-intro h2 { font-size: clamp(1.875rem, 2.4vw + 1.1rem, 3.25rem); line-height: 1.1; }
.pagina-intro p:not(.etichetta) { max-width: 47.5rem; font-size: clamp(1rem, 0.3vw + 0.95rem, 1.125rem); line-height: 1.65; color: var(--grigio); }
.pagina-intro .pagina-titolo-grande { font-size: clamp(2.25rem, 3vw + 1.2rem, 3.75rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.017em; }

/* --- Righe testo + schermata ---------------------------------------------- */
.pagina-riga .riga__titolo { margin-top: 1.25rem; font-size: clamp(2.125rem, 2.4vw + 1.25rem, 3.25rem); font-weight: 700; line-height: 1.1; }
.pagina-riga .blocco__testo { margin-top: 1.25rem; max-width: none; font-size: clamp(1rem, 0.3vw + 0.95rem, 1.125rem); line-height: 1.65; color: var(--teal-profondo); }
.pagina-riga .blocco__testo p + p { margin-top: 1.25rem; }
.pagina-riga .pagina-tenue { color: var(--grigio); }
.pagina-riga .spunte-n { margin-top: 1.25rem; }
.pagina-riga > .palco { padding: 0; }
.pagina-riga > .palco.coppia { padding: 0 0 clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem); }
@media (min-width: 1001px) {
  .pagina-riga { grid-template-columns: minmax(0, 1fr) minmax(0, 38.75rem); }
  #spiaggia .pagina-riga { grid-template-columns: minmax(0, 1fr) minmax(0, 36rem); }
}

/* Chiusura semplice senza le foglie: non serve l'altezza minima. */
.pagina-g .chiusura--semplice { min-height: 0; }
.pagina-g .chiusura--semplice .chiusura__testo { font-size: clamp(1.125rem, 0.6vw + 1rem, 1.375rem); max-width: none; color: var(--grigio); }
/* Su telefono gli a capo dei titoli lasciavano parole sole ("ha"). */
@media (max-width: 560px) { .pagina-riga .riga__titolo br { display: none; } }

/* --- Riga con etichetta e colonne (Sales Hub, il sito web; 9/10/2026) ---- */
.prodotto-riga .modulo-riga__testo > .etichetta + .riga__titolo { margin-top: 1rem; }
.riga-colonne {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.riga-colonne li { display: flex; flex-direction: column; gap: 0.375rem; padding-top: 0.875rem; border-top: 3px solid var(--sh-arancio); }
.riga-colonne b { font-family: var(--font-titoli); font-size: 1.25rem; font-weight: 700; line-height: 1.2; color: var(--teal-profondo); }
.riga-colonne span { font-size: 0.9375rem; line-height: 1.5; color: var(--grigio); }
@media (max-width: 560px) { .riga-colonne { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }
@media (max-width: 1000px) {
  .modulo-riga:not(.modulo-riga--pannello) > .modulo-riga__testo > .riga-colonne { order: 2; }
}

/* --- Il perché su fondo scuro (OMS, 9/10/2026) ---------------------------- */
.vantaggi-n.fondo-scuro h2 { color: #fff; }
.vantaggi-n.fondo-scuro .testata__etichetta--arancio { color: var(--sh-arancio); }
.vantaggi-n.fondo-scuro .vantaggi-n__nome { color: #fff; }
.vantaggi-n.fondo-scuro .vantaggi-n__testo { color: #cfe3e5; }

/* --- Funzionalità: il sito della struttura, sotto le tre aree ------------ */
.sito-banda {
  display: grid;
  grid-template-columns: minmax(0, 18.75rem) repeat(3, minmax(0, 1fr));
  gap: 2rem;
  align-items: start;
  margin-top: 1.5rem;
  padding: 1.75rem 2rem;
  border: 1px solid var(--sh-filetto);
  border-radius: 24px;
  background: #fff;
}
.sito-banda__testa { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.sito-banda__testa h3 { font-size: 1.75rem; font-weight: 700; line-height: 1.15; }
.sito-banda__testa .area-card__link { margin-top: 0.375rem; font-size: 0.9375rem; }
.sito-banda > div:not(.sito-banda__testa) { display: flex; flex-direction: column; gap: 0.375rem; }
.sito-banda b { font-family: var(--font-titoli); font-size: 1.25rem; font-weight: 700; color: var(--teal-profondo); }
.sito-banda span { font-size: 0.9375rem; line-height: 1.5; color: var(--grigio); }
@media (max-width: 1000px) {
  .sito-banda { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 36rem; margin-inline: auto; }
  .sito-banda__testa { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .sito-banda { grid-template-columns: minmax(0, 1fr); padding: 1.5rem 1.25rem; gap: 1.25rem; } }

/* L'hero crema seguito da una sezione bianca (Eventi, Contatti): la bianca non
   è tinta e non ha lo strappo suo, lo disegna questa regola. */
.pagina-g .hero--area + .sezione:not(.sezione--tinta) { position: relative; }
.pagina-g .hero--area + .sezione:not(.sezione--tinta)::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  z-index: 1;
  height: 30px;
  background: var(--sh-crema);
  -webkit-mask: var(--strappo-sagoma) repeat-x left bottom / auto 30px;
          mask: var(--strappo-sagoma) repeat-x left bottom / auto 30px;
  transform: scaleY(-1);
  pointer-events: none;
}