/* HOME VERSIONE M, TUTTE LE MISURE (computer pubblicato il 15/10/2026 alle 15:22, telefono la sera: «mi piace, pubblica
   il mobile»). Nasce dal prototipo proto-foto-nuove/aggiunte_m.py (fuori dal repo), dove ci sono anche le prove scartate:
   i commenti «PROTOTIPO» qui sotto vengono da li'. Contiene anche Inter al peso 800 (vale per tutta la v3: font.css
   dichiarava solo 300-700 e i titoli a 800 si vedevano a 700). */
/* foto tonde di «Come funziona»: stesso filtro e velo blu-viola delle tre foto */
.hcf img{filter:brightness(.78) contrast(.9) saturate(.9) !important}
.hcf-img picture{position:relative}
.hcf-img picture::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(98,173,255,.22), rgba(112,98,255,.30)); mix-blend-mode:hard-light; opacity:.5; pointer-events:none}
.pm-zero-st{font-style:normal; color:#FF8F4A; letter-spacing:1px}
/* PROTOTIPO M: aggiunte sotto i testi delle tre foto */
.pm-loghi, .pm-goccia, .pm-rec{font-style:normal; letter-spacing:0}
/* 1. loghi che scorrono */
.pm-loghi{margin:18px 0 0; overflow:hidden; cursor:pointer;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)}
.pm-loghi-riga{overflow:hidden; padding:6px 0}
.pm-loghi-track{display:flex; align-items:center; gap:26px; width:max-content; animation:phLoghi 70s linear infinite}
.pm-loghi-riga.rev .pm-loghi-track{animation-direction:reverse; animation-duration:82s}
.pm-loghi-riga:nth-child(3) .pm-loghi-track{animation-duration:76s}
/* «.ph-foto img» del sito (foto a tutta cella, filtro scuro, al computer position:absolute) prende anche i loghi: qui vince */
html[data-prova-home] .ph-foto .pm-loghi-track img{position:static !important; inset:auto !important; display:block !important;
  height:16px !important; width:auto !important; max-width:68px !important; object-fit:contain !important; flex:none; opacity:.55;
  filter:grayscale(1) invert(1) brightness(1.45) contrast(1.1) !important; mix-blend-mode:screen}
/* 2. la Goccia: niente riquadro (sembrava una cosa da toccare), niente azzurro: il violetto opaco di «Aggiungi»
   delle acque (rgba(112,98,255,.34) + bordo .85). Testi come il sottotitolo della foto (Marco, 14/10) */
.pm-goccia{display:flex; align-items:center; gap:14px; margin:20px 0 0}
.pm-goccia-svg{width:44px; height:auto; flex:none; display:block}
.pm-g1 .pm-goccia-svg{width:30px}
.pm-goccia-tx{min-width:0}
.pm-goccia-t{display:block; font:700 15px/1.25 var(--font); color:#DCE4F0}
.pm-goccia-s{margin:4px 0 0; font:500 14px/1.4 var(--font); color:rgba(220,228,240,.64)}
.pm-casse{display:flex; align-items:center; gap:8px; margin-top:9px}
.pm-casse small{font:500 12.5px var(--font); color:rgba(220,228,240,.55)}
.pm-mini{display:inline-flex; font-style:normal}
.pm-mini-box{display:inline-grid; grid-auto-flow:column; grid-template-rows:auto auto; gap:2px; padding:2px; border-radius:4px;
  border:1px solid rgba(220,228,240,.14); font-style:normal}
.pm-mini-box i{display:block; width:11px; height:13px; border-radius:3px; border:1.5px solid rgba(220,228,240,.82); box-sizing:border-box}   /* bianche, non piu' viola (Marco, 15/10 sera) */
.pm-mini-box i.piena{background:rgba(220,228,240,.55)}
.pm-mini-box i.mezza{background:linear-gradient(to top, rgba(220,228,240,.55) 50%, transparent 50%)}
.pm-mini-box i.vuota{border-color:rgba(220,228,240,.38)}
/* 3 · etichetta: in colonna, la gocciolina accanto al nome in maiuscoletto come COMODO / AFFIDABILE */
.pm-g3{display:block}
.pm-g3-tag{display:flex; align-items:center; gap:8px; font:700 11.5px/1 var(--font); letter-spacing:.16em; text-transform:uppercase; color:rgba(220,228,240,.72)}
.pm-g3-ic{width:12px; height:auto; flex:none; display:block}
.pm-g3 .pm-goccia-s{margin-top:8px}
/* K · Fontilio Kerl: niente goccia, il nome in un carattere tech (il font e la misura arrivano nello style della riga) */
.pm-kerl{display:block}
.pm-kerl-t{display:block; line-height:1.2; color:#DCE4F0}
.pm-kerl .pm-goccia-s{margin-top:6px}
.pm-kerl .pm-kerl-s{margin-top:0}
.pm-kerl-s b{font-weight:600; color:#DCE4F0}
.pm-kerl .pm-casse small{font-size:13.5px; color:rgba(220,228,240,.72)}
/* 3. la recensione: stesso carattere e colore del sottotitolo della foto, niente corsivo ne' grassetto */
.pm-rec{margin:20px 0 0}
.pm-stelle{font:400 13px/1 var(--font); letter-spacing:3px; color:#FF8F4A}
.pm-rec-t{margin:9px 0 0; font:300 13px/1.5 var(--font); color:rgba(220,228,240,.72)}   /* -2 px (Marco, 14/10 sera) */   /* piu' sottile (Marco, 14/10); Inter in casa e' variabile 100-900 */
.pm-rec-chi{margin:8px 0 0; font:400 13px/1.3 var(--font); color:rgba(220,228,240,.5)}
.pm-rec-chi b{font-weight:500; color:rgba(220,228,240,.64)}
/* come «Leggi le recensioni» del blocco recensioni in fondo (.hp-rev-link) */
.pm-rec-link{display:inline-block; border:0; background:none; cursor:pointer; padding:8px 12px; margin:6px -12px -8px;
  font:700 12.5px var(--font); color:rgba(220,228,240,.70)}
.pm-rec-link:hover{color:#DCE4F0}
/* «Inizia» sotto le tre foto: niente bicchiere, «Nessun addebito» piccolo sotto */
html[data-prova-home] .ph-tre-cta{flex-direction:column; align-items:center}
html[data-prova-home] .ph-tre-cta .cta-bicchiere{display:none !important}
html:not([data-theme="light"])[data-prova-home] .ph-tre-cta .v3h-go{box-shadow:0 0 44px rgba(98,173,255,.36) !important}
.pm-cta-nota{display:flex; align-items:center; gap:6px; margin:12px 0 0; font:500 13px/1 var(--font); color:rgba(220,228,240,.6)}
.pm-cta-nota svg{flex:none}
.pm-lab-tel{display:none}   /* dal 14/10 notte i testi nuovi valgono anche al telefono */
.pm-rev-h{display:none !important}  /* titolo «Recensioni» sopra il riquadro: solo computer, vedi sotto */
.pm-final-sotto{display:none !important}  /* «Inizia ora.» sotto «La tua acqua, a casa tua.»: solo computer, vedi sotto */
.pm-hcf-logo{display:none !important}  /* logo sopra «Come funziona»: solo computer, vedi sotto (le img di .hcf sono block) */
.pm-h1-bicchiere{display:none}
@media (min-width:1024px){
  .pm-h1-bicchiere{display:inline-block; width:.6em; height:.6em; margin-left:.04em; vertical-align:.16em;   /* in apice; poi +20% (.5 -> .6em) e un filo piu' in basso (Marco, 14/10 sera) */
    color:inherit; opacity:.28; transform:rotate(12deg); transform-origin:50% 80%}   /* piu' opaco («ha troppa visibilita'») e di nuovo ruotato a destra (Marco, 14/10 sera: «rimettila ruotata adesso») */
}
@media (min-width:1024px){
  /* via le 3 righe di marchi in fondo alla pagina, sotto le recensioni: ora stanno sotto «Comodo» (Marco, 14/10 sera,
     guardando il computer: il telefono resta com'e') */
  html[data-prova-home] .v3h > .ph-loghi{display:none !important}
  /* domande frequenti meno visibili a una prima occhiata: niente schede, solo una righina sotto ogni domanda, niente
     icona, testo piu' chiaro e leggero (Marco, 14/10 sera, guardando il computer) */
  html:not([data-theme="light"])[data-prova-home] .v3h > .hcf-faq-h{font:700 20px/1.2 var(--font) !important; color:rgba(220,228,240,.72) !important; text-align:center !important}
  html:not([data-theme="light"])[data-prova-home] .v3h > .hp-cards{gap:0 !important}
  html:not([data-theme="light"])[data-prova-home] .hp-card, html:not([data-theme="light"])[data-prova-home] .hp-card.open{
    border:0 !important; border-bottom:1px solid rgba(220,228,240,.12) !important; border-radius:0 !important;
    background:none !important; box-shadow:none !important}
  html:not([data-theme="light"])[data-prova-home] .hp-card:first-child{border-top:1px solid rgba(220,228,240,.12) !important}
  html:not([data-theme="light"])[data-prova-home] .hp-q{padding:16px 0 !important}
  html:not([data-theme="light"])[data-prova-home] .hp-q .hp-ic{display:none !important}
  html:not([data-theme="light"])[data-prova-home] .hp-qt{font:500 16px/1.3 var(--font) !important; color:rgba(220,228,240,.72) !important}
  html:not([data-theme="light"])[data-prova-home] .hp-card.open .hp-qt{color:#DCE4F0 !important}
  html:not([data-theme="light"])[data-prova-home] .hp-chev{width:16px; height:16px; color:rgba(220,228,240,.45) !important}
  html:not([data-theme="light"])[data-prova-home] .hp-in{padding:0 0 22px !important}
  /* «Inizia» del blocco finale «La tua acqua, a casa tua.»: anche qui niente bicchiere e la luce azzurra dietro,
     come sotto le tre foto (Marco, 14/10 sera, guardando il computer) */
  html[data-prova-home] .v3h-final-cta .cta-bicchiere{display:none !important}
  html:not([data-theme="light"])[data-prova-home] .v3h-final-cta{box-shadow:0 0 44px rgba(98,173,255,.36) !important}
  /* blocco finale in 3 gruppi ben separati: logo piu' piccolo / titolo / pulsante con la riga sotto attaccata
     (logo 30 -> 22 px, sotto 12 -> 34 px; pulsante 22 -> 44 px dal titolo; riga sotto 14 -> 10 px dal pulsante) */
  /* la foto del blocco finale piu' alta, prende piu' schermo (Marco, 14/10 sera): sopra e sotto 96/88 px -> ~22% dello
     schermo (198 px a 900 di altezza), il blocco passa da ~430 a ~640 px */
  html[data-prova-home] .v3h > .v3h-final{padding-top:clamp(150px, 22vh, 240px) !important; padding-bottom:clamp(150px, 22vh, 240px) !important}
  html[data-prova-home] .v3h-final-logo{height:22px !important; width:auto !important; margin:0 auto 34px !important}
  /* (il blocco finale era stato allineato a sinistra, poi «rimetti al centro come prima ma lascia la foto senza
     bottiglia»: Marco, 14/10 sera. Torna centrato; resta la riga «Attivi in piu' di 150 citta'» piu' spenta) */
  html[data-prova-home] .v3h-final .v3h-final-citta{opacity:.6}
  html[data-prova-home] .v3h-final-cta{margin-top:44px !important}
  html[data-prova-home] .v3h-final-citta{margin-top:10px !important}
  /* i tre «Inizia» (riquadro in cima, sotto le tre foto, blocco finale): niente bicchiere neanche in cima; passandoci
     sopra il viola del marchio #7062FF scorre da sinistra e copre il celeste, scritta e freccia diventano bianche
     (Marco, 14/10 sera) */
  /* (il bicchiere dentro «Inizia» in cima e' tornato: Marco, 14/10 sera, «rimetti bicchiere dentro cta principale hero») */
  /* lo stato fermo NON dipende da data-prova-home: v3-app.js mette l'attributo dopo il primo disegno e, se il gradiente
     arrivava solo allora, la transizione partiva da sola (il pulsante sembrava viola per un attimo al caricamento) */
  /* solo tema scuro: col chiaro restano il viola scuro del sito #4A3FB0 e la scritta bianca (Marco, 15/10 sera: «la cta sulla
     home bianca doveva essere viola», «viola scuro del tema bianco») */
  html:not([data-theme="light"]) .v3h .v3h-go, html:not([data-theme="light"]) .v3h-final-cta{
    background-color:#78D5DF !important;
    background-image:linear-gradient(90deg, #7062FF 0 50%, #78D5DF 50% 100%) !important;
    background-size:201% 100% !important; background-position:100% 0 !important;
    transition:background-position .45s cubic-bezier(.4,0,.2,1), color .3s ease, border-color .3s ease, box-shadow .3s ease !important}
  html:not([data-theme="light"])[data-prova-home] .v3h .v3h-go:hover, html:not([data-theme="light"])[data-prova-home] .v3h-final-cta:hover,
  html:not([data-theme="light"])[data-prova-home] .v3h .v3h-go:focus-visible, html:not([data-theme="light"])[data-prova-home] .v3h-final-cta:focus-visible{
    background-position:0 0 !important; color:#FFFFFF !important; border-color:#7062FF !important;
    box-shadow:0 0 44px rgba(112,98,255,.45) !important}
  /* solo i tratti (freccia, contorno del bicchiere): l'acqua del bicchiere non ha contorno e non deve prenderlo */
  html[data-prova-home] .v3h .v3h-go:hover svg path[stroke], html[data-prova-home] .v3h-final-cta:hover svg path[stroke],
  html[data-prova-home] .v3h .v3h-go:focus-visible svg path[stroke], html[data-prova-home] .v3h-final-cta:focus-visible svg path[stroke]{stroke:#FFFFFF !important; transition:stroke .3s ease}
  /* footer: il logo resta in alto (all'altezza del riquadro «Assistenza clienti»), solo il testo scende alla base del
     riquadro (Marco, 14/10 sera: «il logo lascialo allineato in alto, solo il testo dovevi spostare sotto») */
  html[data-prova-home] .ft-alto{align-self:stretch !important; justify-content:flex-start !important; max-width:none !important}   /* logo e testo attaccati in alto; colonna larga per la riga dei distributori (il testo resta a 42ch) */
  /* blocco recensioni in fondo dentro un riquadro con solo un bordino intorno, come al telefono (Marco, 14/10 sera) */
  html[data-prova-home] .v3h > .hp-rev{border:1px solid rgba(255,255,255,.12) !important; border-radius:20px !important;
    background:transparent !important; padding:28px 36px 24px !important; width:min(600px, 100%) !important; box-sizing:border-box}
  /* (spunte di «Comodo · Affidabile · Esclusivo»: il viola e' stato tolto, tornano al bianco opaco del sito — Marco, 14/10 notte) */
  /* «Per chi è»: la riga del welfare aziendale / preventivo business piu' spenta (Marco, 14/10 sera) */
  html[data-prova-home] .pm-faq-business{opacity:.55}
  /* striscia dei marchi: si clicca tutta insieme, nessun marchio si accende da solo */
  html[data-prova-home] .v3h-brands{cursor:pointer}
  html[data-prova-home] .v3h-brand-item{pointer-events:none !important; transform:none !important}
  /* passandoci sopra tutta la striscia si schiarisce appena (un solo effetto, per tutta la riga) */
  html[data-prova-home] .v3h-brands .v3h-brand-track{transition:opacity .2s ease}
  html[data-prova-home] .v3h-brands:hover .v3h-brand-track{opacity:.8}
  /* testo sotto il logo nel footer: 13 -> 11 px (Marco, 14/10 sera, guardando il computer) */
  html[data-prova-home] .ft-claim{font-size:11px !important; line-height:1.6 !important}
  .pm-loghi, .pm-goccia, .pm-rec{margin-top:22px; max-width:420px}
  html[data-prova-home] .ph-foto .pm-loghi-track img{height:18px !important; max-width:76px !important}
  .pm-goccia-t{font-size:16px} .pm-goccia-s{font-size:15px}
  .pm-rec-t{font-size:14px}
  /* Domande frequenti sotto il secondo blocco delle recensioni, subito prima del footer, e niente pulsante sotto la
     terza foto (Marco, 15/10, guardando il computer: il telefono resta com'e'; il pulsante al telefono non c'era gia') */
  .v3h > .hcf-faq-h, .v3h > .hp-cards{order:1}
  .v3h > .hp-cards{margin-bottom:36px}   /* aria tra l'ultima domanda e la riga del footer */
  .v3h > .ph-loghi, .v3h > .ft, .v3h > .hp-bar{order:2}
  html[data-prova-home] .ph-tre-cta{display:none !important}
  /* tra la terza foto e «Rilassati» lo stesso spazio che c'e' tra una foto e l'altra (56 px, il margine sotto la
     foto): prima 56 + 104 = 160 (Marco, 15/10, «equilibra spazi tra le foto e il blocco rilassati») */
  .v3h > .hcf{margin-top:0 !important}
  /* «Come funziona»: le frasi piccole sotto i tre passi («Scegli le tue acque e quando riceverle.») piu' sottili,
     500 -> 300 (Marco, 15/10, computer: «fallo piu' thin») */
  html[data-prova-home] .hcf-d{font-weight:300 !important}
  /* blocco finale: sottotitolo «Inizia ora.» sotto il titolo (Marco, 15/10, computer), con lo stile di .v3h-final-p */
  .v3h-final .pm-final-sotto{display:block !important; margin-top:12px !important}
  /* «Come funziona» diventa il titolo grande e via «Rilassati, c'e' Fontilio.» (Marco, 15/10, computer): l'etichetta
     prende la misura del titolo (800 40/44, -0.8, 44 px sotto), il titolo si nasconde */
  .hcf .hcf-h{display:none !important}
  .hcf .hcf-eb{font:800 40px/44px var(--font) !important; letter-spacing:-.8px !important; text-transform:none !important;
    color:#DCE4F0 !important; margin:0 0 44px !important}
  html[data-theme="light"] .hcf .hcf-eb{color:#16284A !important}
  /* titolo «Recensioni» sopra il riquadro delle recensioni, come «Domande frequenti» (Marco, 15/10, computer) */
  .v3h > .pm-rev-h{display:block !important; grid-column:1 / -1; margin:72px 0 22px; text-align:center;
    font:700 20px/1.2 var(--font); letter-spacing:-.3px; color:rgba(220,228,240,.72)}
  html[data-theme="light"] .v3h > .pm-rev-h{color:#16284A}
  .v3h > .pm-rev-h + .hp-rev{margin-top:0 !important}
  /* il secondo blocco («Affidabile») invertito, testo a sinistra e foto a destra, provato e TOLTO (Marco, 15/10:
     «rimettile dritte una sotto l'altra»): le tre foto restano tutte a sinistra */
  /* tre foto con i bordi sfumati nel fondo della pagina, sui quattro lati (Marco, 15/10, computer: «sfuma le foto sui
     bordi»): una maschera orizzontale e una verticale che si intersecano; gli angoli tondi non servono piu' */
  html[data-prova-home] .ph-tre .ph-foto picture{border-radius:0 !important;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
    mask-composite:intersect}
  /* logo piccolo per firmare il blocco (Marco, 15/10, computer): in alto a DESTRA del riquadro, centrato sulla riga di
     «Come funziona» (riquadro con 56 px di margine interno, etichetta alta 13 px); bianco sul tema scuro, quello col
     testo blu sul chiaro. Prima stava sopra l'etichetta a sinistra: «mettilo allineato a destra» */
  html:not([data-theme="light"]) .hcf .pm-hcf-logo-scuro, html[data-theme="light"] .hcf .pm-hcf-logo-chiaro{display:block !important;
    position:absolute !important; top:52px !important; right:56px !important;
    height:20px !important; width:auto !important; max-width:none !important; margin:0 !important}
}

/* ===== TELEFONO (e tablet) allineato al computer (Marco, 14/10 notte: «allinea la versione mobile») ===== */
@media (max-width:1023px){
  /* niente righe di marchi in fondo: i marchi stanno gia' sotto «Pratico» */
  html[data-prova-home] .v3h > .ph-loghi{display:none !important}
  /* domande frequenti: solo una righina, niente schede ne' icone, testo piu' spento; titolo centrato */
  html:not([data-theme="light"])[data-prova-home] .v3h > .hcf-faq-h{font:700 20px/1.2 var(--font) !important; color:rgba(220,228,240,.72) !important; text-align:center !important}
  html:not([data-theme="light"])[data-prova-home] .v3h > .hp-cards{gap:0 !important}
  html:not([data-theme="light"])[data-prova-home] .hp-card, html:not([data-theme="light"])[data-prova-home] .hp-card.open{
    border:0 !important; border-bottom:1px solid rgba(220,228,240,.12) !important; border-radius:0 !important;
    background:none !important; box-shadow:none !important}
  html:not([data-theme="light"])[data-prova-home] .hp-card:first-child{border-top:1px solid rgba(220,228,240,.12) !important}
  html:not([data-theme="light"])[data-prova-home] .hp-q{padding:16px 0 !important}
  html:not([data-theme="light"])[data-prova-home] .hp-q .hp-ic{display:none !important}
  html:not([data-theme="light"])[data-prova-home] .hp-qt{font:500 16px/1.3 var(--font) !important; color:rgba(220,228,240,.72) !important}
  html:not([data-theme="light"])[data-prova-home] .hp-card.open .hp-qt{color:#DCE4F0 !important}
  html:not([data-theme="light"])[data-prova-home] .hp-chev{width:16px; height:16px; color:rgba(220,228,240,.45) !important}
  html:not([data-theme="light"])[data-prova-home] .hp-in{padding:0 0 22px !important}
  /* blocco finale: foto piu' alta, logo piu' piccolo, tre gruppi separati, pulsante senza bicchiere con la luce
     azzurra, riga sotto piu' spenta */
  html[data-prova-home] .v3h > .v3h-final{padding-top:110px !important; padding-bottom:96px !important}
  html[data-prova-home] .v3h-final-logo{height:22px !important; width:auto !important; margin:0 auto 26px !important}
  html[data-prova-home] .v3h-final-cta{margin-top:32px !important}
  html[data-prova-home] .v3h-final-cta .cta-bicchiere{display:none !important}
  html:not([data-theme="light"])[data-prova-home] .v3h-final-cta{box-shadow:0 0 44px rgba(98,173,255,.36) !important}
  html[data-prova-home] .v3h-final .v3h-final-citta{margin-top:10px !important; opacity:.6}
  /* (spunte: di nuovo bianco opaco del sito, niente viola — Marco, 14/10 notte) */
  /* piu' spazio tra le tre foto di «Comodo e di classe» al telefono: 34 -> 64 px (Marco, 14/10 notte) */
  html[data-prova-home] .ph-tre .ph-foto{margin-bottom:64px !important}
  /* «Per chi è»: riga del welfare aziendale piu' spenta */
  html[data-prova-home] .pm-faq-business{opacity:.55}
  /* striscia dei marchi: si tocca tutta insieme */
  html[data-prova-home] .v3h-brands{cursor:pointer}
  html[data-prova-home] .v3h-brand-item{pointer-events:none !important; transform:none !important}
  /* testo sotto il logo nel footer: 13 -> 11 px */
  html[data-prova-home] .ft-claim{font-size:11px !important; line-height:1.6 !important}
}
/* PROTOTIPO M: rete partner nel footer, computer e telefono (dal 14/10 notte) */
.pm-rete, .pm-rete-ov{display:none}
@media (max-width:767px){
  .pm-rete-ov:not([hidden]){padding:16px !important}
  .pm-rete-mod{padding:28px 22px 24px !important; max-height:calc(100vh - 32px) !important}
  .pm-rete-mh{font-size:23px !important}
}
@media all{
  /* nella colonna del logo, sotto il testo: scende alla base del riquadro «Assistenza clienti» (margin-top:auto) */
  html[data-prova-home] .ft-alto > .pm-rete{display:block; margin-top:auto; padding-top:20px}
  .pm-rete-tit{display:block; margin:0 0 6px; font:700 9px/1 var(--font); letter-spacing:.1em; text-transform:uppercase; color:rgba(220,228,240,.72)}   /* 11 -> 7 -> 9 px; violetto e poi di nuovo bianca come «ASSISTENZA CLIENTI» (Marco, 14/10 sera) */
  .pm-rete-q{margin:0; max-width:64ch; font:500 12px/1.5 var(--font); color:rgba(220,228,240,.55)}
  .pm-rete-q b{font-weight:inherit; color:inherit}   /* niente grassetto su «Entra nella rete Fontilio» (Marco, 14/10 sera) */
  .pm-rete-link{display:inline-block; appearance:none; border:0; background:none; cursor:pointer; padding:8px 12px; margin:-4px -12px -8px;
    font:700 12.5px/1.4 var(--font); color:rgba(220,228,240,.78)}
  .pm-rete-link:hover, .pm-rete-link:focus-visible{color:#DCE4F0; text-decoration:underline; text-underline-offset:3px}
  .pm-rete-eb{margin:0 0 6px; font:700 12px/1 var(--font); letter-spacing:.18em; text-transform:uppercase; color:rgba(220,228,240,.6)}
  html.pm-rete-aperto{overflow:hidden}
  .pm-rete-ov:not([hidden]){display:flex; position:fixed; inset:0; z-index:1000; align-items:center; justify-content:center; padding:24px;
    background:rgba(5,8,18,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
  .pm-rete-mod{position:relative; width:min(520px, 100%); max-height:calc(100vh - 48px); overflow:auto; padding:32px 32px 28px; border-radius:20px;
    background:#0A0C14; border:1px solid rgba(220,228,240,.5); box-shadow:0 0 44px rgba(98,173,255,.36)}
  .pm-rete-x{position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; border:0; cursor:pointer;
    background:rgba(255,255,255,.06); color:#DCE4F0; font:400 24px/36px var(--font)}
  .pm-rete-mh{margin:0; font:800 26px/1.2 var(--font); letter-spacing:-.01em; color:#DCE4F0}
  .pm-rete-intro{margin:8px 0 0; font:500 15px/1.45 var(--font); color:rgba(220,228,240,.64)}
  .pm-rete-sez{margin:24px 0 10px; font:700 12px/1 var(--font); letter-spacing:.18em; text-transform:uppercase; color:rgba(220,228,240,.6)}
  .pm-rete-vant, .pm-rete-req{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
  .pm-rete-vant li, .pm-rete-req li{display:flex; align-items:flex-start; gap:10px}
  .pm-rete-vant svg, .pm-rete-req svg{flex:none; margin-top:2px; color:#A99FFF}
  .pm-rete-vant b{display:block; font:700 15px/1.3 var(--font); color:#DCE4F0}
  .pm-rete-vant p{margin:2px 0 0; font:400 14px/1.4 var(--font); color:rgba(220,228,240,.64)}
  .pm-req-t{font:500 15px/1.35 var(--font); color:#DCE4F0}
  .pm-rete-cta{display:flex; align-items:center; justify-content:center; margin-top:26px; padding:15px 18px; border-radius:14px; text-decoration:none;
    font:800 16px var(--font); color:#0B1020; background:#78D5DF; border:1px solid rgba(255,255,255,.30)}
  .pm-rete-cta:hover, .pm-rete-cta:focus-visible{background:#7062FF; color:#FFFFFF; border-color:#7062FF}
}
/* PROTOTIPO M: telefono allineato al computer pubblicato (15/10) */
@media (max-width:1023px){
  /* «Come funziona» e' il titolo grande, via «Rilassati, c'e' Fontilio.»: l'etichetta prende la misura del titolo del
     telefono (800 28px, -0.42, 26 px sotto) */
  .hcf .hcf-h{display:none !important}
  .hcf .hcf-eb{font:800 28px/1.12 var(--font) !important; letter-spacing:-.42px !important; text-transform:none !important;
    color:#DCE4F0 !important; margin:0 0 26px !important}
  html[data-theme="light"] .hcf .hcf-eb{color:#16284A !important}
  /* frasi piccole sotto i tre passi piu' sottili (500 -> 300) */
  html[data-prova-home] .hcf-d{font-weight:300 !important}
  /* titolo «Recensioni» sopra il riquadro, come «Domande frequenti» */
  .v3h > .pm-rev-h{display:block !important; margin:24px 0 14px; text-align:center; font:700 20px/1.2 var(--font);   /* 56 -> 24: il blocco finale ha gia' 96 px sotto */
    letter-spacing:-.2px; color:rgba(220,228,240,.72)}
  html[data-theme="light"] .v3h > .pm-rev-h{color:#16284A}
  .v3h > .pm-rev-h + .hp-rev{margin-top:0 !important}
  /* domande frequenti DOPO le recensioni (lo spostamento lo fa lo script qui sotto: al telefono la pagina non e' una
     griglia e «order» non serve) */
  .v3h > .hp-rev + .hcf-faq-h{margin-top:64px !important}
  .v3h > .hp-cards{margin-bottom:36px !important}
  /* «Inizia ora.» sotto «La tua acqua, a casa tua.» */
  .v3h-final .pm-final-sotto{display:block !important; margin-top:10px !important}
  /* tre foto con i bordi sfumati nel fondo, sui quattro lati, come al computer */
  html[data-prova-home] .ph-tre .ph-foto picture{border-radius:0 !important;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
    mask-composite:intersect}
}
/* piu' aria fra gli elementi e le foto (Marco, 15/10: «spazia meglio gli elementi e le foto»). Il primo schermo ha poco
   margine (i marchi devono restare visibili, a 661 su ~700): +22 px in tutto */
@media (max-width:767px){
  html[data-prova-home] .v3h > .ph-bul{margin-top:16px !important}
  html[data-prova-home] .v3h > .v3h-rating{margin-top:18px !important}
  html[data-prova-home] .v3h > #v3hStart{margin-top:20px !important}
  html[data-prova-home] .v3h > .v3h-sec{margin-top:22px !important}
}
@media (max-width:1023px){
  html[data-prova-home] .ph-tre .ph-tre-h{margin-bottom:28px !important}
  html[data-prova-home] .ph-tre .ph-foto figcaption{margin-top:24px !important}
  html[data-prova-home] .ph-tre .ph-foto{margin-bottom:80px !important}
  html[data-prova-home] .v3h > .hcf{margin-top:16px !important}
  html[data-prova-home] .v3h > .v3h-final{margin-top:64px !important}
  /* «Come funziona»: piu' aria fra i tre passi (Ordina, Ricevi, Rilassati) e dentro ogni passo (Marco, 15/10 sera) */
  html[data-prova-home] .hcf .hcf-lista{gap:40px !important}
  html[data-prova-home] .hcf .hcf-p{column-gap:20px !important}
  html[data-prova-home] .hcf .hcf-s{margin-top:10px !important}
  html[data-prova-home] .hcf .hcf-d{margin-top:8px !important}
}
/* fondo del blocco finale: l'attico col bicchiere liscio come al computer, ritagliato in verticale (v3-app.js al telefono
   mette la sua foto verticale nell'img: qui la si sostituisce col CSS, solo nel prototipo) */
@media (max-width:767px){
  /* Marco, 15/10: «si deve vedere il bicchiere meglio, non la lampada»: foto verticale nativa in primo piano
     (genera_fondo_tel.py, PRIMO_PIANO), bicchiere grande dietro il titolo come nella foto verticale di oggi; il taglio e
     l'altezza del blocco restano quelli del sito (provato col bicchiere in basso: il sito scurisce il fondo e spariva) */
  /* (provate tel-1xx, 2xx, 3xx; Marco, 15/10 sera: «preferisco l'immagine che c'e' oggi online sul sito»: al telefono resta
     la foto del sito, acqua-a-domicilio-bicchiere-cristallo-tel.webp; niente sostituzione) */
  /* ...ma l'acqua della piscina da celeste ad AZZURRO: col celeste somigliava troppo al pulsante (Marco, 15/10 sera).
     Solo i colori fra 148 e 208 gradi spostati di +26 (a) o +34 (b, &piscina=b); il resto della foto identico */
}
/* PROTOTIPO M: ritocchi del 15/10 sera, telefono e computer */
/* Inter anche al peso 800 (Marco, 15/10 sera: «si mettilo nel prototipo»): font.css dichiara solo 300-700 e i titoli scritti a
   800 si vedevano a 700. Stesso file variabile (100-900): niente da scaricare in piu' */
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(/v3/assets/font/inter-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(/v3/assets/font/inter-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* (bicchierino del pulsante nel colore della scritta, senza bollicine: provato e poi «sul desktop rimetti bicchiere come
   prima» - Marco, 15/10 sera; al telefono e' nascosto) */
/* (puntina grigia provata e poi «rimetti icona viola del pallino»: Marco, 15/10 sera -> resta il viola del sito; la lineetta resta grigia) */
html:not([data-theme="light"]) #v3hStart .v3h-caret{background:rgba(220,228,240,.72) !important}
html[data-theme="light"] #v3hStart .v3h-caret{background:#434E60 !important}
html:not([data-theme="light"]) .v3h > #v3hStart{border:1px solid rgba(220,228,240,.5) !important; border-radius:24px !important;
  box-shadow:0 0 44px rgba(98,173,255,.36) !important; background:#0A0C14 !important}
/* «togli bicchiere» (Marco, 15/10 sera, guardando il telefono): via dal pulsante in cima SOLO al telefono; al computer resta
   (14/10: «rimetti bicchiere dentro cta principale hero») */
@media (max-width:1023px){ #v3hStart .v3h-go .cta-bicchiere{display:none !important} }
/* «Arriviamo da te?» e «Oltre 150 citta' servite» piu' piccole al telefono (Marco, 15/10 sera): 14 -> 12.5 e 12.5 -> 11 px */
@media (max-width:767px){ #v3hStart .v3h-start-lab{font-size:12.5px !important} #v3hStart .v3h-start-citta, #v3hStart .v3h-start-citta b{font-size:11px !important} }
/* bordo del riquadro in cima al telefono: tolto e poi «rimettila ma un pelo piu' opaca» (Marco, 15/10 sera): .5 -> .32 */
@media (max-width:1023px){ html:not([data-theme="light"]) .v3h > #v3hStart{border-color:rgba(220,228,240,.32) !important} }
/* logo in alto leggermente piu' piccolo, solo nella home (vista /ordina/indirizzo) e al telefono: 26 -> 23 px (Marco, 15/10 sera) */
@media (max-width:1023px){ html[data-vista="/ordina/indirizzo"] .topbar .brand img{height:23px !important} }
/* campo «Inserisci il tuo indirizzo» azzurrino come «Aggiungi», stessa opacita' di prima (fondo .10, bordo .18), cambia solo
   il colore: bianco -> #78D5DF (Marco, 15/10 sera, telefono) */
@media (max-width:1023px){ html:not([data-theme="light"]) #v3hStart .v3h-search{background:rgba(120,213,223,.10) !important;
  border-color:rgba(120,213,223,.18) !important} }
/* (provati al telefono scritta bianca e poi il colore di «Aggiungi»; Marco, 15/10 sera: «preferisco celeste originale
   con scritta scura»: i pulsanti restano quelli del sito) */
/* home M col tema chiaro: aggiunte leggibili */
html[data-theme="light"] .ph-foto .pm-loghi-track img{filter:grayscale(1) brightness(.35) contrast(1.1) !important; mix-blend-mode:multiply !important; opacity:.6 !important}
html[data-theme="light"] .pm-casse small{color:#434E60 !important}
html[data-theme="light"] .pm-mini-box{border-color:rgba(22,40,74,.18) !important}
html[data-theme="light"] .pm-mini-box i{border-color:rgba(22,40,74,.62) !important}
html[data-theme="light"] .pm-mini-box i.piena{background:rgba(22,40,74,.32) !important}
html[data-theme="light"] .pm-mini-box i.mezza{background:linear-gradient(to top, rgba(22,40,74,.32) 50%, transparent 50%) !important}
html[data-theme="light"] .pm-mini-box i.vuota{border-color:rgba(22,40,74,.28) !important}
html[data-theme="light"] .pm-rec-t{color:#434E60 !important}
html[data-theme="light"] .pm-rec-chi, html[data-theme="light"] .pm-rec-chi b{color:#434E60 !important}
html[data-theme="light"] .pm-rec-link{color:#16284A !important}
html[data-theme="light"] .pm-rete-tit{color:#434E60 !important}
html[data-theme="light"] .pm-rete-q{color:#434E60 !important}
html[data-theme="light"] .pm-rete-link{color:#16284A !important}