/* Classi in BEM italiano (blocco__elemento--variante). */

/* caratteri locali, sottoinsieme latin */
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url("/caratteri/atkinson-400.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url("/caratteri/atkinson-700.woff2") format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700 800;font-display:swap;src:url("/caratteri/bricolage-variabile.woff2") format("woff2")}

:root{
/* colori di base */
--fondo:#FBFBF8;
--adige:#1E4A46;
--segnale:#F2C230;
--su-segnale:#14302E;
/* colori di servizio */
--testo:#17201F;
--su-adige:#FFFFFF;
--su-adige-tenue:#CFE0DC;
--acqua:#E3EEEC;
--link:#0F6F66;
--linea:#C9D6D3;
--tasto:#1E4A46;
--su-tasto:#FFFFFF;
/* derivati, solo per bordi e stati */
--segnale-bordo:color-mix(in oklab,var(--segnale),var(--su-segnale) 28%);
--segnale-chiaro:color-mix(in oklab,var(--segnale),#FFFFFF 22%);
--adige-bordo:rgba(255,255,255,.45);
--adige-tacca:rgba(255,255,255,.22);
--adige-onda:rgba(255,255,255,.26);
/* caratteri */
--f-titoli:"Bricolage Grotesque","Arial Narrow",Arial,sans-serif; /* @kind font */
--f-testo:"Atkinson Hyperlegible","Segoe UI",Arial,sans-serif; /* @kind font */
/* misure */
--larghezza:38rem;
--larghezza-larga:72rem;
--margine:1rem;
--raggio:.75rem;
--raggio-grande:1.1rem;
--alto-minimo:3rem;
}
@media (prefers-color-scheme:dark){:root{--fondo:#0F1716;--testo:#E8EFEE;--adige:#163835;--acqua:#16211F;--link:#7FC7BD;--linea:#2B3B39;--tasto:#CFE0DC;--su-tasto:#14302E}}
:root[data-theme="light"]{--fondo:#FBFBF8;--testo:#17201F;--adige:#1E4A46;--acqua:#E3EEEC;--link:#0F6F66;--linea:#C9D6D3;--tasto:#1E4A46;--su-tasto:#FFFFFF}
:root[data-theme="dark"]{--fondo:#0F1716;--testo:#E8EFEE;--adige:#163835;--acqua:#16211F;--link:#7FC7BD;--linea:#2B3B39;--tasto:#CFE0DC;--su-tasto:#14302E}


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--testo);font-family:var(--f-testo);font-size:1.125rem;line-height:1.55}
a{color:var(--link);text-underline-offset:.15em}
a:hover{color:var(--testo)}
a:focus-visible{outline:3px solid var(--segnale);outline-offset:3px}
h1,h2,h3{font-family:var(--f-titoli);font-weight:800;line-height:1.05;letter-spacing:-.025em}
h2{font-size:1.6rem;margin:2.2rem 0 .8rem}
strong{font-weight:700}
img{max-width:100%}
@media (max-width:55.99rem){body{padding-bottom:7rem}}


/* ---------- pulsante-chiama ---------- */
/* telefonata: l'unico pulsante del sito. Giallo segnale come un tasto fisico, con lo spessore sotto. */
.telefonata{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:var(--alto-minimo);padding:.5rem 1.1rem;background:var(--segnale);color:var(--su-segnale);font-family:var(--f-testo);font-weight:700;font-size:1.125rem;line-height:1.1;text-decoration:none;border-radius:var(--raggio);box-shadow:0 4px 0 var(--segnale-bordo);margin-bottom:4px;transition:background-color .15s ease,transform .08s ease,box-shadow .08s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer}
.telefonata:hover{color:var(--su-segnale)}
@media (hover:hover){.telefonata:hover{background:var(--segnale-chiaro)}}
.telefonata:active{transform:translateY(4px);box-shadow:0 0 0 var(--segnale-bordo)}
.telefonata:focus-visible{outline:3px solid var(--su-adige);outline-offset:5px}
.telefonata--su-chiaro:focus-visible{outline-color:var(--su-segnale)}
.telefonata__icona{flex:none;width:1.3em;height:1.3em}
.telefonata__cifre{font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap}
.telefonata__testi{display:grid;gap:.15rem;text-align:left}
/* grande: primo schermo e barra fissa */
.telefonata--grande{min-height:4.5rem;padding:.6rem 1.6rem .6rem .6rem;gap:.9rem;border-radius:var(--raggio-grande)}
.telefonata__disco{flex:none;display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:.8rem;background:var(--su-segnale);color:var(--segnale)}
.telefonata__disco .telefonata__icona{width:1.6rem;height:1.6rem}
.telefonata--grande .telefonata__azione{font-size:.95rem;letter-spacing:.01em}
.telefonata--grande .telefonata__cifre{font-family:var(--f-titoli);font-weight:800;font-size:1.8rem;line-height:1;letter-spacing:0}
.telefonata--larga{display:flex;width:100%}
/* testata: sobrio, sul verde, il giallo resta al pulsante grande */
.telefonata--testata{background:transparent;color:var(--su-adige);box-shadow:inset 0 0 0 1.5px var(--adige-bordo);margin-bottom:0;padding:.5rem .85rem;gap:.5rem;font-size:1rem}
.telefonata--testata:hover{color:var(--su-adige)}
@media (hover:hover){.telefonata--testata:hover{background:rgba(255,255,255,.1)}}
.telefonata--testata:active{transform:none;box-shadow:inset 0 0 0 1.5px var(--su-adige);background:rgba(255,255,255,.16)}
.telefonata--testata .telefonata__icona{width:1.15rem;height:1.15rem}
@media (prefers-reduced-motion:reduce){.telefonata{transition:none}.telefonata:active{transform:none}}

/* ---------- testata ---------- */
/* testata: la <header> verde; contiene anche la fascia d'apertura e quindi il primo pulsante */
.testata{container:testata/inline-size;background:var(--adige);color:var(--su-adige)}
.testata__riga{max-width:var(--larghezza-larga);margin:0 auto;padding:.6rem var(--margine);display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.testata__marchio{display:inline-flex;align-items:center;gap:.6rem;min-height:var(--alto-minimo);color:var(--su-adige);text-decoration:none;font-family:var(--f-titoli);font-weight:800;font-size:1.15rem;line-height:.95;letter-spacing:-.03em}
.testata__marchio:hover{color:var(--su-adige)}
.testata__marchio:focus-visible{outline:3px solid var(--su-adige);outline-offset:4px;border-radius:.25rem}
.testata__goccia{flex:none;width:.8rem;height:.8rem;margin-top:.15rem;background:var(--segnale);border-radius:0 50% 50% 50%;transform:rotate(45deg)}
.testata__nome{display:flex;flex-direction:column}
.testata__motto{display:none;font-size:.95rem;color:var(--su-adige-tenue);padding-left:1rem;border-left:1px solid var(--adige-bordo);line-height:1.2}
.testata__sinistra{display:flex;align-items:center;gap:1rem;min-width:0}
@container testata (min-width:48rem){
.testata__riga{padding:.9rem 2rem}
.testata__marchio{font-size:1.45rem}
.testata__nome{flex-direction:row;gap:.28em}
.testata__motto{display:block}
}

/* ---------- fascia-apertura ---------- */
/* avvio: primo schermo. Acqua ferma: un idrometro sul margine, la superficie in fondo, i cerchi di una goccia caduta.
   Solo CSS, niente immagini: il primo schermo non aspetta nulla. */
.avvio{container:avvio/inline-size;position:relative;overflow:hidden;isolation:isolate;background:var(--adige);color:var(--su-adige)}
.avvio__corpo{position:relative;z-index:2;max-width:var(--larghezza-larga);margin:0 auto;padding:1.4rem 2.4rem 4.6rem var(--margine)}
.avvio__titolo{margin:0 0 1rem;max-width:13ch;font-family:var(--f-titoli);font-weight:800;font-size:2.55rem;line-height:1;letter-spacing:-.035em;text-wrap:balance}
.avvio__testo{margin:0 0 1.6rem;max-width:34rem;font-size:1.125rem;line-height:1.5;text-wrap:pretty}
.avvio__pulsante{display:flex;width:100%}
/* scheda: i tre passi per chiudere l'acqua, su fondo chiaro. Solo su schermo largo: sul telefono la sezione segue subito. */
.avvio__scheda{display:none}
/* idrometro: asta graduata sul margine destro, sfuma verso l'alto */
.avvio__idrometro{position:absolute;z-index:1;top:0;bottom:0;right:.7rem;width:.8rem;border-right:1px solid var(--adige-tacca);background:repeating-linear-gradient(to bottom,var(--adige-tacca) 0 2px,transparent 2px 50px) 0 0/100% 100% no-repeat,repeating-linear-gradient(to bottom,var(--adige-tacca) 0 1px,transparent 1px 10px) 100% 0/50% 100% no-repeat;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 45%);mask-image:linear-gradient(to bottom,transparent 0,#000 45%)}
/* superficie dell'acqua: il bordo inferiore della fascia */
.avvio__acqua{position:absolute;z-index:1;left:0;right:0;bottom:-1px;width:100%;height:2.25rem;display:block;fill:var(--sotto,var(--acqua))}
/* cerchi: ellissi schiacciate, metà nascosta dall'acqua */
.avvio__cerchi{position:absolute;z-index:0;right:24%;bottom:1.1rem;width:0;height:0}
.avvio__cerchio{position:absolute;left:-8rem;top:-2.4rem;width:16rem;height:4.8rem;border:1.5px solid var(--adige-onda);border-radius:50%;opacity:0;transform:scale(.12);animation:avvio-increspatura 7.5s cubic-bezier(.22,.61,.36,1) infinite;will-change:transform,opacity}
.avvio__cerchio:nth-child(1){animation-delay:.6s}
.avvio__cerchio:nth-child(2){animation-delay:3.1s}
.avvio__cerchio:nth-child(3){animation-delay:5.6s}
@keyframes avvio-increspatura{0%{opacity:0;transform:scale(.12)}8%{opacity:1}100%{opacity:0;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
.avvio__cerchio{animation:none;will-change:auto}
.avvio__cerchio:nth-child(1){opacity:.9;transform:scale(.3)}
.avvio__cerchio:nth-child(2){opacity:.55;transform:scale(.6)}
.avvio__cerchio:nth-child(3){opacity:.25;transform:scale(.92)}
}
@container avvio (min-width:56rem){
.avvio__corpo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(20rem,.9fr);column-gap:4rem;align-content:end;padding:3.5rem 2rem 6.5rem}
.avvio__titolo,.avvio__testo,.avvio__pulsante{grid-column:1}
.avvio__pulsante{justify-self:start}
.avvio__scheda{display:block;grid-column:2;grid-row:1/4;align-self:end;justify-self:end;position:relative;z-index:2;width:100%;max-width:27rem;margin-right:2.75rem;padding:1.5rem 1.6rem 1.4rem;background:var(--fondo);color:var(--testo);border-radius:var(--raggio-grande);box-shadow:0 30px 50px -22px rgba(0,0,0,.5)}
.avvio__scheda-sopra{margin:0 0 .3rem;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--link)}
.avvio__scheda-titolo{margin:0 0 1rem;font-family:var(--f-titoli);font-weight:800;font-size:1.65rem;line-height:1.05;letter-spacing:-.025em}
.avvio__passi{list-style:none;margin:0;padding:0;display:grid;gap:.8rem;counter-reset:passo}
.avvio__passo{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.75rem;align-items:start;font-size:1rem;line-height:1.4;counter-increment:passo;text-wrap:pretty}
.avvio__passo::before{content:counter(passo);display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--adige);color:var(--su-adige);font-family:var(--f-titoli);font-weight:800;font-size:1.05rem;line-height:1}
.avvio__scheda-nota{margin:1rem 0 0;font-size:.95rem}
.avvio__titolo{font-size:clamp(3.6rem,6.2cqi,5rem);max-width:12ch;margin-bottom:1.4rem}
.avvio__testo{font-size:1.25rem;margin-bottom:2rem}
.avvio__pulsante{display:inline-flex;width:auto}
.avvio__idrometro{right:max(2rem,calc((100cqi - var(--larghezza-larga)) / 2 + 2rem));width:1.3rem}
.avvio__acqua{height:3.5rem}
.avvio__cerchi{right:max(16rem,calc((100cqi - var(--larghezza-larga)) / 2 + 17rem));bottom:1.9rem}
.avvio__cerchio{left:-17rem;top:-4.5rem;width:34rem;height:9rem;border-width:2px}
}

/* ---------- layout-pagina-sintomo ---------- */
/* impaginazione delle pagine interne: apertura verde corta, colonna di lettura a sinistra, foto a destra sullo schermo largo */
/* sezione: ogni blocco della pagina. Sul telefono una colonna; sullo schermo largo testo a sinistra (38rem) e lato destro per foto o schede */
.sezione__corpo{max-width:var(--larghezza-larga);margin:0 auto;padding:0 var(--margine)}
.sezione__titolo{margin:0 0 1rem;font-size:1.7rem}
.sezione__testo p{margin:0 0 1rem;text-wrap:pretty}
.sezione__testo>p:last-child{margin-bottom:0}
.sezione__lato{margin-top:1.6rem}
/* foto: riquadro 3:2 (o ritratto), angoli come le schede; il fondo acqua si vede finché la foto non arriva */
.foto{margin:0;border-radius:var(--raggio-grande);overflow:hidden;background:var(--acqua)}
.foto img{display:block;width:100%;height:auto}
.foto--ritratto{max-width:22rem}
/* apertura: la fascia verde delle pagine interne, più bassa della home */
.apertura{container:apertura/inline-size;position:relative;overflow:hidden;isolation:isolate;background:var(--adige);color:var(--su-adige)}
.apertura__corpo{position:relative;z-index:2;max-width:var(--larghezza-larga);margin:0 auto;padding:1.2rem 2.4rem 4rem var(--margine)}
.apertura__titolo{margin:0 0 .9rem;max-width:16ch;font-family:var(--f-titoli);font-weight:800;font-size:2.15rem;line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.apertura__testo{margin:0 0 1.5rem;max-width:34rem;font-size:1.125rem;line-height:1.5;text-wrap:pretty}
.apertura__pulsante{display:flex;width:100%}
.apertura__foto{margin:1.6rem 0 0;background:rgba(0,0,0,.25)}
.apertura__idrometro{position:absolute;z-index:1;top:0;bottom:0;right:.7rem;width:.8rem;border-right:1px solid var(--adige-tacca);background:repeating-linear-gradient(to bottom,var(--adige-tacca) 0 2px,transparent 2px 50px) 0 0/100% 100% no-repeat,repeating-linear-gradient(to bottom,var(--adige-tacca) 0 1px,transparent 1px 10px) 100% 0/50% 100% no-repeat;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 45%);mask-image:linear-gradient(to bottom,transparent 0,#000 45%)}
.apertura__acqua{position:absolute;z-index:1;left:0;right:0;bottom:-1px;width:100%;height:2.25rem;display:block;fill:var(--sotto,var(--fondo))}
.apertura__cerchi{position:absolute;z-index:0;right:24%;bottom:1.1rem;width:0;height:0}
.apertura__cerchio{position:absolute;left:-8rem;top:-2.4rem;width:16rem;height:4.8rem;border:1.5px solid var(--adige-onda);border-radius:50%;opacity:0;transform:scale(.12);animation:avvio-increspatura 7.5s cubic-bezier(.22,.61,.36,1) infinite;will-change:transform,opacity}
.apertura__cerchio:nth-child(1){animation-delay:.6s}
.apertura__cerchio:nth-child(2){animation-delay:3.1s}
.apertura__cerchio:nth-child(3){animation-delay:5.6s}
@media (prefers-reduced-motion:reduce){
.apertura__cerchio{animation:none;will-change:auto}
.apertura__cerchio:nth-child(1){opacity:.9;transform:scale(.3)}
.apertura__cerchio:nth-child(2){opacity:.55;transform:scale(.6)}
.apertura__cerchio:nth-child(3){opacity:.25;transform:scale(.92)}
}
/* articolo: la colonna di lettura delle pagine interne */
.articolo{padding-top:1.8rem}
.articolo h2{font-size:1.6rem;margin:2.2rem 0 .7rem}
.articolo .sezione__testo>h2:first-child{margin-top:0}
.passo-grande+.passo-grande{margin-top:2.2rem}
.articolo p{margin:0 0 1rem;text-wrap:pretty}
.articolo ul{margin:0 0 1rem;padding-left:1.2rem}
.articolo li{margin-bottom:.5rem}
.articolo .telefonata{margin:.4rem 0 1.6rem}
.articolo hr{border:0;border-top:1px solid var(--linea);margin:2rem 0}
.articolo--seguito{padding-top:0}
.articolo h3,.articolo__titoletto{font-size:1.25rem;margin:1.4rem 0 .4rem}
.articolo code{font-size:.92em;background:var(--acqua);padding:.05em .3em;border-radius:.25em;overflow-wrap:anywhere}
.tabella{margin:0 0 1.6rem;overflow-x:auto}
.tabella__tavola{width:100%;border-collapse:collapse;font-size:1rem;line-height:1.4}
.tabella__tavola--larga{min-width:36rem}
.tabella__tavola th{font-family:var(--f-titoli);font-weight:800;font-size:1.05rem;text-align:left;padding:.6rem .7rem;border-bottom:2px solid var(--adige);background:var(--acqua)}
.tabella__tavola td{vertical-align:top;padding:.6rem .7rem;border-bottom:1px solid var(--linea)}

/* passo grande: sezione numerata con il quadrato del motivo */
.passo-grande__titolo{display:flex;align-items:center;gap:.8rem}
.passo-grande__numero{flex:none;width:2.4rem;height:2.4rem;border:2px solid var(--link);color:var(--link);border-radius:.4rem;display:grid;place-items:center;font-size:1.25rem;line-height:1}
/* confronto: due colonne, gocciola (fondo acqua) e non chiude */
.confronto{width:100%;border-collapse:collapse;margin:0 0 1.6rem;font-size:1rem;line-height:1.4}
.confronto th{font-family:var(--f-titoli);font-weight:800;font-size:1.3rem;letter-spacing:-.02em;text-align:left;padding:.6rem .8rem;border-bottom:2px solid var(--adige)}
.confronto td{width:50%;vertical-align:top;padding:.65rem .8rem;border-bottom:1px solid var(--linea)}
.confronto th:first-child,.confronto td:first-child{background:var(--acqua)}
/* domande: domanda in grassetto, risposta sotto */
.domande{margin:0}
.domande dt{font-weight:700;margin:1rem 0 .2rem}
.domande dd{margin:0}
/* dati: righe dell'impresa */
.dati{margin:0 0 1.4rem;padding:1.1rem 1.2rem;border:1.5px solid var(--linea);border-radius:var(--raggio);line-height:1.6}
.dati p{margin:0}
/* da completare: testo ancora da scrivere, visibile apposta */
.da-completare{margin:0 0 1.4rem;padding:1rem 1.2rem;border:2px dashed var(--linea);border-radius:var(--raggio);color:var(--testo)}
@media (min-width:56rem){
.sezione__corpo{display:grid;grid-template-columns:minmax(0,var(--larghezza)) minmax(0,1fr);column-gap:4rem;padding:0 2rem;align-items:start}
.sezione__testo{grid-column:1}
.sezione__lato{grid-column:2;grid-row:1/span 9;margin-top:0;align-self:start}
.sezione__lato--fine{align-self:end}
.sezione__corpo--largo .sezione__testo{grid-column:1/-1}
.sezione__titolo{font-size:2rem}
.articolo{padding-top:2.4rem}
.articolo h2{font-size:1.8rem}
}
@container apertura (min-width:56rem){
.apertura__corpo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(20rem,.9fr);column-gap:4rem;align-items:center;padding:3rem 2rem 6rem}
.apertura__titolo,.apertura__testo,.apertura__pulsante{grid-column:1}
.apertura__titolo{font-size:clamp(2.8rem,4.6cqi,3.8rem);max-width:14ch;margin-bottom:1.2rem}
.apertura__testo{font-size:1.25rem;margin-bottom:1.8rem}
.apertura__pulsante{display:inline-flex;width:auto;justify-self:start}
.apertura__foto{grid-column:2;grid-row:1/4;align-self:center;margin:0 2.75rem 0 0;box-shadow:0 30px 50px -22px rgba(0,0,0,.5)}
.apertura__idrometro{right:max(2rem,calc((100cqi - var(--larghezza-larga)) / 2 + 2rem));width:1.3rem}
.apertura__acqua{height:3.5rem}
.apertura__cerchi{right:max(16rem,calc((100cqi - var(--larghezza-larga)) / 2 + 17rem));bottom:1.9rem}
.apertura__cerchio{left:-17rem;top:-4.5rem;width:34rem;height:9rem;border-width:2px}
}

/* ---------- passi-chiudi-acqua ---------- */
/* gesti: i passi da fare subito, su fondo acqua chiara. Il motivo del sito: quadrato bordato di verde con il numero */
.gesti{background:var(--acqua);padding:1.8rem 0 2.2rem}
.gesti__titolo{margin:0 0 1.2rem;font-size:1.7rem}
.gesti__elenco{list-style:none;counter-reset:gesto;margin:0;padding:0;display:grid;gap:1.1rem}
.gesti__passo{counter-increment:gesto;display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.9rem;align-items:start;text-wrap:pretty}
.gesti__passo::before{content:counter(gesto);width:2.4rem;height:2.4rem;border:2px solid var(--link);color:var(--link);border-radius:.4rem;font-family:var(--f-titoli);font-weight:800;font-size:1.25rem;line-height:1;display:grid;place-items:center;margin-top:.05rem}
.gesti__passo p{margin:0}
.gesti__nota{margin:1.4rem 0 0}
.gesti__nota .telefonata{margin-top:.4rem}
.gesti--bianco{background:transparent;padding:0}
@media (min-width:56rem){
.gesti{padding:2.6rem 0 3rem}
.gesti__titolo{font-size:2rem}
}

/* ---------- scheda-sintomo ---------- */
/* guasti: una scheda per sintomo. Lista sul telefono, due o tre colonne sullo schermo largo. Tutta la scheda è il link */
.guasti{padding:2.4rem 0 .6rem}
.guasti__elenco{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.sintomo{position:relative;display:grid;gap:.3rem;padding:1rem 3rem 1.05rem 1.1rem;border:1.5px solid var(--linea);border-radius:var(--raggio);background:var(--fondo);transition:border-color .15s ease}
.sintomo:hover{border-color:var(--link)}
.sintomo:focus-within{outline:3px solid var(--segnale);outline-offset:2px}
.sintomo__link{font-family:var(--f-titoli);font-weight:800;font-size:1.25rem;line-height:1.1;letter-spacing:-.02em;color:var(--testo);text-decoration:none;text-wrap:balance}
.sintomo__link:hover{color:var(--link)}
.sintomo__link:focus-visible{outline:none}
.sintomo__link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.sintomo__scena{font-size:1rem;line-height:1.4;text-wrap:pretty}
.sintomo__freccia{position:absolute;right:1rem;top:1.1rem;width:1.3rem;height:1.3rem;color:var(--link)}
@media (min-width:40rem){.guasti__elenco{grid-template-columns:1fr 1fr}}
@media (min-width:56rem){.guasti{padding:3rem 0 1rem}.guasti__elenco{grid-template-columns:repeat(3,1fr);gap:1rem}.sintomo{padding:1.2rem 3rem 1.25rem 1.3rem}}

/* ---------- blocco-idraulico-di-fiducia ---------- */
/* fiducia: il posizionamento, detto una volta. L'attacco è grande, nel carattere dei titoli */
.fiducia{padding:2.4rem 0}
.fiducia__attacco{font-family:var(--f-titoli);font-weight:700;font-size:1.4rem;line-height:1.3;letter-spacing:-.015em;margin:0 0 1rem;text-wrap:pretty}
.fiducia__testo{margin:0;text-wrap:pretty}
@media (min-width:56rem){.fiducia{padding:3rem 0}.fiducia__attacco{font-size:1.65rem}}

/* ---------- blocco-altri-numeri ---------- */

/* ---------- lista-zone ---------- */
/* territorio: le zone nella home (due paragrafi) e l'elenco completo nella pagina zone, gruppo per gruppo */
.territorio{padding:2.4rem 0 0}
.zone{margin:0 0 1.4rem;border-top:1px solid var(--linea)}
.zone__gruppo{margin:0;padding:1rem 0;border-bottom:1px solid var(--linea);line-height:1.6;text-wrap:pretty;break-inside:avoid}
.zone__nome{display:block;font-family:var(--f-titoli);font-weight:800;font-size:1.2rem;letter-spacing:-.02em;margin-bottom:.15rem}
@media (min-width:56rem){
.territorio{padding:3rem 0 0}
.zone--colonne{columns:2;column-gap:3rem;border-top:0}
.zone--colonne .zone__gruppo{border-bottom:0;border-top:1px solid var(--linea)}
}

/* ---------- piede ---------- */
/* fondo: il piede, verde come la testata, con la superficie dell'acqua sul bordo superiore */
.fondo{position:relative;margin-top:3.5rem;padding:2.6rem 0 1.6rem;background:var(--adige);color:var(--su-adige);font-size:.95rem}
.fondo__acqua{position:absolute;top:-1px;left:0;right:0;width:100%;height:2.25rem;display:block;fill:var(--sopra,var(--fondo));transform:scaleY(-1)}
.fondo__corpo{max-width:var(--larghezza-larga);margin:0 auto;padding:0 var(--margine)}
.fondo__indice{display:flex;flex-wrap:wrap;gap:.2rem 1.5rem;margin:0 0 1.2rem;padding:0;list-style:none}
.fondo__indice a{color:var(--su-adige);min-height:2.75rem;display:inline-flex;align-items:center;text-decoration-color:var(--adige-bordo);text-underline-offset:.2em}
.fondo__indice a:hover{color:var(--su-adige-tenue)}
.fondo__indice a:focus-visible{outline:3px solid var(--su-adige);outline-offset:3px;border-radius:.2rem}
.fondo__dati{margin:0;color:var(--su-adige-tenue);line-height:1.65}
.fondo__telefono,.fondo__email{color:var(--su-adige);font-weight:700;white-space:nowrap}
.fondo__telefono:hover,.fondo__email:hover{color:var(--su-adige-tenue)}
.fondo__telefono:focus-visible,.fondo__email:focus-visible{outline:3px solid var(--su-adige);outline-offset:3px;border-radius:.2rem}
@media (min-width:56rem){.fondo{padding:3.6rem 0 2rem}.fondo__acqua{height:3.5rem}.fondo__corpo{padding:0 2rem}.fondo__indice{gap:.2rem 2rem;font-size:1rem}}

/* ---------- barra-chiamata-fissa ---------- */
/* barra fissa (telefono): compare quando il pulsante della fascia d'apertura esce dallo schermo */
.telefonata-fissa{position:fixed;z-index:100;left:0;right:0;bottom:0;padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom));background:var(--adige);transition:transform .25s ease,visibility 0s linear 0s}
.telefonata-fissa .telefonata{max-width:var(--larghezza);margin:0 auto 4px}
/* sopra il banner del consenso finché è aperto: --altezza-consenso la imposta lo script della pagina */
.telefonata-fissa{translate:0 calc(-1 * var(--altezza-consenso,0px))}
@media (max-width:55.99rem){body{padding-bottom:calc(7rem + var(--altezza-consenso,0px))!important}}

.js .telefonata-fissa:not(.telefonata-fissa--visibile){transform:translateY(110%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
@media (prefers-reduced-motion:reduce){.telefonata-fissa{transition:none}}
@media (min-width:56rem){.telefonata-fissa{display:none}}


/* ---------- congedo: l'ultimo pulsante della home ---------- */
.congedo{margin:2.6rem 0 0;padding:1.6rem 0 0;border-top:2px solid var(--linea)}
.congedo__domanda{font-family:var(--f-titoli);font-weight:700;font-size:1.4rem;margin:0 0 .9rem}

/* ---------- barra-chiamata-fissa, 04/10/2026 ---------- */
/* numero grande e sotto lo stato con il pallino verde: modello per tutti i siti di Verona */
.telefonata-fissa .telefonata__testi{justify-items:center;text-align:center;gap:.3rem}
.telefonata__stato{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--f-testo);font-weight:700;font-size:.72rem;letter-spacing:.08em;line-height:1.2;text-transform:uppercase;white-space:nowrap}
.telefonata__punto{flex:none;width:.55rem;height:.55rem;border-radius:50%;background:#25D366;animation:online 2s ease-out infinite}
@media (prefers-reduced-motion:reduce){.telefonata__punto{animation:none}}
@keyframes online{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}70%{box-shadow:0 0 0 .45rem rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ---------- domande frequenti, 04/10/2026 ---------- */
/* fascia verde acqua, schede bianche con lo spessore come i pulsanti, quadratino verde con il + giallo come il disco del telefono */
.domande{background:var(--acqua);padding:2.8rem 0 3.2rem;margin-top:2.2rem}
.domande h2{margin:0 0 1.4rem}
.domande h2::after{content:"";display:block;width:3rem;height:4px;margin-top:.6rem;border-radius:2px;background:var(--segnale)}
.domande details{margin:0 0 .7rem;background:#fff;border:1.5px solid var(--linea);border-radius:var(--raggio);box-shadow:0 3px 0 var(--linea);transition:border-color .15s ease,box-shadow .15s ease}
.domande details[open]{border-color:var(--adige);box-shadow:0 3px 0 var(--adige)}
.domande summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1rem .9rem 1.1rem;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.domande summary::-webkit-details-marker{display:none}
.domande summary h3{margin:0;font-family:var(--f-titoli);font-size:1.08rem;font-weight:700;line-height:1.3;color:var(--adige)}
.domande summary::after{content:"";flex:none;width:2rem;height:2rem;border-radius:.6rem;background:linear-gradient(var(--segnale),var(--segnale)) center/.85rem 3px no-repeat,linear-gradient(var(--segnale),var(--segnale)) center/3px .85rem no-repeat,var(--adige)}
.domande details[open] summary::after{background:linear-gradient(var(--su-segnale),var(--su-segnale)) center/.85rem 3px no-repeat,var(--segnale)}
.domande summary:hover h3{text-decoration:underline;text-underline-offset:3px}
.domande details p{margin:0;padding:0 1.1rem 1.1rem;max-width:44rem;color:var(--testo)}
.domande summary:focus-visible{outline:3px solid var(--segnale);outline-offset:2px;border-radius:var(--raggio)}
@media (prefers-reduced-motion:reduce){.domande details{transition:none}}