/* ============================================================
   INDICE — stile.css (pagina di presentazione, efficienzadigitale.it)
   SEZIONE 0: COLORI E BASE
   SEZIONE 1: TESTATA
   SEZIONE 2: APERTURA
   SEZIONE 3: CORPO (TESTI, ELENCO, PROVA)
   SEZIONE 4: GARANZIE E CHI RISPONDE
   SEZIONE 5: MODULO PARLIAMONE
   SEZIONE 6: PIEDE E BOTTONI
   SEZIONE 7: DESKTOP
   SEZIONE 8: HOVER SOLO CON PUNTATORE
   SEZIONE 9: MOVIMENTO RIDOTTO
   ============================================================
   Stessa casa della demo: carta chiara, un solo accento, caratteri di
   sistema (nessun font esterno, nessuna chiamata a terzi). Mobile-first
   da 375 px, desktop target primario da 1024 (uno studio tecnico lavora al PC). */

/* === SEZIONE 0: COLORI E BASE === */
:root{
  --carta:#F6F5F1;
  --foglio:#FFFFFF;
  --inchiostro:#1C2128;
  --grigio:#5A6270;
  --linea:#DAD7CE;
  --accento:#0E5E52;
  --accento-fondo:#E6F0EE;
  --arancio-fondo:#FBEFD9;
  --raggio:12px;
  --carattere:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::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:17px/1.6 var(--carattere)}
.contenitore{max-width:1180px; margin:0 auto; padding:0 16px}
.colonna{max-width:46rem}           /* larghezza di lettura del testo */
h1{font-size:1.75rem; line-height:1.2; margin:16px 0 14px; letter-spacing:-.01em}
h2{font-size:1.35rem; line-height:1.25; margin:0 0 12px}
p{margin:0 0 16px}
a{color:var(--accento)}
:focus-visible{outline:3px solid var(--accento); outline-offset:2px}
.sezione{padding:40px 0; border-top:1px solid var(--linea)}
.sezione:first-of-type{border-top:0}
.piccolo{font-size:.9rem; color:var(--grigio)}

/* === SEZIONE 1: TESTATA === */
.testata{background:var(--foglio); border-bottom:1px solid var(--linea)}
.testata-riga{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 24px; padding-block:14px}
.marchio{margin:0; font-weight:700; font-size:1.1rem; letter-spacing:.01em}
.marchio a{color:inherit; text-decoration:none}
.di-chi{margin:0; font-size:.85rem; color:var(--grigio)}

/* === SEZIONE 2: APERTURA === */
/* padding-block e non padding: il margine laterale resta quello del contenitore (16 px; bug visto da telefono il 28/10) */
.apertura{padding-block:28px 36px}
.pretitolo{margin:0; font-size:.85rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--accento)}
.sottotitolo{font-size:1.1rem; margin-bottom:22px}
.sotto-bottone{margin:10px 0 0}
.finestra{margin:28px 0 0; background:var(--foglio); border:1px solid var(--linea); border-radius:var(--raggio); overflow:hidden; box-shadow:0 12px 32px rgba(28,33,40,.08)}
.finestra img{display:block; width:100%; height:auto}
.finestra figcaption{padding:10px 14px; font-size:.9rem; color:var(--grigio); border-top:1px solid var(--linea)}

/* === SEZIONE 3: CORPO (TESTI, ELENCO, PROVA) === */
.passi{margin:0 0 16px; padding-left:1.25rem; display:grid; gap:10px}
.passi li{padding-left:4px}
.prova{background:var(--foglio); border-left:4px solid var(--accento); border-radius:0 var(--raggio) var(--raggio) 0; padding:16px 18px; margin:0 0 16px}
.prova p:last-child{margin-bottom:0}
.numero-grande{display:block; font-size:2.4rem; line-height:1.05; font-weight:700; color:var(--accento); margin-bottom:6px}

/* === SEZIONE 4: GARANZIE E CHI RISPONDE === */
.garanzie{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px}
.garanzie li{background:var(--accento-fondo); border-radius:var(--raggio); padding:14px 16px}
.garanzie b{display:block; margin-bottom:2px}
.chi{display:grid; gap:20px}
.ritratto{margin:0; max-width:18rem}
.ritratto img{display:block; width:100%; height:auto}   /* ritaglio senza sfondo: niente cornice */
.ritratto figcaption{font-size:.9rem; color:var(--grigio); margin-top:8px}

/* === SEZIONE 5: CONTATTI PARLIAMONE === */
/* Strada C (28/10): email davanti, WhatsApp di riserva; il modulo verso Brevo si valuta dopo */
.contatti{display:flex; flex-wrap:wrap; gap:12px; margin:0 0 14px}
.contatti .bottone{text-align:center}
.privacy-testo{max-width:46rem}
.privacy-testo h2{margin-top:28px}

/* === SEZIONE 6: PIEDE E BOTTONI === */
.bottone{display:inline-block; font:inherit; font-weight:600; background:var(--accento); color:#fff; border:0; border-radius:999px; padding:12px 22px; cursor:pointer; text-decoration:none}
.bottone.secondario{background:none; color:var(--accento); border:1px solid var(--accento)}
.ps{margin-top:28px; padding-top:16px; border-top:1px dashed var(--linea)}
.piede{background:var(--foglio); border-top:1px solid var(--linea); margin-top:40px; padding:24px 0 32px; font-size:.9rem; color:var(--grigio)}
.piede p{margin:0 0 6px}

/* === SEZIONE 7: DESKTOP === */
@media (min-width:768px){
  h1{font-size:2.3rem}
  h2{font-size:1.6rem}
  .sezione{padding:52px 0}
  .apertura{padding-block:44px 52px}
  .garanzie{grid-template-columns:1fr 1fr}
  .chi{grid-template-columns:1fr 16rem; align-items:start}
  .chi .ritratto{order:2}
}
@media (min-width:1024px){
  h1{font-size:2.7rem}
  .apertura-griglia{display:grid; grid-template-columns:1.05fr 1fr; gap:40px; align-items:center}
  .apertura-griglia .finestra{margin-top:0}
}

/* === SEZIONE 8: HOVER SOLO CON PUNTATORE === */
@media (hover:hover) and (pointer:fine){
  .bottone:hover{filter:brightness(1.12)}
  .marchio a:hover{color:var(--accento)}
}

/* === SEZIONE 9: MOVIMENTO RIDOTTO === */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important; animation:none !important}
}