/* =========================================================================
   STYLE — Struttura e componenti
   -------------------------------------------------------------------------
   Regole di progetto rispettate ovunque:
   · spaziature solo con le variabili --sp-* (griglia 8px)
   · colori solo con le variabili --c-*
   · aree cliccabili mai sotto i 44×44 px (uso da telefono con una mano)
   ========================================================================= */

/* ---------- 1. BASE ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html:focus-within { scroll-padding-top: var(--sp-10); }

body {
  margin: 0;
  font-family: var(--font-testo);
  font-size: var(--fs-base);
  line-height: var(--lh-larga);
  color: var(--c-testo);
  background: var(--c-sfondo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color var(--tempo-medio) var(--curva), color var(--tempo-medio) var(--curva);
}

h1, h2, h3, h4 {
  font-family: var(--font-titoli);
  line-height: var(--lh-stretta);
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-2);
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
p  { margin: 0 0 var(--sp-2); text-wrap: pretty; }
a  { color: inherit; text-decoration: none; }
img, svg, video, iframe { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
address { font-style: normal; }

:focus-visible { outline: 3px solid var(--c-accento); outline-offset: 3px; border-radius: var(--raggio-sm); }
::selection { background: var(--c-accento); color: var(--c-su-accento); }

.salta-al-contenuto {
  position: absolute; left: var(--sp-2); top: calc(-1 * var(--sp-10));
  background: var(--c-brand); color: var(--c-su-brand);
  padding: var(--sp-1) var(--sp-2); border-radius: var(--raggio-sm);
  z-index: var(--z-top); transition: top var(--tempo-veloce);
}
.salta-al-contenuto:focus { top: var(--sp-2); }

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

/* ---------- 2. LAYOUT --------------------------------------------------- */
.contenitore {
  width: 100%; max-width: var(--larghezza-max);
  margin-inline: auto; padding-inline: var(--sp-3);
}
.contenuto-lungo { max-width: 820px; }
.contenuto-stretto { max-width: 620px; text-align: center; }

.sezione { padding-block: var(--sp-12); position: relative; }
.sezione--alt { background: var(--c-sfondo-alt); }
.sezione--compatta { padding-block: var(--sp-8); }
.sezione--centrata { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.sezione__azione { text-align: center; margin-top: var(--sp-6); }

.intestazione-sezione { max-width: 760px; margin: 0 auto var(--sp-8); text-align: center; }
.intestazione-sezione--sinistra { margin-inline: 0; text-align: left; }

.occhiello {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-brand-chiaro);
  background: var(--c-brand-soft);
  padding: var(--sp-1) var(--sp-2); border-radius: var(--raggio-pill);
  margin-bottom: var(--sp-2);
}
.occhiello::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accento); }

.sottotitolo-sezione { font-size: var(--fs-lg); color: var(--c-testo-tenue); margin: 0; }
.introduzione { font-size: var(--fs-lg); color: var(--c-testo-tenue); margin-bottom: var(--sp-4); }

.griglia { display: grid; gap: var(--sp-3); }
.griglia--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.griglia--3 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.griglia--4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

/* ---------- 3. BOTTONI -------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  min-height: 48px;                     /* area cliccabile comoda da telefono */
  padding: var(--sp-1) var(--sp-3);
  border: 2px solid transparent; border-radius: var(--raggio-pill);
  font-family: var(--font-titoli); font-weight: 600; font-size: var(--fs-sm);
  cursor: pointer; text-align: center;
  transition: transform var(--tempo-veloce) var(--curva), box-shadow var(--tempo-veloce) var(--curva),
              background-color var(--tempo-veloce) var(--curva), border-color var(--tempo-veloce) var(--curva);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primario { background: var(--c-accento); color: var(--c-su-accento); box-shadow: 0 4px 16px var(--c-accento-soft); }
.btn--primario:hover { background: var(--c-accento-chiaro); box-shadow: 0 8px 28px var(--c-accento-soft); }

.btn--secondario { background: var(--c-superficie); color: var(--c-testo); border-color: var(--c-bordo); }
.btn--secondario:hover { border-color: var(--c-brand-chiaro); background: var(--c-brand-soft); }

.btn--brand { background: var(--c-brand); color: var(--c-su-brand); }
.btn--chiaro { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.3); }
.btn--chiaro:hover { background: rgba(255,255,255,.24); }

.btn--grande { min-height: 56px; padding-inline: var(--sp-4); font-size: var(--fs-base); }
.btn--blocco { width: 100%; }

.btn-icona {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--c-bordo); border-radius: 50%;
  background: var(--c-superficie); cursor: pointer;
  transition: background-color var(--tempo-veloce), border-color var(--tempo-veloce), transform var(--tempo-veloce);
}
.btn-icona:hover { background: var(--c-brand-soft); border-color: var(--c-brand-chiaro); transform: translateY(-1px); }
.btn-icona svg { width: 20px; height: 20px; }

/* ---------- 4. HEADER --------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: color-mix(in srgb, var(--c-sfondo) 84%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--tempo-medio), box-shadow var(--tempo-medio), background-color var(--tempo-medio);
}
.header.is-scrolled {
  border-bottom-color: var(--c-bordo);
  box-shadow: var(--ombra-sm);
  background: color-mix(in srgb, var(--c-sfondo) 95%, transparent);
}
.header__inner { display: flex; align-items: center; gap: var(--sp-3); min-height: 76px; }

.logo { display: flex; align-items: center; gap: var(--sp-1); margin-right: auto; }
/* 52px invece di 40: a 40 il marchio con la scritta accanto diventava
   illeggibile, soprattutto quelli su due righe. Nel footer ancora un
   po' piu' grande, perche' li' lo spazio c'e' e fa da firma. */
.logo img { height: 52px; width: auto; }
.footer .logo img { height: 60px; }
.logo__segno {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: 11px; background: linear-gradient(135deg, var(--c-accento), var(--c-accento-chiaro));
  color: var(--c-su-accento);
}
.logo__segno svg { width: 24px; height: 24px; }
.logo__testo {
  font-family: var(--font-titoli); font-weight: 700; font-size: var(--fs-lg);
  letter-spacing: -0.02em; line-height: 1.1; color: var(--c-testo);
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav__link {
  padding: var(--sp-1) var(--sp-2); border-radius: var(--raggio-pill);
  font-size: var(--fs-sm); font-weight: 500; color: var(--c-testo-tenue);
  transition: color var(--tempo-veloce), background-color var(--tempo-veloce);
}
.nav__link:hover { color: var(--c-testo); background: var(--c-brand-soft); }
.nav__link.is-active { color: var(--c-brand-chiaro); font-weight: 700; background: var(--c-brand-soft); }

.header__azioni { display: flex; align-items: center; gap: var(--sp-1); }
.header__telefono {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-weight: 700; font-size: var(--fs-sm); white-space: nowrap;
  padding: var(--sp-1) var(--sp-2); border-radius: var(--raggio-pill);
  transition: background-color var(--tempo-veloce);
}
.header__telefono svg { width: 18px; height: 18px; color: var(--c-eco); }
.header__telefono:hover { background: var(--c-eco-soft); }

.hamburger { display: none; }

.menu-mobile {
  position: fixed; inset: 76px 0 0; z-index: var(--z-menu);
  background: var(--c-sfondo); padding: var(--sp-3) var(--sp-3) var(--sp-12);
  transform: translateX(100%); transition: transform var(--tempo-medio) var(--curva);
  overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
}
.menu-mobile.is-open { transform: translateX(0); }
.menu-mobile a {
  display: flex; align-items: center; min-height: 56px; padding: var(--sp-1) var(--sp-2);
  border-radius: var(--raggio-sm); border-bottom: 1px solid var(--c-bordo);
  font-family: var(--font-titoli); font-size: var(--fs-lg); font-weight: 600;
}
.menu-mobile a[aria-current="page"] { color: var(--c-brand-chiaro); }
.menu-mobile .btn { margin-top: var(--sp-3); border-bottom: none; }
.menu-mobile__contatti {
  margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--c-bordo);
  display: grid; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--c-testo-tenue);
}
.menu-mobile__contatti a { border: 0; min-height: 44px; font-size: var(--fs-base); padding: 0; }

/* ---------- 5. BRICIOLE ------------------------------------------------- */
.briciole { border-bottom: 1px solid var(--c-bordo); background: var(--c-sfondo-alt); }
.briciole ol { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center;
  padding-block: var(--sp-1); font-size: var(--fs-xs); color: var(--c-testo-tenue); }
.briciole li + li::before { content: "›"; margin-right: var(--sp-1); opacity: .6; }
.briciole a { color: var(--c-brand-chiaro); }
.briciole a:hover { text-decoration: underline; }

/* ---------- 6. HERO ----------------------------------------------------- */
.hero {
  position: relative; min-height: min(88vh, 860px);
  display: flex; align-items: center;
  padding-block: var(--sp-10);
  overflow: hidden; background: var(--c-brand-scuro); color: #fff; isolation: isolate;
}
.hero__sfondo { position: absolute; inset: 0; z-index: -2; }
.hero__sfondo img { width: 100%; height: 100%; object-fit: cover; }
/* IL VELO SOPRA LA FOTO DELLA PRIMA SCHERMATA.
   Serve a far leggere il titolo bianco su qualunque immagine. Ma l'ultimo
   livello era fatto di due colori PIENI:

     linear-gradient(160deg, var(--c-brand-scuro), color-mix(...))

   cioe' opaco al 100%. Copriva tutto: la foto veniva scaricata e poi
   nascosta, su ogni sito generato da questo template. Nessuno se ne
   accorgeva perche' il risultato — un fondo sfumato nei colori del
   marchio — sembra una scelta grafica, non un difetto.

   Adesso quel livello e' semitrasparente: la foto si vede, e il titolo
   resta leggibile perche' il velo copre comunque il 62-78%. Senza foto
   il fondo resta pieno, grazie al colore di .hero.                    */
.hero__velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(1000px 600px at 78% 18%, color-mix(in srgb, var(--c-accento) 26%, transparent), transparent 62%),
    radial-gradient(800px 500px at 12% 82%, color-mix(in srgb, var(--c-brand-chiaro) 30%, transparent), transparent 60%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--c-brand-scuro) 78%, transparent) 8%,
      color-mix(in srgb, color-mix(in srgb, var(--c-brand) 88%, #000) 62%, transparent) 100%);
}

/* Senza foto il velo semitrasparente lascerebbe vedere il fondo della
   sezione: li' il colore pieno lo mette .hero, quindi non cambia nulla.
   Con la foto, un filo di scurimento in piu' sotto il testo.          */
.hero__sfondo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg,
    color-mix(in srgb, var(--c-brand-scuro) 62%, transparent) 0%,
    color-mix(in srgb, var(--c-brand-scuro) 18%, transparent) 62%,
    transparent 100%);
}
.hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-6); align-items: center; width: 100%; }

.hero__badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.1);
  border-radius: var(--raggio-pill);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; margin-bottom: var(--sp-2);
}
.hero__badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-accento); box-shadow: 0 0 0 0 var(--c-accento); animation: pulsazione 2.4s infinite;
}

.hero h1 { color: #fff; margin-bottom: var(--sp-2); white-space: pre-line; }
.hero h1 .evidenza {
  background: linear-gradient(120deg, var(--c-accento), var(--c-accento-chiaro));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sottotitolo { font-size: var(--fs-lg); color: rgba(255,255,255,.84); max-width: 56ch; margin-bottom: var(--sp-3); }
.hero__azioni { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.hero__rassicurazioni {
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3);
  margin-top: var(--sp-2); font-size: var(--fs-sm); color: rgba(255,255,255,.76);
}
.hero__rassicurazioni li { display: flex; align-items: center; gap: 6px; }
.hero__rassicurazioni svg { width: 16px; height: 16px; color: #7CE0AE; flex: none; }

/* Contatti visibili senza scorrere — è il punto n.1 della presentazione */
.hero__contatti-rapidi { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.contatto-rapido {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 56px; padding: var(--sp-1) var(--sp-3);
  border: 1px solid rgba(255,255,255,.24); border-radius: var(--raggio);
  background: rgba(255,255,255,.08);
  transition: background-color var(--tempo-veloce), transform var(--tempo-veloce), border-color var(--tempo-veloce);
}
.contatto-rapido:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); border-color: rgba(255,255,255,.4); }
.contatto-rapido svg { width: 22px; height: 22px; flex: none; color: var(--c-accento); }
.contatto-rapido small { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.contatto-rapido strong { font-family: var(--font-titoli); font-size: var(--fs-base); }
.contatto-rapido--wa svg { color: #7CE0AE; }

.hero__numeri {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-3);
  border-top: 1px solid rgba(255,255,255,.16);
}
.numero__valore { font-family: var(--font-titoli); font-size: var(--fs-2xl); font-weight: 700; line-height: 1; color: var(--c-accento-chiaro); }
.numero__etichetta { font-size: var(--fs-xs); color: rgba(255,255,255,.7); margin-top: 4px; line-height: 1.4; }

.hero__scena { position: relative; aspect-ratio: 1 / 1; }
.hero__scena svg, .hero__scena canvas { width: 100%; height: 100%; overflow: visible; }

/* ---------- SEGNAPOSTO: «qui manca una foto» -----------------------------
   Deve leggersi come un promemoria di lavorazione, non come grafica.
   Bordo tratteggiato, nessun colore del marchio, nessuna decorazione.
   `node strumenti/verifica.js` blocca la consegna finché ce n'è uno.     */
.segnaposto {
  width: 100%; height: 100%; min-height: 200px;
  display: grid; place-content: center; justify-items: center; gap: 6px;
  padding: var(--sp-3); text-align: center;
  border: 2px dashed currentColor; border-radius: var(--raggio);
  background: color-mix(in srgb, currentColor 6%, transparent);
  color: var(--c-testo-tenue);
}
.segnaposto__segno { opacity: .5; }
.segnaposto__segno svg { width: 34px; height: 34px; }
.segnaposto__titolo {
  font-family: var(--font-titoli); font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.segnaposto__cosa { font-size: var(--fs-sm); max-width: 30ch; line-height: 1.4; }
.segnaposto__dove {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: var(--fs-xs); opacity: .8;
  padding: 4px var(--sp-1); border-radius: var(--raggio-sm);
  background: color-mix(in srgb, currentColor 10%, transparent);
  overflow-wrap: anywhere;
}

/* Sopra i fondi scuri della prima schermata serve il testo chiaro */
.hero .segnaposto, .chi-siamo__media .segnaposto { color: rgba(255,255,255,.72); }
.hero__scena .segnaposto { aspect-ratio: 1 / 1; }
.lavoro__media .segnaposto { border-radius: 0; border-width: 0 0 2px 0; color: rgba(255,255,255,.8); }

/* Hero delle pagine interne */
.hero-pagina {
  background: linear-gradient(150deg, var(--c-brand-scuro), var(--c-brand) 92%);
  color: #fff; padding-block: var(--sp-10) var(--sp-8); position: relative; overflow: hidden;
}
.hero-pagina::before {
  content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-accento) 40%, transparent), transparent 66%);
  top: -220px; right: -140px; pointer-events: none;
}
.hero-pagina .contenitore { position: relative; }
.hero-pagina h1 { color: #fff; font-size: var(--fs-3xl); }
.hero-pagina .occhiello { background: rgba(255,255,255,.14); color: #fff; }
.hero-pagina__sottotitolo { font-size: var(--fs-lg); color: rgba(255,255,255,.84); max-width: 68ch; }
.hero-pagina__azioni { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.hero-pagina__prezzo { margin-top: var(--sp-2); font-family: var(--font-titoli); font-weight: 700; color: var(--c-accento-chiaro); }

/* ---------- 7. BARRA CERTIFICAZIONI ------------------------------------- */
.barra-fiducia {
  border-block: 1px solid var(--c-bordo); background: var(--c-sfondo-alt);
  padding-block: var(--sp-2); overflow: hidden;
}
.barra-fiducia__pista { display: flex; gap: var(--sp-6); width: max-content; animation: scorrimento 40s linear infinite; }
.barra-fiducia:hover .barra-fiducia__pista { animation-play-state: paused; }
.barra-fiducia__voce {
  display: flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-testo-tenue); white-space: nowrap;
}
.barra-fiducia__voce svg { width: 18px; height: 18px; color: var(--c-eco); flex: none; }

/* ---------- 8. CARD ----------------------------------------------------- */
.card {
  background: var(--c-superficie); border: var(--bordo-sp) solid var(--c-bordo);
  border-radius: var(--raggio); padding: var(--sp-3);
  height: 100%; display: flex; flex-direction: column;
  transition: transform var(--tempo-medio) var(--curva), box-shadow var(--tempo-medio) var(--curva), border-color var(--tempo-medio) var(--curva);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--ombra-md); border-color: color-mix(in srgb, var(--c-brand-chiaro) 40%, var(--c-bordo)); }
.card--evidenza { border-color: var(--c-accento); box-shadow: 0 0 0 1px var(--c-accento-soft), var(--ombra-sm); position: relative; }
.card--evidenza::after {
  content: var(--etichetta-evidenza, "Più richiesto"); position: absolute; top: var(--sp-2); right: var(--sp-2);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--c-accento); color: var(--c-su-accento); padding: 4px var(--sp-1); border-radius: var(--raggio-pill);
}
.card__icona {
  width: 56px; height: 56px; flex: none; display: grid; place-items: center;
  border-radius: 14px; margin-bottom: var(--sp-2); background: var(--c-brand-soft); color: var(--c-brand-chiaro);
}
.card__icona svg { width: 28px; height: 28px; }
.card h3 { margin-bottom: 4px; }
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--raggio); }
.card { position: relative; }
.card__sottotitolo { font-size: var(--fs-sm); font-weight: 600; color: var(--c-brand-chiaro); margin-bottom: var(--sp-1); }
.card__testo { color: var(--c-testo-tenue); font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.card__punti { display: grid; gap: 6px; margin-bottom: var(--sp-2); }
.card__punti li { display: flex; gap: var(--sp-1); align-items: flex-start; font-size: var(--fs-sm); color: var(--c-testo-tenue); }
.card__punti li::before { content: "✓"; color: var(--c-eco); font-weight: 700; flex: none; }
.card__punti li svg { display: none; }
.card__prezzo { margin-top: auto; font-family: var(--font-titoli); font-weight: 700; font-size: var(--fs-sm); color: var(--c-testo); }
.card__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-2); font-weight: 700; font-size: var(--fs-sm); color: var(--c-brand-chiaro); }
.card__cta svg { width: 16px; height: 16px; transition: transform var(--tempo-veloce); }
.card:hover .card__cta svg { transform: translateX(4px); }

/* ---------- 9. PROBLEMI ------------------------------------------------- */
.griglia-problemi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--sp-2); }
.problema {
  background: var(--c-superficie); border: 1px solid var(--c-bordo);
  border-left: 4px solid var(--c-accento); border-radius: var(--raggio-sm);
  padding: var(--sp-3); transition: transform var(--tempo-veloce), box-shadow var(--tempo-veloce);
}
.problema:hover { transform: translateX(4px); box-shadow: var(--ombra-sm); }
.problema__titolo { font-size: var(--fs-base); font-weight: 700; margin-bottom: var(--sp-1); }
.problema__soluzione { font-size: var(--fs-sm); color: var(--c-testo-tenue); margin: 0; }
.problema__link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-2); font-size: var(--fs-sm); font-weight: 700; color: var(--c-brand-chiaro); }
.problema__link svg { width: 15px; height: 15px; }

/* ---------- 10. CHI SIAMO ----------------------------------------------- */
.chi-siamo__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: center; }
.chi-siamo__media {
  border-radius: var(--raggio); overflow: hidden; aspect-ratio: var(--media-proporzione, 4 / 3);
  background: linear-gradient(140deg, var(--c-brand), var(--c-brand-chiaro)); box-shadow: var(--ombra-lg);
}
.chi-siamo__media img { width: 100%; height: 100%; object-fit: cover; }
.chi-siamo__media .hero__scena { aspect-ratio: auto; height: 100%; }
.chi-siamo__punti { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.chi-siamo__punti li { display: flex; gap: var(--sp-2); align-items: flex-start; }
.chi-siamo__punti li::before {
  content: "✓"; flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%; background: var(--c-eco-soft); color: var(--c-eco);
  font-size: 13px; font-weight: 700; margin-top: 2px;
}

.persona { text-align: center; padding: var(--sp-3); border: 1px solid var(--c-bordo); border-radius: var(--raggio); background: var(--c-superficie); }
.persona__foto {
  width: 88px; height: 88px; margin: 0 auto var(--sp-2); border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: var(--c-brand); color: var(--c-su-brand);
  font-family: var(--font-titoli); font-size: var(--fs-2xl); font-weight: 700;
}
.persona__foto img { width: 100%; height: 100%; object-fit: cover; }
.persona h3 { margin-bottom: 2px; }
.persona__ruolo { font-size: var(--fs-sm); font-weight: 600; color: var(--c-brand-chiaro); margin-bottom: var(--sp-1); }
.persona__nota { font-size: var(--fs-sm); color: var(--c-testo-tenue); margin: 0; }

/* ---------- 11. PROCESSO ------------------------------------------------ */
.processo { display: grid; gap: 0; counter-reset: passo; max-width: 860px; margin-inline: auto; }
.passo { display: grid; grid-template-columns: 72px 1fr; gap: var(--sp-3); padding: var(--sp-2) 0; position: relative; }
.passo::before {
  counter-increment: passo; content: counter(passo, decimal-leading-zero);
  width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--font-titoli); font-weight: 700; font-size: var(--fs-lg);
  background: var(--c-brand-soft); color: var(--c-brand-chiaro); border: 2px solid var(--c-bordo);
  transition: background-color var(--tempo-medio), color var(--tempo-medio), border-color var(--tempo-medio);
}
.passo:hover::before { background: var(--c-accento); color: var(--c-su-accento); border-color: var(--c-accento); }
.passo:not(:last-child)::after {
  content: ""; position: absolute; left: 31px; top: 80px; bottom: 0;
  width: 2px; background: linear-gradient(var(--c-bordo), transparent);
}
/* La pastiglia con il tempo ("IN SETTIMANA", "DURANTE IL SOPRALLUOGO").
   Aveva 4px di imbottitura e nessun allineamento: su due righe il testo
   toccava i bordi e restava appoggiato a sinistra dentro una forma
   arrotondata, che si nota subito perche' sembra storto.

   Il padding a destra tiene conto della spaziatura fra le lettere:
   letter-spacing la aggiunge anche DOPO l'ultima, quindi senza
   compensare la pastiglia risulta piu' vuota a destra che a sinistra. */
.passo__durata {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-eco); background: var(--c-eco-soft);
  padding: 7px var(--sp-2) 7px calc(var(--sp-2) + .06em);
  border-radius: var(--raggio-pill); margin-bottom: var(--sp-1);
  text-align: center; line-height: 1.35; text-wrap: balance;
}
.passo h3 { font-size: var(--fs-lg); }
.passo__testo { color: var(--c-testo-tenue); margin: 0; font-size: var(--fs-sm); }

/* ---------- 12. PREVENTIVATORE ------------------------------------------ */
.calcolatore { display: grid; grid-template-columns: minmax(min(320px, 100%), 400px) 1fr; gap: var(--sp-3); align-items: start; }
.calcolatore__form, .calcolatore__risultati {
  background: var(--c-superficie); border: 1px solid var(--c-bordo);
  border-radius: var(--raggio); padding: var(--sp-3);
}
.calcolatore__risultati { background: linear-gradient(150deg, var(--c-brand-scuro), var(--c-brand)); border-color: transparent; color: #fff; }

.campo { margin-bottom: var(--sp-3); }
.campo--ultimo { margin-bottom: 0; }
.campo__label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--sp-1); }
.campo__valore { font-family: var(--font-titoli); font-size: var(--fs-lg); font-weight: 700; color: var(--c-brand-chiaro); white-space: nowrap; }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: var(--raggio-pill); background: var(--c-bordo); cursor: pointer; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-accento); border: 3px solid var(--c-superficie); box-shadow: var(--ombra-sm); cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--c-superficie);
  background: var(--c-accento); box-shadow: var(--ombra-sm); cursor: grab;
}

.gruppo-scelte { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-1); }
.scelta { position: relative; }
.scelta input { position: absolute; opacity: 0; pointer-events: none; }
.scelta span {
  display: grid; place-items: center; min-height: 52px; text-align: center;
  padding: var(--sp-1); border: 2px solid var(--c-bordo); border-radius: var(--raggio-sm);
  font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  transition: border-color var(--tempo-veloce), background-color var(--tempo-veloce);
}
.scelta input:checked + span { border-color: var(--c-accento); background: var(--c-accento-soft); }
.scelta input:focus-visible + span { outline: 3px solid var(--c-accento); outline-offset: 2px; }

.risultato-principale { text-align: center; padding-bottom: var(--sp-2); margin-bottom: var(--sp-2); border-bottom: 1px solid rgba(255,255,255,.16); }
.risultato-principale__etichetta { font-size: var(--fs-sm); color: rgba(255,255,255,.72); }
.risultato-principale__valore { font-family: var(--font-titoli); font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 700; line-height: 1; color: var(--c-accento-chiaro); margin: 4px 0; }
.risultato-principale__nota { font-size: var(--fs-xs); color: rgba(255,255,255,.62); }

.griglia-risultati { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-1); }
.risultato { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: var(--raggio-sm); padding: var(--sp-2); }
.risultato__etichetta { font-size: var(--fs-xs); color: rgba(255,255,255,.66); line-height: 1.4; }
.risultato__valore { font-family: var(--font-titoli); font-size: var(--fs-lg); font-weight: 700; margin-top: 4px; color: #fff; }
.risultato__nota { opacity: .8; }

.calcolatore__cta { margin-top: var(--sp-3); }
.calcolatore__nota-cta { font-size: var(--fs-xs); color: rgba(255,255,255,.7); text-align: center; margin-top: var(--sp-1); }
.disclaimer { font-size: var(--fs-xs); color: var(--c-testo-tenue); margin-top: var(--sp-2); line-height: 1.5; }
.calcolatore__risultati .disclaimer { color: rgba(255,255,255,.55); }

/* ---------- 12b. MENU (profilo "locale") ---------------------------------
   Prezzi allineati a destra con i puntini, come su una carta stampata:
   si legge in diagonale, che è come si legge un menu.                    */
.menu-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: var(--sp-6) var(--sp-8); }
.menu-categoria__nome {
  font-size: var(--fs-lg); padding-bottom: var(--sp-1); margin-bottom: var(--sp-2);
  border-bottom: 2px solid var(--c-accento);
  text-transform: uppercase; letter-spacing: .08em;
}
.menu-categoria__testo { font-size: var(--fs-sm); color: var(--c-testo-tenue); margin-top: -8px; margin-bottom: var(--sp-2); }
.menu-piatti { display: grid; gap: var(--sp-3); }
.piatto__riga { display: flex; align-items: baseline; gap: var(--sp-1); }
.piatto__nome { font-size: var(--fs-base); margin: 0; flex: none; max-width: 80%; }
.piatto__punti { flex: 1; border-bottom: 1px dotted var(--c-bordo); transform: translateY(-4px); }
.piatto__prezzo { font-family: var(--font-titoli); font-weight: 700; font-size: var(--fs-base); flex: none; }
.piatto__descrizione { font-size: var(--fs-sm); color: var(--c-testo-tenue); margin: 4px 0 0; }
.piatto__nota {
  display: inline-block; margin-top: 4px; font-size: var(--fs-xs);
  color: var(--c-eco); background: var(--c-eco-soft);
  padding: 2px var(--sp-1); border-radius: var(--raggio-pill);
}
.piatto--evidenza .piatto__nome::after {
  content: "★"; color: var(--c-accento); margin-left: 6px; font-size: .85em;
}
.menu-fissi { margin-bottom: var(--sp-8); }
.menu-fisso {
  background: var(--c-superficie); border: var(--bordo-sp) solid var(--c-bordo);
  border-radius: var(--raggio); padding: var(--sp-3);
}
.menu-fisso__testa { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.menu-fisso__testa h3 { margin: 0; font-size: var(--fs-lg); }
.menu-fisso__prezzo { font-family: var(--font-titoli); font-weight: 700; font-size: var(--fs-xl); color: var(--c-accento); }
.menu-fisso__quando { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--c-eco); margin: var(--sp-1) 0 4px; }
.menu-fisso__quando svg { width: 16px; height: 16px; flex: none; }
.menu-fisso__comprende { font-size: var(--fs-sm); color: var(--c-testo-tenue); margin: 0; }
.menu-nota {
  max-width: 760px; margin: var(--sp-6) auto 0; text-align: center;
  font-size: var(--fs-sm); color: var(--c-testo-tenue);
}
.menu-cta__nota { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--c-testo-tenue); }

/* ---------- 12c. FASCIA ORARI E POSIZIONE --------------------------------
   Per chi si visita di persona la domanda numero uno è "adesso siete
   aperti?". Questa fascia risponde senza far scorrere la pagina.        */
.orari-fascia { background: var(--c-sfondo-alt); border-block: 1px solid var(--c-bordo); padding-block: var(--sp-4); }
.orari-fascia__inner { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--sp-4); align-items: center; }
.orari-fascia__blocco { display: flex; gap: var(--sp-2); align-items: flex-start; }
.orari-fascia__icona {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border-radius: var(--raggio-sm); background: var(--c-brand-soft); color: var(--c-brand-chiaro);
}
.orari-fascia__icona svg { width: 22px; height: 22px; }
.orari-fascia__titolo {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--c-testo-tenue); margin: 0 0 4px;
}
.orari-fascia__elenco { display: grid; gap: 2px; font-size: var(--fs-sm); }
.orari-fascia__riga { display: flex; gap: var(--sp-2); justify-content: space-between; max-width: 300px; }
.orari-fascia__giorni { color: var(--c-testo-tenue); }
.orari-fascia__ore { font-weight: 600; white-space: nowrap; }
.orari-fascia__indirizzo { font-size: var(--fs-sm); margin: 0; font-weight: 600; }
.orari-fascia__nota { font-size: var(--fs-xs); color: var(--c-testo-tenue); margin: var(--sp-1) 0 0; }
.orari-fascia__link { display: inline-block; margin-top: 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--c-brand-chiaro); }
.orari-fascia__link:hover { text-decoration: underline; }
.orari-fascia__azioni { display: grid; gap: var(--sp-1); }

@media (max-width: 960px) {
  .orari-fascia__inner { grid-template-columns: 1fr; gap: var(--sp-3); }
  .orari-fascia__azioni { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .orari-fascia__azioni { grid-template-columns: 1fr; }
  .menu-griglia { grid-template-columns: 1fr; }
}

/* ---------- 13. INCENTIVI ----------------------------------------------- */
.incentivo__valore { font-family: var(--font-titoli); font-size: var(--fs-3xl); font-weight: 700; line-height: 1; color: var(--c-accento); margin-bottom: var(--sp-1); }
.incentivo--evidenza { background: linear-gradient(150deg, var(--c-brand-scuro), var(--c-brand)); border-color: transparent; color: #fff; }
.incentivo--evidenza .card__testo, .incentivo--evidenza .card__punti li { color: rgba(255,255,255,.78); }
.incentivo--evidenza .incentivo__valore { color: var(--c-accento-chiaro); }
.nota-incentivi {
  margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3);
  border-left: 4px solid var(--c-accento); background: var(--c-accento-soft);
  border-radius: var(--raggio-sm); font-size: var(--fs-sm); color: var(--c-testo-tenue);
}

/* ---------- 14. LAVORI --------------------------------------------------- */
.filtri { display: flex; flex-wrap: wrap; gap: var(--sp-1); justify-content: center; margin-bottom: var(--sp-4); }
.filtro {
  min-height: 44px; padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--c-bordo); border-radius: var(--raggio-pill);
  background: var(--c-superficie); cursor: pointer;
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-testo-tenue);
  transition: border-color var(--tempo-veloce), color var(--tempo-veloce), background-color var(--tempo-veloce);
}
.filtro:hover { border-color: var(--c-brand-chiaro); color: var(--c-testo); }
.filtro.is-active { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-su-brand); }

.lavoro {
  border-radius: var(--raggio); overflow: hidden; border: var(--bordo-sp) solid var(--c-bordo);
  background: var(--c-superficie); display: flex; flex-direction: column;
  transition: transform var(--tempo-medio) var(--curva), box-shadow var(--tempo-medio) var(--curva);
}
.lavoro:hover { transform: translateY(-6px); box-shadow: var(--ombra-md); }
.lavoro.is-hidden { display: none; }
.lavoro__media { aspect-ratio: 16 / 10; position: relative; overflow: hidden; background: linear-gradient(140deg, var(--c-brand), var(--c-brand-chiaro)); }
.lavoro__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--tempo-lento) var(--curva); }
.lavoro:hover .lavoro__media img { transform: scale(1.06); }
.lavoro__media svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lavoro__tag {
  position: absolute; top: var(--sp-1); left: var(--sp-1);
  background: rgba(0,0,0,.6); color: #fff; backdrop-filter: blur(8px);
  padding: 4px var(--sp-1); border-radius: var(--raggio-pill);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.lavoro__corpo { padding: var(--sp-3); display: flex; flex-direction: column; flex: 1; }
.lavoro__luogo { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--c-testo-tenue); letter-spacing: .04em; text-transform: uppercase; }
.lavoro__luogo svg { width: 14px; height: 14px; }
.lavoro__corpo h3 { font-size: var(--fs-lg); margin: 4px 0 var(--sp-1); }
.lavoro__descrizione { font-size: var(--fs-sm); color: var(--c-testo-tenue); }
.lavoro__dettaglio { font-size: var(--fs-sm); color: var(--c-testo-tenue); padding-top: var(--sp-1); border-top: 1px dashed var(--c-bordo); }
.lavoro__durata { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--c-eco); }
.lavoro__durata svg { width: 15px; height: 15px; }
.lavoro__dati { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-1); margin-top: auto; padding-top: var(--sp-2); border-top: 1px solid var(--c-bordo); }
.lavoro__dato-etichetta { font-size: 11px; color: var(--c-testo-tenue); text-transform: uppercase; letter-spacing: .04em; }
.lavoro__dato-valore { font-family: var(--font-titoli); font-weight: 700; font-size: var(--fs-sm); }

/* ---------- 15. RECENSIONI + GOOGLE -------------------------------------- */
.google-riepilogo {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; justify-content: center;
  max-width: 720px; margin: 0 auto var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-superficie); border: 1px solid var(--c-bordo);
  border-radius: var(--raggio); box-shadow: var(--ombra-sm);
}
.google-riepilogo__logo svg { width: 32px; height: 32px; }
.google-riepilogo__riga { display: flex; align-items: center; gap: var(--sp-1); }
.google-riepilogo__voto { font-family: var(--font-titoli); font-size: var(--fs-xl); font-weight: 700; }
.google-riepilogo__nota { font-size: var(--fs-xs); color: var(--c-testo-tenue); margin: 0; }

.stelle { display: inline-flex; gap: 2px; color: var(--c-accento); }
.stelle svg { width: 17px; height: 17px; }

.carosello {
  /* 85vw invece di 300px fissi: su un telefono stretto la scheda entra
     tutta con lo spiraglio della successiva, che e' il segnale che dice
     "si scorre". A 300px fissi sbordava e si vedeva mozzata.        */
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(300px, 85vw), 380px);
  gap: var(--sp-2); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-2); scrollbar-width: thin;
}
.carosello > * { scroll-snap-align: start; }
.carosello::-webkit-scrollbar { height: 8px; }
.carosello::-webkit-scrollbar-thumb { background: var(--c-bordo); border-radius: var(--raggio-pill); }

.recensione { margin: 0; }
.recensione__testa { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1); }
.recensione__data { font-size: var(--fs-xs); color: var(--c-testo-tenue); }
.recensione__testo { font-size: var(--fs-sm); color: var(--c-testo); margin: var(--sp-2) 0 var(--sp-3); }

/* Recensioni lunghe: accorciate a nove righe, con "Leggi di piu'".
   Nel carosello ogni scheda prende l'altezza della piu' alta, quindi
   una recensione molto lunga lascia il vuoto sotto tutte le altre.
   Il testo nell'HTML resta INTERO: qui si nasconde solo la parte in
   piu', cosi' motori e screen reader continuano a leggerlo tutto.   */
.recensione__testo--lunga {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9;
  overflow: hidden;
}
.recensione.is-aperta .recensione__testo--lunga {
  -webkit-line-clamp: unset; overflow: visible;
}
.recensione__altro {
  /* min-height 44px: e' la misura minima di un'area da toccare col dito.
     Un link di testo alto 20px si sbaglia a premere sul telefono, e la
     prova del sito lo segnala.                                       */
  align-self: flex-start; min-height: 44px;
  display: inline-flex; align-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); font-weight: 600;
  color: var(--c-brand-chiaro); text-decoration: underline;
  text-underline-offset: 3px;
}
.recensione__altro:hover { text-decoration-thickness: 2px; }
.recensione__altro:focus-visible { outline: 2px solid var(--c-accento); outline-offset: 3px; border-radius: 2px; }
.recensione__autore { display: flex; align-items: center; gap: var(--sp-2); margin-top: auto; }
.recensione__avatar {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: var(--c-brand); color: var(--c-su-brand);
  font-family: var(--font-titoli); font-weight: 700;
}
.recensione__avatar img { width: 100%; height: 100%; object-fit: cover; }
.recensione__nome { font-weight: 700; font-size: var(--fs-sm); }
.recensione__ruolo { font-size: var(--fs-xs); color: var(--c-testo-tenue); }
.carosello-comandi { display: flex; gap: var(--sp-1); justify-content: center; margin-top: var(--sp-2); }

/* ---------- 16. ZONE ----------------------------------------------------- */
.zone-pagine { margin-bottom: var(--sp-4); }
.zona-card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-2);
  min-height: 72px; padding: var(--sp-2) var(--sp-3);
  background: var(--c-superficie); border: 1px solid var(--c-bordo); border-radius: var(--raggio);
  transition: transform var(--tempo-veloce), border-color var(--tempo-veloce), box-shadow var(--tempo-veloce);
}
.zona-card:hover { transform: translateY(-3px); border-color: var(--c-brand-chiaro); box-shadow: var(--ombra-sm); }
.zona-card__icona { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--c-brand-soft); color: var(--c-brand-chiaro); }
.zona-card__icona svg { width: 20px; height: 20px; }
.zona-card__citta { grid-column: 2; font-family: var(--font-titoli); font-weight: 700; font-size: var(--fs-base); }
.zona-card__servizio { grid-column: 2; grid-row: 2; font-size: var(--fs-xs); color: var(--c-testo-tenue); }
.zona-card__freccia { grid-column: 3; grid-row: 1 / span 2; color: var(--c-brand-chiaro); }
.zona-card__freccia svg { width: 20px; height: 20px; }

.comuni { background: var(--c-superficie); border: 1px solid var(--c-bordo); border-radius: var(--raggio); padding: var(--sp-3); }
.comuni__titolo { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .1em; color: var(--c-testo-tenue); margin-bottom: var(--sp-2); }
.comuni__elenco { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.comuni__elenco li {
  padding: 6px var(--sp-2); border-radius: var(--raggio-pill);
  background: var(--c-brand-soft); color: var(--c-testo); font-size: var(--fs-sm); font-weight: 500;
}
.comuni__nota { font-size: var(--fs-sm); color: var(--c-testo-tenue); margin: var(--sp-2) 0 0; }

/* ---------- 17. FAQ ------------------------------------------------------ */
.faq { max-width: 840px; margin-inline: auto; display: grid; gap: var(--sp-1); }
.faq details {
  border: 1px solid var(--c-bordo); border-radius: var(--raggio);
  background: var(--c-superficie); overflow: hidden;
  transition: border-color var(--tempo-veloce), box-shadow var(--tempo-veloce);
}
.faq details[open] { border-color: var(--c-brand-chiaro); box-shadow: var(--ombra-sm); }
.faq summary {
  cursor: pointer; list-style: none; min-height: 56px;
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-titoli); font-weight: 600; font-size: var(--fs-base);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  border-right: 2px solid var(--c-brand-chiaro); border-bottom: 2px solid var(--c-brand-chiaro);
  rotate: 45deg; translate: 0 -3px; transition: rotate var(--tempo-medio) var(--curva);
}
.faq details[open] summary::after { rotate: -135deg; translate: 0 3px; }
.faq__risposta { padding: 0 var(--sp-3) var(--sp-3); color: var(--c-testo-tenue); }
.faq__risposta p { margin: 0; }

/* ---------- 18. CONTENUTI LUNGHI (pagine servizio, zona, legali) --------- */
.contenuto-lungo h2 { font-size: var(--fs-2xl); margin-top: var(--sp-6); }
.contenuto-lungo h2:first-of-type { margin-top: 0; }
.contenuto-lungo h3 { font-size: var(--fs-lg); margin-top: var(--sp-3); }
.contenuto-lungo p { color: var(--c-testo-tenue); }

.elenco-spunte { display: grid; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.elenco-spunte li { display: flex; gap: var(--sp-2); align-items: flex-start; }
.elenco-spunte svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--c-eco); }

.elenco-problemi { display: grid; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.elenco-problemi li {
  padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--c-accento);
  background: var(--c-sfondo-alt); border-radius: var(--raggio-sm); color: var(--c-testo-tenue);
}

.elenco-inline { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.elenco-inline li { padding: 6px var(--sp-2); border: 1px solid var(--c-bordo); border-radius: var(--raggio-pill); font-size: var(--fs-sm); }

.riquadro-dato {
  display: grid; gap: var(--sp-1); margin: var(--sp-4) 0;
  padding: var(--sp-3); border-radius: var(--raggio);
  background: linear-gradient(150deg, var(--c-brand-scuro), var(--c-brand)); color: #fff;
}
.riquadro-dato__valore { font-family: var(--font-titoli); font-size: var(--fs-2xl); font-weight: 700; color: var(--c-accento-chiaro); }
.riquadro-dato__testo { font-size: var(--fs-sm); color: rgba(255,255,255,.82); }

.avviso {
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4);
  border-left: 4px solid var(--c-accento); background: var(--c-accento-soft);
  border-radius: var(--raggio-sm); font-size: var(--fs-sm);
}
.scheda-legale { padding: var(--sp-3); margin-bottom: var(--sp-2); border: 1px solid var(--c-bordo); border-radius: var(--raggio); background: var(--c-superficie); }
.scheda-legale h3 { margin-top: 0; }
.scheda-legale p:last-child { margin-bottom: 0; }

.esito-icona {
  width: 96px; height: 96px; margin: 0 auto var(--sp-3);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--c-eco-soft); color: var(--c-eco);
  font-family: var(--font-titoli); font-size: var(--fs-2xl); font-weight: 700;
}
.esito-icona svg { width: 48px; height: 48px; }
.esito-icona--ko { background: var(--c-accento-soft); color: var(--c-accento); }

/* ---------- 19. CTA FINALE ----------------------------------------------- */
.cta-finale {
  position: relative; overflow: hidden;
  background: linear-gradient(140deg, var(--c-brand-scuro), var(--c-brand) 60%, var(--c-brand-chiaro));
  color: #fff; border-radius: var(--raggio); padding: var(--sp-8) var(--sp-4); text-align: center;
}
.cta-finale::before {
  content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-accento) 44%, transparent), transparent 66%);
  top: -180px; right: -120px; pointer-events: none;
}
.cta-finale > * { position: relative; }
.cta-finale h2 { color: #fff; }
.cta-finale p { color: rgba(255,255,255,.84); max-width: 60ch; margin-inline: auto; margin-bottom: var(--sp-3); }
.cta-finale__azioni { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }

/* ---- LE FASCE "BRAND" IN TEMA SCURO -------------------------------------
   L'invito finale, i riquadri dei risultati e l'incentivo in evidenza
   scrivono testo BIANCO sopra un gradiente che finisce su --c-brand e
   --c-brand-chiaro.

   In tema chiaro quei due colori sono scuri, e il bianco ci sta benissimo.
   In tema scuro sono l'opposto — azzurri chiari, perche' devono risaltare
   come accento sopra il fondo scuro della pagina — e il bianco sopra ci
   arriva a 2.7:1 e 1.9:1: il titolo si legge a fatica, il testo piccolo
   quasi per niente. Provato in un browser vero, non solo calcolato.

   NON si risolve scurendo --c-brand: li' serve chiaro, perche' e' lo
   stesso colore che fa i link dentro le schede. Scurendolo quanto basta
   al bianco, quei link scendono da 6.2:1 a 3.6:1 — si sposta il problema
   invece di toglierlo.

   Si scurisce SOLO il fondo di queste fasce, dove il bianco deve stare.
   Il bianco passa cosi' da 1.9:1 a circa 5.7:1, e --c-brand resta quello
   che era per tutto il resto del sito.                                 */
[data-theme="dark"] .cta-finale {
  background: linear-gradient(140deg,
    var(--c-brand-scuro),
    color-mix(in srgb, var(--c-brand) 65%, #000) 60%,
    color-mix(in srgb, var(--c-brand-chiaro) 55%, #000));
}
[data-theme="dark"] .calcolatore__risultati,
[data-theme="dark"] .incentivo--evidenza,
[data-theme="dark"] .riquadro-dato {
  background: linear-gradient(150deg,
    var(--c-brand-scuro),
    color-mix(in srgb, var(--c-brand) 65%, #000));
}

/* ---------- 20. CONTATTI ------------------------------------------------- */
.modi-contatto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-6); }
.modo-contatto {
  display: grid; gap: 2px; padding: var(--sp-3);
  border: 1px solid var(--c-bordo); border-radius: var(--raggio); background: var(--c-superficie);
  transition: transform var(--tempo-veloce), border-color var(--tempo-veloce), box-shadow var(--tempo-veloce);
}
.modo-contatto:hover { transform: translateY(-3px); border-color: var(--c-brand-chiaro); box-shadow: var(--ombra-sm); }
.modo-contatto__icona { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; background: var(--c-brand-soft); color: var(--c-brand-chiaro); margin-bottom: var(--sp-1); }
.modo-contatto__icona svg { width: 22px; height: 22px; }
.modo-contatto__titolo { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--c-testo-tenue); }
.modo-contatto__valore { font-family: var(--font-titoli); font-weight: 700; font-size: var(--fs-lg); }
.modo-contatto__testo { font-size: var(--fs-sm); color: var(--c-testo-tenue); }

.contatti__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-6); align-items: start; }

/* MODULO A UNA SOLA COLONNA — si compila più in fretta */
.form { display: grid; gap: var(--sp-2); }
.form__campo { display: grid; gap: 6px; }
.form__campo label { font-size: var(--fs-sm); font-weight: 600; }
.form__campo label .obbligatorio { color: var(--c-accento); }
.form input, .form select, .form textarea {
  width: 100%; min-height: 52px; padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--c-bordo); border-radius: var(--raggio-sm);
  background: var(--c-superficie); color: var(--c-testo); font-size: var(--fs-base);
  transition: border-color var(--tempo-veloce), box-shadow var(--tempo-veloce);
}
.form textarea { min-height: 120px; resize: vertical; padding-block: var(--sp-2); }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--c-brand-chiaro); box-shadow: 0 0 0 4px var(--c-brand-soft);
}
.form input:user-invalid, .form select:user-invalid { border-color: #c0392b; }
.form__privacy { font-size: var(--fs-xs); color: var(--c-testo-tenue); margin: 0; }
.form__nota { font-size: var(--fs-xs); color: var(--c-testo-tenue); text-align: center; margin: 0; }
.form__esito { padding: var(--sp-2); border-radius: var(--raggio-sm); font-size: var(--fs-sm); display: none; }
.form__esito.is-ok { display: block; background: var(--c-eco-soft); color: var(--c-eco); border: 1px solid var(--c-eco); }
.form__esito.is-ko { display: block; background: #fdecec; color: #c0392b; border: 1px solid #e6a8a2; }

.form__riepilogo-simulazione {
  border: 1px dashed var(--c-brand-chiaro); border-radius: var(--raggio);
  padding: var(--sp-2); background: var(--c-brand-soft);
}
.riepilogo__testa { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1); font-size: var(--fs-sm); }
.riepilogo__rimuovi { background: none; border: 0; color: var(--c-testo-tenue); text-decoration: underline; cursor: pointer; font-size: var(--fs-xs); min-height: 44px; }
.riepilogo__dati { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-1); margin: 0; }
.riepilogo__dati dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--c-testo-tenue); }
.riepilogo__dati dd { margin: 0; font-weight: 700; font-size: var(--fs-sm); }
.riepilogo__nota { font-size: var(--fs-xs); color: var(--c-testo-tenue); margin: var(--sp-1) 0 0; }

.scheda-contatti { display: grid; gap: var(--sp-2); }
.riga-contatto {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  padding: var(--sp-2); border: 1px solid var(--c-bordo);
  border-radius: var(--raggio-sm); background: var(--c-superficie);
}
.riga-contatto__icona { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--c-brand-soft); color: var(--c-brand-chiaro); }
.riga-contatto__icona svg { width: 20px; height: 20px; }
.riga-contatto__etichetta { font-size: var(--fs-xs); color: var(--c-testo-tenue); text-transform: uppercase; letter-spacing: .04em; }
.riga-contatto__valore { font-weight: 600; font-size: var(--fs-sm); }
.orari { display: grid; gap: 4px; font-size: var(--fs-sm); margin-top: 4px; }
.orari li { display: flex; justify-content: space-between; gap: var(--sp-2); color: var(--c-testo-tenue); }
.orari strong { color: var(--c-testo); font-weight: 600; }
.orari__nota { font-size: var(--fs-xs); color: var(--c-testo-tenue); margin: var(--sp-1) 0 0; }
.mappa { border-radius: var(--raggio); overflow: hidden; border: 1px solid var(--c-bordo); aspect-ratio: 16 / 11; }
.mappa iframe { width: 100%; height: 100%; border: 0; }

/* ---------- 21. FOOTER --------------------------------------------------- */
.footer { background: var(--c-brand-scuro); color: rgba(255,255,255,.72); padding-block: var(--sp-8) var(--sp-3); margin-top: var(--sp-12); }
.footer__griglia { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid rgba(255,255,255,.12); }
.footer .logo__testo { color: #fff; }
.footer__titolo { color: #fff; margin: 0 0 var(--sp-2); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--sp-2); font-family: var(--font-titoli); }
.footer__link { display: grid; gap: 6px; font-size: var(--fs-sm); }
.footer__link a { display: inline-block; padding-block: 4px; color: rgba(255,255,255,.72); transition: color var(--tempo-veloce); }
.footer__link a:hover { color: var(--c-accento); }
.footer__descrizione { font-size: var(--fs-sm); max-width: 42ch; margin: var(--sp-2) 0; }
.footer__indirizzo { font-size: var(--fs-sm); margin-bottom: var(--sp-2); line-height: 1.8; }
.footer__indirizzo a:hover { color: var(--c-accento); }
.social { display: flex; gap: var(--sp-1); }
.social a {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.8);
  transition: background-color var(--tempo-veloce), border-color var(--tempo-veloce), color var(--tempo-veloce), transform var(--tempo-veloce);
}
.social a:hover { background: var(--c-accento); border-color: var(--c-accento); color: var(--c-su-accento); transform: translateY(-2px); }
.social svg { width: 18px; height: 18px; }
.footer__basso { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: space-between; align-items: center; padding-top: var(--sp-3); font-size: var(--fs-xs); }
.footer__legali { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.footer__legali a { padding-block: var(--sp-1); }
.footer__legali a:hover { color: var(--c-accento); }
.footer__dati-fiscali { font-size: var(--fs-xs); color: rgba(255,255,255,.5); line-height: 1.6; margin-top: var(--sp-1); }
.footer__credito { font-size: var(--fs-xs); margin: var(--sp-1) 0 0; }
.footer__credito a { color: rgba(255,255,255,.55); }
.footer__credito a:hover { color: var(--c-accento); }

/* ---------- 22. CONTATTI SEMPRE VISIBILI --------------------------------- */
.azioni-flottanti { position: fixed; right: var(--sp-3); bottom: var(--sp-3); z-index: var(--z-header); display: grid; gap: var(--sp-1); justify-items: end; }
.fab {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  border: none; cursor: pointer; box-shadow: var(--ombra-md);
  transition: transform var(--tempo-veloce) var(--curva), opacity var(--tempo-medio);
}
.fab:hover { transform: scale(1.08); }
.fab svg { width: 26px; height: 26px; }
.fab--whatsapp { background: #25D366; color: #fff; }
.fab--su { background: var(--c-brand); color: var(--c-su-brand); width: 48px; height: 48px; opacity: 0; pointer-events: none; }
.fab--su.is-visible { opacity: 1; pointer-events: auto; }

/* Barra fissa da telefono: telefono, WhatsApp e preventivo sempre a portata di pollice */
.barra-contatti {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-header);
  display: none; grid-template-columns: repeat(3, 1fr);
  background: var(--c-superficie); border-top: 1px solid var(--c-bordo);
  box-shadow: 0 -4px 20px rgba(8, 24, 38, .12);
  padding-bottom: env(safe-area-inset-bottom, 0);
  transition: transform var(--tempo-medio) var(--curva);
}
.barra-contatti.is-nascosta { transform: translateY(110%); }
.barra-contatti__voce {
  display: grid; place-items: center; gap: 2px; min-height: 60px; padding: var(--sp-1);
  font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--c-testo-tenue);
  border-right: 1px solid var(--c-bordo);
}
.barra-contatti__voce:last-child { border-right: 0; }
.barra-contatti__voce svg { width: 22px; height: 22px; }
.barra-contatti__voce:first-child { color: var(--c-brand-chiaro); }
.barra-contatti__voce--wa { color: #1EA855; }
.barra-contatti__voce--cta { background: var(--c-accento); color: var(--c-su-accento); }

/* ---------- 23. BANNER COOKIE INTERNO ------------------------------------ */
.cookie-banner {
  position: fixed; left: var(--sp-2); right: var(--sp-2); bottom: var(--sp-2);
  z-index: var(--z-top); max-width: 760px; margin-inline: auto;
  display: grid; gap: var(--sp-2);
  padding: var(--sp-3); border-radius: var(--raggio);
  background: var(--c-superficie); border: 1px solid var(--c-bordo); box-shadow: var(--ombra-lg);
  transform: translateY(140%); opacity: 0;
  transition: transform var(--tempo-medio) var(--curva), opacity var(--tempo-medio);
}
.cookie-banner.is-visible { transform: none; opacity: 1; }
.cookie-banner__testo { font-size: var(--fs-sm); color: var(--c-testo-tenue); margin: 0; }
.cookie-banner__testo a { color: var(--c-brand-chiaro); text-decoration: underline; }
.cookie-banner__azioni { display: flex; flex-wrap: wrap; gap: var(--sp-1); justify-content: flex-end; }

/* ---------- 24. RESPONSIVE ----------------------------------------------- */
@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--sp-4); }
  .hero__scena { max-width: 440px; margin-inline: auto; order: -1; }
  .calcolatore { grid-template-columns: 1fr; }
  .chi-siamo__inner, .contatti__inner { grid-template-columns: 1fr; }
  .footer__griglia { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav, .header__telefono, .header__azioni .btn { display: none; }
  .hamburger { display: grid; }
  .sezione { padding-block: var(--sp-8); }
  .footer { margin-top: var(--sp-8); }
}

@media (max-width: 720px) {
  .contenitore { padding-inline: var(--sp-2); }
  .footer__griglia { grid-template-columns: 1fr; gap: var(--sp-3); }
  .passo { grid-template-columns: 56px 1fr; gap: var(--sp-2); }
  .passo::before { width: 48px; height: 48px; font-size: var(--fs-base); }
  .passo:not(:last-child)::after { left: 23px; top: 64px; }
  .cta-finale { padding: var(--sp-6) var(--sp-3); }
  /* ---------- PRIMA SCHERMATA DA TELEFONO ------------------------------
     La hero e' l'unica parte che si vede DAVVERO su un telefono: sotto,
     quasi nessuno scorre. Qui si stringe tutto quello che a 360px di
     larghezza sprecava spazio, senza togliere niente.                 */
  .hero { min-height: auto; padding-block: var(--sp-6); }

  /* Il titolo scendeva a 40px anche su schermi da 360: una parola lunga
     come "Termoidraulica" andava a capo da sola e restava una riga di
     due lettere. 32px lo tengono grande ma leggibile.                */
  .hero h1 { font-size: clamp(2rem, 1.1rem + 4.4vw, 2.75rem); line-height: 1.12; }
  .hero__sottotitolo { font-size: var(--fs-base); margin-bottom: var(--sp-2); }
  .hero__badge { font-size: 11px; }

  /* Due bottoni affiancati su 320px utili diventano due strisce strette
     con il testo a capo. In colonna e a tutta larghezza si prendono
     senza guardare, che e' quello che serve.                         */
  .hero__azioni { display: grid; grid-template-columns: 1fr; gap: var(--sp-1); }
  .hero__azioni .btn { width: 100%; justify-content: center; }

  .hero__rassicurazioni { gap: 6px var(--sp-2); font-size: var(--fs-xs); margin-top: var(--sp-2); }

  /* Contatti visibili anche da telefono, in versione compatta */
  .hero__contatti-rapidi { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1); margin-top: var(--sp-3); }
  .contatto-rapido { padding: var(--sp-1) var(--sp-2); gap: var(--sp-1); min-height: 52px; }
  .contatto-rapido strong { font-size: var(--fs-sm); }
  .contatto-rapido small { font-size: 10px; }
  .contatto-rapido svg { width: 20px; height: 20px; }

  /* I quattro numeri stavano su una colonna sola sotto i 420px, cioe'
     quattro righe alte per quattro cifre. Due per riga, piu' stretti. */
  .hero__numeri {
    grid-template-columns: 1fr 1fr; gap: var(--sp-2);
    margin-top: var(--sp-4); padding-top: var(--sp-3);
  }
  .numero__valore { font-size: var(--fs-xl); }
  .numero__etichetta { font-size: 11px; }
  .lavoro__dati { grid-template-columns: 1fr 1fr; }
  .esito-icona { width: 72px; height: 72px; }

  /* Barra contatti attiva solo da telefono */
  .barra-contatti { display: grid; }
  body { padding-bottom: 64px; }
  .azioni-flottanti { bottom: calc(64px + var(--sp-2)); right: var(--sp-2); }
  .cookie-banner { bottom: calc(64px + var(--sp-1)); }
}

/* ---------- 25. STAMPA ---------------------------------------------------- */
@media print {
  .header, .azioni-flottanti, .barra-contatti, .menu-mobile, .barra-fiducia,
  .cookie-banner, .briciole, .carosello-comandi { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .sezione { padding-block: var(--sp-3); break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}

/* La trappola anti-robot: fuori schermo e fuori dal giro dei tab, non
   con display:none — certi robot saltano apposta i campi nascosti cosi'. */
.trappola {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
}

/* Il link per riaprire le preferenze cookie: sta fra i link legali del
   footer e deve sembrare uno di loro, non un bottone. */
.footer__preferenze {
  font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit; text-decoration: underline; text-underline-offset: 2px;
}
.footer__preferenze:hover { color: #fff; }

/* La mappa bloccata fino al consenso: senza src l'iframe è vuoto, e senza
   un fondo si vedrebbe un buco bianco. Il link sotto funziona sempre. */
.mappa iframe:not([src]) { background: var(--c-sfondo-alt); }
.mappa__fuori { margin-top: var(--sp-1); font-size: var(--fs-sm); }
.mappa__fuori a { display: inline-flex; align-items: center; gap: 4px; color: var(--c-brand-chiaro); font-weight: 600; }
.mappa__fuori svg { width: 14px; height: 14px; }

/* ---------- 26. PULSANTE FLOTTANTE DI IUBENDA -----------------------------
   Il pulsante per riaprire le preferenze cookie sta fisso in basso a
   sinistra e copre il tasto "Chiama" della barra contatti del telefono,
   cioe' quello che porta le telefonate.

   L'elemento vero e' questo:

     <button class="iubenda-tp-btn iubenda-cs-preferences-link"
             data-tp-float="bottom-left" data-iub-enabled="1">

   PERCHE' NON BASTAVA !important. La loro regola e':

     .iubenda-tp-btn:not(.iubenda-floatable-tb-btn)[data-tp-float][data-tp-float=bottom-left]

   che pesa 4 (una classe, un :not con classe, due attributi). Un
   selettore piu' corto perde comunque, anche con !important e anche
   messo dopo: a specificita' diversa l'ordine non conta.

   Qui sotto ricalco la loro struttura e aggiungo tre elementi
   (html, body, button): stesso peso di classi e attributi, ma tre
   elementi in piu', quindi vince questa.                             */
@media (max-width: 720px) {
  html body button.iubenda-tp-btn:not(.iubenda-floatable-tb-btn)[data-tp-float][data-tp-float^="bottom-"],
  html body button.iubenda-uspr-btn[data-tp-float][data-tp-float^="bottom-"] {
    bottom: 72px !important;
  }

  /* Se un giorno lo mettono dentro un contenitore posizionato */
  html body div.floatable-wrapper[data-tp-float][data-tp-float^="bottom-"] {
    bottom: 72px !important;
  }
}