/* ANTEPRIMA della home nuova (v2) — scheletro dalla bozza approvata da Simone il
   28/09 (docs/bozze/v2/home.html, PR #924). Mobile-first: la base e' 390, il
   desktop entra da 760. Niente qui e' pubblicato: anteprima/ e' chiusa
   (.htaccess) e build-public-site.sh non la copia nel deployable.
   Font: solo quelli di casa (assets/fonts). Geist della bozza NON e' in repo:
   al suo posto DM Sans; il "mono" e' la pila di sistema (zero richieste fuori). */

@font-face{font-family:"Sora WebCar";src:url(/assets/fonts/sora-bold.woff2) format("woff2");font-style:normal;font-weight:700 800;font-display:swap}
@font-face{font-family:"Sora WebCar";src:url(/assets/fonts/sora-semibold.woff2) format("woff2");font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/assets/fonts/dm-sans-latin.woff2) format("woff2");font-style:normal;font-weight:400 700;font-display:swap}

:root{
  color-scheme:dark;
  --notte:#0B1226; --notte-2:#111B34; --notte-3:#182545;
  --blu:#1663E0; --elettrico:#2F7BFF; --ciano:#22D3EE;
  --grad:linear-gradient(135deg,#1663E0 0%,#22D3EE 100%);
  --carta:#F4F6FB; --bianco:#FFFFFF; --inchiostro:#0A1526; --testo-2:#4B5568; --testo-3:#7C8699;
  --linea:#E3E8F1; --linea-notte:rgba(255,255,255,.12);
  --verde:#22C55E; --lampo:#FF7A1A; --oro:#E2B65A;
  --display:"Sora WebCar","Sora","Helvetica Neue",Arial,sans-serif;
  --sans:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --r:18px; --r-s:12px; --gutter:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--notte);color:#fff;font-family:var(--sans);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ciano);outline-offset:3px}
h1,h2,h3{font-family:var(--display);letter-spacing:-.025em;line-height:1.08;margin:0;text-wrap:balance}
p{margin:0}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ciano);display:flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--grad);border-radius:2px}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding-inline:var(--gutter)}
section{padding-block:36px;position:relative}
/* i link del menu atterrano SOTTO la testata appiccicosa (26px di fascia + 60px): senza questo margine il titolo della sezione resta coperto */
section[id],[id].ticker{scroll-margin-top:94px}
.notte{background:var(--notte);color:#fff}
.bianco{background:var(--bianco);color:var(--inchiostro)}
/* ⚠️ `--testo-3` E' UN TOKEN DA FONDO SCURO. Misurato: #7C8699 fa 5,07 su
   notte e 4,99 su inchiostro (bene), ma 3,67 su bianco e 3,39 su `.carta`
   — sotto la soglia di 4,5 del testo normale. E' la causa di TUTTI i 3,67 e
   3,39 che ho misurato oggi: la nota del prezzo promo, i contatori dei chip
   dello store, la riga legale della landing.
   Non si cambia il valore globale — su fondo scuro peggiorerebbe — si
   RIDEFINISCE dentro le superfici chiare: cosi' le 24 regole che usano
   `var(--testo-3)` diventano leggibili senza toccarne nessuna.
   #667085 sta a 4,97 su bianco e 4,60 su carta. */
.carta,.bianco,.os-card,.scheda,.tm-card{--testo-3:#667085}
.carta{background:var(--carta);color:var(--inchiostro)}
.bianco .eyebrow,.carta .eyebrow{color:var(--blu)}
/* griglia tecnica sui fondi notte */
.notte.griglia-tech::before,.mobivin::before,.area::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(80% 70% at 50% 40%,#000 30%,transparent 100%);-webkit-mask-image:radial-gradient(80% 70% at 50% 40%,#000 30%,transparent 100%)}
.testa{display:grid;gap:10px;margin-bottom:18px;position:relative}
.testa h2{font-size:clamp(26px,5.8vw,42px)}
.testa p{color:rgba(255,255,255,.72);max-width:52ch}
.bianco .testa p,.carta .testa p{color:var(--testo-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--display);font-weight:700;font-size:14px;padding:13px 18px;border-radius:999px;border:1px solid transparent;white-space:nowrap;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.btn:active{transform:scale(.97)}
.btn.pieno{background:var(--grad);color:#fff;box-shadow:0 14px 30px -14px rgba(37,99,255,.9)}
.btn.vuoto{border-color:rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.04)}
/* La variante chiara si agganciava alla SEZIONE (.bianco, .carta) e non alla
   CARTA. Le carte delle offerte della settimana sono bianche ma stanno dentro
   una sezione SCURA: li' vinceva la riga qui sopra, disegnata per il fondo
   notte, e «Scopri l'offerta» finiva bianco su bianco — rapporto 1:1, cioe'
   invisibile, su tutte e sei le carte della home. Aggiungo .auto, che e' la
   carta stessa. La stessa cura sta gia' in scheda-v3.css (riga 240:
   `.os-cta .btn.vuoto`). Il rimando diceva `scheda.css` riga 29: quel file
   non esiste piu' dalla #990, e il numero l'ho ripreso col grep, non a occhio. */
.bianco .btn.vuoto,.carta .btn.vuoto,.auto .btn.vuoto{border-color:var(--linea);color:var(--inchiostro);background:#fff}
.cta-row{display:flex;flex-wrap:wrap;gap:10px}
.chip{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:999px;border:1px solid var(--linea-notte);color:rgba(255,255,255,.75)}
.chip.ok{border-color:rgba(34,197,94,.5);color:#7BE39C}
.chip.presto{border-color:rgba(226,182,90,.5);color:#F0CB7A}
.chip.lampo{background:var(--lampo);border-color:var(--lampo);color:#0A1526}
.bianco .chip,.carta .chip{border-color:var(--linea);color:var(--testo-2)}
.glass{background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:var(--r);box-shadow:0 30px 60px -40px rgba(34,211,238,.35),inset 0 1px 0 rgba(255,255,255,.12)}

/* bozzetto: la fascia che dice che questa pagina NON e' pubblicata */
.bozzetto{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:#0A1526;color:#F0CB7A;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:6px 10px;border-bottom:1px solid var(--linea-notte)}

/* header */
header.testata{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(11,18,38,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--linea-notte)}
.testata .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px}
/* il wordmark chiaro porta «ITALIA» sotto la parola, a 48/190 della sua altezza: sotto i 28px diventa una riga illeggibile attaccata alla parola */
.logo{height:28px;width:auto}
.testata nav{display:flex;gap:8px;align-items:center}
.testata .btn{padding:9px 13px;font-size:12.5px}
.testata .menu{display:none;gap:22px;font-weight:500;font-size:14px;color:rgba(255,255,255,.8)}

/* HERO */
.hero{padding-block:0;overflow:hidden;background:radial-gradient(120% 70% at 50% 0%,#17358A 0%,var(--notte) 55%)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(70% 80% at 70% 40%,#000 20%,transparent 100%);-webkit-mask-image:radial-gradient(70% 80% at 70% 40%,#000 20%,transparent 100%)}
.hero::after{content:"";position:absolute;right:-20%;top:-10%;width:70%;height:80%;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(34,211,238,.18),transparent 70%);filter:blur(30px)}
.hero .wrap{position:relative;display:grid;gap:16px;padding-block:34px 28px}
.hero .testo{display:grid;gap:14px}
.hero h1{font-size:clamp(42px,11.5vw,84px);font-weight:800;line-height:.96}
.hero h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sotto{font-size:16px;color:rgba(255,255,255,.82);max-width:36ch}
.formule{display:flex;gap:6px;flex-wrap:wrap}
.formule .chip{background:rgba(11,18,38,.5)}
/* la chip «lampo» resta arancione ovunque: senza questa riga `.formule .chip` e `.carta .chip`, scritte dopo, la spegnevano in grigio (era cosi' anche nella bozza) */
.formule .chip.lampo,.carta .chip.lampo,.bianco .chip.lampo{background:var(--lampo);border-color:var(--lampo);color:#0A1526}
/* palco auto */
.palco{position:relative;display:grid;gap:12px;margin-top:6px}
.scena{position:relative;height:220px;display:grid;place-items:end center}
.scena .alone{position:absolute;inset:auto 0 22px;height:120px;background:radial-gradient(60% 100% at 50% 100%,rgba(34,211,238,.35),transparent 70%);filter:blur(10px)}
.scena .anello{position:absolute;bottom:26px;left:50%;width:min(320px,86%);height:26px;transform:translateX(-50%);border-radius:50%;border:1px solid rgba(34,211,238,.45);box-shadow:0 0 30px rgba(34,211,238,.35)}
.scena .anello::after{content:"";position:absolute;inset:6px 18px;border-radius:50%;border:1px dashed rgba(255,255,255,.18)}
.scena .auto-img{position:relative;width:min(330px,88%);height:auto;animation:galleggia 5s ease-in-out infinite;filter:drop-shadow(0 30px 24px rgba(0,0,0,.55))}
.scena .riflesso{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%) scaleY(-.45);width:min(330px,88%);height:auto;opacity:.22;mask-image:linear-gradient(180deg,transparent 40%,#000 100%);-webkit-mask-image:linear-gradient(180deg,transparent 40%,#000 100%);filter:blur(2px)}
.hud-tag{position:absolute;z-index:2;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ciano);display:grid;gap:2px;padding:6px 8px;border:1px solid rgba(34,211,238,.35);border-radius:8px;background:rgba(11,18,38,.6)}
.hud-tag b{color:#fff;font-size:12px;letter-spacing:0}
.hud-tag.a{left:0;top:18px}.hud-tag.b{right:0;top:54px}
@keyframes galleggia{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* costruttore canone */
.costruttore{padding:14px;display:grid;gap:12px}
.costruttore .riga{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;font-size:13px}
.costruttore .riga small{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);display:block}
.costruttore .riga b{font-family:var(--mono);font-weight:500;font-size:13px;color:var(--ciano)}
.costruttore .barra{height:5px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden;grid-column:1/-1}
.costruttore .barra i{display:block;height:100%;background:var(--grad);width:0;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.canone{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-top:1px solid var(--linea-notte);padding-top:12px}
.canone small{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.canone b{font-family:var(--display);font-size:38px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.canone b em{font-style:normal;font-size:16px;color:var(--ciano)}
.hud{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:1px solid var(--linea-notte);padding-top:14px}
.hud div{display:grid;gap:2px}
.hud b{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.02em}
.hud small{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
/* striscia marchi: i 46 loghi a colori della #922 */
.ticker{overflow:hidden;background:#fff;border-bottom:1px solid var(--linea);padding-block:12px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker div{display:flex;gap:30px;width:max-content;animation:scorri 90s linear infinite;animation-play-state:paused;align-items:center}
.ticker div.pronto{animation-play-state:running}
.ticker img{height:36px;width:auto;opacity:.9}
@keyframes scorri{to{transform:translateX(-50%)}}

/* trust */
.vie{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.via{position:relative;border-radius:var(--r);overflow:hidden;min-height:220px;background:var(--notte-2);display:flex;flex-direction:column;justify-content:flex-end;padding:14px;gap:6px;border:1px solid var(--linea-notte)}
.via img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6;transition:transform 6s ease}
.via:hover img{transform:scale(1.06)}
.via::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,18,38,0) 20%,rgba(11,18,38,.95) 100%)}
.via>*{position:relative}
.via h3{font-size:19px}
.via p{font-size:12.5px;color:rgba(255,255,255,.75)}
.via .ico{width:38px;height:38px;border-radius:12px;background:var(--grad);display:grid;place-items:center;margin-bottom:auto;box-shadow:0 10px 24px -10px rgba(34,211,238,.9)}
.via .ico svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.via.divano{background:radial-gradient(120% 90% at 100% 0%,#1B3C8A 0%,var(--notte-2) 60%)}
.mappa{position:absolute;inset:0;opacity:.55}
.mappa canvas{width:100%;height:100%}
.recensioni{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:12px 14px}
.stelle{font-family:var(--display);font-size:30px;font-weight:800;line-height:1;display:grid;gap:2px}
.stelle small{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.stelle i{color:var(--oro);font-style:normal;letter-spacing:1px;font-size:14px}
.recensioni q{quotes:"“" "”";font-size:13px;color:rgba(255,255,255,.85);display:block}
.recensioni cite{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--verde);letter-spacing:.06em}

/* porte */
.porte{display:grid;gap:10px}
.porta{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:12px;background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:14px;color:var(--inchiostro);box-shadow:0 20px 40px -30px rgba(10,21,38,.35);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.porta:hover{transform:translateY(-2px);box-shadow:0 26px 44px -26px rgba(22,99,224,.45)}
.porta .ico{width:46px;height:46px;border-radius:14px;background:var(--notte);display:grid;place-items:center}
.porta .ico svg{width:22px;height:22px;stroke:var(--ciano);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.porta h3{font-size:16.5px}
.porta p{font-size:12.5px;color:var(--testo-2)}
.porta .freccia{width:30px;height:30px;border-radius:50%;border:1px solid var(--linea);display:grid;place-items:center;color:var(--blu);font-weight:700}
.budget{grid-column:1/-1;display:none;gap:8px;padding-top:6px;border-top:1px solid var(--linea)}
.porta.aperta .budget{display:grid}
.budget label{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--testo-2)}
.budget output{color:var(--blu);font-weight:600}
.budget input[type=range]{width:100%;accent-color:var(--blu)}
.budget small{font-size:12px;color:var(--testo-2)}

/* formule */
.tre{display:grid;gap:10px}
.formula{border:1px solid var(--linea);border-radius:var(--r);padding:16px;background:#fff;display:grid;gap:8px;position:relative;overflow:hidden;color:var(--inchiostro)}
.formula.drive{background:var(--notte);color:#fff;border-color:var(--notte)}
.formula.drive::after{content:"";position:absolute;inset:auto -40px -60px auto;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.35),transparent 70%)}
.formula h3{font-size:20px}
.formula p{font-size:13px;color:var(--testo-2)}
.formula.drive p{color:rgba(255,255,255,.75)}
.formula .da{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--blu)}
.formula.drive .da{color:var(--ciano)}
.formula .tag{position:absolute;top:12px;right:12px}

/* offerte della settimana: sei tessere, scorrono a 390, tre per riga da 760 */
.scorri{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:none}
.scorri::-webkit-scrollbar{display:none}
/* LO SCAFFALE DELLE DIECI. Le card sono quelle dello store, che nello store
   stanno in una GRIGLIA: qui devono stare in fila e scorrere. Larghezze del
   disegno: a 390 se ne vede una e un pezzo (si capisce che continua), a 768
   due, da 1100 tre e mezzo. */
.scaffale-settimana .os-card{flex:0 0 86%;scroll-snap-align:start}
/* LO SCAFFALE: frecce, punti. Le frecce stanno SOPRA la pista, ai bordi, e
   solo da 760 in su: a 390 si scorre col dito e due bottoni sovrapposti alle
   card toglierebbero spazio alla foto. I punti invece ci sono sempre: dicono
   «quante sono» e «dove sei», che a 390 e' l'informazione che manca. */
.scaffale{position:relative}
.sc-freccia{display:none;position:absolute;top:calc(50% - 22px);z-index:3;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--linea);background:#fff;color:var(--inchiostro);font-size:22px;line-height:1;cursor:pointer;
  box-shadow:0 10px 24px -12px rgba(10,21,38,.5)}
.sc-freccia:hover{border-color:var(--blu);color:var(--blu)}
.sc-freccia:focus-visible{outline:2px solid var(--ciano);outline-offset:3px}
.sc-prec{left:-6px}
.sc-succ{right:-6px}
@media (min-width:760px){.sc-freccia{display:grid;place-items:center}}
.sc-punti{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0 0;padding:0}
.sc-punto{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;position:relative}
/* ⚠️ I PUNTI STANNO SU FONDO CHIARO. La sezione delle offerte e' `.carta`,
   cioe' #F4F6FB: i primi punti li avevo fatti bianchi al 28% e ciano —
   MISURATO, 1,02 e 1,67 su quel fondo, cioe' uno invisibile e l'altro sotto
   la soglia di 3:1 che vale per gli elementi non testuali. Terza volta che
   scelgo un colore senza misurare il fondo. */
.sc-punto::after{content:"";position:absolute;inset:9px;border-radius:50%;background:rgba(10,21,38,.55)}
.sc-punto[aria-current="true"]::after{background:var(--blu);inset:7px}
.sc-punto:focus-visible{outline:2px solid var(--ciano);outline-offset:0;border-radius:50%}
@media (min-width:760px){.scaffale-settimana .os-card{flex:0 0 46%}}
@media (min-width:1100px){.scaffale-settimana .os-card{flex:0 0 29%}}
.auto{flex:0 0 78%;max-width:340px;scroll-snap-align:start;background:#fff;border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;color:var(--inchiostro);display:grid;transition:opacity .3s,transform .3s,filter .3s;transform-style:preserve-3d}
.auto.fuori{opacity:.35;filter:grayscale(1)}
.auto .img{background:radial-gradient(100% 80% at 50% 100%,#E7EEFB 0%,#fff 70%);padding:18px 14px 6px;position:relative}
.auto .img img{height:130px;width:auto;margin:0 auto;object-fit:contain;filter:drop-shadow(0 18px 14px rgba(10,21,38,.25))}
.auto .img .chip{position:absolute;top:10px;left:10px}
.sirena{position:absolute;top:12px;right:12px;width:10px;height:10px;border-radius:50%;background:var(--lampo);box-shadow:0 0 0 0 rgba(255,122,26,.6);animation:pulsa 1.6s ease-out infinite}
@keyframes pulsa{to{box-shadow:0 0 0 12px rgba(255,122,26,0)}}
.auto .corpo{padding:12px 14px 14px;display:grid;gap:8px}
.auto h3,.auto h2{font-size:16px}
.auto small{font-size:12px;color:var(--testo-2)}
.prezzo{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;font-family:var(--display)}
/* La riga chiara del prezzo dell'auto sta SOPRA il canone, come nel formato
   approvato il 29/09: va a capo da sola perche' e' larga quanto la card. */
.prezzo .prezzo-auto{flex-basis:100%;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--testo-2)}
.prezzo b{font-size:30px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.prezzo span{font-family:var(--mono);font-size:11px;color:var(--testo-2)}
.auto .cond{display:flex;gap:6px;flex-wrap:wrap}
.auto .cta-row .btn{padding:10px 14px;font-size:13px;flex:1}

/* AREA CLIENTI */
.area{background:radial-gradient(90% 60% at 100% 0%,#17358A 0%,var(--notte) 55%)}
.area .griglia{display:grid;gap:22px;position:relative}
.telefono{width:min(290px,82%);margin:0 auto;border-radius:38px;background:#0A1526;border:6px solid #1B2540;box-shadow:0 40px 80px -30px rgba(37,99,255,.6),0 0 0 1px rgba(34,211,238,.25);padding:16px 12px;display:grid;gap:10px;position:relative}
.telefono::before{content:"";width:80px;height:6px;border-radius:6px;background:#1B2540;margin:0 auto 4px;order:-2}
.telefono .saluto b{display:block;font-family:var(--display);font-size:16px}
.telefono .saluto small{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.telefono .pratica{border:1px solid rgba(34,211,238,.35);border-radius:14px;padding:10px;background:rgba(37,99,255,.12);display:grid;gap:6px}
.telefono .pratica small{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.telefono .pratica b{font-size:13px}
.barra{height:6px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden}
.barra i{display:block;height:100%;width:0;background:var(--grad);transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
.telefono ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.telefono li{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.05);opacity:0;transform:translateX(18px);transition:opacity .5s,transform .5s}
.telefono.vivo li{opacity:1;transform:none}
.telefono li span{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ciano)}
/* a 390 la notifica e' una riga DENTRO il telefono (assoluta copriva il saluto su due righe); da 760 torna il «toast» fuori dal bordo */
.notifica{order:-1;padding:8px 10px;font-size:11px;display:grid;gap:2px;opacity:0;transform:translateY(10px);transition:opacity .5s .9s,transform .5s .9s}
.telefono.vivo .notifica{opacity:1;transform:none}
.notifica small{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ciano)}
.dentro{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.dentro div{font-size:13px;padding:9px 11px;border-radius:12px;border:1px solid var(--linea-notte);background:rgba(255,255,255,.03);display:flex;align-items:center;gap:8px}
.dentro div::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ciano);flex:none;box-shadow:0 0 8px var(--ciano)}

/* rewards */
.rewards .griglia{display:grid;gap:12px}
.wallet{position:relative;border-radius:var(--r);overflow:hidden;min-height:170px;padding:16px;color:#fff;background:linear-gradient(135deg,#0F1F45 0%,#1663E0 55%,#22D3EE 130%);display:grid;align-content:space-between;gap:16px;box-shadow:0 30px 60px -30px rgba(22,99,224,.7)}
.wallet::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.25) 45%,transparent 60%);transform:translateX(-100%);animation:luce 4s ease-in-out infinite}
@keyframes luce{40%,100%{transform:translateX(100%)}}
.wallet img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.18;mix-blend-mode:luminosity}
.wallet>*{position:relative}
.wallet .intesta{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.wallet .saldo b{font-family:var(--display);font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.wallet .saldo small{display:block;font-size:12px;color:rgba(255,255,255,.85)}
.modi{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.modo{background:#fff;border:1px solid var(--linea);border-radius:var(--r-s);padding:12px;display:grid;gap:3px}
.modo b{font-family:var(--display);font-size:20px;letter-spacing:-.02em;color:var(--blu)}
.modo span{font-size:12.5px;color:var(--testo-2)}

/* mobivin */
.mobivin{background:linear-gradient(160deg,#0B0F1A 0%,#0F1F45 100%);color:#fff}
.mobivin .marchi{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;font-size:15px}
.mobivin .marchi img{height:22px;width:auto}
.mobivin .marchi .mv{display:inline-flex;align-items:center;gap:6px}
.mobivin .marchi i{font-style:normal;color:rgba(255,255,255,.5)}
.mobivin .griglia{display:grid;gap:18px;position:relative}
.mobivin .scena2{position:relative;width:min(250px,72%);margin:0 auto}
/* lo schermo dell'app: un mock in HTML (nessuno screenshot dell'app e' in repo) */
.mv-schermo{border-radius:30px;overflow:hidden;border:5px solid #1B2540;box-shadow:0 40px 80px -30px rgba(34,211,238,.5);background:linear-gradient(180deg,#0A1526 55%,#0F1F45 100%);padding:18px 14px 150px;display:grid;gap:10px;min-height:340px;align-content:start}
/* il fondo dello schermo resta libero (150px): li' sopra si appoggia la gauge «salute», senza coprire le righe */
.mv-schermo::before{content:"";width:70px;height:5px;border-radius:5px;background:#1B2540;margin:0 auto 6px}
.mv-schermo .mv-testa{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:14px}
.mv-schermo .mv-testa img{width:22px;height:22px;border-radius:6px}
.mv-schermo .mv-targa{font-family:var(--mono);font-size:18px;letter-spacing:.18em;padding:8px 10px;border-radius:10px;background:#fff;color:#0A1526;text-align:center;border:2px solid #1663E0}
.mv-schermo .mv-riga{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.05)}
.mv-schermo .mv-riga span{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ciano)}
.gauge{position:absolute;left:-26px;bottom:40px;width:96px;height:96px;padding:8px;display:grid;place-items:center}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:7;stroke-linecap:round}
.gauge .fondo{stroke:rgba(255,255,255,.12)}
.gauge .valore{stroke:url(#gradGauge);stroke-dasharray:226;stroke-dashoffset:226;transition:stroke-dashoffset 1.8s cubic-bezier(.2,.8,.2,1)}
.gauge .num{position:absolute;display:grid;text-align:center;font-family:var(--display);font-weight:800;font-size:22px;line-height:1}
.gauge .num small{font-family:var(--mono);font-size:8px;letter-spacing:.12em;color:rgba(255,255,255,.6)}
.funzioni{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.funzioni div{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:13px;padding:9px 11px;border-radius:12px;border:1px solid var(--linea-notte);background:rgba(255,255,255,.03)}
.funzioni .chip{padding:3px 7px;font-size:9px}
.claim{font-family:var(--display);font-size:clamp(20px,5vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.claim span{color:var(--ciano)}
.mobivin .nota{color:rgba(255,255,255,.75);font-size:14px}

/* perché */
.prove{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.prova{background:#fff;border:1px solid var(--linea);border-radius:var(--r-s);padding:12px;display:grid;gap:6px}
.prova svg{width:22px;height:22px;stroke:var(--blu);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.prova b{font-family:var(--display);font-size:14.5px;letter-spacing:-.01em}
.prova span{font-size:12px;color:var(--testo-2)}

/* passi */
.passi{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;position:relative}
.passo{border-radius:var(--r-s);padding:12px 8px;display:grid;gap:6px;background:var(--notte-2);border:1px solid var(--linea-notte);text-align:center;position:relative}
.passo b{font-family:var(--display);font-size:13px}
.passo small{font-size:11px;color:rgba(255,255,255,.65)}
.passo .n{font-family:var(--mono);font-size:10px;color:var(--ciano);letter-spacing:.1em}
.passo.forte{background:var(--grad);border-color:transparent;box-shadow:0 20px 40px -20px rgba(34,211,238,.8)}
.passo.forte small,.passo.forte .n{color:rgba(255,255,255,.9)}

/* social */
.social{display:grid;gap:10px}
.social .foto{border-radius:var(--r);overflow:hidden;position:relative;min-height:220px}
.social .foto img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.social .foto .play{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--display);font-weight:700;font-size:14px;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.social .foto .play i{width:40px;height:40px;border-radius:50%;background:var(--grad);display:grid;place-items:center;box-shadow:0 0 0 0 rgba(34,211,238,.5);animation:pulsa2 2s ease-out infinite}
@keyframes pulsa2{to{box-shadow:0 0 0 16px rgba(34,211,238,0)}}
.social .foto .play svg{width:16px;height:16px;fill:#fff;margin-left:2px}
.numeri{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.numeri div{background:#fff;border:1px solid var(--linea);border-radius:var(--r-s);padding:12px 10px;display:grid;gap:2px;text-align:center}
.numeri b{font-family:var(--display);font-size:22px;letter-spacing:-.02em;color:var(--inchiostro);font-variant-numeric:tabular-nums}
.numeri small{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--testo-2)}

/* ecosistema in orbita */
.orbita{position:relative;height:340px;border-radius:var(--r);overflow:hidden;background:radial-gradient(70% 70% at 50% 50%,#132657 0%,var(--notte) 70%);border:1px solid var(--linea-notte)}
.orbita canvas{position:absolute;inset:0;width:100%;height:100%}
.orbita .centro{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92px;height:92px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:13px;text-align:center;line-height:1.1;box-shadow:0 0 0 10px rgba(34,211,238,.12),0 0 60px rgba(34,211,238,.5)}
.eco{display:grid;gap:8px;margin-top:10px}
.eco div{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r-s);background:rgba(255,255,255,.04);border:1px solid var(--linea-notte)}
.eco b{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ciano)}
.eco span{font-size:14px}
.entra{margin-top:22px;border-radius:var(--r);padding:22px 18px;background:var(--grad);display:grid;gap:12px;position:relative;overflow:hidden}
.entra::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 70%,rgba(255,255,255,.25) 85%,transparent 100%);animation:gira 9s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.entra>*{position:relative}
.entra h2{font-size:clamp(28px,7vw,44px);font-weight:800}
.entra p{color:rgba(255,255,255,.9);font-size:14px}
.entra .btn.vuoto{border-color:rgba(255,255,255,.6);background:rgba(11,18,38,.3)}

/* partner */
.partner{display:grid;gap:10px}
.pcard{display:grid;gap:12px;background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:18px;color:var(--inchiostro);box-shadow:0 20px 40px -30px rgba(10,21,38,.35)}
.pcard.scura{background:var(--notte);color:#fff;border-color:var(--notte)}
.pcard.scura .chip{border-color:var(--linea-notte);color:rgba(255,255,255,.75)}
.pcard h3{font-size:20px}
.pcard ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pcard li{font-size:12.5px;color:var(--testo-2);display:flex;gap:6px;align-items:center}
.pcard.scura li{color:rgba(255,255,255,.75)}
.pcard li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grad);flex:none}
.pcard .btn{justify-self:start}
.pcard.scura .btn.vuoto{border-color:rgba(255,255,255,.35);color:#fff;background:transparent}

/* footer «da grande azienda»: ragione sociale, REA, PEC, nessun telefono */
footer{background:#070C19;color:#fff;padding-block:34px 24px;border-top:1px solid var(--linea-notte);position:relative;overflow:hidden}
footer::before{content:"";position:absolute;inset:auto -20% -40% -20%;height:60%;background:radial-gradient(50% 100% at 50% 100%,rgba(22,99,224,.35),transparent 70%)}
footer .wrap{display:grid;gap:22px;position:relative}
footer .grande{font-family:var(--display);font-weight:800;font-size:clamp(46px,14vw,120px);letter-spacing:-.05em;line-height:.9;background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
footer .colonne{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
footer .colonne b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ciano);margin-bottom:8px}
footer .colonne a{display:block;font-size:13.5px;color:rgba(255,255,255,.78);padding:3px 0}
footer .societa{display:grid;gap:14px;border-top:1px solid var(--linea-notte);padding-top:18px}
footer .societa div{display:grid;gap:3px;font-size:12.5px;color:rgba(255,255,255,.72)}
footer .societa b{font-family:var(--display);font-size:14px;color:#fff;letter-spacing:-.01em}
footer .legale{font-size:11px;color:rgba(255,255,255,.45);border-top:1px solid var(--linea-notte);padding-top:14px;display:grid;gap:6px}
footer .legale a{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.25)}

@media (min-width:760px){
  section{padding-block:60px}
  .testata .menu{display:flex}
  .logo{height:34px}
  .hero .wrap{grid-template-columns:1.1fr 1fr;align-items:center;padding-block:70px 50px;gap:30px}
  .hero .sotto{font-size:18px}
  .scena{height:300px}
  .hud{grid-template-columns:repeat(3,max-content);gap:40px}
  .vie{grid-template-columns:1fr 1fr 1.1fr;align-items:stretch}
  .recensioni{grid-column:auto}
  .telefono{overflow:visible}
  .notifica{order:0;position:absolute;right:-14px;top:70px;max-width:170px}
  .porte{grid-template-columns:repeat(3,1fr)}
  .porta{grid-template-columns:46px 1fr;grid-template-rows:auto auto;padding:18px;align-content:start}
  .porta .freccia{grid-column:2;justify-self:start}
  .tre{grid-template-columns:repeat(3,1fr)}
  .scorri{margin-inline:0;padding-inline:0;gap:14px}
  .auto{flex:0 0 31%}
  .area .griglia{grid-template-columns:1fr 1fr;align-items:center}
  .dentro{grid-template-columns:repeat(3,1fr)}
  .rewards .griglia{grid-template-columns:1fr 1fr;align-items:stretch}
  .mobivin .griglia{grid-template-columns:1fr 1.3fr;align-items:center}
  .prove{grid-template-columns:repeat(3,1fr)}
  .social{grid-template-columns:1.2fr 1fr;align-items:stretch}
  .orbita{height:420px}
  .eco div{grid-template-columns:160px 1fr}
  .entra{grid-template-columns:1fr auto;align-items:center;padding:34px}
  .partner{grid-template-columns:1fr 1fr}
  footer .colonne{grid-template-columns:repeat(5,1fr)}
  footer .societa{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .costruttore .barra i{width:var(--w)!important}
  .telefono li,.notifica{opacity:1!important;transform:none!important}
}

/* domande frequenti — le quattro della home viva, apribili una per volta */
.faq{display:grid;gap:8px}
.faq .domanda{background:#fff;border:1px solid var(--linea);border-radius:var(--r-s);padding:0;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:14px 16px;font-family:var(--display);font-weight:700;font-size:15px;color:var(--inchiostro);display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:18px;color:var(--blu);flex:none}
.faq .domanda[open] summary::after{content:"–"}
.faq .domanda p{margin:0;padding:0 16px 14px;font-size:13.5px;color:var(--testo-2)}

/* OFFERTE DELLA SETTIMANA (serbatoio, voce 4). Sono le campagne di casa
   madre, distinte dalla vetrina qui sopra: quella e' una striscia che scorre,
   questa e' una griglia che si legge tutta insieme. Le card riusano `.auto`,
   `.prezzo` e `.chip` della home; qui stanno solo la griglia e le tre righe
   di testo che la presentano. */
.settimana{padding:var(--sezione) var(--gutter)}
.settimana .occhiello{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--testo-2);margin:0 0 6px}
.settimana h2{font-family:var(--display);font-size:clamp(24px,6vw,38px);line-height:1.08;letter-spacing:-.03em;margin:0 0 8px}
.settimana .sottotitolo{margin:0 0 18px;color:var(--testo-2);max-width:62ch}
.griglia-settimana{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:700px){.griglia-settimana{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.griglia-settimana{grid-template-columns:repeat(3,1fr)}}
/* nella griglia le card non scorrono: si tolgono larghezza fissa e snap */
.griglia-settimana .auto{flex:initial;max-width:none;scroll-snap-align:none;width:auto}
.settimana .prezzo-etichetta{flex-basis:100%;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--testo-2)}
.settimana .prezzo.canone b{font-size:22px}
.settimana .colori{display:flex;align-items:center;gap:5px}
.settimana .colori i{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.18)}
.settimana .nota{margin:16px 0 0;font-size:12.5px;color:var(--testo-2);max-width:72ch}