/* ==========================================================================
   Depuratoritalia — direzione «Acqua profonda» (docs/DIREZIONE-2.md)

   Mobile prima: le regole senza media query sono quelle del telefono.
   Movimento: lo stato di partenza nascosto esiste solo sotto html.anim, che
   lo script in testa mette solo se il sistema non chiede movimento ridotto e
   il visitatore non l'ha fermato. Senza anim la pagina è tutta visibile.
   ========================================================================== */

@font-face { font-family: 'Fraunces'; src: url('/caratteri/fraunces-latin.woff2') format('woff2'); font-weight: 600; font-display: swap;
  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; }
@font-face { font-family: 'Fraunces'; src: url('/caratteri/fraunces-latin-ext.woff2') format('woff2'); font-weight: 600; font-display: swap;
  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: 'Fraunces'; src: url('/caratteri/fraunces-corsivo-latin.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap;
  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; }
@font-face { font-family: 'Fraunces'; src: url('/caratteri/fraunces-corsivo-latin-ext.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap;
  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: 'Figtree'; src: url('/caratteri/figtree-latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap;
  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; }
@font-face { font-family: 'Figtree'; src: url('/caratteri/figtree-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-display: swap;
  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; }

/* Le riserve con le misure dei caratteri veri (larghezza media su una frase
   italiana, misurata con fontTools sui woff2 e su Georgia e Arial di Windows;
   se si cambiano i caratteri, i numeri vanno rifatti):
   finché Fraunces e Figtree non arrivano, Georgia e Arial occupano lo stesso
   spazio, e al cambio le righe non ricadono e l'eroe non salta (CLS). */
@font-face { font-family: 'Fraunces riserva'; src: local('Georgia Bold'), local('Georgia-Bold'); font-weight: 600; size-adjust: 93.06%; ascent-override: 105.1%; descent-override: 27.4%; line-gap-override: 0%; }
@font-face { font-family: 'Fraunces riserva'; src: local('Georgia Bold Italic'), local('Georgia-BoldItalic'); font-weight: 600; font-style: italic; size-adjust: 88.44%; ascent-override: 110.59%; descent-override: 28.83%; line-gap-override: 0%; }
@font-face { font-family: 'Figtree riserva'; src: local('Arial'), local('ArialMT'); font-weight: 400; size-adjust: 98.68%; ascent-override: 96.27%; descent-override: 25.33%; line-gap-override: 0%; }
@font-face { font-family: 'Figtree riserva'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 700; size-adjust: 98.68%; ascent-override: 96.27%; descent-override: 25.33%; line-gap-override: 0%; }

:root {
  /* Il fondo profondo e il blu del logo */
  --abisso: #031b33;
  --abisso-2: #052845;
  --notte: #03406c;
  --oceano: #075f92;           /* link e occhielli su chiaro: AA su bianco e nebbia */
  /* L'azione: un colore solo, mai usato altrove (effetto isolamento) */
  --vivo: #22c7b8;
  --vivo-chiaro: #8ef0e3;
  --vivo-scuro: #0f8f84;       /* solo testo grande e segni: 3,98:1 su bianco */
  --vivo-testo: #0b7369;       /* il turchese per il testo piccolo: 5,7:1 su bianco */
  /* Luce */
  --celeste: #4bb8e6;
  --ghiaccio: #cff3ff;
  /* Superficie */
  --bianco: #fff;
  --nebbia: #f3f7fa;
  --sabbia: #f7f2ea;
  --inchiostro: #0b2236;
  --grigio: #475b6c;
  --su-scuro: #e3f0f8;
  --su-scuro-2: #a9c4d8;
  --verde: #00806f;
  --rosso: #b8002a;
  --oro: #e0a21b;
  --linea: rgb(11 34 54 / .1);
  --linea-forte: rgb(11 34 54 / .28);
  /* Forme */
  --r-xl: 32px;
  --r-l: 24px;
  --r-m: 16px;
  --r-s: 12px;
  --ombra: 0 1px 1px rgb(3 27 51 / .04), 0 10px 28px -10px rgb(3 27 51 / .14), 0 40px 80px -30px rgb(3 27 51 / .2);
  --ombra-forte: 0 2px 2px rgb(3 27 51 / .05), 0 24px 48px -16px rgb(3 27 51 / .25), 0 60px 120px -40px rgb(3 27 51 / .35);
  /* Movimento: molla, mai lineare */
  --molla: cubic-bezier(.32, .72, 0, 1);
  --uscita: cubic-bezier(.16, 1, .3, 1);
  --titoli: 'Fraunces', 'Fraunces riserva', Georgia, 'Times New Roman', serif;
  --testo: 'Figtree', 'Figtree riserva', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --barra: 76px;
  /* Da dove parte il contenuto sotto la testata (isola alta 64 + il suo margine + respiro). */
  --sotto-testata: 118px;
  color-scheme: light;
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 112px; -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: no-preference) { html:not(.fermo) { scroll-behavior: smooth; } }
body {
  margin: 0; font-family: var(--testo); font-size: 1.125rem; line-height: 1.65; color: var(--inchiostro); background: var(--bianco);
  padding-bottom: calc(var(--barra) + env(safe-area-inset-bottom)); overflow-x: clip;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* La grana della carta: fissa, sopra tutto, non intercetta i tocchi. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--oceano); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--notte); }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.12; color: var(--notte); }
h1, h2 { font-family: var(--titoli); font-weight: 600; letter-spacing: -.02em; }
h1 { font-size: clamp(2.2rem, 1.35rem + 5.2vw, 5.9rem); line-height: 1.02; }
/* La rete: una parola più larga della colonna («demineralizzata,» a 320 px)
   va a capo dentro la parola invece di uscire dallo schermo. */
h1, h2, h3 { overflow-wrap: break-word; }
.titolo-anim .p { max-width: 100%; }
.titolo-anim .p > span, .titolo-anim .p em > span { overflow-wrap: anywhere; }
h2 { font-size: clamp(2.05rem, 1.3rem + 3.1vw, 4rem); line-height: 1.05; }
h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -.005em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
em { font-style: italic; }
:focus-visible { outline: 3px solid var(--celeste); outline-offset: 3px; border-radius: 6px; }
/* Niente attesa del doppio tocco: il dito apre subito. */
a, button, label, summary, select, input { touch-action: manipulation; }
::selection { background: var(--ghiaccio); color: var(--abisso); }
.ic { width: 22px; height: 22px; flex: none; }

.visibile-solo-lettori, .campo-nascosto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--abisso); color: #fff; padding: 12px 18px; border-radius: 999px; font-weight: 700; }
.salta:focus { top: 12px; color: #fff; }

/* Ritardi a cascata: classi e non attributi style, per la CSP. */
.i0{--i:0}.i1{--i:1}.i2{--i:2}.i3{--i:3}.i4{--i:4}.i5{--i:5}.i6{--i:6}.i7{--i:7}.i8{--i:8}.i9{--i:9}.i10{--i:10}.i11{--i:11}.i12{--i:12}.i13{--i:13}.i14{--i:14}.i15{--i:15}.i16{--i:16}.i17{--i:17}.i18{--i:18}.i19{--i:19}.i20{--i:20}.i21{--i:21}.i22{--i:22}.i23{--i:23}.i24{--i:24}.i25{--i:25}.i26{--i:26}.i27{--i:27}.i28{--i:28}.i29{--i:29}.i30{--i:30}.i31{--i:31}.i32{--i:32}.i33{--i:33}.i34{--i:34}.i35{--i:35}.i36{--i:36}.i37{--i:37}.i38{--i:38}.i39{--i:39}.i40{--i:40}

/* Fra una pagina e l'altra: dissolvenza morbida (Chrome, Safari 18.2+). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: var(--uscita); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* --margine è il bordo bianco ai lati: le giostre lo usano per sbordare fino allo schermo e ripartire allineate. */
.contenitore { --margine: 20px; width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--margine); }
.contenitore-stretto { max-width: 820px; }
.contenitore-medio { max-width: 980px; }
@media (min-width: 900px) { .contenitore { --margine: 40px; } :root { --sotto-testata: 128px; } }

.sezione { position: relative; padding-block: 80px; }
.sezione-stretta { padding-block: 40px; }
.sezione-acqua, .sezione-nebbia { background: var(--nebbia); }
.sezione-sabbia { background: var(--sabbia); }
@media (min-width: 900px) { .sezione { padding-block: 128px; } .sezione-stretta { padding-block: 56px; } }

/* Il fondo profondo: blu abisso con la luce. Testo chiaro, AA misurato.
   Le lastre bianche posate sul fondo profondo (il modulo, le carte) tengono i
   colori del fondo chiaro: per questo ogni regola esclude quello che sta in
   una .lastra, e la .lastra rimette l'inchiostro. */
.profondo { background: radial-gradient(120% 80% at 70% 0%, #0a4d7e 0%, var(--abisso-2) 45%, var(--abisso) 100%); color: var(--su-scuro); isolation: isolate; overflow: hidden; }
.profondo :is(h1, h2, h3):not(.lastra *) { color: #fff; }
.profondo a:not(.btn, .lastra *) { color: var(--ghiaccio); }
.profondo :is(.testa-testo, p):not(.lastra *) { color: var(--su-scuro); }

/* Luci che si muovono nei fondi profondi senza WebGL: tre macchie morbide. */
.luci { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.luci i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: .55;
  background: radial-gradient(circle, rgb(75 184 230 / .35) 0%, rgb(75 184 230 / 0) 60%); }
.luci i:nth-child(1) { left: -20vmax; top: -30vmax; }
.luci i:nth-child(2) { right: -25vmax; top: 10%; background: radial-gradient(circle, rgb(34 199 184 / .28) 0%, rgb(34 199 184 / 0) 60%); }
.luci i:nth-child(3) { left: 20%; bottom: -45vmax; background: radial-gradient(circle, rgb(207 243 255 / .2) 0%, rgb(207 243 255 / 0) 60%); }
html.anim .luci i { animation: deriva 22s var(--molla) infinite alternate; }
html.anim .luci i:nth-child(2) { animation-duration: 28s; animation-delay: -6s; }
html.anim .luci i:nth-child(3) { animation-duration: 34s; animation-delay: -12s; }
@keyframes deriva { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(8vmax, 6vmax, 0) scale(1.15); } }

/* -------------------------------------------------- pillole, titoli, link */

.pillola {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 7px 14px 7px 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--oceano);
  background: rgb(7 95 146 / .07); box-shadow: inset 0 0 0 1px rgb(7 95 146 / .14);
}
.pillola-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--vivo); box-shadow: 0 0 0 4px rgb(34 199 184 / .2); }
html.anim .pillola-punto { animation: battito 2.4s var(--molla) infinite; }
@keyframes battito { 0%, 100% { box-shadow: 0 0 0 3px rgb(34 199 184 / .25); } 50% { box-shadow: 0 0 0 8px rgb(34 199 184 / 0); } }
.pillola-chiara { color: var(--ghiaccio); background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); }

.titolo-anim .p { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .04em .14em 0; margin: -.06em -.04em -.14em 0; }
.titolo-anim .p > span, .titolo-anim .p em > span { display: inline-block; }
.p-insieme { white-space: nowrap; }
.titolo-anim em { color: var(--vivo-scuro); font-style: italic; padding-right: .06em; }
.profondo .titolo-anim em:not(.lastra *) { color: var(--vivo-chiaro); }

.testa-sezione { max-width: 760px; margin-bottom: 48px; }
.testa-sezione .titolo-anim { margin-bottom: .35em; }
.testa-testo { font-size: 1.18rem; color: var(--grigio); margin: 0; max-width: 40em; }
.testa-con-link { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; }
.testa-con-link > div { max-width: 760px; }
.testa-centrata { margin-inline: auto; text-align: center; }
.testa-centrata .pillola { margin-inline: auto; }
.titolo-piccolo { font-family: var(--testo); font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--oceano); margin-bottom: 18px; }
.riga-link { margin: 40px 0 0; }
.nota, .nota-costi, .nota-tabella, .nota-video { font-size: .92rem; color: var(--grigio); }
/* La didascalia sotto una giostra, una griglia o una tabella: staccata, non incollata. */
:is(.giostra, .giostra-punti, .griglia-recensioni, .griglia-guide, .griglia-prodotti, .tabella-scorre, .costi) + :is(.nota, .nota-costi, .nota-tabella, .nota-video) { margin-top: 20px; }
.profondo .nota-video { color: var(--su-scuro-2); }
.testo-grande { font-size: 1.28rem; line-height: 1.6; }

.link-freccia { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 700; color: var(--notte); text-decoration: none; }
.link-cerchio { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--nebbia); box-shadow: inset 0 0 0 1px var(--linea); transition: transform .5s var(--molla), background .3s; }
.link-cerchio .ic { width: 18px; height: 18px; }
.profondo .link-freccia:not(.lastra *) { color: #fff; }
.profondo .link-cerchio:not(.lastra *) { background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }

/* --------------------------------------------------------------- bottoni */

.bottoni { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0; }
/* La pillola con il cerchio dentro. Il cerchio è concentrico: lo stesso margine
   sopra, sotto e a destra, calcolato da --alto e --cerchio; a sinistra il testo.
   flex-shrink 0: con overflow hidden un bottone in una riga flex si lascerebbe
   schiacciare fino a far uscire il cerchio dal bordo. */
.btn {
  --alto: 58px; --cerchio: 42px; --dentro: calc((var(--alto) - var(--cerchio)) / 2);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px; flex-shrink: 0; min-height: var(--alto);
  padding: var(--dentro) var(--dentro-destra, var(--dentro)) var(--dentro) 26px; border-radius: 999px; border: 0; cursor: pointer; overflow: hidden; isolation: isolate;
  font: 700 1.06rem/1.2 var(--testo); letter-spacing: -.005em; text-decoration: none; text-align: left;
  transition: transform .5s var(--molla), box-shadow .5s var(--molla), background .3s;
}
.btn:active { transform: scale(.97); }
.btn-testo { padding-block: 4px; text-wrap: balance; }
.btn-icona { display: grid; place-items: center; width: var(--cerchio); height: var(--cerchio); border-radius: 50%; flex: none; transition: transform .55s var(--molla); }
.btn-icona .ic { width: 20px; height: 20px; }
/* Sul telefono stretto la pillola si stringe un poco: «Prenota la mia analisi
   gratuita» deve stare su una riga anche a 360 px. */
@media (max-width: 479px) { .btn { --alto: 56px; --cerchio: 40px; padding-left: 20px; gap: 10px; font-size: 1rem; } }
/* L'acqua viva: il solo colore delle azioni. Testo abisso: contrasto oltre 7:1. */
.btn-vivo { background: var(--vivo); color: var(--abisso); box-shadow: 0 1px 0 rgb(255 255 255 / .5) inset, 0 12px 30px -10px rgb(34 199 184 / .7); }
.btn-vivo .btn-icona { background: var(--abisso); color: var(--vivo-chiaro); }
/* Un riflesso che attraversa il bottone ogni tanto. */
.btn-vivo::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .55) 48%, transparent 66%); transform: translateX(-120%); }
html.anim .btn-vivo::after { animation: riflesso 5.5s var(--molla) infinite 2s; }
@keyframes riflesso { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.btn-linea { --cerchio: 36px; background: transparent; color: var(--notte); box-shadow: inset 0 0 0 1.5px var(--linea-forte); }
.btn-linea .btn-icona { background: var(--nebbia); color: var(--notte); }
.btn-vetro { --cerchio: 36px; background: rgb(255 255 255 / .08); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); }
.btn-vetro .btn-icona { background: rgb(255 255 255 / .12); color: #fff; }
.btn-piccolo { --alto: 46px; --cerchio: 36px; padding-left: 18px; font-size: .98rem; gap: 10px; }
/* Senza cerchio il testo sta in mezzo, con lo stesso margine ai due lati. */
.btn:not(:has(.btn-icona)) { padding-inline: 26px; }
.btn-piccolo:not(:has(.btn-icona)) { padding-inline: 20px; }
.btn-largo { width: 100%; justify-content: space-between; }
/* Due bottoni insieme: sul telefono uno sotto l'altro, larghi uguali. */
.bottoni .btn { flex: 1 1 100%; justify-content: space-between; }
@media (min-width: 600px) { .bottoni .btn { flex: 0 0 auto; } }
.link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* ----------------------------------------------------- testata a isola */

.testata { position: fixed; inset: 10px 10px auto; z-index: 50; pointer-events: none; view-transition-name: testata; }
.isola {
  pointer-events: auto; display: flex; align-items: center; gap: 6px; max-width: 1320px; height: 64px; margin: 0 auto; padding: 0 8px 0 16px;
  border-radius: 999px; background: rgb(255 255 255 / .78); box-shadow: 0 1px 0 rgb(255 255 255 / .7) inset, 0 0 0 1px var(--linea), 0 10px 30px -12px rgb(3 27 51 / .25);
  backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
  transition: background .5s var(--molla), box-shadow .5s var(--molla), transform .6s var(--molla);
}
/* Logo, telefono, bottone e menu non si stringono: cede solo il menu del desktop. */
.isola > :not(.nav-principale) { flex-shrink: 0; }
.marchio { position: relative; display: block; margin-right: auto; padding: 8px 2px; }
.marchio img { height: 26px; width: auto; transition: opacity .4s; }
.marchio .logo-su-scuro { position: absolute; left: 2px; top: 8px; opacity: 0; }
.testata[data-tema='scuro'] .isola { background: rgb(3 27 51 / .55); box-shadow: 0 1px 0 rgb(255 255 255 / .08) inset, 0 0 0 1px rgb(255 255 255 / .12), 0 10px 30px -12px rgb(0 0 0 / .5); }
.testata[data-tema='scuro'] .logo-su-chiaro { opacity: 0; }
.testata[data-tema='scuro'] .logo-su-scuro { opacity: 1; }
.testata[data-tema='scuro'] .testata-tel, .testata[data-tema='scuro'] .nav-principale a { color: #fff; }
.testata[data-tema='scuro'] .menu-apri { background: rgb(255 255 255 / .12); color: #fff; }
.testata.nascosta .isola { transform: translateY(-120%); }
.nav-principale { display: none; }
.testata-tel { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 48px; min-height: 48px; border-radius: 999px; color: var(--notte); text-decoration: none; font-weight: 700; }
.testata-tel span { display: none; }
/* 48 px nell'isola da 64: 8 px sopra, sotto e a destra, come il bottone del menu. */
.testata-cta { --alto: 48px; --cerchio: 38px; display: none; white-space: nowrap; }
.menu-apri, .menu-chiudi { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--nebbia); color: var(--notte); cursor: pointer; }
.hamburger { position: relative; width: 20px; height: 12px; }
.hamburger i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform .6s var(--molla), top .6s var(--molla); }
.hamburger i:first-child { top: 0; }
.hamburger i:last-child { top: 10px; }
.hamburger.aperto i { top: 5px; }
.hamburger.aperto i:first-child { transform: rotate(45deg); }
.hamburger.aperto i:last-child { transform: rotate(-45deg); }
@starting-style { .cassetto:popover-open .hamburger.aperto i { top: 0; transform: none; } .cassetto:popover-open .hamburger.aperto i:last-child { top: 10px; } }
@media (min-width: 600px) {
  .testata { inset: 14px 16px auto; }
  .testata-cta { display: inline-flex; }
  .marchio img { height: 30px; }
  .isola { padding-left: 22px; gap: 10px; }
}
@media (min-width: 1240px) {
  .nav-principale { display: block; margin-right: auto; }
  .marchio { margin-right: 8px; }
  /* 6 px fra le voci: la cornice della voce attiva e il fondo di quella sotto il mouse non si toccano. */
  .nav-principale ul { display: flex; list-style: none; gap: 6px; }
  /* Voci compatte: logo, sette voci, numero per esteso e bottone devono stare nei 1320 px dell'isola. */
  .nav-principale a { display: block; padding: 9px 10px; border-radius: 999px; font-weight: 600; font-size: .93rem; color: var(--inchiostro); text-decoration: none; white-space: nowrap; transition: background .3s; }
  .nav-principale a:hover { background: rgb(7 95 146 / .08); }
  .testata[data-tema='scuro'] .nav-principale a:hover { background: rgb(255 255 255 / .1); }
  .nav-principale a[aria-current] { box-shadow: inset 0 0 0 1px currentColor; }
  .menu-apri { display: none; }
}
@media (min-width: 1360px) { .testata-tel span { display: inline; white-space: nowrap; } .testata-tel { padding-inline: 8px; } }
/* La rete di sicurezza: se il contenuto non sta nell'isola (caratteri di riserva,
   zoom del browser), sito.js mette .stretta e il numero resta solo icona, invece
   di spingere il bottone fuori dal bordo. */
.isola.stretta .testata-tel span { display: none; }
.isola.stretta .testata-tel { padding-inline: 0; }

/* Il menu a schermo intero: popover, si apre anche senza JavaScript. Sta
   intero nello schermo senza scorrere: le sette voci si dividono l'altezza che
   resta fra la testa e il piede, e il carattere segue il più piccolo fra
   l'altezza del display (dvh, che su iPhone toglie le barre di Safari) e la
   larghezza. Lo scorrimento resta solo come rete per i casi estremi (testo
   ingrandito al massimo): il contenuto non si taglia mai. */
.cassetto {
  inset: 0; width: 100%; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0;
  padding: max(10px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
  background: radial-gradient(120% 70% at 80% 0%, #0a4d7e 0%, var(--abisso) 70%); color: var(--su-scuro); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity .45s var(--uscita), overlay .45s allow-discrete, display .45s allow-discrete;
}
.cassetto:popover-open, .senza-popover .cassetto.aperto { display: flex; flex-direction: column; }
.cassetto:popover-open { opacity: 1; }
@starting-style { .cassetto:popover-open { opacity: 0; } }
.cassetto::backdrop { background: rgb(3 27 51 / .5); }
.cassetto-testa { flex: none; display: flex; align-items: center; justify-content: space-between; height: clamp(52px, 8dvh, 64px); padding-left: 4px; }
.cassetto-testa img { height: 28px; width: auto; }
.menu-chiudi { background: rgb(255 255 255 / .1); color: #fff; }
.cassetto nav { flex: 1 1 auto; display: flex; flex-direction: column; }
.cassetto-voci { flex: 1 1 auto; display: flex; flex-direction: column; list-style: none; margin: clamp(4px, 1.4dvh, 16px) 0 clamp(12px, 2.4dvh, 28px); }
/* Ogni voce prende un settimo dello spazio, fino a 76 px; oltre, l'aria resta sotto. */
.cassetto-voci li { flex: 1 1 0; display: flex; max-height: 76px; }
/* Una griglia, non un flex: centra la riga in altezza e tiene il numero
   sulla stessa linea di base della voce. */
.cassetto-voci a {
  flex: 1; display: grid; grid-template-columns: auto 1fr; align-content: center; align-items: baseline; column-gap: 16px;
  padding: 2px 0; border-bottom: 1px solid rgb(255 255 255 / .1);
  font: 600 clamp(1.15rem, min(3.9vh, .95rem + 3.3vw), 2.6rem)/1.15 var(--titoli); font-size: clamp(1.15rem, min(3.9dvh, .95rem + 3.3vw), 2.6rem);
  letter-spacing: -.015em; color: #fff; text-decoration: none;
}
.cassetto-voci a[aria-current] { color: var(--vivo-chiaro); }
.cassetto-num { font: 700 .78rem/1 var(--testo); letter-spacing: .1em; color: var(--su-scuro-2); min-width: 22px; }
.cassetto-voci li, .cassetto-piede { transition: transform .8s var(--molla), opacity .8s var(--molla); transition-delay: calc(var(--i, 0) * 45ms + 80ms); }
@starting-style { .cassetto:popover-open .cassetto-voci li { transform: translateY(36px); opacity: 0; } .cassetto:popover-open .cassetto-piede { transform: translateY(12px); opacity: 0; } }
/* Le voci salgono da dentro la loro fascia, che le taglia: così lo scivolamento
   non allunga il menu (per 0,8 s scorreva di 22 px, e col mouse compariva la
   barra). Il piede parte solo 12 px più in basso: resta nell'imbottitura. */
.cassetto nav { overflow: clip; overflow-clip-margin: 6px; }
.cassetto-piede { flex: none; }
.cassetto-piede .btn { width: 100%; justify-content: space-between; }
/* Numero e WhatsApp sulla stessa riga, l'email sotto: due righe invece di tre. */
.cassetto-contatti { list-style: none; display: flex; flex-wrap: wrap; column-gap: 18px; margin: clamp(8px, 1.6dvh, 20px) 0 clamp(2px, .8dvh, 10px); }
.cassetto-contatti a { display: flex; align-items: center; gap: 10px; min-height: clamp(40px, 5.6dvh, 48px); font-size: .95rem; font-weight: 600; color: #fff; text-decoration: none; }
.cassetto-contatti .ic { color: var(--vivo-chiaro); }
.cassetto-orari { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--su-scuro-2); }
.cassetto-orari span { display: block; }
/* I telefoni più bassi (iPhone SE con le barre di Safari, 460 px): bottone e
   contatti più compatti, sempre sopra i 24 px di bersaglio minimo. */
@media (orientation: portrait) and (max-height: 500px) {
  .cassetto-piede .btn { --alto: 48px; --cerchio: 38px; }
  .cassetto-contatti a { min-height: 36px; }
}
.senza-popover .cassetto { position: fixed; z-index: 70; opacity: 1; }
.senza-popover .cassetto:not(.aperto) { display: none; }
/* Telefono di traverso: le voci a sinistra, bottone e contatti a destra. */
@media (orientation: landscape) and (max-height: 540px) {
  .cassetto:popover-open, .senza-popover .cassetto.aperto { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(24px, 5vw, 56px); }
  .cassetto-testa { grid-column: 1 / -1; }
  .cassetto-piede { align-self: end; }
  .cassetto-voci { margin-bottom: 4px; }
  .cassetto-voci a { font-size: clamp(1.05rem, 4.6vh, 1.6rem); font-size: clamp(1.05rem, 4.6dvh, 1.6rem); }
}
/* Schermi larghi e alti: due colonne, 01–04 a sinistra e 05–07 a destra. */
@media (min-width: 900px) and (min-height: 541px) {
  .cassetto { padding-inline: 48px; }
  .cassetto-voci { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-template-columns: 1fr 1fr; column-gap: 48px; align-content: start; }
  .cassetto-voci li { min-height: 64px; }
}

/* ---------------------------------------- barra dei contatti sul telefono */

.barra-azioni {
  position: fixed; inset: auto 10px calc(10px + env(safe-area-inset-bottom)) 10px; z-index: 45; display: grid; grid-template-columns: 1fr 1fr 1.9fr; gap: 6px;
  padding: 6px; border-radius: 26px; background: rgb(255 255 255 / .86); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
  box-shadow: 0 0 0 1px var(--linea), 0 14px 40px -12px rgb(3 27 51 / .35);
  transition: transform .6s var(--molla);
}
.barra-azioni a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 54px; border-radius: 20px; font-size: .8rem; font-weight: 700; color: var(--notte); text-decoration: none; }
.barra-azioni a:active { background: var(--nebbia); }
.barra-azioni .barra-cta { flex-direction: row; gap: 8px; background: var(--vivo); color: var(--abisso); font-size: .98rem; box-shadow: 0 8px 20px -8px rgb(34 199 184 / .8); }
/* Sulla pagina del modulo il bottone pieno non c'è: tre voci uguali. */
.barra-azioni.barra-pari { grid-template-columns: repeat(3, 1fr); }
/* «Analisi gratuita» con la goccia chiede 139 px: sotto i 360 px non ci sono,
   e la goccia (solo decorazione) lascia il posto al testo su una riga. */
@media (max-width: 359px) { .barra-azioni .barra-cta .ic { display: none; } }
.barra-azioni.nascosta { transform: translateY(140%); }
@media (min-width: 1100px) { .barra-azioni { display: none; } body { padding-bottom: 0; } }

/* -------------------------------------------------------------- briciole */

.briciole { position: relative; z-index: 2; padding-top: var(--sotto-testata); font-size: .92rem; }
.briciole ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; }
.briciole li { display: flex; align-items: center; color: var(--grigio); }
.briciole li + li::before { content: '/'; margin: 0 10px; opacity: .45; }
.briciole a { color: var(--grigio); padding-block: 10px; }
.briciole [aria-current] { color: var(--inchiostro); font-weight: 600; }
.briciole-scure { position: absolute; left: 0; right: 0; top: 0; }
.briciole-scure li, .briciole-scure a { color: var(--su-scuro-2); }
.briciole-scure [aria-current] { color: #fff; }
/* Le briciole chiare stanno nel flusso e spingono giù l'eroe; quelle scure sono
   posate sopra l'eroe, che deve lasciare loro lo spazio (testata + briciole). */
.briciole:not(.briciole-scure) + :is(.eroe, .eroe-pagina) { padding-top: 24px; }
/* Sotto le briciole scure: la loro altezza (44) e un respiro prima dell'occhiello. */
.pagina-scura .briciole-scure + * { padding-top: calc(var(--sotto-testata) + 60px); }
/* Le briciole partono dove parte il titolo, anche quando l'eroe usa la colonna media. */
.briciole:has(+ .eroe-semplice > .contenitore-medio) ol { max-width: 980px; }

/* ------------------------------------------------------- primo schermo home */

.eroe-home { position: relative; min-height: 100svh; padding: 112px 0 120px; display: flex; flex-direction: column; justify-content: center; }
.acqua { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.6s var(--uscita); }
.acqua.pronta { opacity: 1; }
.eroe-velo { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgb(3 27 51 / .35) 0%, rgb(3 27 51 / 0) 30%, rgb(3 27 51 / .2) 70%, rgb(3 27 51 / .55) 100%),
              radial-gradient(90% 60% at 20% 40%, rgb(3 27 51 / .55) 0%, rgb(3 27 51 / 0) 70%); }
.eroe-griglia { display: grid; gap: 36px; align-items: center; }
.eroe-home h1 { max-width: 11.5em; }
.eroe-sotto { font-size: 1.2rem; line-height: 1.6; max-width: 34em; color: var(--su-scuro); }
.eroe-piede { position: relative; margin-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.scorri { display: none; align-items: center; gap: 12px; font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--su-scuro-2); }
.scorri i { position: relative; width: 26px; height: 42px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .35); }
.scorri i::after { content: ''; position: absolute; left: 50%; top: 9px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--vivo-chiaro); }
html.anim .scorri i::after { animation: goccia-scende 2.2s var(--molla) infinite; }
@keyframes goccia-scende { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
.onda { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 60px; z-index: 1; color: var(--bianco); pointer-events: none; }
.onda path { fill: currentColor; }
html.anim .onda .onda-1 { animation: ondeggia 9s var(--molla) infinite alternate; }
html.anim .onda .onda-2 { animation: ondeggia 13s var(--molla) infinite alternate-reverse; opacity: .5; }
@keyframes ondeggia { from { transform: translateX(0); } to { transform: translateX(-6%); } }
@media (min-width: 900px) {
  .eroe-home { padding: 140px 0 150px; }
  .eroe-griglia { grid-template-columns: 1.15fr minmax(380px, .85fr); gap: 72px; }
  .scorri { display: inline-flex; }
  .onda { height: 110px; }
  .eroe-piede { position: absolute; left: 0; right: 0; bottom: 96px; margin: 0 auto; }
}

.interruttore-movimento { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 10px; border: 0; border-radius: 999px; font: 600 .88rem/1 var(--testo); cursor: pointer;
  background: rgb(255 255 255 / .08); color: var(--su-scuro); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); }
.interruttore-movimento .ic { width: 18px; height: 18px; }
.interruttore-movimento > span { display: inline-flex; align-items: center; gap: 8px; }
.im-riprendi { display: none !important; }
.fermo .im-ferma { display: none !important; }
.fermo .im-riprendi { display: inline-flex !important; }
.im-piede { background: none; box-shadow: none; padding: 0; min-height: 0; color: #e3eef6; text-decoration: underline; font: inherit; }
.im-piede .ic { display: none; }

/* La prova sociale: volti veri, stelle, numeri. */
.prove { display: flex; align-items: center; gap: 14px; margin-top: 28px; font-size: .98rem; color: var(--grigio); }
.prove p { margin: 0; }
.prove strong { color: var(--inchiostro); }
.prove-sep { opacity: .5; margin: 0 2px; }
.volti { display: flex; flex: none; }
.volti img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; box-shadow: 0 0 0 3px var(--bianco); }
.volti img + img { margin-left: -12px; }
.stelle { display: inline-flex; gap: 1px; color: var(--oro); vertical-align: -3px; }
.stelle .ic { width: 17px; height: 17px; }
.prove-chiare { color: var(--su-scuro-2); }
.prove-chiare strong { color: #fff; }
.prove-chiare .volti img { box-shadow: 0 0 0 3px var(--abisso-2); }

/* ------------------------------------------------- doppio bordo: vassoio */

.vassoio { display: block; padding: 6px; border-radius: var(--r-xl); background: rgb(11 34 54 / .035); box-shadow: inset 0 0 0 1px rgb(11 34 54 / .06); text-decoration: none; color: inherit; }
.lastra { height: 100%; border-radius: calc(var(--r-xl) - 6px); background: var(--bianco); color: var(--inchiostro); box-shadow: inset 0 1px 1px rgb(255 255 255 / .9), 0 1px 2px rgb(3 27 51 / .05), 0 18px 40px -24px rgb(3 27 51 / .25); overflow: hidden; }
.profondo .vassoio { background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }

/* ---------------------------------------------------------- striscia */

.striscia { position: relative; overflow: hidden; padding-block: 24px; background: var(--bianco); border-bottom: 1px solid var(--linea); }
.striscia-nastro { display: flex; width: max-content; }
.striscia ul { display: flex; list-style: none; gap: 44px; padding-right: 44px; }
.striscia li { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; font: 600 clamp(1.15rem, 1rem + .6vw, 1.5rem)/1 var(--titoli); color: var(--notte); }
.striscia li .ic { color: var(--vivo-scuro); }
html.anim .striscia-nastro { animation: nastro 38s linear infinite; }
@keyframes nastro { to { transform: translateX(-50%); } }
.striscia:hover .striscia-nastro, .striscia:focus-within .striscia-nastro, .in-pausa .striscia-nastro, .in-pausa .fila ul { animation-play-state: paused !important; }
html:not(.anim) .striscia-nastro { width: auto; justify-content: center; }
html:not(.anim) .striscia-nastro ul[aria-hidden] { display: none; }
html:not(.anim) .striscia ul { flex-wrap: wrap; justify-content: center; row-gap: 14px; padding: 0 20px; }
.pausa-scorrimento { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px 6px 12px; border: 0; border-radius: 999px; background: var(--nebbia); color: var(--notte); font: 600 .92rem/1 var(--testo); cursor: pointer; }
.pausa-scorrimento .ic { width: 18px; height: 18px; }
.pausa-piccola { position: absolute; right: 10px; top: 50%; translate: 0 -50%; width: 44px; padding: 0; justify-content: center; box-shadow: 0 0 0 6px var(--bianco); }
html:not(.anim) .pausa-scorrimento { display: none; }
.in-pausa .pausa-scorrimento { background: var(--vivo); color: var(--abisso); }

/* ------------------------------------------------- il conto delle bottiglie
   Tre passi che si guardano uno alla volta: una settimana (28 bottiglie vere,
   quattro al giorno), un anno (52 caselle, una per settimana), con il
   depuratore (zero, e il rubinetto che riempie il bicchiere). Partono da soli
   quando la sezione entra nello schermo, con la barra che dice quando arriva
   il passo dopo; i bottoni li scelgono a mano e fermano il giro. */
.conto { --conto-durata: 3.6s; }
.conto-griglia { display: grid; gap: 22px; align-items: start; }
/* Sul telefono la scena sta subito sotto i passi, prima dei numeri: mentre il
   conto gira, le bottiglie si vedono senza scorrere. */
@media (max-width: 899px) {
  .conto-comandi { display: contents; }
  .conto-passi { order: 1; }
  .conto-scena { order: 2; }
  .conto-dati { order: 3; margin-top: 6px; }
  .conto-play { order: 4; margin-top: 0; justify-self: start; }
}
.conto-passi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; border-radius: 999px; background: var(--nebbia); box-shadow: inset 0 0 0 1px var(--linea); }
.conto-passo { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 6px 10px; border: 0; border-radius: 999px;
  background: transparent; color: var(--grigio); font: 700 .95rem/1.15 var(--testo); cursor: pointer; overflow: hidden; transition: background .35s, color .35s, box-shadow .35s; }
.conto-passo-n, .conto-passo .lungo { display: none; }
.conto-passo[aria-pressed='true'] { background: #fff; color: var(--notte); box-shadow: 0 8px 18px -12px rgb(3 27 51 / .4), inset 0 0 0 1px var(--linea); }
.conto-passo:focus-visible { outline: 3px solid var(--celeste); outline-offset: 2px; }
/* La barra che si riempie sul passo in corso: quando è piena arriva il passo dopo. */
.conto-avanza { position: absolute; left: 16px; right: 16px; bottom: 5px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--celeste), var(--vivo)); transform: scaleX(0); transform-origin: 0 50%; }
.conto-passo.in-corso .conto-avanza { animation: conto-avanza var(--conto-durata) linear both; }
@keyframes conto-avanza { to { transform: scaleX(1); } }
.conto-dati { margin-top: 28px; }
.conto-numero { margin: 0; font: 600 clamp(4.4rem, 2.6rem + 7vw, 8.4rem)/.9 var(--titoli); letter-spacing: -.04em; color: var(--notte); font-variant-numeric: tabular-nums; }
.conto-unita { margin: 12px 0 0; font-weight: 700; color: var(--oceano); }
.conto-frase { margin: 12px 0 0; font-size: 1.15rem; line-height: 1.55; color: var(--grigio); max-width: 30em; min-height: 3.1em; }
.conto-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0 0; }
.conto-mini div { display: flex; flex-direction: column-reverse; gap: 2px; padding-top: 12px; border-top: 1px solid var(--linea-forte); }
.conto-mini dd { margin: 0; font: 600 1.75rem/1.1 var(--titoli); color: var(--notte); font-variant-numeric: tabular-nums; }
.conto-mini dt { font-size: .86rem; color: var(--grigio); }
.conto-play { display: inline-flex; align-items: center; min-height: 44px; margin-top: 18px; padding: 0 2px; border: 0; background: none; color: var(--oceano); font: 700 .95rem/1 var(--testo); cursor: pointer; }
.conto-play > span { display: inline-flex; align-items: center; gap: 8px; }
.conto-play .ic { width: 18px; height: 18px; }
.conto-play-ferma, .conto.gira .conto-play-rivedi { display: none !important; }
.conto.gira .conto-play-ferma { display: inline-flex !important; }
/* Senza JavaScript si vede il conto dell'anno, fermo; senza movimento si sceglie a mano. */
html:not(.js) .conto-passi, html:not(.js) .conto-play, html:not(.anim) .conto-play { display: none; }

/* La scena: il pannello blu dove si contano le bottiglie. */
.conto-scena { margin: 0; }
.conto-scena .lastra { display: grid; grid-template-rows: auto 1fr auto; padding: 26px 20px 18px; color: var(--su-scuro);
  background: radial-gradient(120% 90% at 70% 0%, #0b4f82 0%, var(--notte) 45%, var(--abisso) 100%); }
/* Sul telefono il numero sta anche dentro la scena, sopra le bottiglie: si legge insieme a loro. */
.conto-scena-numero { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; color: var(--su-scuro); font-weight: 600; }
.conto-scena-numero strong { font: 600 2.6rem/1 var(--titoli); letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.conto-viste { position: relative; min-height: 250px; }
.conto-vista { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .4s var(--uscita), visibility 0s .4s; }
.conto-vista.attiva { opacity: 1; visibility: visible; transition: opacity .55s var(--uscita) .08s, visibility 0s; }
.conto-legenda { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / .12); font-size: .95rem; line-height: 1.45; text-align: center; color: var(--su-scuro); min-height: 3.2em; }
/* La settimana: sette colonne, una per giorno, quattro bottiglie ciascuna. */
.conto-giorni { display: grid; grid-template-columns: repeat(7, minmax(0, 60px)); gap: clamp(6px, 2.2vw, 18px); align-items: end; }
.conto-giorno { display: grid; justify-items: center; gap: 10px; }
.conto-pila { display: grid; gap: 5px; }
.conto-giorno span { font-size: .8rem; font-weight: 700; letter-spacing: .1em; color: var(--su-scuro-2); }
.bottiglia { display: block; width: clamp(16px, 4.4vw, 22px); height: auto; overflow: visible; }
.bottiglia-corpo { fill: rgb(207 243 255 / .12); stroke: var(--ghiaccio); stroke-width: 1.3; }
.bottiglia-acqua { fill: var(--celeste); opacity: .9; }
.bottiglia-tappo { fill: var(--vivo); }
html.anim .conto-settimana.attiva .bottiglia { animation: bottiglia-arriva .55s var(--molla) both; animation-delay: calc(var(--i, 0) * 32ms + 120ms); }
@keyframes bottiglia-arriva { from { opacity: 0; transform: translateY(-28px) scale(.86); } }
/* L'anno: 52 caselle, una per settimana; la prima è la settimana di prima. */
.conto-anno-griglia { display: grid; grid-template-columns: repeat(13, 1fr); gap: clamp(3px, .9vw, 7px); width: 100%; max-width: 560px; }
.conto-sett { aspect-ratio: 1; border-radius: 24%; background: linear-gradient(160deg, var(--celeste), #1f80b6); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35); }
.conto-sett:first-child { background: linear-gradient(160deg, var(--vivo-chiaro), var(--vivo)); box-shadow: 0 0 0 3px rgb(34 199 184 / .3); }
html.anim .conto-anno.attiva .conto-sett { animation: casella-arriva .45s var(--molla) both; animation-delay: calc(var(--i, 0) * 20ms + 100ms); }
@keyframes casella-arriva { from { opacity: 0; transform: scale(.35); } }
/* Con il depuratore: il rubinetto riempie il bicchiere. */
.zero-scena { width: min(230px, 70%); height: auto; overflow: visible; }
.zero-rubinetto { fill: none; stroke: var(--ghiaccio); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.zero-manopola { fill: none; stroke: var(--ghiaccio); stroke-width: 8; stroke-linecap: round; }
.zero-getto { fill: var(--celeste); opacity: .85; transform-box: fill-box; transform-origin: 50% 0; }
.zero-flusso { fill: none; stroke: rgb(255 255 255 / .7); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 11; }
.zero-bicchiere { fill: rgb(255 255 255 / .06); stroke: var(--ghiaccio); stroke-width: 3; stroke-linejoin: round; }
.zero-acqua { fill: var(--celeste); opacity: .9; transform-box: fill-box; transform-origin: 50% 100%; }
html.anim .conto-zero.attiva .zero-getto { animation: getto .7s var(--uscita) .25s both; }
html.anim .conto-zero.attiva .zero-flusso { animation: flusso .55s linear infinite; }
html.anim .conto-zero.attiva .zero-acqua { animation: riempi 2.2s var(--uscita) .6s both; }
@keyframes getto { from { transform: scaleY(0); } }
@keyframes flusso { to { stroke-dashoffset: -16; } }
@keyframes riempi { from { transform: scaleY(0); } }
@media (min-width: 900px) {
  .conto-griglia { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
  /* Sul desktop i passi sono un elenco: numero, nome, la barra sotto. */
  .conto-passi { grid-template-columns: 1fr; gap: 4px; padding: 8px; border-radius: var(--r-l); }
  .conto-passo { justify-content: flex-start; min-height: 58px; padding: 8px 18px 10px 10px; border-radius: 16px; font-size: 1.04rem; }
  .conto-passo-n { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--linea); font: 700 .92rem/1 var(--testo); color: var(--oceano); transition: background .35s, color .35s; }
  .conto-passo[aria-pressed='true'] .conto-passo-n { background: var(--vivo); color: var(--abisso); box-shadow: none; }
  .conto-passo .lungo { display: inline; }
  .conto-passo .corto { display: none; }
  .conto-avanza { left: 58px; right: 18px; bottom: 7px; }
  .conto-scena .lastra { padding: 36px 36px 22px; }
  .conto-viste { min-height: 400px; }
  .conto-scena-numero { display: none; }
  .bottiglia { width: 30px; }
  .conto-pila { gap: 7px; }
  .zero-scena { width: min(300px, 70%); }
}
@media (hover: hover) { .conto-passo:not([aria-pressed='true']):hover { color: var(--notte); background: rgb(255 255 255 / .6); } }
/* La nota del conto: staccata dal pannello, non incollata sotto. */
.conto-nota { margin: 32px 0 0; max-width: 46em; }

/* --------------------------------------------------------- calcolatore */

.calcolatore-griglia { display: grid; gap: 28px; }
.calcolatore-comandi .lastra, .calcolatore-esito .lastra { padding: 28px 24px; }
.comando { margin-bottom: 26px; }
.comando label, .comando .comando-nome { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 700; margin-bottom: 10px; }
.comando output { font: 600 1.5rem/1 var(--titoli); color: var(--notte); }
.contatore { display: flex; align-items: center; gap: 14px; }
.contatore button { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--nebbia); color: var(--notte); cursor: pointer; box-shadow: inset 0 0 0 1px var(--linea); transition: transform .3s var(--molla); }
.contatore button:active { transform: scale(.92); }
.contatore output { min-width: 2ch; text-align: center; font: 600 2rem/1 var(--titoli); color: var(--notte); }
input[type='range'] { width: 100%; height: 44px; background: transparent; accent-color: var(--vivo-scuro); cursor: pointer; }
.calcolatore-esito .lastra { background: linear-gradient(160deg, var(--abisso-2), var(--abisso)); color: var(--su-scuro); }
.esito-grande { font: 600 clamp(3rem, 2rem + 4vw, 5rem)/1 var(--titoli); color: #fff; letter-spacing: -.03em; margin: 6px 0 4px; }
.esito-etichetta { font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--su-scuro-2); margin: 0; }
.esito-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 26px 0; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / .14); }
.esito-griglia dd { margin: 0; font: 600 1.7rem/1.1 var(--titoli); color: #fff; }
.esito-griglia dt { font-size: .92rem; color: var(--su-scuro-2); }
.esito-griglia div { display: flex; flex-direction: column-reverse; gap: 2px; }
.esito-confronto { padding: 16px 18px; border-radius: var(--r-m); background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); font-size: 1rem; }
.esito-confronto strong { color: var(--vivo-chiaro); }
.esito-nota { font-size: .86rem; color: var(--su-scuro-2); margin: 14px 0 0; }
.calcolatore-esito .btn { margin-top: 22px; width: 100%; justify-content: space-between; }
@media (min-width: 900px) { .calcolatore-griglia { grid-template-columns: 1fr 1.1fr; gap: 32px; } .calcolatore-comandi .lastra, .calcolatore-esito .lastra { padding: 40px; } }

/* --------------------------------------------------- passi con la linea d'acqua */

.flusso { position: relative; list-style: none; display: grid; gap: 22px; }
.flusso::before { content: ''; position: absolute; left: 27px; top: 30px; bottom: 30px; width: 3px; border-radius: 3px; background: rgb(7 95 146 / .12); }
.flusso::after { content: ''; position: absolute; left: 27px; top: 30px; width: 3px; height: calc((100% - 60px) * var(--p, 1)); border-radius: 3px; background: linear-gradient(var(--celeste), var(--vivo)); box-shadow: 0 0 16px rgb(34 199 184 / .6); }
.flusso li { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 20px; align-items: start; }
.flusso-num { position: relative; z-index: 1; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--bianco); color: var(--notte); font: 600 1.5rem/1 var(--titoli); box-shadow: inset 0 0 0 2px rgb(7 95 146 / .15), var(--ombra); transition: background .5s var(--molla), color .5s, box-shadow .5s; }
.flusso li.attivo .flusso-num, html:not(.anim) .flusso-num { background: var(--vivo); color: var(--abisso); box-shadow: 0 0 0 6px rgb(34 199 184 / .18); }
.flusso h3 { font-family: var(--titoli); font-weight: 600; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); margin: 10px 0 6px; }
.flusso p { margin: 0; color: var(--grigio); }
.flusso-quando { display: inline-block; margin: 0 0 4px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--oceano); }
.flusso-foto { display: none; }
.come-griglia { display: grid; gap: 48px; }
@media (min-width: 900px) {
  .come-griglia { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
  /* 5:4 tiene le foto 3:2 all'83% e quella quadrata all'80%: nessun soggetto tagliato. */
  .flusso-foto { display: block; position: sticky; top: 120px; aspect-ratio: 5 / 4; }
  .flusso-foto .lastra { position: relative; }
  .flusso-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .9s var(--molla), transform 1.2s var(--molla); }
  html.anim .flusso-foto img:not(.attiva) { opacity: 0; transform: scale(1.06); }
  html:not(.anim) .flusso-foto img:not(:first-child) { display: none; }
  .flusso { gap: 64px; padding-block: 40px; }
}

/* --------------------------------------------------------- schede prodotto */

/* Le giostre. Sbordano fino al bordo dello schermo e ripartono allineate al
   testo: lo scorrimento si ferma a --margine dal bordo (scroll-padding), e il
   margine c'è anche dopo l'ultima voce perché è il padding della pista stessa. */
.vetrina { display: grid; grid-auto-flow: column; grid-auto-columns: min(80vw, 340px); gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margine, 20px); margin-inline: calc(-1 * var(--margine, 20px)); padding: 8px var(--margine, 20px) 20px; scrollbar-width: none; }
.vetrina::-webkit-scrollbar { display: none; }
.vetrina > * { scroll-snap-align: start; }
/* I puntini sotto la giostra: quante voci e dove sei. Li mette sito.js. */
.giostra-punti { display: flex; justify-content: center; gap: 6px; margin: 6px 0 0; }
.giostra-punti i { width: 7px; height: 7px; border-radius: 4px; background: var(--linea-forte); transition: width .45s var(--molla), background .3s; }
.giostra-punti i.attivo { width: 24px; background: var(--vivo-scuro); }
.profondo .giostra-punti i { background: rgb(255 255 255 / .28); }
.profondo .giostra-punti i.attivo { background: var(--vivo); }
.griglia-prodotti { display: grid; gap: 16px; }
.carta-prodotto { perspective: 900px; }
.carta-prodotto .vassoio { height: 100%; transition: transform .7s var(--molla); transform-style: preserve-3d; }
.carta-prodotto .lastra { display: flex; flex-direction: column; }
.carta-foto { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--nebbia); }
.carta-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--molla); }
.carta-casa .carta-foto { background: #0b3c62; }
.carta-horeca .carta-foto, .carta-altro .carta-foto { background: #fff; }
.carta-horeca .carta-foto img, .carta-altro .carta-foto img { object-fit: contain; padding: 8%; }
/* La luce che segue il dito o il mouse sopra la foto. */
.carta-luce { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(300px circle at var(--lx, 50%) var(--ly, 30%), rgb(255 255 255 / .28), transparent 60%); }
.carta-testo { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.carta-famiglia { margin: 0 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--oceano); line-height: 1.35; }
.carta-prodotto h3, .carta-prodotto h2 { font-family: var(--titoli); font-weight: 600; font-size: 1.7rem; letter-spacing: -.015em; margin: 0 0 12px; }
.carta-piede { display: flex; justify-content: space-between; align-items: center; margin: auto 0 0; padding-top: 14px; font-weight: 700; color: var(--grigio); }
.carta-piede > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.carta-piede .ic { width: 18px; height: 18px; color: var(--oceano); }
.chip-acque { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.chip-acque li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border-radius: 999px; background: var(--nebbia); color: var(--notte); font-size: .86rem; font-weight: 600; box-shadow: inset 0 0 0 1px var(--linea); }
.chip-acque .ic { width: 16px; height: 16px; color: var(--oceano); }
.profondo .chip-acque li { background: rgb(255 255 255 / .08); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); }
.profondo .chip-acque .ic { color: var(--vivo-chiaro); }
.chip-grandi li { font-size: 1rem; padding: 8px 16px 8px 12px; }
.chip-grandi .ic { width: 20px; height: 20px; }
@media (min-width: 600px) { .griglia-prodotti { grid-template-columns: repeat(2, 1fr); gap: 20px; } .vetrina { grid-auto-columns: min(44vw, 340px); } }
@media (min-width: 1024px) {
  .griglia-prodotti { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .griglia-prodotti.griglia-tre { grid-template-columns: repeat(3, 1fr); }
  .vetrina { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: 0; padding: 0; gap: 24px; }
  .vetrina + .giostra-punti { display: none; }
}

/* ------------------------------------------------------------- porte, bento */

/* Sotto le schede dei prodotti: un respiro netto, sono un'altra cosa (il quiz, i locali). */
.porte { display: grid; gap: 20px; margin-top: 36px; }
.porta { display: block; text-decoration: none; color: inherit; }
.porta .lastra { display: grid; transition: transform .7s var(--molla); }
.porta-foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--nebbia); }
.porta-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--molla); }
.porta-foto-chiara { background: #fff; }
.porta-foto-chiara img { object-fit: contain; padding: 4%; }
.porta-testo { padding: 24px 24px 22px; }
.porta-testo p:not(.pillola) { color: var(--grigio); }
.porta h3 { font-family: var(--titoli); font-size: 1.8rem; font-weight: 600; letter-spacing: -.015em; }
@media (min-width: 720px) { .porte { grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 48px; } }

.bento { display: grid; gap: 16px; }
.tessera { position: relative; min-height: 220px; }
.tessera .lastra { position: relative; padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.tessera h3 { font-family: var(--titoli); font-weight: 600; font-size: 1.65rem; letter-spacing: -.015em; margin-bottom: 8px; }
.tessera p { margin: 0; color: var(--grigio); }
.tessera-icona + h3 { margin-top: 28px; }
/* L'icona sta nel flusso e spinge il testo in fondo: con un titolo lungo non ci finisce sopra. */
.tessera-icona { flex: none; margin-bottom: auto; width: 52px; height: 52px; padding: 13px; border-radius: 50%; background: var(--nebbia); color: var(--notte); box-shadow: inset 0 0 0 1px var(--linea); }
/* La foto della tessera sta sopra, intera, e il testo sotto sul blu, a ogni
   larghezza: sovrapposti, in una scheda stretta e alta, del panorama (2,2:1) si
   vedeva il 42% sul telefono e il 39% a 1024 px. */
.tessera-foto .lastra { padding: 0; justify-content: flex-start; background: var(--abisso); color: #fff; }
.tessera-foto img { position: relative; z-index: 0; width: 100%; height: auto; transition: transform 1.6s var(--molla); }
.tessera-foto h3, .tessera-foto p, .tessera-foto .pillola { position: relative; z-index: 1; }
.tessera-foto .lastra > :not(img) { margin-inline: 24px; }
.tessera-foto img + * { margin-top: 22px; }
.tessera-foto .lastra > :last-child { margin-bottom: 26px; }
.tessera-foto .pillola { align-self: flex-start; }
.tessera-foto h3 { color: #fff; }
.tessera-foto p { color: var(--su-scuro); }
.tessera-scura .lastra { background: linear-gradient(160deg, var(--notte), var(--abisso)); color: var(--su-scuro); }
.tessera-scura h3 { color: #fff; }
.tessera-scura p { color: var(--su-scuro); }
.tessera-scura .tessera-icona { background: rgb(255 255 255 / .1); color: var(--vivo-chiaro); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); }
.tessera-numero { font: 600 clamp(3.4rem, 2.4rem + 3vw, 4.8rem)/1 var(--titoli); letter-spacing: -.03em; color: var(--notte); margin: 0 0 6px; }
.tessera-scura .tessera-numero { color: #fff; }
/* Sul tablet due colonne: una sola, a 768 px, lascia schede larghe e vuote. */
@media (min-width: 600px) and (max-width: 899px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento .t-1, .bento .t-6 { grid-column: span 2; }
}
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(240px, auto); gap: 20px; }
  .bento .t-1 { grid-column: span 7; grid-row: span 2; }
  .bento .t-2 { grid-column: span 5; }
  .bento .t-3 { grid-column: span 5; }
  .bento .t-4 { grid-column: span 4; }
  .bento .t-5 { grid-column: span 4; }
  .bento .t-6 { grid-column: span 4; }
  /* Nella fila del bento il testo va in fondo, come nelle tessere accanto. */
  .tessera-foto .lastra { min-height: 100%; }
  .tessera-foto img + * { margin-top: auto; padding-top: 22px; }
}

/* ------------------------------------------------------------ recensioni */

.griglia-recensioni { display: grid; gap: 16px; }
.recensione { margin: 0; }
.recensione .lastra { padding: clamp(18px, 5vw, 24px); display: flex; flex-direction: column; gap: 14px; }
.recensione blockquote { margin: 0; font-size: 1.06rem; line-height: 1.6; }
.recensione blockquote p { margin: 0; }
/* Il nome su una riga, sotto le stelle e la fonte: con le stelle spinte a
   destra, sui telefoni stretti «Recensione Google» andava su due righe e la
   quinta stella usciva dalla scheda. */
.recensione-testa { display: flex; align-items: center; gap: 12px; }
.recensione figcaption { display: flex; flex-direction: column; gap: 4px; min-width: 0; line-height: 1.3; }
.recensione figcaption strong { color: var(--notte); }
.recensione-fonte { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: .86rem; color: var(--grigio); }
.recensione-fonte .stelle { vertical-align: 0; }
.recensione-fonte .ic { width: 15px; height: 15px; }
.iniziale { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--celeste), var(--vivo)); color: var(--abisso); font: 600 1.2rem/1 var(--titoli); }
@media (min-width: 900px) { .griglia-recensioni { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.muro { overflow: hidden; }
.muro-file { display: grid; gap: 16px; }
.fila { display: flex; width: max-content; }
.fila ul { display: flex; list-style: none; gap: 16px; padding-right: 16px; }
/* Le schede di una fila hanno la stessa altezza: i fondi non saltano. */
.fila li { display: flex; width: min(84vw, 380px); }
.fila .recensione { flex: 1; }
html.anim .fila:nth-child(1) ul { animation: nastro 60s linear infinite; }
html.anim .fila:nth-child(2) ul { animation: nastro-inverso 70s linear infinite; }
@keyframes nastro-inverso { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.muro-file:hover ul, .muro-file:focus-within ul { animation-play-state: paused !important; }
html:not(.anim) .fila { width: auto; overflow-x: auto; overscroll-behavior-x: contain; padding-inline: 20px; scroll-padding-inline: 20px; scroll-snap-type: x mandatory; }
html:not(.anim) .fila ul[aria-hidden] { display: none; }
html:not(.anim) .fila li { scroll-snap-align: start; }
.muro-piede { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 36px; }
.voto-grande { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 8px 0 4px; font-size: 1.15rem; }
.voto-grande .stelle .ic { width: 26px; height: 26px; }
.voto-grande p { margin: 0; }

/* --------------------------------------------------------------- video */

.giostra ul { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: min(62vw, 250px); gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--margine, 20px); margin-inline: calc(-1 * var(--margine, 20px)); padding: 8px var(--margine, 20px) 16px; scrollbar-width: none; }
.giostra ul::-webkit-scrollbar { display: none; }
.giostra li { scroll-snap-align: start; }
/* Le miniature di YouTube hanno già scritte impresse: il titolo sta sotto,
   su fondo pieno, e non sopra l'immagine dove si leggerebbe a fatica. La
   miniatura si vede intera (9:16, come il video): tagliata, le scritte restavano a metà. */
.video { position: relative; display: grid; grid-template-rows: auto 1fr; height: 100%; border-radius: var(--r-l); overflow: hidden; background: var(--abisso); color: #fff; text-decoration: none; box-shadow: var(--ombra); isolation: isolate; }
.video img { grid-area: 1 / 1; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; transition: transform 1.2s var(--molla); }
.video-play { grid-area: 1 / 1; place-self: center; position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgb(255 255 255 / .18); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .4); transition: transform .5s var(--molla), background .3s; }
.video-play .ic { width: 26px; height: 26px; margin-left: 3px; }
.video-titolo { position: relative; z-index: 1; padding: 14px 16px 18px; background: var(--abisso); font-weight: 700; line-height: 1.3; font-size: 1rem; color: #fff; }
.nota-video { margin: 20px 0 0; }
@media (min-width: 600px) { .giostra ul { grid-auto-columns: min(34vw, 260px); } }
/* Con il mouse la barra si vede: senza, una giostra più larga dello schermo non si scopre. */
@media (min-width: 1024px) { .giostra ul { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; grid-auto-columns: calc((100% - 56px) / 5); } }
.lettore { padding: 0; border: 0; background: transparent; width: min(420px, 92vw); max-height: 92dvh; overflow: visible; }
.lettore::backdrop { background: rgb(2 18 32 / .88); backdrop-filter: blur(6px); }
.lettore iframe { display: block; width: 100%; aspect-ratio: 9 / 16; max-height: 86dvh; border: 0; border-radius: var(--r-l); background: #000; }
.lettore-chiudi { position: absolute; right: 0; top: -60px; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #fff; color: var(--notte); cursor: pointer; }

/* -------------------------------------------------------- domande frequenti */

.domande { border-top: 1px solid var(--linea); }
.domande details { border-bottom: 1px solid var(--linea); }
.domande summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 68px; padding-block: 18px; font-weight: 700; font-size: 1.12rem; color: var(--notte); cursor: pointer; list-style: none; }
.domande summary::-webkit-details-marker { display: none; }
.segno { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--nebbia); box-shadow: inset 0 0 0 1px var(--linea); transition: background .4s, transform .6s var(--molla); }
.segno i { position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: var(--notte); transition: transform .6s var(--molla); }
.segno i:last-child { transform: rotate(90deg); }
.domande details[open] .segno { background: var(--vivo); transform: rotate(180deg); }
.domande details[open] .segno i:last-child { transform: rotate(0); }
.domande details > div { padding: 0 0 22px; max-width: 46em; color: var(--inchiostro); }
.domande details > div p { margin: 0; }
html.anim .domande details[open] > div { animation: apri .6s var(--molla); }
@keyframes apri { from { opacity: 0; transform: translateY(-8px); } }
.profondo .domande, .profondo .domande details { border-color: rgb(255 255 255 / .14); }
.profondo .domande summary { color: #fff; }
.profondo .domande details > div { color: var(--su-scuro); }

/* ---------------------------------------------------------- modulo a passi */

.modulo { color: var(--inchiostro); }
.modulo .lastra { padding: 24px 20px 22px; }
.modulo-scuro .vassoio { background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), 0 30px 80px -30px rgb(0 0 0 / .6); }
.modulo-titolo { font: 600 1.65rem/1.15 var(--titoli); letter-spacing: -.015em; color: var(--notte); margin: 0 0 4px; }
.modulo-intro { color: var(--grigio); margin: 0 0 16px; font-size: 1rem; }
.avanzamento { height: 6px; border-radius: 6px; background: var(--nebbia); overflow: hidden; margin-bottom: 8px; }
.avanzamento span { display: block; height: 100%; width: calc(100% * var(--avanzamento, 1)); border-radius: 6px; background: linear-gradient(90deg, var(--celeste), var(--vivo)); transition: width .8s var(--molla); }
.passo-di { margin: 0 0 18px; font-size: .86rem; font-weight: 700; letter-spacing: .06em; color: var(--oceano); }
html:not(.js) .passo-di, html:not(.js) .avanzamento { display: none; }
.passo { border: 0; margin: 0 0 8px; padding: 0; min-width: 0; }
.passo-domanda { display: block; padding: 0; margin: 0 0 14px; font: 600 1.32rem/1.25 var(--titoli); color: var(--inchiostro); outline: none; }
.scelte { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.scelta-tile { position: relative; display: block; cursor: pointer; }
.scelta-tile input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.scelta-tile > span { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 92px; padding: 14px 16px; border-radius: var(--r-m); background: var(--nebbia); box-shadow: inset 0 0 0 1.5px var(--linea); font-weight: 700; font-size: 1.05rem; color: var(--notte); transition: box-shadow .3s, background .3s, transform .4s var(--molla); }
.scelta-tile .ic { width: 26px; height: 26px; color: var(--oceano); }
.scelta-tile input:checked + span { background: #e6fbf8; box-shadow: inset 0 0 0 2px var(--vivo-scuro); transform: scale(.98); }
.scelta-tile input:checked + span .ic { color: var(--vivo-scuro); }
.scelta-tile input:focus-visible + span { outline: 3px solid var(--celeste); outline-offset: 3px; }
.passo-rassicura { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font-size: .95rem; color: var(--grigio); }
.passo-rassicura .ic { color: var(--verde); }
.campo { margin: 0 0 16px; border: 0; padding: 0; }
.campo label, .campo legend { display: block; font-weight: 700; margin-bottom: 8px; padding: 0; color: var(--inchiostro); }
.facoltativo { font-weight: 500; color: var(--grigio); font-size: .9rem; }
.modulo input[type='text'], .modulo input:not([type]), .modulo input[type='tel'], .modulo input[type='email'], .modulo select, .modulo textarea {
  width: 100%; min-height: 58px; padding: 14px 18px; border: 0; border-radius: var(--r-m); background: var(--nebbia); box-shadow: inset 0 0 0 1.5px var(--linea);
  font: 400 1.125rem/1.3 var(--testo); color: var(--inchiostro); transition: box-shadow .3s, background .3s;
}
.modulo textarea { min-height: 130px; resize: vertical; }
/* Il campo del curriculum: largo quanto il modulo (da solo sbordava a 439 px) e col bottone a pillola. */
.modulo input[type='file'] { width: 100%; max-width: 100%; font: inherit; font-size: 1rem; padding: 6px 0; color: var(--grigio); }
.modulo input[type='file']::file-selector-button { margin-right: 14px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--nebbia); color: var(--notte); font: 700 1rem var(--testo); box-shadow: inset 0 0 0 1.5px var(--linea-forte); cursor: pointer; }
.modulo input:focus, .modulo select:focus, .modulo textarea:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 2px var(--oceano), 0 0 0 5px rgb(75 184 230 / .25); }
.modulo [aria-invalid='true'] { box-shadow: inset 0 0 0 2px var(--rosso) !important; }
.errore { color: var(--rosso); font-size: .95rem; font-weight: 600; margin: 8px 0 0; }
.facoltativi { margin: 4px 0 14px; }
.facoltativi summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--oceano); cursor: pointer; }
.facoltativi[open] summary { margin-bottom: 8px; }
.spunta { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 6px; font-size: .98rem; cursor: pointer; }
.spunta input { width: 24px; height: 24px; margin: 1px 0 0; flex: none; accent-color: var(--vivo-scuro); }
.modulo-azioni { display: flex; gap: 10px; margin-top: 18px; }
.modulo-azioni .btn { flex: 1; justify-content: space-between; }
.modulo-azioni .indietro { flex: 0 0 auto; }
/* Senza JavaScript i passi sono un modulo solo: niente Avanti, niente Indietro. */
html:not(.js) [data-avanti], html:not(.js) [data-indietro] { display: none; }
.js [data-passi].a-passi .passo:not(.corrente) { display: none; }
/* Dal primo disegno, non da quando parte sito.js: se il modulo nascesse con tutti
   i passi e poi si accorciasse, l'eroe accanto salterebbe (CLS). */
.js [data-passi]:not(.a-passi) .passo:not(:first-of-type), .js [data-passi]:not(.a-passi) .invia { display: none; }
.js [data-passi].a-passi:not(.ultimo) .invia { display: none; }
.js [data-passi].a-passi.ultimo [data-avanti] { display: none; }
html.anim .passo.corrente { animation: entra-passo .7s var(--molla); }
html.anim .passo.corrente.da-dietro { animation-name: entra-passo-dietro; }
@keyframes entra-passo { from { opacity: 0; transform: translateX(28px); } }
@keyframes entra-passo-dietro { from { opacity: 0; transform: translateX(-28px); } }
.modulo-nota { font-size: .9rem; color: var(--grigio); margin: 14px 0 0; }
.modulo-stato:empty { display: none; }
.modulo-stato { margin: 12px 0 0; font-weight: 600; color: var(--rosso); }
.modulo button[disabled] { opacity: .7; cursor: progress; }
@media (min-width: 600px) { .modulo .lastra { padding: 34px 32px 28px; } .scelte { gap: 12px; } }

/* ------------------------------------------------------------- chiusura */

.chiusura-griglia { display: grid; gap: 40px; align-items: center; }
.chiusura-testo p { font-size: 1.2rem; }
.chiusura .elenco-spunte .ic { color: var(--vivo-chiaro); }
.chiusura-tel { color: var(--su-scuro-2); }
.chiusura-tel a { color: #fff !important; font-weight: 700; }
@media (min-width: 900px) { .chiusura-griglia { grid-template-columns: 1fr minmax(420px, .9fr); gap: 80px; } }

.elenco-spunte { list-style: none; display: grid; gap: 12px; margin: 22px 0 26px; }
.punti + .elenco-spunte { margin-top: 48px; }
.elenco-spunte li { display: flex; gap: 12px; align-items: flex-start; }
.elenco-spunte .ic { color: var(--verde); margin-top: 3px; }
.elenco-numeri { padding-left: 1.3em; display: grid; gap: 10px; margin: 0 0 1em; }

/* -------------------------------------------------------- pagine interne */

.eroe-pagina { position: relative; padding: 120px 0 72px; }
.eroe-pagina.profondo { padding-bottom: 96px; }
.eroe-pagina .eroe-griglia { align-items: center; }
.eroe-pagina .eroe-sotto { color: var(--grigio); }
.eroe-pagina.profondo .eroe-sotto { color: var(--su-scuro); }
.eroe-figura { margin: 0; position: relative; }
/* La foto di testata delle pagine interne: la cornice segue la foto, nella sua
   forma, senza bande ai lati. Le verticali si fermano in altezza e la cornice
   si stringe attorno; le orizzontali vanno a tutta colonna. */
.eroe-figura { justify-self: center; width: fit-content; max-width: 100%; }
.eroe-figura .lastra { height: auto; }
.eroe-figura img { width: auto; max-width: 100%; height: auto; max-height: min(72vh, 600px); }
/* Nelle schede delle guide la foto riempie il riquadro: dove guardare se è verticale. */
.fuoco-basso { object-position: 50% 68%; }
.fuoco-alto { object-position: 50% 28%; }

.eroe-figura-chiara img { padding: 6%; background: #fff; }
.eroe-semplice { padding: 128px 0 64px; background: var(--nebbia); }
.eroe-semplice.profondo { background: radial-gradient(120% 80% at 70% 0%, #0a4d7e 0%, var(--abisso-2) 45%, var(--abisso) 100%); }
.eroe-semplice .eroe-sotto { color: var(--grigio); }
.eroe-semplice.profondo .eroe-sotto { color: var(--su-scuro); }
.briciole:not(.briciole-scure) + .eroe-semplice { padding-top: 24px; }
@media (min-width: 900px) {
  .eroe-pagina { padding: 150px 0 110px; }
  .eroe-pagina .eroe-griglia { grid-template-columns: 1.1fr .9fr; gap: 72px; }
  .eroe-semplice { padding: 168px 0 88px; }
}

.scelta { list-style: none; display: grid; gap: 10px; }
.scelta a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; padding: 14px 14px 14px 22px; border-radius: var(--r-l); background: var(--bianco); box-shadow: inset 0 0 0 1px var(--linea), var(--ombra); color: var(--inchiostro); text-decoration: none; transition: transform .6s var(--molla), box-shadow .4s; }
.profondo .scelta a { background: rgb(255 255 255 / .07); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); }
.scelta strong { display: inline-flex; align-items: center; gap: 12px; color: var(--notte); white-space: nowrap; }
@media (min-width: 900px) { .scelta { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; } }
/* A 320 px descrizione e prodotto sulla stessa riga chiedevano 307 px su 280. */
@media (max-width: 359px) { .scelta a { flex-wrap: wrap; row-gap: 8px; } .scelta strong { margin-left: auto; } }
.scelta-404 { margin: 28px 0; }

/* Il quiz: tre domande, un consiglio. In cima dove sei (Domanda 1 di 3 e la
   barra in tre), poi la domanda grande, una riga d'aiuto, e le risposte come
   tasselli: icona, titolo, una riga che spiega, freccia. */
.quiz .lastra { padding: 26px 20px 24px; }
.quiz-testa { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.quiz-contatore { margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--oceano); }
.quiz-barra { display: flex; gap: 6px; flex: none; }
.quiz-barra i { width: 30px; height: 6px; border-radius: 3px; background: var(--nebbia); box-shadow: inset 0 0 0 1px var(--linea); transition: background .5s var(--molla), box-shadow .5s; }
.quiz-barra i.pieno { background: linear-gradient(90deg, var(--celeste), var(--vivo)); box-shadow: none; }
.quiz-domanda { font: 600 clamp(1.65rem, 1.25rem + 1.6vw, 2.35rem)/1.15 var(--titoli); letter-spacing: -.015em; color: var(--notte); margin: 0 0 8px; outline: none; }
.quiz-aiuto { color: var(--grigio); margin: 0 0 24px; }
.quiz-scelte { display: grid; gap: 12px; }
.quiz-scelta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%; min-height: 88px; padding: 14px 16px; border: 0; border-radius: var(--r-l);
  background: var(--nebbia); box-shadow: inset 0 0 0 1.5px var(--linea); color: var(--notte); font: inherit; text-align: left; cursor: pointer;
  transition: box-shadow .35s var(--molla), background .3s, transform .45s var(--molla); }
.quiz-scelta-icona { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fff; color: var(--oceano); box-shadow: inset 0 0 0 1px var(--linea), 0 8px 18px -10px rgb(3 27 51 / .35); transition: background .3s, color .3s, transform .5s var(--molla); }
.quiz-scelta-icona .ic { width: 26px; height: 26px; }
.quiz-scelta-testo { display: grid; gap: 3px; overflow-wrap: break-word; }
/* A 320 px icona, testo e freccia chiedevano 246 px su 228. */
@media (max-width: 379px) {
  .quiz .lastra { padding: 22px 16px 20px; }
  .quiz-scelta { gap: 12px; padding: 12px; }
  .quiz-scelta-icona { width: 42px; height: 42px; }
  .quiz-scelta-icona .ic { width: 22px; height: 22px; }
  .quiz-scelta-freccia { width: 32px; height: 32px; }
}
.quiz-scelta-testo strong { font-size: 1.14rem; line-height: 1.25; }
.quiz-scelta-testo span { font-size: .96rem; line-height: 1.4; color: var(--grigio); }
.quiz-scelta-freccia { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--notte); box-shadow: inset 0 0 0 1px var(--linea); transition: transform .5s var(--molla), background .3s, color .3s; }
.quiz-scelta-freccia .ic { width: 18px; height: 18px; }
.quiz-scelta:focus-visible { outline: 3px solid var(--celeste); outline-offset: 3px; }
.quiz-scelta:active { transform: scale(.98); }
.quiz-scelta[aria-pressed='true'] { background: #e6fbf8; box-shadow: inset 0 0 0 2px var(--vivo-scuro); }
.quiz-scelta[aria-pressed='true'] .quiz-scelta-icona, .quiz-scelta[aria-pressed='true'] .quiz-scelta-freccia { background: var(--vivo); color: var(--abisso); }
.quiz-indietro { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 18px; padding: 0 2px; border: 0; background: none; color: var(--oceano); font: 700 .98rem/1 var(--testo); cursor: pointer; }
.quiz-indietro .ic { width: 18px; height: 18px; transform: rotate(180deg); }
.quiz-ricomincia .ic { transform: none; }
html.anim .quiz-passo:not([hidden]), html.anim .quiz-esito:not([hidden]) { animation: entra-passo .65s var(--molla); }
/* Il risultato: la foto del depuratore accanto al nome, ai tipi d'acqua e alle due strade. */
.quiz-esito { display: grid; gap: 24px; align-items: center; }
.quiz-esito-foto { width: min(100%, 300px); aspect-ratio: 1; border-radius: var(--r-l); overflow: hidden; background: #0b3c62; box-shadow: var(--ombra); }
.quiz-esito-foto img { width: 100%; height: 100%; object-fit: cover; }
.quiz-esito h3 { font: 600 clamp(2.3rem, 1.7rem + 2vw, 3.2rem)/1.02 var(--titoli); letter-spacing: -.02em; color: var(--notte); margin: 2px 0 6px; outline: none; }
.quiz-esito-famiglia { margin: 0 0 12px; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--oceano); }
.quiz-esito-testo > p:not(.pillola):not(.quiz-esito-famiglia) { color: var(--grigio); }
.quiz-esito .chip-acque { margin: 16px 0 0; }
.quiz-esito .bottoni { margin: 24px 0 4px; }
/* hidden vince sempre: un .btn con display proprio non deve ricomparire. */
[hidden] { display: none !important; }
.flusso h2 { font-family: var(--titoli); font-weight: 600; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); margin: 10px 0 6px; letter-spacing: -.015em; }
.profondo .numeri dd { color: #fff; }
.profondo .numeri dt { color: var(--su-scuro-2); }
.profondo .numeri div { border-color: rgb(255 255 255 / .25); }
@media (hover: hover) {
  .quiz-scelta:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--oceano), 0 16px 34px -20px rgb(3 27 51 / .4); }
  .quiz-scelta:hover .quiz-scelta-freccia { transform: translateX(3px); background: var(--vivo); color: var(--abisso); }
  .quiz-scelta:hover .quiz-scelta-icona { transform: scale(1.06); }
}
@media (min-width: 720px) {
  .quiz .lastra { padding: 40px 44px 38px; }
  .quiz-scelte { grid-template-columns: 1fr 1fr; gap: 14px; }
  .quiz-scelte-3 { grid-template-columns: repeat(3, 1fr); }
  /* Sul desktop il tassello si alza: icona e freccia in alto, il testo in basso. */
  .quiz-scelta { grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; align-items: start; gap: 22px 12px; min-height: 176px; padding: 22px; }
  .quiz-scelta-icona { grid-column: 1; grid-row: 1; }
  .quiz-scelta-freccia { grid-column: 2; grid-row: 1; }
  /* Il testo parte subito sotto l'icona: i titoli dei tasselli restano allineati anche con spiegazioni di lunghezza diversa. */
  .quiz-scelta-testo { grid-column: 1 / -1; grid-row: 2; align-self: start; }
  .quiz-esito { grid-template-columns: 300px 1fr; gap: 44px; }
}

.tabella-scorre { overflow-x: auto; border-radius: var(--r-l); background: #fff; box-shadow: inset 0 0 0 1px var(--linea), var(--ombra); }
.confronto, .tabella-semplice { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 1rem; }
.confronto th, .confronto td, .tabella-semplice th, .tabella-semplice td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.confronto thead th, .tabella-semplice thead th { background: var(--abisso); color: #fff; font-weight: 700; white-space: nowrap; }
.confronto tbody th { position: sticky; left: 0; background: #fff; font-weight: 700; white-space: nowrap; box-shadow: 1px 0 0 var(--linea); }
.confronto tbody th a { display: block; margin: -16px -18px; padding: 16px 18px; color: var(--notte); }
.confronto thead th:first-child { position: sticky; left: 0; z-index: 1; }
.confronto tbody tr:last-child > * { border-bottom: 0; }
.riga-corrente > * { background: #e6fbf8 !important; }
.riga-corrente small { font-weight: 700; color: var(--vivo-testo); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.mini-acque { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.mini-acque li { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.mini-acque .ic { width: 16px; height: 16px; color: var(--oceano); }
.nota-tabella { margin: 16px 0 0; }
@media (min-width: 900px) { .nota-tabella { display: none; } }

.costi { display: grid; gap: 16px; }
.costo .lastra { padding: 30px 26px; }
.costo-evidenza .vassoio { background: linear-gradient(135deg, rgb(34 199 184 / .35), rgb(75 184 230 / .25)); box-shadow: none; }
.costo-etichetta { display: inline-block; margin: 0 0 12px; padding: 5px 12px; border-radius: 999px; background: var(--abisso); color: var(--vivo-chiaro); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.costo h3 { font-family: var(--titoli); font-size: 1.7rem; font-weight: 600; }
.costo-cifra { overflow-wrap: break-word; font: 600 clamp(2.4rem, 1.8rem + 2vw, 3.2rem)/1 var(--titoli); letter-spacing: -.02em; color: var(--notte); margin: 0 0 6px; }
.costo-giorno { margin: 0 0 14px; font-weight: 700; color: var(--vivo-testo); }
.costo p:not(.costo-cifra):not(.costo-etichetta):not(.costo-giorno) { color: var(--grigio); }
.nota-costi { margin: 20px 0 0; }
@media (min-width: 900px) { .costi { grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: stretch; } .costi-uno { grid-template-columns: minmax(0, 560px); } .costo .lastra { padding: 40px; } }

.affiancato { display: grid; gap: 32px; align-items: center; }
.affiancato figure { margin: 0; }
/* Accanto al testo la foto tiene la sua forma: niente riquadro che la tagli. */
.affiancato figure img { width: 100%; height: auto; transition: transform 1.6s var(--molla); }
@media (min-width: 900px) { .affiancato { grid-template-columns: 1fr 1fr; gap: 80px; } }

/* ----------------------------------------------------------------- scheda */

.scheda-testa { position: relative; padding: 112px 0 64px; }
.scheda-griglia { display: grid; gap: 28px; }
/* min-width 0: dentro la griglia della scheda la galleria si allargherebbe alle sue foto invece di scorrere. */
.scheda-galleria { min-width: 0; }
/* Sul telefono le foto scorrono tutte alla stessa altezza, ognuna larga quanto
   la sua forma: la cornice segue la foto, nessuna banda e nessun taglio. */
.scheda-galleria ul { list-style: none; display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--margine, 20px); margin-inline: calc(-1 * var(--margine, 20px)); padding: 0 var(--margine, 20px) 8px; scrollbar-width: none; }
.scheda-galleria ul::-webkit-scrollbar { display: none; }
.scheda-galleria li { flex: none; scroll-snap-align: start; }
.scheda-galleria .lastra { height: auto; }
/* Alta min(78vw, 380px) e larga quanto la sua forma (--r, dal build), ma mai
   più larga dello schermo meno i margini e i 6 + 6 px della cornice: l'altezza
   segue dalla forma. */
.scheda-galleria img { width: min(100vw - 2 * var(--margine, 20px) - 12px, min(78vw, 380px) * var(--r, 1.5)); max-width: none; height: auto; }
.scheda-galleria ul { align-items: center; }
.scheda-info h1 { margin-bottom: .2em; font-size: clamp(2.8rem, 1.8rem + 4.5vw, 5.2rem); }
.scheda-famiglia { margin: 0 0 6px; }
.scheda-azione { font-size: 1.15rem; line-height: 1.6; padding-left: 18px; border-left: 3px solid var(--vivo); margin: 14px 0 20px; }
.profondo .scheda-azione { color: var(--su-scuro); }
.dati-chiave { display: flex; flex-wrap: wrap; gap: 14px 32px; margin: 22px 0 4px; }
.dati-chiave div { display: flex; flex-direction: column-reverse; }
.dati-chiave dt { font-size: .86rem; color: var(--grigio); font-weight: 600; }
.dati-chiave dd { margin: 0; font: 600 1.45rem/1.2 var(--titoli); color: var(--notte); }
.profondo .dati-chiave dt { color: var(--su-scuro-2); }
.profondo .dati-chiave dd { color: #fff; }
.scheda-rassicura { display: flex; align-items: center; gap: 10px; font-size: .98rem; color: var(--grigio); margin: 0; }
.scheda-rassicura .ic { color: var(--verde); }
.profondo .scheda-rassicura { color: var(--su-scuro-2); }
.profondo .scheda-rassicura .ic { color: var(--vivo-chiaro); }
.scheda-sintesi { display: grid; gap: 28px; }
.adatto .lastra { padding: 26px 26px 10px; }
.adatto h3 { margin-bottom: 0; }
@media (min-width: 900px) {
  .scheda-testa { padding: 140px 0 96px; }
  .scheda-griglia { grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
  /* Sul desktop la prima foto grande, le altre in fila sotto alla stessa altezza. */
  .scheda-galleria ul { flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; overflow: visible; }
  .scheda-galleria li:first-child { flex: 1 1 100%; display: flex; justify-content: center; }
  .scheda-galleria li:first-child img { width: auto; max-width: 100%; height: auto; max-height: 540px; }
  /* Alte 210 px, ma mai più larghe della colonna (una panoramica 2:1 sbordava). */
  .scheda-galleria li { max-width: 100%; }
  .scheda-galleria li:not(:first-child) img { width: calc(210px * var(--r, 1.5)); max-width: 100%; height: auto; }
  .scheda-galleria .giostra-punti { display: none; }
  .scheda-sintesi { grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: start; }
}

.punti { list-style: none; display: grid; gap: 16px; }
.punti li .lastra { padding: 28px; position: relative; }
.punti li .lastra::before { content: ''; position: absolute; left: 28px; top: 0; width: 44px; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--celeste), var(--vivo)); }
.punti h3 { font-size: 1.28rem; margin-top: 6px; }
.punti p { margin: 0; color: var(--grigio); }
@media (min-width: 900px) { .punti { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.scheda-due { display: grid; gap: 56px; }
@media (min-width: 900px) { .scheda-due { grid-template-columns: 1.2fr 1fr; gap: 88px; } }
.scheda-tecnica { margin: 0; border-top: 1px solid var(--linea); }
.scheda-tecnica div { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--linea); }
.scheda-tecnica dt { color: var(--grigio); font-weight: 600; }
.scheda-tecnica dd { margin: 0; font-weight: 600; }
.documenti { list-style: none; border-top: 1px solid var(--linea); }
.documenti li { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--linea); font-weight: 600; }
.documenti .ic { color: var(--oceano); }
.doc-stato { margin-left: auto; font-size: .8rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: var(--nebbia); color: var(--notte); }
.galleria-accessori { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 36px; }
.galleria-accessori li { aspect-ratio: 1; border-radius: var(--r-m); overflow: hidden; background: #f4f6f8; }
.galleria-accessori img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .galleria-accessori { grid-template-columns: repeat(5, 1fr); } }
.galleria-clienti { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.galleria-clienti li { aspect-ratio: 3 / 4; border-radius: var(--r-m); overflow: hidden; }
.galleria-clienti img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .galleria-clienti { grid-template-columns: repeat(6, 1fr); gap: 12px; } }

/* ------------------------------------------------------- percorso, misure */

.percorso { list-style: none; display: grid; }
.percorso li { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding-bottom: 36px; }
.percorso li::before { content: ''; position: absolute; left: 25px; top: 56px; bottom: 6px; width: 2px; background: linear-gradient(var(--celeste), rgb(75 184 230 / .1)); }
.percorso li:last-child::before { display: none; }
.passo-num { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--bianco); color: var(--notte); font: 600 1.4rem/1 var(--titoli); box-shadow: inset 0 0 0 2px rgb(7 95 146 / .15), var(--ombra); }
.percorso h2, .percorso h3 { font-family: var(--titoli); font-size: 1.55rem; margin-bottom: .3em; font-weight: 600; }
.percorso p:last-child { margin: 0; color: var(--grigio); }
.percorso-quando { margin: 10px 0 4px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--oceano); }
@media (min-width: 900px) {
  .percorso-breve { grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .percorso-breve li { grid-template-columns: 1fr; padding: 0; }
  .percorso-breve li::before { display: none; }
}
.misure { margin: 0 0 16px; display: grid; gap: 16px; }
.misure dt { font-weight: 700; color: var(--notte); }
.misure dd { margin: 0; color: var(--grigio); }

/* -------------------------------------------------------- analisi, grazie */

.eroe-modulo .eroe-griglia { align-items: start; }
.eroe-modulo .modulo { scroll-margin-top: 96px; }
.eroe-grazie { text-align: center; }
.eroe-grazie .eroe-sotto { margin-inline: auto; }
.grazie-segno { position: relative; display: inline-grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--vivo); color: var(--abisso); margin-bottom: 28px; box-shadow: 0 0 0 12px rgb(34 199 184 / .18), 0 0 60px rgb(34 199 184 / .5); }
.grazie-segno .ic { width: 46px; height: 46px; stroke-width: 2; }
html.anim .grazie-segno { animation: tuffo 1.1s var(--molla) both; }
html.anim .grazie-segno .ic path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: disegna .8s .5s var(--uscita) forwards; }
@keyframes tuffo { from { transform: scale(.2) translateY(-60px); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } to { transform: none; } }
@keyframes disegna { to { stroke-dashoffset: 0; } }
.bollicine { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bollicine i { position: absolute; bottom: -40px; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(207 243 255 / .6); }
html.anim .bollicine i { animation: bolla 9s var(--uscita) infinite; }
.bollicine i:nth-child(1) { left: 8%; } .bollicine i:nth-child(2) { left: 22%; width: 8px; height: 8px; animation-delay: -2s; } .bollicine i:nth-child(3) { left: 41%; width: 18px; height: 18px; animation-delay: -5s; }
.bollicine i:nth-child(4) { left: 63%; width: 10px; height: 10px; animation-delay: -1s; } .bollicine i:nth-child(5) { left: 79%; animation-delay: -6s; } .bollicine i:nth-child(6) { left: 92%; width: 7px; height: 7px; animation-delay: -3.5s; }
@keyframes bolla { from { transform: translateY(0) translateX(0); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-110vh) translateX(30px); opacity: 0; } }

/* ----------------------------------------------------------------- guide */

.argomenti { margin-top: 28px; }
.argomenti ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.argomenti a { display: inline-flex; align-items: center; min-height: 46px; padding: 8px 18px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--linea); color: var(--notte); font-weight: 600; text-decoration: none; transition: box-shadow .3s, background .3s; }
.argomenti a[aria-current] { background: var(--abisso); color: #fff; box-shadow: none; }
.profondo .argomenti a { background: rgb(255 255 255 / .08); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); }
.profondo .argomenti a[aria-current] { background: var(--vivo); color: var(--abisso); }

.griglia-guide { display: grid; gap: 20px; }
.carta-guida .vassoio { height: 100%; }
.carta-guida .lastra { display: flex; flex-direction: column; }
.carta-guida .carta-foto { aspect-ratio: 16 / 10; }
.carta-guida .carta-testo { padding: 20px 22px 22px; }
.carta-guida h3, .carta-guida h2 { font-family: var(--titoli); font-weight: 600; font-size: 1.4rem; line-height: 1.25; letter-spacing: -.01em; margin-bottom: 10px; }
.carta-meta { margin: auto 0 0; font-size: .92rem; color: var(--grigio); }
@media (min-width: 720px) { .griglia-guide { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .griglia-guide { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.guida-evidenza .lastra { display: grid; background: var(--nebbia); }
.guida-evidenza a { text-decoration: none; color: inherit; }
.guida-evidenza .carta-foto { aspect-ratio: 16 / 10; }
.guida-evidenza .carta-testo { padding: 26px; }
.guida-evidenza h2 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); }
.guida-evidenza p:not(.pillola) { color: var(--grigio); }
@media (min-width: 900px) { .guida-evidenza .lastra { grid-template-columns: 1.2fr 1fr; align-items: center; } .guida-evidenza .carta-foto { aspect-ratio: 4 / 3; height: 100%; } .guida-evidenza .carta-testo { padding: 48px; } }

.lettura { position: fixed; left: 0; top: 0; z-index: 60; width: 100%; height: 3px; background: linear-gradient(90deg, var(--celeste), var(--vivo)); transform-origin: 0 50%; transform: scaleX(var(--letto, 0)); pointer-events: none; }
.articolo-testa { padding-top: 24px; }
/* I titoli delle guide sono frasi intere: una scala sua, più bassa di quella dei
   primi schermi (sul desktop arrivavano a 88 px, a 320 px uscivano dallo schermo). */
.articolo-testa h1 { font-size: clamp(2rem, 1.1rem + 5vw, 4.2rem); }
.articolo-sommario { font-size: 1.25rem; color: var(--grigio); }
.articolo-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .95rem; color: var(--grigio); border-top: 1px solid var(--linea); padding-top: 16px; }
.autore { display: inline-flex; align-items: center; gap: 8px; }
.autore .ic { color: var(--oceano); }
.articolo-copertina { margin-block: 12px 40px; }
/* La copertina nella sua forma, intera: le verticali si fermano a 620 px di
   altezza e si stringono, al centro, senza bande ai lati. */
.articolo-copertina img { border-radius: var(--r-xl); width: auto; max-width: 100%; height: auto; max-height: 620px; margin-inline: auto; }

.articolo-griglia { display: grid; gap: 24px; padding-bottom: 72px; }
.indice { background: var(--nebbia); border-radius: var(--r-m); padding: 0 20px; align-self: start; }
.indice summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; font-weight: 700; color: var(--notte); cursor: pointer; list-style: none; }
.indice summary::-webkit-details-marker { display: none; }
.indice summary .ic { transition: transform .5s var(--molla); }
.indice[open] summary .ic { transform: rotate(180deg); }
.indice ol { padding: 0 0 18px 1.2em; display: grid; gap: 10px; font-size: .98rem; }
.indice a { color: var(--inchiostro); }
.testo-articolo { max-width: 720px; min-width: 0; font-size: 1.15rem; line-height: 1.75; }
.testo-articolo h2 { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); margin: 1.8em 0 .5em; }
.testo-articolo h3 { font-size: 1.3rem; margin: 1.6em 0 .4em; }
.testo-articolo h4 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
.testo-articolo ul, .testo-articolo ol { padding-left: 1.3em; margin: 0 0 1.2em; display: grid; gap: 6px; }
/* Le foto nel testo: le orizzontali a tutta colonna, le verticali non oltre 460 px. */
.testo-articolo img { border-radius: var(--r-m); margin: 1.6em auto; width: auto; max-width: 100%; max-height: 460px; object-fit: contain; }
.testo-articolo blockquote { margin: 1.5em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--vivo); color: var(--notte); font-size: 1.2rem; }
.testo-articolo .tabella-scorre { margin: 1.4em 0; }
.testo-articolo table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .98rem; line-height: 1.5; }
.testo-articolo th, .testo-articolo td { padding: 12px 14px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.testo-articolo thead th, .testo-articolo tr:first-child th { background: var(--nebbia); color: var(--notte); }
.riquadro-analisi { margin-top: 56px; }
.riquadro-analisi .lastra { padding: 28px 22px; background: linear-gradient(160deg, var(--notte), var(--abisso)); color: var(--su-scuro); }
.riquadro-analisi .btn { width: 100%; justify-content: space-between; }
@media (min-width: 600px) { .riquadro-analisi .lastra { padding: 36px; } .riquadro-analisi .btn { width: auto; } }
.riquadro-analisi h2 { color: #fff; margin: 0 0 .4em; font-size: 1.8rem; }
@media (min-width: 1024px) {
  .articolo-griglia { grid-template-columns: 270px minmax(0, 720px); gap: 72px; justify-content: center; }
  .indice { position: sticky; top: 110px; }
}
.testo-lungo h2 { margin-top: 1.4em; }
.testo-lungo h2:first-child, .testo-lungo .pillola + h2 { margin-top: 0; }
.testo-lungo code { font-size: .9em; background: var(--nebbia); padding: 1px 6px; border-radius: 4px; }

/* -------------------------------------------------------------- contatti */

.recapiti { list-style: none; display: grid; gap: 14px; }
.recapiti .lastra { height: 100%; }
.recapiti a { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto auto; column-gap: 16px; align-items: center; padding: 22px; height: 100%; text-decoration: none; color: var(--inchiostro); }
.recapiti .ic { grid-row: 1 / 4; width: 52px; height: 52px; padding: 13px; border-radius: 50%; background: var(--nebbia); color: var(--notte); transition: background .3s, transform .6s var(--molla); }
.recapito-tipo { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--oceano); }
.recapiti strong { font-size: 1.15rem; color: var(--notte); overflow-wrap: anywhere; }
.recapiti a > span:last-child { font-size: .94rem; color: var(--grigio); }
@media (min-width: 720px) { .recapiti { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .recapiti { grid-template-columns: repeat(4, 1fr); } }
.dati-azienda p { color: var(--grigio); }

.numeri { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; margin: 0; }
.numeri div { display: flex; flex-direction: column-reverse; gap: 6px; border-top: 1px solid var(--linea-forte); padding-top: 14px; }
.numeri dd { margin: 0; font: 600 clamp(2.4rem, 1.6rem + 3vw, 4rem)/1 var(--titoli); letter-spacing: -.03em; color: var(--notte); }
.numeri dt { color: var(--grigio); font-weight: 600; }
@media (min-width: 900px) { .numeri { grid-template-columns: repeat(4, 1fr); } }

/* ------------------------------------------------------------------ piede */

/* Il filo in cima separa il piede dalla sezione sopra quando sono tutte e due blu. */
.piede { position: relative; background: var(--abisso); color: #c9dceb; padding: 0 0 calc(24px + var(--barra)); font-size: 1rem; overflow: hidden; border-top: 1px solid rgb(255 255 255 / .08); }
.piede a:not(.btn) { color: #fff; text-decoration: none; }
.piede a:not(.btn):hover { text-decoration: underline; color: #fff; }
.piede-fascia { background: radial-gradient(100% 120% at 80% 0%, #0a4d7e 0%, var(--abisso-2) 60%); border-bottom: 1px solid rgb(255 255 255 / .08); padding-block: 72px; }
.piede-fascia-dentro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 40px; }
.piede-domanda { margin: 0; }
.piede-titolo { display: block; font: 600 clamp(2.4rem, 1.5rem + 4vw, 4.6rem)/1.02 var(--titoli); letter-spacing: -.02em; color: #fff; }
.piede-titolo em { color: var(--vivo-chiaro); }
.piede-fascia .bottoni { margin: 0; }
.piede h2 { font-family: var(--testo); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--vivo-chiaro); margin-bottom: 16px; }
.piede ul { list-style: none; display: grid; gap: 4px; }
.piede-col a, .piede-contatti a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.piede-contatti .ic, .piede-orari .ic { width: 20px; height: 20px; color: var(--celeste); }
/* Il respiro sopra le colonne c'è sempre, con o senza la fascia «Pronto a bere meglio?». */
.piede-griglia { display: grid; gap: 40px; padding-top: 72px; }
.piede-marchio img { width: 190px; height: auto; margin-bottom: 18px; }
.piede-marchio p { max-width: 34em; }
.piede-social { display: flex !important; gap: 10px !important; }
.piede-social a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); transition: background .3s; }
.piede-social a:hover { background: rgb(255 255 255 / .08); }
.piede-orari { display: flex; gap: 10px; margin-top: 12px; }
/* La parola è larga 6,8 volte il suo corpo: diviso 7, entra intera nello schermo. */
.piede-gigante { margin: 56px 0 0; text-align: center; font: 600 calc(min(100vw - 40px, 1240px) / 7)/.8 var(--titoli); letter-spacing: -.05em; white-space: nowrap;
  background: linear-gradient(180deg, rgb(255 255 255 / .14), rgb(255 255 255 / 0)); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }
.piede-legale { margin-top: 24px; padding-top: 28px; border-top: 1px solid rgb(255 255 255 / .12); font-size: .88rem; color: #aac4d7; }
.piede-legale p { margin: 0 0 8px; }
.piede-legale a, .piede-legale .link { color: #e3eef6; }
@media (min-width: 720px) { .piede-griglia { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .piede { padding-bottom: 24px; } .piede-griglia { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.4fr; gap: 36px; padding-top: 96px; } .piede-fascia { padding-block: 96px; } }

/* --------------------------------------------------------------- consenso */

.consenso { position: fixed; inset: auto 10px calc(96px + env(safe-area-inset-bottom)) 10px; z-index: 60; border-radius: var(--r-l); padding: 18px 18px 16px; background: rgb(255 255 255 / .94); color: var(--inchiostro);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 0 0 1px var(--linea), var(--ombra-forte); max-height: 70dvh; overflow-y: auto; }
html.anim .consenso:not([hidden]) { animation: sali-su .8s var(--molla) both; animation-delay: calc(.6s + var(--avvio-ritardo, 0ms)); }
@keyframes sali-su { from { transform: translateY(40px); opacity: 0; } }
.consenso h2 { display: flex; align-items: center; gap: 8px; font-family: var(--testo); font-size: 1.02rem; font-weight: 700; margin: 0 0 6px; }
.consenso h2 .ic { color: var(--oceano); }
.consenso p { font-size: .95rem; line-height: 1.45; margin: 0 0 10px; }
.consenso-bottoni { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consenso .btn { justify-content: center; }
.consenso-scelte { margin: 0 0 12px; }
.consenso-scelte summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; color: var(--oceano); cursor: pointer; text-decoration: underline; }
.consenso-scelte label { display: flex; gap: 10px; align-items: center; min-height: 42px; font-size: .97rem; }
.consenso-scelte input { width: 22px; height: 22px; accent-color: var(--vivo-scuro); }
.consenso-scelte .btn { margin-top: 8px; width: 100%; }
@media (min-width: 720px) { .consenso { inset: auto auto 24px 24px; width: 440px; } }

/* ---------------------------------------------- mouse e dito, separati
   Gli effetti al passaggio del mouse solo dove c'è un mouse: sul telefono un
   tocco lascia l'elemento «sotto il mouse», e la carta restava accesa (il
   cerchio del video turchese, la foto ingrandita) finché non si toccava altro. */
@media (hover: hover) {
  .link-freccia:hover .link-cerchio, a:hover .link-cerchio { transform: translateX(4px); background: var(--vivo); }
  .btn:hover .btn-icona { transform: translate(3px, -1px) scale(1.06); }
  .btn-vivo:hover { color: var(--abisso); box-shadow: 0 1px 0 rgb(255 255 255 / .5) inset, 0 18px 40px -10px rgb(34 199 184 / .85); }
  .btn-linea:hover { box-shadow: inset 0 0 0 1.5px var(--notte); color: var(--notte); }
  .btn-vetro:hover { background: rgb(255 255 255 / .14); color: #fff; }
  .carta-prodotto a:hover .carta-foto img { transform: scale(1.05); }
  .carta-prodotto a:hover .carta-luce { opacity: 1; }
  .porta:hover .lastra { transform: translateY(-4px); }
  .porta:hover .porta-foto img { transform: scale(1.06); }
  .tessera-foto:hover img { transform: scale(1.05); }
  .video:hover img { transform: scale(1.06); }
  .video:hover .video-play { transform: scale(1.1); background: var(--vivo); color: var(--abisso); }
  .scelta-tile:hover > span { box-shadow: inset 0 0 0 1.5px var(--oceano); }
  .scelta a:hover { transform: translateY(-2px); color: var(--inchiostro); }
  .affiancato figure:hover img { transform: scale(1.04); }
  .carta-guida a:hover .carta-foto img { transform: scale(1.05); }
  .argomenti a:hover { box-shadow: inset 0 0 0 1.5px var(--notte); }
  .recapiti a:hover .ic { background: var(--vivo); transform: rotate(-8deg) scale(1.05); }
}
/* Col dito la risposta è al tocco: la carta si abbassa appena sotto il dito. */
@media (hover: none) {
  .carta-prodotto .vassoio, .carta-guida .vassoio, .porta, .video, .scelta a, .recapiti a, .guida-evidenza a, .scelta-tile > span { transition: transform .35s var(--molla), box-shadow .3s, background .3s; }
  .carta-prodotto .vassoio:active, .carta-guida .vassoio:active, .porta:active, .video:active, .scelta a:active, .recapiti a:active, .guida-evidenza a:active { transform: scale(.98); }
  .scelta-tile:active > span { transform: scale(.97); }
  .link-freccia:active .link-cerchio { background: var(--vivo); }
}

/* ============================================================ animazioni
   Lo stato di partenza esiste solo sotto html.anim. sito.js aggiunge .visto
   quando l'elemento entra nello schermo. */

html.anim [data-rivela]:not(.titolo-anim):not(.visto) { opacity: 0; transform: translateY(38px); }
html.anim [data-rivela]:not(.titolo-anim) { transition: opacity 1s var(--molla), transform 1.1s var(--molla); transition-delay: calc(var(--i, 0) * 80ms); }
html.anim .titolo-anim:not(.visto) .p > span, html.anim .titolo-anim:not(.visto) .p em > span { transform: translateY(108%); }
html.anim .titolo-anim .p > span, html.anim .titolo-anim .p em > span { transition: transform 1.05s var(--molla); transition-delay: calc(var(--i, 0) * 45ms); }
/* Le foto si aprono da una tenda. */
html.anim [data-tenda]:not(.visto) { clip-path: inset(18% 8% 18% 8% round var(--r-xl)); }
html.anim [data-tenda]:not(.visto) img { transform: scale(1.18); }
html.anim [data-tenda] { transition: clip-path 1.4s var(--molla); }
html.anim [data-tenda] img { transition: transform 1.8s var(--molla); }
/* Il primo schermo non aspetta lo scorrimento: entra al caricamento, solo con il CSS. */
/* Con l'avvio, il primo schermo entra mentre il velo si ritira (--avvio-ritardo). */
html.anim .entra { animation: entra 1.1s var(--molla) both; animation-delay: calc(var(--i, 0) * 90ms + 250ms + var(--avvio-ritardo, 0ms)); }
html.anim .entra.titolo-anim { animation: none; }
html.anim .entra.titolo-anim .p > span, html.anim .entra.titolo-anim .p em > span { animation: sali 1.1s var(--molla) both; animation-delay: calc(var(--i, 0) * 55ms + 120ms + var(--avvio-ritardo, 0ms)); transform: none; }
@keyframes entra { from { opacity: 0; transform: translateY(30px); } }
@keyframes sali { from { transform: translateY(108%); } }
/* La scheda si inclina sotto il dito o il mouse (sito.js imposta --rx e --ry). */
html.anim [data-inclina] { transform: rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); }
html.anim [data-magnete] { translate: var(--mx, 0) var(--my, 0); transition: translate .6s var(--molla), transform .5s var(--molla), box-shadow .5s var(--molla); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
html.fermo *, html.fermo *::before, html.fermo *::after { animation-play-state: paused !important; }
html.fermo .entra, html.fermo .entra * { animation: none !important; }

/* ---------------------------------------------------------------- l'avvio
   A ogni pagina il logo entra come acqua: le gocce scendono con un piccolo
   rimbalzo, il nome sale da sotto, la linea si riempie; poi il
   velo blu si ritira verso l'alto con un bordo a onda e la pagina entra da
   sotto, mentre il titolo compare. La prima volta in una visita dura poco più
   di un secondo e mezzo in tutto; cambiando pagina meno di un secondo (html.avvio-breve, lo mette la
   testa). Senza movimento (sistema o interruttore) non c'è. Le gocce e il nome
   sono lo stesso logo, tagliato con background-position: un'immagine sola,
   incorporata nel CSS dalla costruzione (vedi costruisci.mjs). */
:root { --avvio-tiene: 850ms; --avvio-esce: 720ms; --avvio-ritardo: 700ms; --logo-avvio: url('data:image/webp;base64,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'); }
html.avvio-breve { --avvio-tiene: 360ms; --avvio-esce: 620ms; --avvio-ritardo: 300ms; }
.avvio { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(90% 60% at 50% 40%, #0b5185 0%, var(--abisso-2) 55%, var(--abisso) 100%);
  animation: avvio-esce var(--avvio-esce) var(--uscita) var(--avvio-tiene) both; }
/* L'onda sotto il velo: lo segue mentre sale, come acqua che si ritira. */
.avvio::after { content: ''; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 100px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v46c-180 40-360 48-540 22S540 18 360 44 90 76 0 60z' fill='%23031b33'/%3E%3C/svg%3E") center top / 100% 100% no-repeat; }
@keyframes avvio-esce { to { transform: translateY(calc(-100% - 110px)); visibility: hidden; } }
.avvio-centro { position: relative; display: grid; justify-items: center; width: min(250px, 62vw);
  animation: avvio-centro-esce var(--avvio-esce) var(--uscita) var(--avvio-tiene) both; }
@keyframes avvio-centro-esce { to { transform: translateY(-70px) scale(.96); opacity: 0; } }
.avvio-gocce { width: 100%; aspect-ratio: 752 / 236; background: var(--logo-avvio) center top / 100% auto no-repeat;
  animation: avvio-gocce .75s cubic-bezier(.34, 1.56, .64, 1) .03s both; }
@keyframes avvio-gocce { from { transform: translateY(-54px) scale(.84); opacity: 0; filter: blur(8px); } 55% { opacity: 1; filter: blur(0); } }
.avvio-nome { width: 100%; aspect-ratio: 752 / 144; background: var(--logo-avvio) center bottom / 100% auto no-repeat;
  animation: avvio-nome .62s var(--molla) .36s both; }
@keyframes avvio-nome { from { clip-path: inset(100% 0 0 0); transform: translateY(16px); opacity: 0; } }
.avvio-linea { width: 72px; height: 3px; margin-top: 24px; border-radius: 3px; background: rgb(255 255 255 / .14); overflow: hidden; }
.avvio-linea i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--celeste), var(--vivo)); transform-origin: 0 50%;
  animation: avvio-linea var(--avvio-tiene) var(--molla) both; }
@keyframes avvio-linea { from { transform: scaleX(0); } }
/* Cambiando pagina: tutto più svelto. */
html.avvio-breve .avvio-gocce { animation-duration: .5s; animation-delay: 0s; }
html.avvio-breve .avvio-nome { animation-duration: .45s; animation-delay: .08s; }
/* Una pagina preparata in sottofondo (regole di anticipo) aspetta d'essere aperta. */
html.in-attesa .avvio, html.in-attesa .avvio *, html.in-attesa .entra, html.in-attesa .entra * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .avvio { display: none; } }
html.fermo .avvio { display: none; }

/* ------------------------------------------------ barra di scorrimento */

/* Con mouse e trackpad la barra è del sito: un binario di nebbia senza frecce
   e una pillola dal celeste all'oceano, che si allarga e si accende di
   turchese sotto il puntatore. Chrome, Edge e Safari leggono le pseudo -webkit-;
   Firefox, che non le conosce, prende i colori standard nel suo ramo. I due
   modi non vanno mescolati: in Chrome scrollbar-color e scrollbar-width
   spengono le pseudo -webkit- (e tornano le frecce di Windows).
   Sui telefoni resta l'indicatore del sistema, sottile e senza frecce: una
   barra disegnata lì toglierebbe 14 px di larghezza alla pagina. */
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar { width: 14px; height: 14px; }
  ::-webkit-scrollbar-track { background: var(--nebbia); box-shadow: inset 1px 0 0 var(--linea); }
  ::-webkit-scrollbar-thumb { min-height: 56px; border: 4px solid transparent; border-radius: 999px; background: linear-gradient(180deg, var(--celeste), var(--oceano)) padding-box; }
  ::-webkit-scrollbar-thumb:horizontal { min-width: 56px; background: linear-gradient(90deg, var(--celeste), var(--oceano)) padding-box; }
  ::-webkit-scrollbar-thumb:hover { border-width: 3px; background: linear-gradient(180deg, var(--vivo), var(--oceano)) padding-box; }
  ::-webkit-scrollbar-thumb:horizontal:hover { background: linear-gradient(90deg, var(--vivo), var(--oceano)) padding-box; }
  ::-webkit-scrollbar-thumb:active { background: linear-gradient(180deg, var(--vivo), var(--notte)) padding-box; }
  ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  ::-webkit-scrollbar-corner { background: transparent; }
  /* Le giostre: sotto le schede, un binario sottile e trasparente. */
  .giostra ul::-webkit-scrollbar { display: block; height: 10px; }
  .giostra ul::-webkit-scrollbar-track { background: transparent; box-shadow: none; }
  .giostra ul::-webkit-scrollbar-thumb { border-width: 3px; }
  .profondo .giostra ul::-webkit-scrollbar-thumb, .cassetto::-webkit-scrollbar-thumb { background: rgb(255 255 255 / .35) padding-box; }
  .cassetto::-webkit-scrollbar-track { background: transparent; box-shadow: none; }
  @supports not selector(::-webkit-scrollbar) {
    html { scrollbar-color: var(--oceano) var(--nebbia); }
    .giostra ul { scrollbar-width: thin; scrollbar-color: rgb(7 95 146 / .45) transparent; }
    .profondo .giostra ul, .cassetto { scrollbar-color: rgb(255 255 255 / .35) transparent; }
  }
}

@media print {
  .testata, .barra-azioni, .consenso, .acqua, .luci, .striscia, .avvio, body::after { display: none !important; }
  [data-rivela], [data-tenda], .titolo-anim .p > span { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .profondo { background: #fff !important; color: #000 !important; }
}

/* Generato da costruisci.mjs: il rapporto delle foto delle gallerie. */
.r-100 { --r: 1; }
.r-136 { --r: 1.36; }
.r-150 { --r: 1.5; }
.r-222 { --r: 2.22; }
.r-46 { --r: 0.46; }
.r-67 { --r: 0.67; }
.r-76 { --r: 0.76; }
.r-77 { --r: 0.77; }