/* ------------------------------------------------------------------
   ACT -- primo viewport, direzione nuova del 2026-08-23.
   Canone di categoria eseguito ad alta fedelta': fondo chiaro, aria,
   struttura fatta di spazio e peso tipografico, schede bianche che
   galleggiano e scavalcano la fotografia. Il "wow" e' movimento e cura,
   mai materia. Zero librerie, zero WebGL.
   ------------------------------------------------------------------ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: var(--font-testo);
  font-size: var(--fs-5);
  line-height: var(--lh-normale);
  -webkit-font-smoothing: antialiased;
  /* la trama di fondo: griglia di punti appena percettibile, in CSS.
     Zero byte di immagine, e non tocca il budget della piega. */
  background-image: radial-gradient(var(--x-punti) 1px, transparent 1px);
  background-size: 24px 24px;
  background-attachment: fixed;
}

img, picture, svg { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--accento); color: var(--inchiostro); }
:focus-visible {
  outline: var(--x-bordo-fuoco) solid var(--accento-2);
  outline-offset: var(--x-offset-fuoco);
  border-radius: var(--raggio-s);
}

.salta {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--inchiostro); color: var(--fondo);
  padding: var(--sp-2) var(--sp-3); border-radius: 0 0 var(--raggio-s) 0;
}
.salta:focus { left: 0; }

.contenuto { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad-x); }

/* --- testata galleggiante ------------------------------------------ */
/* La navigazione e' una pillola bianca che galleggia sopra il contenuto:
   e' il gesto ricorrente in tutte e quattro le reference. Su una landing
   non porta voci di menu, perche' ogni voce e' una via di fuga. */
/* F9: la testata NON e' appiccicata e non porta il numero in chiaro.
   Un numero visibile invita a comporlo a mano, e una telefonata composta a
   mano non lascia traccia: l'obiettivo della pagina e' il modulo. La
   persistenza la garantisce la barra in basso, che porta al modulo. */
.testata { padding-block: var(--sp-3) var(--sp-2); }
.testata__pillola {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  background: var(--carta);
  border-radius: var(--raggio-pill);
  box-shadow: var(--ombra-carta);
  padding: 0.55rem 0.6rem 0.55rem 1.15rem;
  border: var(--filetto-sp) solid color-mix(in srgb, var(--filo) 55%, transparent);
}
.marchio img { height: var(--x-h-marchio); width: auto; }

/* --- navigazione della testata --------------------------------------
   Su desktop le voci sono in chiaro, su telefono stanno dietro un pulsante.
   Il menu NON porta il preventivo su telefono: l'azione vive nella barra in
   basso, e due pulsanti identici a due centimetri l'uno dall'altro sono un
   doppione che ruba spazio invece di aggiungere una via. */
.menu__voci { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.2rem; }
.menu__voci a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0.5rem 0.7rem; border-radius: var(--raggio-pill);
  font-family: var(--font-titolo); font-weight: 700; font-size: var(--fs-7);
  color: var(--inchiostro); text-decoration: none; white-space: nowrap;
}
.menu__voci a:not(.btn):hover { background: var(--fondo-2); }
.menu__azione .btn { font-size: var(--fs-6); padding: 0.7rem 1.15rem; min-height: 40px; margin-left: 0.3rem; }

.menu__interruttore {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  background: var(--fondo-2); border: none; border-radius: 50%;
  color: var(--inchiostro); cursor: pointer;
}
.menu__barre { display: grid; gap: 4px; width: 18px; }
.menu__barre span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--dur-2) var(--curva-arrivo), opacity var(--dur-2) linear; }
.menu[data-aperto="1"] ~ .menu__interruttore .menu__barre span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu[data-aperto="1"] ~ .menu__interruttore .menu__barre span:nth-child(2) { opacity: 0; }
.menu[data-aperto="1"] ~ .menu__interruttore .menu__barre span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Sotto i 900 px: pannello che scende dalla pillola. Chiuso e' inerte, non
   solo invisibile: `display: none` lo toglie anche alla tastiera e ai lettori
   di schermo, che e' la meta' che si dimentica sempre. */
@media (max-width: 899px) {
  .menu__interruttore { display: inline-flex; }
  /* Il pannello si aggancia alla PILLOLA, non al <nav>: col menu chiuso il
     nav ha larghezza zero e finisce in mezzo alla testata, quindi un pannello
     ancorato a lui usciva dallo schermo a sinistra di 18 px. Misurato. */
  .testata__pillola { position: relative; }
  .menu__voci { display: none; }
  .menu[data-aperto="1"] .menu__voci {
    display: grid; gap: 0.15rem;
    position: absolute; right: 0; left: auto; top: calc(100% + 0.6rem); z-index: 60;
    min-width: 15rem; padding: 0.5rem;
    background: var(--carta); border-radius: var(--raggio);
    border: var(--filetto-sp) solid color-mix(in srgb, var(--filo) 55%, transparent);
    box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--inchiostro) 45%, transparent);
  }
  .menu[data-aperto="1"] .menu__voci a:not(.btn) { min-height: 46px; }
  /* Il preventivo nel pannello non serve: la barra in basso ce l'ha gia'. */
  .menu__azione { display: none; }
}
@media (min-width: 900px) { .marchio img { height: var(--x-h-marchio-lg); } }

/* --- bottoni -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: var(--x-tocco-min);
  padding: var(--x-pad-bottone);
  font-family: var(--font-etichetta);
  font-weight: var(--x-peso-etichetta);
  font-size: var(--fs-6);
  letter-spacing: -0.01em;
  text-decoration: none;
  border-radius: var(--raggio-pill);
  border: var(--filetto-sp) solid transparent;
  cursor: pointer;
  transition: transform var(--dur-1) var(--curva-uscita),
              box-shadow var(--dur-1) var(--curva-uscita),
              background-color var(--dur-1) var(--curva-uscita);
}
/* IL PULSANTE PRIMARIO, rifatto il 2026-08-23 su richiesta di Pasquale.
   Il problema: bianco su #EF6C00 fa 3,08:1 e non passa WCAG (e' il difetto
   del sito attuale), ma navy su #EF6C00 e' brutto da vedere. La terza via
   e' l'arancio bruciato del marchio, #B1560C, che con il BIANCO fa 5,0:1:
   passa la soglia di 4,5, resta inequivocabilmente arancio, e ha un aspetto
   piu' ricco del pieno acceso. L'arancio chiaro #EF6C00 resta come accento
   sulle superfici piccole, dove il contrasto del testo non e' in gioco. */
.btn--pieno { background: var(--accento-2); color: #FFFFFF; box-shadow: var(--ombra-corta); }
.btn--pieno:hover { background: color-mix(in srgb, var(--accento-2) 88%, var(--inchiostro)); }
.btn--pieno .btn__freccia { background: color-mix(in srgb, #FFFFFF 26%, transparent); }
.btn--pieno:hover { transform: translateY(-2px); box-shadow: var(--ombra-alta); }
.btn--pieno:active { transform: translateY(0); }

.btn--chiaro { background: var(--carta); color: var(--inchiostro); border-color: var(--filo); }
.btn--chiaro:hover { transform: translateY(-2px); box-shadow: var(--ombra-carta); }

.btn--scuro { background: var(--inchiostro); color: var(--fondo); }
.btn--scuro:hover { transform: translateY(-2px); box-shadow: var(--ombra-alta); }

/* la freccia dentro il cerchio, e la spinta al passaggio del mouse */
.btn__freccia {
  width: 1.65rem; height: 1.65rem; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--inchiostro) 12%, transparent);
  transition: transform var(--dur-2) var(--curva-arrivo);
}
.btn:hover .btn__freccia { transform: translateX(3px); }
.btn__freccia svg { width: 0.85rem; height: 0.85rem; }

.btn--tel { font-size: var(--fs-6); padding: 0.7rem 1.15rem; min-height: 40px; }

/* --- chip ----------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--carta);
  border: var(--filetto-sp) solid var(--filo);
  border-radius: var(--raggio-pill);
  padding: 0.42rem 0.9rem;
  font-family: var(--font-etichetta);
  font-weight: 700; font-size: var(--fs-8);
  letter-spacing: var(--tracking-etichetta);
  text-transform: uppercase;
  color: var(--inchiostro);
}
.chip::before {
  content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%;
  background: var(--accento); flex: 0 0 auto;
}

/* --- apertura -------------------------------------------------------- */
.apertura { padding-block: var(--sp-4) var(--sp-6); }
.apertura__griglia { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 980px) {
  .apertura__griglia { grid-template-columns: 1.02fr 0.98fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
  .apertura { padding-block: var(--sp-5) var(--sp-6); }
}

.apertura h1 {
  font-family: var(--font-titolo);
  font-weight: var(--x-peso-display);
  font-size: var(--fs-1);
  line-height: var(--lh-media);
  letter-spacing: var(--x-tracking-display);
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}
/* una sola parola colorata in tutto il titolo */
.apertura h1 em { font-style: normal; color: var(--accento-2); }

.apertura__sotto {
  font-size: var(--fs-4);
  color: var(--inchiostro-tenue);
  max-width: var(--x-misura-stretta);
  margin: 0 0 var(--sp-4);
}
.apertura__sotto strong { color: var(--inchiostro); font-weight: 600; }

.azioni { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-2); }
.azioni .btn--pieno { flex: 1 1 auto; }
@media (min-width: 560px) { .azioni .btn--pieno { flex: 0 0 auto; } }

.azione-tel {
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: var(--x-tocco-min); padding: 0.75rem 1.1rem;
  font-family: var(--font-etichetta); font-weight: 700; font-size: var(--fs-6);
  text-decoration: none; border-radius: var(--raggio-pill);
  transition: background-color var(--dur-1) var(--curva-uscita);
}
.azione-tel:hover { background: color-mix(in srgb, var(--filo) 40%, transparent); }
.azione-tel svg { width: 1.05rem; height: 1.05rem; color: var(--accento-2); }

/* --- la fotografia e la scheda che la scavalca ------------------------ */
.apertura__media { position: relative; }
.foto-apertura {
  margin: 0;
  border-radius: var(--raggio-xl);
  overflow: hidden;
  background: var(--x-fondo-foto);
  box-shadow: var(--ombra-alta);
  aspect-ratio: var(--x-ratio-apertura);
}
/* F12: su telefono il riquadro e' QUADRATO. A 4:5 rubava novanta pixel di
   altezza mostrando soprattutto la facciata del palazzo; a 1:1 il ritaglio
   stringe sui lati e Andrea occupa piu' campo. */
@media (max-width: 979px) { .foto-apertura { aspect-ratio: 1 / 1; } }
@media (min-width: 980px) {
  .foto-apertura { aspect-ratio: var(--x-ratio-apertura-lg); }
  /* su desktop il riquadro e' quasi il formato nativo dello scatto:
     il ritaglio e' minimo e si centra. */
  .foto-apertura img { object-position: 50% center; }
}
/* <picture> e' un elemento inline: senza questa riga height:100% sull'img
   non ha un contenitore su cui risolversi e la fotografia non riempie il
   riquadro. Costato una cattura di controllo il 2026-08-23. */
.foto-apertura picture { display: block; width: 100%; height: 100%; }
.foto-apertura img { width: 100%; height: 100%; object-fit: cover; object-position: 68% center;   /* Andrea sta sulla destra dell'inquadratura */ filter: var(--foto-filtro); }

/* la scheda bianca che esce dal bordo della fotografia: e' il gesto che
   in tutte e quattro le reference fa "moderno". Porta una recensione
   VERA, con nome e tratta, che la ricerca dice valere 15-30% in piu' di
   una grafica di fiducia generica. */
.prova {
  position: relative;
  margin: -3.25rem var(--sp-3) 0 var(--sp-3);
  background: var(--carta);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-alta);
  padding: var(--sp-3);
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3);
  align-items: start;
}
@media (min-width: 980px) {
  .prova { margin: -3.5rem 2.5rem 0 -1.5rem; }
}
.prova__foto { width: 3.1rem; height: 3.1rem; border-radius: 50%; object-fit: cover; }
.prova__stelle { display: flex; gap: 0.12rem; margin-bottom: 0.35rem; }
.prova__stelle svg { width: 0.9rem; height: 0.9rem; color: var(--accento); }
.prova__testo { margin: 0 0 0.45rem; font-size: var(--fs-7); line-height: 1.5; }
.prova__chi { margin: 0; font-size: var(--fs-8); color: var(--inchiostro-tenue); }
.prova__chi b { color: var(--inchiostro); font-family: var(--font-etichetta); font-weight: 700; }

/* --- fascia dei numeri ------------------------------------------------ */
.numeri {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--filetto-sp);
  background: var(--filo);
  border: var(--filetto-sp) solid var(--filo);
  border-radius: var(--raggio);
  overflow: hidden;
  margin-top: var(--sp-5);
}
@media (min-width: 760px) { .numeri { grid-template-columns: repeat(4, 1fr); } }
.numero { background: var(--carta); padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + 0.15rem); }
.numero b {
  display: block;
  font-family: var(--font-titolo); font-weight: var(--x-peso-display);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  letter-spacing: var(--x-tracking-titolo);
  line-height: 1.1;
}
.numero span { display: block; font-size: var(--fs-8); color: var(--inchiostro-tenue); margin-top: 0.15rem; }

/* --- barra fissa ------------------------------------------------------ */
/* Compare DOPO il primo viewport, mai prima: sopra la piega il pulsante
   c'e' gia' e la barra sarebbe un doppione che ruba spazio. L'analisi dei
   33 test A/B da' alla posizione in basso il 36% di vittorie su mobile,
   contro il 13% in alto. */
.barra-fissa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 0.6rem var(--pad-x) calc(0.6rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--carta) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: var(--filetto-sp) solid var(--filo);
  /* Centrata su entrambe le larghezze, col preventivo in mezzo: e' la
     disposizione del sito vecchio, chiesta esplicitamente il 2026-08-23. */
  display: flex; justify-content: center; align-items: center;
  gap: clamp(1rem, 4vw, 3.5rem);
  transform: translateY(110%);
  transition: transform var(--dur-3) var(--curva-arrivo);
}
.barra-fissa[data-visibile="1"] { transform: translateY(0); }

.barra-fissa__azione { flex: 0 1 auto; white-space: nowrap; }
.barra-fissa__azione svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }

/* Le due voci laterali esistono solo da 620 px in su: su telefono la barra
   porta il solo preventivo, perche' con tre bersagli il testo va a capo e
   la ricerca sulla barra fissa da' il tasso di vittoria piu' alto quando il
   bersaglio e' uno. */
.barra-fissa__voce { display: none; }
@media (min-width: 620px) {
  .barra-fissa__voce {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-titolo); font-weight: 700;
    font-size: var(--fs-7); color: var(--inchiostro);
    text-decoration: none; white-space: nowrap;
    border-radius: var(--raggio-pill);
    padding: 0.5rem 0.4rem;
  }
  .barra-fissa__voce svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; color: var(--accento-2); }
  .barra-fissa__voce b { font-weight: 800; }
  .barra-fissa__voce:hover b { text-decoration: underline; }
}
@media (min-width: 980px) {
  .barra-fissa { padding-block: 0.7rem; }
}

/* --- movimento: l'entrata focale, una volta sola ---------------------- */
/* Il contenuto e' VISIBILE per default. L'animazione vive dentro una
   media query di preferenza, quindi niente puo' nasconderlo. */
@media (prefers-reduced-motion: no-preference) {
  .entra { animation: entra var(--dur-focale) var(--curva-arrivo) both; }
  .entra-1 { animation-delay: calc(var(--scaletta) * 0); }
  .entra-2 { animation-delay: calc(var(--scaletta) * 1); }
  .entra-3 { animation-delay: calc(var(--scaletta) * 2); }
  .entra-4 { animation-delay: calc(var(--scaletta) * 3); }
  .entra-5 { animation-delay: calc(var(--scaletta) * 4); }
  .entra-6 { animation-delay: calc(var(--scaletta) * 5); }
}
@keyframes entra {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* L'apertura fotografica e' l'elemento LCP, e la sua entrata NON puo' passare
   dall'opacita': il tempo dell'elemento piu' grande diventerebbe il ritardo
   dell'animazione invece del tempo di rete. Misurato il 2026-08-23: con la
   dissolvenza 2.236 ms contro 1.754 ms di rete, cioe' mezzo secondo regalato
   a un effetto. Il movimento resta: lo fa la sola traslazione, e la
   fotografia e' opaca dal primo fotogramma. */
@keyframes entra-opaca {
  from { transform: translateY(14px); }
  to   { transform: none; }
}
.apertura__media.entra { animation-name: entra-opaca; }

/* le comparse allo scorrimento: animazioni CSS guidate dallo scorrimento,
   supportate dal 94,44% del traffico misurato di ACT. Il ripiego non
   nasconde niente: chi non le ha vede la pagina ferma e completa. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .compare {
      animation: entra linear both;
      animation-timeline: view();
      /* Una fase sola. Mescolare "entry" e "cover" in un intervallo
         produce un range che in certi impaginati non si risolve, e
         l'elemento resta bloccato a opacita' zero: contenuto nascosto
         per sempre, senza nessun errore. Costato una verifica il
         2026-08-23, ed e' la ragione per cui la comparsa si collauda
         guardandola invece di fidarsi che "il CSS c'e'". */
      animation-range: entry 0% entry 85%;
    }
  }
}

/* ==================================================================
   SEZIONI
   ================================================================== */

.sezione { padding-block: var(--sp-6); position: relative; }
.sezione--alt { background: var(--fondo-2); }
.sezione--carta { background: var(--carta); }
.sezione--scura { background: var(--fondo-3); color: var(--fondo); }
.sezione--scura .testo, .sezione--scura .etichetta { color: color-mix(in srgb, var(--fondo) 78%, transparent); }
.sezione--scura .evidenza { color: var(--accento); }

/* testa di sezione: etichetta a pillola, titolo, occhio di testo.
   L'etichetta sopra il titolo e' un divieto del pavimento di qualita' di
   impeccable, ma tutti e quattro i riferimenti scelti da Pasquale la usano
   e portano contenuto vero. Deviazione consapevole, non dimenticanza. */
.testa-sezione { max-width: 46rem; margin-bottom: var(--sp-5); }
.testa-sezione--centro { margin-inline: auto; text-align: center; }
.etichetta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--carta);
  border: var(--filetto-sp) solid var(--filo);
  border-radius: var(--raggio-pill);
  padding: 0.4rem 0.9rem;
  margin: 0 0 var(--sp-3);
  font-family: var(--font-etichetta); font-weight: 700; font-size: var(--fs-8);
  letter-spacing: var(--tracking-etichetta); text-transform: uppercase;
  color: var(--inchiostro);
}
.etichetta::before {
  content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%;
  background: var(--accento); flex: 0 0 auto;
}
.sezione--scura .etichetta { background: var(--x-carta-scura); border-color: var(--x-filo-scuro); color: var(--fondo); }

.titolo-sezione {
  font-family: var(--font-titolo); font-weight: var(--x-peso-display);
  font-size: var(--fs-2); line-height: var(--lh-media);
  letter-spacing: var(--x-tracking-display);
  margin: 0 0 var(--sp-3); text-wrap: balance;
}
.titolo-3 {
  font-family: var(--font-titolo); font-weight: var(--x-peso-titolo);
  font-size: var(--fs-3); line-height: 1.25; letter-spacing: var(--x-tracking-titolo);
  margin: 0 0 var(--sp-2);
}
.titolo-4 {
  font-family: var(--font-titolo); font-weight: var(--x-peso-titolo);
  font-size: var(--fs-4); line-height: 1.3; letter-spacing: var(--x-tracking-titolo);
  margin: 0 0 var(--sp-2);
}
.testo { color: var(--inchiostro-tenue); max-width: var(--misura); margin: 0 0 var(--sp-3); }
.testo:last-child { margin-bottom: 0; }
.evidenza { color: var(--inchiostro); font-weight: 600; }
.piccolo { font-size: var(--fs-7); color: var(--inchiostro-tenue); }

/* griglia a 12 colonne */
.griglia { display: grid; grid-template-columns: 1fr; gap: var(--x-gap-riga) var(--x-gap-colonna); }
@media (min-width: 900px) {
  .griglia { grid-template-columns: var(--x-griglia); }
  .c-4 { grid-column: span 4; } .c-5 { grid-column: span 5; }
  .c-7 { grid-column: span 7; } .c-8 { grid-column: span 8; } .c-12 { grid-column: span 12; }
}

/* ==================================================================
   SCHEDE E FOTOGRAFIE
   ================================================================== */

.pannello {
  margin: 0; border-radius: var(--raggio);
  overflow: hidden; background: var(--x-fondo-foto);
  box-shadow: var(--ombra-carta);
}
.pannello picture { display: block; width: 100%; height: 100%; }
.pannello img { width: 100%; height: 100%; object-fit: cover; filter: var(--foto-filtro); }
.r-orizzontale { aspect-ratio: var(--x-ratio-orizzontale); }
.r-quadro { aspect-ratio: var(--x-ratio-quadro); }
.r-verticale { aspect-ratio: 2 / 3; }
.r-banda { aspect-ratio: var(--x-ratio-banda); }
.pannello--didascalia { aspect-ratio: auto; background: var(--carta); }
.pannello--didascalia picture, .pannello--didascalia img { aspect-ratio: var(--x-ratio-orizzontale); height: auto; }

.didascalia {
  background: var(--carta);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-8); color: var(--inchiostro-tenue);
  display: flex; gap: 0.6rem; align-items: baseline;
}
.didascalia__n {
  font-family: var(--font-etichetta); font-weight: 700;
  color: var(--accento-2); flex: 0 0 auto;
}

/* F3: la galleria a COLONNE, con le fotografie alla loro proporzione
   naturale e senza didascalie. Le proporzioni forzate lasciavano vuoti
   sotto le verticali; qui ogni scatto e' alto quanto e', e le colonne si
   incastrano. Le didascalie sono state tolte per intero: le fotografie
   parlano da sole, ed erano anche il punto in cui la pagina spiegava
   invece di mostrare. */
.galleria { columns: 1; column-gap: var(--sp-4); }
@media (min-width: 620px) { .galleria { columns: 2; } }
@media (min-width: 1000px) { .galleria { columns: 3; } }
.galleria .pannello {
  break-inside: avoid; margin-bottom: var(--sp-4);
  aspect-ratio: auto;
}
.galleria .pannello picture { height: auto; }
.galleria .pannello img { height: auto; }

/* schede in griglia */
.indice { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
@media (min-width: 700px) { .indice--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .indice--3 { grid-template-columns: repeat(3, 1fr); } }
.voce {
  background: var(--carta);
  border: var(--filetto-sp) solid color-mix(in srgb, var(--filo) 60%, transparent);
  border-radius: var(--raggio);
  padding: var(--sp-3);
  box-shadow: var(--ombra-carta);
  transition: transform var(--dur-2) var(--curva-uscita), box-shadow var(--dur-2) var(--curva-uscita);
}
.voce:hover { transform: translateY(-3px); box-shadow: var(--ombra-alta); }
.voce > p { margin: 0; color: var(--inchiostro-tenue); font-size: var(--fs-6); }
.voce__n {
  display: inline-grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: color-mix(in srgb, var(--accento) 16%, var(--carta));
  color: var(--accento-2);
  font-family: var(--font-etichetta); font-weight: 800; font-size: var(--fs-8);
  margin-bottom: var(--sp-2);
}
.voce .pannello { margin-bottom: var(--sp-3); }

/* ==================================================================
   IL MECCANISMO: lo scrollytelling, secondo momento autoriale
   ================================================================== */
/* Su desktop la fotografia resta ferma e il testo dei passi scorre.
   Su telefono e nel ripiego diventa una sequenza verticale normale con
   la fotografia accanto a ogni passo: stessa informazione, ferma. */
.meccanismo { display: grid; gap: var(--sp-4); }
@media (min-width: 1000px) {
  .meccanismo { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
  .meccanismo__media { position: sticky; top: calc(var(--x-h-marchio-lg) + 4rem); }
  .meccanismo__passi { display: grid; gap: clamp(3rem, 12vh, 7rem); }
}
/* Sotto i 1000 px `.meccanismo__passi` era un blocco senza spazio e `.passo`
   senza margine: le card si toccavano, e quello che sembrava un distacco era
   solo la somma delle due imbottiture interne. */
.meccanismo__passi { display: grid; gap: var(--sp-4); }
.passo {
  background: var(--carta);
  border: var(--filetto-sp) solid color-mix(in srgb, var(--filo) 60%, transparent);
  border-radius: var(--raggio);
  padding: var(--sp-3);
  box-shadow: var(--ombra-carta);
}
.passo .pannello { margin-bottom: var(--sp-3); }
@media (min-width: 1000px) { .passo .pannello { display: none; } }

/* ==================================================================
   RECENSIONI
   ================================================================== */
/* F6: le recensioni a COLONNE, non a griglia. Con la griglia ogni scheda
   si allunga fino all'altezza della riga e resta mezza vuota; con le
   colonne ognuna e' alta quanto il suo testo e le altre le si incastrano
   sotto, con lo stesso spazio sui quattro lati. E' il "formato puzzle". */
.recensioni { columns: 1; column-gap: var(--sp-4); }
@media (min-width: 760px) { .recensioni { columns: 2; } }
@media (min-width: 1100px) { .recensioni { columns: 3; } }
.recensioni > * { break-inside: avoid; margin-bottom: var(--sp-4); }
.recensione {
  /* `margin: 0` azzerava il margine inferiore dichiarato da `.recensioni > *`
     due righe piu' su: le schede si toccavano. Si azzerano i lati, non il
     basso. */
  margin: 0 0 var(--sp-4); background: var(--carta);
  border: var(--filetto-sp) solid color-mix(in srgb, var(--filo) 60%, transparent);
  border-radius: var(--raggio); padding: var(--sp-3);
  box-shadow: var(--ombra-carta);
  display: flex; flex-direction: column;
  transition: transform var(--dur-2) var(--curva-uscita), box-shadow var(--dur-2) var(--curva-uscita);
}
.recensione:hover { transform: translateY(-3px); box-shadow: var(--ombra-alta); }
.recensione--foto { }
.recensione .pannello { margin-bottom: var(--sp-3); }
.recensione__stelle { display: flex; gap: 0.12rem; margin-bottom: var(--sp-2); }
.recensione__stelle svg { width: 0.95rem; height: 0.95rem; color: var(--accento); }
.recensione__testo { color: var(--inchiostro-tenue); font-size: var(--fs-6); margin: 0 0 var(--sp-3); flex: 1 1 auto; }
.recensione__chi { margin: 0; font-family: var(--font-etichetta); font-weight: 700; font-size: var(--fs-7); }
.recensione__tratta { margin: 0; font-size: var(--fs-8); color: var(--inchiostro-tenue); }

/* ==================================================================
   LE DUE STRADE
   ================================================================== */
.strade { display: grid; gap: var(--sp-4); }
@media (min-width: 860px) { .strade { grid-template-columns: repeat(2, 1fr); } }
.strada {
  background: var(--carta);
  border: var(--filetto-sp) solid var(--filo);
  border-radius: var(--raggio); padding: var(--sp-4);
  display: flex; flex-direction: column;
  box-shadow: var(--ombra-carta);
}
.strada--marcata { border-color: var(--accento); border-width: 2px; }
.strada__badge {
  align-self: flex-start;
  background: color-mix(in srgb, var(--accento) 18%, var(--carta));
  color: var(--accento-2);
  border-radius: var(--raggio-pill);
  padding: 0.35rem 0.85rem; margin: 0 0 var(--sp-3);
  font-family: var(--font-etichetta); font-weight: 800; font-size: var(--fs-8);
  letter-spacing: var(--tracking-etichetta); text-transform: uppercase;
}
.strada ul { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-2); flex: 1 1 auto; }
/* La spunta si disegna con un ::before ASSOLUTO e non con una colonna di
   griglia. Con `display: grid` sul <li>, ogni <span> figlio diventa un
   elemento di griglia a se' e il testo si spezza una parola per riga:
   succedeva su "Risparmi fino al 30% rispetto al trasloco dedicato".
   Il <li> resta un blocco normale e il testo scorre come deve. */
.strada li {
  position: relative; display: block; padding-left: 1.9rem;
  font-size: var(--fs-6); color: var(--inchiostro-tenue); line-height: 1.5;
}
.strada li::before {
  content: ""; position: absolute; left: 0; top: 0.18em;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--accento) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23011730' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.7rem no-repeat;
}
.btn--largo { width: 100%; }

/* ==================================================================
   MODULO
   ================================================================== */
.modulo { background: var(--carta); border: var(--filetto-sp) solid var(--filo); border-radius: var(--raggio); padding: var(--sp-4); box-shadow: var(--ombra-carta); }
/* Tutti i fieldset, non solo quelli di primo livello: il gruppo dei
   servizi accessori e' annidato e altrimenti tiene il bordo del browser. */
.modulo fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.gruppo { margin: 0 0 var(--sp-4); }
.gruppo:last-of-type { margin-bottom: 0; }
/* F7: i due titoli di gruppo diventano titoli veri e dividono il modulo,
   invece di essere due etichettine minuscole indistinguibili dal resto. */
.gruppo__titolo {
  font-family: var(--font-titolo); font-weight: var(--x-peso-display);
  font-size: var(--fs-3); letter-spacing: var(--x-tracking-titolo);
  text-transform: none; color: var(--inchiostro);
  padding: 0; margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--filo);
  width: 100%;
}
.gruppo + .gruppo { margin-top: var(--sp-5); }
.campi { display: grid; gap: var(--sp-3); }
@media (min-width: 620px) { .campi--due { grid-template-columns: repeat(2, 1fr); } .campo--intero { grid-column: 1 / -1; } }
/* `.campo label` batte `.casella` per specificita', e le quattro caselle dei
   servizi accessori stanno dentro un fieldset `.campo`: perdevano la griglia,
   la spunta tornava in linea sul filo del testo e l'etichetta diventava
   semigrassetto, diversa da tutte le altre del modulo. Si esclude la casella. */
.campo label:not(.casella), .campo__legenda { display: block; font-weight: 600; font-size: var(--fs-7); margin-bottom: 0.35rem; }
/* Il browser mette 3-4 px di margine suo su ogni input: senza azzerarlo la
   colonna delle spunte parte 4 px piu' a destra di tutti gli altri campi. */
.casella input { margin-left: 0; margin-right: 0; }
.campo .casella { margin-bottom: 0.35rem; }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo input[type="date"], .campo select, .campo textarea {
  width: 100%; min-height: var(--x-tocco-min);
  padding: 0.55rem 0.8rem;
  font: inherit; font-size: var(--fs-6); color: var(--inchiostro);
  background: var(--fondo);
  border: var(--filetto-sp) solid var(--filo);
  border-radius: var(--raggio-s);
  transition: border-color var(--dur-1) var(--curva-uscita), box-shadow var(--dur-1) var(--curva-uscita);
}
.campo textarea { min-height: 5rem; resize: vertical; }
.campi { gap: var(--sp-2) var(--sp-3); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--accento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accento) 22%, transparent);
}
.campo__aiuto { margin: 0.35rem 0 0; font-size: var(--fs-8); color: var(--inchiostro-tenue); }
.errore { margin: 0.3rem 0 0; font-size: var(--fs-8); color: var(--accento-2); min-height: 0; }
.obbligatorio { color: var(--accento-2); }
.caselle { display: grid; gap: var(--sp-2); }
@media (min-width: 620px) { .caselle { grid-template-columns: repeat(2, 1fr); } }
.casella { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; font-weight: 400; font-size: var(--fs-7); cursor: pointer; }
.casella input { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--accento); }
.consenso { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.antibot:empty { display: none; }
.modulo__coda { margin-top: var(--sp-4); display: grid; gap: var(--sp-2); }
.avviso {
  background: color-mix(in srgb, var(--accento) 10%, var(--carta));
  border: var(--filetto-sp) solid color-mix(in srgb, var(--accento) 32%, transparent);
  border-radius: var(--raggio); padding: var(--sp-3);
  font-size: var(--fs-7); color: var(--inchiostro-tenue);
}

/* ==================================================================
   LETTURA, FAQ, PIEDE
   ================================================================== */
.lettura { max-width: var(--misura); }
.lettura p { color: var(--inchiostro-tenue); margin: 0 0 var(--sp-3); }
.lettura .capolettera { color: var(--inchiostro); font-size: var(--fs-4); }

.faq { display: grid; gap: var(--sp-2); max-width: 52rem; }
.faq details {
  background: var(--carta);
  border: var(--filetto-sp) solid color-mix(in srgb, var(--filo) 60%, transparent);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-carta);
  overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: var(--sp-3);
  min-height: var(--x-tocco-min);
  font-family: var(--font-titolo); font-weight: var(--x-peso-titolo); font-size: var(--fs-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: color-mix(in srgb, var(--accento) 16%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B1560C' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
  transition: transform var(--dur-2) var(--curva-uscita);
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq__risposta { padding: 0 var(--sp-3) var(--sp-3); }
.faq__risposta p { margin: 0; color: var(--inchiostro-tenue); font-size: var(--fs-6); }

.piede { background: var(--fondo-3); color: var(--fondo); padding-block: var(--sp-6) var(--sp-4); }
.piede a { color: color-mix(in srgb, var(--fondo) 88%, transparent); text-decoration: none; }
.piede a:hover { color: var(--accento); }
.piede__griglia { display: grid; gap: var(--sp-4); }
@media (min-width: 760px) { .piede__griglia { grid-template-columns: 1.4fr 1fr 1fr; } }
.piede__marchio img { height: var(--x-h-marchio-piede); width: auto; }
.piede__legale { font-size: var(--fs-8); color: color-mix(in srgb, var(--fondo) 62%, transparent); }
.piede__filetto { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: var(--filetto-sp) solid var(--x-filo-scuro); }
.piede .etichetta { background: var(--x-carta-scura); border-color: var(--x-filo-scuro); color: var(--fondo); }

/* la barra fissa copre il fondo: il piede e l'ultima sezione le lasciano
   spazio, o l'ultimo pulsante resta sotto la barra e non si tocca. */
main, .piede { scroll-margin-top: 5rem; }
body { padding-bottom: calc(var(--x-h-barra-fissa) + env(safe-area-inset-bottom)); }
@media (min-width: 980px) { body { padding-bottom: 0; } }

/* ==================================================================
   CORREZIONI DEL 2026-08-23, secondo giro di riscontri
   ================================================================== */

/* F2: il regalo dichiarato SUBITO, dentro il primo viewport. E' la sola
   cosa che l'impresa da' e che i concorrenti non danno, e nella pagina
   che converte da due anni stava sopra la piega. */
.regalo {
  display: flex; align-items: center; gap: 0.7rem;
  background: color-mix(in srgb, var(--accento) 14%, var(--carta));
  border: var(--filetto-sp) solid color-mix(in srgb, var(--accento) 42%, transparent);
  border-radius: var(--raggio);
  padding: 0.7rem 1rem;
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-6);
  max-width: 30rem;
}
.regalo svg { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; color: var(--accento-2); }
.regalo b { font-family: var(--font-etichetta); font-weight: 800; }

/* F1: i tre blocchi sotto l'apertura. Nella pagina che converte stanno
   li' e sono un principio di landing efficace: chiudono le tre obiezioni
   principali prima che il visitatore le formuli. Sostituiscono la fascia
   da quattro voci, che era una mia aggiunta e non c'era. */
.spunte {
  list-style: none; margin: var(--sp-5) 0 0; padding: 0;
  display: grid; gap: var(--sp-4);
}
@media (min-width: 760px) { .spunte { grid-template-columns: repeat(3, 1fr); } }
.spunta {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3);
  align-items: start;
  background: var(--carta);
  border: var(--filetto-sp) solid color-mix(in srgb, var(--filo) 60%, transparent);
  border-radius: var(--raggio);
  padding: var(--sp-3);
  box-shadow: var(--ombra-carta);
}
.spunta__ico {
  width: 2.7rem; height: 2.7rem; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto;
  background: color-mix(in srgb, var(--accento) 16%, var(--carta));
  color: var(--accento-2);
}
.spunta__ico svg { width: 1.45rem; height: 1.45rem; }
.spunta__ico svg [opacity="0.2"] { opacity: 1; fill: color-mix(in srgb, var(--accento) 32%, var(--carta)); }
.spunta b { display: block; font-family: var(--font-titolo); font-weight: var(--x-peso-titolo); font-size: var(--fs-5); margin-bottom: 0.2rem; }
.spunta span { font-size: var(--fs-7); color: var(--inchiostro-tenue); }

/* F13 + F14: la colonna accanto al modulo si asciuga. Spariscono il
   pulsante WhatsApp grande e il "oppure chiama": restano l'avviso sui
   tempi, una riga piccola per chi non vuole aspettare, e il ritratto alla
   sua proporzione naturale invece che schiacciato in un 3:2 che lo
   tagliava a meta'. */
.aside-contatto { display: grid; gap: var(--sp-3); align-content: start; }
.aside-contatto .pannello { aspect-ratio: auto; }
.aside-contatto .pannello picture { height: auto; }
.aside-contatto .pannello img { height: auto; }
.riga-whatsapp {
  display: inline-flex; align-items: center; gap: 0.5rem;
  align-self: start;
  font-size: var(--fs-7); color: var(--inchiostro-tenue);
  text-decoration: none;
  border-radius: var(--raggio-pill);
  /* Fondo bianco, e non e' una scelta di gusto: l'arancio di testo #B1560C
     sull'azzurro carico #E0ECF8 fa 4,17:1, sotto i 4,5 richiesti; sul bianco
     fa 4,99. Il colore resta quello, cambia il piano sotto. */
  background: var(--carta);
  border: var(--filetto-sp) solid var(--filo);
  padding: 0.5rem 0.9rem;
}
.riga-whatsapp b { color: var(--accento-2); font-weight: 700; }
.riga-whatsapp svg { width: 1rem; height: 1rem; color: var(--accento-2); flex: 0 0 auto; }
.riga-whatsapp:hover b { text-decoration: underline; }

/* Le fotografie senza didascalia tornano a essere solo fotografie. La
   classe resta per non rompere i selettori, ma non forza piu' nessuna
   proporzione: era lei a tagliare i ritratti verticali. */
.pannello--didascalia { aspect-ratio: auto; background: var(--carta); }
.pannello--didascalia picture, .pannello--didascalia img { height: auto; }

/* Regola generale, e la ragione per cui esiste: `.pannello picture` ha
   height:100%, che si risolve sull'altezza del genitore. Quando il pannello
   NON ha piu' una proporzione fissa (galleria a colonne, ritratti verticali)
   quel 100% si risolve su un'altezza automatica e collassa a zero: la
   fotografia sparisce e, peggio, non riserva spazio, quindi al caricamento
   la pagina salta. Dove la proporzione e' libera, l'altezza pure. */
.pannello:not([class*="r-"]) picture { height: auto; }
.pannello:not([class*="r-"]) img { height: auto; }

/* ==================================================================
   CORREZIONI DEL 2026-08-24, terzo giro di riscontri
   ================================================================== */

/* G1: la testata e' appiccicata SOLO su telefono, dove il pannello
   dell'hamburger non porta il preventivo e il marchio e' l'unico modo per
   tornare in cima. Su desktop resta ferma, perche' li' la pillola porta
   anche la chiamata all'azione e sarebbe un doppione della barra in basso.
   Il fondo resta trasparente: la pillola galleggia, e cio' che scorre le
   passa dietro. Sopra e sotto il diaframma si stringe, o il contenuto che
   passa nella fessura si legge a meta'. */
@media (max-width: 899px) {
  .testata { position: sticky; top: 0; z-index: 50; padding-block: 0.5rem; }
  .testata__pillola { box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--inchiostro) 55%, transparent), var(--ombra-carta); }
}

/* G2: le fotografie senza proporzione dichiarata dentro una griglia.
   Il pannello e' un elemento di griglia e per default si STIRA all'altezza
   della riga, che la decide la colonna di testo accanto; l'immagine dentro
   non lo segue, perche' `height: 100%` si risolve sull'altezza CALCOLATA
   del genitore, che sotto stiramento resta `auto`. Risultato misurato:
   182 px di fondo grigio sotto la foto del deposito e 155 sotto il ritratto.
   Il pannello smette di stirarsi e resta alto quanto la sua fotografia. */
.griglia > .pannello:not([class*="r-"]) { align-self: center; }

/* G4: due campi affiancati con etichette di lunghezza diversa. Quella di
   sinistra va a capo, quella di destra no, e i due menu a tendina finiscono
   a quote diverse. Il testo dell'etichetta non si accorcia (il modulo non si
   tocca): si allinea il CONTROLLO al fondo della cella, cosi' i due campi
   partono insieme in alto e finiscono insieme in basso, comunque vadano a
   capo le etichette. */
@media (min-width: 620px) {
  .campi--due > .campo { display: flex; flex-direction: column; }
  .campi--due > .campo > label:not(.casella),
  .campi--due > .campo > .campo__legenda { margin-bottom: auto; padding-bottom: 0.35rem; }
}

/* G5: l'icona al posto del numero. Il numero progressivo prometteva un
   ordine che in queste due sezioni non esiste (non sono passi, sono
   ragioni), e ripetuto identico in due sezioni diverse diventava rumore.
   Il cerchio resta, perche' e' il segno della pagina; dentro ci va un
   disegno a filo, dello stesso peso della freccia dei bottoni. */
.voce__icona {
  display: inline-grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: color-mix(in srgb, var(--accento) 15%, var(--carta));
  color: var(--accento-2);
  margin-bottom: var(--sp-2);
}
.voce__icona svg { width: 1.7rem; height: 1.7rem; display: block; }
/* Il duotone di Phosphor porta il secondo livello a `opacity: .2`, che sul
   fondo gia' arancione del cerchio sparisce. Si riporta a piena opacita' e
   gli si da' il colore del cerchio schiarito: due toni veri invece di uno
   sbiadito. */
.voce__icona svg [opacity="0.2"] { opacity: 1; fill: color-mix(in srgb, var(--accento) 32%, var(--carta)); }

/* G6: la pagina di ringraziamento non ha un menu, ma la pillola con il solo
   marchio resta sbilanciata. Una voce sola, e nel pannello di telefono non
   ci finisce: sotto i 900 px il menu si nasconde dietro l'hamburger, e un
   hamburger per una voce sola e' peggio del disequilibrio. */
.menu--sola-voce .menu__voci { display: flex; }

/* G3: il distintivo delle due strade era arancio scuro su tinta arancio al
   18 per cento e faceva 4,09:1, sotto i 4,5 richiesti. Non e' un difetto
   nuovo: era il controllo dei contrasti a essere rotto, perche' non sapeva
   leggere i colori nella forma `color(srgb ...)` che `color-mix` produce, e
   li trattava come se fossero su scala 0-255. Rimessa in piedi la misura, la
   coppia e' saltata fuori. Stessa mossa gia' usata per `.riga-whatsapp`: il
   colore del testo resta, cambia il piano sotto. Su bianco fa 4,99:1. */
.strada__badge {
  background: var(--carta);
  border: var(--filetto-sp) solid color-mix(in srgb, var(--accento) 42%, transparent);
}