/* =====================================================================
   TURBOFIX - HOME, DIREZIONE "NOTTE" (proposta 2026-08-05, secondo giro)

   IDEA: il sito e' la continuazione dell'app. Stessa notte blu, stesso
   verde dei dati misurati, stesso blu per le azioni. Il protagonista e'
   il PRODOTTO: lo schermo vero di TurboFix, grande, al centro, con la
   luce dietro. Attorno: aria, profondita', movimento discreto.

   Non tocca assets/tf.css: le altre pagine restano come sono finche' la
   direzione non e' approvata.
   ===================================================================== */

/* ---------------------------------------------------------------- CARATTERI
   Due voci moderne, nessun serif:
   - Manrope (variabile 500-800): titoli. Spalle larghe, taglio pulito.
   - Inter (variabile, e' quella che il sito ha gia'): testo e dati. */
@font-face{font-family:Manrope;src:url(/assets/font/manrope-var.woff2) format('woff2-variations');
  font-weight:500 800;font-style:normal;font-display:swap}
@font-face{font-family:"Inter var";src:url(/assets/inter-latin.woff2) format('woff2');
  font-weight:400 800;font-style:normal;font-display:swap}

/* ---------------------------------------------------------------- TOKEN */
:root{
  /* la notte, dal fondo alla superficie piu' alta */
  --bg:#070A11;
  --bg2:#0A0E17;
  --sup:#101724;
  --sup2:#151D2B;
  --sup3:#1B2433;

  --bordo:rgba(255,255,255,.075);
  --bordo2:rgba(255,255,255,.14);
  --bordo3:rgba(255,255,255,.22);

  /* contrasti verificati con la formula WCAG su fondo #070A11:
     ink 17,5:1 - ink2 8,0:1 - ink3 5,5:1 - blu 5,3:1 - verde 11,0:1 */
  --ink:#EDF1F8;
  --ink2:#9AA6B9;
  --ink3:#7C8799;

  /* il blu e' quello del marchio. Sui bottoni serve un tono piu' profondo,
     altrimenti il bianco sopra non arriva al contrasto minimo. */
  --blu:#3A80F5;
  --blu-ch:#78ABFF;
  --blu-btn:#2563EB;
  --blu-btn-su:#1E56D6;
  --verde:#3ED9A4;      /* lo stesso verde "dato misurato" dell'app */

  --alone:rgba(58,128,245,.20);
  --curva:cubic-bezier(.22,.61,.36,1);
  --corpo:1240px;
}

/* ---------------------------------------------------------------- BASE */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 17px/1.65 "Inter var",'Segoe UI',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* height:auto e' obbligatorio: senza, gli attributi width/height dell'HTML
   restano fissi e l'immagine si schiaccia quando la colonna e' piu' stretta */
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--blu-ch);text-decoration:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:Manrope,'Segoe UI',system-ui,sans-serif;color:var(--ink)}
h1{font-weight:800;font-size:clamp(40px,5.6vw,72px);line-height:1.04;letter-spacing:-.032em}
h2{font-weight:800;font-size:clamp(30px,3.5vw,46px);line-height:1.1;letter-spacing:-.026em}
h3{font-weight:700;font-size:21px;line-height:1.28;letter-spacing:-.014em}
.num{font-variant-numeric:tabular-nums}

.contenitore{width:100%;max-width:var(--corpo);margin:0 auto;padding:0 28px}
.salta{position:absolute;left:-9999px}
.salta:focus{left:14px;top:12px;z-index:99;background:var(--sup2);color:var(--ink);padding:10px 16px;border-radius:8px}
:focus-visible{outline:2px solid var(--blu);outline-offset:3px;border-radius:6px}

/* ---------------------------------------------------------------- MOVIMENTO */
.js .su{opacity:0;transform:translateY(18px)}
.js .su.dentro{opacity:1;transform:none;transition:opacity .7s var(--curva),transform .7s var(--curva)}
.js .r1.dentro{transition-delay:.08s}.js .r2.dentro{transition-delay:.16s}
.js .r3.dentro{transition-delay:.24s}.js .r4.dentro{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .su{opacity:1!important;transform:none!important;transition:none!important}
  *{animation:none!important}
  /* ECCEZIONE VOLUTA, non una svista: la striscia delle recensioni continua a
     scorrere anche per chi ha chiesto meno animazioni. E' una decisione di Eric del
     14/08/2026, presa sapendo che le linee guida direbbero il contrario. Per fermarla
     basta passarci sopra col mouse o arrivarci col tasto Tab. */
  .striscia-file{
    animation-name:striscia-scorre!important;
    animation-duration:var(--striscia-durata,80s)!important;
    animation-timing-function:linear!important;
    animation-iteration-count:infinite!important;
  }
  /* e la pausa col mouse va rimessa anche lei: quel *{animation:none!important}
     qui sopra impone "in movimento" a tutto, pausa compresa */
  .striscia-pista:hover .striscia-file,
  .striscia-pista:focus-within .striscia-file{animation-play-state:paused!important}
  /* i testi dell'apertura restano visibili anche senza la loro entrata */
  .js .apertura .mov > *,.js .apertura .fiducia li{opacity:1!important;filter:none!important;transform:none!important}
  .apertura .sfondo img{transform:none!important}
}

/* ---------------------------------------------------------------- OCCHIELLI */
.occhiello{
  font-size:13.5px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;
  color:var(--blu-ch);margin-bottom:18px;
}
.occhiello.verde{color:var(--verde)}
.guida{margin-top:20px;font-size:18.5px;line-height:1.62;color:var(--ink2);max-width:36em}

/* pastiglia dell'apertura, con il puntino che respira */
.pastiglia{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--bordo2);border-radius:999px;padding:8px 16px 8px 13px;
  font-size:14px;font-weight:500;color:var(--ink2);
}
.pastiglia .puntino{
  width:7px;height:7px;border-radius:50%;background:var(--verde);flex:none;
  box-shadow:0 0 0 4px rgba(62,217,164,.16);animation:respira 2.8s ease-in-out infinite;
}
@keyframes respira{50%{box-shadow:0 0 0 7px rgba(62,217,164,.05)}}
.pastiglia b{color:var(--ink);font-weight:600}

/* ---------------------------------------------------------------- BOTTONI */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:600 16.5px/1 "Inter var",sans-serif;letter-spacing:-.004em;
  padding:16px 26px;border-radius:11px;border:1px solid transparent;cursor:pointer;
  transition:background .2s var(--curva),box-shadow .28s var(--curva),transform .2s var(--curva),border-color .2s;
}
.btn.pri{
  background:var(--blu-btn);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 8px 26px -8px rgba(37,99,235,.85);
}
.btn.pri:hover{background:var(--blu-btn-su);transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 14px 40px -10px rgba(58,128,245,.95)}
.btn.sec{
  background:rgba(255,255,255,.045);color:var(--ink);border-color:var(--bordo2);
}
.btn.sec:hover{background:rgba(255,255,255,.08);border-color:var(--bordo3);transform:translateY(-1px)}
.azioni{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

.rimando{
  display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:16px;color:var(--blu-ch);
}
.rimando svg{width:17px;height:17px;stroke:currentColor;stroke-width:2.2;fill:none;transition:transform .22s var(--curva)}
.rimando:hover svg{transform:translateX(4px)}

/* ---------------------------------------------------------------- BARRA */
/* In cima la barra e' invisibile, cosi' non mette niente davanti al video;
   prende il fondo appena si scorre (classe aggiunta dal JS). */
.barra{
  position:sticky;top:0;z-index:50;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s var(--curva),border-color .3s var(--curva);
}
.barra.giu{
  background:rgba(7,10,17,.78);backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--bordo);
}
.barra .contenitore{display:flex;align-items:center;gap:30px;height:70px}
.marchio{display:flex;align-items:center;gap:10px;color:var(--ink);
  font:700 20px/1 Manrope,sans-serif;letter-spacing:-.02em;margin-right:auto}
.marchio img{width:42px;height:28px}
.nav{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav a{color:var(--ink2);font-size:15.5px;font-weight:500;transition:color .18s}
.nav a:hover{color:var(--ink)}
.barra .btn{padding:11px 18px;font-size:15px;border-radius:9px}

/* ---------------------------------------------------------------- APERTURA */
.apertura{position:relative;padding:96px 0 0;text-align:center;overflow:hidden;isolation:isolate}

/* ------------------------------------------------- LO SFONDO DELL'APERTURA
   Una FOTO ferma, non un filmato (scelta di Eric): nitida a qualsiasi
   ingrandimento, leggera, e senza nessun velo davanti. Il movimento lo fanno
   i testi, qui sotto.
   La foto e' la griglia di un computer con l'hardware dietro. L'inquadratura
   e' stata scelta MISURANDO: nella fascia dove cadono le parole solo lo 0,08%
   dell'area scende sotto 4,5:1 di contrasto col bianco.
   In basso la foto svanisce con una maschera: non e' una patina sopra, e' il
   media che finisce dove comincia la finestra dell'app. */
.apertura .sfondo{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 84%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 84%,transparent 100%);
}
.apertura .sfondo img{
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;
  /* parallasse appena accennato: la foto si muove meno della pagina (30 px) */
  transform:translateY(var(--scorri,0px)) scale(1.02);
}
.apertura .contenitore{position:relative;z-index:2}

/* ------------------------------------------------- IL MOVIMENTO, SUI TESTI
   Entrata a scaglioni con una velatura che si apre, poi due respiri continui:
   la luce che scorre sulla seconda riga del titolo e l'alone del bottone.
   Chi ha chiesto meno animazioni vede tutto fermo (vedi in fondo al file). */
.js .apertura .mov > *{opacity:0}
.js .apertura.parte .mov > *{animation:entra .72s var(--curva) forwards}
.js .apertura.parte .mov .r-pastiglia{animation-delay:.02s}
.js .apertura.parte .mov .r-t1{animation-delay:.14s}
.js .apertura.parte .mov .r-t2{animation-delay:.26s}
.js .apertura.parte .mov .r-sotto{animation-delay:.44s}
.js .apertura.parte .mov .r-azioni{animation-delay:.58s}
.js .apertura.parte .mov .r-fiducia{animation-delay:.72s}
.js .apertura.parte .mov .r-vetrina{animation-delay:.90s;animation-duration:.95s}
@keyframes entra{
  from{opacity:0;transform:translateY(20px);filter:blur(9px)}
  to  {opacity:1;transform:none;filter:blur(0)}
}
/* le spunte delle prove arrivano una dopo l'altra */
.js .apertura.parte .fiducia li{opacity:0;animation:entra-mini .5s ease-out forwards}
.js .apertura.parte .fiducia li:nth-child(1){animation-delay:.80s}
.js .apertura.parte .fiducia li:nth-child(2){animation-delay:.88s}
.js .apertura.parte .fiducia li:nth-child(3){animation-delay:.96s}
.js .apertura.parte .fiducia li:nth-child(4){animation-delay:1.04s}
@keyframes entra-mini{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
/* la luce che scorre sulla seconda riga del titolo: lenta, non lampeggia */
.apertura h1 .ev{
  display:block;
  background:linear-gradient(100deg,#fff 0%,#9EC2FF 34%,#fff 68%,#9EC2FF 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:scorri-luce 9s linear infinite;
}
@keyframes scorri-luce{from{background-position:0% 50%}to{background-position:-280% 50%}}
/* il bottone respira: l'alone si allarga e si stringe, molto piano */
.js .apertura.parte .btn.pri{animation:respiro 3.6s ease-in-out 1.4s infinite}
@keyframes respiro{
  0%,100%{box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 8px 26px -8px rgba(37,99,235,.85)}
  50%    {box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 10px 40px -6px rgba(58,128,245,.95)}
}
.apertura h1{margin:26px auto 0;max-width:17em}
.apertura h1 .ev{
  background:linear-gradient(180deg,#fff,#9EC2FF 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.apertura .sotto{margin:26px auto 0;max-width:33em;font-size:19.5px;line-height:1.6;color:var(--ink2)}
.apertura .sotto b{color:var(--ink);font-weight:600}
.apertura .azioni{justify-content:center;margin-top:36px}

/* la riga della fiducia, subito sotto i bottoni */
/* Questa riga sta sopra il filmato: il grigio tenue non basterebbe, quindi si
   usa il grigio chiaro. Sono anche le prove di fiducia, giusto che si leggano. */
.fiducia{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 30px;
  list-style:none;margin:34px 0 0;padding:0;font-size:14.5px;color:var(--ink2);
}
.fiducia li{display:flex;align-items:center;gap:8px}
.fiducia svg{width:16px;height:16px;flex:none;stroke:var(--verde);stroke-width:2.6;fill:none}
.fiducia b{color:var(--ink);font-weight:600}

/* ------------------------------------------------- LA VETRINA (il prodotto)
   La finestra dell'app: cornice sottile, riflesso in alto, ombra profonda,
   alone blu dietro. In basso sfuma nel fondo, cosi' sembra che continui. */
.vetrina{position:relative;margin-top:64px;padding-bottom:40px}
.vetrina::before{  /* l'alone dietro alla finestra */
  content:"";position:absolute;left:50%;top:8%;width:min(1180px,92%);height:78%;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(58,128,245,.34),transparent 68%);
  filter:blur(48px);pointer-events:none;
}
.finestra{
  position:relative;width:min(1160px,100%);margin:0 auto;
  border:1px solid var(--bordo2);border-radius:16px;padding:9px;
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.02) 22%,rgba(255,255,255,.012));
  box-shadow:0 50px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.4);
}
.finestra img{width:100%;height:auto;border-radius:9px;border:1px solid rgba(0,0,0,.5)}
/* la sfumatura che fonde il bordo basso dell'immagine nel fondo pagina */
.vetrina .sfuma{
  position:absolute;left:0;right:0;bottom:0;height:230px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(7,10,17,.72) 52%,var(--bg) 88%);
}

/* ---------------------------------------------------------------- SEZIONI */
section{padding:118px 0;position:relative}
/* due sezioni che si leggono come una sola: la seconda non ripete lo stacco */
section.attaccata{padding-top:0}
.testa-sez{max-width:34em}
.testa-sez.centro{max-width:30em;margin:0 auto;text-align:center}
.testa-sez.centro .guida{margin-left:auto;margin-right:auto}

/* fascia dei numeri di fiducia */
.prove{border-top:1px solid var(--bordo);border-bottom:1px solid var(--bordo);background:var(--bg2)}
.prove .contenitore{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.prove .voce{padding:34px 30px;border-left:1px solid var(--bordo)}
.prove .voce:first-child{border-left:0;padding-left:0}
.prove .n{font:800 32px/1 Manrope,sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.prove .voce.spicca .n{color:var(--verde)}
.prove .d{margin-top:9px;font-size:14.5px;color:var(--ink3);line-height:1.5;max-width:15em}
.prove a{color:var(--ink2);border-bottom:1px solid var(--bordo3)}
.prove a:hover{color:var(--ink)}

/* ------------------------------------------------- SEZIONE A DUE COLONNE */
.doppia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:64px;align-items:center}
.doppia.girata{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr)}
.doppia.girata .testo{order:2}
.spunte{list-style:none;margin:30px 0 0;padding:0}
.spunte li{display:flex;gap:13px;padding:9px 0;font-size:16.5px;color:var(--ink2)}
.spunte li b{color:var(--ink);font-weight:600}
.spunte svg{width:19px;height:19px;flex:none;margin-top:4px;stroke:var(--verde);stroke-width:2.4;fill:none}

/* la finestra piu' piccola, per le sezioni interne */
.quadro{
  position:relative;border:1px solid var(--bordo2);border-radius:14px;padding:8px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 30%);
  box-shadow:0 40px 70px -34px rgba(0,0,0,.9);
}
.quadro img{border-radius:8px;border:1px solid rgba(0,0,0,.5)}
.quadro::after{ /* alone dietro */
  content:"";position:absolute;inset:12% 6%;z-index:-1;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(58,128,245,.26),transparent 70%);filter:blur(44px);
}

/* ------------------------------------------------- BENTO (misure diverse) */
/* align-items:start: ogni tessera e' alta quanto il suo contenuto, non si stira
   per pareggiare la vicina. E' l'asimmetria che tiene insieme il bento. */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px;align-items:start}
.tessera{
  position:relative;overflow:hidden;border:1px solid var(--bordo);border-radius:18px;
  background:linear-gradient(180deg,var(--sup),var(--bg2));padding:30px;
  transition:transform .3s var(--curva),border-color .3s,box-shadow .3s var(--curva);
}
.tessera:hover{transform:translateY(-3px);border-color:var(--bordo2);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.9)}
.tessera.larga{grid-column:span 2}
.tessera .eti{font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--blu-ch)}
.tessera h3{margin-top:14px}
.tessera p{margin-top:12px;font-size:16px;color:var(--ink2);max-width:32em}
/* niente flex qui: con il gap i pezzi di testo si staccano dalla punteggiatura */
.tessera .dato{margin-top:20px;font-size:13.5px;color:var(--ink3)}
.tessera .dato .v{font-weight:700;font-size:15px;color:var(--verde);font-variant-numeric:tabular-nums}
/* l'immagine dentro la tessera esce dal bordo: da' profondita' e dice
   "questa e' una finestra vera che continua". In basso svanisce. */
.tessera .scorcio{
  position:relative;margin:26px -30px -30px 0;border-top-left-radius:12px;overflow:hidden;
  border-top:1px solid var(--bordo2);border-left:1px solid var(--bordo2);
}
.tessera .scorcio img{border-radius:0}
.tessera .scorcio::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:96px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(10,14,23,.92));
}

/* ------------------------------------------------- I TRE PASSI */
.passi{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:60px;position:relative}
.passo{position:relative;padding-top:30px;border-top:1px solid var(--bordo2)}
.passo .cifra{
  position:absolute;top:-15px;left:0;width:30px;height:30px;border-radius:50%;
  background:var(--bg);border:1px solid var(--bordo2);color:var(--blu-ch);
  font:700 13.5px/28px Manrope,sans-serif;text-align:center;font-variant-numeric:tabular-nums;
}
.passo h3{font-size:19px}
.passo p{margin-top:11px;font-size:16px;color:var(--ink2)}

/* ------------------------------------------------- OFFERTA DI LANCIO
   Pannello con il filetto luminoso: un bordo in gradiente, non un neon. */
.offerta{
  position:relative;border-radius:22px;padding:56px 52px;overflow:hidden;
  background:
    radial-gradient(120% 130% at 12% -10%,rgba(58,128,245,.20),transparent 55%),
    linear-gradient(180deg,var(--sup2),var(--bg2));
  border:1px solid var(--bordo2);
}
.offerta::before{ /* filetto chiaro sul bordo alto */
  content:"";position:absolute;left:12%;right:12%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(120,171,255,.85),transparent);
}
.offerta-griglia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:56px;align-items:center}
.offerta h2{max-width:17em}
.offerta .guida{margin-top:18px}
.chiave{
  border:1px solid var(--bordo2);border-radius:16px;padding:26px;
  background:rgba(7,10,17,.55);backdrop-filter:blur(6px);
}
.chiave .eti{font-size:12.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--verde)}
.chiave .tit{margin-top:12px;font:800 26px/1.15 Manrope,sans-serif;letter-spacing:-.024em}
.chiave ul{list-style:none;margin:20px 0 0;padding:0}
.chiave li{display:flex;gap:11px;padding:7px 0;font-size:15.5px;color:var(--ink2)}
.chiave svg{width:17px;height:17px;flex:none;margin-top:3px;stroke:var(--verde);stroke-width:2.6;fill:none}
.chiave .prezzo{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--bordo);
  display:flex;align-items:baseline;gap:10px;
}
.chiave .prezzo .v{font:800 34px/1 Manrope,sans-serif;letter-spacing:-.03em}
.chiave .prezzo .t{font-size:14.5px;color:var(--ink3)}

/* ------------------------------------------------- DOMANDE */
.domande{margin-top:48px;border-top:1px solid var(--bordo)}
.domanda{border-bottom:1px solid var(--bordo);padding:26px 0}
.domanda .q{font:700 18.5px/1.35 Manrope,sans-serif;letter-spacing:-.016em;color:var(--ink)}
.domanda .a{margin-top:11px;font-size:16.5px;color:var(--ink2);max-width:52em}
.domanda .a a{border-bottom:1px solid rgba(120,171,255,.4)}

/* ------------------------------------------------- LE RECENSIONI VERE
   Non c'e' nessuna recensione scritta qui dentro, e non e' una dimenticanza:
   arrivano da /recensioni-pub.json, che il pannello riscrive quando Eric
   approva quelle mandate DALL'APP. Se non ce ne sono, la sezione lo dice.
   I testi degli utenti entrano solo con textContent (mai innerHTML). */
.rec-riga{display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap;margin-top:22px}
.rec-media{display:flex;align-items:baseline;gap:9px}
.rec-media .n{font:800 34px/1 Manrope,sans-serif;letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums}
/* Attenzione: "su" qui NON vuol dire "entra dal basso". E' la parolina del voto,
   quella di "4,9 su 5". Stessa classe, due significati: senza questa riga eredita
   l'animazione di ingresso e resta trasparente per sempre, perche' il blocco delle
   recensioni arriva dopo che il sorvegliante ha gia' fatto il giro. */
.rec-media .su{font-size:14.5px;color:var(--ink3)}
.js .rec-riga.su,.js .rec-riga .su{opacity:1;transform:none}
.stelline{display:inline-flex;gap:3px}
.stelline svg{width:17px;height:17px;fill:var(--ambra,#E8B04B)}
.stelline svg.spenta{fill:rgba(255,255,255,.16)}
.rec-conta{font-size:15px;color:var(--ink2)}
.rec-conta b{color:var(--ink);font-weight:600}

.recensioni{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.rec{
  border:1px solid var(--bordo);border-radius:18px;padding:24px 22px;
  background:linear-gradient(180deg,var(--sup),var(--bg2));display:flex;flex-direction:column;gap:12px;
}
.rec .stelline{margin-bottom:2px}
.rec .testo{font-size:16px;line-height:1.6;color:var(--ink);margin:0}
.rec .chi{margin-top:auto;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:13.5px;color:var(--ink3);padding-top:6px}
.rec .chi b{color:var(--ink2);font-weight:600}
.rec .risposta{
  border-left:2px solid var(--blu);padding-left:13px;font-size:14.5px;line-height:1.55;color:var(--ink2);
}
.rec .risposta .eti{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--blu-ch);margin-bottom:4px}
/* quando non ce n'e' ancora nessuna: si dice, non si inventa */
.rec-vuoto{
  margin-top:30px;border:1px dashed var(--bordo2);border-radius:18px;padding:28px 24px;
  background:rgba(255,255,255,.02);font-size:16.5px;color:var(--ink2);max-width:44em;
}
.rec-vuoto b{color:var(--ink);font-weight:600}
@media (max-width:1020px){.recensioni{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.recensioni{grid-template-columns:1fr;gap:16px}.rec{padding:20px 18px}}

/* ---------------------------------------------------------------- PIEDE */
footer{border-top:1px solid var(--bordo);background:var(--bg2);padding:70px 0 36px;font-size:15px;color:var(--ink2)}
footer .pie-griglia{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px}
footer h4{font:600 13px/1 "Inter var",sans-serif;letter-spacing:.11em;text-transform:uppercase;color:var(--ink3);margin-bottom:16px}
footer ul{list-style:none;margin:0;padding:0}
footer li{padding:6px 0}
footer a{color:var(--ink2)}
footer a:hover{color:var(--ink)}
footer .marchio{margin-bottom:16px}
footer .pie-basso{
  margin-top:52px;padding-top:24px;border-top:1px solid var(--bordo);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--ink3);
}
footer .pie-basso nav{display:flex;gap:20px;flex-wrap:wrap}

/* ---------------------------------------------------------------- SCHERMI PICCOLI */
@media (max-width:1020px){
  .doppia,.doppia.girata,.offerta-griglia{grid-template-columns:1fr;gap:44px}
  .doppia.girata .testo{order:0}
  .bento,.passi{grid-template-columns:1fr 1fr}
  .tessera.larga{grid-column:span 2}
  .prove .contenitore{grid-template-columns:1fr 1fr}
  .prove .voce:nth-child(3){border-left:0;padding-left:0}
  footer .pie-griglia{grid-template-columns:1fr 1fr}
  /* SOTTO I 1020 px il menu non sparisce: passa a una riga sotto il marchio.
     Senza questa riga, sul telefono restavano solo il logo e il bottone. */
  .barra .contenitore{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:8px;gap:10px 18px}
  /* Con cinque voci non entrano piu' tutte in una riga sul telefono: vanno A CAPO.
     Prima scorrevano di lato, e una voce mezza tagliata sul bordo non si vede che
     c'e'. */
  .nav{order:3;width:100%;gap:8px 13px;flex-wrap:wrap;padding-bottom:2px}
  .nav a{font-size:14px;white-space:nowrap}
  .marchio{margin-right:auto}
}
@media (max-width:680px){
  body{font-size:16.5px}
  section{padding:78px 0}
  .apertura{padding-top:64px}
  .apertura .sotto{font-size:17.5px}
  .btn{width:100%}
  .barra .btn{width:auto;padding:10px 15px;font-size:14.5px}
  .barra .contenitore{height:auto;gap:10px 14px;padding-top:9px;padding-bottom:7px}
  .marchio{font-size:18px}.marchio img{width:37px;height:25px}
  .fiducia{display:grid;gap:10px;font-size:14px;justify-items:start;text-align:left;margin-top:28px}
  .vetrina{margin-top:44px;padding-bottom:18px}
  .finestra{padding:6px;border-radius:12px}
  /* sul telefono la finestra e' bassa: una sfumatura da 230 px se la mangerebbe */
  .vetrina .sfuma{height:90px}
  /* sul telefono c'e' la versione verticale, con la nube ancora piu' in basso */
  .apertura .sfondo{
    -webkit-mask-image:linear-gradient(180deg,#000 92%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 92%,transparent 100%)}
  .bento,.passi,.prove .contenitore{grid-template-columns:1fr}
  .tessera.larga{grid-column:span 1}
  .tessera{padding:24px}
  .tessera .scorcio{margin:22px -24px -24px 0}
  .prove .voce{border-left:0;padding:26px 0;border-top:1px solid var(--bordo)}
  .prove .voce:first-child{border-top:0;padding-top:0}
  .offerta{padding:34px 24px;border-radius:18px}
  footer .pie-griglia{grid-template-columns:1fr}
}


/* ===================================================================== LE TENDINE
   Il menu in alto adesso porta dentro anche le sezioni che stavano solo nel piede.
   Col mouse si apre al passaggio; il clic serve sul telefono e per la tastiera
   (lo gestisce assets/menu.js). Sotto i 1020 px la tendina non galleggia piu':
   si apre in colonna dentro la barra, altrimenti finirebbe fuori dallo schermo. */
nav .nav,.nav{align-items:center}
.tendina-nav{position:relative}
.tendina-nav>.voce{display:inline-flex;align-items:center;gap:6px;margin:0;padding:0;border:0;
  background:none;font:inherit;font-size:15.5px;font-weight:500;color:var(--ink2);cursor:pointer;
  transition:color .18s}
.tendina-nav>.voce:hover,.tendina-nav.aperta>.voce,.tendina-nav>.voce.qui{color:var(--ink)}
.tendina-nav .frec{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.tendina-nav.aperta .frec{transform:rotate(180deg)}
.tendina-nav .giu{position:absolute;top:calc(100% + 16px);left:-16px;z-index:70;min-width:288px;
  display:grid;gap:1px;padding:10px;border-radius:18px;
  background:#0B1220;border:1px solid rgba(255,255,255,.10);box-shadow:0 26px 64px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s}
/* il ponte invisibile: passando dal pulsante al pannello il mouse non "cade" */
.tendina-nav .giu::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.tendina-nav.aperta .giu,.tendina-nav .giu:focus-within{opacity:1;visibility:visible;
  transform:none;pointer-events:auto}
@media (hover:hover){
  .tendina-nav:hover .giu{opacity:1;visibility:visible;transform:none;pointer-events:auto}
}
.tendina-nav .giu a{display:block;padding:9px 12px;border-radius:12px;color:var(--ink);
  font-size:14.5px;font-weight:600;line-height:1.35;transition:background .16s,color .16s}
.tendina-nav .giu a span{display:block;margin-top:2px;font-size:12.5px;font-weight:400;
  color:var(--ink3)}
.tendina-nav .giu a:hover{background:rgba(58,128,245,.16);color:#fff}
.tendina-nav .giu a.qui{background:rgba(58,128,245,.16)}
.nav a.qui{color:var(--ink)}
@media (max-width:1020px){
  .tendina-nav{position:static}
  .tendina-nav>.voce{font-size:14px}
  .tendina-nav .giu{position:static;min-width:0;width:100%;margin:6px 0 4px;padding:6px;
    border-radius:14px;box-shadow:none;opacity:1;visibility:visible;transform:none;
    pointer-events:auto;display:none}
  .tendina-nav .giu::before{display:none}
  .tendina-nav:hover .giu{display:none}
  .tendina-nav.aperta .giu,.tendina-nav.aperta:hover .giu{display:grid}
  .tendina-nav .giu a span{display:none}
}

/* Il nome della voce e' un LINK alla pagina generale (clic su "Guide" = elenco delle
   guide); la freccia accanto e' un pulsante a parte che apre solo la tendina. Prima
   il nome non era cliccabile: sembrava rotto. */
.tendina-nav{display:inline-flex;align-items:center;gap:2px}
.tendina-nav>.frec-bt{display:inline-flex;align-items:center;justify-content:center;
  margin:0;padding:5px 2px;border:0;background:none;color:inherit;cursor:pointer;line-height:0}
.tendina-nav>.frec-bt:hover .frec{color:#EDF1F8}
.tendina-nav.aperta>.frec-bt .frec{transform:rotate(180deg)}
.tendina-nav .frec{color:inherit}

@media (max-width:1020px){
  /* Sul telefono la voce e la sua freccia stanno in riga (inline-flex): se il
     pannello restasse nel flusso si metterebbe DI FIANCO al nome. Quindi torna
     fuori dal flusso, ancorato alla barra, larghezza piena sotto le voci. */
  .contenitore{position:relative}
  .tendina-nav .giu{position:absolute;left:0;right:0;top:calc(100% + 6px);width:auto}
}

/* ============================================================== IL MENU A PANINO
   Sul telefono il menu non deve stare aperto: prima le voci e TUTTE le sottovoci
   scendevano in colonna e spingevano giu' la pagina. Adesso c'e' il pulsante a tre
   righe, chiuso di default; le sottovoci si aprono al tocco della freccia.
   Questo blocco sta in fondo di proposito: sovrascrive le regole di prima. */
.panino{display:none}
@media (max-width:1020px){
  .panino{display:inline-flex;align-items:center;justify-content:center;margin:0 0 0 auto;
    padding:7px;border:1px solid rgba(255,255,255,.14);border-radius:11px;background:none;
    color:#EDF1F8;cursor:pointer;line-height:0;order:2}
  .marchio{order:1}
  .btn.pri{order:3}
  .nav{display:none}
  .barra.apri .nav{display:flex;order:4;width:100%;flex-direction:column;
    align-items:stretch;gap:0;padding:4px 0 10px;margin-top:4px;
    border-top:1px solid rgba(255,255,255,.08)}
  .nav>li{width:100%}
  .nav>li>a{display:block;padding:11px 2px;font-size:15px}
  .tendina-nav{position:static;display:flex;flex-wrap:wrap;align-items:center;
    justify-content:space-between;width:100%}
  .tendina-nav>.voce{flex:1 1 auto;padding:11px 2px;font-size:15px}
  .tendina-nav>.frec-bt{flex:0 0 auto;padding:11px 6px}
  .tendina-nav .giu{position:static;flex:0 0 100%;width:100%;min-width:0;
    margin:0 0 8px;padding:4px;border-radius:12px;box-shadow:none;
    opacity:1;transform:none;pointer-events:auto;visibility:hidden;display:none}
  .tendina-nav .giu::before{display:none}
  .tendina-nav:hover .giu{display:none}
  .tendina-nav.aperta .giu,.tendina-nav.aperta:hover .giu{display:grid;visibility:visible}
  .tendina-nav .giu a{padding:10px 10px}
  /* la descrizione: sul telefono si tiene, ma piccola e staccata */
  .tendina-nav .giu a div{margin-top:1px;font-size:12px}
}
/* titolo e descrizione della sottovoce, su due righe (era tutto attaccato) */
.tendina-nav .giu a b{display:block;font-weight:600}
.tendina-nav .giu a div{display:block;margin-top:2px;font-size:12.5px;font-weight:400;
  color:#7C8799;line-height:1.3}

/* ============================================== CHIUSO E' LO STATO DI PARTENZA
   I pannelli hanno l'attributo hidden nell'HTML: se questo foglio non arrivasse,
   il menu resterebbe chiuso invece di spalancarsi in cima alla pagina.
   Queste regole hanno la precedenza su hidden (sono d'autore, non del browser),
   quindi il menu funziona come deve quando il foglio c'e'. */
.tendina-nav .giu[hidden]{display:none}
.tendina-nav.aperta .giu[hidden]{display:grid;visibility:visible;opacity:1;
  transform:none;pointer-events:auto}
@media (hover:hover) and (min-width:1021px){
  .tendina-nav:hover .giu[hidden]{display:grid;visibility:visible;opacity:1;
    transform:none;pointer-events:auto}
}

/* ================================================== LA SEZIONE DELL'IA (5.0)
   Quattro cose da dire, quindi quattro celle DUE PER DUE: a tre per riga la
   quarta restava sola. La testa e la nota di chiusura non avevano una classe. */
#ia{padding:clamp(56px,7vw,104px) 0}
#ia .testa-sez{max-width:62rem;margin:0 0 clamp(26px,3vw,40px)}
#ia .testa-sez h2{margin:14px 0 0;font-size:clamp(30px,3.5vw,46px);line-height:1.08;
  letter-spacing:-.022em;max-width:26em}
#ia .testa-sez .guida{margin:16px 0 0;max-width:34em;font-size:17.5px;line-height:1.6}
#ia .bento{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
#ia .cella{padding:22px 24px;border:1px solid var(--linea,rgba(255,255,255,.09));
  border-radius:16px;background:rgba(255,255,255,.022)}
#ia .cella h3{margin:0 0 8px;font-size:18px;letter-spacing:-.01em}
#ia .cella p{margin:0;color:var(--ink2);font-size:15.5px;line-height:1.62}
#ia .nota-sez{margin:clamp(20px,2.4vw,30px) 0 0;max-width:52em;color:var(--ink3);
  font-size:15px;line-height:1.6}
@media (max-width:860px){
  #ia .bento{grid-template-columns:1fr;gap:12px}
  #ia .cella{padding:18px 18px}
  #ia .testa-sez h2{font-size:clamp(26px,7vw,34px)}
  #ia .testa-sez .guida{font-size:16.5px}
}

/* ============================================== APERTURA PIU' FORTE (lancio 5.0)
   Stessa struttura e stessa foto: cambia la gerarchia. Il titolo cresce e respira,
   il sottotitolo e' piu' corto, e in mezzo c'e' l'esempio di conversazione, che
   spiega l'IA piu' in fretta di qualsiasi frase. */
.apertura h1{font-size:clamp(40px,4.9vw,68px);line-height:1.02;letter-spacing:-.03em}
.apertura .sotto{margin-top:18px;font-size:19px;max-width:30em}
.apertura .r-pastiglia .pastiglia{border-color:rgba(62,217,164,.42);
  background:rgba(62,217,164,.10)}
.apertura .r-pastiglia .puntino{background:var(--verde)}
/* l'esempio di conversazione */
.apertura .scambio{margin:22px auto 0;max-width:33rem;text-align:left;padding:16px 18px;border-radius:16px;
  border:1px solid rgba(255,255,255,.10);background:rgba(8,12,20,.62);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.apertura .scambio p{margin:0}
.apertura .scambio .chi{display:block;font-size:10.5px;font-weight:700;letter-spacing:.10em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:3px}
.apertura .scambio .dom{font-size:16px;font-weight:600;color:var(--ink)}
.apertura .scambio .ris{margin-top:12px;font-size:15px;line-height:1.6;color:var(--ink2)}
.apertura .scambio .ris b{color:var(--ink);font-weight:650}
.apertura .scambio .ris .chi{color:var(--blu-ink,#9EC2FF)}
.apertura .scambio .eti{margin-top:10px;font-size:11.5px;color:var(--ink3)}
/* la riga sotto i pulsanti */
.apertura .sotto-btn{margin:12px 0 0;font-size:13.5px;color:var(--ink3)}
.apertura .fiducia{margin-top:22px}
@media (prefers-reduced-transparency:reduce){
  .apertura .scambio{background:#080C14;backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (max-width:680px){

  /* il pulsante del download PRIMA di quello secondario */
  .apertura .azioni{flex-direction:column;flex-wrap:nowrap}
  .apertura .azioni .btn.pri{order:1}
  .apertura .azioni .btn.sec{order:2}
  .apertura h1{font-size:clamp(32px,8.6vw,42px)}
  .apertura .sotto{font-size:17px}
  .apertura .scambio{padding:14px 15px;border-radius:14px}
  .apertura .scambio .dom{font-size:15px}
  .apertura .scambio .ris{font-size:14.5px}
  .apertura .sotto-btn{font-size:13px}
}

/* SUL TELEFONO IL PIEDE SI TOCCA COL POLLICE (14/08/2026)
   I collegamenti del piede erano alti 17-23 px: le linee guida ne chiedono almeno
   24, e con il dito si sbagliava voce una volta su tre. Il testo resta identico:
   cresce solo l'area che risponde al tocco. */
@media (max-width:860px){
  footer .pie-griglia ul{gap:0}
  footer .pie-griglia li{padding:0}
  footer .pie-griglia a:not(.marchio){display:inline-block;padding:10px 0}
  footer li{padding:0}
  footer .pie-basso{gap:10px}
  footer .pie-basso nav{gap:4px 20px}
  footer .pie-basso nav a{display:inline-block;padding:8px 0}
  /* i due marchi (in alto e in fondo) sono link: vanno toccati col pollice */
  footer .marchio{padding:8px 0}
  .barra .marchio{padding:9px 0}
  /* le briciole di pane ("Home > Guide") stanno una accanto all'altra: col dito
     serve un po' d'aria in piu' */
  .briciole{gap:6px 9px}
  .briciole a{padding:5px 0}
}

/* ============================================================ NASTRO DELLE RECENSIONI
   Una striscia sottile sopra la barra del menu, con le recensioni vere che scorrono
   piano da destra a sinistra. Le regole che ci siamo dati:
     - NON e' appiccicata in alto: scorre via con la pagina e non ruba spazio;
     - si FERMA quando ci passi sopra col mouse o ci arrivi col tasto Tab;
     - chi ha chiesto a Windows meno animazioni non la vede muoversi: la scorre a
       mano col dito o con la rotella;
     - meno di tre recensioni buone e la striscia non compare affatto. Meglio niente
       che due frasi che girano in tondo: si capisce subito che e' una messa in scena.
   La velocita' non e' scritta qui: la calcola il JavaScript in base a quanto e' lungo
   l'elenco, cosi' le parole passano sempre alla stessa andatura. */
.striscia{
  position:relative;z-index:60;overflow:hidden;
  background:#080C15;
  border-bottom:1px solid rgba(255,255,255,.07);
  font-size:13.5px;line-height:1;
}
.striscia[hidden]{display:none}
.striscia-in{display:flex;align-items:stretch;height:38px}

/* L'etichetta a sinistra sta FERMA ed e' l'unica cosa cliccabile: un bersaglio che
   scappa e' un dispetto a chi ha poca mira o usa il touch. */
.striscia-eti{
  display:flex;align-items:center;gap:7px;flex:0 0 auto;
  padding:0 15px;white-space:nowrap;text-decoration:none;
  color:var(--ink2);border-right:1px solid rgba(255,255,255,.07);
  transition:background .2s var(--curva),color .2s var(--curva);
}
.striscia-eti:hover{color:var(--ink);background:rgba(58,128,245,.09)}
.striscia-eti .striscia-voto{color:var(--ink);font-weight:640;font-size:14px;letter-spacing:.01em}
.striscia-eti .striscia-stella{width:13px;height:13px;fill:#E8B04B;flex:0 0 auto}
.striscia-eti .striscia-t{color:var(--ink3);font-size:12.5px}

/* La pista: le parole svaniscono ai due bordi invece di essere tagliate di netto. */
.striscia-pista{
  flex:1 1 auto;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
}
.striscia-file{
  display:flex;align-items:center;height:100%;width:max-content;
  animation:striscia-scorre var(--striscia-durata,80s) linear infinite;
  will-change:transform;
}
.striscia-pista:hover .striscia-file,
.striscia-pista:focus-within .striscia-file{animation-play-state:paused}
@keyframes striscia-scorre{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

.striscia-voce{
  display:flex;align-items:center;gap:9px;padding:0 26px;white-space:nowrap;
  color:var(--ink2);position:relative;
}
/* il puntino di separazione: sta in mezzo tra una recensione e l'altra */
.striscia-voce::after{
  /* la barra che divide una recensione dall'altra. Il puntino di prima si perdeva
     sul fondo scuro e le frasi sembravano una sola lunghissima. */
  content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:2px;height:16px;border-radius:1px;background:rgba(255,255,255,.38);
}
.striscia-voce .striscia-testo{color:var(--ink)}

/* IL VOTO, IN FONDO ALLA RECENSIONE
   Cinque stelle e il numero scritto, senza nessun riquadro intorno (Eric, 14/08).
   Le stelle prese sono ambra chiara: sul fondo quasi nero l'ambra scura si
   spegneva. Quelle non prese restano disegnate ma grigie - se fossero quasi
   invisibili sembrerebbero quattro stelle su quattro, e il voto verrebbe letto
   piu' alto del vero. Il numero accanto e' li' perche' le stelle, mentre
   scorrono, si contano male. */
.striscia-voce .striscia-voto{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto}
.striscia-stelle{display:inline-flex;gap:2.5px;align-items:center}
.striscia-voce .striscia-stella{width:13.5px;height:13.5px;fill:#FFC24D;flex:0 0 auto}
.striscia-voce .striscia-stella.spenta{fill:rgba(255,255,255,.38)}
.striscia-numero{
  color:#fff;font-weight:700;font-size:13px;letter-spacing:.01em;line-height:1.15;
}
.striscia-voce .striscia-chi{
  color:var(--ink2);font-size:11.5px;font-weight:500;letter-spacing:.05em;
  text-transform:uppercase;
}

/* Sul telefono la striscia si stringe: resta il voto, sparisce la parola. */
@media (max-width:680px){
  .striscia-in{height:34px}
  .striscia{font-size:12.5px}
  .striscia-eti{padding:0 11px;gap:5px}
  .striscia-eti .striscia-t{display:none}
  .striscia-voce{padding:0 15px;gap:7px}
  .striscia-voce .striscia-chi{font-size:11px}
}

/* Chi ha chiesto meno animazioni non la vede muoversi: diventa una riga che si
   scorre a mano. Il JavaScript, in questo caso, toglie anche la copia di scorta. */
}

/* NOTA, perche' non e' una dimenticanza: la striscia scorre anche per chi ha
   chiesto a Windows meno animazioni. E' una decisione di Eric del 14/08/2026, presa
   sapendo che le linee guida direbbero il contrario. Per fermarla basta passarci
   sopra col mouse o arrivarci col tasto Tab. */

/* ============================================== APERTURA PIU' RACCOLTA (14/08/2026)
   Prima l'apertura era alta 1674 px su uno schermo da 1366: quasi due schermate per
   dire una cosa sola, e la finestra dell'app arrivava troppo in basso. Qui si stringe
   l'aria e si scende un po' col corpo del titolo. Niente e' stato tolto o spostato:
   stessa foto, stessi testi, stesse animazioni. */
/* SECONDO GIRO DI STRETTA (14/08/2026): Eric l'ha guardata e la vuole ancora piu'
   raccolta. Si scende un altro scalino su tutto - aria, titolo, sottotitolo - senza
   toccare ne' i testi ne' l'ordine delle cose. */
.apertura{padding-top:56px}
.apertura h1{font-size:clamp(34px,3.65vw,50px);margin-top:15px}
/* la larghezza sale a 33em NON per capriccio: col corpo piu' piccolo, 28em
   diventano 462 px invece di 507 e il sottotitolo passava da tre righe a quattro,
   allungando l'apertura invece di accorciarla */
.apertura .sotto{margin-top:12px;font-size:16.5px;max-width:33em}
.apertura .scambio{margin-top:15px;padding:12px 16px}
.apertura .azioni{margin-top:22px}
.fiducia{margin-top:20px}
.vetrina{margin-top:34px;padding-bottom:24px}
/* anche la finestra dell app si stringe un po: resta il pezzo piu grande della
   pagina, ma smette di occupare mezza schermata da sola */
.finestra{width:min(950px,100%)}

@media (max-width:680px){
  .apertura{padding-top:36px}
  .apertura h1{font-size:clamp(27px,7.3vw,34px)}
  .apertura .sotto{font-size:15.5px}
  .fiducia{margin-top:17px}
  .vetrina{margin-top:26px;padding-bottom:12px}
}