/* percorso: template/portale/css/portale.css
   ==========================================================================
   LA PELLE DEL PORTALE — lapallavolo.it, il sito che vende la piattaforma.
   ==========================================================================

   Riscritto sulla nuova identita' di marchio (navy / blu / ciano). La versione
   precedente era navy+giallo con Fredoka e Nunito.

   DUE COSE DA SAPERE PRIMA DI TOCCARE QUESTO FILE:

   1. QUESTO CSS VESTE PIU' PAGINE, non solo la home. Lo caricano anche
      /demo, /privacy, /cookie, /termini, la pagina di errore, il varco di
      pre-lancio e il wizard di registrazione. Per questo i NOMI DELLE CLASSI
      sono rimasti tutti quelli di prima anche dove il disegno e' cambiato del
      tutto: rinominare .btn-yellow in .btn-ciano avrebbe rotto in silenzio
      pagine che nessuno stava guardando.

   2. LO STESSO VALE PER I NOMI DEI TOKEN. demo.php e le viste della
      registrazione hanno un <style> proprio che usa var(--blu), var(--muted),
      var(--line), var(--sky), var(--verde), var(--ink), var(--disp). I nomi
      restano, cambiano i VALORI: quelle pagine si rivestono da sole.

      Conseguenza: --giallo, --giallo-d e --giallo-soft esistono ancora ma non
      sono piu' gialli. Puntano al ciano del marchio. Sembra strano leggerli,
      ed e' voluto: cancellarli avrebbe lasciato dei var() irrisolti in file
      che non stiamo aprendo oggi. Si eliminano quando si ripassano le altre
      viste, non prima.

   FONT — VINCOLO PERMANENTE DEL PROGETTO: TUTTO SELF-HOSTED.
   Nessun @import, nessun link a fonts.googleapis.com. Una @font-face verso una
   CDN e' un trasferimento dati extra-UE a ogni visita, su una piattaforma che
   tratta dati di minori. I .woff2 stanno in template/portale/font/ e sono
   consegnati insieme a questo file (Montserrat e Inter, sottoinsieme latin,
   licenza OFL allegata).
   ========================================================================== */

/* ==========================================================================
   1. FONT
   Montserrat = il marchio. E' il font del payoff nel manuale del logo, quindi
   i titoli "suonano" come il logo.
   Inter = il testo lungo. Montserrat sotto i 17px su un paragrafo intero si
   legge male; Inter e' disegnato esattamente per quello.
   font-display:swap = il testo compare subito col font di sistema e poi
   scatta a quello giusto. Mai una pagina bianca ad aspettare.
   ========================================================================== */
@font-face{font-family:'Montserrat';src:url('../font/montserrat-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../font/montserrat-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../font/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../font/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ==========================================================================
   2. TOKEN — i colori del manuale del marchio, niente di inventato
   ========================================================================== */
:root{
  --navy:#0D1B3D;        /* navy del logo: da qui nasce ogni testo scuro */
  --ink:#0D1B3D;         /* alias di --navy: usato dalle viste per il testo */
  --blu:#008CFF;         /* blu del marchio: azioni, link, evidenza */
  --blu-d:#0069C4;       /* hover: si scurisce, non cambia tinta */
  --azzurro:#00C2FF;     /* ciano: accenti e gradienti, mai testo su bianco */

  /* Ex gialli. Vedi la nota in testa al file: i nomi restano per non lasciare
     var() irrisolti nelle viste che hanno un <style> proprio. */
  --giallo:#00C2FF;
  --giallo-d:#008CFF;
  --giallo-soft:#E6F8FF;

  --sky:#EAF4FF;         /* azzurrino di fondo */
  --cream:#F2F4F7;       /* la "nebbia" del manuale: fasce alterne */
  --paper:#FFFFFF;
  --line:#E3E8F0;        /* il filetto delle schede */
  --line-2:#CFD8E6;
  --muted:#7A86A0;       /* testo secondario e didascalie */
  --soft:#41506F;        /* testo di paragrafo su fondo chiaro */
  --verde:#0BA36B;
  --arancio:#E8901A;
  --rosso:#D8463C;

  /* Il gradiente e' UNO SOLO in tutto il portale: navy -> blu -> ciano, lo
     stesso della nuvola nel logo. Ripeterlo e' cio' che rende la pagina
     riconoscibile; averne cinque diversi e' cio' che la fa sembrare un tema. */
  --grad:linear-gradient(135deg,#0D1B3D 0%,#008CFF 58%,#00C2FF 100%);
  --grad-chiaro:linear-gradient(135deg,#EAF4FF 0%,#F2F4F7 60%,#E6F8FF 100%);

  --r-s:10px; --r-m:16px; --r-l:22px; --r-xl:30px;
  --ombra:0 1px 2px rgba(13,27,61,.04), 0 8px 24px rgba(13,27,61,.06);
  --ombra-alta:0 2px 4px rgba(13,27,61,.05), 0 20px 48px rgba(13,27,61,.11);

  --disp:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* ==========================================================================
   3. BASI
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--disp); font-weight:800; letter-spacing:-.024em; line-height:1.12; margin:0}
p{margin:0}
a{color:inherit; text-decoration:none}
/* `height:auto` NON E' UNA RIFINITURA: senza, `max-width` restringe la
   larghezza e l'altezza resta quella dell'attributo `height` del tag, cosi'
   ogni immagine piu' larga della sua colonna esce allungata in verticale.
   Con le finte schermate disegnate a mano non si vedeva perche' non c'erano
   immagini vere in pagina. */
img,svg{display:block; max-width:100%; height:auto}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
ul{margin:0; padding:0; list-style:none}

/* Il focus da tastiera deve VEDERSI. Non e' opzionale: e' l'unico modo in cui
   chi non usa il mouse sa dove si trova. */
:focus-visible{outline:3px solid var(--azzurro); outline-offset:3px; border-radius:6px}

.wrap{max-width:1180px; margin:0 auto; padding:0 24px}

/* ==========================================================================
   4. TESTATA
   ========================================================================== */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.84);
  backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.nav.giu{border-bottom-color:var(--line); box-shadow:0 6px 24px rgba(13,27,61,.05); background:rgba(255,255,255,.95)}
.nav-in{display:flex; align-items:center; gap:26px; height:78px}

.brand{display:flex; align-items:center; flex:none}
/* 46px e non meno: il file del marchio porta dentro anche il payoff, e sotto
   questa altezza la riga "PIATTAFORMA WEB PER..." scende sotto i 5px e
   diventa una sbavatura grigia. */
.brand-logo{height:46px; width:auto}

.nav-menu{display:flex; gap:26px; margin-left:auto; align-items:center}
.nav-menu a{
  font-size:.94rem; font-weight:600; color:var(--soft);
  padding:6px 0; border-bottom:2px solid transparent;
  transition:color .18s, border-color .18s;
}
.nav-menu a:hover{color:var(--ink); border-bottom-color:var(--azzurro)}
.nav-right{display:flex; gap:10px; align-items:center}
/* Le voci doppie del menu: esistono solo per il telefono, dove la barra dei
   pulsanti a destra sparisce. Su schermo largo sarebbero "Accedi" e "Crea il
   tuo sito" scritti due volte a dieci centimetri di distanza. */
.nav-menu .solo-mob{display:none}
.nav-login{font-family:var(--disp); font-weight:600; font-size:.95rem; color:var(--blu); padding:13px 6px}
.nav-login:hover{color:var(--blu-d)}

.nav-burger{
  display:none; width:44px; height:44px; border-radius:12px;
  border:1px solid var(--line); align-items:center; justify-content:center;
  font-size:20px; color:var(--ink); margin-left:auto;
}

/* ==========================================================================
   5. BOTTONI
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--disp); font-weight:600; font-size:.95rem;
  padding:13px 24px; border-radius:100px; white-space:nowrap;
  transition:transform .16s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.btn-primary{background:var(--grad); color:#fff; box-shadow:0 6px 20px rgba(0,140,255,.28)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,140,255,.36)}
.btn-ghost{border:1.6px solid var(--line-2); color:var(--ink); background:var(--paper)}
.btn-ghost:hover{border-color:var(--blu); color:var(--blu); transform:translateY(-2px)}
.btn-ghost-light{border:1.6px solid rgba(255,255,255,.32); color:#fff; background:transparent}
.btn-ghost-light:hover{border-color:var(--azzurro); color:var(--azzurro); transform:translateY(-2px)}
/* .btn-yellow non e' piu' gialla, ma il nome resta: e' usata da viste che non
   stiamo riscrivendo oggi. Vedi la nota in testa al file. */
.btn-yellow{background:var(--grad); color:#fff; box-shadow:0 6px 20px rgba(0,140,255,.28)}
.btn-yellow:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,140,255,.36)}

/* ==========================================================================
   6. SEZIONI E TITOLI
   ========================================================================== */
.sec{padding:100px 0}
.sec-cream{background:var(--cream)}
.sec-head{margin-bottom:52px; max-width:760px}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head h2{font-size:clamp(1.85rem,3.4vw,2.85rem); letter-spacing:-.028em}
.sec-head p{color:var(--soft); font-size:1.06rem; margin-top:16px; max-width:62ch}
.sec-head.center p{margin-inline:auto}

/* L'occhiello: micro-titolo blu in maiuscoletto spaziato. Dice DI COSA parla
   la sezione prima che il titolo dica cosa fa. */
.eyebrow{
  font-family:var(--disp); font-weight:600; font-size:.72rem;
  letter-spacing:.19em; text-transform:uppercase; color:var(--blu);
  display:inline-block; margin-bottom:14px;
}
.eyebrow.on-navy{color:var(--azzurro)}

/* La spunta blu che ricorre in tutti gli elenchi */
.ck{
  display:inline-grid; place-items:center; width:20px; height:20px; flex:none;
  border-radius:50%; background:rgba(0,140,255,.11); color:var(--blu); margin-top:2px;
}
.ck svg{width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}

/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero{position:relative; overflow:hidden; padding:72px 0 92px; background:var(--grad-chiaro)}
/* alone luminoso: una nuvola sfocata gigante dietro tutto */
.hero::before{
  content:''; position:absolute; top:-320px; right:-180px; width:840px; height:840px;
  background:radial-gradient(circle at 40% 40%, rgba(0,194,255,.30), rgba(0,140,255,.12) 42%, transparent 68%);
  pointer-events:none;
}
.hero::after{
  content:''; position:absolute; bottom:-260px; left:-220px; width:640px; height:640px;
  background:radial-gradient(circle, rgba(0,140,255,.14), transparent 66%);
  pointer-events:none;
}
/* Solo l'hero esce dai 1180px del resto della pagina: e' l'unica fascia in cui
   il contenuto e' un'immagine larga, e stringerla ai margini degli altri
   blocchi la sacrificava senza motivo. */
.hero > .wrap{max-width:1290px; position:relative; z-index:2}
/* L'immagine e' larga e piena di etichette leggibili: si prende due terzi
   della fascia. Il testo dell'hero e' corto, in un terzo ci sta comodo. */
.hero-grid{display:grid; grid-template-columns:.66fr 1.34fr; gap:44px; align-items:center}

.hero h1{font-size:clamp(2.1rem,4.1vw,3.35rem); line-height:1.06; letter-spacing:-.03em}
/* Il gradiente sul testo si usa UNA VOLTA sola in tutta la pagina, qui. */
.hero h1 .u{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{color:var(--soft); font-size:1.05rem; margin-top:20px; max-width:46ch}
.hero-actions{display:flex; gap:13px; margin-top:34px; flex-wrap:wrap}
.hero-actions .btn{font-size:1.02rem; padding:16px 30px}
.hero-badge{display:flex; align-items:center; gap:9px; margin-top:26px; font-size:.9rem; color:var(--muted)}
.hero-badge .pl{
  width:18px; height:18px; border-radius:50%; flex:none;
  background:rgba(11,163,107,.14); position:relative;
}
.hero-badge .pl::after{
  content:''; position:absolute; left:5px; top:6px; width:8px; height:4px;
  border-left:2px solid var(--verde); border-bottom:2px solid var(--verde);
  transform:rotate(-45deg);
}

/* --- l'immagine dell'hero, incorniciata ---
   Cornice bianca con bordo sottile: si stacca dal gradiente azzurro invece di
   sciogliercisi dentro, e ha lo stesso trattamento delle altre schede. */
.hero-shot{
  position:relative; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:10px; box-shadow:var(--ombra-alta);
}
/* <picture> e' un elemento IN LINEA: senza `display:block` lascia sotto
   l'immagine i due-tre pixel che il browser riserva alla riga di testo, e
   dentro una cornice bianca si vedono benissimo. */
.hero-shot picture{display:block}
.hero-shot img{width:100%; height:auto; border-radius:20px; display:block}
/* filetto a gradiente sul bordo alto: richiama la riga sotto il wordmark nel
   manuale del marchio */
.hero-shot::before{
  content:''; position:absolute; top:-1px; left:12%; right:12%; height:2px;
  background:var(--grad); border-radius:2px;
}

/* Il pallino decorativo dell'occhiello (usato anche altrove) */
.ball{display:inline-block; width:14px; height:14px; border-radius:50%; background:var(--grad); vertical-align:-2px}

/* ==========================================================================
   8. PERCHE' UN SITO — gli otto motivi sotto l'hero
   L'ordine non e' casuale: prima riga cosa la societa' OTTIENE (si vede da
   fuori), seconda riga cosa le COSTA (si vive da dentro). Chi scorre legge
   prima il guadagno, poi il prezzo.
   ========================================================================== */
.why{background:var(--paper); padding:84px 0 88px}
.why-head{display:flex; align-items:center; gap:22px; justify-content:center; margin-bottom:46px}
.why-head h2{
  font-size:clamp(1.05rem,2.1vw,1.42rem); letter-spacing:.06em;
  text-transform:uppercase; text-align:center;
}
.why-head i{display:block; height:2px; flex:0 1 90px; border-radius:2px; background:linear-gradient(90deg,transparent,var(--blu))}
.why-head i:last-child{background:linear-gradient(90deg,var(--blu),transparent)}

/* Quattro per riga e' il massimo in cui il titolo in maiuscoletto sta su una
   riga sola alla larghezza piena. */
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.wcard{
  border:1px solid var(--line); border-radius:var(--r-l); padding:26px 20px 24px;
  text-align:center; background:var(--paper);
  transition:transform .22s, box-shadow .22s, border-color .22s;
}
.wcard:hover{transform:translateY(-5px); box-shadow:var(--ombra-alta); border-color:rgba(0,140,255,.35)}
.wcard .wi{
  width:58px; height:58px; border-radius:50%; margin:0 auto 18px;
  display:grid; place-items:center; color:var(--blu);
  background:linear-gradient(135deg, rgba(0,140,255,.10), rgba(0,194,255,.16));
}
.wcard .wi svg{width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.wcard h3{font-size:.87rem; letter-spacing:.045em; text-transform:uppercase; line-height:1.3; margin-bottom:10px}
.wcard p{font-size:.88rem; color:var(--soft); line-height:1.55}

/* ==========================================================================
   9. DEMO A TRE FACCE
   ========================================================================== */
.demo-tabs{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:38px}
.dtab{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--disp); font-weight:600; font-size:.92rem;
  padding:11px 20px; border-radius:100px; color:var(--soft);
  border:1.6px solid var(--line); background:var(--paper); transition:all .2s;
}
.dtab .dot{width:8px; height:8px; border-radius:50%; background:var(--line-2)}
.dtab:hover{border-color:var(--blu); color:var(--blu)}
.dtab.on{background:var(--navy); border-color:var(--navy); color:#fff}
.dtab.on .dot{background:var(--azzurro)}

.dpanel{display:none}
/* ---------- schermate vere del prodotto ----------
   Sostituiscono i riquadri disegnati a mano. Quelli erano quasi quadrati
   perche' erano finti: si disegnavano nella forma comoda. Le schermate hanno
   la forma che hanno, fra 1,65 e 2,0 di rapporto, e sono piu' larghe che alte.

   NESSUN `aspect-ratio` E NESSUNA ALTEZZA: le cinque immagini hanno
   proporzioni diverse fra loro, e imporne una sola vorrebbe dire tagliarne
   quattro. Il rapporto lo dichiarano `width` e `height` nel tag, che servono
   anche a non far saltare la pagina mentre l'immagine arriva.

   L'ombra e il bordo le staccano dal fondo: una schermata di un'interfaccia
   bianca, su un fondo chiaro, senza bordo sembra un buco nella pagina. */
.sch{width:100%; height:auto; border-radius:14px; border:1px solid var(--line);
     box-shadow:0 22px 50px -28px rgba(22,34,77,.45)}
/* Sul fondo scuro di «Non solo vetrina» il bordo chiaro sparirebbe: li' serve
   il contrario, un filo chiaro su fondo scuro. E il riquadro che conteneva i
   messaggi finti non serve piu': l'immagine e' gia' una scheda. */
.spot-card--sch{display:block; background:none; border:0; padding:0}
.spot-card--sch .sch{border-color:rgba(255,255,255,.18);
     box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}

/* Le colonne: piu' spazio all'immagine, che prima ne aveva meta' esatta.
   Un disegno stava comodo in poco; una schermata vera no — sotto una certa
   larghezza il testo che c'e' dentro non si legge, e a quel punto non dimostra
   piu' niente. */
.dpanel.on{display:grid; grid-template-columns:.86fr 1.14fr; gap:44px; align-items:center}
.dlabel{display:none}
.dtxt h3{font-size:1.6rem; margin-bottom:14px}
.dtxt > p{color:var(--soft); margin-bottom:22px}
.dtxt ul{display:grid; gap:4px; margin-bottom:22px}
.dtxt li{display:flex; gap:11px; align-items:flex-start; padding:7px 0; font-size:.97rem; color:var(--soft)}

/* il riquadro-anteprima, riusato nei tre pannelli */
.shot{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--ombra-alta); overflow:hidden}
.shot .sh-h{
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 19px; border-bottom:1px solid var(--line); background:#FAFBFD;
}
.shot .sh-h .t{font-family:var(--disp); font-weight:800; font-size:.95rem}
.shot .sh-h .p{
  font-family:var(--disp); font-weight:600; font-size:.63rem; letter-spacing:.13em;
  text-transform:uppercase; padding:4px 11px; border-radius:100px;
  background:rgba(0,140,255,.10); color:var(--blu);
}
.shot .row{display:flex; align-items:center; gap:13px; padding:12px 19px; border-bottom:1px solid #F0F3F8}
.shot .row:last-child{border-bottom:0}
.shot .sq{
  width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:var(--cream); color:var(--soft); font-size:17px;
  border:1px solid var(--line);
}
.shot .sq--neu{border:1px dashed var(--line-2); color:var(--muted)}
.shot .rt{flex:1; min-width:0; font-size:.92rem; font-weight:600; display:block}
.shot .rs{display:block; font-size:.76rem; font-weight:400; color:var(--muted)}
.shot .sh-f{padding:14px 19px; background:#FAFBFD; border-top:1px solid var(--line); font-size:.83rem; color:var(--muted)}

/* pastiglie di stato, usate in piu' punti */
.pill{
  font-family:var(--disp); font-weight:600; font-size:.66rem; letter-spacing:.04em;
  padding:4px 10px; border-radius:100px; white-space:nowrap;
  background:rgba(0,140,255,.11); color:var(--blu);
}
.pill.neu{background:var(--cream); color:var(--muted)}
.pill.ok{background:rgba(11,163,107,.12); color:var(--verde)}
.pill.warn{background:rgba(232,144,26,.14); color:#B96F0C}
.pill.late{background:rgba(216,70,60,.11); color:#C2382E}

/* ==========================================================================
   10. FUNZIONI
   ========================================================================== */
.feat{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.fcard{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l);
  padding:26px; transition:transform .22s, box-shadow .22s, border-color .22s;
}
.fcard:hover{transform:translateY(-5px); box-shadow:var(--ombra-alta); border-color:rgba(0,140,255,.35)}
.fcard .fi{
  width:44px; height:44px; border-radius:12px; margin-bottom:16px;
  background:linear-gradient(135deg,rgba(0,140,255,.11),rgba(0,194,255,.14));
  display:grid; place-items:center; color:var(--blu);
}
.fcard .fi svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.fcard h3{font-size:1.16rem; margin-bottom:8px}
.fcard p{font-size:.93rem; color:var(--soft)}

/* ==========================================================================
   11. AREA RISERVATA
   ========================================================================== */
.spot{display:grid; grid-template-columns:.84fr 1.16fr; gap:48px; align-items:center}
.spot h2{font-size:clamp(1.85rem,3.4vw,2.6rem); letter-spacing:-.028em}
.spot > div > p{color:var(--soft); margin-top:16px}
.spot ul{display:grid; gap:4px; margin-top:20px}
.spot li{display:flex; gap:11px; align-items:flex-start; padding:7px 0; font-size:.97rem; color:var(--soft)}
.spot-note{
  display:inline-flex; align-items:center; gap:8px; margin-top:24px;
  background:var(--paper); border:1px solid var(--line); border-radius:100px;
  padding:8px 16px; font-size:.87rem; color:var(--soft); box-shadow:var(--ombra);
}
.spot-note b{color:var(--blu); font-family:var(--disp)}

.spot-card{display:grid; gap:12px}
.msg{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m);
  padding:16px 18px; display:flex; gap:14px; align-items:center; box-shadow:var(--ombra);
}
.msg-av{
  width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:rgba(0,140,255,.10); color:var(--blu); font-size:17px;
}
.msg-b{flex:1}
.msg-b .t{font-family:var(--disp); font-weight:800; font-size:.97rem; margin-bottom:3px}
.msg-b .s{font-size:.84rem; color:var(--muted)}
.msg-read{
  font-family:var(--disp); font-weight:600; font-size:.66rem;
  padding:4px 10px; border-radius:100px; white-space:nowrap;
  background:rgba(11,163,107,.12); color:var(--verde);
}

/* ==========================================================================
   12. QUOTE
   ========================================================================== */
.quote-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:center}
.qhead{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px}
.qkpi{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m); padding:17px 19px; text-align:center}
.qkpi .v{font-family:var(--disp); font-weight:800; font-size:1.5rem; letter-spacing:-.03em}
.qkpi .l{font-family:var(--disp); font-weight:600; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.qkpi:nth-child(2) .v{color:var(--verde)}
.qkpi.late .v{color:var(--rosso)}

.qbox{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--ombra-alta); overflow:hidden}
.qbox .qbox-h{
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 19px; border-bottom:1px solid var(--line); background:#FAFBFD;
}
.qbox .qbox-h .t{font-family:var(--disp); font-weight:800; font-size:.95rem}
.qrow{display:flex; align-items:center; gap:13px; padding:12px 19px; border-bottom:1px solid #F0F3F8}
.qrow:last-child{border-bottom:0}
.qrow .av{
  width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:var(--cream); color:var(--soft); border:1px dashed var(--line-2);
  font-family:var(--disp); font-weight:700; font-size:.76rem;
}
.qrow .nm{flex:1; min-width:0; font-size:.92rem; font-weight:600}
.qrow .nm small{display:block; font-size:.76rem; font-weight:400; color:var(--muted)}
.qrow .am{font-family:var(--disp); font-weight:800; font-size:.92rem}
.qcta{padding:14px 19px; background:#FAFBFD; border-top:1px solid var(--line); font-size:.83rem; color:var(--muted)}

.qlist{display:grid; gap:4px}
.qlist li{display:flex; gap:11px; align-items:flex-start; padding:7px 0; font-size:.97rem; color:var(--soft)}
.qnote{
  margin-top:24px; background:var(--paper); border:1px solid var(--line);
  border-left:4px solid var(--blu); border-radius:var(--r-m); padding:18px 20px;
  font-size:.93rem; color:var(--soft);
}
.qnote b{font-family:var(--disp); color:var(--ink); display:block; margin-bottom:5px}

/* ==========================================================================
   13. TRE PASSI
   Qui la numerazione ha senso: e' davvero una sequenza, i passi vanno in ordine.
   ========================================================================== */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.step{position:relative}
.step .n{
  width:42px; height:42px; border-radius:13px; background:var(--grad); color:#fff;
  display:grid; place-items:center; font-family:var(--disp); font-weight:800;
  font-size:1.05rem; margin-bottom:16px; box-shadow:0 6px 16px rgba(0,140,255,.26);
}
.step h3{font-size:1.16rem; margin-bottom:8px}
.step p{color:var(--soft); font-size:.96rem}
.step b{color:var(--blu)}
/* la scia di pixel fra un passo e l'altro: e' il mosaico del logo che si dirada */
.step::after{
  content:''; position:absolute; top:20px; left:56px; right:-14px; height:3px;
  background-image:radial-gradient(circle, var(--blu) 1.4px, transparent 1.6px);
  background-size:9px 3px; opacity:.5;
}
.step:last-child::after{display:none}
.steps-note{text-align:center; color:var(--muted); font-size:.9rem; margin-top:36px; max-width:64ch; margin-inline:auto}

/* ==========================================================================
   14. TEMPLATE — carosello
   I modelli non sono tre: sono quanti ne carichiamo. Niente griglia fissa ma
   una pista che scorre, con le schede generate dall'elenco in home.php.
   ========================================================================== */
.tpl{position:relative}
.tpl-head{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.tpl-count{font-family:var(--disp); font-weight:600; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.tpl-arrows{display:flex; gap:8px; margin-left:auto}
.tpl-arrows button{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  border:1.6px solid var(--line); background:var(--paper); color:var(--ink); transition:all .2s;
}
.tpl-arrows button:hover:not(:disabled){border-color:var(--blu); color:var(--blu); transform:translateY(-2px)}
.tpl-arrows button:disabled{opacity:.35; cursor:default}
.tpl-arrows svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}

/* La pista: scorre in orizzontale con "aggancio" a ogni scheda, cosi' non
   resta mai una scheda tagliata a meta' quando ci si ferma. */
.tpl-track{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:6px 2px 20px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.tpl-track::-webkit-scrollbar{display:none}

.tcard{
  flex:0 0 clamp(250px,30%,320px); scroll-snap-align:start;
  border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden;
  background:var(--paper); transition:transform .22s, box-shadow .22s, border-color .22s;
}
.tcard:hover{transform:translateY(-5px); box-shadow:var(--ombra-alta); border-color:rgba(0,140,255,.35)}

/* Rapporto 16:10 fisso: un'anteprima caricata di misura sbagliata non sfonda
   la fila, viene ritagliata. */
.tprev{position:relative; aspect-ratio:16/10; background:var(--cream); overflow:hidden}
.tprev img{width:100%; height:100%; object-fit:cover}
/* Segnaposto: si vede SOLO se l'immagine manca. Serve adesso, con la cartella
   vuota, e servira' sempre — un modello nuovo senza anteprima non deve
   lasciare un buco grigio muto. */
.tvuoto{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  padding:18px; background:var(--grad); color:#fff;
}
.tvuoto b{display:block; font-family:var(--disp); font-weight:800; font-size:1.1rem; letter-spacing:-.02em}
.tvuoto span{font-size:.72rem; opacity:.75; display:block; margin-top:5px}
.tflag{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:var(--disp); font-weight:600; font-size:.62rem; letter-spacing:.13em;
  text-transform:uppercase; padding:4px 10px; border-radius:100px;
  background:rgba(255,255,255,.92); color:var(--blu);
}
.tmeta{padding:16px 18px; display:flex; align-items:center; gap:10px}
.tmeta .nm{font-family:var(--disp); font-weight:800; font-size:1rem; display:block}
.tmeta .ds{font-size:.82rem; color:var(--muted); display:block}

/* Ex classi delle tre anteprime disegnate a mano. Restano definite perche'
   valgono da colore di fondo se un giorno una scheda resta senza immagine. */
.tp-viv{background:linear-gradient(135deg,#008CFF,#00C2FF)}
.tp-edit{background:linear-gradient(135deg,#0D1B3D,#2A3F6B)}
.tp-hub{background:linear-gradient(135deg,#1B4E8C,#00C2FF)}

/* --- la riga dei colori sociali ---
   Dimostra la seconda meta' del titolo: scelto il modello, il colore e' tuo. */
.colors{
  margin-top:22px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-l); padding:24px 28px;
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
}
.colors .cb{flex:1; min-width:260px}
.colors h3{font-size:1.08rem; margin-bottom:6px}
.colors p{font-size:.92rem; color:var(--soft)}
.colors .cs{display:flex; gap:9px}
.colors .cs span{width:34px; height:34px; border-radius:10px; display:block; box-shadow:0 2px 8px rgba(13,27,61,.14); transition:transform .18s}
.colors .cs span:hover{transform:translateY(-4px) scale(1.06)}

/* ==========================================================================
   15. PREZZI
   ========================================================================== */
.cadence{display:flex; justify-content:center; margin-bottom:40px}
.switch{display:inline-flex; background:var(--paper); border:1px solid var(--line); border-radius:100px; padding:5px; box-shadow:var(--ombra)}
.switch button{font-family:var(--disp); font-weight:600; font-size:.9rem; padding:9px 22px; border-radius:100px; color:var(--soft); transition:all .2s}
.switch button.on{background:var(--navy); color:#fff}
.switch .save{font-size:.68rem; background:rgba(11,163,107,.14); color:var(--verde); padding:2px 8px; border-radius:100px; margin-left:7px}
.switch button.on .save{background:rgba(255,255,255,.2); color:#fff}

.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start}
.plan{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:32px 28px; display:flex; flex-direction:column; position:relative;
}
.plan.hot{
  border:1.6px solid transparent;
  background:linear-gradient(var(--paper),var(--paper)) padding-box, var(--grad) border-box;
  box-shadow:var(--ombra-alta); transform:scale(1.035); z-index:2;
}
/* LA STRISCIA DELLA PROVA, sopra il listino.
   Verde e non azzurro: l'azzurro e' il colore dei piani e dei pulsanti di
   acquisto, e qui si dice l'opposto — che oggi non si paga. Riusare il
   gradiente dei piani avrebbe fatto sembrare la prova un quarto prodotto in
   vendita.
   Il testo scorre e il pulsante va a capo sotto i 640px: su un telefono, con
   il bottone accanto, la frase si spezzerebbe in colonne di due parole. */
.prova-banda{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin:0 auto 34px; max-width:860px;
  padding:18px 22px; border-radius:16px;
  background:rgba(11,163,107,.08); border:1px solid rgba(11,163,107,.22);
  font-size:.98rem; line-height:1.55;
}
.prova-banda strong{color:var(--verde)}
.prova-banda .btn{margin-left:auto; white-space:nowrap}
@media (max-width:640px){
  .prova-banda{flex-direction:column; align-items:flex-start; text-align:left}
  .prova-banda .btn{margin-left:0; width:100%; text-align:center}
}

/* La riga sotto il pulsante di ogni scheda. Tenue: e' un'alternativa, non
   deve competere con l'invito ad attivare il piano che ha appena sopra. */
.plan-prova{
  margin-top:11px; text-align:center;
  font-size:.83rem; color:var(--muted);
}
.plan-prova b{color:var(--verde); font-weight:700}

.plan-tag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--grad); color:#fff; font-family:var(--disp); font-weight:600;
  font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  padding:6px 16px; border-radius:100px; white-space:nowrap;
  box-shadow:0 5px 16px rgba(0,140,255,.32);
}
.plan .pn{font-family:var(--disp); font-weight:800; font-size:1.35rem; letter-spacing:-.025em}
/* Accanto al nome non c'e' piu' un verbo ma l'ESIGENZA che il piano copre:
   e' l'informazione che fa scegliere, e si legge prima del prezzo. Va a capo
   perche' "sito + famiglie + quote" accanto a "Pro" non ci sta su una riga. */
.plan .verb{
  display:block; margin-top:7px; font-family:var(--disp); font-weight:600;
  font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--blu);
}
.plan .pd{font-size:.9rem; color:var(--muted); margin-top:5px}
.plan .pp{font-family:var(--disp); font-weight:800; font-size:2.7rem; letter-spacing:-.04em; margin-top:20px; line-height:1}
.plan .pp small{font-size:.95rem; font-weight:600; color:var(--muted); letter-spacing:0}
.plan .pline{font-size:.76rem; color:var(--muted); margin-top:7px}
.plan ul{margin:24px 0; display:grid; gap:11px; flex:1}
.plan li{display:flex; gap:10px; align-items:flex-start; font-size:.92rem; color:var(--soft)}
.plan li.hi{color:var(--ink)}
.plan .btn{width:100%}

.price-note{text-align:center; color:var(--muted); font-size:.9rem; margin-top:26px; max-width:64ch; margin-inline:auto}

/* .addon resta definita: la scheda degli extra e' stata tolta dalla home, ma
   la classe puo' servire e non costa nulla tenerla coerente. */
.addon{
  margin-top:34px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-l); padding:24px 28px; display:flex; align-items:center; gap:20px;
}
.addon .ai{width:46px; height:46px; border-radius:13px; background:rgba(0,140,255,.10); color:var(--blu); display:grid; place-items:center; flex:none}
.addon .ai svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round}
.addon .ab{flex:1}
.addon h3{font-size:1.1rem; margin-bottom:5px}
.addon p{font-size:.92rem; color:var(--soft)}

.reassure{
  margin-top:34px; background:var(--navy); color:#fff; border-radius:var(--r-l);
  padding:26px 30px; display:flex; align-items:flex-start; gap:20px;
  position:relative; overflow:hidden;
}
.reassure::after{
  content:''; position:absolute; right:-90px; top:-90px; width:280px; height:280px;
  background:radial-gradient(circle, rgba(0,194,255,.30), transparent 68%);
}
.reassure .rem{
  width:46px; height:46px; border-radius:13px; background:rgba(255,255,255,.12);
  display:grid; place-items:center; flex:none; color:var(--azzurro); z-index:2;
}
.reassure .rem svg{width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.reassure > div:last-child{z-index:2}
.reassure h3{font-size:1.15rem; margin-bottom:6px}
.reassure p{font-size:.94rem; color:rgba(255,255,255,.78)}

/* ==========================================================================
   16. DOMANDE
   ========================================================================== */
.faq{max-width:840px; margin:0 auto; display:grid; gap:12px}
.q{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden}
.q h3{padding:20px 24px 0; font-size:1.03rem; letter-spacing:-.012em}
.q p{padding:10px 24px 22px; color:var(--soft); font-size:.97rem}

/* ==========================================================================
   17. CHIUSURA E PIEDE
   ========================================================================== */
.final{padding:0 0 96px; background:var(--paper)}
.final-box{
  background:var(--navy); color:#fff; border-radius:var(--r-xl);
  padding:76px 40px; text-align:center; position:relative; overflow:hidden;
}
.final-box::before{
  content:''; position:absolute; top:-200px; left:50%; transform:translateX(-50%);
  width:1000px; height:600px;
  background:radial-gradient(ellipse at center, rgba(0,140,255,.34), transparent 66%);
}
.final-box > *{position:relative; z-index:2}
.final-box h2{font-size:clamp(2rem,4vw,3.1rem); letter-spacing:-.032em}
.final-box > p{color:rgba(255,255,255,.72); margin-top:16px; font-size:1.08rem}
.final-actions{display:flex; gap:13px; justify-content:center; margin-top:32px; flex-wrap:wrap}
.final-small{margin-top:26px; font-size:.86rem; color:rgba(255,255,255,.5)}

.foot{background:#0A1530; color:rgba(255,255,255,.6); padding:56px 0 32px; font-size:.9rem}
.foot-top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px}
/* IL LOGO DEL PIEDE PAREGGIA LA LARGHEZZA DEL CLAIM SOTTO.

   48px di altezza x il rapporto dell'SVG (5.4836) fanno 263px di
   larghezza; `.foot-claim` ha max-width:34ch che a .88rem vale circa
   262px. Marchio e frase finiscono sulla stessa colonna, e il blocco di
   sinistra si legge come un blocco solo invece che come due cose
   accostate.

   SI PUO' FARE SOLO ORA CHE E' UN SVG: col PNG a 330px di larghezza,
   ingrandire avrebbe sparso la stessa informazione su piu' superficie —
   piu' sgranato, non meno. */
.foot .brand-logo{height:48px}
.foot-claim{margin-top:16px; max-width:34ch; font-size:.88rem}
.foot-col h4{color:#fff; font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; font-weight:600; margin-bottom:16px}
.foot-col a{display:block; margin-bottom:9px}
.foot a:hover{color:var(--azzurro)}
.foot-bot{
  margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:.83rem;
}

/* ==========================================================================
   18. DOCUMENTI LEGALI
   Le usano /privacy, /cookie e /termini. La pagina di errore aveva queste
   stesse classi e ora ha le sue (sezione 19): erano due cose diverse costrette
   nella stessa forma, e si vedeva.
   ========================================================================== */
.doc{padding:64px 0 90px; background:var(--paper)}
.doc-wrap{max-width:820px; margin:0 auto; padding:0 24px}
.doc-torna{
  display:inline-block; margin-bottom:24px; font-family:var(--disp); font-weight:600;
  font-size:.9rem; color:var(--blu);
}
.doc-torna:hover{color:var(--blu-d)}
.doc-nota{
  background:var(--sky); border:1px solid rgba(0,140,255,.22); border-radius:var(--r-m);
  padding:14px 18px; font-size:.9rem; color:var(--soft); margin-bottom:30px;
}
.doc-nota b{color:var(--ink); font-family:var(--disp)}
.doc-nota code{background:rgba(0,140,255,.10); padding:1px 6px; border-radius:5px; font-size:.85em}
.doc-art h1{font-size:clamp(1.8rem,3.4vw,2.5rem); letter-spacing:-.028em; margin-bottom:8px}
.doc-art h2{font-size:1.35rem; margin:38px 0 12px}
.doc-art h3{font-size:1.08rem; margin:26px 0 8px}
.doc-art p{margin:12px 0; color:var(--soft)}
.doc-art ul,.doc-art ol{margin:12px 0 12px 22px; list-style:disc; color:var(--soft)}
.doc-art ol{list-style:decimal}
.doc-art li{margin:6px 0}
.doc-art table{width:100%; border-collapse:collapse; margin:18px 0; font-size:.94rem}
.doc-art th,.doc-art td{border:1px solid var(--line); padding:10px 12px; text-align:left}
.doc-art th{background:var(--cream); font-family:var(--disp); font-weight:600}
.doc-art > p:first-of-type{font-size:1.05rem; color:var(--soft)}
.doc-art a{color:var(--blu); text-decoration:underline}

/* ==========================================================================
   19. PAGINE DI ERRORE (404, 403, 410, 503, 500)
   Una sola forma per tutti gli stati: cambia il numero e cambiano le azioni,
   non il disegno. Cinque pagine diverse sarebbero cinque cose che invecchiano
   separatamente.
   ========================================================================== */
.err{min-height:66vh; display:grid; place-items:center; background:var(--grad-chiaro); padding:72px 24px 88px}
.err-box{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--ombra-alta); padding:48px 40px; max-width:600px; width:100%; text-align:center;
}
/* Il numero grande col gradiente del marchio: dice subito cos'e' successo a
   chi legge i codici, e resta un elemento grafico per chi non li legge. */
.err-num{
  font-family:var(--disp); font-weight:800; font-size:clamp(3.4rem,9vw,5.2rem);
  line-height:1; letter-spacing:-.05em; margin-bottom:18px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.err-box h1{font-size:clamp(1.4rem,3vw,1.9rem); letter-spacing:-.026em}
.err-testo{color:var(--soft); font-size:1rem; margin-top:14px; max-width:46ch; margin-inline:auto}
.err-azioni{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:30px}
.err-nota{margin-top:22px; font-size:.85rem; color:var(--muted)}

/* ==========================================================================
   20. ACCEDI — il ponte verso il pannello di una societa'
   ========================================================================== */
.acc{min-height:70vh; display:grid; place-items:center; background:var(--grad-chiaro); padding:64px 24px 80px}
.acc-box{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--ombra-alta); padding:40px 36px; max-width:520px; width:100%;
}
.acc-box h1{font-size:clamp(1.4rem,3vw,1.9rem); letter-spacing:-.026em}
.acc-int{color:var(--soft); font-size:.98rem; margin-top:12px}
.acc-int b{font-family:var(--disp); color:var(--ink)}
.acc-form{margin-top:26px}
.acc-lab{
  display:block; font-family:var(--disp); font-weight:600; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:8px;
}
/* Il prefisso e il campo dentro un solo riquadro: cosi' si vede che
   "lapallavolo.it/" non e' da riscrivere, e nessuno lo incolla due volte. */
.acc-campo{
  display:flex; align-items:stretch; border:1.6px solid var(--line);
  border-radius:var(--r-s); overflow:hidden; background:var(--paper);
  transition:border-color .18s;
}
.acc-campo:focus-within{border-color:var(--blu)}
.acc-pre{
  display:flex; align-items:center; padding:0 12px; background:var(--cream);
  border-right:1px solid var(--line); color:var(--muted); font-size:.95rem; white-space:nowrap;
}
.acc-campo input{
  flex:1; min-width:0; border:0; padding:13px 14px; font:inherit; font-size:1rem;
  color:var(--ink); background:transparent;
}
.acc-campo input:focus{outline:none}
.acc-form .btn{width:100%; margin-top:14px}
.acc-err{
  background:rgba(216,70,60,.10); color:#C2382E; border-radius:var(--r-s);
  padding:11px 14px; font-size:.9rem; margin-top:18px;
}
.acc-aiuto{margin-top:18px; font-size:.88rem; color:var(--muted)}
.acc-aiuto a{color:var(--blu); text-decoration:underline}

/* ==========================================================================
   21. VARCO DI PRE-LANCIO
   ========================================================================== */
.varco{min-height:100vh; display:grid; place-items:center; background:var(--grad-chiaro); padding:24px}
.varco-box{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--ombra-alta); padding:40px 36px; max-width:400px; width:100%; text-align:center;
}
.varco-box img{height:48px; width:auto; margin:0 auto 24px}
.varco-box h1{font-size:1.5rem; margin-bottom:10px}
.varco-box p{color:var(--soft); font-size:.95rem; margin-bottom:22px}
.varco-box input{
  width:100%; padding:13px 16px; border:1.6px solid var(--line); border-radius:var(--r-s);
  font:inherit; font-size:1rem; margin-bottom:12px; background:var(--paper); color:var(--ink);
}
.varco-box input:focus{outline:none; border-color:var(--blu)}
.varco-box .btn{width:100%}
.varco-err{
  background:rgba(216,70,60,.10); color:#C2382E; border-radius:var(--r-s);
  padding:10px 14px; font-size:.88rem; margin-bottom:16px;
}
.varco-foot{margin-top:22px; font-size:.78rem; color:var(--muted)}

/* ==========================================================================
   22. COMPARSA ALLO SCORRIMENTO
   ========================================================================== */
.rv{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease}
.rv.in{opacity:1; transform:none}

/* Chi ha chiesto meno animazioni al sistema operativo ne riceve zero. */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .rv{opacity:1; transform:none}
  html{scroll-behavior:auto}
  .tpl-track{scroll-behavior:auto}
}

/* ==========================================================================
   23. TABLET E TELEFONO
   ========================================================================== */
@media (max-width:1000px){
  .hero-grid,.dpanel.on,.spot,.quote-grid{grid-template-columns:1fr; gap:44px}
  .feat{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .why-head i{flex-basis:40px}
  .plans{grid-template-columns:1fr; max-width:480px; margin:0 auto}

  .plan.hot{transform:none}
  .steps{grid-template-columns:1fr; gap:28px}
  .step::after{display:none}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16px}

  /* ---------- LA DEMO SUL TELEFONO: IN SEQUENZA, NON A SCHEDE ----------

     Le schede funzionano quando il contenuto che comandano sta sotto gli
     occhi. Sul telefono no: il pannello e' alto un paio di schermate fra
     testo, elenco, pulsante e schermata, quindi appena si comincia a
     leggere le tre schede sono gia' fuori campo. Chi arriva in fondo al
     primo pannello non ha piu' modo di sapere che ce ne sono altri due —
     e per cambiarli dovrebbe risalire in cima al buio.

     Quindi sotto i 760px le schede spariscono e i tre pannelli si
     impilano: si scorre e ci si passa attraverso. Nessun clic da fare, e
     nessuna funzione nascosta dietro un comando fuori campo. */
  .demo-tabs{display:none}

  /* Vince su `.dpanel{display:none}` perche' viene dopo nel file, non
     perche' abbia piu' peso: stessa specificita', ordine diverso. Niente
     !important, che qui non serve. */
  /* SI NOMINA ANCHE `.dpanel.on`, e non e' ridondanza: quella regola pesa
     0,2,0 contro lo 0,1,0 di `.dpanel`, quindi senza citarla il pannello
     acceso (il primo) resterebbe a due colonne mentre gli altri due ne
     avrebbero una. Tre blocchi uguali che si impaginano in due modi
     diversi e' il genere di cosa che si vede subito e non si spiega. */
  .dpanel, .dpanel.on{display:grid; grid-template-columns:1fr; gap:0}

  /* IL PULSANTE VA DOPO LA SCHERMATA, non prima.

     Con il pulsante fra l'elenco e l'immagine, l'immagine resta orfana:
     arriva dopo la chiamata all'azione, quindi si legge come una cosa a
     se' invece che come la prova di quello che si e' appena raccontato.
     L'ordine giusto e': racconto, prova, invito.

     COME. Il pulsante sta DENTRO `.dtxt`, e `order` sposta solo elementi
     che sono fratelli fra loro: da dentro non puo' scavalcare `.dshot`,
     che e' fuori. `display:contents` scioglie `.dtxt` — i suoi figli
     diventano celle della griglia al posto suo — e a quel punto pulsante
     e immagine sono fratelli e `order` funziona.

     SI PUO' FARE PERCHE' `.dtxt` NON HA REGOLE PROPRIE: solo selettori
     discendenti (.dtxt h3, .dtxt > p, .dtxt ul, .dtxt li), che continuano
     a valere perche' nel DOM la parentela non cambia — cambia solo come
     viene disegnata. Se un domani `.dtxt` prendesse uno sfondo, un bordo
     o una spaziatura, quelli sparirebbero qui dentro: e' la riga da
     ricordare prima di aggiungergliene.

     GAP A ZERO, ed e' obbligatorio: sciolto `.dtxt`, il gap non sta piu'
     fra due blocchi ma fra OGNI figlio — etichetta, titolo, paragrafo,
     elenco. Con 26px la spaziatura del testo raddoppierebbe. Le distanze
     tornano a farle i margini che i singoli elementi hanno gia'. */
  .dtxt{display:contents}
  .dshot{order:1}
  .dtxt .btn{order:2; margin-top:22px; justify-self:start}

  /* La comparsa allo scorrimento si spegne SOLO qui, e per un motivo
     preciso: `.rv` parte a opacita' zero e l'IntersectionObserver in
     layout.php osserva gli elementi al caricamento. I due pannelli
     nascosti erano display:none e non intersecavano mai — funzionava
     perche' ci pensava il clic sulla scheda ad aggiungere `.in`. Tolte le
     schede, quel clic non esiste piu': senza questa riga i due pannelli
     sotto resterebbero invisibili per sempre. */
  .dpanel{opacity:1; transform:none}

  /* Un filo fra un pannello e l'altro: impilati senza separazione
     sembrerebbero un discorso solo che cambia argomento a meta'. */
  .dpanel + .dpanel{margin-top:34px; padding-top:34px; border-top:1px solid var(--line)}

  .dlabel{
    display:inline-flex; align-items:center; gap:9px; margin-bottom:12px;
    font-family:var(--disp); font-weight:600; font-size:.82rem;
    letter-spacing:.04em; text-transform:uppercase; color:var(--blu-d);
  }
  .dlabel .dot{width:7px; height:7px; border-radius:50%; background:var(--azzurro)}
  .sec{padding:72px 0}
  .why{padding:64px 0}
  .why-grid{gap:12px}
  .why-head{gap:12px; margin-bottom:32px}
  .why-head i{display:none}
  .wcard{padding:22px 14px 20px}
  .wcard .wi{width:50px; height:50px; margin-bottom:14px}

  /* Menu del telefono: la classe .aperto la mette il JS di layout.php.
     Prima questo bottone non faceva niente — c'era il markup, mancava il
     comportamento. */
  .nav-menu{display:none}
  .nav-menu.aperto{
    display:flex; flex-direction:column; position:absolute; top:78px; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--line); padding:18px 24px; gap:4px;
    box-shadow:0 14px 30px rgba(13,27,61,.10);
  }
  .nav-menu.aperto a{padding:11px 0; border-bottom:1px solid #F0F3F8; width:100%}
  .nav-burger{display:flex}
  .nav-right{display:none}
  .nav-menu.aperto .solo-mob{display:block}

  .feat,.qhead{grid-template-columns:1fr}
  /* L'immagine del telefono e' verticale e alta quasi il doppio della
     larghezza: la cornice si assottiglia ancora, perche' li' ogni millimetro
     tolto al bordo e' un millimetro dato al testo dentro le card. */
  .hero-shot{padding:6px}
  .hero-shot img{border-radius:16px}
  .hero-actions .btn{width:100%}
  .err-box{padding:36px 22px}
  .err-azioni .btn{width:100%}
  .addon,.reassure,.colors{flex-direction:column; align-items:flex-start; gap:14px}
  .colors{padding:20px}
  .colors .cs span{width:30px; height:30px}
  .tcard{flex:0 0 min(72%,300px)}   /* si vede una scheda e mezza: si capisce che si scorre */
  .final-box{padding:56px 24px}
  .foot-top{grid-template-columns:1fr}
}

/* ==========================================================================
   BANNER DELLA SCELTA SUI COOKIE

   In basso e non a schermo pieno: non deve impedire di leggere. Un muro che
   blocca la pagina finche' non accetti e' un cookie wall, e il consenso
   ottenuto cosi' non e' libero.

   I DUE PULSANTI HANNO LO STESSO PESO. Rifiutare dev'essere facile quanto
   accettare: stessa dimensione, stessa posizione, stesso contrasto. Se un
   domani qualcuno volesse rimpicciolire «Continua senza», e' qui che lo
   farebbe — e non si fa.
   ========================================================================== */
.cbar{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--navy); color:#fff;
  box-shadow:0 -12px 40px rgba(13,27,61,.24);
}
.cbar-in{
  max-width:1180px; margin:0 auto; padding:18px 24px;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.cbar p{margin:0; flex:1; min-width:260px; font-size:.92rem; line-height:1.55; color:rgba(255,255,255,.86)}
.cbar b{color:#fff}
.cbar a{color:var(--azzurro); text-decoration:underline}
.cbar-btn{display:flex; gap:10px; flex:none}
.cbar-btn form{margin:0}
.cbar-btn .btn{padding:11px 22px; font-size:.9rem}
.cbar-btn .btn-ghost{background:transparent; color:#fff; border:1.6px solid rgba(255,255,255,.45)}
.cbar-btn .btn-ghost:hover{background:rgba(255,255,255,.12); border-color:#fff}

/* Il riquadro nella pagina /cookie da cui si cambia idea. */
.cscelta{
  border:1.6px solid var(--line); border-radius:var(--r-l);
  padding:22px 24px; margin:0 0 28px; background:var(--sky);
}
.cscelta h3{font-size:1.05rem; margin-bottom:6px}
.cscelta p{font-size:.94rem; color:var(--soft); margin-bottom:16px}
.cscelta .cbar-btn{flex-wrap:wrap}
.cscelta .cbar-btn .btn-ghost{background:var(--paper); color:var(--ink); border:1.6px solid var(--line-2)}
.cscelta .cbar-btn .btn-ghost:hover{background:#fff; border-color:var(--blu)}
.cstato{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:12px;
  font-size:.85rem; font-weight:600; padding:5px 12px; border-radius:100px;
  background:var(--paper); border:1px solid var(--line);
}
.cstato .dot{width:8px; height:8px; border-radius:50%; background:var(--line-2)}
.cstato.si .dot{background:#2FA36B}
.cstato.no .dot{background:var(--muted)}

@media (max-width:760px){
  .cbar-in{padding:16px; gap:14px}
  .cbar-btn{width:100%}
  .cbar-btn form{flex:1}
  .cbar-btn .btn{width:100%}
}