/* =====================================================================
   Consumerismo No Profit APS ETS - Sportello +Tutela
   Foglio di stile unico, condiviso da tutte le pagine.
   Ver. 5 - settembre 2026 - BOZZA

   Palette: bianco predominante, navy #233646 per testo e richiami
   strutturali, arancio #FC4600 riservato alle azioni.

   SFONDO CON LO SCUDO
   Le hero non usano piu' i cerchi decorativi. Al loro posto lo scudo di
   Consumerismo in dissolvenza, richiamato da .hero:before.
   Il file immagini/scudo-consumerismo.png e' stato ricavato ritagliando
   lo scudo dal logo ufficiale e rendendo trasparente tutto il resto:
   la "C" e' quindi un vuoto vero, non un pieno bianco.
   MEGLIO ANCORA: se esiste il logo in SVG, estrarre da li' il tracciato
   dello scudo e sostituire il PNG. Un SVG resta nitido a ogni ingrandimento
   e pesa molto meno. Vedi immagini/LEGGIMI.txt
   ===================================================================== */


:root{
  --arancio:#FC4600;
  --arancio-scuro:#D63B00;
  --navy:#233646;
  --tinta:#F1F4F7;
  --bordo:#DAE1E8;
  --testo:#233646;
  --grigio:#67737F;
  /* Altezza dell'header sticky del tema WordPress. Serve a far fermare
     la barra laterale sotto al menu invece che sotto al bordo dello
     schermo. DA-TARARE sul sito reale misurando l'header vero. */
  --offset-header:98px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Titillium Web',sans-serif;color:var(--testo);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
a{color:var(--arancio-scuro);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.2;font-weight:700;color:var(--navy)}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;font-weight:700;color:var(--navy);margin-bottom:10px;display:flex;align-items:center;gap:9px}
.eyebrow:before{content:"";width:22px;height:3px;background:var(--arancio);display:inline-block}

/* La navbar non fa piu' parte di queste pagine: la fornisce il tema
   WordPress. Le regole relative sono state rimosse per non entrare in
   conflitto con quelle del tema. */

/* ---------- BREADCRUMB ---------- */
.breadcrumb{border-bottom:1px solid var(--bordo);background:#fff}
.breadcrumb .wrap{padding-top:14px;padding-bottom:14px;font-size:.8rem;color:var(--grigio)}
.breadcrumb a{color:var(--grigio);font-weight:600}
.breadcrumb a:hover{color:var(--arancio-scuro)}
.breadcrumb span.sep{margin:0 8px;color:#B9C4CE}

/* ---------- HERO AREA ---------- */
.hero{background:#fff;padding:50px 0 44px;position:relative;overflow:hidden;border-bottom:1px solid var(--bordo)}
/* scudo in dissolvenza al posto dei cerchi decorativi */
.hero:before{
  content:"";position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  width:420px;height:420px;z-index:0;pointer-events:none;
  background:url('../immagini/scudo-consumerismo.png') no-repeat center/contain;
  opacity:.07;
  -webkit-mask-image:linear-gradient(to left, #000 30%, transparent 100%);
  mask-image:linear-gradient(to left, #000 30%, transparent 100%);
}
.hero .wrap{position:relative;z-index:2}
.hero-inner{max-width:770px}
.badge-area{display:inline-flex;align-items:center;gap:9px;background:var(--navy);border:1px solid var(--navy);padding:9px 18px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#fff;margin-bottom:18px;border-radius:2px}
.badge-area svg{width:16px;height:16px;color:var(--arancio);flex:none}
.hero h1{font-size:2.5rem;font-weight:900;margin-bottom:16px}
.hero p.claim{font-size:1.12rem;color:var(--grigio);max-width:640px;margin-bottom:26px}
.hero-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.btn-grande{background:var(--arancio);color:#fff;padding:16px 36px;border-radius:3px;font-weight:700;font-size:1rem;text-transform:uppercase;letter-spacing:.05em;display:inline-flex;align-items:center;gap:10px;box-shadow:0 4px 16px rgba(252,70,0,.24)}
.btn-grande:hover{background:var(--arancio-scuro);color:#fff;text-decoration:none}
.btn-grande svg{width:18px;height:18px}
.hero-cta .nota{font-size:.9rem;color:var(--grigio)}

/* ---------- LAYOUT ---------- */
.layout{display:grid;grid-template-columns:290px 1fr;gap:0;align-items:start}
.col-sx{border-right:1px solid var(--bordo);padding:40px 28px 40px 22px}
.col-dx{padding:40px 0 40px 44px}

/* ---------- SIDEBAR ---------- */
.sidebar{position:sticky;top:var(--offset-header);padding-right:6px}
.sidebar::-webkit-scrollbar{width:5px}
.sidebar::-webkit-scrollbar-thumb{background:var(--bordo);border-radius:3px}
.sidebar h2{font-size:1rem;text-transform:uppercase;letter-spacing:.08em;padding-bottom:12px;border-bottom:3px solid var(--navy);margin-bottom:6px}
.sidebar .intro{font-size:.82rem;color:var(--grigio);margin:10px 0 16px}
.fam-side{margin-bottom:14px}
.fam-side > .tit{font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700;color:var(--arancio-scuro);padding:11px 0 6px;border-top:1px solid var(--bordo)}
.fam-side ul{list-style:none}
.fam-side li .voce{display:flex;align-items:flex-start;gap:9px;padding:6px 8px 6px 6px;font-size:.87rem;color:var(--navy);font-weight:600;line-height:1.3;border-radius:3px;border-left:2px solid transparent}
.fam-side li a.voce:hover{color:var(--arancio-scuro);text-decoration:none;background:var(--tinta);border-left-color:var(--arancio)}
.fam-side li a.corrente{background:var(--tinta);border-left-color:var(--navy);color:var(--navy);cursor:default}
.fam-side li a.corrente:hover{text-decoration:none;color:var(--navy)}
/* aree la cui pagina non e' ancora pronta: visibili ma non cliccabili */
.fam-side li .non-pronta{color:#93A2AE;font-weight:600;cursor:default}
.fam-side li .non-pronta .pallino{opacity:.45}
.fam-side li .non-pronta em{display:block;font-style:normal;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:#AAB6C0;font-weight:700;margin-top:1px}
.pallino{flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:#C3CDD6;margin-top:7px}
.pallino.reg{background:var(--arancio)}
.legenda{font-size:.74rem;color:var(--grigio);border-top:1px solid var(--bordo);padding-top:12px;margin-top:6px;display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.sidebar-mobile{display:none}

/* ---------- CONTENUTO ---------- */
.contenuto > section{margin-bottom:46px}
.blocco{border-top:1px solid var(--bordo);padding-top:36px}
.blocco h2{font-size:1.65rem;margin-bottom:14px}
.blocco p{margin-bottom:13px;color:#4A5763}
.intro-area p{font-size:1.02rem}

/* ---------- FORM ---------- */
.form-testata h2{font-size:1.85rem;margin-bottom:8px}
.form-testata .sub{color:var(--grigio);font-size:1rem;margin-bottom:22px}
.form-box{background:var(--tinta);border:1px solid var(--bordo);border-left:4px solid var(--navy);border-radius:3px;padding:28px}
.form-box .step{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--navy);font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:9px}
.form-box .step:before{content:"";width:18px;height:3px;background:var(--arancio)}
.area-fissa{grid-column:1/-1;background:#fff;border:1px solid var(--bordo);border-radius:3px;padding:13px 16px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.area-fissa .et{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--grigio);font-weight:700}
.area-fissa .val{font-size:1rem;font-weight:700;color:var(--navy)}
.area-fissa a{font-size:.8rem;font-weight:600}
.griglia-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.campo{display:flex;flex-direction:column}
.campo.full{grid-column:1/-1}
label{font-size:.85rem;font-weight:600;margin-bottom:6px;color:var(--navy)}
label .req{color:var(--arancio-scuro)}
.hint{font-size:.78rem;color:var(--grigio);font-weight:400;margin-bottom:6px}
input[type=text],input[type=email],input[type=tel],select,textarea{
  font-family:inherit;font-size:.95rem;padding:11px 13px;border:1px solid var(--bordo);border-radius:3px;background:#fff;color:var(--testo);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--arancio);outline-offset:-1px;border-color:var(--arancio)}
textarea{min-height:120px;resize:vertical}
.contatore{font-size:.75rem;color:var(--grigio);text-align:right;margin-top:4px}
.radio-riga{display:flex;gap:24px;flex-wrap:wrap;margin-top:4px}
.radio-riga label{font-weight:400;font-size:.9rem;display:flex;align-items:center;gap:7px;margin:0}
.privacy{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;font-weight:400;margin-top:4px}
.privacy input{margin-top:4px}
.btn-invia{background:var(--arancio);color:#fff;border:none;padding:15px 42px;font-family:inherit;font-size:1rem;font-weight:700;border-radius:3px;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;box-shadow:0 4px 14px rgba(252,70,0,.22)}
.btn-invia:hover{background:var(--arancio-scuro)}

/* ---------- CASI TRATTATI ---------- */
.griglia-casi{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.caso{border:1px solid var(--bordo);border-top:3px solid var(--navy);border-radius:3px;padding:20px;background:#fff}
.caso h3{font-size:.98rem;margin-bottom:6px}
.caso p{font-size:.86rem;color:var(--grigio);line-height:1.5;margin:0}

/* ---------- PASSI ---------- */
.passi{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px;counter-reset:p}
.passo{background:var(--tinta);border:1px solid var(--bordo);border-radius:3px;padding:22px;position:relative}
.passo .num{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;margin-bottom:12px}
.passo h3{font-size:.98rem;margin-bottom:6px}
.passo p{font-size:.85rem;color:var(--grigio);line-height:1.5;margin:0}

/* ---------- RIQUADRO PROCEDURA ---------- */
.riquadro{border:1px solid var(--bordo);border-left:4px solid var(--arancio);border-radius:3px;padding:26px;background:#fff;margin-top:22px}
.riquadro .tit{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.riquadro .tit svg{width:22px;height:22px;color:var(--arancio);flex:0 0 22px}
.riquadro h3{font-size:1.05rem;margin:0}
.riquadro p{font-size:.92rem;color:#4A5763;margin-bottom:10px}
.riquadro p:last-child{margin-bottom:0}

/* ---------- DOCUMENTI ---------- */
.doc-lista{list-style:none;margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.doc-lista li{font-size:.9rem;padding-left:26px;position:relative;color:#4A5763}
.doc-lista li:before{content:"";position:absolute;left:0;top:6px;width:12px;height:12px;border:2px solid var(--arancio);border-radius:2px}

/* ---------- TESTIMONIANZE ---------- */
.testi{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.testi-box{border:1px solid var(--bordo);border-top:3px solid var(--navy);border-radius:3px;padding:22px;background:#fff;display:flex;flex-direction:column}
.stelle{display:flex;gap:3px;margin-bottom:12px}
.stelle svg{width:16px;height:16px;color:var(--arancio);fill:var(--arancio)}
.testi-box blockquote{font-size:.92rem;color:#4A5763;line-height:1.55;margin:0 0 16px;flex:1}
/* Virgolettone decorativo. Scritto con il carattere vero e non con la
   sequenza di escape \201C: quest'ultima si rompe se il CSS passa da
   catene di elaborazione che interpretano le barre rovesciate, ed e'
   quello che aveva prodotto una "C" al posto della virgoletta. */
.testi-box blockquote:before{content:"“";display:block;font-family:Georgia,'Times New Roman',serif;font-size:3rem;line-height:.75;color:var(--bordo);margin-bottom:2px}
.testi-firma{font-size:.82rem;color:var(--grigio);border-top:1px solid var(--bordo);padding-top:11px}
.testi-firma strong{display:block;color:var(--navy);font-size:.88rem}
.segnaposto{background:#FFF6F2;border:1px dashed var(--arancio);color:var(--arancio-scuro);font-size:.78rem;padding:8px 10px;border-radius:3px;margin-bottom:12px;font-weight:600}
.testi-nota{font-size:.8rem;color:var(--grigio);margin-top:16px;padding-left:14px;border-left:3px solid var(--bordo)}

/* ---------- BARRA RECENSIONI GOOGLE ---------- */
.google-barra{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:var(--tinta);border:1px solid var(--bordo);border-left:4px solid var(--navy);border-radius:3px;padding:18px 22px;margin-top:18px}
.gb-sx{display:flex;align-items:center;gap:16px}
.gb-punteggio{font-size:2rem;font-weight:900;color:var(--navy);line-height:1}
.gb-conta{font-size:.82rem;color:var(--grigio)}
.gb-link{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}

/* ---------- FAQ ---------- */
.faq{margin-top:18px;border-top:1px solid var(--bordo)}
.faq details{border-bottom:1px solid var(--bordo)}
.faq summary{cursor:pointer;list-style:none;padding:17px 40px 17px 0;font-weight:700;font-size:.98rem;color:var(--navy);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:8px;top:12px;color:var(--arancio);font-size:1.5rem;font-weight:400;line-height:1}
.faq details[open] summary:after{content:"–"}
.faq .risposta{padding:0 10px 18px 0;font-size:.92rem;color:#4A5763}
.faq .risposta p{margin-bottom:10px}
.faq .risposta p:last-child{margin-bottom:0}

/* ---------- CTA FINALE ---------- */

/* ---------- FOOTER ---------- */
footer{background:var(--navy);color:#C2CDD6;padding:48px 0 26px;font-size:.88rem;margin-top:20px;border-top:4px solid var(--arancio)}
footer h4{color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px}
.foot-griglia{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:30px}
footer a{color:#C2CDD6}
footer a:hover{color:var(--arancio)}
footer ul{list-style:none}
footer li{margin-bottom:8px}
.foot-basso{border-top:1px solid rgba(255,255,255,.16);padding-top:20px;font-size:.8rem;color:#93A2AE}

@media(max-width:980px){
  .layout{grid-template-columns:1fr}
  .col-sx{border-right:none;padding:24px 0 0}
  .col-dx{padding:10px 0 30px}
  .sidebar{position:static;max-height:none;overflow:visible;margin-bottom:30px;border:1px solid var(--bordo);border-top:3px solid var(--navy);border-radius:3px;padding:0}
  .sidebar-desktop-tit,#side-desktop{display:none}
  .sidebar-mobile{display:block}
  .sidebar-mobile summary{cursor:pointer;list-style:none;padding:16px 20px;font-weight:700;font-size:1rem;color:var(--navy);background:var(--tinta);display:flex;justify-content:space-between;align-items:center}
  .sidebar-mobile summary::-webkit-details-marker{display:none}
  .sidebar-mobile summary:after{content:"+";color:var(--arancio);font-size:1.6rem;line-height:1}
  .sidebar-mobile[open] summary:after{content:"–"}
  .sidebar-corpo{padding:14px 20px 18px}
  .legenda{padding:0 20px 16px;border-top:none}
  .griglia-casi,.passi,.doc-lista,.testi{grid-template-columns:1fr}
  .foot-griglia{grid-template-columns:1fr;gap:26px}
  .hero h1{font-size:1.9rem}
}
@media(max-width:620px){
  .griglia-form{grid-template-columns:1fr}
  .form-box{padding:20px}
  .btn-grande{width:100%;justify-content:center}
}

.rassicuratori{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.rass{background:#fff;border:1px solid var(--bordo);border-top:3px solid var(--navy);padding:18px;border-radius:3px}
.rass .ico{width:28px;height:28px;color:var(--arancio);margin-bottom:8px}
.rass h3{font-size:.92rem;margin-bottom:4px}
.rass p{font-size:.82rem;color:var(--grigio);line-height:1.45}

/* il form ha fondo beige per staccare dal bianco della pagina */.confronto{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}
.conf-box{border:1px solid var(--bordo);border-radius:3px;padding:24px;background:#fff}
.conf-box.evid{border-color:var(--bordo);border-top:4px solid var(--navy);background:var(--tinta)}
.conf-box h3{font-size:1rem;margin-bottom:12px}
.conf-box ul{list-style:none}
.conf-box li{font-size:.88rem;padding-left:22px;position:relative;margin-bottom:8px;color:#4A5763}
.conf-box li:before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:#CFC8BF}
.conf-box.evid li:before{background:var(--arancio)}
.striscia{border:1px solid var(--bordo);border-left:4px solid var(--navy);border-radius:3px;padding:26px;background:var(--tinta)}
.striscia h3{font-size:1.1rem;margin-bottom:10px}
.striscia p{font-size:.92rem;color:var(--grigio);margin-bottom:14px}
.link-freccia{font-weight:700;font-size:.88rem;text-transform:uppercase;letter-spacing:.04em;color:var(--arancio-scuro)}

/* ---------- MESSAGGI DI ESITO DEL FORM ---------- */
.esito{border-radius:3px;padding:16px 20px;margin-bottom:22px;font-size:.93rem;border:1px solid var(--bordo)}
.esito.ok{border-left:4px solid #1E7B45;background:#F1F8F3;color:#155C33}
.esito.ko{border-left:4px solid var(--arancio);background:#FFF6F2;color:var(--arancio-scuro)}
.esito strong{display:block;margin-bottom:3px}
.err-campo{border-color:var(--arancio) !important;background:#FFFBFA}
.err-testo{font-size:.78rem;color:var(--arancio-scuro);font-weight:600;margin-top:5px}

/* ---------- ARTICOLI DELL'AREA (dal database) ---------- */
.articoli{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.art{border:1px solid var(--bordo);border-radius:3px;padding:20px;background:#fff;display:flex;flex-direction:column}
.art .data{font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;color:var(--grigio);font-weight:700;margin-bottom:8px}
.art h3{font-size:1rem;margin-bottom:7px;line-height:1.3}
.art p{font-size:.86rem;color:var(--grigio);line-height:1.5;margin:0 0 14px;flex:1}
.art a.leggi{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.vuoto{border:1px dashed var(--bordo);border-radius:3px;padding:22px;color:var(--grigio);font-size:.9rem;background:var(--tinta)}
@media(max-width:980px){.articoli{grid-template-columns:1fr}}


/* ============================================================
   NOTA PER CHI MANUTIENE QUESTO FILE
   Da questo punto in poi il foglio contiene le correzioni
   applicate in fase di revisione (settembre 2026), aggiunte in
   sequenza. Alcune regole sovrascrivono quelle precedenti: la
   versione che vale e' sempre l'ULTIMA in ordine di lettura.
   Le regole che contano sono raccolte nei blocchi con intestazione
   "ASSETTO DEFINITIVO", "TRE ALLINEAMENTI", "CORREZIONI MOBILE"
   e in quelle successive. Tutto e' stato verificato al pixel a
   390 e 1280 px su piututela.html e area-energia-luce-gas.html.
   Prima di riorganizzare il file, rifare lo stesso confronto.
   ============================================================ */
/* ---- ALTERNANZA DEI FONDI: spezza il bianco della pagina ----
   Le sezioni del contenuto alternano fondo bianco e fondo tinta,
   cosi la lettura non e' un blocco unico. Le sezioni marcate
   .blocco-pieno hanno il fondo navy con testo chiaro. */
.contenuto > section{padding:38px 0}
.contenuto > section:nth-of-type(even){
  background:var(--tinta);
  border-top:1px solid var(--bordo);
  border-bottom:1px solid var(--bordo);
  margin:0 -28px;
  padding-left:28px;
  padding-right:28px;
}
.contenuto > section:nth-of-type(even) .articolo,
.contenuto > section:nth-of-type(even) .passo,
.contenuto > section:nth-of-type(even) .domanda{background:#fff}

/* Sezione a fondo pieno, da usare per un blocco che deve staccare */
.blocco-pieno{
  background:var(--navy);
  color:#fff;
  margin:0 -28px;
  padding:40px 28px;
  border:0;
}
.blocco-pieno h2,.blocco-pieno h3{color:#fff}
.blocco-pieno p{color:#D6DEE6}
.blocco-pieno .eyebrow{color:#fff}
.blocco-pieno .eyebrow:before{background:var(--arancio)}
.blocco-pieno a:not(.btn-grande){color:#fff;text-decoration:underline}

/* Accento arancione sui titoli di sezione, per dare ritmo */
.contenuto > section > h2:first-of-type,
.contenuto > section .eyebrow + h2{position:relative;padding-top:4px}

@media(max-width:860px){
  .contenuto > section:nth-of-type(even),
  .blocco-pieno{margin:0 -18px;padding-left:18px;padding-right:18px}
}

/* ---- BOX IN FONDO ALLA COLONNA DELLE AREE ----
   Riempie lo spazio che resta sotto l'elenco e offre un'uscita
   a chi non trova la propria area. */
.side-contatti{margin-top:26px;padding:20px;background:var(--navy);border-radius:3px;color:#fff}
.side-contatti-tit{font-weight:800;font-size:.98rem;margin-bottom:8px;color:#fff}
.side-contatti p{font-size:.88rem;line-height:1.55;color:#D6DEE6;margin-bottom:14px}
.btn-side{display:block;text-align:center;background:var(--arancio);color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;padding:11px 14px;border-radius:2px;text-decoration:none}
.btn-side:hover{background:var(--arancio-scuro)}
@media(max-width:860px){.side-contatti{margin-top:18px}}
.sidebar{max-height:none;overflow:visible}
.blocco-pieno .passo{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18)}
.blocco-pieno .passo h3{color:#fff}
.blocco-pieno .passo p{color:#D6DEE6}
.blocco-pieno .passo .num{background:var(--arancio);color:#fff}
.contenuto > section.blocco-pieno{border-top:0;border-bottom:0}
/* ---- CORREZIONI ---- */
/* Il blocco pieno rientra il contenuto come le altre sezioni */
.contenuto > section.blocco-pieno{padding:44px 34px;margin:34px -28px;border-top:0;border-bottom:0}
.blocco-pieno > *{max-width:100%}
/* La colonna di sinistra ha un fondo proprio fino in fondo */
.sidebar{background:transparent}
/* Le sezioni alternate non ereditano colori chiari dal blocco pieno */
.contenuto > section:not(.blocco-pieno){color:var(--testo)}
.contenuto > section:not(.blocco-pieno) h2,
.contenuto > section:not(.blocco-pieno) h3{color:var(--navy)}
.contenuto > section:not(.blocco-pieno) p{color:var(--testo)}
.contenuto > section:not(.blocco-pieno) .eyebrow{color:var(--navy)}
@media(max-width:860px){
  .contenuto > section.blocco-pieno{padding:32px 18px;margin:24px -18px}
}
/* ---- SLOGAN: firma del servizio ---- */
.slogan{
  margin-top:30px;padding-top:22px;
  border-top:1px solid var(--bordo);
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.5rem;line-height:1.35;font-weight:400;font-style:italic;
  color:var(--navy);max-width:560px;position:relative;
}
.slogan:before{content:"";position:absolute;top:-1px;left:0;width:64px;height:3px;background:var(--arancio)}
@media(max-width:860px){.slogan{font-size:1.22rem;margin-top:24px}}

/* ---- ALLINEAMENTO UNIFORME DELLE SEZIONI ----
   Tutte le sezioni del contenuto hanno lo stesso rientro,
   a prescindere dal fondo: cosi i riquadri non risultano sfalsati. */
.contenuto > section,
.contenuto > section:nth-of-type(even),
.contenuto > section.blocco-pieno{
  margin-left:-28px;margin-right:-28px;
  padding-left:28px;padding-right:28px;
  box-sizing:border-box;
}
.contenuto > section{margin-top:0;margin-bottom:0;padding-top:38px;padding-bottom:38px}
.contenuto > section.blocco-pieno{margin-top:34px;margin-bottom:34px;padding-top:44px;padding-bottom:44px}
@media(max-width:860px){
  .contenuto > section,
  .contenuto > section:nth-of-type(even),
  .contenuto > section.blocco-pieno{margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px}
}
/* ---- COLONNA AREE: rientro interno, il testo non tocca il bordo ---- */
.col-sx{background:var(--tinta);border-right:1px solid var(--bordo);padding:40px 26px 40px 26px}
.sidebar{padding-right:0}
.sidebar-desktop-tit,.legenda,#side-desktop{padding-left:0}
@media(max-width:860px){.col-sx{background:#fff;padding:24px 0 0}}
/* ---- ALLINEAMENTO DEFINITIVO ----
   Nessuna sezione esce piu dalla colonna: i fondi colorati diventano
   riquadri con rientro proprio, allineati esattamente al testo delle
   altre sezioni. Cosi filetti, titoli e riquadri partono tutti dallo
   stesso punto. */
.contenuto > section,
.contenuto > section:nth-of-type(even),
.contenuto > section.blocco-pieno{
  margin-left:0;margin-right:0;
  padding-left:0;padding-right:0;
}
.contenuto > section{padding-top:34px;padding-bottom:0}
.contenuto > section:nth-of-type(even){
  background:transparent;border-top:0;border-bottom:0;
}
/* Il blocco a fondo pieno e' un riquadro, non una fascia */
.contenuto > section.blocco-pieno{
  background:var(--navy);
  border-radius:3px;
  padding:34px 30px;
  margin-top:34px;margin-bottom:10px;
}
.contenuto > section.blocco-pieno .blocco,
.contenuto > section.blocco-pieno.blocco{border-top:0;padding-top:0}
@media(max-width:860px){
  .contenuto > section.blocco-pieno{padding:26px 20px}
}
/* ---- FONDI ALTERNATI SENZA SPOSTARE IL CONTENUTO ----
   Il fondo si estende oltre la colonna con uno pseudo elemento
   in posizione assoluta: il testo resta allineato a tutte le
   altre sezioni. */
.contenuto > section:nth-of-type(even){position:relative;z-index:0}
.contenuto > section:nth-of-type(even):before{
  content:"";position:absolute;z-index:-1;
  top:0;bottom:0;left:-28px;right:-28px;
  background:var(--tinta);
  border-top:1px solid var(--bordo);
  border-bottom:1px solid var(--bordo);
}
.contenuto > section:nth-of-type(even){padding-bottom:34px}
.contenuto > section:nth-of-type(even) .riquadro,
.contenuto > section:nth-of-type(even) .domanda{background:#fff}

/* Il riquadro dentro il blocco blu si adatta al fondo scuro */
.blocco-pieno .riquadro{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  border-left:4px solid var(--arancio);
  color:#D6DEE6;
}
.blocco-pieno .riquadro h3,.blocco-pieno .riquadro strong{color:#fff}
.blocco-pieno .riquadro p{color:#D6DEE6}

/* Nessun elemento interno esce dal riquadro blu */
.blocco-pieno > *{max-width:100%;box-sizing:border-box}
/* ==== ASSETTO DEFINITIVO DELLA PAGINA AREA ====
   Regole finali: sovrascrivono tutte le precedenti.
   1. La colonna sinistra si estende per tutta l'altezza della pagina.
   2. Nessuna fascia esce dalla colonna del contenuto: i fondi
      colorati stanno esattamente nella stessa larghezza del modulo
      e del blocco blu. Tutto parte e finisce sulla stessa verticale. */

/* 1. Colonna sinistra a tutta altezza */
.layout{align-items:stretch}
.col-sx{align-self:stretch}
.sidebar{position:sticky;top:var(--offset-header)}

/* 2. Fondi entro la colonna: stessa larghezza di tutto il resto */
.contenuto > section:nth-of-type(even){position:relative;z-index:0;padding:34px 30px}
.contenuto > section:nth-of-type(even):before{
  left:0;right:0;
  border:1px solid var(--bordo);
  border-radius:3px;
}
.contenuto > section.blocco-pieno{padding:34px 30px;margin-top:34px;margin-bottom:0}
.contenuto > section:nth-of-type(odd):not(#form):not(.blocco-pieno){padding-left:0;padding-right:0}
@media(max-width:860px){
  .contenuto > section:nth-of-type(even),
  .contenuto > section.blocco-pieno{padding:26px 18px}
}
.contenuto > section.blocco-pieno{margin-bottom:34px}
.contenuto > section:nth-of-type(even){margin-top:0}
/* ==== CORREZIONI MOBILE (da schermate su smartphone) ==== */
@media(max-width:860px){
  /* 1. Le griglie a due colonne vanno in colonna unica */
  .confronto,.griglia-casi,.doc-lista,.passi,.testi{grid-template-columns:1fr !important}
  /* 2. Spazio tra le sezioni: niente riquadri attaccati */
  .contenuto > section{margin-top:22px;padding-top:0}
  .contenuto > section:nth-of-type(even),
  .contenuto > section.blocco-pieno{padding:24px 18px}
  .contenuto > section.blocco-pieno{margin-top:22px;margin-bottom:0}
  /* 3. Colonna aree: il riquadro blu e la legenda hanno lo stesso rientro delle voci */
  .col-sx{padding:20px 0 0}
  .side-contatti{margin:18px 0 6px;border-radius:3px}
  .legenda{margin:14px 0 0}
  .side-contatti,.legenda,.sidebar-desktop-tit{margin-left:0;margin-right:0}
}
/* Le colonne della griglia non possono allargarsi oltre lo spazio disponibile */
.layout > *{min-width:0}
.col-dx,.contenuto{min-width:0;max-width:100%}
input,select,textarea{max-width:100%;box-sizing:border-box}
select{width:100%}
@media(max-width:860px){
  #form{margin-bottom:22px}
  .contenuto > section + section{margin-top:22px}
}
@media(max-width:860px){.rassicuratori{grid-template-columns:1fr !important}.rass{min-width:0}}
/* ==== ALLINEAMENTO DEL TESTO TRA SEZIONI CON E SENZA RIQUADRO ====
   Il testo delle sezioni senza fondo parte alla stessa verticale
   del testo dentro i riquadri (bordo + rientro interno). */
.contenuto > section:nth-of-type(odd):not(#form):not(.blocco-pieno){padding-left:31px;padding-right:31px}
.contenuto > section.blocco-pieno{margin-bottom:34px}
@media(max-width:860px){
  .contenuto > section:nth-of-type(odd):not(#form):not(.blocco-pieno){padding-left:19px;padding-right:19px}
  .contenuto > section.blocco-pieno{margin-bottom:22px}
}
/* ==== TRE ALLINEAMENTI (home) ====
   1. Spazio anche prima delle sezioni con fondo.
   2. Il filetto delle sezioni senza fondo parte dal testo, non dal bordo.
   3. I riquadri dentro le sezioni senza fondo tornano a filo con gli altri riquadri. */
.contenuto > section:nth-of-type(even){margin-top:34px}
.contenuto > section:nth-of-type(odd).blocco{border-top:0;position:relative}
.contenuto > section:nth-of-type(odd).blocco:before{content:"";position:absolute;top:0;left:31px;right:31px;height:1px;background:var(--bordo)}
.contenuto > section:nth-of-type(odd) > .riquadro,
.contenuto > section:nth-of-type(odd) > .confronto,
.contenuto > section:nth-of-type(odd) > .rassicuratori,
.contenuto > section:nth-of-type(odd) > .griglia-casi,
.contenuto > section:nth-of-type(odd) > .testi{margin-left:-31px;margin-right:-31px}
@media(max-width:860px){
  .contenuto > section:nth-of-type(even){margin-top:22px}
  .contenuto > section:nth-of-type(odd).blocco:before{left:19px;right:19px}
  .contenuto > section:nth-of-type(odd) > .riquadro,
  .contenuto > section:nth-of-type(odd) > .confronto,
  .contenuto > section:nth-of-type(odd) > .rassicuratori,
  .contenuto > section:nth-of-type(odd) > .griglia-casi,
  .contenuto > section:nth-of-type(odd) > .testi{margin-left:-19px;margin-right:-19px}
}
.contenuto > section:nth-of-type(odd) > .striscia{margin-left:-31px;margin-right:-31px}
@media(max-width:860px){.contenuto > section:nth-of-type(odd) > .striscia{margin-left:-19px;margin-right:-19px}}
/* Legenda della conciliazione allineata al pallino delle voci */
.col-sx .sidebar .legenda{padding-left:28px;padding-right:20px}
@media(min-width:861px){.col-sx .sidebar .legenda{padding-left:6px;padding-right:0}}
/* Su mobile la colonna delle aree non ha bordi laterali ne' coda sotto il riquadro */
@media(max-width:860px){
  .col-sx{border-right:none;border-left:none;padding-bottom:0;background:#fff}
  .sidebar{border-left:none;border-right:none;border-bottom:none;margin-bottom:0}
  .side-contatti{margin-bottom:0}
}
/* Il blocco blu non eredita le regole delle sezioni senza fondo:
   niente filetto in testa, e il riquadro interno resta rientrato come i passi */
.contenuto > section.blocco-pieno.blocco:before{display:none}
.contenuto > section.blocco-pieno > .riquadro{margin-left:0;margin-right:0}
/* Aria sopra il testo: dopo il filetto delle sezioni senza fondo e in testa al blocco blu */
.contenuto > section:nth-of-type(odd).blocco{padding-top:30px}
.contenuto > section.blocco-pieno{padding-top:40px}
.contenuto > section:nth-of-type(even){padding-top:40px}
@media(max-width:860px){
  .contenuto > section:nth-of-type(odd).blocco{padding-top:26px}
  .contenuto > section.blocco-pieno{padding-top:34px}
  .contenuto > section:nth-of-type(even){padding-top:32px}
}
.contenuto > section.blocco-pieno.blocco{padding-top:40px}
@media(max-width:860px){.contenuto > section.blocco-pieno.blocco{padding-top:34px}}
/* ---- LOGO IN TESTATA ---- */
.logo-testata{display:inline-block;margin-bottom:22px;line-height:0}
.logo-testata img{height:64px;width:auto;display:block}
@media(max-width:860px){.logo-testata{margin-bottom:16px}.logo-testata img{height:50px}}
/* Link alla categoria del giornale sotto gli articoli */
.altri-articoli{margin-top:18px;font-weight:700}
.altri-articoli a{color:var(--arancio-scuro);text-decoration:none;border-bottom:2px solid var(--arancio)}
.altri-articoli a:hover{color:var(--arancio)}
/* Nelle pagine di area il logo sta su una riga e il nome dell'area sotto */
.hero-inner .logo-testata{display:block;margin-bottom:18px}
.hero-inner .badge-area{display:flex;width:-moz-fit-content;width:fit-content;max-width:100%}
/* ---- STAFF DI PROGETTO: schede affiancate ---- */
.staff{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;margin-top:22px}
.staff-scheda{background:#fff;border:1px solid var(--bordo);border-top:3px solid var(--navy);border-radius:3px;padding:22px 18px;text-align:center}
.staff-foto{width:104px;height:104px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 14px;border:3px solid var(--tinta)}
.staff-iniziali{background:var(--navy);color:#fff;font-weight:800;font-size:1.7rem;letter-spacing:.04em;display:flex;align-items:center;justify-content:center}
.staff-nome{font-weight:800;color:var(--navy);margin-bottom:3px;font-size:1rem}
.staff-ruolo{font-size:.86rem;color:var(--grigio);line-height:1.45;margin-bottom:10px}
.staff-link{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--arancio-scuro);text-decoration:none;border-bottom:2px solid var(--arancio)}
.staff-link:hover{color:var(--arancio)}
@media(max-width:560px){.staff{grid-template-columns:1fr 1fr;gap:14px}.staff-foto{width:84px;height:84px}.staff-iniziali{font-size:1.4rem}}
.staff-nota{font-size:.82rem;color:var(--grigio);line-height:1.5;margin-bottom:12px}
.staff{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
@media(max-width:860px){.staff{grid-template-columns:1fr 1fr}}
/* Con quattro persone: quattro in riga su schermi larghi, due per riga
   sotto i 1100 px e su mobile. Mai una scheda sola su una riga. */
.staff{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.staff{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.staff{grid-template-columns:1fr 1fr;gap:14px}}
/* ---- STAFF IN VERSIONE RIDOTTA (pagine area) ---- */
.staff-ridotto .staff-scheda{padding:16px 12px}
.staff-ridotto .staff-foto{width:72px;height:72px;margin-bottom:10px;border-width:2px}
.staff-ridotto .staff-iniziali{font-size:1.15rem}
.staff-ridotto .staff-nome{font-size:.9rem;margin-bottom:2px}
.staff-ridotto .staff-ruolo{font-size:.78rem;margin-bottom:0;line-height:1.4}
@media(max-width:860px){
  .staff-ridotto{grid-template-columns:1fr 1fr;gap:12px}
  .staff-ridotto .staff-foto{width:62px;height:62px}
}
/* ---- STAFF RIDOTTO: regole complete, indipendenti dall'ordine ---- */
.staff-ridotto{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:14px;margin-top:20px}
.staff-ridotto .staff-scheda{background:#fff;border:1px solid var(--bordo);border-top:3px solid var(--navy);border-radius:3px;padding:16px 12px;text-align:center}
.staff-ridotto .staff-foto{width:72px;height:72px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 10px;border:2px solid var(--tinta)}
.staff-ridotto .staff-iniziali{background:var(--navy);color:#fff;font-weight:800;font-size:1.15rem;display:flex;align-items:center;justify-content:center}
.staff-ridotto .staff-nome{font-weight:800;color:var(--navy);font-size:.9rem;margin-bottom:2px}
.staff-ridotto .staff-ruolo{font-size:.78rem;color:var(--grigio);line-height:1.4;margin:0}
@media(max-width:1100px){.staff-ridotto{grid-template-columns:1fr 1fr !important}}
@media(max-width:860px){.staff-ridotto{grid-template-columns:1fr 1fr !important;gap:12px}.staff-ridotto .staff-foto{width:62px;height:62px}}