/* Solo token, mai colori letterali: la palette vive in tokens.css (FF07 lo verifica).
   Font di sistema: nessun file da scaricare, nessun salto di layout quando arriva il
   font (→10 §8 anti-CLS), e il testo e' leggibile al primo byte. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font: var(--t-m)/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
main { max-width: var(--larghezza); margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-12); }
h1 { font-size: var(--t-2xl); line-height: 1.15; margin: 0 0 var(--sp-3); text-wrap: balance; letter-spacing: -.01em; }
h2 { font-size: var(--t-xl); line-height: 1.25; margin: var(--sp-12) 0 var(--sp-3); text-wrap: balance; }
h3 { font-size: var(--t-l); line-height: 1.3; margin: var(--sp-6) 0 var(--sp-2); }
a { color: var(--accento); text-underline-offset: 2px; }
img { max-width: 100%; height: auto; }
.intro { color: var(--inchiostro-tenue); font-size: var(--t-l); max-width: 62ch; margin: 0 0 var(--sp-6); }

/* --- skip link: visibile solo quando prende il fuoco -------------------- */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--sp-4); top: var(--sp-2); z-index: 20; background: var(--superficie);
              padding: var(--sp-2) var(--sp-3); border-radius: var(--raggio); }

/* --- honeypot (→S4): fuori schermo, NON display:none -------------------- */
.esca { position: absolute; left: -5000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* --- testata ------------------------------------------------------------ */
.intestazione { border-bottom: 1px solid var(--linea); background: var(--superficie);
                position: sticky; top: 0; z-index: 10; }
.nav { max-width: var(--larghezza); margin: 0 auto; padding: var(--sp-3) var(--sp-4);
       display: flex; gap: var(--sp-6); align-items: center; }
.marchio { font-weight: 700; text-decoration: none; color: var(--inchiostro); white-space: nowrap; }
.nav__voci { display: flex; gap: var(--sp-4); flex: 1; }
.nav__voci a { color: var(--inchiostro); text-decoration: none; padding: var(--sp-1) 0;
               border-bottom: 2px solid transparent; transition: var(--transizione); }
.nav__azioni { display: flex; gap: var(--sp-4); align-items: center; }
.nav__tel { color: var(--inchiostro); font-weight: 600; text-decoration: none; white-space: nowrap; }

/* --- I SETTE STATI (→09 §E) -------------------------------------------- */
@media (hover: hover) {
  .nav__voci a:hover { border-bottom-color: var(--linea); }
  .btn:hover { background: var(--linea); }
  .btn--primario:hover { background: var(--accento-scuro); border-color: var(--accento-scuro); }
  .scheda a:hover { border-color: var(--accento); }
}
:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; border-radius: 3px; }
.btn:active { transform: translateY(1px); }
.nav__voci a[aria-current="page"] { border-bottom-color: var(--accento); font-weight: 600; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* --- bottoni ------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
       min-height: 44px; padding: var(--sp-2) var(--sp-4); border: 1px solid var(--linea);
       border-radius: var(--raggio); background: var(--superficie); color: var(--inchiostro);
       font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; transition: var(--transizione); }
.btn--primario { background: var(--accento); border-color: var(--accento); color: var(--su-accento); }
.btn--grande { min-height: 52px; padding: var(--sp-3) var(--sp-6); font-size: var(--t-l); }
.riga { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin: var(--sp-4) 0; }

/* --- flash: uno solo, nel layout base (→F1) ----------------------------- */
.flash { max-width: var(--larghezza); margin: var(--sp-4) auto 0; padding: var(--sp-3) var(--sp-4);
         border-radius: var(--raggio); border: 1px solid var(--linea);
         display: flex; justify-content: space-between; gap: var(--sp-3); align-items: center; }
.flash--ok { background: var(--accento-tenue); border-color: var(--ok); }
.flash--errore { background: var(--superficie); border-color: var(--critico); color: var(--critico); }
.flash--avviso { background: var(--superficie); border-color: var(--attenzione); }
.flash__x { background: none; border: 0; font-size: var(--t-l); cursor: pointer; color: inherit; }

/* --- home --------------------------------------------------------------- */
.eroe { padding: var(--sp-8) 0 var(--sp-4); }
.eroe h1 { font-size: var(--t-3xl); max-width: 18ch; }

/* --- schede (servizi, figlie di un hub) --------------------------------- */
.schede { list-style: none; padding: 0; margin: var(--sp-6) 0; display: grid; gap: var(--sp-4);
          grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.scheda a { display: block; height: 100%; padding: var(--sp-4); background: var(--superficie);
            border: 1px solid var(--linea); border-radius: var(--raggio); color: inherit;
            text-decoration: none; transition: var(--transizione); }
.scheda h2, .scheda h3 { margin: 0 0 var(--sp-2); font-size: var(--t-l); color: var(--accento); }
.scheda p { margin: 0; color: var(--inchiostro-tenue); font-size: var(--t-s); }

/* --- pagine di testo ---------------------------------------------------- */
.briciole { font-size: var(--t-s); color: var(--inchiostro-tenue); margin-bottom: var(--sp-4); }
.briciole a { color: inherit; }
.testo { max-width: 70ch; }
.testo p, .testo li { margin: 0 0 var(--sp-3); }
.testo img { display: block; max-width: 100%; height: auto; margin: var(--sp-6) 0 var(--sp-2);
            border-radius: var(--raggio); }
.testo img + em { display: block; font-size: var(--t-s); color: var(--inchiostro-tenue); margin-bottom: var(--sp-4); }
.testo h2 { margin-top: var(--sp-8); }
.testo table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; margin: var(--sp-4) 0; }
.testo th, .testo td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--linea); }

/* --- modulo di preventivo ----------------------------------------------- */
.preventivo { margin-top: var(--sp-12); padding: var(--sp-6); background: var(--superficie);
              border: 1px solid var(--linea); border-radius: var(--raggio-grande); box-shadow: var(--ombra); }
.preventivo h2 { margin-top: 0; }
.preventivo__intro { color: var(--inchiostro-tenue); margin: 0 0 var(--sp-6); max-width: 62ch; }
.modulo { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campo { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; border: 0; padding: 0; margin: 0; }
.campo--intero { grid-column: 1 / -1; }
.campo label, .campo legend { font-weight: 600; font-size: var(--t-s); padding: 0; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 44px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--linea-forte);
  border-radius: var(--raggio); background: var(--carta); color: var(--inchiostro); font: inherit; }
.campo textarea { resize: vertical; min-height: 110px; }
.campo [aria-invalid="true"] { border-color: var(--critico); }
.campo__errore { margin: 0; color: var(--critico); font-size: var(--t-s); }
.scelte { display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.scelta { display: flex; gap: var(--sp-2); align-items: flex-start; font-weight: 400 !important; }
.scelta input { width: 20px; min-height: 20px; height: 20px; margin-top: 3px; flex: none; }
.consensi { gap: var(--sp-3); font-size: var(--t-s); }

/* --- piè di pagina ------------------------------------------------------ */
.pie { border-top: 1px solid var(--linea); background: var(--superficie); color: var(--inchiostro-tenue);
       font-size: var(--t-s); }
.pie__griglia { max-width: var(--larghezza); margin: 0 auto; padding: var(--sp-8) var(--sp-4);
                display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pie p { margin: 0 0 var(--sp-2); }
.pie address { font-style: normal; }
.pie a { color: inherit; }
.pie__marchio { font-weight: 700; color: var(--inchiostro); }

/* --- banner cookie (→ADR-0003): fisso, non sposta il contenuto ------------ */
.consenso { position: fixed; inset: auto var(--sp-4) var(--sp-4) auto; z-index: 30; max-width: 440px;
            padding: var(--sp-4) var(--sp-6); background: var(--superficie); border: 1px solid var(--linea-forte);
            border-radius: var(--raggio-grande); box-shadow: var(--ombra); font-size: var(--t-s); }
.consenso[hidden] { display: none; }
.consenso h2 { margin: 0 0 var(--sp-2); font-size: var(--t-l); }
.consenso p { margin: 0 0 var(--sp-3); }
.consenso__azioni { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.consenso__azioni .btn { flex: 1 1 auto; }
.consenso__scelte { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.consenso__scelte[hidden] { display: none; }
.consenso__x { position: absolute; top: var(--sp-2); right: var(--sp-2); width: 44px; height: 44px;
               background: none; border: 0; font-size: var(--t-xl); cursor: pointer; color: var(--inchiostro-tenue); }

/* --- barra fissa mobile (→09 §M) ---------------------------------------- */
.barra-mobile { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* Su mobile: bersagli >= 44px, nessuno scorrimento orizzontale (→M2, M7), e la barra
   fissa con chiamata, WhatsApp e preventivo. Il body si alza della sua altezza, o la
   barra coprirebbe l'ultimo pezzo della pagina. */
@media (max-width: 760px) {
  h1, .eroe h1 { font-size: var(--t-2xl); }
  .nav { gap: var(--sp-3); flex-wrap: wrap; }
  .nav { padding-bottom: 0; }
  .nav__voci { order: 3; flex: 1 0 100%; gap: var(--sp-6); }
  .nav__voci a { display: inline-flex; align-items: center; min-height: 44px; }
  .intro { font-size: var(--t-m); }
  .nav__azioni .btn, .nav__tel { display: none; }
  .modulo { grid-template-columns: 1fr; }
  .preventivo { padding: var(--sp-4); }
  body { padding-bottom: 64px; }
  .barra-mobile { display: grid; grid-template-columns: 1fr 1fr 1.3fr; position: fixed; inset: auto 0 0 0;
                  z-index: 15; background: var(--superficie); border-top: 1px solid var(--linea); }
  .barra-mobile a { display: flex; align-items: center; justify-content: center; min-height: 56px;
                    font-weight: 600; color: var(--inchiostro); text-decoration: none; }
  .barra-mobile__cta { background: var(--accento); color: var(--su-accento) !important; }
  /* Il banner sta sopra la barra fissa, a tutta larghezza. */
  .consenso { inset: auto 0 56px 0; max-width: none; border-radius: var(--raggio-grande) var(--raggio-grande) 0 0;
              padding: var(--sp-4); }
}