/* I colori non stanno più qui: la palette è in tema.css, caricato prima di questo foglio. */
/* Palette dal sito live (kit Elementor): viola var(--mg-600), lavanda var(--li-2), rosa var(--mg-200), grigio var(--ne-50), testo var(--ne-700) */
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Source Sans 3","Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;font-size:var(--fs-testo)}
h1,h2,h3,.brand,.hc-n{font-family:var(--disp)}
a{color:var(--link)}img{max-width:100%;height:auto}
.wrap{max-width:1160px;margin:0 auto;padding:0 40px}   /* la stessa misura della home su tutte le pagine (28/09: prima 1040 e 20) */
@media (max-width:760px){.wrap{padding:0 22px}}

/* Menù a scomparsa sotto i 760px. La casella di spunta è nascosta alla vista ma non alla tastiera; il pulsante
   compare solo sul telefono, e sopra i 760px il menù è sempre aperto qualunque cosa dica la casella. */

main{padding:24px 20px 56px}

.pagina h1{font-size:var(--fs-titolo-1);line-height:1.15;margin:0 0 16px;text-wrap:balance}
.home .hero{position:relative;border-radius:var(--raggio-3);overflow:hidden;margin:0 0 24px;min-height:300px;display:flex;align-items:flex-end;background:var(--kit-blu-12) 50% 35%/cover no-repeat;background-image:linear-gradient(180deg,var(--kit-blu-12-a10) 0%,var(--kit-blu-12-a35) 45%,var(--kit-blu-12-a82) 100%),linear-gradient(135deg,var(--mg-600),var(--li-2))}
.home .hero .hero-testo{padding:28px 30px}
.home .hero h1{color:var(--ne-0);margin:0 0 8px;text-shadow:0 2px 14px var(--nero-a45)}
.home .hero .hero-sub{margin:0;color:var(--ce-100);font-size:var(--fs-grande);text-shadow:0 1px 8px var(--nero-a50)}
@media (max-width:760px){.home .hero{min-height:220px}.home .hero .hero-testo{padding:20px}.home .hero .hero-sub{font-size:var(--fs-testo)}}
.home .contenuto figure{margin:6px 0 2px}.home .contenuto figure img{max-height:112px;width:auto;margin:0}
.contenuto h2{font-size:var(--fs-titolo-3);margin:34px 0 10px;line-height:1.25;color:var(--titolo)}.contenuto h3{font-size:var(--fs-grande);margin:24px 0 8px;color:var(--titolo)}.contenuto h4{font-size:var(--fs-testo);margin:20px 0 6px}
.contenuto p{margin:0 0 14px}.contenuto ul,.contenuto ol{margin:0 0 14px;padding-left:24px}.contenuto li{margin-bottom:4px}
.contenuto img{display:block;margin:12px 0;border-radius:var(--raggio-1)}.contenuto figure{margin:14px 0}.contenuto figcaption{font-size:var(--fs-nota);color:var(--ink3)}
.contenuto table{border-collapse:collapse;width:100%;margin:14px 0;font-size:var(--fs-testo);display:block;overflow-x:auto}.contenuto th,.contenuto td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.contenuto details{border:1px solid var(--line);border-radius:var(--raggio-1);padding:10px 14px;margin:8px 0;background:var(--bg2);--campo-fondo:var(--fondo)}.contenuto summary{font-weight:600;cursor:pointer}
.contenuto blockquote{border-left:4px solid var(--accent);margin:14px 0;padding:6px 14px;color:var(--ink2)}
.elenco h2{font-size:var(--fs-grande);margin:18px 0 4px}.elenco h2 a{text-decoration:none}
.evidenza{margin:0 0 18px}
.cta{background:var(--bg2);border:1px solid var(--line);border-left:6px solid var(--accent);padding:18px 22px;margin:18px 0 26px;;--campo-fondo:var(--fondo)}
.cta-titolo{font-size:var(--fs-grande);margin:0 0 6px}.cta p{margin:0 0 10px}.cta-azioni{display:flex;gap:10px;flex-wrap:wrap}.cta-nota{font-size:var(--fs-nota);color:var(--ink3);margin:0}
/* Due soli pulsanti in tutto il sito pubblico, in maiuscolo e di peso normale.
   «principale» (.btn) e «secondario» (.btn-secondario) prendono i colori SOLO dai ruoli --btn-* e --btn2-* di
   tema.css, mai da --accent o da un bianco scritto a mano: in tema scuro --accent diventa rosa chiaro, e una scritta
   bianca fissa finiva bianco su rosa (24/09). I ruoli sono misurati in tutti e due i temi. */
.btn{display:inline-block;background:var(--btn-fondo);color:var(--btn-testo);text-decoration:none;padding:10px 18px;border-radius:var(--raggio-2);font-weight:400;border:1px solid var(--btn-fondo);text-transform:uppercase;letter-spacing:.04em}
.btn:hover{background:var(--btn-fondo-over);border-color:var(--btn-fondo-over);color:var(--btn-testo-over)}
.btn-secondario{background:var(--btn2-fondo);border-color:var(--btn2-bordo);color:var(--btn2-testo)}
.btn-secondario:hover{background:var(--btn2-fondo-over);border-color:var(--btn2-fondo-over);color:var(--btn2-testo-over)}
.btn-muto{background:var(--btn4-fondo);border-color:var(--btn4-fondo);color:var(--btn4-testo)}.btn-muto:hover{background:var(--btn4-fondo-over);color:var(--btn4-testo-over)}
.pie{background:var(--ink);color:var(--kit-blu-84);padding:36px 0 20px;font-size:var(--fs-nota)}.pie a{color:var(--ne-0);text-decoration:none}.pie strong{color:var(--ne-0);display:block;margin-bottom:8px}
.colonne{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}.pie ul{list-style:none;padding:0;margin:0}.pie li{margin-bottom:4px}.regioni{columns:2}
.copy{margin-top:24px;color:var(--ink3);font-size:var(--fs-nota)}
@media (max-width:760px){.colonne{grid-template-columns:1fr}}
/* --- ospedali e tratte (pagine generate dai dati) --- */
.scheda{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0 0 18px;padding:14px 18px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--raggio-1);font-size:var(--fs-testo);--campo-fondo:var(--fondo)}
.scheda dt{font-weight:600;color:var(--ink2)}.scheda dd{margin:0}.scheda .nota,.pagina .nota{font-size:var(--fs-nota);color:var(--ink3)}
.prezzi{border-collapse:collapse;margin:0 0 10px;width:100%;font-size:var(--fs-testo)}.prezzi caption{text-align:left;font-weight:600;margin-bottom:6px}
.prezzi th,.prezzi td{border:1px solid var(--line);padding:8px 10px;text-align:left}.prezzi td:last-child{white-space:nowrap;font-weight:600}
.vicini,.tratte{margin-top:28px}.lista-vicini{columns:2;padding-left:20px}.lista-vicini li{break-inside:avoid}.dist{font-size:var(--fs-nota);color:var(--ink3)}
.tabella-tratte{border-collapse:collapse;width:100%;font-size:var(--fs-testo)}.tabella-tratte th,.tabella-tratte td{border:1px solid var(--line);padding:6px 10px;text-align:left}
@media (max-width:760px){.scheda{grid-template-columns:1fr;gap:2px}.scheda dd{margin-bottom:8px}.lista-vicini{columns:1}}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
/* il titolo che riceve il fuoco dopo un invio («Richiesta ricevuta», l'invito): il lettore di schermo parte da lì, ma un
   titolo non si clicca e il riquadro attorno sembrava un errore (beta, Gloria, 2/11) */
[data-fuoco]:focus,[data-fuoco]:focus-visible{outline:none}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ne-0);color:var(--ink);padding:8px 12px;border:2px solid var(--blue);z-index:1000;--campo-fondo:var(--campo-rosa)}.skip:focus{left:8px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* barra di sviluppo flottante (solo in locale) */
.backdoor{position:fixed;right:12px;bottom:12px;z-index:2000;display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--kit-blu-14);color:var(--ne-0);border-radius:var(--raggio-2);box-shadow:var(--ombra-2);font-size:var(--fs-nota)}
/* Lo scambio del tema dentro la barra DEV: stessa forma degli altri pulsanti, non quella del piè di pagina. */
.backdoor .bd-tema{font:inherit;font-size:var(--fs-nota);padding:5px 9px;border:1px solid var(--kit-blu-30);border-radius:var(--raggio-1);background:var(--kit-blu-20);color:var(--ne-0);cursor:pointer;margin-left:2px}
.backdoor .bd-tema:hover{background:var(--kit-blu-28)}
.backdoor .etichetta{font-weight:700;letter-spacing:.08em;color:var(--kit-arancio-68);margin-right:4px}
.backdoor form{margin:0}
.backdoor button{font:inherit;font-size:var(--fs-nota);padding:5px 9px;border:1px solid var(--kit-blu-30);border-radius:var(--raggio-1);background:var(--kit-blu-20);color:var(--ne-0);cursor:pointer}
.backdoor button:hover{background:var(--kit-blu-28)}
.backdoor button.attivo{background:var(--kit-arancio-39);border-color:var(--kit-arancio-39)}
.backdoor button.esci{background:transparent;color:var(--kit-blu-83)}

/* tema scuro del sito pubblico: stessi token, scelta esplicita o del sistema */
:root{color-scheme:light}
body{background:var(--bg);color:var(--ink)}.skip{background:var(--bg);--campo-fondo:var(--campo-su-bianco)}
/* Due loghi, uno per fondo chiaro e uno per fondo scuro. Prima il sito pubblico metteva un riquadro bianco dietro
   al logo chiaro: si vedeva un francobollo bianco in mezzo alla testata scura. L'altra testata del progetto faceva
   già così; questa era rimasta indietro perché le due non condividono il foglio di stile. */

.tema{font:inherit;font-size:var(--fs-nota);padding:4px 10px;border:1px solid var(--line);border-radius:var(--raggio-pillola);background:transparent;color:var(--kit-blu-84);cursor:pointer}
.cookie{position:fixed;left:12px;right:12px;bottom:12px;z-index:1500;background:var(--bg);border:1px solid var(--line);border-radius:var(--raggio-2);box-shadow:var(--ombra-2);padding:14px 18px;font-size:var(--fs-nota);max-width:720px;margin:0 auto;color:var(--ink);--campo-fondo:var(--campo-su-bianco)}
.cookie p{margin:4px 0 8px}.cookie-azioni{display:flex;gap:8px;flex-wrap:wrap}.cookie-azioni button{font:inherit;padding:8px 14px;border:0;border-radius:var(--raggio-2);background:var(--btn-fondo);color:var(--btn-testo);cursor:pointer}.cookie-azioni .btn-secondario{background:var(--btn2-fondo);color:var(--btn2-testo);border:1px solid var(--btn2-bordo)}
.cookie-pref{margin:6px 0 10px}.cookie-pref label{display:block;font-size:var(--fs-nota);margin:4px 0}body.con-cookie{padding-bottom:140px}
/* La barra DEV è fissata in basso a destra e copriva il piè di pagina: finché c'è, la pagina si allunga di quel
   tanto, così il piede si legge e si clicca. `:has()` la riconosce da sola, senza toccare i template, e in
   produzione la barra non esiste quindi la regola non si applica mai. Col banner dei cookie aperto la barra sale
   sopra di lui, quindi lì lo spazio è la somma dei due. */
body:has(.backdoor){padding-bottom:64px}
body.con-cookie:has(.backdoor){padding-bottom:204px}

/* ==================== Redesign HOME (scoped .kind-home) ==================== */
.kind-home,.kind-agenzie,.kind-landing{--navy:var(--mg-900);--navy2:var(--mg-800)}
/* pagina per le agenzie: fasce scure a tutta larghezza, occhielli rosa sul prugna, sfumatura viola invece che blu */
.kind-agenzie main,.kind-agenzie main.wrap,.kind-landing main,.kind-landing main.wrap{padding:0;max-width:none}
.kind-agenzie .crm-hero,.kind-landing .crm-hero{background:radial-gradient(1100px 480px at 82% -12%,var(--kit-prugna-26) 0,transparent 60%),var(--navy)}
.kind-agenzie .crm-hero .hc-eyebrow,.kind-agenzie .hc-servizi .hc-eyebrow,.kind-landing .crm-hero .hc-eyebrow,.kind-landing .hc-servizi .hc-eyebrow{color:var(--rosa)}
.kind-agenzie .hc-servizi h2,.kind-agenzie .hc-servizi .hc-sec-head p,.kind-landing .hc-servizi h2,.kind-landing .hc-servizi .hc-sec-head p{color:var(--ne-0)}
.kind-agenzie .hc-ctab p,.kind-landing .hc-ctab p{color:var(--ne-0);font-size:var(--fs-grande);font-weight:700;}
/* la fascia finale delle landing sul prugna dell'apertura, non sul rosa chiaro (Mattia, 28/10: il bianco sul rosa si legge poco) */
.kind-agenzie .hc-ctab,.kind-landing .hc-ctab{background:var(--navy)}
.kind-agenzie .hc-ctab .crm-btn-ghost,.kind-landing .hc-ctab .crm-btn-ghost{background:transparent;color:var(--ne-0);border-color:var(--bianco-a40)}
.kind-agenzie .crm-plans,.kind-landing .crm-plans{grid-template-columns:repeat(3,1fr);max-width:none}
@media (max-width:900px){.kind-agenzie .crm-plans,.kind-landing .crm-plans{grid-template-columns:1fr}}
.kind-home main{padding:0;max-width:none}
.kind-home main.wrap{max-width:none;padding:0}
.hc-wrap{max-width:1160px;margin:0 auto;padding:0 40px}
@media (max-width:760px){.hc-wrap{padding:0 22px}}
.hc h1,.hc h2,.hc h3{font-family:var(--disp);line-height:1.08;letter-spacing:-.02em;text-wrap:balance;margin:0}
.hc-eyebrow{font-family:"Source Sans 3",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:var(--fs-nota);font-weight:700;color:var(--accent-ink)}
.hc-ic{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:"Source Sans 3",system-ui,sans-serif;font-weight:400;font-size:var(--fs-testo);padding:13px 24px;border-radius:var(--raggio-2);border:2px solid transparent;text-decoration:none;cursor:pointer;text-transform:uppercase;letter-spacing:.04em}
.hc-btn-pri{background:var(--btn-fondo);color:var(--btn-testo)}.hc-btn-dark{background:var(--navy);color:var(--ne-0)}
/* header scuro solo sulla home */

/* HERO */
.hc-hero{position:relative;background:var(--navy);overflow:hidden}
.hc-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(100deg,var(--kit-blu-9-t-a95) 0%,var(--kit-blu-11-t-a86) 40%,var(--kit-blu-12-a55) 100%),linear-gradient(135deg,var(--mg-600),var(--li-2));background-size:cover;background-position:60% 32%}
.hc-hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;padding-top:58px;padding-bottom:66px}
.hc-hero-testo h1{font-size:var(--fs-vetrina);font-weight:800;color:var(--ne-0);margin:14px 0 0}
.hc-lead{font-size:var(--fs-grande);color:var(--kit-blu-87);margin:20px 0 20px;}
.hc-pts{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:11px}
.hc-pts li{display:flex;align-items:center;gap:11px;font-size:var(--fs-testo);color:var(--kit-blu-93)}
.hc-pts li .hc-ic{width:20px;height:20px;color:var(--accent)}
.hc-emerg{display:flex;align-items:center;gap:10px;margin:22px 0 0;font-size:var(--fs-nota);color:var(--kit-blu-79)}
.hc-112{background:var(--ne-0);color:var(--kit-rosso-44);font-weight:800;border-radius:var(--raggio-1);padding:2px 9px;font-size:var(--fs-nota);--campo-fondo:var(--campo-rosa)}
.hc-fcard{background:var(--ne-0);border-radius:var(--raggio-4);padding:26px;box-shadow:var(--ombra-vetrina);--campo-fondo:var(--campo-rosa)}
.hc-tag{display:inline-block;background:var(--ce-100);color:var(--lg-700);font-weight:700;font-size:var(--fs-nota);padding:5px 11px;border-radius:var(--raggio-pillola);margin-bottom:14px}
.hc-fcard h2{font-family:var(--disp);font-size:var(--fs-titolo-3);color:var(--kit-blu-11);margin:0 0 4px}.hc-fcard h3{color:var(--kit-blu-11)}
.hc-fs{font-size:var(--fs-nota);color:var(--kit-blu-48);margin:0 0 16px}
.hc-field{display:block;margin-bottom:11px}
.hc-field span{display:block;font-size:var(--fs-nota);font-weight:600;color:var(--kit-blu-35);margin-bottom:5px}
.hc-field input{width:100%;border:1.5px solid var(--kit-blu-91);border-radius:var(--raggio-2);padding:11px 12px;font:inherit;font-size:var(--fs-nota);color:var(--kit-blu-11);background:var(--campo-fondo)}
.hc-field input:focus{outline:none;border-color:var(--blue)}
.hc-two{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.hc-fcard .hc-btn-pri{width:100%;margin-top:6px;font-size:var(--fs-testo);padding:14px}
.hc-fhint{text-align:center;font-size:var(--fs-nota);color:var(--kit-blu-48);margin:12px 0 0}
/* STATS */
.hc-stats{background:var(--navy2)}
.hc-stats-in{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:26px 40px;text-align:center}
.hc-stat b{font-family:var(--disp);font-size:var(--fs-titolo-1);color:var(--ne-0);display:block;line-height:1}
.hc-stat span{font-size:var(--fs-nota);color:var(--kit-blu-71)}
/* TRUST */
.hc-trust{background:var(--bg2);border-bottom:1px solid var(--line);--campo-fondo:var(--fondo)}
.hc-trust-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 40px;flex-wrap:wrap}
.hc-t{display:flex;align-items:center;gap:9px;font-size:var(--fs-nota);font-weight:600;color:var(--ink2)}
.hc-t .hc-ic{color:var(--blue)}
/* sezioni */
.hc-blk{padding:72px 0}
.hc-sec-head{margin:0 0 38px}
.hc-sec-head h2{font-size:var(--fs-titolo-1);font-weight:800;color:var(--ink);margin:10px 0 10px}
.hc-sec-head p{color:var(--ink2);font-size:var(--fs-testo);margin:0}
/* «Come funziona» su una tinta sua, la rosa della fascia delle regioni (28/09): bianca, si attaccava alla sezione
   della mappa che viene subito dopo. Le tre schede restano sul fondo della pagina, quindi staccano dalla tinta. */
.hc-come{background:var(--fi-fondo);border-bottom:1px solid var(--fi-bordo);--campo-fondo:var(--fondo)}
.hc-steps{display:grid;grid-template-columns:repeat(3,1fr);border:1.5px solid var(--line);border-radius:var(--raggio-4);overflow:hidden;background:var(--bg);--campo-fondo:var(--campo-su-bianco)}
.hc-step{padding:30px 28px;border-right:1.5px solid var(--line)}.hc-step:last-child{border-right:0}
.hc-n{font-family:var(--disp);font-size:var(--fs-nota);font-weight:800;color:var(--accent-ink);letter-spacing:.05em}
.hc-step h3{font-family:var(--disp);font-size:var(--fs-grande);color:var(--ink);margin:12px 0 8px}
.hc-step p{color:var(--ink2);font-size:var(--fs-testo);margin:0}
/* servizi scuro */
.hc-servizi{background:var(--navy);color:var(--ne-0)}
.hc-eyebrow-l{color:var(--mg-200)}   /* occhiello sul fondo scuro fisso: colore fisso anche lui, 10,5:1 (il magenta faceva 2,1:1) */
.hc-servizi .hc-sec-head h2{color:var(--ne-0)}.hc-servizi .hc-sec-head p{color:var(--kit-blu-74)}
.hc-sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hc-scard{display:flex;flex-direction:column;align-items:flex-start;gap:12px;background:var(--navy2);border:1px solid var(--kit-blu-22);border-radius:var(--raggio-3);padding:24px;text-decoration:none}
.hc-scard:hover{border-color:var(--accent)}
.hc-ich{width:46px;height:46px;border-radius:var(--raggio-3);background:var(--kit-arancio-49-t-a16);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.hc-ich .hc-ic{width:24px;height:24px;color:var(--accent)}
.hc-scard h3{font-family:"Source Sans 3",system-ui,sans-serif;font-size:var(--fs-testo);font-weight:700;color:var(--ne-0);margin:0}
.hc-scard p{color:var(--kit-blu-74);font-size:var(--fs-nota);margin:0}
/* In home la sezione dei tipi di assistenza è chiara: schede sul fondo alternato, icona magenta su tinta rosa. */
.hc-servizi.hc-chiara{background:var(--bg);color:var(--ink);--campo-fondo:var(--campo-su-bianco)}
.hc-chiara .hc-sec-head h3{color:var(--ink)}.hc-chiara .hc-sec-head p{color:var(--ink2)}
.hc-chiara .hc-scard{background:var(--bg2);border:1px solid var(--line);--campo-fondo:var(--fondo)}
.hc-chiara .hc-scard:hover,.hc-chiara .hc-scard:focus-visible{border-color:var(--accent)}
.hc-chiara .hc-ich{background:var(--fi-fondo);--campo-fondo:var(--fondo)}
.hc-chiara .hc-ich .hc-ic{color:var(--accent-ink)}
.hc-chiara .hc-scard h3{color:var(--ink)}
/* Sulla tinta rosa (28/09), perché la sezione della mappa sopra è bianca: le schede tornano sul fondo della pagina. */
.hc-servizi.hc-chiara.hc-rosa{background:var(--fi-fondo);border-top:1px solid var(--fi-bordo);border-bottom:1px solid var(--fi-bordo);--campo-fondo:var(--fondo)}
.hc-rosa .hc-scard{background:var(--bg);--campo-fondo:var(--campo-su-bianco)}
.hc-come-az{justify-content:center;margin:28px 0 0}
/* duo */
.hc-duo{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.hc-dcard{border:1.5px solid var(--line);border-radius:var(--raggio-4);padding:32px;background:var(--bg);--campo-fondo:var(--campo-su-bianco)}
.hc-dcard.hc-hi{background:var(--navy);border-color:var(--navy);color:var(--ne-0)}
.hc-kick{font-family:"Source Sans 3",system-ui,sans-serif;font-weight:700;font-size:var(--fs-nota);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)}
.hc-dcard.hc-hi .hc-kick{color:var(--accent)}
.hc-dcard h3{font-family:var(--disp);font-size:var(--fs-titolo-2);color:var(--ink);margin:10px 0 10px}
.hc-dcard.hc-hi h3{color:var(--ne-0)}
.hc-dcard p{color:var(--ink2);font-size:var(--fs-testo);margin:0 0 18px}
.hc-dcard.hc-hi p{color:var(--kit-blu-81)}
/* CTA band */
.hc-ctab{background:var(--fascia-cta)}
.hc-ctab-in{padding:56px 40px;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.hc-ctab h2{color:var(--ne-0);font-size:var(--fs-titolo-1);font-weight:800;}
.hc-ctab-az{display:flex;gap:13px;flex-wrap:wrap}
.hc-ctab .hc-btn{background:var(--btn-fondo);color:var(--btn-testo);border-color:var(--btn-fondo)}   /* nel chiaro pieno magenta scuro: sul fondo della fascia (--fascia-cta) il bianco regge solo il testo grande */
.hc-ctab .hc-btn.hc-o,.hc-ctab .crm-btn-ghost{background:var(--fascia-cta-2-fondo);color:var(--fascia-cta-2-testo);border-color:var(--fascia-cta-2-bordo)}
@media (max-width:900px){
  .hc-hero-in{grid-template-columns:1fr;gap:30px}
  .hc-hero-testo h1{font-size:var(--fs-titolo-1)}
  .hc-stats-in{grid-template-columns:1fr 1fr;gap:18px 24px}
  .hc-steps{grid-template-columns:1fr}.hc-step{border-right:0;border-bottom:1.5px solid var(--line)}.hc-step:last-child{border-bottom:0}
  .hc-sgrid{grid-template-columns:1fr}.hc-duo{grid-template-columns:1fr}
  .hc-trust-in{gap:12px 20px}.hc-ctab-in{flex-direction:column;align-items:flex-start}
  .hc-blk{padding:52px 0}
}
.hc-tutti{margin:22px 0 0}.hc-tutti a{font-weight:700;color:var(--ne-0);text-decoration:none;font-size:var(--fs-testo)}.hc-tutti a:hover{color:var(--accent)}
.hc-hero-testo .hc-hl{color:var(--kit-arancio-59)}

/* ==================== Mega-menu Servizi ==================== */

/* ==================== Mega-menu Regioni (macro-aree) ==================== */

/* Prenota online: pulsante CTA nel menu */

/* area riservata: sempre visibile e uguale per tutti (le pagine del sito stanno in cache), porta all'accesso */

/* hero form ricco: toggle + campi con icona */
.hc-tag{display:inline-flex;align-items:center;gap:7px}
.hc-tag .hc-ic{width:14px;height:14px;color:currentColor}
.hc-seg{display:flex;gap:8px;margin-bottom:14px}
.hc-seg label{flex:1;position:relative;margin:0}
.hc-seg input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.hc-seg span{display:block;text-align:center;font-size:var(--fs-nota);font-weight:600;padding:9px;border-radius:var(--raggio-2);border:1.5px solid var(--kit-blu-91);color:var(--kit-blu-35)}
.hc-seg input:checked+span{background:var(--navy);color:var(--ne-0);border-color:var(--navy)}
.hc-seg input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
.hc-field span.hc-inp{display:flex;align-items:center;gap:10px;border:1.5px solid var(--kit-blu-91);border-radius:var(--raggio-2);padding:0 12px;background:var(--campo-fondo);font-size:var(--fs-nota);font-weight:400;margin:0}
.hc-inp .hc-ic{width:18px;height:18px;color:var(--blue);flex:0 0 auto}
.hc-inp input{border:0;padding:11px 0;font:inherit;font-size:var(--fs-nota);color:var(--kit-blu-11);background:none;width:100%;outline:none}
.hc-inp:focus-within{border-color:var(--blue);outline:3px solid var(--blue);outline-offset:2px}   /* R-14: il fuoco si vede come negli altri campi, non solo dal colore del bordo */
.hc-btn .hc-ic{width:18px;height:18px}

/* blocco tracciamento in tempo reale */
.hc-split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.hc-split-h{font-size:var(--fs-titolo-1);font-weight:800;color:var(--ink);margin:10px 0 14px}
.hc-split-p{color:var(--ink2);font-size:var(--fs-testo);margin:0 0 22px;}
.hc-flist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.hc-flist li{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-testo);color:var(--ink)}
.hc-flist li .hc-ic{color:var(--kit-verde-26);width:20px;height:20px;flex:0 0 auto;margin-top:2px}
.hc-trackcard{background:var(--bg);border:1px solid var(--line);border-radius:var(--raggio-5);padding:24px;box-shadow:var(--ombra-vetrina);--campo-fondo:var(--campo-su-bianco)}
.hc-map{position:relative;height:210px;border-radius:var(--raggio-4);overflow:hidden;border:1px solid var(--line);background:radial-gradient(circle at 30% 40%,var(--ce-100),var(--kit-blu-91b))}
.hc-road{position:absolute;left:14%;right:14%;top:53%;border-top:3px dashed var(--kit-blu-72);transform:translateY(-50%)}
.hc-trail{position:absolute;left:14%;top:53%;width:0;border-top:3px solid var(--accent-ink);transform:translateY(-50%);animation:hc-drive-trail 6s ease-in-out infinite}
.hc-pin{position:absolute;border-radius:var(--raggio-cerchio);display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%)}
.hc-pin .hc-ic{color:var(--ne-0);width:18px;height:18px}
.hc-pin-amb{left:14%;top:53%;width:38px;height:38px;background:var(--accent-ink);box-shadow:var(--ombra-cta);z-index:2;animation:hc-drive 6s ease-in-out infinite}
.hc-pin-dest{left:86%;top:53%;width:28px;height:28px;background:var(--blue)}
@keyframes hc-drive{0%,10%{left:14%}88%,100%{left:82%}}
@keyframes hc-drive-trail{0%,10%{width:0}88%,100%{width:68%}}
.hc-crew{display:flex;align-items:center;gap:12px;margin-top:16px}
.hc-av{width:42px;height:42px;border-radius:var(--raggio-cerchio);background:var(--bg2);display:flex;align-items:center;justify-content:center;flex:0 0 auto;--campo-fondo:var(--fondo)}
.hc-av .hc-ic{color:var(--ink2);width:22px;height:22px}
.hc-crew b{font-size:var(--fs-testo);color:var(--ink);display:block}
.hc-crew>div>span{font-size:var(--fs-nota);color:var(--ink3)}
.hc-eta{margin-left:auto;text-align:right}
.hc-eta b{font-family:var(--disp);font-size:var(--fs-titolo-3);color:var(--accent-ink)}
.hc-eta span{display:block;font-size:var(--fs-nota);color:var(--ink3)}
@media (max-width:900px){.hc-split{grid-template-columns:1fr;gap:28px}}

/* contenuto CMS in fondo alla home: presentazione pulita */
.hc-prosa{background:var(--bg2);border-top:1px solid var(--line);--campo-fondo:var(--fondo)}
.hc-prosa .contenuto{margin:0 auto}
.hc-prosa .contenuto figure{display:none}
.hc-prosa .contenuto h2{font-family:var(--disp);font-size:var(--fs-titolo-2);color:var(--ink);letter-spacing:-.01em}
.hc-prosa .contenuto h2 a{color:var(--ink);text-decoration:none}
.hc-prosa .contenuto h2 a:hover{color:var(--accent-ink)}
.hc-prosa .contenuto h3{font-family:var(--disp);color:var(--ink)}

/* ==================== Pagine di contenuto (servizio, tratta, comune) ==================== */
.pagina{}
.pg-hero{background:var(--bg2);border:1px solid var(--line);border-radius:var(--raggio-4);padding:26px 30px;margin:0 0 26px;--campo-fondo:var(--fondo)}
.briciole ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0 0 14px;font-size:var(--fs-nota);color:var(--ink3)}.briciole li+li::before{content:"›";margin-right:6px}
/* la riga del percorso sotto la testata del sito: bianca, chiusa da una riga di separazione (titolare, 9/10: il rosa no) */
.percorso-fascia{background:var(--fondo);border-top:1px solid var(--bordo);border-bottom:1px solid var(--bordo);--campo-fondo:var(--campo-su-bianco)}
.percorso{padding-top:12px;padding-bottom:12px}.percorso .briciole ol{margin:0;color:var(--testo)}.percorso .briciole a{color:var(--link)}
.pg-hero .briciole ol{margin:0 0 12px}
.pagina h1{font-family:var(--disp);font-size:var(--fs-titolo-1);line-height:1.08;letter-spacing:-.02em;margin:0}
.pg-lede{font-size:var(--fs-grande);color:var(--ink2);margin:14px 0 0;}
.pagina h2,.pagina h3{font-family:var(--disp);letter-spacing:-.01em}
.pg-hero .cta{margin:18px 0 0;max-width:none}
@media (max-width:760px){.pg-hero{padding:20px 22px}}

/* blocco "cosa serve per il preventivo" */
.hc-info{background:var(--bg2);--campo-fondo:var(--fondo)}
.hc-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.hc-info-grid h2{font-size:var(--fs-titolo-1);font-weight:800;color:var(--ink);margin:10px 0 12px}
.hc-info-grid p{color:var(--ink2);font-size:var(--fs-testo);margin:0;}
.hc-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.hc-check li{position:relative;padding-left:32px;font-size:var(--fs-testo);color:var(--ink)}
.hc-check li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:var(--raggio-cerchio);background:var(--accent-ink)}
.hc-check li::after{content:"";position:absolute;left:6px;top:7px;width:8px;height:5px;border-left:2px solid var(--ne-0);border-bottom:2px solid var(--ne-0);transform:rotate(-45deg)}
@media (max-width:900px){.hc-info-grid{grid-template-columns:1fr;gap:24px}}

/* pagina servizio: hero due colonne + card "in breve" + altri servizi */
.pg-hero-2col{display:grid;grid-template-columns:1.5fr .82fr;gap:34px;align-items:start}
/* la fascia della guida va da bordo a bordo come quella del comune: niente riquadro, niente angoli tondi */
.kind-guida main.wrap{max-width:none;padding:0 0 56px}
.pg-hero-guida{border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0;padding:34px 0 38px}
/* indice a tutta larghezza sotto la fascia: su schermi larghi va a colonne, altrimenti è un lenzuolo */
/* fascia dell'indice: il colore va da bordo a bordo, il testo resta allineato al resto della pagina */
.pg-indice-fascia{background:var(--bg2);border-bottom:1px solid var(--line);padding:22px 0 26px;--campo-fondo:var(--fondo)}
.pg-indice-largo{margin:0}
.pg-indice-largo>details>ol{columns:3;column-gap:40px}
@media (max-width:900px){.pg-indice-largo>details>ol{columns:2}}
@media (max-width:760px){.pg-indice-largo>details>ol{columns:1}}
.pg-indice-largo>ol>li{break-inside:avoid}
/* tutto l'indice si richiude dal titolo: il summary è la riga con titolo a sinistra e «espandi tutto» a destra */
.pg-indice-tutto>summary{list-style:none;display:flex;align-items:baseline;justify-content:space-between;gap:12px;cursor:pointer;margin:0 0 12px}
.pg-indice-tutto>summary::-webkit-details-marker{display:none}
.pg-indice-tutto>summary h2{margin:0}
.pg-indice-stato{font-family:"Source Sans 3",system-ui,sans-serif;font-size:var(--fs-nota);font-weight:400;color:var(--ink3);white-space:nowrap}
.pg-indice-tutto>summary .q-chiudi,.pg-indice-tutto[open]>summary .q-apri{display:none}
.pg-indice-tutto[open]>summary .q-chiudi{display:inline}
.pg-indice-tutto>summary:hover .pg-indice-stato{color:var(--accent-ink)}
.pg-indice-tutto>summary:hover h2{color:var(--accent-ink)}
.pg-indice-tutto:not([open])>summary{margin:0}
.pg-indice-tutto:not([open]) .pg-indice-tutti{display:none}   /* a indice chiuso non c'è niente da espandere */
.pg-indice-tutti{font:inherit;font-size:var(--fs-nota);font-weight:600;color:var(--su-fondo);background:transparent;border:0;padding:0;cursor:pointer;text-decoration:underline}
.pg-indice-tutti:hover{color:var(--accent)}
.pg-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.pg-breve{background:var(--bg);border:1px solid var(--line);border-radius:var(--raggio-4);padding:22px 24px;--campo-fondo:var(--campo-su-bianco)}
.pg-breve h3{font-family:var(--disp);font-size:var(--fs-nota);text-transform:uppercase;letter-spacing:.07em;color:var(--ink3);margin:0 0 14px}
.pg-breve ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.pg-breve li{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-nota);color:var(--ink)}
.pg-breve .ic-b{width:18px;height:18px;flex:0 0 auto;margin-top:2px;fill:none;stroke:var(--kit-verde-26);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.pg-altri{margin-top:36px;border-top:1px solid var(--line);padding-top:26px}
.pg-altri h2{font-family:var(--disp);font-size:var(--fs-titolo-3);margin:0 0 14px}
.pg-pills{display:flex;flex-wrap:wrap;gap:9px}
.pg-pills a{border:1px solid var(--line);border-radius:var(--raggio-pillola);padding:8px 15px;font-size:var(--fs-nota);font-weight:600;color:var(--ink2);text-decoration:none;background:var(--bg);--campo-fondo:var(--campo-su-bianco)}
.pg-pills a:hover{border-color:var(--blue);color:var(--blue)}
@media (max-width:760px){.pg-hero-2col{grid-template-columns:1fr;gap:22px}}

/* rifinitura componenti dati (tratta, comune, ospedale) */
.scheda{border-radius:var(--raggio-3);padding:18px 22px;gap:9px 24px}
.scheda dt{font-size:var(--fs-nota);text-transform:uppercase;letter-spacing:.05em;color:var(--ink3)}
.scheda dd{font-weight:600;color:var(--ink)}
.prezzi,.tabella-tratte{border:1px solid var(--line);border-radius:var(--raggio-3);overflow:hidden;border-collapse:collapse;max-width:none}
.prezzi caption{font-family:var(--disp);font-size:var(--fs-grande);letter-spacing:-.01em;margin-bottom:10px}
.prezzi th,.tabella-tratte th{background:var(--bg2);text-transform:uppercase;font-size:var(--fs-nota);letter-spacing:.06em;color:var(--ink3);border:0;border-bottom:1px solid var(--line);padding:12px 16px;--campo-fondo:var(--fondo)}
.prezzi td,.tabella-tratte td{border:0;border-bottom:1px solid var(--line);padding:12px 16px}
.prezzi tr:last-child td,.tabella-tratte tr:last-child td{border-bottom:0}
.tabella-tratte td a,.prezzi td a{font-weight:600;text-decoration:none}
.lista-vicini{list-style:none;columns:2;column-gap:20px;padding:0}
.lista-vicini li{background:var(--bg);border:1px solid var(--line);border-radius:var(--raggio-3);padding:11px 15px;margin:0 0 10px;break-inside:avoid;display:flex;justify-content:space-between;gap:10px;align-items:baseline;--campo-fondo:var(--campo-su-bianco)}
.lista-vicini li a{font-weight:600;text-decoration:none}
@media (max-width:760px){.lista-vicini{columns:1}}

/* ==================== Landing vendita CRM (kind-vendita-crm) ==================== */
.kind-vendita-crm{--navy:var(--mg-900);--navy2:var(--mg-800)}
.kind-vendita-crm main{padding:0;max-width:none}
.kind-vendita-crm main.wrap{max-width:none;padding:0}
.vcrm h1,.vcrm h2,.vcrm h3,.vcrm h4{font-family:var(--disp);letter-spacing:-.02em;line-height:1.1;margin:0}
.crm-eb{color:var(--accent)}
.crm-btn-ghost{background:transparent;color:var(--ne-0);border-color:var(--bianco-a40)}.crm-btn-ghost:hover{border-color:var(--ne-0)}
.crm-hero{background:radial-gradient(1100px 480px at 82% -12%,var(--kit-blu-21) 0,transparent 60%),var(--navy);color:var(--ne-0)}
.crm-hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:60px 40px 70px}
.crm-hero-txt h1{font-size:var(--fs-vetrina);font-weight:800;color:var(--ne-0);margin:14px 0 0}
.crm-lead{font-size:var(--fs-grande);color:var(--kit-blu-87);margin:20px 0 26px;}
.crm-cta{display:flex;gap:13px;flex-wrap:wrap}
.crm-note{font-size:var(--fs-nota);color:var(--kit-blu-71);margin:20px 0 0}
.crm-mock{background:var(--ne-0);border-radius:var(--raggio-4);box-shadow:var(--ombra-vetrina);overflow:hidden;color:var(--ink);--campo-fondo:var(--campo-rosa)}
.crm-mock-top{display:flex;align-items:center;gap:7px;padding:12px 16px;background:var(--bg2);border-bottom:1px solid var(--line);font-size:var(--fs-nota);color:var(--ink2);--campo-fondo:var(--fondo)}
.crm-mock-top b{margin-left:8px;color:var(--ink);font-weight:700}
.crm-dot{width:10px;height:10px;border-radius:var(--raggio-cerchio);background:var(--kit-blu-84)}
.crm-mock-body{padding:16px}
.crm-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:8px}
.crm-kpi div{background:var(--bg2);border-radius:var(--raggio-3);padding:10px 12px;--campo-fondo:var(--fondo)}
.crm-kpi span{font-size:var(--fs-nota);color:var(--ink3);display:block}
.crm-kpi b{font-family:var(--disp);font-size:var(--fs-grande);color:var(--ink)}
.crm-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.crm-t{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink2);font-size:var(--fs-nota);width:42px;flex:0 0 auto}
.crm-i{flex:1;min-width:0}.crm-i b{display:block;font-size:var(--fs-nota);color:var(--ink)}.crm-i span{font-size:var(--fs-nota);color:var(--ink3)}
.crm-pill{font-size:var(--fs-nota);font-weight:700;padding:3px 9px;border-radius:var(--raggio-pillola);background:var(--bg2);color:var(--ink2);white-space:nowrap;--campo-fondo:var(--fondo)}
.crm-pill.crm-ok{background:var(--kit-verde-91);color:var(--kit-verde-26)}.crm-pill.crm-go{background:var(--ce-100);color:var(--kit-blu-34)}.crm-pill.crm-acc{background:var(--btn-fondo);color:var(--btn-testo)}
.crm-row.crm-new{background:var(--kit-arancio-95);margin:6px -16px 0;padding:11px 16px}
.crm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.crm-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--raggio-4);padding:24px;display:flex;flex-direction:column;gap:11px;--campo-fondo:var(--campo-su-bianco)}
.crm-ich{width:46px;height:46px;border-radius:var(--raggio-3);background:var(--blue-soft,var(--ce-100));display:flex;align-items:center;justify-content:center}
.crm-ich .hc-ic{width:24px;height:24px;color:var(--blue)}
.crm-card h3{font-size:var(--fs-testo);color:var(--ink)}.crm-card p{color:var(--ink2);font-size:var(--fs-nota);margin:0}
.crm-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.crm-split-h{font-size:var(--fs-titolo-1);font-weight:800;color:var(--ne-0);margin:12px 0 14px}
.hc-blk:not(.hc-servizi) .crm-split-h{color:var(--ink)}
.crm-split-p{font-size:var(--fs-testo);color:var(--kit-blu-74);margin:0 0 20px;}
.hc-blk:not(.hc-servizi) .crm-split-p{color:var(--ink2)}
.crm-flist{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:12px}
.crm-flist li{display:flex;gap:11px;align-items:flex-start;font-size:var(--fs-testo);color:var(--kit-blu-91bb)}
.crm-flist li .hc-ic{color:var(--accent);width:20px;height:20px;flex:0 0 auto;margin-top:2px}
.crm-leadcard{background:var(--ne-0);border-radius:var(--raggio-4);padding:24px;box-shadow:var(--ombra-vetrina);color:var(--ink);--campo-fondo:var(--campo-rosa)}
.crm-leadhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.crm-when{font-size:var(--fs-nota);color:var(--ink3)}.crm-leadcard h4{font-size:var(--fs-grande);color:var(--ink)}
.crm-tratta{font-size:var(--fs-testo);color:var(--ink2);margin:4px 0 14px}
.crm-leadmeta{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--fs-nota);color:var(--ink3);border-top:1px solid var(--line);padding-top:12px}
.crm-leadfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.crm-leadfoot span{font-size:var(--fs-nota);color:var(--ink3);display:block}.crm-leadfoot b{font-family:var(--disp);font-size:var(--fs-grande);color:var(--accent-ink)}
.crm-mini{padding:9px 16px}.crm-leadfoot .crm-mini{color:var(--ne-0)}   /* R-14: il pulsante finto della scheda d'esempio, bianco sul magenta */
.crm-plans{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.crm-plan{background:var(--bg);border:1px solid var(--line);border-radius:var(--raggio-4);padding:28px;--campo-fondo:var(--campo-su-bianco)}
.crm-plan-hi{border-color:var(--navy);box-shadow:var(--ombra-vetrina)}
.crm-plan-k{font-weight:700;font-size:var(--fs-nota);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)}
.crm-price{font-family:var(--disp);font-size:var(--fs-titolo-1);font-weight:800;color:var(--ink);margin:8px 0 2px}
.crm-price small{font-size:var(--fs-testo);font-weight:500;color:var(--ink3)}
.crm-plan-s{color:var(--ink2);font-size:var(--fs-nota);margin:0 0 16px}
.crm-plan ul{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:9px}
.crm-plan li{position:relative;padding-left:26px;font-size:var(--fs-nota);color:var(--ink)}
.crm-plan li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:var(--raggio-cerchio);background:var(--accent-ink)}
.crm-plan li::after{content:"";position:absolute;left:5px;top:6px;width:6px;height:4px;border-left:2px solid var(--ne-0);border-bottom:2px solid var(--ne-0);transform:rotate(-45deg)}
.crm-plan .hc-btn{width:100%;justify-content:center}
.crm-plan-note{color:var(--ink3);font-size:var(--fs-nota);margin:18px 0 0;}
.crm-demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.crm-note2{font-size:var(--fs-testo);color:var(--ink2);margin:14px 0 0}
.crm-formcard{background:var(--bg);border:1px solid var(--line);border-radius:var(--raggio-4);padding:26px;--campo-fondo:var(--campo-su-bianco)}
.crm-form{display:flex;flex-direction:column;gap:12px}
.crm-form label{display:flex;flex-direction:column;gap:5px;font-size:var(--fs-nota);font-weight:600;color:var(--ink2)}
.crm-form input{border:1.5px solid var(--line);border-radius:var(--raggio-2);padding:11px 12px;font:inherit;font-size:var(--fs-nota);color:var(--ink);background:var(--campo-fondo)}
.crm-form input:focus{outline:none;border-color:var(--blue)}
.crm-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.crm-check{flex-direction:row!important;align-items:center;gap:9px!important;font-weight:400!important;font-size:var(--fs-nota)!important;color:var(--ink2)}
.crm-form .hc-btn{justify-content:center;margin-top:4px}
.crm-ok-banner{background:var(--kit-verde-91);color:var(--kit-verde-26);border-radius:var(--raggio-3);padding:12px 14px;font-size:var(--fs-nota);margin:0 0 14px}
.crm-err-banner{background:var(--kit-rosso-92);color:var(--kit-rosso-44);border-radius:var(--raggio-3);padding:12px 14px;font-size:var(--fs-nota);margin:0 0 14px}
@media (max-width:900px){
  .crm-hero-in,.crm-split,.crm-demo-grid{grid-template-columns:1fr;gap:28px}
  .crm-hero-txt h1{font-size:var(--fs-titolo-1)}
  .crm-grid,.crm-plans,.crm-two{grid-template-columns:1fr}
}

/* FAQ landing CRM + separazione demo */
/* Domande frequenti delle landing (Mattia, 28/10: «non ha contrasto col fondo»): la sezione sul rosa tenue del marchio,
   le domande su schede bianche senza bordo grigio; il segno più in un tondo rosa, che si riempie di magenta quando la
   domanda è aperta, e una riga magenta a sinistra segna la domanda aperta. */
.faq-sezione{background:var(--tenue)}
/* nel tema scuro il rosa tenue è il prugna della fascia finale: la sezione prende il fondo delle schede, per staccarsene */
:root[data-theme="dark"] .faq-sezione{background:var(--superficie);--campo-fondo:var(--fondo)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .faq-sezione{background:var(--superficie);--campo-fondo:var(--fondo)}}
.crm-faq details{border:0;border-left:4px solid transparent;border-radius:var(--raggio-3);padding:2px 20px;margin-bottom:10px;background:var(--fondo);--campo-fondo:var(--campo-su-bianco)}
.crm-faq details[open]{border-left-color:var(--btn-fondo)}
.crm-faq summary{font-family:var(--disp);font-weight:700;font-size:var(--fs-testo);color:var(--titolo);padding:16px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.crm-faq summary:hover{color:var(--link)}
.crm-faq summary::-webkit-details-marker{display:none}
.crm-faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:1.75em;height:1.75em;border-radius:var(--raggio-cerchio);background:var(--tenue);color:var(--titolo);font-size:var(--fs-titolo-3);font-family:var(--disp);line-height:1}
.crm-faq details[open] summary::after{content:"–";background:var(--btn-fondo);color:var(--btn-testo)}
.crm-faq p{color:var(--ink2);font-size:var(--fs-testo);margin:0 0 16px;}
.crm-demo{background:var(--bg2);--campo-fondo:var(--fondo)}

/* landing pubbliche aggiuntive: stesso trattamento full-bleed + display font */

.kind-affiliati main,.kind-struttura-lp main,.kind-abbonamento-lp main{padding:0;max-width:none}
.kind-affiliati main.wrap,.kind-struttura-lp main.wrap,.kind-abbonamento-lp main.wrap{max-width:none;padding:0}
.hc h4{font-family:var(--disp);letter-spacing:-.01em;margin:0}

/* form abbonamento su base pubblica (scoped .abb) */
.abb .form{display:flex;flex-direction:column;gap:14px}
.abb .form.cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.abb label{display:grid;gap:5px;font-size:var(--fs-nota);font-weight:600;color:var(--ink2)}
.abb input,.abb select,.abb textarea{font:inherit;font-size:var(--fs-nota);padding:11px 12px;border:1.5px solid var(--line);border-radius:var(--raggio-2);background:var(--campo-fondo);color:var(--ink);width:100%}
.abb input:focus,.abb select:focus,.abb textarea:focus{outline:none;border-color:var(--blue)}
.abb label.check{grid-auto-flow:column;justify-content:start;align-items:center;gap:9px;font-weight:400;font-size:var(--fs-nota);color:var(--ink2)}
.abb label.check input{width:auto}
.abb fieldset{border:1px solid var(--line);border-radius:var(--raggio-3);padding:14px 16px;margin:0}
.abb legend{font-size:var(--fs-nota);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);padding:0 6px}
.abb .checks{display:flex;flex-wrap:wrap;gap:8px 16px}
.abb .scelte{display:flex;gap:10px;flex-wrap:wrap}
.abb .scelta{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--raggio-3);background:var(--bg);cursor:pointer;margin:0;font-size:var(--fs-nota);color:var(--ink);--campo-fondo:var(--campo-su-bianco)}
.abb .scelta input{width:auto}
.abb .scelta:has(input:checked){border-color:var(--blue);background:var(--blue-soft,var(--ce-100))}
.abb .scelta .ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--blue)}
.abb #stima{background:var(--bg2);border:1px solid var(--line);border-radius:var(--raggio-3);padding:12px 14px;font-size:var(--fs-nota);color:var(--ink);--campo-fondo:var(--fondo)}
.abb .btn-secondario{display:inline-block;background:var(--bg);color:var(--blue);border:1.5px solid var(--line);border-radius:var(--raggio-2);padding:10px 16px;font-weight:600;font-size:var(--fs-nota);cursor:pointer;--campo-fondo:var(--campo-su-bianco)}
.abb .btn-secondario:hover{border-color:var(--blue)}

/* landing convenzioni: stesso trattamento */

.kind-convenzioni-lp main{padding:0;max-width:none}
.kind-convenzioni-lp main.wrap{max-width:none;padding:0}

/* respiro verticale sulle pagine di contenuto (le landing full-bleed lo azzerano) */
main.wrap{padding:28px 20px 56px}
/* banner in evidenza: altezza coerente, mai stirato */
.evidenza{border-radius:var(--raggio-3);overflow:hidden;margin:0 0 26px}
.evidenza img{display:block;width:100%;height:clamp(200px,30vw,340px);object-fit:cover}

/* ===== Tema scuro: correzioni di contrasto ===== */
/* footer sempre scuro e leggibile in entrambi i temi (prima invertiva col token --ink) */
.pie{background:var(--kit-blu-12b);color:var(--kit-blu-82);border-top:1px solid var(--kit-blu-17)}
.pie a{color:var(--ne-0)}.pie strong{color:var(--ne-0)}
.pie .copy{color:var(--kit-blu-63)}
.pie .copy a{color:var(--kit-blu-82)}
.pie .tema{color:var(--kit-blu-82);border-color:var(--kit-blu-28b)}
/* mega Regioni: pannello legato al tema, non bianco fisso */

/* mock/lead-card decorativi: sempre "schermata chiara", colori fissi (non i token che si invertono) */
.crm-mock,.crm-leadcard{color:var(--kit-blu-11)}
.crm-mock-top{background:var(--ne-50);border-bottom-color:var(--kit-blu-91);color:var(--kit-blu-35)}
.crm-mock-top b{color:var(--kit-blu-11)}
.crm-kpi div{background:var(--ne-50)}
.crm-kpi span,.crm-i span,.crm-when,.crm-leadmeta,.crm-leadfoot span{color:var(--kit-blu-48)}
.crm-kpi b,.crm-i b,.crm-leadcard h4,.crm-leadfoot b{color:var(--kit-blu-11)}
.crm-tratta{color:var(--kit-blu-35)}
.crm-row{border-top-color:var(--kit-blu-91)}
.crm-pill{background:var(--ne-50);color:var(--kit-blu-35)}

/* logo nel footer (bianco su fondo scuro) */
.pie-brand{display:inline-block;margin-bottom:12px}
.pie-brand img{height:40px;width:auto;display:block;filter:brightness(0) invert(1)}

/* testi a tutta larghezza nelle pagine di contenuto */
.pagina .contenuto{max-width:none}
.pg-lede{max-width:none}

/* pagine servizio: niente banner in evidenza (hero già forte, evita spazio sprecato da immagini a bassa risoluzione) */
.kind-servizio .evidenza{display:none}

/* tema scuro: sulla home il logo è già bianco (filtro), niente pillola bianca (sarebbe invisibile) */

/* header allineato al contenuto full-bleed (1160px) sulle landing: il bordo destro del menu coincide con quello della form */

/* select nel form hero */
.hc-inp select{border:0;padding:11px 0;font:inherit;font-size:var(--fs-nota);color:var(--kit-blu-11);background:none;width:100%;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer}
.hc-inp input[type=date]{color:var(--kit-blu-11)}
/* Padding del riquadro della home (28/09). L'anello del focus sta sul riquadro, non anche sul campo dentro (faceva
   un secondo bordo arrotondato). La tendina occupa tutto il riquadro, icona compresa (l'icona le sta sopra e lascia
   passare il clic): così l'elenco delle voci si apre allineato al bordo del campo e non dopo l'icona. */
.hc-field .hc-inp input:focus{box-shadow:none;border:0}   /* batte `.hc-field input:focus` più sotto */
.hc-inp{position:relative}
.hc-inp .hc-ic{position:relative;z-index:1;pointer-events:none}
.hc-inp select{flex:1 1 auto;min-width:0;width:auto;margin:0 -12px 0 -40px;padding:11px 12px 11px 40px}
.hc-inp select option,.rc-form select option{padding:8px 12px}

/* ==================== Banner cookie (stile preferenze) ==================== */
[hidden]{display:none!important}
.ck{position:fixed;left:0;right:0;bottom:0;z-index:1500;display:flex;justify-content:center;padding:16px}
.ck-card{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:var(--raggio-4);box-shadow:var(--ombra-3);max-width:920px;width:100%;padding:20px 22px;--campo-fondo:var(--campo-su-bianco)}
.ck-head strong{font-family:"Phinster","Source Sans 3",system-ui,sans-serif;font-size:var(--fs-testo);display:block;margin-bottom:6px;color:var(--ink)}
.ck-head p{font-size:var(--fs-nota);color:var(--ink2);margin:0;line-height:1.5}
.ck-head a{color:var(--accent-ink);font-weight:600}
.ck-prefs{display:flex;flex-direction:column;gap:10px;margin:14px 0 2px;border-top:1px solid var(--line);padding-top:14px}
.ck-row{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:var(--fs-nota)}
.ck-row span{display:flex;flex-direction:column;gap:1px}
.ck-row b{font-weight:600;color:var(--ink)}.ck-row small{color:var(--ink3);font-size:var(--fs-nota)}
.ck-row input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--accent-ink)}
.ck-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.ck-btn{font:inherit;font-weight:700;font-size:var(--fs-nota);padding:11px 20px;border-radius:var(--raggio-2);border:1.5px solid transparent;cursor:pointer}
.ck-pri{background:var(--btn-fondo);color:var(--btn-testo)}.ck-pri:hover{background:var(--btn-fondo-over);color:var(--btn-testo-over)}
.ck-ghost{background:transparent;color:var(--ink);border-color:var(--line)}.ck-ghost:hover{border-color:var(--ink2)}
@media (max-width:600px){.ck-actions .ck-btn{flex:1 1 auto}}

/* --- badante.it: scheda richiesta in home, elenco regioni, guide --- */
.hc-fcard select,.hc-fcard input[type=text]{width:100%;border:0;background:transparent;font:inherit;color:var(--kit-blu-11)}
.hc-regioni{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 14px;list-style:none;padding:0;margin:10px 0 0}.hc-regioni a{text-decoration:none;color:var(--ink2)}.hc-regioni a:hover{color:var(--accent-ink)}
.hc-guide{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}.hc-guide a{display:inline-block;padding:6px 12px;border:1px solid var(--line);border-radius:var(--raggio-pillola);text-decoration:none;color:var(--ink2);font-size:var(--fs-nota);background:var(--bg);--campo-fondo:var(--campo-su-bianco)}.hc-guide a:hover{border-color:var(--accent);color:var(--accent-ink)}
.home .contenuto{margin:32px auto 0}
.cta .cta-privacy{font-size:var(--fs-nota);color:var(--ink3);margin:8px 0 0}

/* tema scuro: i testi colorati su fondo scuro usano il rosa chiaro (--accent-ink var(--mg-500) sul fondo scuro fa 3,22).
   Il pulsante secondario usa `--su-fondo`, che è già il magenta giusto per il fondo di ciascun tema. */
:root[data-theme="dark"] :is(.hc-eyebrow:not(.hc-eyebrow-l),.cta-titolo strong,.hc-n,.hc-kick,.hc-eta b,.mega-col h4,.ck-head a,.menu .tel,.drop ul li a.corrente,.hc-regioni a:hover,.hc-guide a:hover,.kind-home .menu>a:not(.menu-fb):hover,.kind-home .menu summary:hover){color:var(--accent-testo)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.hc-eyebrow:not(.hc-eyebrow-l),.cta-titolo strong,.hc-n,.hc-kick,.hc-eta b,.mega-col h4,.ck-head a,.menu .tel,.drop ul li a.corrente,.hc-regioni a:hover,.hc-guide a:hover,.kind-home .menu>a:not(.menu-fb):hover,.kind-home .menu summary:hover){color:var(--accent-testo)}}

/* ==================== Testata e home come il live (2026-09-07): barra alta e bianca, logo grande, voci con il pallino rosa, Facebook tondo ==================== */

/* la testata della home è bianca: le voci tornano del colore del menu (quelle chiare erano per la vecchia testata scura) */

/* hero chiaro con la fascia illustrata */
.hc-hero-chiaro{background:linear-gradient(180deg,var(--bg) 0,var(--bg2) 100%)}
.hc-hero-chiaro::before{display:none}
.hc-hero-chiaro .hc-hero-in{padding-top:44px;padding-bottom:18px}
.hc-hero-chiaro .hc-hero-testo h1{color:var(--accent);font-size:var(--fs-vetrina)}
.hc-hero-chiaro .hc-sotto{font-family:var(--disp);font-size:var(--fs-titolo-2);color:var(--viola);margin:6px 0 0;letter-spacing:-.01em}
.hc-hero-chiaro .hc-lead{color:var(--ink2)}
.hc-hero-chiaro .hc-pts li{color:var(--ink)}
.hc-hero-chiaro .hc-fcard{box-shadow:var(--ombra-vetrina);border:1px solid var(--line)}
.hc-illustrazioni{list-style:none;margin:0;padding:18px 40px 34px;display:flex;justify-content:space-between;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.hc-illustrazioni li{flex:0 0 auto;scroll-snap-align:center}
.hc-illustrazioni img{width:190px;height:190px;display:block}
@media (max-width:900px){.hc-illustrazioni{justify-content:flex-start;padding:10px 22px 26px}.hc-illustrazioni img{width:150px;height:150px}.hc-hero-chiaro .hc-hero-testo h1{font-size:var(--fs-titolo-1)}.hc-hero-chiaro .hc-sotto{font-size:var(--fs-titolo-3)}}
/* le schede delle guide con le immagini del WordPress */
.hc-scopri{background:var(--bg);--campo-fondo:var(--campo-su-bianco)}
.hc-scopri h2,.hc-trova h2{font-family:var(--disp);font-size:var(--fs-titolo-1);color:var(--ink);text-align:center;margin:0 0 8px;letter-spacing:-.02em}
.hc-scopri-p{text-align:center;color:var(--ink2);margin:0 auto 26px}   /* a tutta larghezza: stretto andava a capo in mezzo alla frase */
/* Home, sezione delle guide: due colonne, la mappa dell'Italia a sinistra e le guide a destra. Con la mappa le
   schede diventano due per riga invece di cinque, perché la colonna è la metà; senza mappa resta la fila di prima.
   Sotto gli 860 pixel le due colonne si impilano e la mappa va sopra, che è la cosa che si guarda per prima. */
.hc-due.con-mappa{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.hc-italia{display:flex;flex-direction:column;align-items:center;gap:12px}
.hc-italia .rg-svg{max-width:100%;max-height:none}
.hc-italia-p{margin:0;text-align:center;font-size:var(--fs-nota);color:var(--ink3)}
/* Le guide accanto alla mappa sono un elenco, non una griglia: miniatura a sinistra e titolo a destra, così cinque
   schede stanno nell'altezza della mappa invece di allungare la pagina di due schermate. Resta una scheda con il
   suo effetto al passaggio del mouse, quello di sempre. */
.hc-due.con-mappa .hc-cards{grid-template-columns:1fr;gap:12px}
.hc-cards.cs-cards{grid-template-columns:1fr 1fr;gap:12px}
/* In «Consulenza» le schede del blog in tre colonne, poi i tag delle altre guide; accanto alla mappa, i tag delle regioni. */
.hc-cards.hc-cards-guide{grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0 16px}
@media (max-width:900px){.hc-cards.hc-cards-guide{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.hc-cards.hc-cards-guide{grid-template-columns:1fr}}
/* Mappa al centro e tag sotto, tutti e due larghi quanto la sezione (28/09): a fianco, la mappa lasciava metà
   colonna vuota sopra e sotto i tag. */
.hc-due.con-mappa.hc-impilata{grid-template-columns:1fr;gap:28px}
.hc-impilata .hc-italia .rg-svg{width:700px;max-width:100%;height:auto;max-height:none}   /* 700 px, provati anche 468 e 800 il 28/09 */
.hc-colonna-regioni{text-align:center}
.hc-colonna-regioni .hc-guide{gap:10px;justify-content:center}
.hc-colonna-regioni .hc-guide a{font-size:var(--fs-testo);padding:7px 14px}
.hc-info .hc-scopri-tutte{text-align:left;margin:16px 0 0}
/* La miniatura riempie la scheda da bordo a bordo. `height:100%` dentro la griglia non bastava — l'altezza della
   riga la decide il testo, e l'immagine restava più bassa lasciando il rosa sopra e sotto — quindi l'immagine è
   posizionata sulla scheda e la prima colonna della griglia le tiene il posto. Così l'altezza è quella della
   scheda qualunque cosa faccia il titolo. */
.hc-due.con-mappa .hc-card,.cs-cards .hc-card,.hc-cards-guide .hc-card{position:relative;display:grid;grid-template-columns:120px 1fr;min-height:104px;padding:0}
/* `margin:0` non è di troppo: le immagini dentro `.contenuto` hanno 12px sopra e sotto, ed erano quelli la
   striscia rosa che restava attorno alla miniatura. */
.hc-due.con-mappa .hc-card img,.cs-cards .hc-card img,.hc-cards-guide .hc-card img{position:absolute;left:0;top:0;width:120px;height:100%;min-height:0;margin:0;aspect-ratio:auto;object-fit:cover;border-radius:0}
.hc-due.con-mappa .hc-card span,.cs-cards .hc-card span,.hc-cards-guide .hc-card span{grid-column:2;align-self:center;padding:14px 18px;font-size:var(--fs-testo)}
@media (max-width:480px){.hc-due.con-mappa .hc-card,.cs-cards .hc-card,.hc-cards-guide .hc-card{grid-template-columns:92px 1fr}.hc-due.con-mappa .hc-card img,.cs-cards .hc-card img,.hc-cards-guide .hc-card img{width:92px}}
/* Schede non bianche, ma della stessa tinta della sezione che viene subito sotto (`--bg2`, il fondo alternato del
   sito). Con il rosa della fascia dei filtri si vedevano due tinte pallide quasi uguali una sopra l'altra, e due
   colori che quasi combaciano sembrano un errore più di due colori diversi. */
.hc-scopri .hc-card{background:var(--bg2);border-color:var(--line);--campo-fondo:var(--fondo)}
@media (max-width:900px){.hc-due.con-mappa{grid-template-columns:1fr;gap:26px}.hc-italia .rg-svg{max-height:340px}}
.hc-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.hc-card{display:block;text-decoration:none;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:var(--raggio-4);overflow:hidden;transition:transform .15s,box-shadow .15s;--campo-fondo:var(--campo-su-bianco)}
.hc-card img{width:100%;height:auto;aspect-ratio:5/3;object-fit:cover;display:block}
.hc-card span{display:block;padding:12px 14px;font-weight:600;font-size:var(--fs-testo);line-height:1.3}
.hc-card:hover{transform:translateY(-3px);box-shadow:var(--ombra-vetrina);border-color:var(--rosa)}
.hc-scopri-tutte{text-align:center;margin:22px 0 0;color:var(--ink3)}
.hc-due.con-mappa .hc-scopri-tutte{margin:16px 0 0;text-align:left}
/* Due classi nel selettore, non una: `.contenuto h3` vale (0,1,1) e batterebbe una classe sola, lasciando gli 8
   pixel di margine sotto invece dei 22 che servono a staccare il titolo dalla prima scheda. */
.hc-colonna-guide .hc-colonna-t{font-size:var(--fs-grande);margin:10px 0 22px;color:var(--ink)}
.hc-trova{background:var(--bg2);--campo-fondo:var(--fondo)}
.hc-trova .cta{margin:0 auto;}
@media (max-width:900px){.hc-cards{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.hc-cards{grid-template-columns:1fr 1fr;gap:12px}.hc-scopri h2,.hc-trova h2{font-size:var(--fs-titolo-2)}}
.kind-home .contenuto{max-width:none;padding:0;margin:0}
.kind-home .contenuto .sezione{margin:0}
@media (min-width:901px){.hc-illustrazioni{overflow:visible}}

/* cinque stelle riempite fino al voto (macro `sito/_stelle.html`): il colore lo dà la pagina che le usa */
.stelle{display:flex;align-items:center;gap:8px;margin:0;font-weight:600}
.stelle-dis{width:86.4px;height:16px;flex:0 0 auto}

/* ==================== Pagina comune: le badanti disponibili (2026-09-18, due temi dal 2026-09-22) ====================
   Fascia a tutta larghezza come la sezione dei servizi in home. Fino al 22/09 i colori erano fissi e la fascia era
   identica nei due temi: in tema chiaro restava un blocco scuro in mezzo a una pagina chiara. Ora ha due palette,
   rosa chiarissima con testo scuro in tema chiaro e melanzana profonda con testo chiaro in tema scuro. I nomi delle
   variabili dicono il ruolo, non il colore (`--bd-chiaro` è «il testo principale», non «un colore chiaro»), così le
   regole qui sotto valgono per tutti e due i temi e si tocca solo l'elenco.
   `--bd-magenta` resta fisso apposta: lo usa anche la scheda bianca del modulo, che bianca è in tutti e due i temi. */
.pg-badanti{--link-fisso:var(--mg-700);--bd-magenta:var(--mg-700);--bd-blu:var(--kit-blu-12b);
  --bd-fondo:var(--mg-100);--bd-alone:var(--kit-prugna-91);--bd-scheda:var(--ne-0);--bd-bordo:var(--kit-prugna-79);--bd-titolo:var(--mg-800);
  --bd-chiaro:var(--kit-prugna-17);--bd-tenue:var(--kit-prugna-32);--bd-rosa:var(--mg-600);--bd-su-rosa:var(--ne-0);
  --bd-riga:var(--nero-a18);--bd-vista-fondo:var(--fi-fondo);--bd-btn-fondo:var(--mg-700);--bd-btn-testo:var(--ne-0);
  --bd-btn2-fondo:var(--mg-800);--bd-btn2-testo:var(--ne-0);--bd-btn2-bordo:var(--mg-800);--bd-btn2-h-fondo:var(--ne-0);--bd-btn2-h-testo:var(--mg-800);
  /* Fascia grigia (28/09): stacca le badanti dal testo bianco della pagina del comune; le schede sono rosa. */
  background:var(--bg2);border-top:1px solid var(--line);
  color:var(--bd-chiaro);margin:48px 0 0;padding:56px 0 60px;--campo-fondo:var(--fondo)}
:root[data-theme="dark"] .pg-badanti{--bd-fondo:var(--kit-prugna-8);--bd-alone:var(--kit-prugna-18);--bd-scheda:var(--mg-900);--bd-bordo:var(--kit-prugna-51);--bd-titolo:var(--ne-0);--bd-chiaro:var(--kit-prugna-95);--bd-tenue:var(--kit-prugna-81);--bd-rosa:var(--mg-200);--bd-su-rosa:var(--kit-prugna-8);--bd-riga:var(--bianco-a50);--bd-vista-fondo:var(--nero-a25);--bd-btn-fondo:var(--ne-0);--bd-btn-testo:var(--mg-700);--bd-btn2-fondo:var(--ne-0);--bd-btn2-testo:var(--kit-prugna-8);--bd-btn2-bordo:var(--ne-0);--bd-btn2-h-fondo:var(--mg-200);--bd-btn2-h-testo:var(--kit-prugna-8)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pg-badanti{--bd-fondo:var(--kit-prugna-8);--bd-alone:var(--kit-prugna-18);--bd-scheda:var(--mg-900);--bd-bordo:var(--kit-prugna-51);--bd-titolo:var(--ne-0);--bd-chiaro:var(--kit-prugna-95);--bd-tenue:var(--kit-prugna-81);--bd-rosa:var(--mg-200);--bd-su-rosa:var(--kit-prugna-8);--bd-riga:var(--bianco-a50);--bd-vista-fondo:var(--nero-a25);--bd-btn-fondo:var(--ne-0);--bd-btn-testo:var(--mg-700);--bd-btn2-fondo:var(--ne-0);--bd-btn2-testo:var(--kit-prugna-8);--bd-btn2-bordo:var(--ne-0);--bd-btn2-h-fondo:var(--mg-200);--bd-btn2-h-testo:var(--kit-prugna-8)}}
.bd-testa{margin:0 0 24px}
.bd-eyebrow{display:block;font-family:"Source Sans 3",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:var(--fs-nota);font-weight:700;color:var(--bd-rosa)}
.pg-badanti h2{font-family:var(--disp);font-size:var(--fs-titolo-1);color:var(--bd-titolo);margin:10px 0 8px}
.bd-lede,.bd-vuoto{color:var(--bd-tenue);font-size:var(--fs-testo);margin:0}
.bd-vuoto p{margin:0}
/* Comune senza badanti: la domanda e il pulsante stanno sulla stessa riga, al centro. Sul telefono si impilano. */
.bd-invito{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;margin:26px 0 0}
.bd-invito-t{font-size:var(--fs-grande);font-weight:700;color:var(--bd-titolo)}
.bd-invito .btn{margin:0}
/* scambio schede/elenco: centrato sotto la testa; le radio sono nascoste alla vista ma non alla tastiera */
.bd-vista{display:flex;gap:4px;width:max-content;margin:0 auto 22px;padding:4px;border:1px solid var(--bd-bordo);border-radius:var(--raggio-pillola);background:var(--bd-vista-fondo)}
.bd-vista input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.bd-vista label{cursor:pointer;padding:7px 16px;border-radius:var(--raggio-pillola);font-size:var(--fs-nota);font-weight:600;line-height:1.2;color:var(--bd-tenue)}
.bd-vista input:checked+label{background:var(--bd-rosa);color:var(--bd-su-rosa)}
.bd-vista input:focus-visible+label{outline:2px solid var(--bd-titolo);outline-offset:2px}
/* schede */
.bd-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bd-card{display:flex;flex-direction:column;gap:14px;border:1px solid var(--bd-bordo);border-radius:var(--raggio-4);padding:20px;background:var(--bd-scheda);--campo-fondo:var(--fondo)}
.bd-corpo{display:flex;flex-direction:column;gap:5px}
.bd-card h3{margin:0 0 3px;font-size:var(--fs-grande);color:var(--bd-titolo)}
.bd-card p{margin:0;font-size:var(--fs-nota);line-height:1.45}
.bd-testo{font-style:italic;color:var(--bd-tenue)}
.bd-card .stelle{color:var(--bd-rosa)}
/* separatore sottile, centrato, largo il 70% della scheda */
.bd-riga{width:70%;height:1px;margin:10px auto;border:0;background:var(--bd-riga)}
/* ogni dato con la sua etichetta: «Oltre 5 anni» da solo non voleva dire niente.
   Etichetta e valore restano sulla stessa riga: il <div> raggruppa la coppia, dentro <dl> è valido. */
.bd-dettagli{margin:0}
.bd-dettagli>div{margin:0 0 5px}
.bd-dettagli>div:last-child{margin-bottom:0}
.bd-dettagli dt{display:inline;font-family:"Source Sans 3",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:var(--fs-nota);font-weight:700;color:var(--bd-rosa)}
.bd-dettagli dd{display:inline;margin:0;font-size:var(--fs-nota);line-height:1.45;color:var(--bd-chiaro)}
.bd-btn{margin-top:auto;align-self:flex-start;font-size:var(--fs-nota);padding:9px 16px}
.pg-badanti .btn{background:var(--bd-btn-fondo);border-color:var(--bd-btn-fondo);color:var(--bd-btn-testo)}
.pg-badanti .btn:hover{background:var(--bd-blu);border-color:var(--bd-blu);color:var(--ne-0)}   /* il blu del piè di pagina: svuotato restava magenta su magenta */
/* Il contorno appena accennato serve in tema chiaro, dove la pastiglia sta su una fascia già chiara e senza
   contorno si perderebbe; in tema scuro non si vede e non dà fastidio. */
.bd-pill{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-nota);padding:2px 9px 2px 7px;border:1px solid var(--nero-a12);border-radius:var(--raggio-pillola);background:var(--bd-bordo);color:var(--bd-chiaro);vertical-align:middle;font-weight:600}
/* I tre gradi, una tinta ciascuno e un simbolo che cresce con la scala: grigio e niente «c'è»; violetto con la
   spunta «l'abbiamo verificata noi»; oro con la stella «l'ha confermata una famiglia», che è il grado più alto e
   merita il colore del riconoscimento. Tinte lontane fra loro, non tre sfumature della stessa: prima erano due
   lilla vicini e il colore non diceva niente che la parola non dicesse già. Fissi come tutta la fascia. */
.bd-liv-base{background:var(--gr-iscritta-fondo);color:var(--gr-iscritta-testo);--campo-fondo:var(--fondo)}
.bd-liv-verificata{background:var(--gr-verificata-fondo);color:var(--gr-verificata-testo);--campo-fondo:var(--fondo)}
.bd-liv-referenze{background:var(--gr-referenze-fondo);color:var(--gr-referenze-testo);--campo-fondo:var(--fondo)}
/* La spunta prende il colore del testo; la stella ha un oro suo, più saturo, così si legge come una medaglia e non
   si confonde con le stelle rosa del voto, che dicono un'altra cosa e stanno più in basso nella stessa scheda.
   3,5:1 sul fondo della pastiglia: per un simbolo il minimo è 3 (WCAG 1.4.11). */
.bd-ic{width:12px;height:12px;flex:0 0 12px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.bd-liv-referenze .bd-ic{fill:var(--gr-referenze-segno);stroke:var(--gr-referenze-segno);stroke-width:1.5}
.bd-liv-base{padding-left:9px}   /* senza simbolo il rientro a sinistra non serve */
/* Elenco: una riga per badante, il pulsante a destra; la presentazione resta solo nelle schede.
   Sul telefono l'elenco non esiste: la scelta è nascosta e vale sempre la vista a schede, che lì è già una
   colonna sola. Per questo tutte le regole dell'elenco stanno dentro un `min-width`: così sul piccolo non c'è
   niente da disfare, nemmeno se la scelta era rimasta su «Elenco» prima di stringere la finestra. */
@media (min-width:601px){
  /* Una riga per badante: il primo quarto è chi è (foto, nome, chi e dove, livello), i tre quarti la descrizione,
     e i pulsanti in basso a destra. .bd-corpo si scioglie (display:contents) così i suoi pezzi vanno nella griglia. */
  .pg-badanti:has(#bd-elenco:checked) .bd-cards{grid-template-columns:1fr;gap:10px}
  .pg-badanti:has(#bd-elenco:checked) .bd-card{display:grid;grid-template-columns:minmax(220px,1fr) 3fr;align-items:start;gap:6px 28px;padding:16px 20px}
  .pg-badanti:has(#bd-elenco:checked) .bd-corpo{display:contents}
  .pg-badanti:has(#bd-elenco:checked) .bd-chi{grid-column:1;grid-row:1 / span 5;align-items:flex-start;padding-right:0}
  .pg-badanti:has(#bd-elenco:checked) .bd-corpo>:not(.bd-chi),.pg-badanti:has(#bd-elenco:checked) .bd-azioni{grid-column:2}
  .pg-badanti:has(#bd-elenco:checked) .bd-grado{position:static;margin-top:6px}
  .pg-badanti:has(#bd-elenco:checked) .bd-riga{display:none}
  .pg-badanti:has(#bd-elenco:checked) .bd-dettagli{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 16px}
  .pg-badanti:has(#bd-elenco:checked) .bd-dettagli>div{margin:0}
  .pg-badanti:has(#bd-elenco:checked) .bd-card h3{margin:0}
  .pg-badanti:has(#bd-elenco:checked) .bd-testo{display:none}
  .pg-badanti:has(#bd-elenco:checked) .bd-azioni{justify-self:end;margin-top:6px}
  .pg-badanti:has(#bd-elenco:checked) .bd-btn{margin:0}
}
/* chiusura della fascia: separatore bianco e i due pulsanti al centro */
.bd-chiusura{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:40px 0 0;padding:32px 0 0;border-top:1px solid var(--bd-riga)}
/* Il pulsante secondario della fascia: pieno, non svuotato, perché sul rosa chiaro il contorno da solo spariva.
   In tema chiaro è bordeaux e schiarisce a bianco al passaggio del mouse; in tema scuro è bianco e passa al rosa.
   Il contorno resta del colore forte anche quando il fondo è chiaro, altrimenti la forma si perde nella fascia. */
.pg-badanti .btn.btn-secondario{background:var(--bd-btn2-fondo);border-color:var(--bd-btn2-bordo);color:var(--bd-btn2-testo)}
.pg-badanti .btn.btn-secondario:hover{background:var(--bd-btn2-h-fondo);border-color:var(--bd-btn2-bordo);color:var(--bd-btn2-h-testo)}

/* ---- Campi obbligatori e iscrizione gratuita (2026-09-22) ----
   L'asterisco è solo visivo: agli screen reader l'obbligo lo dice `required` sul campo. Ha un token suo perché
   --accent-ink in tema scuro sta a 3,2:1 sul fondo, troppo poco per del testo. */
.req{color:var(--req);font-weight:700}
.obbligatori{margin:-6px 0 18px;font-size:var(--fs-nota);color:var(--ink2)}
.obbligatori span{color:var(--req);font-weight:700}
/* La spunta dell'iscrizione non è un consenso obbligatorio ma un'offerta: si stacca dalle due spunte di legge. */
label.check.iscrizione{align-items:start;gap:10px;margin:6px 0 4px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--raggio-3);background:var(--bg2);line-height:1.45;--campo-fondo:var(--fondo)}

/* ---- Modulo di richiesta dentro la fascia (bozza 2026-09-21) ----
   Scheda chiara sul fondo scuro: come tutta la fascia i colori sono fissi, non token del tema, così il testo
   resta scuro e leggibile in tema chiaro e in tema scuro. Il comune non si chiede: lo sa gia la pagina. */
.rc{--rc-ink:var(--kit-prugna-10);--rc-ink2:var(--kit-prugna-31);--rc-linea:var(--kit-prugna-55);   /* 3,59:1 sul bianco: il contorno di un campo e un componente, chiede 3:1 (WCAG 1.4.11) */
  margin:40px 0 0;padding:28px 28px 30px;border-radius:var(--raggio-4);background:var(--ne-0);color:var(--rc-ink);--campo-fondo:var(--campo-rosa);color-scheme:light}   /* sempre bianco: anche le caselle restano chiare */
.rc-testa{margin:0 0 20px}
.rc-eyebrow{display:block;font-family:"Source Sans 3",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:var(--fs-nota);font-weight:700;color:var(--bd-magenta)}
.pg-badanti .rc h1,.pg-badanti .rc h2{font-family:var(--disp);font-size:var(--fs-titolo-2);color:var(--rc-ink);margin:8px 0 6px}
.rc-lede{margin:0;font-size:var(--fs-testo);line-height:1.5;color:var(--rc-ink2)}
.rc-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin:0;max-width:none}
.rc-form label{display:grid;gap:5px;font-size:var(--fs-nota);font-weight:600;color:var(--rc-ink)}
.rc-form input,.rc-form select,.rc-form textarea{font:inherit;font-size:var(--fs-nota);font-weight:400;padding:11px 12px;border:1.5px solid var(--rc-linea);border-radius:var(--raggio-2);background:var(--campo-fondo);color:var(--rc-ink);width:100%}
/* Caselle e tendine della stessa altezza (6/10): la tendina usciva un paio di pixel più bassa della casella accanto. */
.rc-form input:not([type=checkbox]):not([type=radio]),.rc-form select{min-height:50px;box-sizing:border-box}
@media (max-width:760px){.rc-form input:not([type=checkbox]):not([type=radio]),.rc-form select{min-height:54px}}   /* sul telefono il testo è più grande */
.rc-form input:focus,.rc-form select:focus,.rc-form textarea:focus{outline:none;border-color:var(--bd-magenta);box-shadow:0 0 0 3px var(--mg-700-a16)}
.rc-piena{grid-column:1/-1}
.rc-nota{font-weight:400;font-size:var(--fs-suggerimento);line-height:1.4;color:var(--rc-ink2)}
.rc-scelta{margin:0;font-size:var(--fs-testo);line-height:1.5;color:var(--rc-ink)}
.rc-form label.check{grid-auto-flow:column;justify-content:start;align-items:start;gap:9px;font-weight:400;font-size:var(--fs-nota);line-height:1.45;color:var(--rc-ink2)}
.rc-form label.check input{width:auto;margin-top:3px}
.rc-form label.check a{color:var(--bd-magenta)}
.rc-invio{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:4px}
.pg-badanti .rc .btn{background:var(--btn-fondo);border-color:var(--btn-fondo);color:var(--btn-testo)}   /* il pulsante principale di tema.css: nel tema scuro è chiaro con la scritta scura */
.pg-badanti .rc .btn:hover{background:var(--btn-fondo-over);border-color:var(--btn-fondo-over);color:var(--btn-testo-over)}
.rc-privacy{margin:0;flex:1 1 240px;font-size:var(--fs-nota);line-height:1.45;color:var(--rc-ink2)}
/* la tendina della preferenza e il punto d'arrivo di «Chiedi di parlare con...»: si accende per un attimo */
.rc-preferenza select{border-color:var(--bd-magenta)}
.rc-preferenza.scelta select{background:var(--mg-100)}
/* Dentro la scheda bianca i colori sono fissi come tutta la fascia: l'asterisco e il riquadro dell'iscrizione
   non possono usare i token del tema, o in tema scuro finirebbero chiari su bianco. */
.rc .req{color:var(--bd-magenta)}
.rc-obbligatori{margin:10px 0 0;font-size:var(--fs-nota);color:var(--rc-ink2)}
.rc-obbligatori span{color:var(--bd-magenta);font-weight:700}
.rc-form label.check.rc-iscrizione{margin:6px 0 2px;padding:14px 16px;border:1px solid var(--rc-linea);border-radius:var(--raggio-3);background:var(--mg-100);color:var(--rc-ink)}
@media (max-width:600px){.rc{padding:22px 18px 24px}.rc-form{grid-template-columns:1fr}}
/* Il modulo da solo su /preventivo-assistito: la fascia parte sotto la testata e la scheda non deve staccarsi
   da niente, perché sopra non c'è nessuna badante. */
.pg-richiesta{margin-top:0}
.pg-richiesta .rc{margin-top:0;max-width:880px;margin-inline:auto}

@media (max-width:900px){.bd-cards{grid-template-columns:1fr 1fr}.pg-badanti h2{font-size:var(--fs-titolo-2)}}
@media (max-width:600px){.bd-cards{grid-template-columns:1fr}.pg-badanti{padding:42px 0 46px}.bd-vista{display:none}}

/* ==================== Pagina del comune (2026-09-17): apertura a tutta larghezza, tre pulsanti, icone in riga ==================== */
.kind-comune main.wrap,.kind-regione main.wrap,.kind-richiesta main.wrap,.kind-registrati main.wrap,.kind-consulenza main.wrap,.kind-guide main.wrap{max-width:none;padding:0 0 56px}
/* La regione ha la stessa apertura del comune: fascia grigia da bordo a bordo, e il contenuto sotto torna nella
   colonna. I pulsanti stanno **accanto** al titolo, nella seconda colonna, come l'indice sulla pagina del comune:
   sotto al titolo lasciavano mezza fascia vuota a destra. Allineati in basso, così stanno sulla linea del
   paragrafo e non galleggiano in mezzo al vuoto. */
.kind-regione .pg-hero-2col{align-items:center}   /* i pulsanti al centro dell'altezza del titolo, non appesi in basso */
.kind-regione .pg-azioni{flex-direction:column;align-items:stretch;margin:0}
@media (max-width:760px){.kind-regione .pg-azioni{margin-top:20px}}
.kind-regione .rg-prov:first-of-type{margin-top:34px}
/* quando la pagina finisce con la fascia scura, questa arriva fino al piè di pagina senza striscia bianca */
.kind-comune main.wrap:has(.pg-badanti),.kind-richiesta main.wrap,.kind-registrati main.wrap{padding-bottom:0}
/* Stessa cosa sulla regione: la fascia di chiusura arriva attaccata al piè di pagina, senza striscia bianca. */
.kind-regione main.wrap:has(.rg-cta){padding-bottom:0}
.pg-hero-comune{border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0;padding:34px 0 38px}
.pg-azioni{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 26px}
.pg-azioni .btn{margin:0}
/* l'icona occupa il 25% della riga: 250px su 1000px (i file sono 300x300, quindi restano nitidi) */
.pg-icone{--icona:250px;list-style:none;padding:0;margin:30px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;text-align:center}
.pg-icone li{margin:0}
.pg-icone img{display:block;width:100%;max-width:var(--icona);height:auto;margin:0 auto 12px}
.pg-icone span{display:block;font-weight:600;font-size:var(--fs-testo);color:var(--ink)}
@media (max-width:480px){.pg-icone{gap:10px}.pg-icone span{font-size:var(--fs-nota)}}
/* pulsanti a sinistra, indice degli argomenti a destra */
.pg-avvio{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;margin:26px 0 0}
.kind-comune .contenuto{margin-top:32px}   /* la fascia grigia finisce col suo bordo: il testo ricomincia staccato */
.pg-azioni{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin:0}
.pg-azioni .btn{margin:0;text-align:center;padding:13px 18px}
.pg-indice{padding:0}
.pg-indice h2{font-family:var(--disp);font-size:var(--fs-grande);margin:0 0 10px}
.pg-indice ol{list-style:none;margin:0;padding:0}
.pg-indice li{margin:0 0 6px;font-size:var(--fs-testo);line-height:1.35}
.pg-indice a{color:var(--ink2);text-decoration:none}
.pg-indice a:hover{color:var(--accent-ink);text-decoration:underline}
/* i sottotitoli stanno chiusi finché non si apre il titolo che li contiene */
.pg-indice ol summary{list-style:none;display:flex;justify-content:center;align-items:flex-start;cursor:pointer;width:24px;height:24px}   /* R-14: un bersaglio da toccare è almeno 24×24 px (WCAG 2.5.8) */
.pg-ind-gruppo{position:relative;padding-left:14px}.pg-ind-gruppo>details>summary{position:absolute;left:-7px;top:0}   /* il triangolo sta a sinistra del link, come prima */
.pg-indice a{display:inline-block;min-height:24px}
.pg-indice-tutto{position:relative}.pg-indice-tutto>.pg-indice-tutti{position:absolute;right:0;top:4px}.pg-indice-tutto[open]:has(>.pg-indice-tutti:not([hidden]))>summary{padding-right:120px}
.pg-indice ol summary::-webkit-details-marker{display:none}
.pg-indice ol summary::before{content:"";flex:0 0 auto;width:0;height:0;margin-top:7px;border-left:6px solid var(--ink3);border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform .15s}
.pg-indice ol details[open]>summary::before{transform:rotate(90deg)}
.pg-indice details>ol{margin:6px 0 10px 14px}
.pg-indice details>ol li{font-size:var(--fs-nota);color:var(--ink3)}
.pg-indice>ol>li>a{display:inline-block;padding-left:14px}   /* allineato alle voci che hanno la freccia */
/* le immagini del contenuto: il testo le contorna, come sul WordPress */
.pagina:not(.home):not(.archivio) .contenuto p>img,
.pagina:not(.home):not(.archivio) .contenuto figure{float:right;max-width:min(42%,360px);margin:6px 0 16px 26px}
.pagina:not(.home):not(.archivio) .contenuto p>img{height:auto;border-radius:var(--raggio-3)}
.pagina:not(.home):not(.archivio) .contenuto figure img{display:block;width:100%;height:auto;border-radius:var(--raggio-3)}
.pagina:not(.home):not(.archivio) .contenuto figcaption{margin:6px 0 0;font-size:var(--fs-nota);line-height:1.35;color:var(--ink3)}
.pagina .contenuto h2{clear:both}   /* il titolo grande ricomincia sotto l'immagine; i sottotitoli le stanno accanto */
.pagina .contenuto .sezione{display:flow-root}   /* l'immagine che fluttua resta dentro la sua sezione */
.pagina .contenuto::after{content:"";display:block;clear:both}   /* e comunque niente esce in fondo al contenuto */
.pagina .pg-badanti,.pagina .pg-altri{clear:both}
.comune .contenuto .pg-icone img{float:none;max-width:var(--icona);margin:0 auto 12px;border-radius:0}
@media (max-width:760px){.pg-avvio{grid-template-columns:1fr;gap:20px}
  .pagina:not(.home):not(.archivio) .contenuto p>img,
  .pagina:not(.home):not(.archivio) .contenuto figure{float:none;max-width:100%;margin:10px 0}}

/* ==================== Pagina regione: province e comuni (2026-09-22) ====================
   L'elenco è costruito dai nostri dati. In cima l'indice delle province, che sono ancore alla loro sezione più in
   basso; la classe `con-mappa` apre la colonna per il disegno della regione, che oggi non c'è ancora.
   Chi ha una pagina è un link, chi non ce l'ha resta un nome: il territorio si vede tutto, ma non si promette una
   pagina che non esiste. Il numero accanto al comune è quante badanti hanno dato disponibilità lì, e compare solo
   quando è maggiore di zero: scritto «0» su tremila comuni direbbe solo che non c'è nessuno. */
/* Fascia del filtro: attaccata a quella grigia dell'apertura e larga quanto lo schermo, rosa in tema chiaro e
   bordeaux in tema scuro. È un attrezzo per muoversi, non contenuto della pagina, e si riconosce a colpo d'occhio
   anche scorrendo in fretta. `con-mappa` le apre la colonna del disegno della regione, che oggi non c'è ancora. */
.rg-fascia{margin:0;padding:30px 0 34px;background:var(--fi-fondo);border-bottom:1px solid var(--fi-bordo);--campo-fondo:var(--fondo)}
/* Mappa sopra, nomi delle province sotto, tutto centrato: la mappa è il titolo di questa fascia. */
.rg-mappa{display:flex;flex-direction:column;align-items:center;margin:0 0 20px}
/* La mappa: ogni provincia è una forma cliccabile che porta al suo elenco di comuni, come il pulsante accanto.
   I colori stanno nella tavola in cima al foglio (--mp-*): il riempimento regge da solo il 3:1 contro la fascia e
   il contorno è del colore della fascia, come in una carta geografica.
   La misura non dipende dal tema: 460 pixel di larghezza e 300 di altezza, quello che arriva prima. */
.rg-svg{display:block;width:auto;height:auto;max-width:min(100%,460px);max-height:300px}
/* In home la mappa sta sul fondo normale della pagina, non sulla fascia rosa: il contorno prende quel fondo. */
.hc-italia{--mp-linea:var(--bg)}
.rg-svg path{fill:var(--mp-fondo);stroke:var(--mp-linea);stroke-width:2.5;stroke-linejoin:round;transition:fill .12s}
.rg-prov-forma:hover path,.rg-prov-forma:focus-visible path,.rg-prov-forma.accesa path{fill:var(--mp-attiva)}
/* Il pulsante della provincia su cui si sta passando col mouse sulla mappa: stesso aspetto del suo hover, così
   il collegamento fra disegno e nome si vede senza scrivere niente in pagina e senza spostare niente. */
.rg-indice .btn.accesa{background:var(--btn-fondo);border-color:var(--btn-fondo);color:var(--btn-testo)}
.rg-prov-forma:focus-visible{outline:2px solid var(--fi-testo);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.rg-svg path{transition:none}}
@media (max-width:760px){.rg-svg{max-height:220px}}
.rg-indice ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0;padding:0}
.rg-indice li{margin:0}
/* Le province hanno lo stesso stile dei pulsanti del sito, in versione piccola: sono scelte, non link di testo. */
.rg-indice .btn{margin:0;padding:8px 16px;font-size:var(--fs-nota)}
/* Chiusura della pagina regione: fondo a tutta larghezza, contenuto nella colonna come il resto della pagina.
   Il riquadro stretto con il bordo a sinistra qui non serve: la fascia stessa fa già da riquadro. */
.rg-cta{margin:64px 0 0;padding:44px 0 52px;background:var(--bg2);border-top:1px solid var(--line);--campo-fondo:var(--fondo)}
.rg-cta .cta{margin:0;max-width:none;padding:0;border:0;background:transparent}
.rg-cta .cta-titolo{font-size:var(--fs-titolo-3)}

/* La citazione della fonte dei confini: in fondo a destra della fascia, piccola. La licenza la richiede. */
.rg-fonte{margin:18px 0 0;text-align:right;font-size:var(--fs-nota);color:var(--fi-testo);opacity:.75}
.rg-fonte a{color:inherit}
@media (max-width:600px){.rg-fonte{text-align:center}}
.rg-prov{margin:34px 0 0;scroll-margin-top:16px;position:relative}
.rg-prov>.rg-top{position:absolute;right:0;top:.55em;z-index:1}.rg-prov>.rg-prov-d>.rg-prov-testa{padding-right:150px}   /* il link alla mappa sta sopra la riga del titolo, non dentro (R-14) */
/* Titolo della provincia e ritorno alla mappa sulla stessa riga, con la linea sotto tutti e due. Il titolo apre e
   chiude la provincia: la freccia davanti al nome gira quando è aperta. */
.rg-prov-testa{cursor:pointer;list-style:none}
.rg-prov-testa::-webkit-details-marker{display:none}
.rg-prov-testa h2::before{content:"";display:inline-block;width:0;height:0;margin:0 12px 3px 2px;border-left:8px solid var(--accent);border-top:6px solid transparent;border-bottom:6px solid transparent;transition:transform .15s}
.rg-prov-d[open]>.rg-prov-testa h2::before{transform:rotate(90deg)}
.rg-prov-d:not([open])>.rg-prov-testa{margin-bottom:0}
.rg-prov-testa:hover .rg-citta,.rg-prov-testa:focus-visible .rg-citta{color:var(--accent)}
@media (prefers-reduced-motion:reduce){.rg-prov-testa h2::before{transition:none}}
.rg-cerca input{flex:1 1 320px;max-width:520px;padding:9px 14px;font:inherit;font-size:var(--fs-testo);border:1px solid var(--riquadro-bordo);border-radius:var(--raggio-2);background:var(--bg);color:var(--ink)}
.rg-cerca input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--mg-700-a16)}
.rg-cerca-esito{margin:6px 0 0;font-size:var(--fs-nota);color:var(--ink2);min-height:1.4em}
.rg-prov-testa{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 10px;padding:0 0 8px;border-bottom:2px solid var(--accent)}
.rg-prov h2{font-size:var(--fs-titolo-3);margin:0;padding:0;border:0}
.rg-top{flex:0 0 auto;font-size:var(--fs-nota);font-weight:600;white-space:nowrap}
.rg-top-corto{display:none}
@media (max-width:600px){.rg-top-lungo{display:none}.rg-top-corto{display:inline}.rg-prov>.rg-prov-d>.rg-prov-testa{padding-right:62px}}
.rg-citta{margin-right:14px}   /* il respiro fra il nome grande e il contorno piccolo */
.rg-sotto{font-family:"Source Sans 3",system-ui,sans-serif;font-size:var(--fs-nota);font-weight:400;color:var(--ink3)}
.rg-comuni{list-style:none;margin:0;padding:0;columns:4;column-gap:26px;font-size:var(--fs-testo)}
.rg-comuni li{break-inside:avoid;margin:0 0 5px;line-height:1.45}
.rg-comuni a.rg-senza{color:var(--ink3);text-decoration:none}   /* senza pagina: porta alla richiesta, non a una pagina */
.rg-comuni a.rg-senza:hover,.rg-comuni a.rg-senza:focus-visible{color:var(--accent);text-decoration:underline}
/* Il numero delle badanti: magenta pieno e testo bianco, uguale nei due temi. Prima usava il token `--rosa`, che
   in tema scuro è un bordeaux: il testo scuro sopra spariva. */
.rg-bad{display:inline-block;min-width:18px;padding:0 5px;border-radius:var(--raggio-pillola);background:var(--num-fondo);color:var(--num-testo);font-size:var(--fs-nota);font-weight:700;text-align:center;vertical-align:1px}
@media (max-width:900px){.rg-comuni{columns:3}.rg-apertura.con-mappa{grid-template-columns:1fr}}
@media (max-width:760px){.rg-comuni{columns:2}}
@media (max-width:480px){.rg-comuni{columns:1}}

/* ---------------------------------------------------------------- la scheda pubblica della badante (24/09)
   Foto (o un segnaposto) a sinistra, chi è e il pulsante per chiedere di lei al centro, il grado in alto a destra.
   Sotto, i blocchi del profilo in due colonne. Solo ruoli della palette: si rovescia da sola in tema scuro. */
.scheda-badante{display:grid;gap:22px}
.sb-testa{position:relative;display:grid;grid-template-columns:168px 1fr;gap:26px;align-items:start;padding:26px 30px;border:1px solid var(--riquadro-bordo);border-radius:var(--raggio-4);background:var(--superficie);--campo-fondo:var(--fondo)}
.sb-foto img,.sb-vuota{width:168px;height:168px;border-radius:var(--raggio-cerchio);object-fit:cover;display:block;border:3px solid var(--fondo);box-shadow:0 0 0 1px var(--riquadro-bordo)}
.sb-vuota{display:grid;place-items:center;background:var(--tenue);color:var(--marchio);--campo-fondo:var(--fondo)}
.sb-vuota svg{width:74px;height:74px;fill:none;stroke:currentColor;stroke-width:1.5}
.sb-chi h1{margin:0;color:var(--titolo)}
.sb-titolo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 6px;padding-right:150px}   /* il nome e «Salva» accanto; a destra resta il grado */
.sb-lede{margin:0 0 10px;color:var(--testo-tenue);font-size:var(--fs-testo)}
.sb-dove{margin:0 0 8px;font-weight:600}
.sb-azioni{margin:14px 0 0}
.sb-grado{position:absolute;top:22px;right:24px;font-size:var(--fs-nota);padding:5px 13px 5px 10px}
.sb-grado .bd-ic{width:15px;height:15px;flex-basis:15px}
.sb-coppia{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.sb-coppia>.sb-blocco:only-child{grid-column:1/-1}
.sb-muro{columns:2;column-gap:16px}
/* Blocchi normali, non inline-block: da riga, il browser non lascia una sola riga in cima o in fondo a una colonna
   (orphans/widows), e con due soli riquadri finivano tutti e due a sinistra (24/09). */
.sb-muro>.sb-blocco{break-inside:avoid;display:block;width:100%;margin:0 0 16px}
.sb-blocco{border:1px solid var(--riquadro-bordo);border-radius:var(--raggio-4);padding:18px 22px;background:var(--fondo);--campo-fondo:var(--campo-su-bianco)}
.sb-blocco h2,.sb-blocco h3{margin:0 0 10px;font-size:var(--fs-grande);color:var(--titolo)}
/* I capitoli della scheda pubblica, gli stessi del profilo della badante (29/09): numero nel cerchio e titolo. */
.sb-capitolo{display:flex;align-items:center;gap:12px;margin:30px 0 14px;font-size:var(--fs-titolo-3);color:var(--titolo);scroll-margin-top:20px}
.sb-num{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:var(--raggio-cerchio);background:var(--btn-fondo);color:var(--btn-testo);font-size:var(--fs-grande);font-weight:700;flex:0 0 auto}
.sb-breve{margin:0 0 6px}
.sb-muro:not(:has(>.sb-blocco+.sb-blocco)){columns:1}   /* un riquadro solo nel capitolo: a tutta larghezza */
.sb-blocco p{margin:0 0 6px}
.sb-citazione{font-size:var(--fs-testo);font-style:italic}
.sb-tenue{color:var(--testo-tenue)}
.sb-dl{margin:0;display:grid;gap:6px}.sb-dl>div{display:grid;grid-template-columns:120px 1fr;gap:10px}
.sb-dl dt{font-weight:700;color:var(--testo-tenue);font-size:var(--fs-nota)}.sb-dl dd{margin:0}
.sb-etichette{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.sb-etichette li{padding:4px 11px;border-radius:var(--raggio-pillola);background:var(--tenue);font-size:var(--fs-nota);--campo-fondo:var(--fondo)}
.sb-lista{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sb-lista small{color:var(--testo-tenue)}
.sb-tempo{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.sb-tempo li{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:0 0 14px;border-bottom:1px solid var(--bordo)}
.sb-tempo li:last-child{border-bottom:0;padding-bottom:0}
.sb-quando{font-weight:700;color:var(--titolo)}
.sb-tempo p{margin:2px 0 0;font-size:var(--fs-nota)}
.sb-dispo{border-collapse:collapse;width:100%;font-size:var(--fs-nota)}
.sb-dispo th,.sb-dispo td{padding:4px 6px;text-align:center;border-bottom:1px solid var(--bordo)}
.sb-dispo th[scope=row]{text-align:left}
.sb-dispo thead th{font-size:var(--fs-nota);color:var(--testo-tenue)}
.sb-si{color:var(--marchio);font-size:var(--fs-testo)}.sb-no{color:var(--testo-tenue)}
.sb-recensione{margin:0 0 12px;padding:12px 16px;border-left:3px solid var(--marchio);background:var(--superficie);border-radius:0 var(--raggio-3) var(--raggio-3) 0;--campo-fondo:var(--fondo)}
.sb-recensione footer{font-size:var(--fs-nota);color:var(--testo-tenue)}
.sb-chiusura{padding:22px 26px;border-radius:var(--raggio-4);background:var(--tenue);--campo-fondo:var(--fondo)}
.sb-chiusura p{margin:0 0 12px}.sb-chiusura .btn{margin:0 8px 6px 0}
@media (max-width:760px){
  .sb-testa{grid-template-columns:1fr;justify-items:center;text-align:center;padding:22px}
  .sb-chi h1{padding-right:0}.sb-titolo{padding-right:0;justify-content:center}.sb-grado{position:static;order:-1}
  .sb-muro{columns:1}.sb-coppia{grid-template-columns:1fr}.sb-tempo li{grid-template-columns:1fr;gap:2px}
}
/* La scheda della badante sulla pagina del comune: foto a sinistra, livello in alto a destra, due pulsanti. */
.bd-card{position:relative}
.bd-grado{position:absolute;top:16px;right:16px}
.bd-chi{display:flex;align-items:center;gap:12px;margin:0 0 4px}
.bd-chi-testo{display:flex;flex-direction:column;gap:2px;min-width:0}
.bd-chi h3{padding-right:96px}
.bd-chi h3 a{color:inherit;text-decoration:none}.bd-chi h3 a:hover{text-decoration:underline}
.bd-foto{width:64px;height:64px;flex:0 0 64px;border-radius:var(--raggio-cerchio);object-fit:cover;border:1px solid var(--bd-bordo)}
.bd-foto-vuota{display:grid;place-items:center;background:var(--bd-fondo);color:var(--bd-rosa);--campo-fondo:var(--fondo)}
.bd-foto-vuota svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6}
.bd-azioni{margin-top:auto;display:flex;flex-wrap:nowrap;align-items:stretch;gap:8px}
.bd-azioni .bd-btn{margin:0}
.pg-badanti:has(#bd-elenco:checked) .bd-grado{position:static}
.pg-badanti:has(#bd-elenco:checked) .bd-chi h3{padding-right:0}
/* Dentro la scheda «Consulta la scheda» è il secondo pulsante: contorno, non pieno, così il primo resta il primo. */
.pg-badanti .bd-card .btn.btn-secondario{background:var(--bd-scheda);border:1px solid var(--bd-rosa);color:var(--bd-titolo);--campo-fondo:var(--fondo)}
.pg-badanti .bd-card .btn.btn-secondario:hover{background:var(--bd-rosa);border-color:var(--bd-rosa);color:var(--bd-su-rosa);--campo-fondo:var(--fondo)}
.bd-azioni .bd-btn{font-size:var(--fs-nota);padding:8px 13px}
.bd-azioni .bd-scheda{display:inline-flex;align-items:center;gap:5px;padding:8px 11px;white-space:nowrap}
.bd-azioni .bd-scheda svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.bd-azioni .bd-btn:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Riquadri che restano bianchi anche in tema scuro (il modulo della home, le schede finte della pagina agenzie):
   lì dentro i pulsanti tengono i colori del tema chiaro, altrimenti il pieno bianco sparisce sul bianco (24/09). */
.hc-fcard,.crm-mock,.crm-leadcard{--btn-fondo:var(--mg-700);--btn-testo:var(--ne-0);--btn-fondo-over:var(--mg-800);--btn-testo-over:var(--ne-0);
  --btn2-fondo:var(--ne-0);--btn2-bordo:var(--mg-700);--btn2-testo:var(--mg-700);--btn2-fondo-over:var(--mg-700);--btn2-testo-over:var(--ne-0)}
.bd-chi-testo .bd-grado{align-self:flex-start}
/* Nelle schede i due pulsanti prendono tutta la riga: «Contatta…» si allarga da sinistra, «Scheda» sta a destra.
   Nell'elenco restano stretti in basso a destra (lì il contenitore non si allarga). */
.bd-azioni .bd-btn:first-child{flex:1 1 auto;text-align:center}
.bd-azioni .bd-scheda{margin-left:auto}
.pg-badanti:has(#bd-elenco:checked) .bd-azioni .bd-btn:first-child{flex:0 1 auto}
/* La testata per chi è dentro: campanella e tendina col nome, al posto di «Area riservata» (24/09). */


/* La tendina dell'account come quella delle aree riservate: icone, riga «Account», un pannello suo con l'ombra. */

/* Il logo non tocca il bordo in alto della finestra: lo spazio sta sulla testata, non sul suo contenuto, così vale
   anche per le pagine che ridefiniscono il padding del contenuto (home, landing). */

.sb-lettera{display:flex;align-items:center;gap:8px;margin:0 0 12px!important;padding:10px 14px;border-radius:var(--raggio-3);background:var(--gr-verificata-fondo);color:var(--gr-verificata-testo);font-weight:600;--campo-fondo:var(--fondo)}
.sb-lettera svg{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
/* Il filtro delle badanti sulla pagina del comune (25/09): una riga di tendine sopra le schede. */
.bd-filtro{display:grid;gap:14px;margin:0 0 18px;padding:14px 18px;border:1px solid var(--bd-bordo);border-radius:var(--raggio-4);background:var(--bd-scheda);--campo-fondo:var(--fondo)}
.bd-filtro label{display:grid;gap:4px;font-size:var(--fs-nota);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bd-rosa)}
.bd-filtro select{font:inherit;font-size:var(--fs-nota);font-weight:400;letter-spacing:0;text-transform:none;padding:8px 10px;border:1px solid var(--bd-bordo);border-radius:var(--raggio-2);background:var(--bd-scheda);color:var(--bd-chiaro);min-width:150px}
.bd-filtro .bd-f-check{display:flex;align-items:center;gap:7px;padding-bottom:9px;text-transform:none;letter-spacing:0;font-size:var(--fs-nota);font-weight:600;color:var(--bd-chiaro)}
.bd-f-conta{margin:0 0 9px auto;font-weight:700;color:var(--bd-titolo)}
.bd-filtro .bd-f-reset{font-size:var(--fs-nota);padding:8px 12px;margin:0}
.bd-f-vuoto{margin:0 0 18px;padding:14px 18px;border-radius:var(--raggio-3);background:var(--bd-scheda);color:var(--bd-chiaro);--campo-fondo:var(--fondo)}
.bd-card[hidden]{display:none}
@media (max-width:600px){.bd-filtro select{min-width:0;width:100%}.bd-filtro label{flex:1 1 45%}}
.pg-badanti .bd-filtro .btn.btn-secondario{background:var(--bd-scheda);border:1px solid var(--bd-rosa);color:var(--bd-titolo);--campo-fondo:var(--fondo)}
.pg-badanti .bd-filtro .btn.btn-secondario:hover{background:var(--bd-rosa);border-color:var(--bd-rosa);color:var(--bd-su-rosa);--campo-fondo:var(--fondo)}
.bd-f-tendine{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px 14px}
.bd-filtro .bd-f-tendine select{width:100%;min-width:0}
.bd-f-fondo{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-top:12px;border-top:1px solid var(--bd-bordo)}
.bd-f-fondo .bd-f-check{padding-bottom:0}
.bd-f-fondo .bd-f-conta{margin:0 0 0 auto}
.sb-att{display:inline-block;margin-left:6px;padding:1px 9px;border-radius:var(--raggio-pillola);font-size:var(--fs-nota);font-weight:600;vertical-align:1px}
.sb-att-verificato{background:var(--gr-verificata-fondo);color:var(--gr-verificata-testo);--campo-fondo:var(--fondo)}
.sb-att-caricato{background:var(--avviso-fondo);color:var(--avviso);--campo-fondo:var(--fondo)}
.sb-att-no{background:var(--superficie);color:var(--testo-tenue);border:1px solid var(--bordo);--campo-fondo:var(--fondo)}
/* Lettera di referenze verificata: un anello dorato attorno alla foto, come le storie di Instagram, e niente di più
   (decisione del 25/09). Un filo del colore del fondo fa da stacco fra la foto e l'anello. */
.con-lettera .bd-foto{border:2px solid var(--bd-scheda);box-shadow:0 0 0 3px var(--kit-oro-46),0 0 0 4px var(--oro-2)}
.con-lettera .sb-foto img,.con-lettera .sb-vuota{border:4px solid var(--superficie);box-shadow:0 0 0 4px var(--kit-oro-46),0 0 0 6px var(--oro-2)}

/* La barra DEV si richiude di lato: resta la sola linguetta «DEV ‹». */
.backdoor .bd-voci{display:flex;align-items:center;gap:6px}
.backdoor.chiusa .bd-voci{display:none}

/* Barra DEV sul telefono (titolare, 29/09): era schiacciata, con le voci su tre righe. Occupa la larghezza dello
   schermo, le voci restano su una riga e scorrono di lato col dito. */
@media (max-width:760px){.backdoor{left:8px;right:8px;bottom:8px}.backdoor:not(.chiusa) .bd-voci{flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}.backdoor .bd-voci>*{flex:0 0 auto}.backdoor .bd-voci button{white-space:nowrap}.backdoor.chiusa{left:auto}}
.backdoor button.etichetta{background:transparent;border:0;color:var(--kit-arancio-68);font-weight:700;letter-spacing:.08em;padding:5px 6px}
.backdoor.chiusa button.etichetta span{display:inline-block;transform:rotate(180deg)}
/* «Tema scuro» nella barra DEV: la regola generale di .tema (scritta tenue, !important) la rendeva illeggibile. */
.backdoor .bd-tema{background:var(--kit-blu-20)!important;color:var(--ne-0)!important;border-color:var(--kit-blu-30)!important}
.backdoor .bd-tema:hover{background:var(--kit-blu-28)!important}
/* Mostra/nascondi la password (25/09): il pulsante dentro il campo, a destra. */
.pw-campo{position:relative;display:block}
.pw-campo input{width:100%;padding-right:96px!important;box-sizing:border-box}
.pw-campo .pw-mostra{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:var(--fs-nota);font-weight:600;padding:5px 10px;border-radius:var(--raggio-2);border:1px solid var(--btn2-bordo);background:var(--btn2-fondo);color:var(--btn2-testo);cursor:pointer}
.pw-campo .pw-mostra:hover{background:var(--btn2-fondo-over);color:var(--btn2-testo-over)}
.pw-dimenticata{margin:-4px 0 4px;text-align:right;font-size:var(--fs-nota)}
/* Una nota sotto un campo (la fascia di spesa) non deve allungare il campo accanto: ogni etichetta parte dall'alto. */
.rc-form label{align-self:start;align-content:start}
/* Piè di pagina (audit del 23/09): icone discrete accanto alle voci (43666563) e Facebook qui invece che accanto
   a «Chiedi una badante» (43666561). */
.pie .pie-ic{width:15px;height:15px;flex:0 0 15px;margin-right:8px;vertical-align:-2px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.pie li a{display:inline-flex;align-items:baseline}
.pie-social a{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.pie-social .pie-fb{width:20px;height:20px;flex:0 0 20px;fill:currentColor}
/* Home e modulo con gli stessi campi e lo stesso pulsante (audit, task 43666548). Il contorno è quello del modulo
   completo, che regge il 3:1 richiesto ai componenti; quello chiaro della home non ci arrivava. */
.hc-field input,.hc-field span.hc-inp{border-color:var(--kit-prugna-55)}
.hc-field input:focus,.hc-inp:focus-within{border-color:var(--mg-700);box-shadow:0 0 0 3px var(--mg-700-a16)}
.rc-sezione{margin:10px 0 -4px;padding:0 0 6px;font-size:var(--fs-testo);color:var(--rc-ink);border-bottom:1px solid var(--rc-linea)}
.rc-sezione:first-of-type{margin-top:0}
.rc-invio .btn{font-size:var(--fs-testo);padding:14px 28px}

/* Chiedi una consulenza (audit 43666545): fascia grigia a tutta larghezza con i due riquadri, il richiamo e la chat;
   sotto, staccate, le guide. Colori del tema, quindi giusti anche in scuro. */
.cs-testa .wrap{display:block}
.cs-occhiello{display:block;font-family:"Source Sans 3",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:var(--fs-nota);font-weight:700;color:var(--accent-ink);margin:0 0 6px}
.cs-testa .pg-lede{max-width:none}
.cs-testa .pg-lede a{color:var(--accent-ink)}
.cs-cantiere{display:flex;gap:10px;align-items:flex-start;margin:20px 0;padding:12px 14px;border-radius:var(--raggio-3);background:var(--avviso-fondo);color:var(--ink);font-size:var(--fs-testo);line-height:1.45;--campo-fondo:var(--fondo)}
.cs-cantiere .ic{width:18px;height:18px;flex:0 0 18px;margin-top:2px;fill:none;stroke:var(--avviso);stroke-width:2}
.cs-due{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cs-scheda{background:var(--bg);border:1px solid var(--line);border-radius:var(--raggio-4);padding:22px 22px 24px;display:grid;gap:12px;align-content:start;margin:0;--campo-fondo:var(--campo-su-bianco)}
.cs-scheda fieldset{border:0;margin:0;padding:0;display:grid;gap:12px;min-width:0}
.cs-scheda h2,.cs-guide h2{font-family:var(--disp);font-size:var(--fs-titolo-3);color:var(--ink);margin:0;padding:0;border:0}
.cs-nota{margin:0;font-size:var(--fs-nota);line-height:1.45;color:var(--ink2)}
.cs-scheda label{display:grid;gap:5px;font-size:var(--fs-nota);font-weight:600;color:var(--ink)}
.cs-scheda input,.cs-scheda select{font:inherit;font-size:var(--fs-testo);font-weight:400;padding:11px 12px;border:1.5px solid var(--line);border-radius:var(--raggio-2);background:var(--bg2);color:var(--ink);width:100%}
.cs-scheda fieldset[disabled] input,.cs-scheda fieldset[disabled] select{cursor:not-allowed}
.cs-scheda .btn[disabled],.cs-scheda fieldset[disabled] .btn{opacity:.55;cursor:not-allowed}
.cs-guide{margin:40px 0 0}
.cs-cards{margin:14px 0 0}
.cs-tutte{margin:16px 0 0;font-size:var(--fs-testo);color:var(--ink2)}
@media (max-width:760px){.cs-due,.hc-cards.cs-cards{grid-template-columns:1fr}}

/* Home, «Consulenza»: il pulsante verso tutte le guide, al posto dei tag (28/09). */
.hc-guide-tutte{text-align:center;margin:22px 0 0}
.hc-piu-lette{display:flex;align-items:center;gap:8px;margin:22px 0 0;font-weight:700;font-size:var(--fs-testo);color:var(--ink)}
.hc-piu-lette .hc-ic{width:18px;height:18px;color:var(--accent-ink)}
.hc-piu-lette+.hc-cards-guide{margin-top:12px}
/* Tutte le guide (/guide/): schede quadrate, immagine sopra e titolo sotto, sul fondo della pagina nei due temi. */
.gd-griglia{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.gd-scheda{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:var(--raggio-4);overflow:hidden;transition:transform .15s,box-shadow .15s;--campo-fondo:var(--campo-su-bianco)}
.gd-scheda:hover,.gd-scheda:focus-visible{transform:translateY(-3px);box-shadow:var(--ombra-vetrina);border-color:var(--accent)}
.gd-scheda img,.gd-senza{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;margin:0;background:var(--bg2);--campo-fondo:var(--fondo)}
.gd-titolo{display:block;padding:14px 16px 16px;font-weight:600;font-size:var(--fs-testo);line-height:1.3}
@media (prefers-reduced-motion:reduce){.gd-scheda{transition:none}.gd-scheda:hover{transform:none}}
@media (max-width:900px){.gd-griglia{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.gd-griglia{grid-template-columns:1fr 1fr;gap:12px}}
@media (max-width:420px){.gd-griglia{grid-template-columns:1fr}}

/* Comune con i suggerimenti (28/09). I due moduli che lo usano (home e «Chiedi una badante») sono schede bianche in
   tutti e due i temi, quindi anche l'elenco ha colori fissi. */
.cm-ancora{position:relative}
.cm-lista{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);margin:0;padding:4px;list-style:none;background:var(--ne-0);border:1px solid var(--kit-prugna-55);border-radius:var(--raggio-3);box-shadow:var(--ombra-vetrina);max-height:300px;overflow:auto;text-align:left;--campo-fondo:var(--campo-rosa)}
.cm-lista li{padding:9px 12px;border-radius:var(--raggio-2);cursor:pointer;color:var(--kit-prugna-10);font-size:var(--fs-testo);font-weight:400}
.cm-lista li[role=option][aria-selected="true"],.cm-lista li[role=option]:hover{background:var(--mg-100)}
.cm-lista li.cm-titolo{cursor:default;padding:6px 12px 2px;font-size:var(--fs-nota);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--kit-prugna-31)}
.cm-lista li span.cm-sigla{display:inline;margin:0 0 0 8px;font-size:var(--fs-nota);font-weight:600;color:var(--kit-prugna-31)}   /* nel modulo della home `.hc-field span` la manderebbe a capo */
.cm-intendevi{margin:6px 0 0;font-size:var(--fs-nota);line-height:1.5;color:var(--kit-prugna-33);font-weight:400}
.cm-proposta{font:inherit;font-weight:700;color:var(--mg-700);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}

/* Messaggi dell'invio dentro il modulo di richiesta, che è bianco nei due temi: colori fissi. */
/* i messaggi delle pagine del sito, come nell'area (Mattia, 26/10: senza stile sembravano testo sciolto) */
main>.flashes{margin:18px 0 0}
.flash{padding:12px 16px;border-left:4px solid var(--ok);border-radius:var(--raggio-2);background:var(--ok-soft);margin-bottom:8px;font-size:var(--fs-testo);color:var(--testo);--campo-fondo:var(--fondo)}
.flash-error{border-color:var(--bad);background:var(--bad-soft)}.flash-warn{border-color:var(--warn);background:var(--warn-soft)}
.flash{transition:opacity .4s,transform .4s}.flash.via{opacity:0;transform:translateY(-6px)}
.flashes .flash{display:flex;align-items:center;justify-content:space-between;gap:12px}
.flash-chiudi{flex:none;min-width:32px;min-height:32px;padding:0 6px;border:0;border-radius:var(--raggio-2);background:transparent;color:var(--testo);font-size:var(--fs-titolo-3);line-height:1;cursor:pointer}
.flash-chiudi:hover,.flash-chiudi:focus-visible{background:var(--superficie);--campo-fondo:var(--fondo)}
.rc .flashes{margin:0 0 16px}
.rc .flash{padding:10px 14px;border-left:4px solid var(--kit-verde-26);border-radius:var(--raggio-2);background:var(--kit-verde-90);color:var(--kit-prugna-10);margin:0 0 8px;font-size:var(--fs-nota);line-height:1.45}
.rc .flash-error{border-color:var(--kit-rosso-44);background:var(--kit-rosso-92)}
.rc .flashes .flash{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.rc .flash-chiudi{color:var(--kit-prugna-10)}

/* Modulo di richiesta più corto (28/09): dettagli facoltativi chiusi,
   email «consigliata». Colori fissi della scheda bianca. */
.rc-dettagli{border:1px solid var(--rc-linea);border-radius:var(--raggio-3);padding:0}
.rc-dettagli>summary{list-style:none;cursor:pointer;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--fs-nota);color:var(--rc-ink)}
.rc-dettagli>summary::-webkit-details-marker{display:none}
.rc-dettagli>summary{font-weight:600;justify-content:flex-start}
.rc-dettagli>summary::before{content:"+";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--raggio-cerchio);border:1.5px solid var(--bd-magenta);color:var(--bd-magenta);font-weight:700;line-height:1}
.rc-dettagli[open]>summary::before{content:"−"}
.rc-dettagli-campi{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;padding:4px 16px 16px}
.rc-consigliata{margin-left:6px;padding:1px 8px;border-radius:var(--raggio-pillola);background:var(--mg-100);color:var(--bd-magenta);font-size:var(--fs-nota);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
@media (max-width:600px){.rc-dettagli-campi{grid-template-columns:1fr}}

/* «L'assistenza» su due righe al 50 e 50 (28/09): comune e tipo, poi autonomia e quando. */
.rc-assistenza{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.rc-dettagli-campi .rc-piena{grid-column:1/-1}
@media (max-width:600px){.rc-assistenza{grid-template-columns:1fr}}

/* «Ricerca badante» (28/09): la pagina è una guida migrata, ma si impagina come quella del comune, a tutta larghezza. */
.kind-guida main.wrap:has(.pg-ricerca){max-width:none;padding:0}

/* «Ricerca badante» (28/09): legenda dei badge a destra nell'apertura; l'elenco senza la fascia rosa. */
.ric-testa{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px;align-items:start}
.ric-legenda.pg-badanti{margin:6px 0 0;padding:16px 18px;border:1px solid var(--line);border-radius:var(--raggio-4);background:var(--bg);--campo-fondo:var(--campo-su-bianco)}
.ric-legenda h2{font-size:var(--fs-testo);margin:0 0 10px;padding:0;border:0;color:var(--ink)}
.ric-legenda dl{margin:0;display:grid;gap:9px}
.ric-legenda dl>div{display:grid;grid-template-columns:128px 1fr;gap:10px;align-items:center}
.ric-legenda dt{margin:0}.ric-legenda dd{margin:0;font-size:var(--fs-nota);line-height:1.4;color:var(--ink2)}
.ric-anello{display:inline-block;width:30px;height:30px;border-radius:var(--raggio-cerchio);background:var(--fi-fondo);border:2px solid var(--bg);box-shadow:0 0 0 3px var(--kit-oro-46),0 0 0 4px var(--oro-2);margin-left:4px;--campo-fondo:var(--fondo)}
.ric-elenco.pg-badanti{background:none;margin:0;padding:22px 0 52px}
.ric-elenco.pg-badanti{border-top:0}
.pg-badanti .bd-card{background:var(--fi-fondo);border-color:var(--fi-bordo);--campo-fondo:var(--fondo)}   /* schede rosa: staccano dal grigio della fascia e dal bianco */
.pg-badanti .bd-card[data-sesso="uomo"]{background:var(--fi-uomo-fondo);border-color:var(--fi-uomo-bordo)}   /* il badante uomo: celeste (titolare, 2/10) */
.pg-badanti .rc{border:1px solid var(--line);box-shadow:var(--ombra-vetrina)}   /* il modulo bianco sulla pagina bianca */
@media (max-width:900px){.ric-testa{grid-template-columns:1fr;gap:18px}}
/* Nella scheda: città (provincia) e regione in chiaro, il resto sotto, più piccolo (28/09). */
.bd-luogo{margin:2px 0 0;font-size:var(--fs-testo);font-weight:700;line-height:1.35;color:var(--bd-chiaro)}
.bd-regione{font-weight:400}
.bd-luogo+.bd-dove{margin-top:2px;font-size:var(--fs-nota)}
/* Filtri più compatti (28/09): più tendine per riga, campi più bassi. */
.bd-filtro{gap:10px;padding:12px 14px}
.bd-f-tendine{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px 12px}
.bd-filtro label{font-size:var(--fs-nota)}
.bd-filtro select{font-size:var(--fs-nota);padding:6px 8px}
.bd-f-fondo{padding-top:8px}
.bd-filtro .bd-f-reset{padding:6px 12px}
.pg-badanti .bd-vista{margin:4px auto 16px}
.ric-legenda .bd-grado{position:static;inset:auto;margin:0}   /* nelle schede sta nell'angolo; nella legenda al suo posto */

.ric-badante{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:22px 0 0}
.ric-badante h2{font-size:var(--fs-grande);margin:0;padding:0;border:0;color:var(--ink)}

/* Barra sopra le schede (28/09): «Filtri», «Ordina per», «Schede / Elenco». Il pannello dei filtri è bordeaux scuro in
   tutti e due i temi, a contrasto col bianco della pagina e delle schede: tendine bianche, etichette rosa. */
.bd-barra{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 14px}
.bd-barra .bd-vista{margin:0 0 0 auto}
.bd-f-apri{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:0;border-radius:var(--raggio-pillola);background:var(--mp-attiva);color:var(--ne-0);font:inherit;font-size:var(--fs-nota);font-weight:700;cursor:pointer}
.bd-f-apri:hover,.bd-f-apri[aria-expanded="true"]{background:var(--kit-prugna-10b)}
.bd-f-apri:focus-visible{outline:2px solid var(--kit-oro-46);outline-offset:2px}
.bd-f-apri .bd-ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.bd-f-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--raggio-pillola);background:var(--mg-200);color:var(--kit-prugna-10b);font-size:var(--fs-nota)}
.bd-ordina{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-nota);font-weight:600;color:var(--bd-titolo)}
.bd-ordina select{font:inherit;font-size:var(--fs-nota);font-weight:400;padding:7px 10px;border:1px solid var(--bd-bordo);border-radius:var(--raggio-2);background:var(--bd-scheda);color:var(--bd-chiaro)}
.pg-badanti .bd-filtro{background:var(--mg-900);border-color:var(--mg-900)}
.pg-badanti .bd-filtro label{color:var(--mg-200)}
.pg-badanti .bd-filtro select{background:var(--ne-0);color:var(--kit-prugna-10);border-color:var(--ne-0)}
.pg-badanti .bd-filtro .bd-f-check,.pg-badanti .bd-f-conta{color:var(--ne-0)}
.pg-badanti .bd-f-fondo{border-top-color:var(--bianco-a25)}
.pg-badanti .bd-filtro .btn.btn-secondario{background:transparent;border:1px solid var(--mg-200);color:var(--ne-0)}
.pg-badanti .bd-filtro .btn.btn-secondario:hover{background:var(--mg-200);color:var(--kit-prugna-10b)}
@media (max-width:600px){.bd-barra .bd-ordina{flex:1 1 auto}.bd-barra .bd-ordina select{flex:1}}
/* In tema scuro il bordeaux sparisce sul fondo: pulsante rosa chiaro, pannello col bordo. */
:root[data-theme="dark"] .bd-f-apri{background:var(--mg-200);color:var(--kit-prugna-10b)}
:root[data-theme="dark"] .bd-f-apri .bd-f-n{background:var(--kit-prugna-10b);color:var(--mg-200)}
:root[data-theme="dark"] .pg-badanti .bd-filtro{border-color:var(--kit-prugna-51)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bd-f-apri{background:var(--mg-200);color:var(--kit-prugna-10b)}
  :root:not([data-theme="light"]) .bd-f-apri .bd-f-n{background:var(--kit-prugna-10b);color:var(--mg-200)}
  :root:not([data-theme="light"]) .pg-badanti .bd-filtro{border-color:var(--kit-prugna-51)}}
/* «Schede / Elenco» su una tinta rosa col suo bordo (28/09): bianco spariva sulla pagina bianca di «Ricerca badante»,
   grigio sulla fascia grigia del comune; il rosa stacca da tutte e due. */
.pg-badanti .bd-vista{border:1.5px solid var(--mg-400)}
:root[data-theme="dark"] .pg-badanti .bd-vista{border-color:var(--mg-300)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pg-badanti .bd-vista{border-color:var(--mg-300)}}

/* Ricerca del comune (28/09): fascia grigia sua sotto la mappa, etichetta e campo in riga, carattere del testo. */
.rg-cerca{background:var(--fi-fondo);border-top:1px solid var(--fi-bordo);border-bottom:1px solid var(--fi-bordo);padding:18px 0;--campo-fondo:var(--fondo)}   /* rosa (28/09) */
.rg-cerca .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.rg-cerca label{font-weight:700;margin:0;color:var(--ink)}
.rg-cerca .rg-cerca-esito{margin:0;flex:0 0 auto;color:var(--ink2)}
.rg-cerca .rg-cerca-esito:empty{display:none}

/* Home: il tag della regione acceso quando si passa sulla sua forma nella mappa (e il contrario, 28/09). */
.hc-colonna-regioni .hc-guide a.accesa,.hc-colonna-regioni .hc-guide a:hover,.hc-colonna-regioni .hc-guide a:focus-visible{background:var(--btn-fondo);border-color:var(--btn-fondo);color:var(--btn-testo)!important}   /* pieno, come la regione accesa sulla mappa; !important batte il colore dei link del tema scuro */
/* Pulsanti delle schede più marcati (28/09): in tema scuro, magenta sottile su bianco si leggeva poco. */
.bd-azioni .bd-btn{font-weight:700;letter-spacing:.05em}

/* «Lavora come badante» nel menu (28/09): un pulsante come «Chiedi una badante», ma nel viola del logo (var(--li-2)),
   appena scurito a var(--lg-600) perché la scritta bianca arrivi a 4,9:1 (col colore esatto del logo si ferma a 4,49,
   sotto la soglia AA). Uguale nei due temi; col mouse sopra, lo stesso viola un passo più scuro (ruoli --btn3-* in tema.css). */

/* Fra 761 e 900 px i due pulsanti del menu stanno sulla riga delle voci solo se più compatti (28/09). */

/* Il grazie dopo la richiesta (/richiesta-inviata/, 28/09): apertura grigia, poi i tre passi come «Come funziona». */
.kind-grazie main.wrap{max-width:none;padding:0 0 56px}
.gz-account{margin:14px 0 0;color:var(--ink2)}
.gz-scelta{margin:18px 0 0;padding:16px 18px;border:1px solid var(--bordo);border-radius:var(--raggio-3);background:var(--superficie);--campo-fondo:var(--fondo)}
.gz-scelta p{margin:0 0 12px}
.gz-scelta-azioni{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.gz-passi{margin:40px 0 0}
.gz-passi h2{font-size:var(--fs-titolo-3);margin:0 0 16px}
.gz-passi ol.hc-steps{list-style:none;margin:0;padding:0}
.gz-passi ol.hc-steps{background:var(--fi-fondo);border-color:var(--fi-bordo);--campo-fondo:var(--fondo)}   /* rosa: bianco su bianco non si vedevano (28/09) */
.gz-passi .hc-step{border-color:var(--fi-bordo)}

/* Pagina del comune: agenzia e consulenza affiancate, a metà larghezza, sotto il pulsante principale (28/09). */
.pg-azioni-due{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pg-azioni-due .btn{margin:0;text-align:center;padding:11px 12px;font-size:var(--fs-nota)}

/* Collaudo del 28/09 (task 43666566). */
/* ISSUE 1: sotto i 16 px l'iPhone ingrandisce la pagina a ogni tocco su un campo. Sul telefono tutti i campi a 16 px;
   !important perché le regole dei singoli moduli (14 e 14,5 px) sono più specifiche di questa. */
@media (max-width:760px){input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:var(--fs-testo)!important}}
/* ISSUE 3: un <button> non eredita il carattere da solo: «Invia la richiesta» usciva in Arial. */
button,input,select,textarea{font-family:inherit}
/* ISSUE 4: `.hc-field span.hc-inp` (bordo grigio-rosa) è più specifica di `.hc-inp:focus-within` e vinceva anche col
   campo attivo. Stessa specificità più lo stato: ora il riquadro della home si accende come gli altri moduli. */
.hc-field span.hc-inp:focus-within{border-color:var(--mg-700);box-shadow:0 0 0 3px var(--mg-700-a16)}
.hc-field span.hc-inp:has(:focus-visible){outline:2px solid var(--mg-700);outline-offset:2px}

/* Pagina tipo dei comuni (28/09): costi, tipi di assistenza, passi, dintorni, domande frequenti, guide. */
.ct .sezione{margin:0 0 34px}
.ct .ct-tabella caption{text-align:left;font-weight:600;color:var(--ink2);padding:0 0 6px}
.ct .ct-tabella th[scope=row]{white-space:nowrap}
.ct .ct-tabella td:nth-child(3),.ct .ct-tabella td:nth-child(4){white-space:nowrap}
.ct .ct-nota{font-size:var(--fs-testo);color:var(--ink2);border-left:3px solid var(--line);padding:4px 0 4px 12px}
.ct h3{margin:18px 0 6px}
.ct ol.ct-passi{list-style:none;padding:0;margin:14px 0 0}
.ct .ct-vicini{list-style:none;padding:0;margin:12px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px 18px}
.ct .ct-km{color:var(--ink2);font-size:var(--fs-nota)}
.ct .ct-faq{border:1px solid var(--line);border-radius:var(--raggio-3);padding:10px 14px;margin:0 0 10px;background:var(--bg);--campo-fondo:var(--campo-su-bianco)}
.ct .ct-faq summary{cursor:pointer;font-weight:600;color:var(--ink)}
.ct .ct-faq p{margin:8px 0 2px}
.ct .ct-guide{columns:2;column-gap:28px}
@media (max-width:760px){.ct .ct-guide{columns:1}}
@media (max-width:760px){.ct .ct-tabella{font-size:var(--fs-nota)}.ct .ct-tabella th,.ct .ct-tabella td{padding:6px 6px}.ct .ct-tabella td:nth-child(3),.ct .ct-tabella td:nth-child(4){white-space:normal}}
/* «Non accetto altri lavori» (titolare, 28/09): la scritta al posto di «Contatta». */
.bd-occupata,.sb-occupata{margin:6px 0 0;display:inline-block;padding:3px 10px;border-radius:var(--raggio-pillola);background:var(--superficie);border:1px solid var(--bordo);color:var(--testo);font-size:var(--fs-nota);font-weight:700;--campo-fondo:var(--fondo)}
.sb-occupata{font-size:var(--fs-testo);margin:12px 0 0}

/* «Oppure cerca il tuo comune» sotto la cartina, e il campo comune di «Ricerca badante» (titolare, 29/09): lo stesso
   riquadro del modulo in alto, su una riga sola; sul telefono il pulsante va sotto, a tutta larghezza. */
.hc-cerca{max-width:620px;margin:28px auto 0;padding:20px 22px}
.hc-cerca h3{margin:0 0 10px;font-size:var(--fs-grande)}
.hc-cerca-riga{display:flex;gap:10px;align-items:stretch}
.hc-cerca-riga .hc-field{flex:1;margin:0}
.hc-cerca-riga .hc-inp{height:100%;min-height:48px}
.hc-cerca .hc-btn-pri{width:auto;margin:0;padding:12px 22px;font-size:var(--fs-testo)}
@media (max-width:600px){.hc-cerca-riga{flex-direction:column}.hc-cerca .hc-btn-pri{width:100%}}
.ric-esito{margin:0 0 18px;font-size:var(--fs-testo)}
/* Il comune in cima al pannello dei filtri di «Ricerca badante» (titolare, 29/09): campo e «Cerca» su una riga. */
.bd-f-comune{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid var(--bianco-a15)}
.bd-f-comune label{flex:0 1 50%}
@media (max-width:600px){.bd-f-comune label{flex:1 1 0}}
.bd-f-comune input{width:100%;box-sizing:border-box;font:inherit;font-size:var(--fs-nota);font-weight:400;letter-spacing:0;text-transform:none;padding:8px 10px;border:1px solid var(--bd-bordo);border-radius:var(--raggio-2);background:var(--bd-scheda);color:var(--bd-chiaro)}
.bd-f-comune .bd-f-vai{padding:9px 20px;margin:0}
.bd-f-comune .cm-intendevi{flex-basis:100%}
.ric-elenco{padding-top:32px}
/* «Lavora nel tuo comune?» sulla scheda pubblica (29/09) */
.sb-zona-riga{display:grid;grid-template-columns:1fr 1fr;gap:6px 28px;align-items:start}
.sb-zona-riga>p{margin:0}
.sb-z-altri{padding-top:9px}   /* a metà altezza del campo accanto */
.sb-z-domanda{font-weight:600}
.sb-zona-cerca{margin:0}
.sb-zona-cerca input{width:100%;box-sizing:border-box}
@media (max-width:760px){.sb-zona-riga{grid-template-columns:1fr}.sb-z-altri{order:1;padding-top:0}.sb-z-domanda{order:2;margin-top:10px}.sb-zona-cerca{order:3}}
.sb-zona-cerca input{font:inherit;font-weight:400;padding:9px 12px;border:1px solid var(--line);border-radius:var(--raggio-2);background:var(--bg);color:var(--ink)}
.sb-zona-esito{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.sb-zona-esito li{font-size:var(--fs-testo)}
.sb-zona-esito a{font-weight:600}
.sb-zona-no{color:var(--ink3)}
/* L'iscrizione della famiglia (30/09): la scheda della richiesta, più l'uscita per badanti e organizzazioni. */
.rc-altri{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--rc-linea);font-size:var(--fs-nota);color:var(--rc-ink2)}
.rc-altri a,.rc-privacy a{color:var(--bd-magenta)}
.rc .social-login{margin:16px 0 0}
.rc h2.rc-sezione{font-family:inherit;font-size:var(--fs-testo);margin:10px 0 -4px}
/* Moduli di iscrizione (titolare, 30/09): su computer ogni campo a sinistra e la sua spiegazione accanto, a destra,
   alla stessa altezza; sul telefono di nuovo uno sotto l'altro, campo e poi spiegazione. */

/* Il cuore delle badanti preferite (1/10): contorno, pieno quando è salvata. */
.cuore-form{display:inline-block;margin:0}
.cuore{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--raggio-pillola);border:1.5px solid var(--btn2-bordo);background:var(--btn2-fondo);color:var(--btn2-testo);font:inherit;font-weight:700;cursor:pointer}
.cuore svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.cuore.salvata svg{fill:currentColor}
.cuore:hover,.cuore:focus-visible{background:var(--btn2-fondo-over);color:var(--btn2-testo-over)}
/* Negli elenchi il cuore è solo l'icona: la riga dei pulsanti sta su una riga (la scritta resta per chi legge con la voce). */
.bd-azioni .cuore-form{flex:none;display:flex}
.bd-azioni .cuore{padding:8px 10px}
.bd-azioni .cuore span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bd-azioni{flex-wrap:wrap}
/* La riga delle azioni della scheda (titolare, 1/10): «Contatta» e due icone della stessa misura, scheda e cuore,
   distanziate e sempre sulla stessa riga, nella vista a schede e in quella a elenco. */
.bd-azioni{flex-wrap:nowrap;align-items:center;gap:10px}
.bd-azioni .bd-btn:first-child{flex:1 1 auto;text-align:center}
.bd-azioni .bd-scheda,.bd-azioni .cuore{flex:none;width:44px;height:44px;padding:0;display:inline-grid;place-items:center;border-radius:var(--raggio-3);margin:0}
.bd-azioni .bd-scheda svg,.bd-azioni .cuore svg{width:20px;height:20px}
.bd-azioni .bd-scheda{margin-left:0}
/* Il cuore nelle schede ha lo stesso aspetto dell'icona della scheda accanto, nei due temi (1/10: in tema scuro aveva
   il fondo grigio dei pulsanti fuori dalla fascia, e il contorno non si vedeva). */
.pg-badanti .bd-card .cuore{background:var(--bd-scheda);border:1px solid var(--bd-rosa);color:var(--bd-titolo)}
.pg-badanti .bd-card .cuore:hover,.pg-badanti .bd-card .cuore:focus-visible{background:var(--bd-rosa);border-color:var(--bd-rosa);color:var(--bd-su-rosa);--campo-fondo:var(--fondo)}
/* Le due icone accanto a «Contatta» si devono vedere a colpo d'occhio (titolare, 1/10): contorno di 2 px, un fondo
   appena più chiaro della scheda, icona più grande; uguali per scheda e cuore, nei due temi. */
.pg-badanti .bd-card .bd-azioni .bd-scheda,.pg-badanti .bd-card .bd-azioni .cuore{border-width:2px;border-style:solid;border-color:var(--bd-rosa);
  background:color-mix(in srgb,var(--bd-rosa) 22%,var(--bd-scheda));color:var(--bd-titolo)}
.pg-badanti .bd-card .bd-azioni .bd-scheda svg,.pg-badanti .bd-card .bd-azioni .cuore svg{width:22px;height:22px;stroke-width:2.2}
.pg-badanti .bd-card .bd-azioni .bd-scheda:hover,.pg-badanti .bd-card .bd-azioni .cuore:hover{background:var(--bd-rosa);color:var(--bd-su-rosa);--campo-fondo:var(--fondo)}
/* «Chiedi una badante» in fondo alle pagine (1/10): fascia grigia da bordo a bordo anche quando la pagina è stretta
   (l'ombra allarga il fondo senza allargare la pagina), contenuto centrato e nella misura del testo. */
.cta-fascia{box-shadow:0 0 0 100vmax var(--bg2);clip-path:inset(0 -100vmax)}
.cta-fascia .cta,.rg-cta .cta{margin-inline:auto;text-align:center}
.cta-fascia .cta-azioni,.rg-cta .cta-azioni{justify-content:center}
.cta-fascia .cta-titolo,.rg-cta .cta-titolo{font-size:var(--fs-titolo-3)}
main.wrap:has(> .cta-fascia:last-child){padding-bottom:0}
.cta-fascia{margin-bottom:0}
/* Centrati solo il titolo e i pulsanti; le frasi restano allineate a sinistra (titolare, 1/10). */
.cta-fascia .cta,.rg-cta .cta{text-align:left}
.cta-fascia .cta-titolo,.rg-cta .cta-titolo{text-align:center}
/* I due pulsanti finali delle pagine dei comuni, in fondo alla pagina dopo una linea (titolare, 2/10). */
.pg-fondo{padding-block:8px 48px}
.pg-fondo hr{border:0;border-top:1px solid var(--line);margin:32px 0 0}
.pg-fondo .bd-chiusura{border-top:0;margin:28px 0 0;padding:0}
/* Le tre icone delle pagine dei comuni più piccole (titolare, 2/10). */
.pg-icone{--icona:140px;max-width:720px;margin-inline:auto}
.contenuto .pg-icone,.pagina .pg-icone{margin:24px auto;max-width:720px;padding:0}
/* Le tre icone distribuite su tutta la larghezza: stesso spazio ai lati e fra l'una e l'altra (titolare, 2/10). */
.contenuto .pg-icone,.pagina .pg-icone{max-width:none;margin:28px 0;display:flex;justify-content:space-evenly;gap:16px}
.pg-icone li{flex:0 1 220px}
.pg-icone li{flex:0 0 var(--icona);text-align:center}
.pg-icone span{white-space:normal}
.contenuto .pg-icone,.pagina .pg-icone{gap:0}
@media (max-width:600px){.pg-icone{--icona:92px}.pg-icone span{font-size:var(--fs-nota);line-height:1.25}}
.pg-icone li{min-width:0}
.pg-icone span{overflow-wrap:anywhere;hyphens:auto}
@media (max-width:600px){.pg-icone{--icona:80px}}
.pg-icone span{overflow-wrap:normal;hyphens:auto;-webkit-hyphens:auto}
/* In fondo alle pagine dei comuni due pulsanti pieni (titolare, 2/10): il principale magenta e «Badanti in…» col viola
   del logo, lo stesso di «Lavora come badante» (bianco sopra 4,9:1, uguale nei due temi). */
.pg-fondo .btn-terzo{background:var(--btn3-fondo);border-color:var(--btn3-fondo);color:var(--btn3-testo)}
.pg-fondo .btn-terzo:hover,.pg-fondo .btn-terzo:focus-visible{background:var(--btn3-fondo-over);border-color:var(--btn3-fondo-over);color:var(--btn3-testo)}
/* Recapiti: nome e telefono affiancati, email sotto a tutta riga (in /preventivo-assistito). */
.rc-recapiti{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
@media (max-width:600px){.rc-recapiti{grid-template-columns:1fr}}
/* Pagine dei comuni: tipo, autonomia e quando su una riga, e così i tre recapiti; impilati sul telefono (titolare,
   2/10). Ogni etichetta usa le righe della griglia madre (subgrid): se una va a capo, le altre scendono con lei e i
   campi restano allineati; la nota dell'email sta nella terza riga, sotto il suo campo. */
@media (min-width:761px){
  .rc-tre{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rc-tre>label{grid-row:span 2;grid-template-rows:subgrid;row-gap:5px}
  .rc-recapiti.rc-tre>label{grid-row:span 3}
  .rc-tre>label>.et{align-self:end}
}
.rc-tre select,.rc-tre input{width:100%;min-width:0;text-overflow:ellipsis}
/* Filtri: etichetta e tendina in fondo alla cella, così le tendine di una riga hanno la stessa altezza e lo stesso
   allineamento anche se un'etichetta va a capo (2/10). */
.bd-f-tendine>label{align-content:end}
/* Legenda dei badge (2/10): il badge resta su una riga e la colonna è larga quanto il più lungo; prima, a 128 px,
   «profilo verificato» andava a capo e l'interlinea della pastiglia lo rendeva alto il doppio. */
.ric-legenda dl{grid-template-columns:max-content minmax(0,1fr);column-gap:12px}
.ric-legenda dl>div{display:contents}
.ric-legenda dt{align-self:center}
.ric-legenda .bd-pill{white-space:nowrap}
@media (max-width:480px){.ric-legenda dl{grid-template-columns:minmax(0,1fr);row-gap:4px}.ric-legenda dt{justify-self:start}.ric-legenda dd{margin-bottom:8px}}
/* Home, «Assistenza domiciliare in tutta Italia» (titolare, 2/10): a metà, cartina a sinistra e a destra le regioni tre
   per riga con sotto la ricerca del comune, centrate in verticale sulla cartina. Sul telefono una sotto l'altra. */
.hc-due.con-mappa.hc-affiancata{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:center;margin-top:48px}   /* più aria sotto il titolo e più spazio alla cartina (2/10) */
.hc-affiancata .hc-italia .rg-svg{width:100%;height:auto;max-height:none}
.hc-guide.hc-guide-tre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:10px;margin:0}
.hc-guide-tre a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;line-height:1.25}
.hc-destra .hc-cerca{max-width:none;margin:24px 0 0}
@media (max-width:900px){.hc-due.con-mappa.hc-affiancata{grid-template-columns:minmax(0,1fr);gap:26px;margin-top:28px}.hc-affiancata .hc-italia .rg-svg{max-height:420px;width:auto;max-width:100%}}
@media (max-width:480px){.hc-guide.hc-guide-tre{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Le due strade della famiglia che ha scelto una badante (decisione 46, 8/10): due righe a tutta larghezza, prima il Pro
   con la scheda della badante, poi «Passa subito». Sul telefono la scheda va sopra il testo. */
.sc-riga{display:grid;gap:18px 28px;margin:24px 0 0;padding:22px 24px;border:1px solid var(--bordo);border-radius:var(--raggio-4);background:var(--superficie);--campo-fondo:var(--fondo)}
.sc-pro{grid-template-columns:minmax(0,2fr) minmax(0,3fr);border-color:var(--titolo);border-width:2px}
.sc-riga h2{margin:0 0 10px;font-size:var(--fs-titolo-3)}
.sc-riga p{margin:0 0 12px}
.sc-badante{display:flex;gap:18px;align-items:flex-start}
.sc-foto{width:120px;height:120px;flex:0 0 120px;border-radius:var(--raggio-cerchio);object-fit:cover;border:2px solid var(--bordo)}
.sc-foto-vuota{display:flex;align-items:center;justify-content:center;background:var(--fondo);--campo-fondo:var(--campo-su-bianco)}
.sc-foto-vuota svg{width:56px;height:56px;fill:none;stroke:var(--testo-tenue);stroke-width:1.5}
.sc-nome{font-size:var(--fs-titolo-3);font-weight:700;color:var(--titolo);margin:0 0 6px}
.sc-dati{color:var(--testo-tenue);font-size:var(--fs-nota);margin:0 0 4px}
.sc-vantaggi{margin:0 0 16px;padding-left:22px}
.sc-vantaggi li{margin:0 0 6px}
.sc-subito form{margin:4px 0 0}
@media (max-width:760px){.sc-pro{grid-template-columns:minmax(0,1fr)}.sc-foto{width:88px;height:88px;flex-basis:88px}}
/* La scheda sbloccata per la famiglia Pro (decisione 49, 8/10) */
.sb-pro{margin:12px 0 0;padding:14px 16px;border:2px solid var(--titolo);border-radius:var(--raggio-3);background:var(--superficie);--campo-fondo:var(--fondo)}
.sb-pro p{margin:0 0 8px}
.sb-colloquio{margin:8px 0 0}
.sb-colloquio summary{cursor:pointer;font-weight:700;color:var(--titolo)}
.sb-colloquio-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr);gap:10px 14px;margin:10px 0 0;align-items:end}
.sb-colloquio-form .sb-manda{grid-column:1/-1;width:100%}
@media (max-width:760px){.sb-colloquio-form{grid-template-columns:minmax(0,1fr)}}
.sb-colloquio-form label{display:grid;gap:4px;font-size:var(--fs-nota)}
.sb-colloquio-form input{font:inherit;box-sizing:border-box;width:100%;min-height:44px;padding:8px 10px;border:1px solid var(--campo-bordo);border-radius:var(--raggio-2);background:var(--fondo);color:var(--testo)}   /* campi bianchi col bordo, alti uguali */

/* Telefono (titolare, 12/10): il logo prende il 70% della riga; il menu si apre da un tondo pieno col colore del
   pulsante principale e tre lineette, senza scritta; «Area riservata» passa dentro il menu. */

/* Il riquadro della richiesta nel tema scuro (Mattia, 19/10: «nel tema scuro una form bianca non va»): come nel chiaro,
   la scheda sta un gradino sotto la fascia che la contiene (fondo della pagina), e i campi un gradino sopra la scheda */
:root[data-theme="dark"] .rc{background:var(--fondo);border:1px solid var(--bordo);color-scheme:dark;--rc-ink:var(--testo);--rc-ink2:var(--testo-tenue);--rc-linea:var(--campo-bordo);--campo-fondo:var(--campo-su-bianco);--bd-magenta:var(--link)}
:root[data-theme="dark"] .rc .rc-eyebrow{color:var(--titolo)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rc{background:var(--fondo);border:1px solid var(--bordo);color-scheme:dark;--rc-ink:var(--testo);--rc-ink2:var(--testo-tenue);--rc-linea:var(--campo-bordo);--campo-fondo:var(--campo-su-bianco);--bd-magenta:var(--link)}
  :root:not([data-theme="light"]) .rc .rc-eyebrow{color:var(--titolo)}}

/* il campo trappola per lo spam (app/core/protezione.py): fuori dallo schermo e nascosto al lettore di schermo */
.hp-sito{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.errore-campo{display:block;margin:4px 0 0;color:var(--bad);font-size:var(--fs-nota);font-weight:600}
/* R-14 (19/10): niente più righe a griglia nei moduli (.rc-riga, la frase di aiuto a destra del campo): Orca legge per
   righe disegnate e saltava etichetta e campo. La frase sta sotto il campo, come nel modulo della richiesta. */
.sb-nota{font-size:var(--fs-nota);color:var(--ink2);margin:8px 0 0}

.sb-org{margin:14px 0 0;padding:12px 16px;border:1px solid var(--bordo);border-radius:var(--raggio-3);background:var(--superficie);--campo-fondo:var(--fondo)}.sb-org p{margin:6px 0 0}   /* «Lavora con noi» per l'organizzazione (Mattia, 21/10) */
.bd-f-aiuto{display:block;margin-top:4px;font-size:var(--fs-suggerimento);font-weight:400;text-transform:none;letter-spacing:0}   /* «Utile per allargare la ricerca» (21/10) */
/* I filtri allineati in alto (Mattia, 21/10), come nella richiesta dell'organizzazione */
.bd-f-tendine{align-items:start}
.bd-f-tendine>label,.bd-f-comune>label{grid-template-rows:auto 40px minmax(18px,auto);align-content:start}
.bd-f-tendine>label>select,.bd-f-comune>label>select,.bd-f-comune>label>input{height:40px;box-sizing:border-box;width:100%}
.bd-f-comune{align-items:flex-start}.bd-f-comune>label{flex:1 1 220px}
.bd-f-comune .bd-f-vai{margin-top:calc(var(--fs-nota) * 1.6 + 4px);height:40px}
.bd-f-aiuto{margin:0}
.pg-badanti .bd-f-comune input{background:var(--ne-0);color:var(--kit-prugna-10);border-color:var(--ne-0)}.pg-badanti .bd-f-comune input::placeholder{color:var(--ne-600)}   /* bianco come le tendine accanto (Mattia, 21/10) */
/* I pulsanti d'accesso con Apple e Facebook (21/10): mancava lo stile e sulla demo il logo di Facebook riempiva la pagina */
.social-login .or-sep{text-align:center;color:var(--testo-tenue);font-size:var(--fs-nota);margin:12px 0 8px}
.facebook-login,.apple-login{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:44px;box-sizing:border-box;margin:8px 0;padding:10px 16px;border:1px solid var(--campo-bordo);border-radius:var(--raggio-2);background:var(--fondo);color:var(--testo);font-weight:600;text-decoration:none;--campo-fondo:var(--campo-su-bianco)}
.facebook-login:hover,.apple-login:hover,.facebook-login:focus-visible,.apple-login:focus-visible{background:var(--superficie);--campo-fondo:var(--fondo)}
.facebook-login svg,.apple-login svg{width:20px;height:20px;flex:0 0 20px}
.facebook-login svg{fill:var(--facebook)}.apple-login svg{fill:currentColor}
/* Il menu dell'account nella testata del sito, uguale a quello delle aree (Mattia, 21/10): le parti a fisarmonica */
/* le tendine del sito sono «a colonne» con un'altezza massima (.drop ul): aprendo Account le voci finivano in una seconda
   colonna di lato (Mattia, 26/10). Qui una colonna sola che scorre in verticale, e le liste interne senza limiti. */

/* PRO o BASIC accanto al nome, come nella testata dell'area (app.css) */

.social-nota{margin:-2px 0 8px;font-size:var(--fs-suggerimento);color:var(--testo-tenue);text-align:center}   /* Facebook in prova (21/10) */

/* «Lavora con» sulla scheda della badante (decisione 89): chi ha il canone in evidenza */
.sb-lavora-con{margin:6px 0 0}.sb-org-canone{display:inline-block;padding:1px 10px;border-radius:var(--raggio-pillola);background:var(--gr-referenze-fondo);color:var(--gr-referenze-testo);border:1px solid var(--gr-referenze-segno)}

/* il riquadro dei livelli della famiglia (partials/livelli_famiglia.html) anche nelle pagine del sito: la landing delle famiglie (27/10) */
.lv-area{margin:0 0 18px;padding:18px 20px 20px;border-radius:var(--raggio-4);background:var(--superficie);--campo-fondo:var(--fondo)}
.lv-area h2{margin:0 0 12px;font-size:var(--fs-grande)}
.lv-carte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){.lv-carte{grid-template-columns:minmax(0,1fr)}}
.lv-carta{padding:16px 18px;border:2px dashed var(--bordo);border-radius:var(--raggio-3);background:var(--fondo);--campo-fondo:var(--campo-su-bianco)}
.lv-carta.lv-qui{border:2px solid var(--progresso)}
.lv-carta.lv-pro{border-color:var(--gr-referenze-segno)}
.lv-testa{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.lv-nome{font-size:var(--fs-grande);font-weight:700;color:var(--titolo)}
.lv-sei-qui{padding:1px 10px;border-radius:var(--raggio-pillola);background:var(--btn-fondo);color:var(--btn-testo);font-size:var(--fs-nota);font-weight:700}
.lv-prezzo{margin:4px 0 10px;color:var(--testo-tenue);font-size:var(--fs-nota)}
.lv-carta ul{margin:0;padding-left:20px;display:grid;gap:4px}
.lv-prossimo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.lv-prossimo p{margin:0;flex:1 1 320px}.lv-prossimo form{margin:0}

/* La linea del tempo delle landing (Mattia, 28/10): tre fasi col pallino grande, ognuna con un colore della tavolozza base
   (magenta di base, .tl-lilla e .tl-oro col pallino pieno; famiglie: lilla la richiesta gratuita, magenta l'iscrizione,
   oro il Pro; badanti: i tre livelli, iscritta, verificata, con referenze; Mattia, 28/10: il verde non è del sito); dentro, un pallino piccolo per ogni cosa che si
   può fare. Le fasi stanno sul fondo della pagina, senza fasce colorate (Mattia,
   28/10), e la linea passa continua dal primo pallino all'ultimo punto dell'ultima fase. I pallini hanno il centro sulla linea,
   a 19px dal bordo della riga. */
.tl{list-style:none;margin:24px 0 0;padding:0}
.tl-fase{--tl-colore:var(--progresso);--tl-testo:var(--progresso);--tl-fondo:var(--fondo)}
.tl-lilla{--tl-colore:var(--spunta);--tl-testo:var(--lg-700)}   /* la scritta un passo più scura: il lilla della linea sul bianco fa 4,47:1 */
:root[data-theme="dark"] .tl-lilla{--tl-testo:var(--spunta)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tl-lilla{--tl-testo:var(--spunta)}}
.tl-oro{--tl-colore:var(--gr-referenze-segno);--tl-testo:var(--gr-referenze-testo)}
/* nel tema scuro l'oro delle scritte non si legge sul fondo: si usa il giallo caldo dell'avviso, che lì è chiaro */
:root[data-theme="dark"] .tl-oro{--tl-testo:var(--avviso)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tl-oro{--tl-testo:var(--avviso)}}
.tl-riga{position:relative;padding:16px 0 16px 48px}
.tl-riga::after{content:"";position:absolute;left:18px;top:0;bottom:0;width:2px;background:var(--tl-colore)}
.tl-fase:first-child .tl-riga::after{top:16px}
.tl-fase:last-child .tl-riga{overflow:hidden}   /* nel Pro la linea si ferma all'ultimo punto: la copre il tratto sotto */
.tl-fase:last-child .tl-punti li:last-child::after{content:"";position:absolute;left:-30px;top:calc(.5em + 5px);bottom:-100vh;width:2px;background:var(--tl-fondo);z-index:1}
.tl-corpo{position:relative}
.tl-corpo::before{content:"";box-sizing:border-box;position:absolute;left:-40px;top:0;width:22px;height:22px;border-radius:var(--raggio-pillola);background:var(--tl-fondo);border:4px solid var(--tl-colore);z-index:2}
.tl-oro .tl-corpo::before{background:var(--tl-colore)}
.tl-etichetta{display:inline-block;margin-bottom:2px;font-size:var(--fs-nota);font-weight:700;color:var(--tl-testo)}
.tl-fase h3{margin:0 0 10px}
.tl-punti{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tl-punti li{position:relative}
.tl-punti li::before{content:"";box-sizing:border-box;position:absolute;left:-34px;top:.5em;width:10px;height:10px;border-radius:var(--raggio-pillola);background:var(--tl-colore);z-index:2}
.tl-btn{margin-top:16px}
.tl-fase .tl-nota{margin:12px 0 0}
/* «Il portale» / «Tutto dal telefono» delle landing (Mattia, 28/10): il titolo sopra, poi le cose che si fanno in
   colonne, ognuna col suo tondo e una parola in grassetto che la nomina; una riga sottile sopra ciascuna, niente riquadri. */

.tel-lista{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px 40px}
.tel-lista li{display:flex;gap:16px;align-items:flex-start;padding-top:20px;border-top:1px solid var(--bianco-a25);color:var(--ne-200)}
.tel-tre{grid-template-columns:repeat(3,1fr)}   /* sei voci: tre e tre */
@media (max-width:900px){.tel-tre{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.tel-tre{grid-template-columns:1fr}}
.tel-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--raggio-cerchio);background:var(--bianco-a15);color:var(--rosa)}
.tel-lista b{display:block;margin-bottom:2px;font-family:var(--disp);font-size:var(--fs-grande);color:var(--ne-0)}
.org-punti{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:24px}
.org-punti h3{margin:0 0 6px}.org-punti p{margin:0;color:var(--ink2)}
@media (max-width:900px){.org-punti{grid-template-columns:1fr;gap:24px}}
.tl-nota{margin:0;color:var(--testo-tenue);font-size:var(--fs-nota)}
.tl-arriva{display:inline-block;padding:0 8px;border-radius:var(--raggio-pillola);border:1px solid currentColor;font-size:var(--fs-nota);color:var(--testo-tenue)}

/* Foto in apertura delle landing (Mattia, 28/10), da sola accanto al testo */
.crm-foto{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--raggio-4)}

/* La pagina dell'agenzia, servizio a pagamento (decisione 80), con l'anteprima della bozza */
.vetrina-in{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.vetrina-txt h2{margin:0 0 12px}.vetrina-txt p{color:var(--ink2);margin:0 0 12px}
.vetrina-nota{font-size:var(--fs-nota)}.vetrina-txt .hc-btn{margin-top:8px}
.vetrina-anteprima{display:block;border-radius:var(--raggio-4);overflow:hidden;background:var(--tenue);box-shadow:var(--ombra-vetrina);text-decoration:none;color:var(--ink)}
.vetrina-anteprima>img{display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:cover}
.vetrina-testa{display:flex;gap:16px;align-items:center;padding:16px 20px}
.vetrina-testa img{border-radius:var(--raggio-cerchio);flex:none}
.vetrina-testa b{display:block;font-family:var(--disp);font-size:var(--fs-grande);color:var(--titolo)}
@media (max-width:900px){.vetrina-in{grid-template-columns:1fr;gap:28px}}

/* la pagina delle guide per argomento, con la ricerca (4/11) */
.gd-cerca{display:grid;gap:6px;max-width:520px;margin:24px 0 8px}.gd-cerca label{font-weight:600}
.gd-cerca input{width:100%;box-sizing:border-box;min-height:44px;border:1.5px solid var(--line);border-radius:var(--raggio-2);padding:11px 12px;font:inherit;color:var(--ink);background:var(--campo-fondo)}
.gd-sezione{margin:20px 0 0;padding:24px;border-radius:var(--raggio-4)}.gd-sezione h2{margin:0 0 14px}.gd-sezione .gd-griglia{margin-top:0}
/* un argomento e l'altro su due fondi diversi, così si vede dove finisce una sezione (Mattia, 4/11) */
.gd-sezione:nth-of-type(odd){background:var(--superficie);--campo-fondo:var(--fondo)}.gd-sezione:nth-of-type(even){background:var(--tenue);--campo-fondo:var(--fondo)}
@media (max-width:760px){.gd-sezione{padding:16px}}

/* le strade della home sotto il sottotitolo (Mattia, 4/11): badanti, iscrizione, agenzie */
.hc-strade{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 14px}.hc-strade .hc-btn{min-height:48px;padding:12px 22px}
.hc-btn-lilla{background:var(--btn3-fondo);color:var(--btn3-testo)}.hc-btn-lilla:hover,.hc-btn-lilla:focus-visible{background:var(--btn3-fondo-over);color:var(--btn3-testo)}
.hc-agenzie{margin:0 0 22px;font-weight:600}.hc-agenzie a{color:var(--titolo)}
@media (max-width:760px){.hc-strade .hc-btn{flex:1 1 100%}}

/* le due strade sopra il modulo quando la famiglia ha già scelto una badante (Mattia, 4/11): il Pro e le agenzie */
.rc-strade{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 8px;padding:16px;border-radius:var(--raggio-3);background:var(--tenue);--campo-fondo:var(--fondo)}
.rc-strade-t{grid-column:1/-1;margin:0;font-size:var(--fs-grande)}
.rc-strada{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--bordo);border-radius:var(--raggio-3);background:var(--superficie);--campo-fondo:var(--fondo)}
.rc-strada h4{margin:0}.rc-strada p{margin:0}.rc-strada .btn{align-self:flex-start;margin-top:auto}
.rc-strada-pro{border:2px solid var(--marchio)}
@media (max-width:760px){.rc-strade{grid-template-columns:1fr}}