/* ==========================================================================
   Home — tornata 2 (01/10/2026): «PARTENDO DAL FRONT (O FUNNEL)», «devi fare come ti ho scritto, fine».
   Qui solo i pezzi nuovi della home: token e componenti vengono da style.css.
   Misure desktop in calc(N * var(--u)): 1px a 1536 di larghezza. Media query a 1100 e 760 px, come style.css.
   Movimento: solo .rivela (una volta), i numeri grandi e il tablet di style.css. Niente di nuovo che si muove.
   Fondi in ordine: terracotta · oliva · pesca (Chi sono) · sabbia (Di cosa mi occupo) · crema (Come prenotare) ·
   beige (Controlli online) · pesca (Domande frequenti) · crema (Contatti) · piede terracotta. Mai due uguali vicini.
   ========================================================================== */

.pagina-home main p,.pagina-home .domanda summary{text-wrap:pretty}
.pagina-home main h2{text-wrap:balance}

/* ---------- 3 · Chi sono — «sempre con quel colore crema, ma senza i microrganismi» ----------
   Il testo della cliente è lungo (circa 110 parole): frasi in paragrafi corti e vicini, l'ultima in evidenza come citazione. */
.pagina-home .chi{align-items:center}
.pagina-home .chi__testo p{margin-top:calc(14 * var(--u));max-width:54ch}
.pagina-home .chi__testo h2+p{margin-top:calc(26 * var(--u))}
.pagina-home .chi__citazione{max-width:calc(600 * var(--u));margin-top:calc(30 * var(--u))}
.pagina-home .chi__citazione p{margin:0;max-width:none;font:inherit;line-height:inherit;color:inherit}
.pagina-home .chi__testo .freccia-link{margin-top:calc(30 * var(--u))}

/* ---------- 4 · Di cosa mi occupo — «lo farei marrone chiaro» ----------
   La sabbia #D9BFAE (era il fondo del Microbiota della home, che esce). Sopra, l'occhiello oliva scuro e il corsivo
   marrone scuro, come allora: l'oliva #61654B e il terracotta dei titoli su questo fondo si leggono poco. Le schede restano bianche. */
.pagina-home .aree--marrone{background:#D9BFAE}
.pagina-home .aree--marrone .occhiello{color:#45482F}
.pagina-home .aree--marrone h2{color:#282828}
.pagina-home .aree--marrone h2 em{color:#6E4636}
.pagina-home .aree--marrone .area{box-shadow:0 2px 14px rgba(78,48,30,.10),0 1px 3px rgba(78,48,30,.06)}
.pagina-home .aree--marrone .area:hover{box-shadow:0 12px 30px rgba(78,48,30,.16),0 2px 6px rgba(78,48,30,.08)}

/* ---------- 6 · Controlli online — «Lasciare solo "Dopo la prima visita, i controlli anche da casa"» ----------
   Tolti paragrafo, spunte e microbi: il titolo si fa più grande e regge da solo accanto al tablet; il pulsante scende sotto. */
.pagina-home .online__griglia{grid-template-columns:minmax(0,1fr) calc(520 * var(--u));gap:calc(96 * var(--u));max-width:calc(1260 * var(--u))}
.pagina-home .online__testo .titolo-sezione{margin-top:calc(16 * var(--u));font-size:max(36px,calc(56 * var(--u)));line-height:1.04}
.pagina-home .online__testo .titolo-sezione em{display:block}
.pagina-home .online__testo .pulsante{margin-top:calc(40 * var(--u))}

/* ---------- 7 · Domande frequenti — senza la scheda Prezzi («Togliere dal funnel QUANTO COSTA») ----------
   Una colonna sola, al centro: la stessa scheda bianca di prima, più stretta, col titolo centrato. */
.pagina-home .faq__colonna{max-width:calc(880 * var(--u))}
.pagina-home .faq .scheda{padding:calc(48 * var(--u)) calc(52 * var(--u)) calc(44 * var(--u))}
.pagina-home .faq .scheda>.occhiello,.pagina-home .faq .scheda>.titolo-sezione{text-align:center}
.pagina-home .faq .scheda>.titolo-sezione{margin-top:calc(12 * var(--u))}
.pagina-home .faq .domande{margin-top:calc(32 * var(--u))}

/* ---------- 8 · Contatti — «togliere sempre chiama», «lasciare scrivi su whattsapp e inserire questo riquadro» ----------
   Da computer due colonne: a sinistra il titolo «Contatti» e il solo pulsante WhatsApp, a destra il modulo completo di
   Contatti (sorgenti/_modulo.html). Il modulo è alto: titolo e pulsante stanno a metà della sua altezza, così a sinistra
   non resta un vuoto sotto. Da telefono uno sotto l'altro. */
.pagina-home .contatto__griglia{grid-template-columns:minmax(0,1fr) calc(760 * var(--u));gap:calc(96 * var(--u));align-items:center;max-width:calc(1280 * var(--u))}
.pagina-home .contatto__sx{padding-bottom:calc(40 * var(--u))}
.pagina-home .contatto__sx .titolo-sezione{margin:0;font-size:max(40px,calc(72 * var(--u)));line-height:1}
.pagina-home .contatto__azioni{margin-top:calc(34 * var(--u))}
.pagina-home .contatto__modulo{min-width:0}
.pagina-home .contatto__modulo .modulo--pieno{max-width:none}

@media (max-width:1100px){
  .pagina-home .chi{grid-template-columns:320px 1fr;gap:40px}
  .pagina-home .online__griglia{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
  .pagina-home .contatto__griglia{grid-template-columns:1fr;gap:32px;max-width:760px}
  .pagina-home .contatto__sx{padding-bottom:0}
}
@media (max-width:760px){
  .pagina-home .chi{grid-template-columns:1fr;gap:30px}
  .pagina-home .chi__testo p{margin-top:12px}
  .pagina-home .chi__testo h2+p{margin-top:20px}
  .pagina-home .chi__citazione{margin-top:24px;padding-left:18px}
  .pagina-home .chi__testo .freccia-link{margin-top:24px}
  .pagina-home .online__griglia{grid-template-columns:1fr;gap:34px}
  .pagina-home .online__testo .titolo-sezione{font-size:36px}
  .pagina-home .online__testo .pulsante{margin-top:26px}
  .pagina-home .faq .scheda{padding:30px 18px 22px}
  .pagina-home .faq .domande{margin-top:22px}
  .pagina-home .contatto__sx .titolo-sezione{font-size:40px}
  .pagina-home .contatto__azioni{margin-top:22px}
  .pagina-home .contatto__griglia{gap:28px}
}