/* ═══════════════════════════════════════════════════════════════════════════
   VARCO · vetrina v3 · foglio di stile

   Cosa cambia rispetto a v2, e perche'.

   v2 era un documento chiaro. v3 e' un documento scuro con quattro schermi
   cinematografici dentro: apertura, il problema, il film, l'invito. Il registro
   scuro non e' un vezzo notturno — e' la condizione per cui un filmato a tutto
   campo e del testo possono stare sulla stessa superficie senza che uno dei due
   perda. Dove il filmato non aggiunge niente (una tabella, un listino, delle
   domande) non c'e', e la superficie resta ferma.

   Tre cose sono prese di peso dai riferimenti che il lead ha scelto, e sono
   mestiere, non estetica:
   1. `--u`, un pixel di progetto legato al viewport. Gli schermi cinematografici
      sono COMPOSIZIONI misurate, non griglie flex: tutte le loro misure sono
      `calc(N * var(--u))`. Sotto 820 px la composizione non regge e si passa a
      flusso, dichiaratamente.
   2. Il piano video con le due sfumature misurate: una in basso, che scioglie il
      filmato nel fondo della pagina, e una laterale, che gli toglie i bordi.
   3. La coreografia d'ingresso: le righe di titolo salgono da dentro una
      maschera, i filetti si disegnano, le pillole si posano. Gira UNA volta e
      poi si cancella da sola — niente transizioni residue, niente timer.

   Due regole di v2 restano, e sono le piu' importanti:
   · IL PRIMO SCHERMO NON NASCONDE NIENTE AL CARICAMENTO. `opacity:0` in HTML
     statico fa saltare l'LCP: e' successo. Per questo l'ingresso e' attivato da
     una classe che scrive uno script in testa, e senza JS la pagina e' gia' al
     suo posto. Il fotogramma di riserva del video e' dipinto SUBITO e non e' mai
     animato: quello e' l'LCP, e non lo si tocca.
   · UNA SEZIONE, UNO SCHERMO su desktop. Le misure verticali sono legate a `vh`
     oltre che a `vw`. Il test che lo misura e' `scripts/qa-fit.py`.

   La palette non si inventa: sono i token del prodotto (frontend/app/globals.css),
   girati sul fondo scuro.
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:"Space Grotesk";font-weight:500;font-display:swap;src:url(/assets/fonts/SpaceGrotesk-500-latin.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:600;font-display:swap;src:url(/assets/fonts/SpaceGrotesk-600-latin.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-display:swap;src:url(/assets/fonts/SpaceGrotesk-700-latin.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:500;font-display:swap;src:url(/assets/fonts/SpaceGrotesk-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Grotesk";font-weight:600;font-display:swap;src:url(/assets/fonts/SpaceGrotesk-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Grotesk";font-weight:700;font-display:swap;src:url(/assets/fonts/SpaceGrotesk-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-weight:400;font-display:swap;src:url(/assets/fonts/HankenGrotesk-400-latin.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:600;font-display:swap;src:url(/assets/fonts/HankenGrotesk-600-latin.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:700;font-display:swap;src:url(/assets/fonts/HankenGrotesk-700-latin.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:400;font-display:swap;src:url(/assets/fonts/HankenGrotesk-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-weight:600;font-display:swap;src:url(/assets/fonts/HankenGrotesk-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-weight:700;font-display:swap;src:url(/assets/fonts/HankenGrotesk-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(/assets/fonts/IBMPlexMono-400-latin.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(/assets/fonts/IBMPlexMono-500-latin.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:600;font-display:swap;src:url(/assets/fonts/IBMPlexMono-600-latin.woff2) format("woff2")}

/* ── token ──────────────────────────────────────────────────────────────── */
:root{
  /* i colori del prodotto, girati sul fondo scuro */
  --fondo:#07070B;              /* il nero della pagina: non e' #000, ha un filo di blu */
  --fondo-2:#0C0C0F;            /* la superficie di una sezione ferma */
  --fondo-3:#131318;            /* una scheda, una riga di tabella */
  --fondo-4:#1B1B21;            /* uno stato attivo, il bordo di un campo */
  --fg:#F5F5F3; --muted:#B9B7AE; --faint:#8A887D;
  --accent:#46C290; --accent-cupo:#1C9463; --accent-velo:rgba(70,194,144,.12);
  --alta:#46C290; --media:#D3A43A; --bassa:#E0705F;
  --filo:rgba(245,245,243,.12);
  --filo-forte:rgba(245,245,243,.26);
  --pillola:#FFFFFF; --pillola-ink:#07070B;

  --disp:"Space Grotesk",system-ui,sans-serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --r:12px; --r-sm:8px; --r-xs:4px; --r-pill:999px;
  --dur-s:160ms; --dur-m:320ms; --dur-l:640ms;
  --ease:cubic-bezier(.2,.7,.2,1);
  --expo:cubic-bezier(.16,1,.3,1);
  --quint:cubic-bezier(.22,1,.36,1);

  --wrap:1200px; --gutter:clamp(20px,4vw,40px); --hdr:66px;

  /* la scala verticale di v2, che regge «una sezione uno schermo» */
  --sez-pad:clamp(28px,4.5vh,48px);
  --blocco:clamp(12px,2vh,22px);
  --fs-h2:clamp(26px,min(3.5vw,5vh),46px);
  --fs-sotto:clamp(15px,min(1.25vw,2.05vh),19px);
  --fs-corpo:clamp(13.5px,min(1.05vw,1.75vh),15.5px);
  --fs-h3:clamp(16px,min(1.35vw,2.15vh),20px);

  /* --u: UN pixel di progetto. Tela di riferimento 1440 x 900.
     A 1440x900 vale esattamente 1px. Il tetto in alto evita che su uno schermo
     enorme la composizione diventi un manifesto; il pavimento non serve, perche'
     sotto 820px gli schermi cinematografici passano a flusso e --u va in pensione. */
  --u:clamp(.60px, min(100vw / 1440, 100vh / 900), 1.16px);
}
@supports (height:100dvh){
  :root{ --u:clamp(.60px, min(100vw / 1440, 100dvh / 900), 1.16px) }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--fondo); color:var(--fg);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; overflow-x:hidden}
img,picture,video,svg{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{list-style:none; padding:0}
button{font:inherit; color:inherit}
/* `display:grid` su una classe batte l'attributo `hidden`: senza questa riga un
   pannello nascosto resta a schermo. Vale per tutto il foglio, una volta sola. */
[hidden]{display:none !important}
::selection{background:var(--accent); color:#07070B}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-xs)}

.wrap{width:min(100% - var(--gutter)*2, var(--wrap)); margin-inline:auto}
.salta{position:absolute; left:-9999px; top:0; z-index:100; background:var(--accent);
  color:#07070B; padding:12px 18px; border-radius:0 0 var(--r-sm) 0; font-weight:600}
.salta:focus{left:0}
.prosa{max-width:62ch}

/* ── tipografia ─────────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--disp); font-weight:700; letter-spacing:-.022em; line-height:1.04}
h2{font-size:var(--fs-h2); text-wrap:balance}
h3{font-size:var(--fs-h3); letter-spacing:-.012em}
h1 em,h2 em{font-style:normal; color:var(--accent)}
.occhiello{font-family:var(--mono); font-weight:500; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); margin:0 0 10px}
.sotto{font-size:var(--fs-sotto); line-height:1.5; color:var(--muted); text-wrap:pretty}
.nota{font-size:12.5px; line-height:1.5; color:var(--faint); text-wrap:pretty}
.dato{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ── pillole e bottoni ──────────────────────────────────────────────────── */
/* La pillola bianca lucida dei riferimenti: gradiente verticale appena percepibile,
   anello interno, alone freddo. Su fondo nero l'anello e' cio' che la stacca. */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:46px; padding:0 22px; border-radius:var(--r-pill); border:0;
  font-family:var(--sans); font-size:14.5px; font-weight:600; letter-spacing:-.005em;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:transform var(--dur-s) var(--ease), box-shadow var(--dur-m) var(--ease),
             background-color var(--dur-s) var(--ease)}
.btn-pieno{color:var(--pillola-ink);
  background:linear-gradient(180deg,#fff 0%,#E6EDEA 6%,#EAF1EE 72%,#fff 100%);
  box-shadow:0 10px 22px -10px rgba(255,255,255,.34), 0 0 26px rgba(255,255,255,.10),
             inset 0 0 0 1.5px rgba(255,255,255,.92)}
.btn-pieno:hover{transform:translateY(-2px);
  box-shadow:0 16px 30px -12px rgba(255,255,255,.46), 0 0 34px rgba(255,255,255,.16),
             inset 0 0 0 1.5px #fff}
.btn-vuoto{color:var(--fg); background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px var(--filo-forte); backdrop-filter:blur(10px)}
.btn-vuoto:hover{background:rgba(255,255,255,.11)}
.btn-fantasma{background:none; box-shadow:none; padding:0 4px; color:var(--fg); font-weight:500}
.btn-fantasma:hover{color:var(--accent)}
.btn:active{transform:scale(.985)}
.btn svg{width:17px; height:17px; flex:none; fill:currentColor}

/* ── testata ────────────────────────────────────────────────────────────── */
.testata{position:fixed; inset:0 0 auto; z-index:60; height:var(--hdr);
  transition:background-color var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease)}
.testata.posata{background:rgba(7,7,11,.72); backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 1px 0 var(--filo)}
.testata .wrap{height:100%; display:flex; align-items:center; gap:clamp(16px,3vw,34px)}
.marchio{display:inline-flex; align-items:center; gap:10px; font-family:var(--disp);
  font-weight:700; font-size:19px; letter-spacing:-.03em; text-decoration:none; flex:none}
.marchio i{width:11px; height:24px; border:2.2px solid var(--accent); border-radius:2.5px;
  position:relative; flex:none}
.marchio i::after{content:""; position:absolute; left:1.6px; right:1.6px; top:50%;
  height:2.2px; background:var(--accent); transform:translateY(-50%)}
.nav{display:flex; gap:clamp(4px,1.4vw,18px); margin-inline:auto}
.nav a{font-size:14.5px; color:var(--muted); text-decoration:none; padding:8px 6px;
  position:relative; transition:color var(--dur-s) var(--ease)}
.nav a::after{content:""; position:absolute; left:6px; right:6px; bottom:2px; height:2px;
  border-radius:1px; background:var(--accent); transform:scaleX(0); transform-origin:50% 50%;
  transition:transform var(--dur-m) var(--expo)}
.nav a:hover,.nav a[aria-current]{color:var(--fg)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.azioni{display:flex; align-items:center; gap:10px; flex:none}
.azioni .btn{height:38px; padding:0 16px; font-size:13.5px}
.lingua{position:relative}
.lingua summary{list-style:none; cursor:pointer; font-family:var(--mono); font-size:12px;
  letter-spacing:.06em; color:var(--muted); padding:8px 8px; border-radius:var(--r-sm)}
.lingua summary::-webkit-details-marker{display:none}
.lingua summary:hover{color:var(--fg); background:rgba(255,255,255,.06)}
.lingua ul{position:absolute; right:0; top:calc(100% + 8px); min-width:168px; z-index:5;
  background:rgba(12,12,15,.94); backdrop-filter:blur(18px); padding:6px;
  border-radius:var(--r); box-shadow:0 18px 44px rgba(0,0,0,.6), inset 0 0 0 1px var(--filo)}
.lingua li a{display:flex; justify-content:space-between; gap:14px; padding:9px 12px;
  border-radius:var(--r-sm); font-size:14px; text-decoration:none; color:var(--muted)}
.lingua li a span{font-family:var(--mono); font-size:11px; color:var(--faint); text-transform:uppercase}
.lingua li a:hover{background:rgba(255,255,255,.07); color:var(--fg)}
.lingua li a[aria-current]{color:var(--accent)}
.hamb{display:none; width:40px; height:40px; background:rgba(255,255,255,.05); border:0;
  border-radius:var(--r-pill); box-shadow:inset 0 0 0 1px var(--filo-forte); cursor:pointer;
  position:relative; backdrop-filter:blur(10px)}
.hamb span,.hamb::before,.hamb::after{content:""; position:absolute; left:11px; right:11px;
  height:1.6px; background:var(--fg); border-radius:1px;
  transition:transform var(--dur-m) var(--ease), opacity var(--dur-s) linear}
.hamb span{top:calc(50% - .8px)} .hamb::before{top:13px} .hamb::after{bottom:13px}
.hamb[aria-expanded="true"] span{opacity:0}
.hamb[aria-expanded="true"]::before{top:calc(50% - .8px); transform:rotate(45deg)}
.hamb[aria-expanded="true"]::after{bottom:calc(50% - .8px); transform:rotate(-45deg)}

/* ═══ SCHERMI CINEMATOGRAFICI ════════════════════════════════════════════════
   Quattro: apertura, il problema, il film, l'invito. Occupano lo schermo intero,
   hanno un filmato dietro e una composizione davanti.

   ⚠ UNA DEVIAZIONE DICHIARATA dai riferimenti. Quei prompt posizionano ogni
   elemento in modo ASSOLUTO («top: calc(268 * var(--u))»), e possono farlo perche'
   hanno una riga di testo sola e una lingua sola. Qui il testo e' in cinque lingue:
   il titolo tedesco e' piu' lungo di quello inglese di un terzo, e con posizioni
   assolute si scavalcherebbe il sottotitolo in silenzio. Quindi: la composizione e'
   a flusso, ma OGNI misura — corpi, interlinee, distanze, riquadri — resta in
   `--u`. Si tiene la precisione della scala e si perde la fragilita' del pixel.
   ═════════════════════════════════════════════════════════════════════════════ */
.scena{position:relative; min-height:100vh; min-height:100svh; overflow:hidden;
  display:flex; flex-direction:column; isolation:isolate}
.scena>*{position:relative; z-index:2}

/* il piano: il filmato, il suo fotogramma di riserva, e le due sfumature */
.piano{position:absolute; inset:0; z-index:0; background:var(--fondo); overflow:hidden}
.piano .fermo,.piano .fermo img,.piano video{position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:var(--fuoco,center)}
/* Il fermo e' dipinto al primo fotogramma e NON e' mai animato: e' l'LCP. */
.piano .fermo{z-index:0}
.piano video{z-index:1; opacity:0; transition:opacity 900ms var(--ease)}
.piano video.acceso{opacity:1}
/* Le due sfumature misurate. In basso il filmato si scioglie nel fondo della
   pagina, cosi' il bordo inferiore non esiste; ai lati perde i bordi verticali. */
.piano::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(7,7,11,.72) 0%, rgba(7,7,11,.46) 16%, rgba(7,7,11,.40) 46%,
      rgba(7,7,11,.62) 66%, rgba(7,7,11,.86) 82%, rgba(7,7,11,.97) 93%, var(--fondo) 100%),
    linear-gradient(to right,
      rgba(7,7,11,.88) 0%, rgba(7,7,11,.64) 28%, rgba(7,7,11,.26) 58%,
      rgba(7,7,11,.22) 78%, rgba(7,7,11,.46) 100%)}
/* dove la composizione e' centrata invece che a sinistra, il velo va simmetrico */
.scena.centrata .piano::after{
  background:
    linear-gradient(to bottom,
      rgba(7,7,11,.76) 0%, rgba(7,7,11,.50) 18%, rgba(7,7,11,.50) 62%,
      rgba(7,7,11,.80) 82%, rgba(7,7,11,.95) 93%, var(--fondo) 100%),
    radial-gradient(120% 80% at 50% 50%, rgba(7,7,11,.18) 0%, rgba(7,7,11,.72) 100%)}

/* il quadro: la composizione sopra il piano */
.quadro{flex:1; display:flex; align-items:center; padding-top:var(--hdr)}
.quadro>.wrap{width:min(100% - var(--gutter)*2, calc(1248 * var(--u)));
  display:grid; grid-template-columns:minmax(0,1fr) calc(400 * var(--u));
  gap:calc(56 * var(--u)); align-items:center;
  padding-block:calc(18 * var(--u))}
.scena.sola .quadro>.wrap{grid-template-columns:minmax(0,1fr)}
.scena.centrata .quadro>.wrap{grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center}

/* ── la colonna di testo dello schermo cinematografico ─────────────────────── */
.colonna .occhiello{font-size:calc(12 * var(--u)); letter-spacing:calc(1.9 * var(--u));
  margin-bottom:calc(18 * var(--u)); color:var(--muted)}
.colonna h1{font-size:calc(72 * var(--u)); line-height:1.03;
  letter-spacing:calc(-1.6 * var(--u)); max-width:15ch; text-wrap:balance}
/* L'h2 degli schermi cinematografici va a capo da solo, quindi la sua misura decide
   quante righe occupa — e con cinque lingue quel numero cambia. 19ch invece di 15ch:
   il francese passa da quattro righe (297 px, fuori schermo) a tre. */
.colonna h2{font-size:calc(72 * var(--u)); line-height:1.03;
  letter-spacing:calc(-1.6 * var(--u)); max-width:19ch; text-wrap:balance}
.scena.centrata .colonna h1{max-width:18ch}
.scena.centrata .colonna h2{max-width:21ch}
.filo-acc{display:block; width:calc(96 * var(--u)); height:calc(4 * var(--u));
  border-radius:calc(2 * var(--u)); background:var(--accent);
  margin:calc(30 * var(--u)) 0 calc(26 * var(--u)); transform-origin:0 50%}
.scena.centrata .filo-acc{margin-inline:auto; transform-origin:50% 50%}
.colonna .sotto{font-size:calc(17.4 * var(--u)); line-height:calc(28 * var(--u));
  max-width:calc(560 * var(--u)); color:#D6D5CE}
.colonna .azioni-hero{display:flex; flex-wrap:wrap; gap:calc(14 * var(--u));
  margin-top:calc(34 * var(--u))}
.colonna .azioni-hero .btn{height:calc(52 * var(--u)); padding:0 calc(26 * var(--u));
  font-size:calc(15 * var(--u)); border-radius:var(--r-pill)}
.frizione{display:flex; flex-wrap:wrap; gap:calc(10 * var(--u)) calc(22 * var(--u));
  margin-top:calc(30 * var(--u)); font-family:var(--mono);
  font-size:calc(11.6 * var(--u)); letter-spacing:.06em; color:var(--faint)}
.scena.centrata .frizione{justify-content:center}
.frizione li{display:flex; align-items:center; gap:calc(8 * var(--u))}
.frizione li::before{content:""; width:calc(5 * var(--u)); height:calc(5 * var(--u));
  border-radius:50%; background:var(--accent); flex:none}

/* ── il riquadro di vetro: la traccia vera, accanto al titolo ──────────────── */
.vetro{background:rgba(12,12,15,.56); backdrop-filter:blur(calc(18 * var(--u))) saturate(1.2);
  -webkit-backdrop-filter:blur(calc(18 * var(--u))) saturate(1.2);
  border-radius:calc(16 * var(--u)); padding:calc(22 * var(--u));
  box-shadow:inset 0 0 0 1px var(--filo), 0 calc(26 * var(--u)) calc(60 * var(--u)) rgba(0,0,0,.5)}
.vetro .cap{display:flex; align-items:baseline; justify-content:space-between;
  gap:calc(12 * var(--u)); font-family:var(--mono); font-size:calc(10.6 * var(--u));
  letter-spacing:.11em; text-transform:uppercase; color:var(--faint);
  padding-bottom:calc(12 * var(--u)); border-bottom:1px solid var(--filo)}
.vetro .cap span{white-space:nowrap; flex:none}
.vetro .cap b{color:var(--accent); font-weight:500}
.vetro .merce{font-size:calc(12.6 * var(--u)); line-height:calc(19 * var(--u));
  color:var(--muted); margin:calc(14 * var(--u)) 0; display:-webkit-box;
  -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.spina{display:grid; gap:calc(3 * var(--u)); margin-top:calc(4 * var(--u))}
.spina li{display:grid; grid-template-columns:calc(13 * var(--u)) calc(46 * var(--u)) minmax(0,1fr);
  align-items:center; gap:calc(9 * var(--u)); font-size:calc(11.4 * var(--u));
  line-height:calc(17 * var(--u)); padding:calc(4 * var(--u)) 0}
.spina li.indent{padding-left:calc(14 * var(--u))}
.spina li.indent2{padding-left:calc(28 * var(--u))}
.spina .segno{font-size:calc(11 * var(--u)); text-align:center}
.spina .cod{font-family:var(--mono); font-weight:500; font-size:calc(11 * var(--u));
  letter-spacing:.02em}
.spina .tit{color:var(--faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.spina li.scelto .segno{color:var(--accent)}
.spina li.scelto .cod{color:var(--fg)}
.spina li.scelto .tit{color:var(--muted)}
.spina li.scartato{opacity:.5}
.spina li.scartato .segno{color:var(--bassa)}
.vetro .esito{margin-top:calc(14 * var(--u)); padding-top:calc(13 * var(--u));
  border-top:1px solid var(--filo)}
.vetro .esito .voce{display:flex; align-items:center; gap:calc(10 * var(--u))}
.vetro .esito .voce b{font-family:var(--mono); font-size:calc(19 * var(--u));
  font-weight:600; color:var(--accent); letter-spacing:-.01em;
  flex:none; white-space:nowrap}
.vetro .esito .voce span{font-size:calc(11.4 * var(--u)); line-height:calc(15 * var(--u));
  color:var(--muted)}
.vetro .conta{margin-top:calc(10 * var(--u)); font-family:var(--mono);
  font-size:calc(10.6 * var(--u)); letter-spacing:.08em; color:var(--faint)}
.vetro .conta b{color:var(--muted); font-weight:500}

/* ── la fascia in fondo allo schermo: i numeri, dentro la sfumatura ────────── */
/* I riferimenti mettono qui quattro loghi finti. Noi ci mettiamo quattro numeri
   veri, che e' l'unica ragione per cui una fascia in quel punto ha senso. */
.fascia{border-top:1px solid var(--filo); background:linear-gradient(180deg,
  rgba(7,7,11,0) 0%, rgba(7,7,11,.5) 40%, rgba(7,7,11,.86) 100%)}
.fascia .wrap{display:grid; grid-template-columns:repeat(4,1fr);
  min-height:calc(94 * var(--u)); align-items:center}
.fascia .n{padding:calc(16 * var(--u)) calc(20 * var(--u)); display:flex;
  flex-direction:column; gap:calc(3 * var(--u))}
.fascia .n+.n{border-left:1px solid var(--filo)}
.fascia .n b{font-family:var(--disp); font-weight:700; font-size:calc(27 * var(--u));
  letter-spacing:-.025em; font-variant-numeric:tabular-nums; line-height:1}
.fascia .n span{font-size:calc(11.6 * var(--u)); line-height:calc(15 * var(--u));
  color:var(--faint); text-wrap:pretty}

/* ── la freccia verso lo schermo dopo ─────────────────────────────────────── */
.giu{position:absolute; left:50%; bottom:calc(18 * var(--u)); z-index:5;
  translate:-50% 0; width:calc(44 * var(--u)); height:calc(44 * var(--u));
  display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px var(--filo);
  backdrop-filter:blur(8px); color:var(--muted);
  transition:background-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease),
             transform var(--dur-m) var(--ease)}
.giu:hover{background:rgba(255,255,255,.13); color:var(--fg); transform:translateY(2px)}
.giu svg{width:calc(19 * var(--u)); height:calc(19 * var(--u))}
/* negli schermi cinematografici la freccia sta nel FLUSSO, fra la composizione e la
   fascia: e' l'unico modo perche' non finisca sopra una fascia che cambia altezza
   con la lingua. Nelle sezioni ferme resta assoluta, in fondo. */
.scena>.giu{position:relative; left:auto; bottom:auto; translate:none;
  margin:0 auto calc(12 * var(--u)); flex:none}
.scena.senza-fascia>.giu{margin-bottom:calc(30 * var(--u))}

/* ═══ COREOGRAFIA D'INGRESSO ════════════════════════════════════════════════
   Quattro movimenti: le righe di titolo SALGONO da dentro una maschera, i filetti
   si DISEGNANO da un capo, il testo si ALZA di poco, le pillole si POSANO con una
   scala che si risolve. Il filmato non entra mai traslando: sfuma e basta, perche'
   una traslazione trascinerebbe un bordo nudo dentro l'inquadratura.

   Gira UNA volta. Lo script toglie sia `.avvio` sia `.parte` a fine corsa, e la
   pagina resta nel suo stato statico: niente trasformazioni residue, niente
   `will-change` appeso, niente timer. Se il JS non gira, la classe `.avvio` non
   viene mai scritta e QUESTO BLOCCO NON ESISTE: la pagina e' gia' a posto.
   ═════════════════════════════════════════════════════════════════════════════ */
@keyframes ent-svela{from{transform:translateY(112%)} to{transform:translateY(0)}}
@keyframes ent-sale{from{opacity:0; transform:translateY(var(--sale,12px))} to{opacity:1; transform:none}}
@keyframes ent-posa{from{opacity:0; transform:translateY(var(--sale,10px)) scale(.965)} to{opacity:1; transform:none}}
@keyframes ent-traccia{from{transform:scaleX(0)} to{transform:scaleX(1)}}

.masc,.masc>span{display:block}
.avvio .masc{overflow:hidden; padding-top:.14em; margin-top:-.14em}
.avvio .masc>span{transform:translateY(112%); will-change:transform}
.avvio .filo-acc{transform:scaleX(0)}
.avvio #inizio .colonna .occhiello,.avvio #inizio .colonna .sotto,
.avvio #inizio .azioni-hero,.avvio #inizio .frizione,
.avvio #inizio .vetro,.avvio #inizio .fascia .n,.avvio #inizio .giu,
.avvio .testata .marchio,.avvio .testata .nav,.avvio .testata .azioni{opacity:0}

.avvio.parte .testata .marchio{animation:ent-sale .6s var(--quint) .16s both; --sale:8px}
.avvio.parte .testata .nav{animation:ent-sale .6s var(--quint) .24s both; --sale:8px}
.avvio.parte .testata .azioni{animation:ent-posa .62s var(--quint) .32s both; --sale:8px}
.avvio.parte #inizio .colonna .occhiello{animation:ent-sale .6s var(--quint) .26s both; --sale:10px}
.avvio.parte #inizio h1 .masc>span{animation:ent-svela .92s var(--expo) both}
.avvio.parte #inizio h1 .masc:nth-child(1)>span{animation-delay:.36s}
.avvio.parte #inizio h1 .masc:nth-child(2)>span{animation-delay:.47s}
.avvio.parte #inizio .filo-acc{animation:ent-traccia .66s var(--expo) .74s both}
.avvio.parte #inizio .colonna .sotto{animation:ent-sale .72s var(--quint) .82s both; --sale:14px}
.avvio.parte #inizio .azioni-hero{animation:ent-posa .72s var(--quint) .94s both; --sale:12px}
.avvio.parte #inizio .frizione{animation:ent-sale .66s var(--quint) 1.06s both; --sale:10px}
.avvio.parte #inizio .vetro{animation:ent-posa .86s var(--quint) .64s both; --sale:18px}
.avvio.parte #inizio .fascia .n{animation:ent-sale .7s var(--quint) both; --sale:10px}
.avvio.parte #inizio .fascia .n:nth-child(1){animation-delay:1.14s}
.avvio.parte #inizio .fascia .n:nth-child(2){animation-delay:1.20s}
.avvio.parte #inizio .fascia .n:nth-child(3){animation-delay:1.26s}
.avvio.parte #inizio .fascia .n:nth-child(4){animation-delay:1.32s}
.avvio.parte #inizio .giu{animation:ent-posa .6s var(--quint) 1.46s both}

/* sotto la piega: si scopre scorrendo, ed e' un movimento solo */
.reveal{opacity:0; transform:translateY(16px);
  transition:opacity var(--dur-l) var(--ease), transform var(--dur-l) var(--ease);
  transition-delay:calc(var(--i,0) * 70ms)}
.reveal.visto{opacity:1; transform:none}
.no-js .reveal{opacity:1; transform:none}
/* ── LA STAMPA ──────────────────────────────────────────────────────────────
   Un sito scuro stampato com'e' non si legge: i browser non stampano i fondi, e
   il testo chiaro finisce bianco su bianco. Qui si rovescia la palette una volta
   sola. Due cose che senza questo blocco sparirebbero dal foglio: le sezioni sotto
   la piega — alla stampa IntersectionObserver non ha scoperto niente e restano a
   `opacity:0` — e il testo dentro le aperture, che chiusa e' `display:none` per
   la regola del browser e va riaperto a mano. Se il foglio deve valere come
   documento, deve contenere tutto quello che la pagina contiene.
   ═══════════════════════════════════════════════════════════════════════════ */
@media print{
  :root{--fg:#14140E; --muted:#37352C; --faint:#514E45; --accent:#116E47;
    --filo:rgba(20,19,14,.22); --filo-forte:rgba(20,19,14,.45)}
  body{background:#fff; color:var(--fg)}
  .piano,.giu,.hamb,.nastro,.lingua,.azioni .btn{display:none !important}
  .reveal{opacity:1 !important; transform:none !important}
  /* ⚠ E l'ingresso va neutralizzato, non aspettato. La stampa parte appena la pagina
     e' pronta: `site.js` non ha ancora tolto `.avvio`, quindi il primo schermo e'
     ancora a `opacity:0` e la prima pagina esce BIANCA. Verificato: lo era. */
  .avvio .colonna .occhiello,.avvio .colonna .sotto,.avvio .azioni-hero,.avvio .frizione,
  .avvio .vetro,.avvio .fascia .n,.avvio .testata .marchio,.avvio .testata .nav,
  .avvio .testata .azioni,.avvio .sky{opacity:1 !important}
  .avvio .masc{overflow:visible !important}
  .avvio .masc>span{transform:none !important}
  .avvio .filo-acc{transform:none !important}
  /* ⚠ E la traccia che si rigioca: la sua opacita' dipende da DOVE era arrivata
     l'animazione nell'istante della stampa, quindi sul foglio finivano invisibili
     righe a caso — comprese quelle scelte, che sono il punto. Sulla carta si
     stampa lo stato finale, e la distinzione la fa il segno, non la sfumatura. */
  .spina li{opacity:1 !important; transform:none !important}
  .spina li.scartato{opacity:.55 !important}
  .js .vetro .esito.verdetto{opacity:1 !important; transform:none !important}
  .barra{display:none}
  /* la regola del browser e' `details:not([open])>*:not(summary){display:none}`:
     si scavalca, altrimenti 1.173 parole non arrivano sulla carta */
  details.apri>*{display:block !important}
  .apri>summary i{display:none}
  /* `break-inside:avoid` su una sezione piu' alta di una pagina non la tiene
     insieme: la SPOSTA al foglio dopo, e il primo esce quasi vuoto. Verificato.
     Va sui blocchi piccoli, che in una pagina ci stanno davvero. */
  .scena,.sez{min-height:0 !important; display:block; padding-block:14pt;
    border-top:1px solid var(--filo)}
  .apri,.piano-c,.stat,.persona,.faq details{break-inside:avoid}
  .quadro{display:block; padding-top:0}
  .quadro>.wrap{display:block; width:auto}
  .colonna h1,.colonna h2{font-size:24pt; max-width:none}
  .colonna .sotto{color:var(--muted) !important; max-width:none}
  .stat3,.fascia{max-width:none}
  .fascia .wrap{display:block}
  .testata{position:static; height:auto; background:none !important;
    backdrop-filter:none !important; box-shadow:none !important}
  .vetro,.stat,.demo,.piano-c,.apri.scheda,.apri.limite,.scorrevole,.esito{
    background:none !important; backdrop-filter:none !important;
    box-shadow:none !important; border:1px solid var(--filo)}
  .scorrevole{max-height:none; overflow:visible}
  .btn{background:none !important; box-shadow:none !important;
    color:var(--fg) !important; border:1px solid var(--fg)}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:8pt; color:var(--faint)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-delay:0s !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
  .piano video{display:none}          /* resta il fotogramma fermo, che e' il punto */
  .nastro .scorre{animation:none}
}

/* ═══ SEZIONI FERME ═════════════════════════════════════════════════════════
   Dove un filmato non aggiungerebbe niente — una tabella, un listino, delle
   domande — la superficie sta ferma. Resta scura, e il contrasto si verifica
   sezione per sezione invece di essere sperato.
   ═════════════════════════════════════════════════════════════════════════════ */
.sez{position:relative; padding-block:var(--sez-pad);
  min-height:100vh; min-height:100svh; display:flex; align-items:center;
  border-top:1px solid var(--filo)}
.sez>.wrap{width:min(100% - var(--gutter)*2, var(--wrap)); padding-block:calc(var(--blocco) / 2)}
.sez.velata{background:
  radial-gradient(90% 60% at 50% 0%, rgba(70,194,144,.05) 0%, transparent 70%), var(--fondo-2)}
.sez h2+.sotto,.due+.sotto{margin-top:var(--blocco)}
.due{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(20px,3vw,48px); align-items:start}
.testo-sez{max-width:64ch}

/* ── il confronto: due colonne, e cosa resta agli atti ─────────────────────── */
.confronto{margin-top:var(--blocco); border:1px solid var(--filo); border-radius:var(--r);
  overflow:hidden; background:var(--fondo-3)}
.confronto .riga{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.35fr)}
.confronto .riga+.riga{border-top:1px solid var(--filo)}
.confronto .riga>div{padding:clamp(11px,1.5vh,17px) clamp(12px,1.4vw,20px);
  font-size:var(--fs-corpo); line-height:1.45; text-wrap:pretty}
.confronto .riga>div:first-child{color:var(--faint)}
.confronto .riga>div:nth-child(2){color:var(--muted); border-left:1px solid var(--filo)}
.confronto .riga>div:nth-child(3){border-left:1px solid var(--filo);
  background:linear-gradient(90deg, var(--accent-velo) 0%, rgba(70,194,144,.03) 100%)}
.confronto .capo>div{font-family:var(--mono); font-size:11px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint); background:rgba(255,255,255,.03)}
.confronto .capo>div:nth-child(3){color:var(--accent); background:var(--accent-velo)}

/* ── le tre statistiche dello schermo «il problema» ────────────────────────── */
.stat3{display:grid; grid-template-columns:repeat(3,1fr); gap:calc(16 * var(--u));
  margin-top:calc(24 * var(--u))}
.stat{padding:calc(18 * var(--u)) calc(20 * var(--u));
  background:rgba(12,12,15,.5); backdrop-filter:blur(calc(14 * var(--u)));
  -webkit-backdrop-filter:blur(calc(14 * var(--u)));
  border-radius:calc(12 * var(--u)); box-shadow:inset 0 0 0 1px var(--filo)}
.stat b{display:block; font-family:var(--disp); font-weight:700;
  font-size:calc(26 * var(--u)); letter-spacing:-.022em; line-height:1.1;
  margin-bottom:calc(7 * var(--u))}
.stat span{font-size:calc(12.4 * var(--u)); line-height:calc(18 * var(--u));
  color:var(--muted); text-wrap:pretty}

/* ── LE APERTURE ───────────────────────────────────────────────────────────
   Un solo modello per tutta la pagina: a schermo resta il sommario, il resto sta
   dentro. E' `<details>` nativo, quindi funziona senza JS, la tastiera lo conosce,
   e Ctrl-F del browser apre da solo la sezione che contiene la parola cercata —
   che e' la differenza fra «meno a schermo» e «perso».
   ═══════════════════════════════════════════════════════════════════════════ */
.apri>summary{display:flex; align-items:center; gap:clamp(8px,1vw,13px); cursor:pointer;
  list-style:none; padding:clamp(10px,1.4vh,14px) clamp(12px,1.3vw,17px);
  transition:background-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease)}
.apri>summary::-webkit-details-marker{display:none}
.apri>summary:hover{background:rgba(255,255,255,.04)}
.apri>summary .t{font-family:var(--disp); font-weight:600; font-size:var(--fs-h3);
  letter-spacing:-.012em; line-height:1.25; text-wrap:balance}
.apri>summary i{margin-left:auto; flex:none; width:9px; height:9px; position:relative;
  transition:transform var(--dur-m) var(--expo)}
.apri>summary i::before,.apri>summary i::after{content:""; position:absolute; left:0; top:4px;
  width:9px; height:1.6px; border-radius:1px; background:var(--faint);
  transition:background-color var(--dur-s) var(--ease), transform var(--dur-m) var(--expo)}
.apri>summary i::after{transform:rotate(90deg)}
.apri[open]>summary i::after{transform:rotate(0)}
.apri[open]>summary i::before,.apri[open]>summary i::after{background:var(--accent)}
.apri>summary:hover i::before,.apri>summary:hover i::after{background:var(--fg)}
.apri .dentro{padding:0 clamp(12px,1.3vw,17px) clamp(11px,1.5vh,16px)}
.apri .dentro>p{font-size:var(--fs-corpo); line-height:1.55; color:var(--muted); text-wrap:pretty}
.apri .dentro>p+p{margin-top:9px}
.apri>summary:focus-visible{outline:2px solid var(--accent); outline-offset:-2px; border-radius:var(--r-sm)}

/* ── i passi ────────────────────────────────────────────────────────────────── */
.passi{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(6px,1vh,12px) clamp(18px,2.4vw,34px); margin-top:var(--blocco)}
.apri.passo{border-top:1px solid var(--filo)}
.apri.passo>summary{padding-inline:0}
.apri.passo>summary .k{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  color:var(--faint); flex:none; transition:color var(--dur-m) var(--ease)}
.apri.passo>summary:hover{background:none}
.apri.passo>summary:hover .k,.apri.passo[open]>summary .k{color:var(--accent)}
.apri.passo .dentro{padding:0 0 clamp(10px,1.4vh,15px) calc(11.5px + clamp(8px,1vw,13px))}
.apri.passo.onesto{grid-column:1/-1; border-top-color:var(--accent)}
.apri.passo.onesto>summary .t{color:var(--accent)}

/* ── demo: le due tracce vere ──────────────────────────────────────────────── */
.demo{margin-top:var(--blocco); border:1px solid var(--filo); border-radius:var(--r);
  background:var(--fondo-2); overflow:hidden}
.schede{display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--filo)}
.schede button{display:flex; flex-direction:column; gap:3px; align-items:flex-start;
  padding:clamp(10px,1.5vh,15px) clamp(13px,1.6vw,20px); background:none; border:0;
  cursor:pointer; text-align:left; border-bottom:2px solid transparent;
  transition:background-color var(--dur-s) var(--ease)}
.schede button+button{border-left:1px solid var(--filo)}
.schede button b{font-family:var(--mono); font-weight:500; font-size:10.5px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--faint)}
.schede button span{font-size:var(--fs-corpo); color:var(--muted); line-height:1.35}
.schede button:hover{background:rgba(255,255,255,.035)}
.schede button[aria-selected="true"]{background:rgba(255,255,255,.05); border-bottom-color:var(--accent)}
.schede button[aria-selected="true"] b{color:var(--accent)}
.schede button[aria-selected="true"] span{color:var(--fg)}

/* Il pannello e' una colonna sola: l'esito sta in cima e il resto sta dietro le
   aperture. Prima erano due colonne di testo affiancate a un elenco di sedici voci. */
.pannello{display:block; padding:clamp(16px,2.2vh,24px) clamp(13px,1.6vw,20px) clamp(12px,1.6vh,18px)}
.esito-grande{display:flex; align-items:baseline; gap:clamp(10px,1.2vw,16px);
  flex-wrap:wrap; margin-bottom:8px}
.esito-grande b{font-family:var(--mono); font-weight:600; color:var(--accent);
  font-size:clamp(28px,3.4vw,44px); letter-spacing:-.03em; line-height:1; flex:none}
.esito-grande span{font-size:var(--fs-corpo); line-height:1.4; color:var(--muted); max-width:46ch}
.pannello .meta{font-family:var(--mono); font-size:11.5px; line-height:1.7;
  color:var(--faint); letter-spacing:.02em}
.pannello .meta b{color:var(--muted); font-weight:500}
.pannello .apri{margin-top:10px; border:1px solid var(--filo); border-radius:var(--r-sm);
  background:var(--fondo)}
.pannello .apri>summary{font-family:var(--mono); font-size:12px; letter-spacing:.02em;
  color:var(--muted); line-height:1.4}
.pannello .apri[open]>summary{color:var(--fg)}
.pannello .apri.lista .dentro{padding:0 8px 8px}
.pannello .merce{font-size:var(--fs-corpo); line-height:1.55; color:var(--muted); text-wrap:pretty}
.scorrevole{max-height:min(45vh, 420px); overflow-y:auto; overscroll-behavior:contain;
  border:1px solid var(--filo); border-radius:var(--r-xs); background:var(--fondo-2)}
.scorrevole::-webkit-scrollbar{width:8px}
.scorrevole::-webkit-scrollbar-thumb{background:var(--fondo-4); border-radius:4px}
.voci li+li{border-top:1px solid var(--filo)}
.voci button{width:100%; display:grid;
  grid-template-columns:20px 70px minmax(0,1fr) 18px; align-items:center; gap:9px;
  padding:9px 11px; background:none; border:0; cursor:pointer; text-align:left;
  transition:background-color var(--dur-s) var(--ease)}
.voci button:hover{background:rgba(255,255,255,.04)}
.voci .segno{font-size:12px; text-align:center}
.voci .cod{font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.02em}
.voci .tit{font-size:12.8px; line-height:1.35; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.voci .freccia{color:var(--faint); transition:transform var(--dur-s) var(--ease)}
.voci button[aria-expanded="true"] .freccia{transform:rotate(90deg)}
.voci li.include .segno{color:var(--accent)} .voci li.include .cod{color:var(--accent)}
.voci li.exclude .segno{color:var(--bassa)} .voci li.exclude .cod{color:var(--faint)}
.voci li.exclude .tit{color:var(--faint)}
.voci .perche{display:none; padding:0 11px 11px 110px; font-size:12.2px; line-height:1.5;
  color:var(--muted); text-wrap:pretty}
.voci button[aria-expanded="true"]+.perche{display:block}
.voci .perche b{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint); margin-bottom:4px}
.pannello .box{padding:13px 15px; border-radius:var(--r-sm); background:var(--accent-velo);
  box-shadow:inset 0 0 0 1px rgba(70,194,144,.24); font-size:var(--fs-sotto);
  line-height:1.5; color:var(--fg); text-wrap:pretty}
.scelte{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px}
.scelta{display:grid; grid-template-columns:76px minmax(0,1fr); gap:11px; align-items:start;
  padding:11px 13px; border:1px solid var(--filo); border-radius:var(--r-sm);
  background:var(--fondo); cursor:pointer; text-align:left;
  transition:border-color var(--dur-s) var(--ease), background-color var(--dur-s) var(--ease)}
.scelta:hover{border-color:var(--filo-forte); background:var(--fondo-3)}
.scelta[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-velo)}
.scelta .cod{font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--accent)}
.scelta .tit{display:block; font-size:12.8px; line-height:1.4; color:var(--muted)}
.scelta .stato{display:inline-block; margin-top:5px; font-family:var(--mono); font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; padding:2px 7px; border-radius:var(--r-xs)}
.scelta .stato.applicable{color:var(--accent); background:var(--accent-velo)}
.scelta .stato.uncertain{color:var(--media); background:rgba(211,164,58,.13)}
.esito{margin-top:12px; padding:12px 14px; border-radius:var(--r-sm);
  background:var(--fondo-3); box-shadow:inset 0 0 0 1px var(--filo);
  font-size:12.6px; line-height:1.55; color:var(--muted); text-wrap:pretty}
.esito b{color:var(--fg)}

/* ── il film ───────────────────────────────────────────────────────────────── */
.film{position:relative; width:min(100%, calc(980 * var(--u)), calc(54vh * 16 / 9));
  margin-inline:auto;
  aspect-ratio:16/9; border-radius:calc(14 * var(--u)); overflow:hidden;
  box-shadow:0 calc(30 * var(--u)) calc(80 * var(--u)) rgba(0,0,0,.6),
             inset 0 0 0 1px var(--filo)}
.film video{width:100%; height:100%; object-fit:cover; background:#000}
.film .play{position:absolute; inset:0; display:grid; place-items:center; width:100%;
  background:linear-gradient(0deg, rgba(7,7,11,.5), rgba(7,7,11,.18)); border:0;
  cursor:pointer; transition:background-color var(--dur-m) var(--ease)}
.film .play b{display:inline-flex; align-items:center; gap:calc(11 * var(--u));
  height:calc(56 * var(--u)); padding:0 calc(28 * var(--u)); border-radius:var(--r-pill);
  font-size:calc(15 * var(--u)); font-weight:600; color:var(--pillola-ink);
  background:linear-gradient(180deg,#fff 0%,#E6EDEA 6%,#EAF1EE 72%,#fff 100%);
  box-shadow:0 calc(12 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.4),
             inset 0 0 0 2px rgba(255,255,255,.9);
  transition:transform var(--dur-s) var(--ease)}
.film .play:hover b{transform:scale(1.035)}
.film .play svg{width:calc(17 * var(--u)); height:calc(17 * var(--u)); fill:currentColor}
.film .durata{position:absolute; right:calc(14 * var(--u)); bottom:calc(13 * var(--u));
  font-family:var(--mono); font-size:calc(11 * var(--u)); letter-spacing:.06em;
  padding:calc(4 * var(--u)) calc(9 * var(--u)); border-radius:var(--r-xs);
  background:rgba(7,7,11,.72); color:var(--muted)}

/* ── il nastro delle lingue ────────────────────────────────────────────────── */
.nastro{margin-top:var(--blocco); overflow:hidden; position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.nastro .scorre{display:flex; gap:26px; width:max-content; animation:scorri 48s linear infinite}
.nastro span{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); white-space:nowrap}
@keyframes scorri{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ── il prodotto: nove riquadri, il titolo fuori e la spiegazione dentro ────── */
.carat{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(8px,1.15vh,13px) clamp(16px,2vw,28px); margin-top:var(--blocco);
  align-items:start}
.apri.scheda{border:1px solid var(--filo); border-radius:var(--r); background:var(--fondo-3);
  transition:border-color var(--dur-m) var(--ease), background-color var(--dur-m) var(--ease)}
.apri.scheda:hover{border-color:var(--filo-forte)}
.apri.scheda[open]{background:var(--fondo-4); border-color:var(--filo-forte)}
.apri.scheda>summary{align-items:flex-start; gap:10px}
.apri.scheda .ico{width:19px; height:19px; color:var(--accent); flex:none; margin-top:1px}
.apri.scheda .ico svg{width:100%; height:100%}
.apri.scheda .n{font-family:var(--disp); font-weight:700; font-size:18px;
  letter-spacing:-.025em; color:var(--fg); flex:none}
.apri.scheda>summary .t{font-size:clamp(14px,min(1.15vw,1.9vh),16.5px)}
.apri.scheda .dentro{padding-left:calc(19px + 10px + clamp(12px,1.3vw,17px))}

/* ── per chi e': tre persone, tre fotografie ───────────────────────────────── */
.persone{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,22px);
  margin-top:var(--blocco)}
.persona{position:relative; border-radius:var(--r); overflow:hidden; isolation:isolate;
  min-height:clamp(240px,42vh,380px); display:flex; flex-direction:column;
  justify-content:flex-end; padding:clamp(14px,2vh,20px)}
.persona picture,.persona img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-2}
.persona img{transition:transform var(--dur-l) var(--ease)}
.persona::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(0deg, rgba(7,7,11,.95) 6%, rgba(7,7,11,.62) 42%, rgba(7,7,11,.30) 100%)}
.persona:hover img{transform:scale(1.045)}
.persona .tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--accent); margin-bottom:7px}
.persona h3{margin-bottom:6px}
.persona p{font-size:var(--fs-corpo); line-height:1.5; color:var(--muted); text-wrap:pretty}

/* ── i limiti ──────────────────────────────────────────────────────────────── */
.limiti{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(8px,1.2vh,14px) clamp(16px,2vw,28px); margin-top:var(--blocco);
  align-items:start}
.apri.limite{border-radius:var(--r); background:var(--fondo-3);
  box-shadow:inset 0 0 0 1px var(--filo); border-left:2px solid var(--bassa)}
.apri.limite>summary{flex-wrap:wrap; row-gap:4px}
.apri.limite>summary .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--bassa); flex:0 0 100%}
.apri.limite>summary .t{flex:1}
.apri.limite>summary i{align-self:flex-end}

/* ── i piani ───────────────────────────────────────────────────────────────── */
.piani{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.4vw,18px); margin-top:var(--blocco); align-items:stretch}
.piano-c{display:flex; flex-direction:column; padding:clamp(14px,1.9vh,20px) clamp(13px,1.4vw,18px);
  border:1px solid var(--filo); border-radius:var(--r); background:var(--fondo-3); position:relative}
.piano-c.evid{border-color:rgba(70,194,144,.4);
  background:linear-gradient(180deg, var(--accent-velo) 0%, var(--fondo-3) 55%)}
.piano-c .badge{position:absolute; top:calc(-1 * clamp(9px,1.1vh,11px)); left:13px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 9px; border-radius:var(--r-pill); background:var(--accent); color:#07070B}
.piano-c h3{margin-bottom:3px}
.piano-c .per-chi{font-size:12px; line-height:1.4; color:var(--faint); min-height:2.8em}
.piano-c .prezzo{display:flex; align-items:baseline; gap:5px; margin:11px 0 12px;
  padding-bottom:12px; border-bottom:1px solid var(--filo)}
.piano-c .prezzo b{font-family:var(--disp); font-weight:700; font-size:clamp(23px,2.6vh,30px);
  letter-spacing:-.03em}
.piano-c .prezzo span{font-size:12px; color:var(--faint)}
.piano-c ul{display:grid; gap:7px; flex:1}
.piano-c li{display:grid; grid-template-columns:14px minmax(0,1fr); gap:8px;
  font-size:12.6px; line-height:1.4; color:var(--muted)}
.piano-c li::before{content:"✓"; color:var(--accent); font-size:11px; line-height:1.55}
.piano-c .btn{margin-top:14px; width:100%; height:40px; font-size:13.5px}

/* ── le domande ────────────────────────────────────────────────────────────── */
.faq{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(20px,3vw,44px); margin-top:var(--blocco)}
.faq details{border-bottom:1px solid var(--filo)}
.faq summary{display:flex; align-items:flex-start; gap:12px; cursor:pointer; list-style:none;
  padding:clamp(11px,1.5vh,16px) 0; font-family:var(--disp); font-weight:600;
  font-size:var(--fs-h3); letter-spacing:-.012em; line-height:1.3;
  transition:color var(--dur-s) var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; margin-left:auto; font-family:var(--mono); font-weight:400;
  font-size:19px; color:var(--faint); line-height:1; flex:none;
  transition:transform var(--dur-m) var(--ease), color var(--dur-s) var(--ease)}
.faq summary:hover{color:var(--accent)}
.faq details[open] summary::after{transform:rotate(45deg); color:var(--accent)}
.faq p{padding:0 0 clamp(12px,1.6vh,17px); font-size:var(--fs-corpo); line-height:1.55;
  color:var(--muted); max-width:58ch; text-wrap:pretty}

/* ── il piede ──────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--filo); padding-block:clamp(32px,5vh,56px) 26px;
  background:var(--fondo-2)}
footer .griglia{display:grid; grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));
  gap:clamp(20px,3vw,40px)}
footer .desc{margin-top:13px; font-size:13px; line-height:1.55; color:var(--faint); max-width:34ch}
footer h4{font-family:var(--mono); font-weight:500; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); margin-bottom:11px}
footer li+li{margin-top:7px}
footer li a{font-size:13.5px; color:var(--muted); text-decoration:none;
  transition:color var(--dur-s) var(--ease)}
footer li a:hover{color:var(--accent)}
footer .basso{margin-top:clamp(24px,4vh,40px); padding-top:19px; border-top:1px solid var(--filo);
  display:flex; flex-wrap:wrap; gap:14px 30px; justify-content:space-between}
footer .basso p{font-size:11.5px; line-height:1.55; color:var(--faint); max-width:78ch}

/* ═══ ADATTAMENTO ═══════════════════════════════════════════════════════════
   Quattro soglie, in quest'ordine. La prima chiude la navigazione, la seconda
   toglie la seconda colonna, la terza manda gli schermi cinematografici a flusso
   e ridefinisce `--u` sulla larghezza del telefono, la quarta si occupa delle
   finestre basse.

   La soglia dei 1030 px non e' scelta a occhio: sotto, le voci di menu scendono
   sotto i 14 px con un bersaglio da toccare piu' piccolo di 40 px. Quella dei
   820 px e' il punto in cui la composizione a due colonne — testo e riquadro di
   vetro — smette di stare in piedi: sotto, il riquadro andrebbe a 260 px e la
   traccia dentro non si leggerebbe piu'.
   ═════════════════════════════════════════════════════════════════════════════ */

/* A · la navigazione diventa un pannello ─────────────────────────────────── */
@media (max-width:1030px){
  .hamb{display:block}
  .nav{position:absolute; top:calc(var(--hdr) + 8px); right:var(--gutter); left:auto;
    z-index:5; flex-direction:column; align-items:stretch; margin:0;
    width:min(300px, calc(100vw - var(--gutter) * 2)); padding:8px;
    border-radius:var(--r); background:rgba(9,9,13,.94); backdrop-filter:blur(18px);
    box-shadow:0 20px 50px rgba(0,0,0,.65), inset 0 0 0 1px var(--filo);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease),
               visibility var(--dur-m)}
  .testata.aperta .nav{opacity:1; visibility:visible; transform:none}
  .testata.aperta{background:rgba(7,7,11,.9); backdrop-filter:blur(16px)}
  .nav a{padding:12px 14px; font-size:15.5px; border-radius:var(--r-sm)}
  .nav a+a{border-top:1px solid rgba(255,255,255,.06)}
  .nav a::after{left:14px; right:auto; width:22px; bottom:7px}
  .azioni .btn-vuoto{display:none}
  .quadro>.wrap{grid-template-columns:minmax(0,1fr) calc(340 * var(--u)); gap:calc(34 * var(--u))}
  .colonna h1,.colonna h2{font-size:calc(64 * var(--u))}
  .carat{grid-template-columns:repeat(2,minmax(0,1fr))}
  footer .griglia{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}
}
/* Il numero di colonne deve seguire QUALE dimensione e' scarsa. Due colonne sono
   giuste su un tablet alto; su 1024x768 — l'iPad in orizzontale — il vincolo e'
   l'altezza, e due colonne vogliono dire cinque righe invece di tre: duecento pixel
   fuori schermo. Li' si torna a tre. */
@media (min-width:820px) and (max-width:1030px) and (max-height:900px){
  .carat{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Nella fascia tablet le schede sono strette e il testo va a capo di piu': nove
   schede in uno schermo vogliono una scheda compatta. Si stringe il contenitore,
   non il corpo del testo — sotto i 13 px quella descrizione non si legge piu'. */
@media (min-width:820px) and (max-width:1030px){
  .carat{gap:calc(6px + .35vh) clamp(12px,1.8vw,20px)}
  .apri.scheda>summary{padding:clamp(8px,1.1vh,11px) clamp(10px,1.1vw,13px); gap:8px}
  .apri.scheda .ico{width:17px; height:17px}
  .apri.scheda .n{font-size:17px}
  .apri.scheda .dentro{padding-left:calc(17px + 8px + clamp(10px,1.1vw,13px))}
}

/* B · sotto gli 820: lo schermo cinematografico va a flusso ──────────────── */
@media (max-width:819px){
  :root{
    --u:clamp(.66px, min(100vw / 430, 100vh / 760), 1.02px);
    --hdr:58px;
    --sez-pad:clamp(34px,5vh,52px); --blocco:16px;
    --fs-h2:clamp(26px,7.2vw,38px); --fs-sotto:16px; --fs-corpo:14.5px; --fs-h3:17px;
  }
  @supports (height:100dvh){ :root{--u:clamp(.66px, min(100vw / 430, 100dvh / 760), 1.02px)} }
  .scena{min-height:auto; padding-bottom:0}
  .quadro{padding-top:calc(var(--hdr) + 28px); padding-bottom:30px}
  .quadro>.wrap{grid-template-columns:minmax(0,1fr); gap:26px; padding-block:0}
  .colonna h1,.colonna h2{font-size:clamp(34px,10.2vw,54px); max-width:none; letter-spacing:-.024em}
  .colonna .sotto{font-size:15.5px; line-height:1.55; max-width:none}
  .filo-acc{width:84px; height:4px; margin:20px 0 18px}
  .colonna .azioni-hero{margin-top:24px; gap:10px}
  .colonna .azioni-hero .btn{height:48px; padding:0 22px; font-size:14.5px; flex:1 1 auto}
  .frizione{margin-top:22px; font-size:11.5px; gap:8px 16px}
  /* Il riquadro di vetro resta, ma smette di essere una colonna: diventa la prova
     che sta SOTTO la promessa, che e' l'ordine giusto di lettura su un telefono. */
  .vetro{padding:16px; border-radius:14px}
  .vetro .merce{font-size:12.5px; line-height:1.45; -webkit-line-clamp:4}
  .spina li{grid-template-columns:13px 44px minmax(0,1fr); font-size:11.5px; gap:8px}
  .vetro .esito .voce b{font-size:20px}
  .fascia .wrap{grid-template-columns:repeat(2,1fr); min-height:0}
  .fascia .n{padding:14px 12px}
  .fascia .n b{font-size:24px}
  .fascia .n span{font-size:11.5px; line-height:1.4}
  .fascia .n:nth-child(odd){border-left:0; padding-left:0}
  .fascia .n:nth-child(n+3){border-top:1px solid var(--filo)}
  .stat3{grid-template-columns:1fr; gap:10px; margin-top:24px}
  .stat{padding:14px 16px; border-radius:10px}
  .stat b{font-size:22px; margin-bottom:5px}
  .stat span{font-size:13px; line-height:1.45}
  /* la freccia mentirebbe: qui una sezione non e' uno schermo */
  .giu{display:none}
  .sez{min-height:auto; display:block}
  .due,.passi,.limiti,.faq,.persone{grid-template-columns:1fr}
  .passo.onesto{grid-column:auto}
  .confronto .riga{grid-template-columns:1fr}
  .confronto .riga>div:first-child{background:rgba(255,255,255,.04); font-family:var(--mono);
    font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; padding-bottom:5px}
  .confronto .riga>div:nth-child(2),.confronto .riga>div:nth-child(3){border-left:0}
  .confronto .capo{display:none}
  .pannello{grid-template-columns:1fr; gap:16px}
  .schede{grid-template-columns:1fr}
  .schede button+button{border-left:0; border-top:1px solid var(--filo)}
  .scorrevole{max-height:54vh}
  .voci button{grid-template-columns:18px 58px minmax(0,1fr) 16px}
  .voci .perche{padding-left:12px}
  .film{width:100%; border-radius:12px}
  .film .play b{height:48px; padding:0 22px; font-size:14.5px; gap:9px}
  .film .play svg{width:15px; height:15px}
  .carat{grid-template-columns:1fr 1fr}
  .apri.scheda .ico{width:18px; height:18px}
  .apri>summary .t{font-size:16px}
  .persona{min-height:220px}
  .piani{grid-template-columns:1fr 1fr}
  .piano-c .per-chi{min-height:0}
  .faq details:last-child{border-bottom:0}
  footer .griglia{grid-template-columns:1fr 1fr}
  footer .griglia>div:first-child{grid-column:1/-1}
}

/* C · telefono stretto ───────────────────────────────────────────────────── */
@media (max-width:520px){
  :root{--gutter:18px}
  .colonna .azioni-hero .btn{flex:1 1 100%}
  .carat,.piani{grid-template-columns:1fr}
  .fascia .wrap{grid-template-columns:1fr}
  .fascia .n{border-left:0; padding-left:0}
  .fascia .n+.n{border-top:1px solid var(--filo)}
  .voci .cod{font-size:11px}
  .scelta{grid-template-columns:1fr; gap:5px}
  footer .basso{flex-direction:column}
}

/* D · il buco fra le soglie: 1366x768 e gli altri portatili bassi ────────────
   La fascia compatta qui sotto parte a 760 px di altezza, e 768 ci cade appena
   fuori: e' la risoluzione da portatile piu' diffusa che esista, e ci finiva il
   francese fuori schermo per sedici pixel. Qui si stringe il ritmo verticale e
   basta — NIENTE contenuto sparisce, che e' la differenza con la fascia sotto. */
@media (min-width:820px) and (max-height:820px){
  .colonna h1,.colonna h2{font-size:calc(64 * var(--u))}
  .filo-acc{margin:calc(22 * var(--u)) 0 calc(20 * var(--u))}
  .stat3{margin-top:calc(20 * var(--u))}
  .quadro>.wrap{padding-block:calc(12 * var(--u))}
  .scena>.giu{margin-bottom:calc(9 * var(--u))}
}

/* E · finestre basse davvero: cade l'ornamento, mai il contenuto ──────────── */
@media (min-width:820px) and (max-height:760px){
  :root{--sez-pad:clamp(18px,3vh,36px); --blocco:clamp(8px,1.4vh,16px)}
  .colonna h1,.colonna h2{font-size:calc(58 * var(--u))}
  .frizione{display:none}
  .vetro .merce{-webkit-line-clamp:2}
  .apri.scheda .ico{display:none}
  .apri.scheda .dentro{padding-left:clamp(12px,1.3vw,17px)}
  .piano-c .per-chi{min-height:0}
}
@media (min-width:820px) and (max-height:660px){
  .giu{display:none}
  .fascia .n span{display:none}
  .fascia .wrap{min-height:calc(62 * var(--u))}
}

/* ═══ PEZZI CHE MANCAVANO AL PRIMO GIRO ═════════════════════════════════════ */

/* la traccia che si rigioca: i nodi arrivano uno alla volta, il verdetto per ultimo */
.spina li{opacity:.18; transform:translateX(calc(-6 * var(--u)));
  transition:opacity 420ms var(--ease), transform 420ms var(--ease)}
.spina li.vivo{opacity:1; transform:none}
.spina li.scartato.vivo{opacity:.5}
.js .vetro .esito.verdetto{opacity:0; transform:translateY(calc(6 * var(--u)));
  transition:opacity 480ms var(--ease), transform 480ms var(--ease)}
.js .vetro .esito.verdetto.vivo{opacity:1; transform:none}
.no-js .spina li{opacity:1; transform:none}
.no-js .spina li.scartato{opacity:.5}
.barra{height:calc(2 * var(--u)); margin-top:calc(14 * var(--u)); border-radius:1px;
  background:rgba(245,245,243,.10); overflow:hidden}
.barra i{display:block; height:100%; width:0; background:var(--accent); opacity:.65}

/* «che cosa costa, in pratica»: la fascia in fondo allo schermo del problema */
.vetro.largo{width:100%; padding:calc(15 * var(--u)) calc(22 * var(--u))}
.vetro.largo .testo{margin-top:calc(11 * var(--u)); font-size:calc(13.4 * var(--u));
  line-height:calc(20 * var(--u)); color:var(--muted); text-wrap:pretty}
.vetro.largo .testo strong{color:var(--fg); font-weight:600}
.fascia.costo{border-top:0; background:linear-gradient(180deg,
  rgba(7,7,11,0) 0%, rgba(7,7,11,.55) 45%, rgba(7,7,11,.9) 100%)}
.fascia.costo .wrap{display:block; min-height:0;
  padding-block:calc(10 * var(--u)) calc(16 * var(--u))}

/* le sezioni ferme con l'intestazione centrata (il film) */
.sez.centrata-sez>.wrap{text-align:center}
.intestazione-centrata{max-width:min(100%, calc(980 * var(--u)));
  margin-inline:auto; margin-bottom:var(--blocco)}
.intestazione-centrata h2{margin-inline:auto; max-width:24ch}
.intestazione-centrata .sotto{margin:12px auto 0; max-width:56ch}
.sez.centrata-sez .nastro{margin-top:calc(var(--blocco) * 1.2)}

@media (max-width:819px){
  .spina li{transform:none}
  .vetro.largo{padding:16px}
  .vetro.largo .testo{font-size:13.5px; line-height:1.55}
  .fascia.costo .wrap{padding-block:0 26px}
  .barra{height:2px; margin-top:12px}
}

/* riconoscimento: una riga di fatto, sotto l'invito finale */
.riconoscimento{margin:14px 0 0;max-width:46ch;font-family:var(--mono);font-size:12.5px;line-height:1.55;letter-spacing:.03em;color:var(--accent)}
.centrata .riconoscimento{margin-left:auto;margin-right:auto;max-width:64ch;text-align:center}

/* il premio: una pillola sopra il titolo, con il link alla fonte */
.premio{display:inline-flex;align-items:center;gap:9px;margin:0 0 clamp(10px,1.8vh,18px);padding:6px 13px;border:1px solid var(--rule-ink-strong,rgba(245,245,243,.3));border-radius:999px;font-family:var(--mono);font-size:12px;letter-spacing:.05em;line-height:1.3;color:var(--on-ink,#F5F5F3);text-decoration:none;background:rgba(7,7,11,.35);transition:border-color .16s}
.premio i{width:7px;height:7px;border-radius:50%;background:var(--accent-on-ink,#46C290);flex:none}
.premio:hover{border-color:var(--accent-on-ink,#46C290)}
.premio{max-width:100%;box-sizing:border-box;min-width:0}
@media (max-width:640px){.premio{border-radius:16px;align-items:flex-start;font-size:11.5px}.premio i{margin-top:5px}}