/* ===== PAGINA SERBATOI =====
     Foglio della pagina serbatoi, italiana e inglese. Poggia su `base-projects.css`,
     che porta gia' sfondo, header, drawer, footer, `.wrap`, `.btn` e il cambio lingua:
     qui dentro c'e' SOLO quello che la pagina serbatoi ha in piu'.

     Tutte le classi hanno il prefisso `.sb-` di proposito, cosi' nessuna regola puo'
     finire addosso al resto del sito. Le uniche eccezioni sono `.sb h2/h3/p` e i tre
     ritocchi a `.cp-*` in fondo, che vivono comunque dentro `.sb`/`.sb-cp` e non escono
     di li'.

     Lo strumento dei litri arriva da `calc.css`: questa pagina lo collega e basta,
     non lo ridefinisce. L'unica cosa che aggiunge e' lo sfondo animato del pannello
     dei risultati, in fondo al foglio.
  */

:root{--mono:"IBM Plex Mono",ui-monospace,Consolas,monospace}

/* ---------- la colonna di testo ----------
   900px come `.pd-hero`, cosi' testata e sezioni stanno sulla stessa incolonnatura.
   Lo strumento e la galleria escono da qui e usano tutta la `.wrap`. */
.sb{max-width:900px;margin-inline:auto;padding-block:38px}
.sb + .sb{border-top:1px solid rgba(237,232,221,.08)}
/* la sezione dello strumento prende tutta la `.wrap`; il suo cappello di testo
   resta pero' incolonnato con le altre, se no l'occhio perde il filo */
.sb-largo{max-width:1200px}
.sb-testa{max-width:824px;margin-inline:auto}
.sb h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.6vw,44px);line-height:1.08;margin:0 0 14px;letter-spacing:-.005em}
.sb h3{font-family:var(--serif);font-weight:400;font-size:21px;margin:0 0 6px;color:var(--bone)}
.sb p{color:var(--dim);font-weight:300;font-size:clamp(15px,1.5vw,17px);line-height:1.78;margin:0 0 14px;max-width:70ch}
.sb p strong,.sb li strong{color:var(--bone);font-weight:500}
.sb a{color:var(--teal);border-bottom:1px solid rgba(22,201,176,.4);transition:border-color .2s}
.sb a:hover{border-bottom-color:var(--teal)}

/* il titolo della testata: due righe, con la seconda in corsivo verde acqua.
   `laser-title.js` incide il riquadro intero, quindi il markup interno non gli da' noia. */
.sb-h1 em{font-style:italic;color:var(--teal)}

.sb-occhiello{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin:0 0 10px;font-weight:500}
.sb-nota{font-size:14px;color:rgba(157,167,166,.8)}

/* ---------- i quattro fatti della testata ---------- */
.sb-fatti{display:flex;flex-wrap:wrap;gap:0;margin-top:34px;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.sb-fatto{flex:1 1 168px;padding:17px 19px;border-right:1px solid rgba(237,232,221,.08);background:rgba(10,14,15,.45)}
.sb-fatto:last-child{border-right:0}
.sb-fatto b{display:block;font-family:var(--mono);font-size:22px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--teal)}
.sb-fatto span{display:block;font-size:12px;color:var(--dim);margin-top:5px;line-height:1.4}
@media(max-width:620px){.sb-fatto{flex-basis:50%;border-bottom:1px solid rgba(237,232,221,.08)}}

/* ---------- le undici scelte ---------- */
.sb-scelte{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px;margin-top:24px}
.sb-scelta{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:rgba(10,14,15,.45)}
.sb-scelta h3{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin:0 0 10px;font-weight:500}
.sb-scelta ul{margin:0;padding:0;list-style:none}
.sb-scelta li{font-size:14px;color:var(--bone);font-weight:300;line-height:1.5;padding-left:15px;position:relative;margin-bottom:7px}
.sb-scelta li:last-child{margin-bottom:0}
.sb-scelta li:before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--teal);opacity:.75}
.sb-scelta li i{font-style:normal;color:var(--dim);font-size:13px}

/* ---------- i due blocchi «cosa gira dentro» ---------- */
.sb-acc{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:22px}
.sb-acc > div{border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:rgba(10,14,15,.45)}
.sb-acc p{font-size:14.5px;margin:0}

/* ---------- le foto in mezzo al testo ---------- */
.sb-foto{margin:26px 0 0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(10,14,15,.45)}
.sb-foto img{display:block;width:100%;height:auto}
.sb-foto.alta img{max-height:560px;width:auto;margin-inline:auto}
.sb-foto figcaption{padding:13px 18px;font-size:13px;color:var(--dim);font-weight:300;line-height:1.55;border-top:1px solid rgba(237,232,221,.08)}
.sb-foto figcaption b{color:var(--bone);font-weight:500}

/* ---------- le domande ----------
   Il piu'/meno, i bordi e l'apertura arrivano da `faq.css`: qui c'e' solo il
   raccordo per le risposte a piu' capoversi, che li' non erano previste. */
.sb .faq{margin-top:22px}
.sb .faq .ans p{margin:0 0 10px;font-size:inherit;color:inherit;line-height:inherit;max-width:none}
.sb .faq .ans p:last-child{margin-bottom:0}

/* ---------- il mestiere della vaschetta ---------- */
.sb-mestiere{margin:16px 0 18px;padding:0;list-style:none;max-width:70ch}
.sb-mestiere li{position:relative;color:var(--dim);font-weight:300;font-size:clamp(15px,1.5vw,16.5px);line-height:1.7;padding-left:24px;margin-bottom:9px}
.sb-mestiere li:before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;border-radius:50%;background:var(--teal)}

/* ---------- le due misure delle vaschette ---------- */
.sb-vasche{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px}
.sb-vasca{border:1px solid var(--line);border-radius:14px;padding:16px 26px;text-align:center;background:rgba(10,14,15,.45)}
.sb-vasca b{display:block;font-family:var(--serif);font-weight:400;font-size:38px;line-height:1;color:var(--teal)}
.sb-vasca span{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:7px}

/* ===== lo strumento dei litri, innestato nella pagina =====
   ⚠️ Il `<div class="cp">` non e' decorativo: le regole `.cp input` e `.cp select`
      di `calc.css` vogliono quell'antenato. Senza, le caselle tornano allo stile
      di default del browser e si rimpiccioliscono — sembra un difetto del foglio
      e non lo e'. Sulle pagine calcolatore la classe sta su `<main class="wrap cp">`;
      qui la pagina non e' una pagina calcolatore, quindi `.cp` fa solo da gancio e
      le sue misure vanno spente. */
.sb-cp{max-width:none;padding-block:0}
.sb-cp .cp-tool{margin-top:26px}

/* ---------- sfondo n° 11, «menisco» ----------
   La curva della superficie del liquido che sale e si allarga sotto i risultati.
   Scelto da Stefano il 20 settembre 2026 fra i venti proposti.

   ⚠️ Si anima SOLO `transform`: mai `filter`, mai `backdrop-filter`, mai
      `left/top/width/height`. E' la regola nata il giorno in cui cinque sfocature
      animate hanno portato il sito a 4-5 fps. Il chiaro e' una banda schiacciata
      contro il fondo, non un cerchio. */
.sb-cp .cp-out{isolation:isolate}
.sb-cp .cp-out::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;will-change:transform;
  background:radial-gradient(120% 26% at 50% 100%,rgba(22,201,176,.16) 0%,rgba(22,201,176,.05) 45%,transparent 70%);
  animation:sb-menisco 6.4s ease-in-out infinite;
}
.sb-cp .cp-out > *{position:relative;z-index:1}
@keyframes sb-menisco{
  0%,100%{transform:translateY(16%) scaleY(1)}
  50%    {transform:translateY(-2%) scaleY(1.12)}
}
@media(prefers-reduced-motion:reduce){
  .sb-cp .cp-out::before{animation:none;transform:translateY(6%)}
}