/* =========================================================================
   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; }
.logo img { height: 40px; width: auto; }
.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; }
.hero__velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(1000px 600px at 78% 18%, color-mix(in srgb, var(--c-accento) 30%, transparent), transparent 62%),
    radial-gradient(800px 500px at 12% 82%, color-mix(in srgb, var(--c-brand-chiaro) 38%, transparent), transparent 60%),
    linear-gradient(160deg, var(--c-brand-scuro) 8%, color-mix(in srgb, var(--c-brand) 88%, #000) 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: "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: 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);
}
.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: 4px var(--sp-1); border-radius: var(--raggio-pill); margin-bottom: 4px;
}
.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); }
.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; }

/* ---------- 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;
  }
}