/* PassConcorso: foglio di stile.
   Il formato (colori, tipografia, spaziature, raggi, ombre, componenti) è
   ripreso 1:1 dal sito gemello OposICS: gli stessi token, gli stessi valori,
   gli stessi componenti. Cambiano solo i contenuti, che sono nostri. */

/* ---------------------------------------------------------------------------
   Inter, self-hosted. Variabile 400-900: ogni peso usato dal design arriva da
   un solo file. Stesso caricamento del sito gemello.
   --------------------------------------------------------------------------- */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url(/fonts/inter-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;
}

:root{
  --teal:#0E7C7B;--teal-deep:#0B6363;--teal-bright:#12A594;
  --orange:#EF8A3C;--orange-hover:#E07B2C;
  --blue:#0e7c7b;--blue-dark:#0b6363;--teal-soft:#e6f2f2;
  --accent:#ef8a3c;--accent-dark:#e07b2c;
  --green:#12a594;--green-soft:#e2f4f1;
  --red:#d64545;--red-soft:#fbe8e8;
  --ink:#1F2A33;--muted:#5B6B76;--line:#E4EAEE;--bg:#F6F8FA;--card:#FFFFFF;
  --lp-bg:#F6F8FA;--lp-card:#FFFFFF;--lp-slate:#1F2A33;--lp-muted:#5B6B76;--lp-line:#E4EAEE;
  --radius:16px;--radius-sm:12px;--radius-xs:10px;--radius-lg:22px;--radius-pill:999px;
  --lp-radius:16px;
  /* banda di lancio in cima: misure in un posto solo, si stringono nei media */
  --urg-h:44px;--urg-gap:20px;--urg-testo:14px;--urg-cap-w:47px;--urg-cap-gap:7px;
  --urg-cifra:16px;--urg-et:10px;
  --pad-sm:18px;--pad:22px;--pad-lg:28px;
  /* ritmo delle schede banca quiz: lista, interno, griglia dei numeri.
     Un solo posto da toccare; sotto i 640px i valori salgono (vedi media). */
  --bc-gap:26px;--bc-pad:28px 26px;--bc-rit:12px;--bc-blocco:22px;
  --bc-num-riga:18px;--bc-num-col:30px;--bc-num-et:5px;--bc-coda:10px;
  --hh:72px;
  --shadow:0 10px 30px -14px rgba(15,42,51,.14);
  --shadow-lg:0 24px 60px -22px rgba(15,42,51,.22);
  --lp-shadow:0 10px 30px -12px rgba(15,42,51,.14);
  --lp-shadow-lg:0 24px 60px -20px rgba(15,42,51,.22);
  --grad:linear-gradient(135deg,#0e7c7b 0%,#12a594 100%);
  --grad-hero:linear-gradient(155deg,#072F31 0%,#0B6363 46%,#0E7C7B 100%);
  --grad-deep:linear-gradient(135deg,#0b6363,#0e7c7b 55%,#12a594);
  --lp-maxw:1160px;
  --fs-xs:12.5px;--fs-sm:14px;--fs-base:16px;--fs-md:18px;--fs-lg:21px;
  --fs-h3:21px;--fs-h2:32px;--fs-h1:46px;--fs-display:60px;
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--lp-slate);background:var(--lp-bg);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
input,button,select,textarea{font:inherit}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
h1,h2,h3,h4{line-height:1.15;letter-spacing:-.02em;margin:0 0 .5em}/* La scala grande è dell'hero e delle testate di sezione della vetrina; le
   pagine applicative usano la scala compatta, come sul sito gemello. */


h1{font-size:var(--fs-h1);font-weight:900;line-height:1.15}
h2{font-size:var(--fs-h2);font-weight:800;line-height:1.15;margin-top:1.4em}
h2:first-child{margin-top:0}
h3{font-size:var(--fs-h3);font-weight:800}
h4{font-size:var(--fs-base);font-weight:700}
p{margin:0 0 1em}
ul,ol{padding-left:1.25em}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
[id]{scroll-margin-top:88px}

.wrap{width:100%;max-width:var(--lp-maxw);margin:0 auto;padding:0 24px}
.wrap-stretto{max-width:760px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:10px 16px;z-index:99;border:2px solid var(--teal);border-radius:8px}
.mt{margin-top:26px}
.centro{text-align:center}
.nascosto{display:none !important}
.muted,.muto{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}/* -------------------------------------------------------------- occhiello */




.eyebrow,.occhiello{
  display:inline-block;font-size:var(--fs-sm);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--teal);background:rgba(14,124,123,.08);
  padding:6px 14px;border-radius:999px;margin:0 0 8px;
}
.hero .eyebrow,.hero .occhiello{background:rgba(255,255,255,.14);color:#fff}/* ----------------------------------------------------------------- bottoni */




.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-weight:700;font-size:var(--fs-base);padding:14px 26px;border-radius:12px;
  border:2px solid transparent;cursor:pointer;text-decoration:none;text-align:center;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;white-space:nowrap;
}
.btn-oro,.btn-primary,.btn-accent{background:var(--orange);color:var(--ink);border-color:var(--orange);box-shadow:0 8px 22px -8px rgba(239,138,60,.7)}
.btn-oro:hover,.btn-primary:hover,.btn-accent:hover{background:var(--orange-hover);border-color:var(--orange-hover);color:var(--ink);transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(239,138,60,.75)}
.btn-blu,.btn-teal{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 8px 22px -10px rgba(14,124,123,.6)}
.btn-blu:hover,.btn-teal:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff;transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(14,124,123,.6)}
.btn-bordo,.btn-ghost{background:#fff;color:var(--blue);border-color:rgba(14,124,123,.35)}
.btn-bordo:hover,.btn-ghost:hover{background:var(--teal-soft);border-color:var(--blue);color:var(--blue-dark);transform:translateY(-2px)}
.btn-chiaro,.btn-ghost-light{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.35)}
.btn-chiaro:hover,.btn-ghost-light:hover{background:rgba(255,255,255,.24);color:#fff}
.btn-blocco,.btn.block{display:flex;width:100%}
.btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn.piccolo{padding:11px 20px;font-size:var(--fs-sm)}

/* ------------------------------------------------------------------ header */

/* La testata è sticky e sta NEL FLUSSO: la barra di lancio le sta sopra, sempre
   nel flusso, quindi scorre via da sola e la testata resta da sola in cima.
   Niente position:fixed e niente padding di compensazione sul body: così non
   c'è nessuno scatto quando si incolla, e chiudere la barra non lascia vuoti. */
.site-header{position:sticky;top:0;left:0;right:0;z-index:50;
  background:rgba(246,248,250,.85);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--lp-line);
  transition:background .3s ease,box-shadow .3s ease,backdrop-filter .3s ease}
.site-header.fissa{box-shadow:0 1px 0 var(--lp-line),0 10px 24px -18px rgba(15,42,51,.5)}
/* Pagine con hero scuro: la testata è trasparente sopra l'hero e diventa chiara
   allo scroll. Il margine negativo la fa sovrapporre all'hero senza toglierla
   dal flusso: resta sticky, ma non occupa spazio proprio. */
body.lp .site-header{margin-bottom:-72px;background:transparent;box-shadow:none;backdrop-filter:none}
body.lp .site-header.fissa{background:rgba(246,248,250,.85);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--lp-line),0 10px 24px -18px rgba(15,42,51,.5)}
.hdr{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:14px;height:72px}
.logo{display:inline-flex;align-items:center;flex:none;margin-right:auto;line-height:0}
.logo img{height:30px;width:auto;display:block}
/* Sulla barra chiara vale il lockup standard; la versione chiara compare solo
   quando la testata è trasparente sopra l'hero scuro. Scambio in CSS: nessun
   ricaricamento e nessuno sfarfallio al passaggio di stato. */
.logo .logo-rev{display:none}
body.lp .site-header:not(.fissa) .logo .logo-std{display:none}
body.lp .site-header:not(.fissa) .logo .logo-rev{display:block}
/* Il richiamo d'acquisto non si comprime e non va mai a capo: è l'unico
   elemento della testata che deve restare leggibile a qualunque larghezza. */
.site-header .hdr-cta{flex:none;white-space:nowrap}
.site-header .btn{padding:11px 20px;font-size:var(--fs-sm)}
.menu-tasto{flex:none;display:block;background:none;border:0;cursor:pointer;padding:8px;z-index:60}
.menu-tasto span{display:block;width:24px;height:2px;background:var(--lp-slate);margin:5px 0;transition:.3s}
body.lp .menu-tasto span{background:#fff}
body.lp .site-header.fissa .menu-tasto span{background:var(--lp-slate)}

/* --- menu: struttura comune al cassetto e alla riga desktop ---------------
   Le tredici voci vecchie sono raggruppate in cinque voci di primo livello con
   tendina (<details>): senza JS la tendina si apre comunque al clic, con JS si
   apre anche al passaggio del mouse. Nessuna etichetta viene mai tagliata -
   dove non entra, va a capo. */
.nav ul{list-style:none;margin:0;padding:0}
.nav-liv1{display:flex;flex-direction:column;gap:0}
.nav-voce{position:relative}
.nav-link,.drop-btn{display:flex;align-items:center;gap:7px;width:100%;
  font:inherit;font-weight:600;font-size:var(--fs-sm);line-height:1.35;color:var(--lp-slate);
  background:none;border:0;padding:14px 2px;text-align:left;cursor:pointer;
  white-space:normal;overflow:visible;text-overflow:clip;transition:color .2s}
.nav-link:hover,.drop-btn:hover{color:var(--teal)}
.nav-link.attivo,.nav-voce.attivo>.drop>.drop-btn{color:var(--teal);font-weight:700}
.drop{width:100%}
.drop>summary{list-style:none;display:flex}
.drop>summary::-webkit-details-marker{display:none}
.drop>summary::marker{content:""}
.caret{flex:none;margin-left:auto;opacity:.75;transition:transform .2s ease}
.drop[open]>.drop-btn .caret{transform:rotate(180deg)}
.acc-icona{flex:none}
.drop-lista a{display:block;color:var(--lp-slate);font-size:var(--fs-sm);font-weight:600;
  line-height:1.35;padding:11px 2px;white-space:normal;transition:color .2s,background .2s}
.drop-lista a:hover{color:var(--teal)}
.drop-lista a[aria-current="page"]{color:var(--teal);font-weight:700}
.drop-nota{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--lp-muted);margin-top:2px}

/* Sotto i 1024px la riga di voci non esiste proprio: la navigazione del
   telefono è il cassetto qui sotto, che vive FUORI dalla testata. */
.nav{display:none}
.nav-voce{border-bottom:1px solid var(--lp-line)}
.nav-voce:last-child{border-bottom:0}
.drop-pan{padding:0 0 10px 14px;margin:0 0 6px;border-left:2px solid var(--teal-soft)}

/* --- cassetto del telefono: pannello a tutto schermo ---------------------- */
body.menu-aperto{position:fixed;left:0;right:0;width:100%;overflow:hidden}
body.menu-aperto .barra-acquisto{display:none}
.cas-velo{position:fixed;inset:0;z-index:88;background:rgba(15,42,51,.42);
  opacity:0;transition:opacity .22s ease}
.cas-velo.aperto{opacity:1}
.cas-velo[hidden],.cassetto[hidden]{display:none}
.cassetto{position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;
  display:flex;flex-direction:column;background:var(--lp-bg);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding-bottom:max(24px,env(safe-area-inset-bottom));
  opacity:0;transform:translateY(-8px);
  transition:opacity .22s ease,transform .26s ease}
.cassetto.aperto{opacity:1;transform:none}
.cas-testa{position:sticky;top:0;z-index:2;display:flex;align-items:center;
  gap:14px;height:72px;flex:none;
  padding-left:max(16px,env(safe-area-inset-left));
  padding-right:max(16px,env(safe-area-inset-right));
  background:var(--lp-bg);border-bottom:1px solid var(--lp-line)}
.cas-marchio{margin-right:auto;line-height:0}
.cas-marchio img{height:27px;width:auto;display:block}
.cas-x{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;margin-right:-6px;border:1px solid var(--lp-line);
  border-radius:12px;background:#fff;color:var(--lp-slate);cursor:pointer}
.cas-x:hover{background:var(--teal-soft);color:var(--teal-deep)}
.cas-corpo{padding:6px 0 8px;
  padding-left:max(16px,env(safe-area-inset-left));
  padding-right:max(16px,env(safe-area-inset-right))}
.cas-gruppo{padding:10px 0 4px;border-top:1px solid var(--lp-line)}
.cas-gruppo:first-child{border-top:0}
.cas-titolo{margin:0 0 2px;font-size:var(--fs-h2);font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--lp-muted)}
.cas-lista{list-style:none;margin:0;padding:0}
.cas-sola{padding:6px 0;border-top:1px solid var(--lp-line)}
.cas-sola:first-child{border-top:0}
.cas-lista a{display:block;padding:12px 2px;font-size:var(--fs-base);font-weight:600;
  line-height:1.3;color:var(--lp-slate)}
.cas-lista a:active{color:var(--teal)}
.cas-lista a[aria-current="page"]{color:var(--teal)}
.cas-primaria{font-size:var(--fs-base);font-weight:700}
.cas-primaria.attivo{color:var(--teal)}
.cas-nota{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--lp-muted);margin-top:2px}
.cas-azioni{display:flex;flex-direction:column;gap:10px;
  padding:16px 0 8px;border-top:1px solid var(--lp-line);margin-top:6px}
.cas-azioni .btn{justify-content:center}
@media(prefers-reduced-motion:reduce){
  .cassetto,.cas-velo{transition:none}
}

/* --- riga desktop: cinque voci larghe, tendine sospese, niente troncamenti ---
   La riga compare solo dove ci sta davvero: sotto i 1024px, e comunque ogni
   volta che la guardia in JS misura un traboccamento, si torna al cassetto. */
@media(min-width:1024px){
  .site-header:not(.forza-cassetto) .menu-tasto{display:none}
  .site-header:not(.forza-cassetto) .nav{display:block;position:static;z-index:auto;flex:0 0 auto;
    max-height:none;overflow:visible;background:none;backdrop-filter:none;
    padding:0;box-shadow:none;opacity:1;visibility:visible;transform:none;transition:none}
  .site-header:not(.forza-cassetto) .nav-liv1{flex-direction:row;align-items:center;gap:18px}
  .site-header:not(.forza-cassetto) .nav-voce{border-bottom:0;flex:none}
  .site-header:not(.forza-cassetto) .caret{margin-left:0}
  .site-header:not(.forza-cassetto) .drop{width:auto}
  .site-header:not(.forza-cassetto) .nav-link,
  .site-header:not(.forza-cassetto) .drop-btn{width:auto;gap:5px;font-size:var(--fs-sm);
    padding:9px 0;color:#26424a;white-space:nowrap}
  .site-header:not(.forza-cassetto) .nav-link:hover,
  .site-header:not(.forza-cassetto) .drop-btn:hover{color:var(--teal)}
  body.lp .site-header:not(.fissa):not(.forza-cassetto) .nav-link,
  body.lp .site-header:not(.fissa):not(.forza-cassetto) .drop-btn{color:rgba(255,255,255,.92)}
  body.lp .site-header:not(.fissa):not(.forza-cassetto) .nav-link.attivo,
  body.lp .site-header:not(.fissa):not(.forza-cassetto) .nav-voce.attivo>.drop>.drop-btn{color:#fff;font-weight:700}
  .site-header:not(.forza-cassetto) .drop-pan{position:absolute;top:calc(100% + 8px);left:-12px;
    min-width:236px;max-width:min(340px,calc(100vw - 32px));
    background:#fff;border:1px solid var(--lp-line);border-radius:14px;
    padding:8px;margin:0;box-shadow:var(--lp-shadow-lg);animation:tendina .16s ease}
  /* Le ultime voci si aprono verso sinistra: così la tendina non esce mai dal
     bordo destro della finestra. */
  .site-header:not(.forza-cassetto) .nav-voce:nth-last-child(-n+3) .drop-pan{left:auto;right:-12px}
  .site-header:not(.forza-cassetto) .drop-lista a{padding:9px 12px;border-radius:10px;font-size:var(--fs-sm)}
  .site-header:not(.forza-cassetto) .drop-lista a:hover{background:var(--teal-soft);color:var(--teal-deep)}
  .site-header:not(.forza-cassetto) .btn{padding:10px 18px;font-size:var(--fs-sm)}
  /* Sotto i 1280 l'account resta solo icona: lo spazio va al richiamo arancione. */
  .site-header:not(.forza-cassetto) .nav-account .acc-testo{display:none}
  .site-header:not(.forza-cassetto) .nav-account .drop-btn{padding:9px 2px}
}
@media(min-width:1280px){
  .site-header:not(.forza-cassetto) .nav-account .acc-testo{display:inline}
}
@keyframes tendina{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .nav{transition:none}
  .site-header:not(.forza-cassetto) .drop-pan{animation:none}
  .caret{transition:none}
}

main{padding-top:0}

@media(max-width:760px){
  .hdr{gap:12px}
  .nav{padding:6px 24px 24px}
  .site-header .hdr-cta{padding:10px 15px;font-size:var(--fs-sm)}
  .logo img{height:27px}
}
@media(max-width:430px){
  .wrap.hdr{padding-left:16px;padding-right:16px;gap:10px}
  .nav{padding-left:16px;padding-right:16px}
  .logo img{height:25px}
  .site-header .hdr-cta{padding:9px 12px;font-size:var(--fs-sm)}
  .menu-tasto{padding:8px 0}
}
@media(max-width:360px){
  .logo img{height:22px}
  .site-header .hdr-cta{padding:8px 10px;font-size:var(--fs-sm)}
  .nav-link,.drop-btn,.drop-lista a{font-size:var(--fs-sm)}
}

/* -------------------------------------------------------------------- hero */

.hero{position:relative;overflow:hidden;padding:150px 0 90px;color:#fff;
  background:linear-gradient(135deg,#0B6363 0%,#0E7C7B 45%,#12A594 100%)}
.hero .trama,.hero .mesh{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero .trama i,.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;mix-blend-mode:screen;animation:lpfloat 16s ease-in-out infinite;display:block}
.hero .trama i:nth-child(1){width:460px;height:460px;background:#19E3C4;top:-120px;left:-80px}
.hero .trama i:nth-child(2){width:520px;height:520px;background:#0A8F87;bottom:-160px;right:-60px;animation-delay:-5s}
.hero .trama i:nth-child(3){width:340px;height:340px;background:#3DF0D0;top:40%;left:45%;animation-delay:-9s;opacity:.4}
.hero .griglia,.grid-lines{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 75%)}
.hero .wrap{position:relative;z-index:2}
.hero-inner{position:relative;z-index:2;width:100%}
.hero h1{font-size:var(--fs-h1);font-weight:900;line-height:1.15;margin:20px 0 18px;color:#fff}
.hero .sottotitolo,.hero p.sub{font-size:var(--fs-lg);color:rgba(255,255,255,.92);max-width:640px;font-weight:400;margin:0}
.hero-cta,.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero-onda,.hero-wave{position:absolute;bottom:-1px;left:0;right:0;z-index:1;line-height:0}
.hero-onda svg,.hero-wave svg{display:block;width:100%;height:70px}
.hero.compatto{padding:130px 0 70px}
.hero.compatto h1{font-size:var(--fs-h1)}
@keyframes lpfloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.08)}66%{transform:translate(-30px,25px) scale(.95)}}
@media(max-width:760px){.hero{padding:130px 0 80px}.hero.compatto{padding:120px 0 62px}}

/* dati di fiducia dentro l'hero */
.fiducia,.trust{margin-top:44px;display:flex;gap:14px 34px;flex-wrap:wrap;align-items:flex-start;
  border-top:1px solid rgba(255,255,255,.18);padding-top:26px}
.fiducia .dato,.trust .stat{display:flex;flex-direction:column}
.fiducia .n,.trust .stat .num{font-size:var(--fs-lg);font-weight:800;line-height:1;letter-spacing:-.02em;color:#fff}
.fiducia .l,.trust .stat .lbl{font-size:var(--fs-sm);color:rgba(255,255,255,.8);margin-top:6px;max-width:150px;line-height:1.4}

/* prova sociale: numeri veri (domande, fonti citate, concorsi seguiti, o,
   sopra soglia d'uso, utenti/test), mai testimonianze o stelline finte.
   Ogni numero arriva scritto dal server (onesto già senza JS) e viene
   corretto dal vivo da public/prova-sociale.js. */
.prova-sociale{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:18px}
.prova-sociale .ps-dato{display:flex;flex-direction:column;min-width:100px}
.prova-sociale .ps-n{font-size:var(--fs-lg);font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--teal)}
.prova-sociale .ps-l{font-size:var(--fs-sm);color:var(--muted);margin-top:4px;line-height:1.35;max-width:160px}
.prova-sociale--scura{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18)}
.prova-sociale--scura .ps-n{color:#fff}
.prova-sociale--scura .ps-l{color:rgba(255,255,255,.78)}
.prova-sociale--compatta{gap:8px 18px;margin-top:10px;margin-bottom:2px}
.prova-sociale--compatta .ps-n{font-size:var(--fs-base)}
.prova-sociale--compatta .ps-l{font-size:var(--fs-sm);max-width:120px}

/* promesse (variante compatta del blocco fiducia) */
.promesse{display:grid;gap:16px;border-top:1px solid rgba(255,255,255,.18);padding-top:26px;margin-top:34px}
.promessa h3{color:#fff;font-size:var(--fs-h3);margin-bottom:.3em}
.promessa p{color:rgba(255,255,255,.85);font-size:var(--fs-base);margin:0}
@media(min-width:760px){.promesse{grid-template-columns:repeat(3,1fr);gap:26px}}

/* ----------------------------------------------------------------- sezioni */

section{padding:88px 0}
section.bianca{background:#fff}
/* Le pagine applicative (senza hero) partono subito sotto la testata. */
body:not(.lp) main>section:first-child{padding-top:36px}
section.stretta{padding:56px 0}
.sez-testa,.sec-head{max-width:680px;margin:0 auto 54px;text-align:center}
.sez-testa .occhiello,.sec-head .eyebrow{margin-bottom:0}
.sez-titolo,.sec-head h2{font-size:var(--fs-h2);font-weight:800;line-height:1.15;margin:16px 0 14px}
h2.sez-titolo{margin-top:0}
.sez-intro{color:var(--lp-muted);font-size:var(--fs-md);margin:0}.sec-head p{color:var(--lp-muted);font-size:var(--fs-base);margin:0}
.sez-testa .sez-intro{margin-left:auto;margin-right:auto}
.section-title{font-size:var(--fs-h2);margin:36px 0 4px;letter-spacing:-.5px}
.section-sub{color:var(--muted);margin:0 0 22px}
@media(max-width:760px){section{padding:64px 0}section.stretta{padding:44px 0}.sez-testa,.sec-head{margin-bottom:36px}}

/* -------------------------------------------------------------------- card */

.cards{display:grid;gap:22px}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--lp-card);border:1px solid var(--lp-line);border-radius:var(--lp-radius);
  padding:30px 26px;box-shadow:var(--lp-shadow);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s}
.card:hover{transform:translateY(-6px);box-shadow:var(--lp-shadow-lg);border-color:rgba(14,124,123,.25)}
.card .ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(135deg,rgba(14,124,123,.12),rgba(18,165,148,.12));color:var(--teal)}
.card h3{font-size:var(--fs-h3);font-weight:800;margin:0 0 8px}
.card p{color:var(--lp-muted);font-size:var(--fs-base);margin:0}
.card .step,.card .num{font-size:var(--fs-sm);font-weight:700;color:var(--ink);background:var(--orange);letter-spacing:.05em;
  text-transform:uppercase;margin-bottom:12px;display:block}

/* passi "come funziona", stessa card, con il contatore in arancio */
.passi{display:grid;gap:22px;grid-template-columns:repeat(3,1fr)}
.passo{background:var(--lp-card);border:1px solid var(--lp-line);border-radius:var(--lp-radius);
  padding:30px 26px;box-shadow:var(--lp-shadow);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s}
.passo:hover{transform:translateY(-6px);box-shadow:var(--lp-shadow-lg);border-color:rgba(14,124,123,.25)}
.passo .num{font-size:var(--fs-sm);font-weight:700;color:var(--ink);background:var(--orange);letter-spacing:.05em;text-transform:uppercase;margin-bottom:12px;display:block}
.passo h3{font-size:var(--fs-h3);font-weight:800;margin:0 0 8px}
.passo p{color:var(--lp-muted);font-size:var(--fs-base);margin:0}
@media(max-width:960px){.cards.c4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.cards.c4,.cards.c3,.cards.c2,.passi{grid-template-columns:1fr}}

/* confronto */
.contrast{margin-top:40px;background:linear-gradient(135deg,rgba(14,124,123,.06),rgba(18,165,148,.06));
  border:1px solid rgba(14,124,123,.18);border-radius:var(--lp-radius);padding:28px 30px;
  display:flex;gap:26px;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center}

/* ---------------------------------------------------------- indice materie */

.tindex{display:flex;flex-direction:column;gap:24px}
.tblock{background:var(--lp-card);border:1px solid var(--lp-line);border-radius:var(--lp-radius);
  box-shadow:var(--lp-shadow);padding:24px 22px 18px}
.tb-testa,.tb-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:14px;
  margin-bottom:10px;border-bottom:1px solid var(--lp-line)}
.tb-testa h3{font-size:var(--fs-h3);font-weight:800;margin:0}
.tb-testa h3 a{color:var(--lp-slate)}
.tb-testa h3 a:hover{color:var(--teal)}
.tb-chip{font-size:var(--fs-sm);font-weight:600;color:var(--teal);background:rgba(14,124,123,.08);
  padding:5px 12px;border-radius:999px;line-height:1.3}
.tb-chip.gratis{color:var(--ink);background:var(--orange)}
.tb-conta,.tb-count{margin-left:auto;font-size:var(--fs-sm);color:var(--lp-muted);font-weight:600;white-space:nowrap}
.tb-sotto{margin:0 2px 12px;color:var(--lp-muted);font-size:var(--fs-sm)}
.tb-lista,.tb-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 14px}
.tb-lista li{min-width:0}
.ti{display:flex;align-items:center;gap:10px;min-height:52px;padding:9px 11px;border-radius:12px;
  border:1px solid transparent;transition:background .2s ease,border-color .2s ease,transform .2s ease}
a.ti:hover{background:rgba(14,124,123,.05);border-color:rgba(14,124,123,.22);transform:translateY(-2px)}
a.ti:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.ti-n{flex:none;font-size:var(--fs-sm);font-weight:700;letter-spacing:.02em;color:var(--teal-deep);
  background:rgba(14,124,123,.10);padding:4px 9px;border-radius:8px;white-space:nowrap}
.ti-t{flex:1;min-width:0;font-size:var(--fs-sm);font-weight:600;color:#34464f;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
a.ti:hover .ti-t{color:var(--lp-slate)}
.tb-azioni{display:flex;gap:10px;flex-wrap:wrap;padding:16px 2px 4px;border-top:1px solid var(--lp-line);margin-top:12px}
.tb-azioni .btn{padding:11px 20px;font-size:var(--fs-sm)}
@media(max-width:960px){.tb-lista,.tb-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .tblock{padding:20px 16px 14px}
  .tb-testa{gap:8px}
  .tb-testa h3{font-size:var(--fs-h3);width:100%}
  .tb-conta{margin-left:0}
  .tb-lista,.tb-list{grid-template-columns:1fr;gap:0}
  .ti{border-radius:0;padding:13px 2px;border:0;border-bottom:1px solid var(--lp-line);min-height:56px}
  .tb-lista li:last-child .ti{border-bottom:0}
  a.ti:hover{transform:none;background:transparent;border-color:var(--lp-line)}
  a.ti:active{background:rgba(14,124,123,.06)}
  .ti-t{-webkit-line-clamp:3;font-size:var(--fs-sm)}
  .tb-azioni .btn{width:100%}
}

/* card materia (griglia alternativa) */
.materie{display:grid;gap:22px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){.materie{grid-template-columns:1fr}}
.materia{background:var(--lp-card);border:1px solid var(--lp-line);border-radius:var(--lp-radius);
  padding:30px 26px;box-shadow:var(--lp-shadow);display:flex;flex-direction:column;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s}
.materia:hover{transform:translateY(-6px);box-shadow:var(--lp-shadow-lg);border-color:rgba(14,124,123,.25)}
.materia .riga{display:flex;gap:12px;align-items:flex-start;margin-bottom:8px}
.materia h3{margin:0 0 4px;font-size:var(--fs-h3);font-weight:800}
.materia h3 a{color:var(--lp-slate)}
.materia h3 a:hover{color:var(--teal)}
.materia .sotto{color:var(--lp-muted);font-size:var(--fs-sm);margin:0 0 12px}
.materia .meta{display:flex;gap:8px 18px;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--lp-muted);
  margin:0 0 18px;padding-top:12px;border-top:1px solid var(--lp-line)}
.materia .azioni{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.materia .azioni .btn{padding:11px 20px;font-size:var(--fs-sm)}
.badge{display:inline-block;font-size:var(--fs-sm);font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;white-space:nowrap;flex:none}
.badge-gratis{background:var(--orange);color:var(--ink);box-shadow:0 4px 10px -4px rgba(239,138,60,.8)}
.badge-pass{background:rgba(14,124,123,.10);color:var(--teal-deep)}

/* ------------------------------------------------------------------ prezzi */

.prezzi,.price-grid{display:grid;gap:20px;align-items:stretch;justify-content:center;
  grid-template-columns:repeat(3,minmax(0,1fr));max-width:1000px;margin-left:auto;margin-right:auto}
.piano,.price{background:var(--lp-card);border:1px solid var(--lp-line);border-radius:var(--lp-radius);
  padding:32px 28px;box-shadow:var(--lp-shadow);display:flex;flex-direction:column;position:relative;
  transition:transform .28s ease,box-shadow .28s ease}
.piano:hover,.price:hover{transform:translateY(-6px);box-shadow:var(--lp-shadow-lg)}
.piano.evidenza,.price.featured{border:2px solid var(--teal);box-shadow:var(--lp-shadow-lg)}
.piano .etichetta,.price .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--orange);color:var(--ink);font-size:var(--fs-sm);font-weight:700;letter-spacing:.04em;
  padding:6px 16px;border-radius:999px;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 6px 16px -6px rgba(239,138,60,.7)}
.piano h3{font-size:var(--fs-h3);font-weight:800;margin:6px 0 12px}
.piano .prezzo{display:block;font-size:var(--fs-h1);font-weight:900;letter-spacing:-.03em;
  color:var(--lp-slate);line-height:1;margin-bottom:6px;white-space:nowrap}
.piano .prezzo small{display:table;font-size:var(--fs-sm);font-weight:600;color:var(--teal);
  background:rgba(14,124,123,.08);padding:4px 12px;border-radius:999px;letter-spacing:0;
  line-height:1.4;white-space:normal;margin-top:14px;margin-bottom:4px}
.piano ul,.price ul{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:11px}
.piano li,.price li{font-size:var(--fs-base);display:flex;gap:10px;align-items:flex-start;color:#34464f}
.piano li::before{content:"";flex:none;width:16px;height:16px;margin-top:3px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230e7c7b%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.5%2012.6l4.8%204.8L19.5%206.6%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.piano .btn,.price .btn{width:100%;margin-top:auto}
.aiuto{font-size:var(--fs-sm);color:var(--lp-muted);max-width:74ch}
@media(max-width:1200px){
  .prezzi,.price-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:700px}
  .prezzi>:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 10px);justify-self:center}
}
@media(max-width:960px){
  .prezzi,.price-grid{grid-template-columns:minmax(0,1fr);max-width:440px;margin:0 auto}
  .prezzi>:last-child:nth-child(odd){grid-column:auto;width:auto;justify-self:stretch}
}

/* --------------------------------------------------------------- fascia CTA */

.fascia,.cta-band{position:relative;overflow:hidden;color:#fff;text-align:center;padding:80px 0;
  background:linear-gradient(135deg,#0B6363,#0E7C7B 55%,#12A594)}
.fascia .trama,.cta-band .mesh{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.fascia .trama i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;mix-blend-mode:screen;display:block}
.fascia .trama i:nth-child(1){width:420px;height:420px;background:#19E3C4;top:-140px;left:-90px}
.fascia .trama i:nth-child(2){width:460px;height:460px;background:#0A8F87;bottom:-200px;right:-90px}
.fascia .trama i:nth-child(3){width:320px;height:320px;background:#3DF0D0;top:44%;left:52%;opacity:.32}
.fascia h2,.cta-band h2{font-size:var(--fs-h2);font-weight:800;line-height:1.15;position:relative;z-index:2;color:#fff;margin:0}
.fascia p,.cta-band p{position:relative;z-index:2;color:rgba(255,255,255,.9);font-size:var(--fs-base);margin:16px auto 30px;max-width:560px}
.fascia .btn,.cta-band .btn{position:relative;z-index:2;margin:0 6px 8px}

/* banda informativa scura (compatibilità) */
.dati{background:var(--teal-deep);color:#fff;border-bottom:3px solid var(--orange)}
.dati-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 12px;padding:26px 0}
@media(min-width:760px){.dati-grid{grid-template-columns:repeat(4,1fr)}}
.dato .n{font-size:var(--fs-lg);font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1}
.dato .l{font-size:var(--fs-sm);color:rgba(255,255,255,.8);margin-top:6px}

/* banda promozionale in linea (stile lpg-card) */
.lpg-card{display:flex;align-items:center;gap:28px;background:linear-gradient(100deg,#0B6363,#0E7C7B 62%);
  color:#fff;border-radius:20px;padding:32px 36px;box-shadow:0 24px 50px -30px rgba(11,99,99,.7)}
.lpg-card .occhiello,.lpg-card .eyebrow{color:#FFD9B8;background:rgba(255,255,255,.14)}
.lpg-txt{flex:1;min-width:0}
.lpg-card h2{font-size:var(--fs-h2);line-height:1.15;margin:6px 0 8px;color:#fff}
.lpg-card p{color:#CFE6E5;margin:0;font-size:var(--fs-base);line-height:1.55}
.lpg-card .btn{flex:none}
@media(max-width:760px){.lpg-card{flex-direction:column;align-items:flex-start;padding:26px 22px}
  .lpg-card .btn{width:100%}}

/* --------------------------------------------------------------------- FAQ */

.faq{background:var(--lp-card);border:1px solid var(--lp-line);border-radius:14px;margin-bottom:14px;
  overflow:hidden;transition:box-shadow .25s,border-color .25s}
.faq[open]{box-shadow:var(--lp-shadow);border-color:rgba(14,124,123,.25)}
.faq summary{cursor:pointer;padding:22px 24px;font-size:var(--fs-base);font-weight:600;color:var(--lp-slate);
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:24px;height:24px;transition:transform .3s;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230e7c7b%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22%2F%3E%3C%2Fsvg%3E") center/20px no-repeat}
.faq[open] summary::after{transform:rotate(135deg)}
.faq .risposta{padding:0 24px 22px;color:var(--lp-muted);font-size:var(--fs-base)}
.faq .risposta p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- articoli */

.prosa{max-width:74ch}
.prosa h2{margin-top:1.9em;font-size:var(--fs-h2);font-weight:800;color:var(--blue-dark);line-height:1.15}
.prosa>h2:first-child{margin-top:0}
.prosa h3{margin-top:1.5em;font-size:var(--fs-h3);color:var(--ink)}
.prosa p,.prosa li{color:var(--ink);font-size:var(--fs-base);line-height:1.68}
.prosa li{margin-bottom:.4em}
.prosa table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:var(--fs-sm);display:block;overflow-x:auto}
.prosa th{text-align:left;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  border-bottom:1px solid var(--line);padding:0 10px 8px}
.prosa td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.prosa blockquote{margin:1.4em 0;padding:14px 20px;border-left:4px solid var(--accent);
  background:#fff8f1;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.aggiornato{font-size:var(--fs-sm);color:var(--muted);background:var(--teal-soft);border-radius:var(--radius-sm);
  padding:10px 14px;display:inline-block}

.art-griglia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.art-card{display:flex;flex-direction:column;align-items:flex-start;background:var(--lp-card);
  border:1px solid var(--lp-line);border-radius:var(--lp-radius);padding:28px 26px 24px;
  box-shadow:var(--lp-shadow);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.art-card:hover{transform:translateY(-6px);box-shadow:var(--lp-shadow-lg);border-color:rgba(14,124,123,.25)}
.art-card .occhiello{font-size:var(--fs-sm);letter-spacing:.09em;padding:5px 12px}
.art-card h2{font-size:var(--fs-h2);font-weight:800;line-height:1.15;margin:16px 0 0}.art-card h3{font-size:var(--fs-h3);font-weight:800;line-height:1.15;margin:16px 0 0}
.art-card h2 a,.art-card h3 a{color:var(--lp-slate);transition:color .2s}
.art-card h2 a:hover,.art-card h3 a:hover{color:var(--teal)}
.art-card p{margin:10px 0 20px;color:var(--lp-muted);font-size:var(--fs-base);line-height:1.6;max-width:70ch;flex:1 0 auto}
.art-piu{display:inline-flex;align-items:center;gap:7px;margin-top:auto;color:var(--teal);font-weight:700;
  font-size:var(--fs-sm);white-space:nowrap;border-bottom:1px solid rgba(14,124,123,.35);
  padding-bottom:3px;transition:color .2s ease,border-color .2s ease}
.art-piu::after{content:"→";font-size:var(--fs-base);line-height:1;transition:transform .2s ease}
.art-piu:hover,.art-card:hover .art-piu{color:var(--teal-deep);border-color:var(--teal-deep)}
.art-piu:hover::after,.art-card:hover .art-piu::after{transform:translateX(3px)}
.art-piu:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px}
@media(max-width:1000px){.art-griglia{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .art-card{padding:24px 22px 20px}}
@media(max-width:700px){.art-griglia{grid-template-columns:minmax(0,1fr);gap:16px}
  .art-card{padding:22px 20px 20px}
  .art-card h3{font-size:var(--fs-h3);margin-top:14px}
  .art-card p{font-size:var(--fs-base);margin:9px 0 18px}}

.briciole{font-size:var(--fs-sm);color:var(--muted);padding:0 0 4px;margin:0 0 18px}
.briciole a{color:var(--muted)}
.briciole a:hover{color:var(--blue)}
.briciole span{margin:0 6px;color:var(--muted)}
.briciole span[aria-current]{color:var(--ink);font-weight:600;margin:0}

/* fonti normative */
.fonti{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.fonti li{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:14px 18px}
.fonti strong{display:block;color:var(--blue-dark);font-size:var(--fs-base);margin-bottom:3px}
.fonti span{color:var(--muted);font-size:var(--fs-sm)}

.glossario{list-style:none;padding:0;margin:0;display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){.glossario{grid-template-columns:1fr}}
.glossario li{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:16px 18px;box-shadow:var(--shadow)}
.glossario dt,.glossario strong{display:block;font-weight:800;color:var(--blue-dark);margin-bottom:4px}
.glossario p{margin:0;color:var(--muted);font-size:var(--fs-base)}

/* ------------------------------------------------------------ pagine legali */

.legal-doc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--pad-lg);box-shadow:var(--shadow);margin:8px 0 36px;max-width:820px}
.legal-doc h1{margin:8px 0 12px;font-size:var(--fs-h1);line-height:1.15}
.legal-doc .prosa{max-width:none}
.legal-doc .prosa h2{font-size:var(--fs-h2);margin:26px 0 10px;color:var(--blue-dark)}
.legal-doc .prosa p,.legal-doc .prosa li{font-size:var(--fs-base);line-height:1.65}
.legal-doc .aggiornato{margin-bottom:20px}
.legal-doc .dati-venditore{font-size:var(--fs-sm);color:var(--muted);line-height:1.55}
@media(max-width:640px){.legal-doc{padding:24px 18px}}

/* blocco editoriale in card (seo-section) */
.seo-section{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:var(--pad-lg);margin:22px 0}
.seo-section h2{margin:0 0 12px;font-size:var(--fs-h2);line-height:1.15;color:var(--blue-dark)}
.seo-section p{margin:0 0 12px;max-width:72ch}
.seo-section p:last-child{margin-bottom:0}

/* --------------------------------------------------------------------- quiz */

.quiz-testata{background:var(--grad-deep);color:#fff;padding:16px 0;position:sticky;top:72px;z-index:20}
.quiz-testata .riga{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.quiz-testata .titolo{font-weight:800;font-size:var(--fs-base);letter-spacing:-.01em}
.quiz-testata .contatore{margin-left:auto;font-size:var(--fs-sm);color:rgba(255,255,255,.82);font-variant-numeric:tabular-nums}
.quiz-testata .timer{font-variant-numeric:tabular-nums;font-weight:800;background:rgba(255,255,255,.16);
  padding:5px 12px;border-radius:999px;font-size:var(--fs-sm)}
.quiz-testata .timer.allarme{background:var(--red-soft);color:var(--red)}
.barra{height:9px;background:rgba(255,255,255,.2);border-radius:999px;overflow:hidden;margin-top:12px}
.barra i{display:block;height:100%;background:var(--orange);width:0;transition:width .35s ease;border-radius:999px}

.domanda{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:var(--pad);
  box-shadow:var(--shadow);animation:qfade .35s ease}
@keyframes qfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.domanda .argomento{font-weight:800;color:var(--blue);font-size:var(--fs-sm);letter-spacing:.08em;
  text-transform:uppercase;margin:0 0 6px}
.domanda .testo{font-weight:600;font-size:var(--fs-base);line-height:1.45;margin:0 0 14px}
.opzioni{display:flex;flex-direction:column}
.opz{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;background:#fff;
  border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:13px 15px;margin:7px 0;
  cursor:pointer;font-size:var(--fs-base);font-family:inherit;color:var(--ink);white-space:normal;
  overflow-wrap:break-word;transition:border-color .15s,background .15s,transform .1s}
.opz:hover:not([disabled]){border-color:var(--blue);background:var(--teal-soft)}
.opz:active:not([disabled]){transform:scale(.995)}
.opz[disabled]{cursor:default}
.opz .lettera{flex:none;width:26px;height:26px;border-radius:8px;background:var(--teal-soft);
  color:var(--blue-dark);font-weight:800;font-size:var(--fs-sm);display:grid;place-items:center}
.opz.scelta{border-color:var(--blue);background:var(--teal-soft);font-weight:600}
.opz.giusta{border-color:var(--green);background:var(--green-soft);font-weight:600}
.opz.giusta .lettera{background:var(--green);color:#fff}
.opz.sbagliata,.opz.tua{border-color:var(--red);background:var(--red-soft)}
.opz.sbagliata .lettera,.opz.tua .lettera{background:var(--red);color:#fff}
.esito{margin-top:10px;padding:13px 15px;border-radius:var(--radius-sm);background:var(--teal-soft);font-size:var(--fs-sm)}
.esito.ok{background:var(--green-soft)}
.esito.ko{background:var(--red-soft)}
.esito .verdetto{font-weight:800;margin-bottom:8px;color:var(--blue-dark)}
.esito.ko .verdetto{color:#a33}
.esito .spiegazione{font-size:var(--fs-sm);color:var(--ink);margin-bottom:10px}
.esito .fonte{font-size:var(--fs-sm);color:var(--muted);margin:0}
.esito .fonte .et{display:inline-block;font-size:var(--fs-xs);font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:#fff;background:var(--grad);padding:3px 10px;border-radius:999px;margin-right:8px}
.quiz-azioni{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.punteggio{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:var(--pad-lg);
  box-shadow:var(--shadow-lg);text-align:center;margin:20px 0 22px}
.punteggio .cifra{font-size:var(--fs-h1);font-weight:900;color:var(--blue);margin:6px 0;letter-spacing:-.03em;line-height:1}
.punteggio .su{color:var(--muted);font-size:var(--fs-base);margin-top:6px}
.riepilogo{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
.riepilogo>div{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:var(--pad-sm);
  text-align:center;box-shadow:var(--shadow)}
.riepilogo>div.ok{border-color:rgba(18,165,148,.35);background:var(--green-soft)}
.riepilogo>div.ko{border-color:rgba(214,69,69,.3);background:var(--red-soft)}
.riepilogo .n{font-size:var(--fs-h2);font-weight:900;letter-spacing:-.02em;color:var(--blue);line-height:1.1}
.riepilogo>div.ok .n{color:var(--blue-dark)}
.riepilogo>div.ko .n{color:var(--red)}
.riepilogo .l{font-size:var(--fs-sm);color:var(--muted);margin-top:4px}
.rivedi{margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--pad-sm);box-shadow:var(--shadow)}
.rivedi .d{font-weight:700;margin-bottom:10px;line-height:1.4}
.rivedi .tua{color:var(--red);font-size:var(--fs-sm);margin-bottom:4px}
.rivedi .giusta{color:var(--blue-dark);font-weight:600;font-size:var(--fs-sm);margin-bottom:8px}
.rivedi .sp{color:var(--ink);font-size:var(--fs-sm);margin-bottom:8px}
.rivedi .fonte{font-size:var(--fs-sm);color:var(--muted)}
.mini-barra{height:9px;background:var(--line);border-radius:999px;overflow:hidden}
.mini-barra i{display:block;height:100%;background:var(--grad);border-radius:999px}
.tab{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.tab th{text-align:left;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  padding:0 10px 8px;border-bottom:1px solid var(--line)}
.tab td{padding:10px;border-bottom:1px solid var(--line)}
.tab td.n{text-align:right;font-variant-numeric:tabular-nums}

/* KPI / statistiche area personale */
.kpis{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:12px;margin:14px 0}
@media(min-width:820px){.kpis{grid-template-columns:repeat(4,1fr)}}
.cifra{font-size:var(--fs-h2);font-weight:900;color:var(--blue);letter-spacing:-.02em;line-height:1}
.sp{display:flex;gap:8px 20px;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--muted)}

/* --------------------------------------------------------------- form/avvisi */

.card-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:var(--pad-lg);
  box-shadow:var(--shadow-lg)}
.card-form h1{margin:0 0 16px;font-size:var(--fs-h1)}.card-form h2{margin:0 0 16px;font-size:var(--fs-h2)}
label{display:block;margin-bottom:14px;font-weight:600;font-size:var(--fs-sm);color:var(--ink)}
label .d{display:block;font-weight:400;color:var(--muted);font-size:var(--fs-sm);margin-top:3px}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],select,textarea{
  width:100%;max-width:100%;font-family:inherit;font-size:var(--fs-base);padding:12px 13px;
  border:1.5px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--ink);
  margin-top:6px;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,124,123,.12)}
.avviso{padding:11px 14px;border-radius:var(--radius-sm);margin-bottom:14px;font-size:var(--fs-sm);font-weight:600}
.avviso-ok{background:var(--green-soft);color:var(--blue-dark)}
.avviso-err{background:var(--red-soft);color:var(--red)}
.avviso-info{background:var(--teal-soft);color:var(--blue-dark)}
.avviso-oro{background:#fff3e8;color:var(--accent-dark)}/* ------------------------------------------------------------------- footer */




.site-footer{background:#0d1519;color:#c3cfd6;padding:60px 0 34px;font-size:var(--fs-sm)}
.site-footer a{color:inherit}
.site-footer a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px}
.site-footer h3{color:#fff;font-size:var(--fs-h3);font-weight:800;margin:0 0 16px;letter-spacing:.03em;text-transform:none}.site-footer h4{color:#fff;font-size:var(--fs-sm);font-weight:700;margin:0 0 16px;letter-spacing:.03em;text-transform:none}
.site-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.site-footer .marchio{display:inline-flex;align-items:center;line-height:0}
.site-footer .marchio img{height:32px;width:auto;display:block}
.site-footer .blurb{color:#8ea0aa;margin-top:16px;max-width:320px;font-size:var(--fs-sm)}
.foot-nota{border-top:1px solid #22303a;padding-top:24px;color:#6e828d;font-size:var(--fs-xs);line-height:1.6}
.foot-nota p{margin:0 0 8px}
.foot-nota p:last-child{margin:0}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:28px}}

/* -------------------------------------------------------------- animazioni */

.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

@media(prefers-reduced-motion:reduce){
  *,html{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}

/* ---------------------------------------------------------------------------
   Checkout in una schermata, pagina /concorsi, barra d'acquisto pegajosa.
   --------------------------------------------------------------------------- */
.incluso{list-style:none;padding:0;margin:0 0 18px}
.incluso li{position:relative;padding:0 0 0 28px;margin-bottom:9px;color:var(--muted);font-size:var(--fs-base)}
.incluso li::before{content:"";position:absolute;left:4px;top:7px;width:12px;height:7px;
  border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg)}
.riga-totale{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--line);padding-top:14px;margin:0 0 6px;font-size:var(--fs-base)}
.riga-totale strong{font-size:var(--fs-lg);letter-spacing:-.02em;color:var(--teal)}
label.spunta{display:flex;gap:11px;align-items:flex-start;font-weight:400;font-size:var(--fs-sm);
  line-height:1.5;color:var(--muted);margin:16px 0 18px}
label.spunta input{width:auto;flex:none;margin:3px 0 0}/* «Leggi le condizioni»: chiusa di default ma leggibile prima di pagare. */



.condizioni-acquisto>summary{font-size:var(--fs-sm);font-weight:600;color:var(--teal)}
.condizioni-acquisto p{font-size:var(--fs-sm);line-height:1.55}

.conc-griglia{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.conc-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;
  display:flex;flex-direction:column}
.conc-card h3{margin:0 0 6px;font-size:var(--fs-h3);line-height:1.15}
.conc-meta{margin:0 0 10px;font-size:var(--fs-sm);font-weight:600;color:var(--teal)}
.conc-card p{color:var(--muted);font-size:var(--fs-base);margin:0 0 12px}
.conc-stato{font-size:var(--fs-sm);color:var(--muted);background:var(--bg);border-radius:10px;
  padding:9px 12px;margin-top:auto !important}
.conc-card .art-piu{margin-top:14px}

/* Barra d'acquisto persistente: piena larghezza sul telefono, scheda discreta
   in basso a destra sul desktop. La riserva di spazio in fondo alla pagina è
   permanente (body.con-barra) così la barra non copre mai i tasti di risposta
   di un quiz quando compare. */
.barra-acquisto{position:fixed;left:0;right:0;bottom:0;z-index:45;background:#fff;
  border-top:1px solid var(--line);box-shadow:0 -10px 30px -20px rgba(15,42,51,.55);
  padding:10px max(14px,env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom))}
.barra-acquisto[hidden]{display:none}
.ba-in{max-width:var(--lp-maxw);margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:14px}
.ba-txt{margin:0;font-size:var(--fs-sm);line-height:1.25;color:var(--muted);min-width:0}
.ba-txt strong{display:block;color:var(--ink);font-size:var(--fs-sm);font-weight:800}
.barra-acquisto .btn{flex:none;padding:12px 20px;font-size:var(--fs-sm)}
@media(min-width:761px){
  .barra-acquisto{left:auto;right:22px;bottom:22px;width:min(360px,calc(100vw - 44px));
    border:1px solid var(--line);border-radius:16px;padding:14px 18px;
    box-shadow:var(--shadow-lg)}
  .ba-in{gap:12px}
}
@media(max-width:760px){body.con-barra{padding-bottom:98px}}

/* ------------------------------------------------- barra di urgenza (lancio) */
/* Banda ARANCIO nel flusso, in cima al documento: la stessa dei siti gemelli
   (oposics.cat, opositasanitat.com). Sta nel flusso, quindi scorre via con la
   pagina e lascia la testata sola incollata in alto; chiuderla la toglie dal
   flusso e non resta nessuno spazio vuoto, nessun position:fixed, nessun
   padding di compensazione sul body, nessuno scatto al primo scroll.
   Contrasto: ardesia su arancio 5,8:1, cifre su capsula bianca 13:1.
   L'arancio è l'unico fondo che non si confonde con il teal dell'hero che le
   sta subito sotto. */
.urgenza{position:relative;z-index:2;background:var(--orange);color:var(--lp-slate);
  box-shadow:inset 0 -1px 0 rgba(224,123,44,.85)}
.urgenza[hidden]{display:none}
.urg-in{max-width:var(--lp-maxw);margin:0 auto;position:relative;
  padding:0 40px 0 max(16px,env(safe-area-inset-left))}
/* Tutta la banda è il link verso il listino; la croce sta FUORI dall'ancora,
   quindi chiudere non naviga. */
.urg-link{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:8px var(--urg-gap);min-height:var(--urg-h);padding:9px 0;
  color:var(--lp-slate);text-decoration:none;text-align:center}
.urg-link:hover{color:var(--lp-slate)}
.urg-link:hover .uq{transform:translateY(-1px)}
.urg-link:focus-visible{outline:2px solid var(--lp-slate);outline-offset:-4px;border-radius:10px}
.urg-testo{margin:0;font-size:var(--fs-sm);line-height:1.35;min-width:0}
.urg-testo strong{font-weight:800}
.urg-lungo{opacity:.88}
.urg-breve{display:none;opacity:.88}
/* Tre capsule bianche: giorni, ore, minuti. Cifre a larghezza fissa, così
   quando il conto scatta la riga non si sposta di un pixel. */
.urg-conto{margin:0;display:inline-flex;align-items:stretch;gap:var(--urg-cap-gap);flex:none}
.uq{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:var(--urg-cap-w);padding:3px 9px;border-radius:var(--radius-xs);
  background:rgba(255,255,255,.95);color:var(--lp-slate);
  box-shadow:0 2px 8px -4px rgba(15,42,51,.55);transition:transform .2s ease}
.uq b{font-size:var(--fs-base);font-weight:800;line-height:1.15;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.uq i{font-style:normal;font-size:var(--fs-sm);letter-spacing:.07em;text-transform:uppercase;
  opacity:.76;line-height:1.25;font-weight:600}
.urg-vai{display:none}
.urg-x{position:absolute;right:2px;top:50%;transform:translateY(-50%);z-index:1;
  background:none;border:0;color:rgba(31,42,51,.55);font-size:var(--fs-lg);line-height:1;
  cursor:pointer;padding:8px 11px;border-radius:8px;transition:color .2s ease,background .2s ease}
.urg-x:hover{color:var(--lp-slate);background:rgba(255,255,255,.28)}
[id]{scroll-margin-top:88px}
/* Telefono: la frase lunga lascia il posto a quella breve e le capsule si
   stringono. Testo e capsule restano sulla stessa riga fin dove ci stanno;
   più sotto vanno a capo, centrate, senza mai coprire la croce. */
@media(max-width:760px){
  :root{--urg-gap:14px;--urg-testo:13px;--urg-cap-w:44px;--urg-cifra:15px;--urg-cap-gap:6px}
  .urg-lungo{display:none}
  .urg-breve{display:inline}
}
@media(max-width:430px){
  :root{--urg-gap:10px;--urg-testo:12.5px;--urg-cap-w:40px;--urg-cifra:14px;--urg-et:9px;--urg-cap-gap:5px}
  .urg-in{padding-right:34px}
  .uq{padding:2px 7px}
}
@media(min-width:1024px){
  .urg-in{padding-right:44px}
  .urg-vai{display:inline-flex;align-items:center;gap:6px;flex:none;white-space:nowrap;
    font-weight:800;font-size:var(--fs-sm);color:var(--lp-slate);
    border-bottom:1px solid rgba(31,42,51,.35);padding-bottom:2px}
  .urg-link:hover .urg-vai{border-color:var(--lp-slate)}
}
@media print{.urgenza{display:none}}

/* ------------------------------------------------------------ ancora prezzo */
.ancora{display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ancora .prima{color:var(--muted);text-decoration:line-through;font-weight:600;font-size:var(--fs-sm)}
.ancora .ora{color:var(--ink);font-weight:900;letter-spacing:-.02em}
.ancora .et{font-style:normal;font-size:var(--fs-sm);font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:#fff;background:var(--orange);padding:3px 9px;border-radius:999px;
  white-space:nowrap}
.ancora.riga{gap:6px;font-size:var(--fs-sm)}
.ancora.riga .et{display:none}
.ancora.grande{gap:10px}
.ancora.grande .ora{font-size:var(--fs-h1);line-height:1}
.ancora.grande .prima{font-size:var(--fs-lg)}
.ancora.chiara .ora{color:#fff}
.ancora.chiara .prima{color:rgba(255,255,255,.7)}
@media(max-width:430px){.ancora.grande .ora{font-size:var(--fs-h1)}}

/* -------------------------------------------------- offerta dentro le pagine */
.offerta{background:linear-gradient(135deg,rgba(14,124,123,.07),rgba(18,165,148,.07));
  border:1px solid rgba(14,124,123,.24);border-radius:var(--lp-radius);padding:20px 22px;margin-top:14px}
.offerta .prezzo-riga{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.offerta .valore{margin:0 0 14px;color:var(--muted);font-size:var(--fs-sm);line-height:1.5}
.offerta .btn{width:100%}
.offerta .tutti{display:block;text-align:center;margin-top:10px;font-size:var(--fs-sm);color:var(--muted)}
.offerta .tutti:hover{color:var(--teal)}
@media(min-width:761px){.offerta .btn{width:auto}}

/* offerta scura, per le schermate di risultato */
.offerta-scura{background:var(--grad-deep);color:#fff;border-radius:var(--radius);
  padding:var(--pad-lg);box-shadow:var(--shadow-lg);margin-bottom:18px}
.offerta-scura h2{margin:0 0 8px;color:#fff;font-size:var(--fs-h2);letter-spacing:-.02em}
.offerta-scura p{color:rgba(255,255,255,.88);margin:0 0 16px;font-size:var(--fs-base)}
.offerta-scura .prezzo-riga{margin-bottom:14px}
.offerta-scura .btn-oro{width:100%;font-size:var(--fs-base);padding:16px 24px}
.offerta-scura .sotto{display:block;text-align:center;margin-top:12px;font-size:var(--fs-sm);
  color:rgba(255,255,255,.75)}
.offerta-scura .sotto a{color:#fff;text-decoration:underline}
.offerta-scura .ps-riga{margin:10px 0 0;text-align:center;font-size:var(--fs-sm);
  color:rgba(255,255,255,.7)}
.offerta-scura .ps-riga strong{color:#fff}
@media(min-width:761px){.offerta-scura .btn-oro{width:auto;min-width:320px}}

/* titolo «il tuo punto debole» nella schermata di risultato */
.punto-debole{background:#fff;border:1px solid var(--line);border-left:5px solid var(--orange);
  border-radius:var(--radius);padding:18px 20px;margin:0 0 18px;box-shadow:var(--shadow)}
.punto-debole h2{margin:0 0 6px;font-size:var(--fs-h2);line-height:1.15}
.punto-debole p{margin:0;color:var(--muted);font-size:var(--fs-base)}
.secondaria{border:1px dashed var(--line);box-shadow:none;background:#fff}
.secondaria h3{margin:0 0 6px;font-size:var(--fs-h3)}/* ------------------------------------------------------- scadenze concorsi */



.conc-scadenza{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);font-weight:700;
  background:rgba(14,124,123,.09);color:var(--teal-deep);border-radius:999px;padding:5px 12px;
  margin:0 0 10px}
.conc-scadenza.urgente{background:var(--red-soft);color:var(--red)}
.conc-fonte{display:block;font-size:var(--fs-xs);color:var(--muted);margin:0 0 10px}

.cta-prezzo{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between;
  background:linear-gradient(135deg,rgba(14,124,123,.07),rgba(18,165,148,.07));
  border:1px solid rgba(14,124,123,.22);border-radius:16px;padding:18px 22px;margin:0 0 26px}
.cta-prezzo p{margin:0;font-size:var(--fs-base);color:var(--muted)}
.cta-prezzo p strong{color:var(--ink)}

/* ------------------------------------------------ test diagnostico gratuito */
.dg-testa{background:var(--grad-deep);color:#fff;padding:14px 18px;border-radius:var(--radius) var(--radius) 0 0}
.dg-riga{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dg-materia{font-weight:800;font-size:var(--fs-base);letter-spacing:-.01em}
.dg-conta{margin-left:auto;font-size:var(--fs-sm);color:rgba(255,255,255,.82);font-variant-numeric:tabular-nums}
.dg-testa .barra{margin-top:10px}
.dg-testa + .domanda{border-radius:0 0 var(--radius) var(--radius);border-top:0}
.dg-bars{display:grid;gap:13px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--pad);box-shadow:var(--shadow);margin-bottom:22px}
.dg-bar-testa{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:var(--fs-sm);margin-bottom:6px}
.dg-bar-testa span{font-weight:600;color:var(--blue-dark)}
.dg-bar-testa b{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:800}
.dg-bar-pista{height:12px;background:#EDF1F4;border-radius:999px;overflow:hidden}
.dg-bar-pista i{display:block;height:100%;border-radius:999px;transition:width .5s ease}
.dg-bar-pista i.alta{background:var(--green)}
.dg-bar-pista i.media{background:var(--orange)}
.dg-bar-pista i.bassa{background:var(--red)}
.dg-bar-pista i.vuota{background:#CBD5DD}
.cta-diag{background:var(--grad-deep);color:#fff;border-radius:var(--radius);padding:var(--pad-lg);
  box-shadow:var(--shadow-lg);margin-bottom:22px}
.cta-diag h2{margin:0 0 10px;color:#fff;font-size:var(--fs-h2);letter-spacing:-.02em}
.cta-diag p{color:rgba(255,255,255,.88);margin:0 0 16px}
.cta-diag .hero-cta{margin:0}
#dg-salva-box{margin-bottom:22px}

/* Hero a due CTA: affiancate, impilate a piena larghezza sul telefono. */
@media(max-width:560px){
  :root{--fs-display:34px;--fs-h1:30px;--fs-h2:26px;--fs-h3:19px;--fs-lg:18px}
  .hero-cta{flex-direction:column;align-items:stretch;gap:12px}
  .hero-cta .btn{width:100%}
  .fascia .btn{display:block;margin:0 0 10px}
}
.fiducia .ancora .et{display:none}
.fiducia .ancora{gap:9px}
.fiducia .ancora .prima{font-size:var(--fs-base)}
.conc-scadenza.chiusa{background:var(--bg);color:var(--muted);font-weight:600}

/* -------------------------------- listino a quattro piani (con le banche) */
/* Listino a tre piani: usa tutta la larghezza che il contenitore concede. */
.prezzi.tre{grid-template-columns:repeat(3,minmax(0,1fr));max-width:var(--lp-maxw)}
@media(max-width:1120px){.prezzi.tre{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}}
@media(max-width:960px){.prezzi.tre{grid-template-columns:minmax(0,1fr);max-width:440px}}
.prezzi.tre .piano{padding:30px 26px}
.prezzi.tre .prezzo{font-size:var(--fs-h1)}
.prezzi.quattro{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1180px}
@media(max-width:1120px){.prezzi.quattro{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}}
@media(max-width:960px){.prezzi.quattro{grid-template-columns:minmax(0,1fr);max-width:440px}}
.prezzi.quattro .piano{padding:28px 22px}
.prezzi.quattro .prezzo{font-size:var(--fs-h2)}

/* riga d'offerta della singola banca dati, sotto il listino */
.riga-banca{max-width:1000px;margin:26px auto 0;background:var(--lp-card);border:1px solid var(--lp-line);
  border-radius:var(--lp-radius);padding:22px 24px;display:flex;gap:18px;align-items:center;
  flex-wrap:wrap;justify-content:space-between;box-shadow:var(--lp-shadow)}
.riga-banca h3{margin:0 0 4px;font-size:var(--fs-h3)}
.riga-banca p{margin:0;color:var(--muted);font-size:var(--fs-base);line-height:1.5;max-width:64ch}
.riga-banca .rb-prezzo{font-weight:900;font-size:var(--fs-h2);letter-spacing:-.02em;white-space:nowrap}
@media(max-width:640px){.riga-banca{flex-direction:column;align-items:stretch}.riga-banca .btn{width:100%}}

/* card della banca dati nell'indice dei concorsi e in home */
.banche-lista{max-width:820px;margin:0 auto var(--bc-coda);
  display:flex;flex-direction:column;gap:var(--bc-gap)}
.banche-lista.staccata{margin-bottom:max(46px,var(--bc-coda))}
.banca-card{background:var(--lp-card);border:2px solid var(--teal);border-radius:var(--lp-radius);
  padding:var(--bc-pad);box-shadow:var(--lp-shadow-lg);position:relative}
.banca-card .bc-et{display:inline-block;background:var(--teal);color:#fff;font-size:var(--fs-sm);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:4px 11px;border-radius:999px;
  margin-bottom:var(--bc-rit)}
.banca-card h3{margin:0 0 var(--bc-rit);font-size:var(--fs-h3);line-height:1.15}
.banca-card .bc-meta{color:var(--muted);font-size:var(--fs-sm);margin:0 0 var(--bc-rit)}
.banca-card .conc-scadenza{margin:var(--bc-blocco) 0;padding:7px 14px;line-height:1.4}
.banca-card > p:not([class]){margin:0 0 var(--bc-blocco)}
.banca-card .bc-num{display:flex;gap:var(--bc-num-riga) var(--bc-num-col);flex-wrap:wrap;
  margin:var(--bc-blocco) 0}
.banca-card .bc-num div{min-width:88px}
.banca-card .bc-num b{display:block;font-size:var(--fs-lg);font-weight:900;letter-spacing:-.02em;line-height:1.1;
  margin-bottom:var(--bc-num-et)}
.banca-card .bc-num span{font-size:var(--fs-sm);color:var(--muted);line-height:1.35}
.banca-card .bc-azioni{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:520px){.banca-card .bc-azioni .btn{width:100%}}

/* -------------------------------------------- cattura contatto e consenso */
.risultato-azioni{display:grid;gap:18px;margin:22px 0 8px}
@media(min-width:861px){.risultato-azioni{grid-template-columns:1.05fr .95fr;align-items:start}}
.cattura{background:#fff;border:2px solid var(--teal);border-radius:var(--radius);
  padding:var(--pad-lg);box-shadow:var(--shadow-lg)}
.cattura h2{text-wrap:balance;margin:0 0 8px;font-size:var(--fs-h2);letter-spacing:-.02em}
.cattura .cat-sotto{text-wrap:pretty;margin:0 0 16px;color:var(--muted);font-size:var(--fs-sm);line-height:1.55}
.cattura label{display:block;font-weight:700;font-size:var(--fs-sm);margin:0 0 6px}
.cattura input[type=email]{width:100%;font:inherit;padding:13px 14px;border:1px solid #B9C4D2;
  border-radius:8px;background:#fff;margin-bottom:14px}
.cattura input[type=email]:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.cattura .spunta{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:var(--fs-sm);
  line-height:1.5;color:var(--muted);margin-bottom:16px}
.cattura .spunta input{width:18px;height:18px;flex:0 0 auto;margin-top:2px}
.cattura .aiuto{margin:12px 0 0;font-size:var(--fs-sm)}
.risultato-azioni .offerta-scura{margin-bottom:0}

/* banner del consenso ai cookie
   Primo livello COMPATTO: una frase sola, il link alla cookie policy e i
   comandi. Tutto il resto, paragrafo esteso, informativa privacy, i tre
   interruttori con le loro descrizioni, sta dietro «Personalizza» e si apre
   nello stesso riquadro, che allora si alza fino a 80vh, scorre al suo interno
   e tiene i bottoni inchiodati in fondo: non può mai diventare più alto dello
   schermo con i comandi fuori vista.
   Accetta e Rifiuta restano affiancati, stessa taglia e stessa area
   cliccabile, ma non lo stesso peso: il primo è pieno nel colore del marchio,
   il secondo è grigio neutro. «Personalizza» è il collegamento accanto. */
.cc{position:fixed;inset:auto 0 0 0;z-index:9000;background:#fff;border-top:2px solid var(--teal);
  box-shadow:0 -10px 40px rgba(15,35,55,.18)}
/* ATTENZIONE, è il difetto che rendeva enorme il banner sul telefono: una
   regola d'autore che imposta `display` (qui .cc-dettaglio e .cc-scelte sono
   griglie) BATTE la regola del browser `[hidden]{display:none}`, quindi
   l'attributo hidden non nascondeva nulla e il pannello granulare era sempre
   in vista. Questa riga rimette l'attributo al comando dentro tutto il
   banner. */
.cc[hidden],.cc [hidden]{display:none !important}
.cc-in{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:10px;
  padding:12px 14px}
/* Seconda dichiarazione, non sostitutiva: dove env() non esiste resta valida
   quella sopra e la striscia conserva comunque i suoi margini interni. */
.cc-in{padding:12px max(14px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
.cc-corpo{display:grid;gap:8px;min-height:0}
.cc-tit{display:none;margin:0;font-weight:800;font-size:var(--fs-base);color:var(--ink)}
.cc-esteso .cc-tit{display:block}
.cc-esteso .cc-breve{display:none}
.cc-txt{margin:0;font-size:var(--fs-sm);line-height:1.45;color:var(--muted)}
.cc-txt a{color:var(--teal);text-decoration:underline}
.cc-dettaglio{display:grid;gap:12px;outline:none}
.cc-esteso .cc-txt{font-size:var(--fs-sm);line-height:1.55}
.cc-scelte{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.cc-voce{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}
.cc-voce input{width:18px;height:18px;flex:0 0 auto;margin-top:2px}
.cc-voce b{color:var(--ink)}
.cc-fissa{opacity:.75}
/* Griglia, non flex-wrap: la riga dei comandi è decisa in partenza, coppia a
   sinistra, «Personalizza» a destra, e non dipende da quanto misura
   un'etichetta. Nessuna sorpresa fra un telefono e l'altro. */
.cc-bottoni{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;
  align-items:center;flex:0 0 auto}
/* Gerarchia, non ostacolo: «Accetta tutti» è il comando principale, pieno nel
   colore del marchio e primo nella riga; «Solo necessari» è un bottone neutro
   grigio, peso visivo minore. Stanno però nella stessa griglia a due colonne
   uguali, nello stesso primo livello, con la stessa altezza minima di 44px:
   rifiutare resta un solo clic e la stessa area da colpire. */
.cc-coppia{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:0}
.cc-btn{font:inherit;font-weight:800;font-size:var(--fs-sm);padding:10px 10px;border-radius:10px;
  border:2px solid var(--teal);background:#fff;color:var(--teal);cursor:pointer;
  min-height:44px;line-height:1.2;text-align:center}
.cc-btn:hover{background:rgba(14,124,123,.08)}
.cc-btn-si{background:var(--orange);color:var(--ink);border-color:var(--orange);box-shadow:0 2px 10px rgba(239,138,60,.25)}
.cc-btn-si:hover{background:var(--orange-hover);border-color:var(--orange-hover)}
.cc-btn-no{background:transparent;border-color:#d3dae0;color:var(--muted);font-weight:600}
.cc-btn-no:hover{background:#f2f5f7;border-color:#c2ccd4;color:var(--ink)}
.cc-link{font:inherit;font-size:var(--fs-sm);font-weight:700;background:none;border:0;color:var(--muted);
  text-decoration:underline;cursor:pointer;padding:8px 4px;min-height:44px;white-space:nowrap}
.cc-link:hover{color:var(--teal)}
.cc-salva{grid-column:1/-1}
/* Sotto i 375px le etichette non ci stanno più in una riga sola con i valori
   normali: si stringono padding e corpo, non si toglie nulla. */
@media(max-width:374px){
  .cc-bottoni{gap:5px}
  .cc-coppia{gap:6px}
  .cc-btn{font-size:var(--fs-sm);padding:10px 8px}
  .cc-link{font-size:var(--fs-sm);padding:8px 0}
}

/* Pannello di dettaglio: tetto d'altezza + scorrimento interno, bottoni fissi. */
.cc-esteso .cc-in{max-height:80vh;padding-bottom:0}
.cc-esteso .cc-corpo{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;padding-bottom:4px}
.cc-esteso .cc-bottoni{grid-template-columns:1fr;border-top:1px solid var(--line);
  padding:10px 0 12px;background:#fff;margin-top:0}
.cc-esteso .cc-bottoni{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.cc-esteso .cc-salva{grid-column:auto}
@supports(height:80dvh){ .cc-esteso .cc-in{max-height:80dvh} }

/* Finché la scelta non è presa la pagina si accorcia dell'altezza reale della
   striscia (misurata dallo script), così nessun campo o bottone resta sotto:
   vale anche per il checkout con la tastiera aperta. La barra d'acquisto si
   fa da parte: due strisce fisse in fondo non ci stanno. */
/* Lo spazio in più lo prende il piè di pagina, non il body: così resta scuro
   fino in fondo e sotto non compare la striscia chiara della pagina. */
body.cc-aperto .site-footer{padding-bottom:calc(34px + var(--cc-h,160px) + 16px)}
body.cc-aperto{scroll-padding-bottom:calc(var(--cc-h,160px) + 16px)}
html:has(body.cc-aperto){scroll-padding-bottom:calc(var(--cc-h,160px) + 16px)}
body.cc-aperto .barra-acquisto{display:none}

@media(min-width:861px){
  .cc-in{padding:14px 24px calc(14px + env(safe-area-inset-bottom));
    flex-direction:row;align-items:center;gap:18px}
  .cc-corpo{flex:1 1 auto}
  .cc-bottoni{grid-template-columns:auto auto;justify-content:flex-end;align-items:center}
  .cc-coppia{gap:10px}
  .cc-btn{min-width:160px;font-size:var(--fs-sm);padding:11px 18px}
  .cc-link{font-size:var(--fs-sm)}
  .cc-esteso .cc-in{flex-direction:column;align-items:stretch;gap:12px;padding-bottom:0}
  .cc-esteso .cc-bottoni{grid-template-columns:auto auto;justify-content:flex-end}
  .cc-esteso .cc-salva{grid-column:auto}
}/* ------------------------------------------- riga «non è la banca dati ufficiale»
   Sta in cima a ogni pagina di concorso, prima del sottotitolo, e deve essere
   letta: in italiano concorsuale «banca dati» significa l'archivio ufficiale
   della PA, e un compratore che si aspetta quello chiede il rimborso. */



.non-ufficiale{
  display:block;max-width:640px;margin:0 0 16px;padding:12px 16px;
  font-size:var(--fs-sm);line-height:1.5;font-weight:600;
  border-radius:12px;border:1px solid rgba(14,124,123,.28);
  background:rgba(14,124,123,.07);color:var(--ink)}
.non-ufficiale strong{font-weight:800}
.hero .non-ufficiale{
  border-color:rgba(255,255,255,.42);background:rgba(0,0,0,.24);color:#fff}
.hero .non-ufficiale strong{color:#FFD9A8}
.non-ufficiale.ufficiale-si{border-color:rgba(23,155,90,.4);background:rgba(23,155,90,.09)}
@media(max-width:760px){.non-ufficiale{font-size:var(--fs-sm);padding:11px 14px}}

/* ------------------------------------------- home compatta (audit 10/9/2026)
   La home misurava 26.700 px sul telefono: fra chi arriva e il listino c'erano
   otto materie con l'elenco completo degli argomenti, cinque schede di
   concorso lunghe e il listino a quattro piani ripetuto per intero. Il
   contenuto non è stato tolto: sta dove si va a cercarlo (/materie, /concorsi,
   /prezzi), e in home resta quello che serve a decidere. */
.tblock.compatto{padding:18px 20px 14px}
.tblock.compatto .tb-sotto{margin:0 0 4px}
.tblock.compatto .tb-azioni{padding:12px 2px 2px;margin-top:10px}
.banca-card.compatta{padding:24px}
.banca-card.compatta h3{font-size:var(--fs-h3)}
.banca-card.compatta .bc-num{gap:var(--bc-num-riga) var(--bc-num-col);margin:var(--bc-blocco) 0}
.banca-card.compatta .bc-num b{font-size:var(--fs-lg)}

/* Telefono: le schede erano attaccate fra loro e il contenuto interno stretto
   (segnalazione del 11/9/2026, iPhone ~390px). Stessi token, valori più larghi;
   i numeri vanno a due per riga così ogni coppia numero/etichetta ha il suo
   spazio, e la coda della lista tiene la barra d'acquisto lontana dal testo. */
@media(max-width:640px){
  :root{--bc-gap:30px;--bc-pad:26px 20px;--bc-rit:14px;--bc-blocco:24px;
    --bc-num-riga:22px;--bc-num-col:22px;--bc-num-et:6px;--bc-coda:34px}
  .banca-card.compatta{padding:var(--bc-pad)}
  .banca-card .bc-num div{flex:1 1 calc(50% - var(--bc-num-col) / 2);min-width:0}
}

/* listino breve: una riga per piano, prezzo e bottone sulla stessa riga */
.listino-breve{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.lb-riga{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--lp-card);border:1px solid var(--lp-line);border-radius:14px;padding:16px 20px}
.lb-riga.evidenza{border-color:var(--teal);border-width:2px;box-shadow:var(--lp-shadow)}
.lb-testo{flex:1 1 260px;min-width:0}
.lb-riga h3{margin:0 0 3px;font-size:var(--fs-h3);line-height:1.15}
.lb-riga p{margin:0;font-size:var(--fs-base);color:var(--muted);line-height:1.45}
.lb-prezzo{font-size:var(--fs-lg);font-weight:900;letter-spacing:-.02em;flex:none}
.lb-riga .btn{padding:11px 20px;font-size:var(--fs-sm);flex:none}
@media(max-width:560px){
  .lb-riga{gap:10px;padding:15px 16px}
  .lb-prezzo{font-size:var(--fs-lg)}
  .lb-riga .btn{width:100%}
}

/* =============================================================================
   RIFINITURA VISIVA, pareggio con il sito gemello (10/9/2026)
   Nessun contenuto cambia: qui si allineano scala tipografica, ritmo, ombre,
   stati (hover/focus/active), tabelle, legali e densità sul telefono ai
   valori del gemello. Il blocco sta in fondo apposta: a parità di specificità
   vince l'ultimo, quindi queste regole rifiniscono quelle di sopra senza
   doverle riscrivere.
   ============================================================================= */

:root{--ink-2:#34464F;--line-2:#EDF1F4}/* --- 1. corpo del testo -----------------------------------------------------
   16px secchi contro i 16,5 del gemello: mezzo punto per riga, su una pagina
   di testo si vede tutto insieme. */



body{font-size:var(--fs-base);text-rendering:optimizeLegibility}
@media(max-width:760px){body{font-size:var(--fs-base)}}
::selection{background:rgba(14,124,123,.16)}
input,select,textarea,button{accent-color:var(--teal)}/* --- 2. scala tipografica delle pagine senza vetrina ------------------------
   Checkout, area personale, risultati, legali e schermate di quiz usavano
   h1 a 30px e h2 a 21,6px, mentre la vetrina arriva a 60 e 42: erano due siti
   diversi. La vetrina non si tocca (.hero h1, .sez-titolo, .fascia h2 sono
   selettori di classe e restano davanti). */



h1{font-size:var(--fs-h1);font-weight:900;letter-spacing:-.025em}
h2{font-size:var(--fs-h2);letter-spacing:-.022em}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-base)}

/* --- 3. stati dei collegamenti ---------------------------------------------
   Fuori dalle card nessun link cambiava aspetto al passaggio del mouse. */
a:hover{color:var(--teal-deep)}
main p a:not(.btn),main li a:not(.btn):not(.ti),.faq .risposta a,.legal-doc a,.aiuto a{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(14,124,123,.4)}
main p a:not(.btn):hover,main li a:not(.btn):not(.ti):hover,.legal-doc a:hover{
  text-decoration-color:currentColor}
.site-footer a:hover{text-decoration:underline;text-underline-offset:3px}
.briciole a:hover{color:var(--teal);text-decoration:underline;text-underline-offset:3px}

/* --- 4. prosa: misura, corpo, ritmo ----------------------------------------
   74ch a 16px erano righe da oltre 90 caratteri sul portatile. Il gemello sta
   a 17,5px su 760px di colonna: qui 17px e 68ch, dentro la forbice 65-70. */
.prosa{max-width:68ch;line-height:1.72}
.pagina-inps .prosa{max-width:none}
.pagina-inps .sez-testa,.pagina-inps .non-ufficiale,.pagina-inps .hero .sottotitolo{max-width:none}
body.pagina-inps .hero:not(.compatto) h1{font-size:clamp(2.2rem,3.4vw,3rem)}
.prosa p,.prosa li{font-size:var(--fs-base);line-height:1.72;color:var(--ink-2)}
.prosa strong{color:var(--ink)}
.prosa h2{font-size:var(--fs-h2);margin-top:1.75em;line-height:1.15}
.prosa h3{font-size:var(--fs-h3);margin-top:1.5em}
.prosa ul,.prosa ol{padding-left:22px;margin:0 0 1.1em}
.prosa li{margin-bottom:.42em}
.prosa blockquote{border-left-width:4px;font-size:var(--fs-base);line-height:1.65}
.aiuto{max-width:68ch}
@media(max-width:760px){
  .prosa p,.prosa li{font-size:var(--fs-base)}
  .prosa h2{margin-top:1.45em}
  .prosa h3{margin-top:1.25em}
}/* --- 5. tabelle -------------------------------------------------------------
   Erano righe nude con una linea sotto. Il gemello le serve come scheda:
   bordo, angoli, testata in maiuscoletto su fondo chiaro. */



.prosa table,.tab{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-base);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;box-shadow:var(--lp-shadow);display:table;margin:1.5em 0}
.prosa th,.tab th{background:var(--line-2);color:var(--muted);font-size:var(--fs-sm);font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;padding:11px 14px;border-bottom:1px solid var(--line);
  text-align:left}
.prosa td,.tab td{padding:12px 14px;border-bottom:1px solid var(--line-2);vertical-align:top}
.prosa tbody tr:last-child td,.tab tbody tr:last-child td{border-bottom:0}
.prosa td b,.prosa td strong,.tab td b{color:var(--ink)}
@media(max-width:760px){
  .prosa table,.tab{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .prosa th,.tab th,.prosa td,.tab td{padding:10px 12px;white-space:nowrap}
}

/* --- 6. bottoni: altezza unica e stati completi ----------------------------
   Le altezze ballavano fra 40 e 52px a seconda della pagina e mancavano
   :active e :focus-visible. */
.btn{min-height:48px;line-height:1.2}
.btn.piccolo,.site-header .btn,.tb-azioni .btn,.materia .azioni .btn,.lb-riga .btn,.barra-acquisto .btn{min-height:44px}
.btn:active:not([disabled]){transform:translateY(0);box-shadow:0 4px 12px -6px rgba(15,42,51,.5)}
.btn:focus-visible{outline:2px solid var(--teal-deep);outline-offset:3px}
.btn-oro:focus-visible,.btn-primary:focus-visible{outline-color:var(--orange-hover)}
.btn-chiaro:focus-visible,.hero .btn:focus-visible,.fascia .btn:focus-visible{outline-color:#fff}
@media(max-width:760px){.btn{white-space:normal;text-align:center;padding:13px 20px}}

/* --- 7. sezioni: stacco netto fra le fasce --------------------------------- */
section.bianca{border-top:1px solid var(--lp-line);border-bottom:1px solid var(--lp-line)}
.fascia + section.bianca{border-top-color:transparent}
section.bianca:has(+ .fascia){border-bottom-color:transparent}

/* --- 8. schede dei concorsi «in lavorazione» -------------------------------
   Erano le uniche card del sito senza ombra e senza reazione al passaggio del
   mouse: piatte accanto a tutte le altre. */
.conc-card{position:relative;overflow:hidden;padding:26px 24px;box-shadow:var(--lp-shadow);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.conc-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--teal-deep),var(--teal-bright))}
.conc-card:hover{transform:translateY(-6px);box-shadow:var(--lp-shadow-lg);border-color:rgba(14,124,123,.25)}
.conc-card h3{font-size:var(--fs-h3);font-weight:800;margin-top:4px}
.conc-stato{border:1px solid var(--lp-line)}/* --- 9. riga di rassicurazione con le spunte -------------------------------
   Nell'hero del test diagnostico erano quattro <span> nudi, testo bianco senza
   forma. Il gemello le serve come elenco spuntato. */



.fiducia>span{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);
  color:rgba(255,255,255,.92);line-height:1.35}
.fiducia>span::before{content:"✓";flex:none;font-weight:900;color:#fff}

/* --- 10. elenchi a scheda (fonti, glossario) ------------------------------- */
.fonti li{box-shadow:var(--lp-shadow);transition:transform .2s ease,box-shadow .2s ease}
.fonti li:hover{transform:translateY(-2px);box-shadow:var(--lp-shadow-lg)}
.glossario li{transition:transform .2s ease,box-shadow .2s ease}
.glossario li:hover{transform:translateY(-2px);box-shadow:var(--lp-shadow-lg)}

/* --- 11. pagine legali ------------------------------------------------------
   Testo a 15,2px dentro una scheda senza gerarchia: era la pagina che sembrava
   più economica di tutte. Ora ogni articolo è separato da un filo, il titolo
   respira e il corpo è lo stesso della prosa. */
.legal-doc{padding:38px 42px;max-width:860px}
.legal-doc h1{font-size:var(--fs-h1);margin:0 0 18px;letter-spacing:-.025em}
.legal-doc .prosa p,.legal-doc .prosa li{font-size:var(--fs-base);line-height:1.7}
.legal-doc .prosa h2{font-size:var(--fs-h2);margin:36px 0 12px;padding-top:22px;
  border-top:1px solid var(--line);letter-spacing:-.01em}
.legal-doc .prosa>h2:first-child{border-top:0;padding-top:0;margin-top:0}
.legal-doc .aggiornato{margin-bottom:24px;font-size:var(--fs-sm);line-height:1.55}
.legal-doc .dati-venditore{background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:14px 16px;font-size:var(--fs-sm)}
@media(max-width:640px){
  .legal-doc{padding:26px 20px}
  .legal-doc .prosa h2{margin:28px 0 10px;padding-top:18px}
}

/* --- 12. FAQ: reazione al passaggio del mouse ------------------------------ */
.faq:hover{border-color:rgba(14,124,123,.3)}
.faq summary{transition:color .2s ease}
.faq summary:hover{color:var(--teal-deep)}
.faq summary:focus-visible{outline:2px solid var(--teal);outline-offset:-3px;border-radius:12px}/* --- 13. checkout: l'elenco di ciò che è incluso ---------------------------
   Era testo grigio a 15px con un segno di spunta disegnato a bordi. Ora è la
   stessa spunta in capsula del listino: stessa famiglia, più leggibile. */



.incluso li{padding:0 0 0 32px;margin-bottom:11px;color:var(--ink-2);font-size:var(--fs-base);line-height:1.5}
.incluso li::before{content:"";position:absolute;left:0;top:0;width:21px;height:21px;
  border:0;border-radius:50%;transform:none;
  background:rgba(14,124,123,.10) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230e7c7b%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.5%2012.6l4.8%204.8L19.5%206.6%22%2F%3E%3C%2Fsvg%3E") center/12px no-repeat}
.riga-totale{font-size:var(--fs-md);padding-top:16px}
.riga-totale strong{font-size:var(--fs-h2)}
.card-form{padding:32px 30px}
@media(max-width:640px){.card-form{padding:24px 20px}}

/* --- 14. quiz: bersagli e messa a fuoco ------------------------------------ */
.opz{min-height:54px}
.opz:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.opz:hover:not([disabled]){box-shadow:0 6px 18px -12px rgba(15,42,51,.5)}
.quiz-testata{box-shadow:0 10px 24px -22px rgba(15,42,51,.9)}/* --- 15. moduli: campi allineati al gemello -------------------------------- */



input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],select,textarea{
  font-size:var(--fs-base);padding:13px 14px}
label{font-size:var(--fs-sm)}
label .d{font-size:var(--fs-sm)}

/* --- 16. piè di pagina: due colonne sul telefono, non una colonna infinita -- */
@media(max-width:960px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr;gap:32px 26px}}
@media(max-width:760px){
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 22px}
  .site-footer .blurb{grid-column:1/-1;max-width:none}
  .site-footer .marchio{display:block}
}
@media(max-width:430px){.foot-grid{grid-template-columns:minmax(0,1fr);gap:24px}}
.site-footer ul li{line-height:1.45}

/* --- 17. densità sul telefono ---------------------------------------------
   Il gemello stringe le sezioni a 52px e le card a 22/18: sotto i 640px il
   sito respirava troppo e ogni schermata conteneva mezza scheda. */
@media(max-width:640px){
  section{padding:56px 0}
  section.stretta{padding:40px 0}
  .sez-testa,.sec-head{margin-bottom:30px}
  .card,.passo,.materia,.art-card,.piano,.conc-card{padding:22px 18px}
  .cards,.passi,.materie,.art-griglia,.conc-griglia{gap:16px}
  .cards .ic{width:42px;height:42px;margin-bottom:14px}
  .lpg-card{padding:24px 20px}
}

/* --- 18. indice della guida ------------------------------------------------
   Il sommario in cima all'articolo lungo, come sul gemello: due colonne dove
   c'è spazio, una sola sul telefono. */
.indice{background:#fff;border:1px solid var(--lp-line);border-radius:var(--lp-radius);
  box-shadow:var(--lp-shadow);padding:20px 24px;margin:0 0 30px}
.indice-tit{margin:0 0 12px;font-size:var(--fs-sm);font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.indice ol{margin:0;padding-left:20px;color:var(--ink-2)}
.indice li{margin-bottom:8px;line-height:1.45;font-size:var(--fs-base)}
.indice li::marker{color:var(--teal);font-weight:700}
.indice a{color:var(--ink-2)}
.indice a:hover{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px}
@media(min-width:820px){.indice ol{columns:2;column-gap:36px}.indice li{break-inside:avoid}}
@media(max-width:640px){.indice{padding:18px 18px;margin-bottom:24px}}

/* --- 19. cifre dell'hero: larghezza fissa mentre salgono ------------------- */
.fiducia .n,.trust .stat .num,.banca-card .bc-num b,.dato .n{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* =============================================================================
   PAREGGIO ESTETICO CON I SITI GEMELLI: 11/9/2026
   oposics.cat e opositasanitat.com hanno la stessa famiglia visiva (teal +
   arancio) e alcuni pezzi che qui mancavano: hero con micro-garanzie e
   metriche separate da una linea, bande CTA a tutta larghezza, «come
   funziona» in tre passi con icona, schede di prezzo con tabella di dati.
   Il blocco sta in fondo apposta: a parità di specificità vince l'ultimo,
   quindi rifinisce quello di sopra senza doverlo riscrivere. Tutti i valori
   escono dai token dichiarati in :root.
   ============================================================================= */

/* --- A. hero: fondo più scuro, rejilla più leggibile ------------------------
   Il gradiente arrivava a #12A594 e sotto le macchie sfocate in «screen» il
   titolo perdeva contrasto. Fondo teal profondo, macchie più discrete e
   griglia un filo più netta: la texture si vede, il testo pesa di più. */
.hero{background:var(--grad-hero)}
.hero .trama i,.hero .blob{opacity:.34;filter:blur(72px)}
.hero .trama i:nth-child(3){opacity:.24}
.hero .griglia{background-image:
  linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px)}
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 90% 65% at 12% 0%,rgba(0,0,0,.22),transparent 62%)}
.hero .eyebrow,.hero .occhiello{border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.13);backdrop-filter:blur(6px);letter-spacing:.1em}
/* Il punto finale in arancio: firma tipografica dei due gemelli. */
.hero h1 .punto{color:var(--orange)}

/* micro-garanzie sotto i bottoni dell'hero */
.garanzie{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:9px 26px}
.garanzie li{display:flex;align-items:center;gap:9px;font-size:var(--fs-sm);font-weight:600;
  line-height:1.35;color:rgba(255,255,255,.93)}
.garanzie li::before{content:"";flex:none;width:16px;height:16px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23EF8A3C%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.5%2012.6l4.8%204.8L19.5%206.6%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}

/* metriche dell'hero separate da una linea fina, come su oposics */
@media(min-width:761px){
  .fiducia,.trust{gap:0;margin-top:46px;padding-top:28px}
  .fiducia .dato,.trust .stat{flex:1 1 0;min-width:0;padding:2px 28px;
    border-left:1px solid rgba(255,255,255,.18)}
  .fiducia .dato:first-child,.trust .stat:first-child{padding-left:0;border-left:0}
  .fiducia .dato:last-child,.trust .stat:last-child{padding-right:0}
  .fiducia .n,.trust .stat .num{font-size:var(--fs-h2)}
  .fiducia .l,.trust .stat .lbl{max-width:none;font-size:var(--fs-sm)}
}
@media(max-width:760px){
  .fiducia,.trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;
    margin-top:32px;padding-top:22px}
  .fiducia .l,.trust .stat .lbl{max-width:none}
  .garanzie{flex-direction:column;gap:8px 18px;margin-top:22px}
  .garanzie li{font-size:var(--fs-sm)}
}
@media(max-width:430px){
  .fiducia .n,.trust .stat .num{font-size:var(--fs-lg)}
  .fiducia .l,.trust .stat .lbl{font-size:var(--fs-sm)}
}

/* --- B. bande CTA a tutta larghezza ----------------------------------------
   Rettangolo teal pieno a raggio grande, occhiello chiaro, titolo bianco, una
   riga di testo e il bottone arancio a destra. Sul telefono si impila e il
   bottone prende tutta la larghezza. */
.bande{display:flex;flex-direction:column;gap:18px}
.lpg-card{border-radius:var(--radius-lg);gap:32px;
  background:linear-gradient(104deg,var(--teal-deep),var(--teal) 64%);
  box-shadow:0 26px 54px -32px rgba(11,99,99,.8)}
.lpg-card .occhiello,.lpg-card .eyebrow{color:#FFD9B8;background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.2);margin:0}
.lpg-card h2{font-size:var(--fs-h2);line-height:1.15;margin:12px 0 8px;color:#fff}.lpg-card h3{font-size:var(--fs-h3);line-height:1.15;margin:12px 0 8px;color:#fff}
.lpg-card p{color:#CFE6E5;margin:0;font-size:var(--fs-base);line-height:1.55;max-width:62ch}
.lpg-card .btn{flex:none}
.lpg-card:hover{transform:translateY(-3px);box-shadow:0 32px 62px -30px rgba(11,99,99,.85)}
.lpg-card{transition:transform .28s ease,box-shadow .28s ease}
@media(max-width:760px){
  .lpg-card{gap:20px;border-radius:var(--radius)}
  .lpg-card h2,.lpg-card h3{margin-top:10px}
  .bande{gap:14px}
}/* --- C. «come funziona»: tre passi con icona + scheda larga ----------------- */



.passo-et,.card .step,.card .num{display:block;font-size:var(--fs-sm);font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink);background:var(--orange);margin:0 0 12px}
.card .ic{border-radius:14px;background:var(--teal-soft);color:var(--teal-deep)}
.card.largo{display:flex;align-items:center;gap:22px;flex-wrap:wrap;grid-column:1/-1}
.card.largo .ic{margin-bottom:0}
.card.largo .largo-txt{flex:1 1 260px;min-width:0}
.card.largo h3{margin:0 0 4px}
.card.largo p{font-size:var(--fs-base)}
@media(max-width:520px){.card.largo{gap:16px}}

/* --- D. schede di prezzo in stile opositasanitat ---------------------------
   Tabella di dati con righe etichetta/valore separate da linee fini, prezzo di
   oggi grande in teal con quello successivo barrato accanto, riga del
   pagamento unico, nota sull'aumento, bottone d'acquisto, bottone secondario
   con bordo, tre garanzie con la spunta e un link con la freccia in fondo. */
.piano .p-fatti{display:block;gap:0;list-style:none;margin:0 0 22px;padding:0;
  border-top:1px solid var(--line-2)}
.piano .p-fatti li{display:flex;align-items:baseline;justify-content:space-between;gap:4px 16px;
  flex-wrap:wrap;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:var(--fs-sm);
  color:var(--lp-muted);line-height:1.4}
.piano .p-fatti li::before{content:none}
.piano .p-fatti b{flex:none;margin-left:auto;font-weight:800;color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.p-prezzo{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin:0 0 6px}
.p-ora{font-size:var(--fs-h1);font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--teal)}
.p-poi{font-size:var(--fs-md);font-weight:600;color:var(--muted);text-decoration:line-through;
  text-decoration-thickness:1.5px;text-underline-offset:0}
.p-unico{margin:0 0 10px;font-size:var(--fs-sm);color:var(--muted)}
.p-nota{margin:0 0 20px;font-size:var(--fs-xs);line-height:1.5;color:var(--muted)}
.p-azioni{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.piano .p-azioni .btn{width:100%;margin-top:0}
.p-gar{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.p-gar li{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-sm);line-height:1.4;color:var(--ink-2)}
.p-gar li::before{content:"";flex:none;width:15px;height:15px;margin-top:2px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230e7c7b%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.5%2012.6l4.8%204.8L19.5%206.6%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.piano .p-link{margin:16px 0 0}
@media(min-width:1201px){.prezzi.quattro{max-width:var(--lp-maxw)}}
.piano h3{font-size:var(--fs-h3)}
.piano .p-sotto{margin:0 0 18px;font-size:var(--fs-sm);color:var(--muted);line-height:1.45}
@media(max-width:640px){
  .p-ora{font-size:var(--fs-h2)}
  .piano .p-fatti li{font-size:var(--fs-sm)}
}/* --- E. link di testo con la freccia --------------------------------------- */



.link-freccia{display:inline-flex;align-items:center;gap:7px;color:var(--teal);font-weight:700;
  font-size:var(--fs-sm);border-bottom:1px solid rgba(14,124,123,.35);padding-bottom:3px;
  transition:color .2s ease,border-color .2s ease}
.link-freccia::after{content:"→";font-size:var(--fs-base);line-height:1;transition:transform .2s ease}
.link-freccia:hover{color:var(--teal-deep);border-color:var(--teal-deep)}
.link-freccia:hover::after{transform:translateX(3px)}
.link-freccia:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px}
main p a.link-freccia,main li a.link-freccia{text-decoration:none}

/* --- F. rifiniture comuni ---------------------------------------------------
   Raggi coerenti, ombre pulite (mai grigio sporco: sempre la stessa ardesia
   trasparente) e transizioni corte su tutto ciò che si solleva. */
.faq,.lb-riga,.conc-card,.glossario li{border-radius:var(--radius)}
.lb-riga{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.lb-riga:hover{transform:translateY(-2px);box-shadow:var(--lp-shadow)}
.banca-card{transition:transform .28s ease,box-shadow .28s ease}
.banca-card:hover{transform:translateY(-4px);box-shadow:0 30px 66px -26px rgba(15,42,51,.28)}
.faq summary:hover{color:var(--teal-deep)}

/* --- G. risultato della prova gratuita: una schermata sola -----------------
   Il finale delle 8 domande gratuite non è un pezzo di pagina da scorrere: è
   un pannello che deve stare dentro la finestra, punteggio + valore + prezzo
   + un bottone. Gli scalini --c1/--c2/--c3 li applica public/quiz.js
   misurando l'altezza vera del viewport, così su un telefono basso il
   pannello si stringe invece di tagliarsi. Colori: gli stessi token del
   sito (teal + arancio), nessuno nuovo. */
body.solo-esito .quiz-testata,
body.solo-esito .barra-acquisto{display:none!important}
.esito-nascosto{display:none!important}
.esitofine{max-width:620px;margin:0 auto;background:var(--card);border:2px solid rgba(14,124,123,.28);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:20px 20px 18px;outline:none}
.es-occhiello{margin:0 0 12px;font-size:var(--fs-sm);font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.es-kpi{display:flex;gap:10px;margin:0 0 14px}
.es-kpi>div{flex:1 1 0;min-width:0;background:var(--teal-soft);border:1px solid rgba(14,124,123,.22);
  border-radius:var(--radius-xs);padding:11px 10px;text-align:center}
.es-kpi b{display:block;font-size:var(--fs-h2);line-height:1;font-weight:900;color:var(--teal);letter-spacing:-.03em}
.es-kpi span{display:block;margin-top:4px;font-size:var(--fs-sm);color:var(--muted)}
.es-verdetto{margin:0 0 14px;font-size:var(--fs-base);line-height:1.45;color:var(--ink)}
.es-valore{margin:0 0 8px;font-size:var(--fs-base);line-height:1.4}
.es-punti{list-style:none;margin:0 0 14px;padding:0;border-top:1px solid var(--line)}
.es-punti li{position:relative;padding:7px 2px 7px 24px;border-bottom:1px solid var(--line);
  font-size:var(--fs-base);line-height:1.4;color:var(--muted)}
.es-punti li::before{content:"✓";position:absolute;left:2px;top:6px;color:var(--teal-bright);
  font-weight:900;font-size:var(--fs-sm)}
.es-prezzo{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.esitofine .btn{width:100%;margin:0}
.es-link{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 14px;
  margin:10px 0 0;font-size:var(--fs-sm);color:var(--muted)}
.es-sep{color:var(--line)}
.es-link a,.es-link button{color:var(--teal-deep);font:inherit;background:none;border:0;padding:0;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.es-link button:hover,.es-link a:hover{color:var(--teal)}
.esitofine--c1{padding:15px}
.esitofine--c1 .es-occhiello{margin-bottom:9px}
.esitofine--c1 .es-kpi{margin-bottom:11px}
.esitofine--c1 .es-kpi b{font-size:var(--fs-lg)}
.esitofine--c1 .es-punti li{padding-top:5px;padding-bottom:5px;font-size:var(--fs-base)}
.esitofine--c1 .es-verdetto{margin-bottom:11px;font-size:var(--fs-sm)}
.esitofine--c2 .es-occhiello{font-size:var(--fs-sm);margin-bottom:7px}
.esitofine--c2 .es-kpi>div{padding:8px}
.esitofine--c2 .es-kpi b{font-size:var(--fs-lg)}
.esitofine--c2 .es-verdetto{font-size:var(--fs-sm);margin-bottom:9px}
.esitofine--c2 .es-valore{font-size:var(--fs-sm)}
.esitofine--c2 .es-punti li{font-size:var(--fs-base)}
.esitofine--c2 .btn{padding:13px 18px;font-size:var(--fs-base)}
.esitofine--c3 .es-verdetto{display:none}
.esitofine--c3 .es-occhiello{display:none}
.esitofine--c3 .es-punti li:last-child{display:none}/* Fuori dal pannello adattabile, quindi mai misurata da adatta(): può solo
   allungare lo scroll sotto la schermata, mai romperne l'altezza. */


.ps-riga-quiz{max-width:620px;margin:10px auto 0;text-align:center;font-size:var(--fs-sm);
  color:var(--muted)}
.ps-riga-quiz strong{color:var(--teal)}
body.solo-esito main>section{padding-top:14px!important;padding-bottom:26px!important}
.rivedi.ok{border-color:rgba(18,165,148,.35)}
.rivedi.ok .tua{color:var(--blue-dark);font-weight:600}

/* ------------------------------------------ home mobile, ritmo compatto */
/* Home ~17.100px su 390px di viewport (audit 11/9): qui si accorcia hard,
   senza cambiare il look né togliere sezioni, solo meno aria e schede più
   dense. Tutto scoperto sotto body.pagina-home, quindi non tocca nessun'altra
   pagina (le altre non hanno questa classe sul <body>). */
@media(max-width:760px){
  body.pagina-home .hero{padding:80px 0 30px}
  body.pagina-home .hero.compatto{padding:80px 0 28px}
  body.pagina-home .hero h1{margin:10px 0 8px}
  body.pagina-home .hero-cta{margin-top:16px;gap:10px}
  /* Spuntato "pagamento unico/accesso immediato/fonte normativa" e i quattro
     numeri sono già detti a parole nel sottotitolo e nei bottoni: sul
     telefono restano solo lì, non due volte. */
  body.pagina-home .garanzie,body.pagina-home .fiducia,body.pagina-home .trust{display:none}

  body.pagina-home section{padding:14px 0}
  body.pagina-home section.bianca+section.bianca{padding-top:0}
  body.pagina-home .sez-testa,body.pagina-home .sec-head{margin-bottom:8px}
  body.pagina-home .sez-titolo,body.pagina-home .sec-head h2{margin:5px 0 4px;font-size:var(--fs-h2)}
  body.pagina-home .sez-intro{font-size:var(--fs-sm)}body.pagina-home .sec-head p{font-size:var(--fs-base)}
  /* La riga "non è la banca dati ufficiale" ripete quanto già detto due righe
     sopra nel sez-intro: sul telefono basta una volta (resta per intero sotto
     ogni scheda di concorso, dove conta davvero, su /concorsi/<slug>). */
  body.pagina-home .non-ufficiale{display:none}

  /* schede di concorso in home: via la meta lunga e i quattro numeri, resta
     titolo + scadenza (quando c'è) + un solo bottone. Il dettaglio completo
     sta comunque a un tap su /concorsi/<slug>. */
  body.pagina-home .banche-lista{display:flex;flex-direction:column;gap:12px}
  body.pagina-home .banca-card.compatta{padding:16px 18px}
  body.pagina-home .banca-card.compatta .bc-et{margin-bottom:6px;padding:3px 10px;font-size:var(--fs-sm)}
  body.pagina-home .banca-card.compatta h3{font-size:var(--fs-h3);margin-bottom:4px}
  body.pagina-home .banca-card.compatta .bc-meta,
  body.pagina-home .banca-card.compatta .bc-num{display:none}
  body.pagina-home .banca-card.compatta .conc-scadenza{margin:8px 0;padding:6px 12px;font-size:var(--fs-sm)}
  body.pagina-home .banca-card.compatta .bc-azioni{gap:8px}
  body.pagina-home .banca-card.compatta .bc-azioni .btn:nth-child(n+2){display:none}
  body.pagina-home .banca-card.compatta .bc-azioni .btn{padding:11px 16px;font-size:var(--fs-sm)}

  /* schede di materia in home: via il sottotitolo, chip+conteggio su una
     riga, un solo bottone. */
  body.pagina-home .tindex{gap:10px}
  body.pagina-home .tblock.compatto{padding:14px 16px}
  body.pagina-home .tblock.compatto .tb-testa{padding-bottom:0;margin-bottom:0;border-bottom:0}
  body.pagina-home .tblock.compatto .tb-sotto{display:none}
  body.pagina-home .tblock.compatto .tb-azioni{padding:10px 2px 0;margin-top:8px;border-top:0}
  body.pagina-home .tblock.compatto .tb-azioni .btn:nth-child(n+2){display:none}
  body.pagina-home .tblock.compatto .tb-azioni .btn{padding:11px 16px;font-size:var(--fs-sm)}

  /* le tre terne di card ("come funziona", "perché PassConcorso") e il
     riquadro avanzamento: il titolo dice già la cosa, il paragrafo di
     dettaglio si vede aprendo la pagina collegata, qui via, sul telefono. */
  body.pagina-home .cards{gap:8px}
  body.pagina-home .card{padding:12px 14px}
  body.pagina-home .card .ic{width:30px;height:30px;margin-bottom:6px}
  body.pagina-home .card h3{font-size:var(--fs-h3);margin-bottom:0}
  body.pagina-home .card p{display:none}
  body.pagina-home .card.largo{padding:12px 14px}
  body.pagina-home .card.largo p{display:none}

  /* le due bande promozionali (test gratuito / materia gratis: l'assaggio
     concorso è già coperto dalle schede di concorso qui sopra) */
  body.pagina-home .bande{gap:8px}
  body.pagina-home .lpg-card{padding:14px 14px;gap:6px}
  body.pagina-home .lpg-card h2{margin:2px 0 0;font-size:var(--fs-h2)}body.pagina-home .lpg-card h3{margin:2px 0 0;font-size:var(--fs-h3)}
  body.pagina-home .lpg-card p{display:none}
  body.pagina-home .lpg-card:nth-child(n+3){display:none}

  /* riepilogo prezzi: solo il link a /prezzi resta invariato, si accorcia lo
     spazio intorno */
  body.pagina-home .listino-breve{gap:6px}
  body.pagina-home .lb-riga{padding:10px 12px;gap:8px}
  body.pagina-home .lb-riga p{line-height:1.4;max-height:1.4em;
    display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

  /* guide: card più basse, due righe di descrizione */
  body.pagina-home .art-griglia{gap:8px}
  body.pagina-home .art-card{padding:14px}
  body.pagina-home .art-card p{margin:6px 0 10px;line-height:1.4;max-height:2.8em;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  /* FAQ: righe più basse, meno domande (le altre restano su
     /domande-frequenti, linkata sotto) */
  body.pagina-home .faq{margin-bottom:6px}
  body.pagina-home .faq summary{padding:13px 14px;font-size:var(--fs-sm)}
  body.pagina-home .faq .risposta{padding:0 14px 13px;font-size:var(--fs-sm)}

  /* fascia finale di chiusura */
  body.pagina-home .fascia{padding:0}
  body.pagina-home .fascia p{margin:10px auto 18px}
}

/* ------------------------- pagina del test gratuito, telefono */
/* Dal 18/9/2026 le inserzioni atterrano qui e non più in home, e il bottone
   d'acquisto deve essere visibile senza scorrere. Sotto i 760px l'hero si
   accorcia: meno aria, coda del sottotitolo via, e i due bottoni impilati
   (test prima, acquisto sotto) entrano in un viewport da 640px. Tutto
   scoperto da body.pagina-diagnosi: nessun'altra pagina ha questa classe. */
.hero .hero-aiuto{color:rgba(255,255,255,.72);margin:14px 0 0;max-width:560px}
@media(max-width:760px){
  /* 80px in alto e non meno: su hero scuro la testata ha margin-bottom:-72px
     e sta SOPRA l'hero, quindi sotto i 72px coprirebbe l'occhiello. */
  body.pagina-diagnosi .hero.compatto{padding:80px 0 30px}
  body.pagina-diagnosi .hero h1{font-size:var(--fs-h1);margin:6px 0 10px}
  body.pagina-diagnosi .hero .sottotitolo{font-size:var(--fs-lg)}
  body.pagina-diagnosi .solo-largo{display:none}
  body.pagina-diagnosi .hero-cta{margin-top:18px}
  body.pagina-diagnosi .hero .hero-aiuto{margin-top:10px;font-size:var(--fs-sm)}
  body.pagina-diagnosi .fiducia{margin-top:20px}
}

.cattura .spunta span{text-wrap:pretty}

/* Price comparison keeps the source readable on the teal hero. */
.confronto-corso{margin-top:16px}
.hero #fonte-prezzo-corso,.hero #fonte-prezzo-corso a,.hero .confronto-corso a{color:inherit}
.hero .hero-cta .btn{white-space:nowrap}
@media(max-width:420px){.hero .hero-cta .btn{padding-left:10px;padding-right:10px;font-size:var(--fs-sm)}}

/* Shared heading roles at every viewport. */
h1{font-weight:900}
h2,h3{font-weight:800}
.hero:not(.compatto) h1{font-size:var(--fs-display)}
body.pagina-diagnosi .hero h1{font-size:var(--fs-h1)}
.btn,.cc-btn{font-weight:700;line-height:1.2}

.domanda h3.testo{font-size:var(--fs-h3);font-weight:800;line-height:1.15}