@font-face{font-family:"JetBrains Mono";src:url("/caratteri/jetbrains-mono-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("/caratteri/public-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("/caratteri/public-sans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{--fondo:#D9DBD8;--testo:#1A1416;--tenue:#4A3C40;--vinaccia:#5B2233;--prugna:#6B2D4F;--bianco:#FFFFFF;--chiaro:#EEEFED;--velo:#CBCFCA;--acciaio:#9A8288;--filetto:#A7ACA7;--mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace/* @kind font */;--sans:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif/* @kind font */;--pl:2.25rem;--pr:1.25rem;--tubo:.75rem;--colmax:calc(66ch + var(--pl) + var(--pr))}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--fondo);color:var(--testo);font:400 1.125rem/1.65 var(--sans);text-wrap:pretty;padding-bottom:4rem}
h1,h2,h3,p,ul,ol,figure{margin:0}
h1,h2{font-family:var(--mono);font-weight:700;color:var(--vinaccia);line-height:1.22;letter-spacing:-.025em;text-wrap:balance}
h1{font-size:1.75rem;margin:0 0 1rem}
h2{font-size:1.3rem;margin:0 0 1rem}
h3{font:700 1.0625rem/1.4 var(--sans);color:var(--vinaccia);margin:1.75rem 0 .35rem}
p+p,p+ul,p+ol,ul+p,ol+p{margin-top:1rem}
strong{font-weight:700}
em{font-style:italic}
a{color:var(--prugna);text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--vinaccia);outline-offset:3px}
.salta{position:absolute;z-index:60;left:var(--pr);top:-5rem;display:inline-flex;align-items:center;min-height:48px;padding:0 1rem;background:var(--vinaccia);color:var(--bianco);font:700 1rem/1 var(--sans)}
.salta:focus{top:.5rem}
code{font:700 .875em/1 var(--mono);color:var(--vinaccia);letter-spacing:-.01em;overflow-wrap:anywhere}
.col{max-width:var(--colmax);margin-inline:auto;padding-inline:var(--pl) var(--pr)}

.testa{padding-top:.5rem}
.marchio{display:inline-flex;align-items:center;gap:.65rem;min-height:48px;font:700 1rem/1 var(--mono);color:var(--vinaccia);text-decoration:none;letter-spacing:-.01em}
a.marchio:hover{text-decoration:underline}
.tombino{flex:none;width:1.6rem;height:1.6rem;border-radius:50%;border:2px solid currentColor;padding:3px;background:repeating-linear-gradient(90deg,currentColor 0 1.5px,transparent 1.5px 4px) content-box;box-shadow:inset 0 0 0 1.5px var(--fondo)}

main{position:relative;display:block}
main::before,main::after{content:"";position:absolute;top:0;bottom:0;left:calc(max(0px,(100% - var(--colmax)) / 2) + var(--tubo));width:2px;background:var(--filetto);pointer-events:none}
main::after{background:var(--vinaccia);transform:scaleY(0);transform-origin:top}
main section.col{padding-top:2.75rem}
main .col h2{position:relative}
main .col h2::before{content:"";position:absolute;top:calc(.61em - 1px);left:calc(var(--tubo) - var(--pl) + 6px);width:calc(var(--pl) - var(--tubo) - 6px - .55rem);height:2px;background:var(--filetto)}
main .col h2::after{content:"";position:absolute;top:calc(.61em - 5px);left:calc(var(--tubo) - var(--pl) - 4px);width:10px;height:10px;border-radius:50%;background:var(--fondo);border:2px solid var(--vinaccia)}

.apre{position:relative;padding-top:1.5rem}
.apre::before{content:"";position:absolute;z-index:-1;top:-5rem;bottom:-1rem;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--velo);border-top:2px solid var(--acciaio);transform:scaleY(0);transform-origin:bottom}
.occhiello{font:700 .8125rem/1.3 var(--mono);color:var(--tenue);letter-spacing:.04em;margin:0 0 .75rem}

.ugello{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.15rem;min-height:4.25rem;padding:.75rem 1.25rem;margin:1.5rem 0 0;background:var(--prugna);color:var(--bianco);text-decoration:none;border-radius:4px}
.ugello:hover{outline:2px solid var(--vinaccia);outline-offset:3px}
.ugello-l{font:700 1rem/1.3 var(--sans)}
.ugello-n{font:700 1.5rem/1.15 var(--mono);letter-spacing:.01em}
.ugello-b{background:var(--bianco);color:var(--vinaccia);margin-top:2rem}
.ugello-b:hover{outline-color:var(--bianco)}

.inq{margin-top:1.5rem}
.inq img{display:block;width:100%;height:auto;border-radius:2px;background:var(--velo)}

.imbarazzo p{font-size:1.25rem;line-height:1.55;color:var(--vinaccia);padding-top:1.25rem;border-top:1px solid var(--filetto)}

ul.fatti{list-style:none;padding:0;margin-top:1rem;border-top:1px solid var(--filetto)}
ul.fatti li{position:relative;padding:.6rem 0 .6rem 1.9rem;border-bottom:1px solid var(--filetto)}
ul.fatti li::before{content:"";position:absolute;left:.15rem;top:1.05rem;width:.8rem;height:.8rem;border-radius:50%;border:2px solid var(--vinaccia)}
.escl{position:relative;margin-top:1.5rem;padding:1.9rem 1.25rem 1.25rem;background:var(--chiaro);border:1px solid var(--vinaccia);border-radius:2px}
.escl::before{content:"";position:absolute;top:0;left:0;right:0;height:.65rem;border-bottom:1px solid var(--vinaccia);background:repeating-linear-gradient(135deg,var(--vinaccia) 0 1.5px,transparent 1.5px 7px)}
.escl p.voce{border-top:0;padding-top:0}
.escl ul.elenco li::before{background:var(--vinaccia)}

ol.sintomi{list-style:none;padding:0;margin-top:1rem;border-top:2px solid var(--vinaccia)}
ol.sintomi li{position:relative;display:grid;grid-template-columns:2.4rem minmax(0,1fr);align-items:baseline;min-height:3.5rem;padding:.85rem 0;border-bottom:1px solid var(--filetto)}
ol.sintomi li:hover{background:linear-gradient(90deg,var(--chiaro),transparent)}
ol.sintomi .n{font:700 .8125rem/1 var(--mono);color:var(--vinaccia)}
ol.sintomi a{font-weight:700;text-decoration-color:var(--acciaio)}
ol.sintomi a::before{content:"";position:absolute;inset:0}
ol.sintomi a::after{content:"→";display:inline-block;margin-left:.45em;font-family:var(--mono)}
ol.sintomi .nota{display:block;font-size:1rem;color:var(--tenue)}

p.passo{display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:0 .5rem;margin-top:1.4rem}
p.passo .n{font:700 1.75rem/1.1 var(--mono);color:var(--vinaccia)}
p.voce{padding-top:1rem;border-top:1px solid var(--filetto);margin-top:1.1rem}

ul.elenco{list-style:none;padding:0;margin-top:1rem}
ul.elenco li{position:relative;padding-left:1.4rem;margin-top:.55rem}
ul.elenco li::before{content:"";position:absolute;left:.1rem;top:.62em;width:.5rem;height:.5rem;background:var(--acciaio)}
ol.numeri{list-style:none;padding:0;margin-top:1rem;counter-reset:n}
ol.numeri li{counter-increment:n;position:relative;padding-left:2.6rem;margin-top:.9rem}
ol.numeri li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.18em;font:700 .875rem/1.4 var(--mono);color:var(--vinaccia)}

.fascia{position:relative;z-index:1;margin-top:3.5rem;padding:3rem 0;background:var(--vinaccia);color:var(--bianco)}
.fascia h2{color:var(--bianco)}
main .fascia h2::before,main .fascia h2::after{display:none}
.fascia a{color:var(--bianco)}
.fascia .ugello-b{color:var(--vinaccia)}
.fascia :focus-visible{outline-color:var(--bianco)}
ol.passi{list-style:none;padding:0;margin-top:1.75rem;counter-reset:p;position:relative}
ol.passi::before{content:"";position:absolute;left:calc(1.05rem - 1px);top:1rem;bottom:1.5rem;width:2px;background:var(--acciaio)}
ol.passi li{counter-increment:p;position:relative;padding:0 0 1.35rem 3.1rem}
ol.passi li::before{content:counter(p,decimal-leading-zero);position:absolute;left:0;top:0;width:2.1rem;height:2.1rem;display:grid;place-items:center;border:2px solid var(--bianco);border-radius:50%;background:var(--vinaccia);font:700 .75rem/1 var(--mono)}

ul.quartieri{list-style:none;padding:0;margin-top:.75rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem;border-top:1px solid var(--filetto)}
ul.quartieri li{padding:.5rem 0;border-bottom:1px solid var(--filetto);font-size:1rem}
.numero-grande{font:700 2.5rem/1.1 var(--mono);color:var(--vinaccia);letter-spacing:-.02em;margin-top:.5rem}
.avviso{display:inline-grid;place-items:center;width:1.25em;height:1.25em;margin-right:.1em;background:var(--vinaccia);color:var(--bianco);font:700 .8em/1 var(--mono);border-radius:2px;vertical-align:.08em}
h2 .avviso{font-size:.75em}

.tab{margin-top:1rem;overflow-x:auto;border-top:2px solid var(--vinaccia)}
.tab table{border-collapse:collapse;width:100%;font-size:.9375rem;line-height:1.5}
.tab th,.tab td{text-align:left;vertical-align:top;padding:.65rem .9rem .65rem 0;border-bottom:1px solid var(--filetto)}
.tab th{font:700 .8125rem/1.3 var(--mono);color:var(--vinaccia);letter-spacing:.02em}
.tab td:first-child{font-weight:700}
section h2+h3{margin-top:.5rem}
nav.altri{margin-top:3.5rem;padding-top:1.5rem;border-top:2px solid var(--vinaccia);font-size:1rem}
nav.altri p{margin-top:.75rem}
nav.altri p:first-child{margin-top:0}

.piede{position:relative;z-index:1;margin-top:4rem;padding:3rem 0 2.5rem;background:var(--vinaccia);color:var(--bianco);font-size:1rem}
.piede a{color:var(--bianco)}
.piede :focus-visible{outline-color:var(--bianco)}
.piede .marchio{color:var(--bianco);margin-bottom:1rem}
.piede .tombino{box-shadow:inset 0 0 0 1.5px var(--vinaccia)}
.piede p+p{margin-top:.9rem}
.pd-tel{display:inline-flex;align-items:center;min-height:48px;font:700 1.5rem/1 var(--mono);letter-spacing:.01em}
.pd-link{list-style:none;padding:0;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--acciaio);display:flex;flex-wrap:wrap;gap:0 1.5rem}
.pd-link a{display:inline-flex;align-items:center;min-height:48px}

.fisso{position:fixed;left:0;right:0;bottom:0;translate:0 calc(-1 * var(--altezza-consenso,0px));z-index:50}
.barra{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem;padding:.5rem var(--pr) calc(.5rem + env(safe-area-inset-bottom));background:var(--prugna);color:var(--bianco);text-decoration:none;border-top:1px solid var(--bianco)}
.barra-l{font:700 1rem/1.3 var(--sans)}
.barra-n{font:700 1.3rem/1 var(--mono)}
html.js .barra{display:none}
html.js.barra-su .barra{display:flex}

@media (max-width:33.99rem){
.tab{border-top:2px solid var(--vinaccia)}
.tab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tab tr{display:block;padding:.7rem 0;border-bottom:1px solid var(--filetto)}
.tab td{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:.75rem;padding:.15rem 0;border:0}
.tab td::before{content:attr(data-l);font:700 .75rem/1.6 var(--mono);color:var(--tenue)}
.tab td:first-child{display:block;padding-bottom:.35rem;color:var(--vinaccia)}
.tab td:first-child::before{display:none}
}
@media (min-width:48rem){
body{font-size:1.1875rem;padding-bottom:0}
:root{--pl:3.25rem;--pr:2rem;--tubo:1rem}
h1{font-size:2.5rem}
h2{font-size:1.55rem}
.apre{padding-top:3rem}
.ugello{display:inline-flex;min-width:21rem}
.numero-grande{font-size:3.5rem}
ul.quartieri{grid-template-columns:repeat(3,minmax(0,1fr))}
.barra,html.js.barra-su .barra{display:none}
}
@media (prefers-reduced-motion:no-preference){
.apre::before{animation:scende 1.9s cubic-bezier(.55,0,.2,1) .35s both}
@supports (animation-timeline:scroll()){main::after{animation:flusso linear both;animation-timeline:scroll(root)}}
ol.sintomi a::after{transition:transform .2s ease-out}
ol.sintomi li:hover a::after{transform:translateX(.35em)}
html.js.barra-su .barra{animation:entra .22s ease-out}
}
@keyframes scende{from{transform:scaleY(1)}to{transform:scaleY(0)}}
@keyframes flusso{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes entra{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* barra fissa di chiamata, 04/10/2026: impaginazione dell'idraulico, colori e carattere dello spurgo */
.barra{justify-content:center;min-height:0;padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom));background:var(--fondo);border-top:1px solid var(--filetto)}
.barra-tasto{display:flex;align-items:center;justify-content:center;gap:.9rem;width:100%;max-width:38rem;min-height:4.5rem;margin:0 auto 4px;padding:.6rem 1.6rem .6rem .6rem;background:var(--prugna);color:var(--bianco);border-radius:4px;box-shadow:0 4px 0 var(--vinaccia)}
.barra:active .barra-tasto{transform:translateY(4px);box-shadow:none}
.barra-disco{flex:none;display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:4px;background:var(--bianco);color:var(--prugna)}
.barra-disco svg{width:1.6rem;height:1.6rem}
.barra-testi{display:grid;gap:.3rem;justify-items:center;text-align:center}
.barra-numero{font:700 1.8rem/1 var(--mono);letter-spacing:0;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:47.99rem){body{padding-bottom:6.5rem}}
.barra-stato{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.08em;line-height:1.2;text-transform:uppercase;white-space:nowrap}
.barra-punto{flex:none;width:.55rem;height:.55rem;border-radius:50%;background:#25D366;animation:online 2s ease-out infinite}
@media (prefers-reduced-motion:reduce){.barra-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: schede grigio chiaro con il filo prugna, quadratino prugna come il pulsante del telefono */
.domande h2{margin-bottom:1.2rem}
.domande details{margin:0 0 .6rem;background:var(--chiaro);border:1px solid var(--filetto);border-left:4px solid var(--prugna);border-radius:4px}
.domande details[open]{background:var(--bianco);border-color:var(--prugna);box-shadow:0 4px 0 var(--vinaccia)}
.domande summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1rem .85rem 1.05rem;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.domande summary::-webkit-details-marker{display:none}
.domande summary h3{margin:0;font:700 1.02rem/1.35 var(--sans);color:var(--vinaccia)}
.domande summary::after{content:"";flex:none;width:2rem;height:2rem;border-radius:4px;background:linear-gradient(var(--bianco),var(--bianco)) center/.85rem 3px no-repeat,linear-gradient(var(--bianco),var(--bianco)) center/3px .85rem no-repeat,var(--prugna)}
.domande details[open] summary::after{background:linear-gradient(var(--bianco),var(--bianco)) center/.85rem 3px no-repeat,var(--vinaccia)}
.domande summary:hover h3{color:var(--prugna);text-decoration:underline;text-underline-offset:3px}
.domande details p{margin:0;padding:0 1.05rem 1.05rem;color:var(--testo)}
.domande summary:focus-visible{outline:2px solid var(--prugna);outline-offset:2px}