/* =====================================================================
   HPVerso — foglio di stile condiviso
   Struttura pensata per diventare un layout Blade:
   .site-header / .journey / .site-footer sono identici su ogni pagina
   e diventeranno partial. Il tema colore cambia via body[data-theme].
   ===================================================================== */

/* ---------------- FONT (auto-ospitato, nessuna CDN) ----------------
   Poppins, SIL Open Font License 1.1 — vedi assets/fonts/OFL.txt.
   Sottoinsiemi latin e latin-ext: con unicode-range il browser scarica
   solo quello che serve alla pagina (~8 KB per peso).
   Pesi in uso: 400 testo, 600 grassetti leggeri, 700 e 800 titoli;
   600 corsivo solo per il fumetto "Chiedi a Neil" in home. */
@font-face{
  font-family:"Poppins";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/poppins-400-normal-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:"Poppins";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/poppins-400-normal-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Poppins";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("fonts/poppins-600-normal-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:"Poppins";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("fonts/poppins-600-normal-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Poppins";
  font-style:italic;
  font-weight:600;
  font-display:swap;
  src:url("fonts/poppins-600-italic-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:"Poppins";
  font-style:italic;
  font-weight:600;
  font-display:swap;
  src:url("fonts/poppins-600-italic-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Poppins";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("fonts/poppins-700-normal-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:"Poppins";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("fonts/poppins-700-normal-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Poppins";
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url("fonts/poppins-800-normal-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:"Poppins";
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url("fonts/poppins-800-normal-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{
  --text:#1f2442;
  --muted:#5b5f7a;
  --line:#e6ebff;
  --white:#ffffff;
  --radius:18px;
  --footer-bar:#901de0;
  /* Margine laterale della pagina (richiesta del 01/10, segnalazione del
     cliente a ~600 px): 16 px a 390, poi cresce con la finestra fino a 48.
     Il contenuto a desktop resta largo 1140 px come prima: il massimo di
     .wrap e' calcolato sul margine, cosi' a 1280 e 1440 non cambia niente. */
  --margine-pagina:clamp(16px,4vw,48px);
  --larghezza-contenuto:1140px;
  /* L'ingombro del pulsante flottante di Neil (81 px + 22 dal bordo): lo
     spazio in fondo alla pagina perche' non copra niente, applicato solo
     dove serve (sotto gli 830 px, vedi .site-footer nella media query). */
  --ingombro-neil:103px;
  /* Richiesta del 30/09 (Lo.Li. Pharma): spazio sopra e sotto i pulsanti CTA
     dentro i box, uguale ovunque. Sotto, si misura dal pulsante al bordo del
     box: il padding del box ne fa parte (vedi .panel > .btn-row:last-child). */
  --spazio-cta:2rem;
  /* Richiesta del 01/10: le icone accanto ai titoli sono un po' piu' piccole
     del testo (0,85 della sua altezza) e si regolano da qui, in un punto solo. */
  --icona-titolo:.85em;
}

/* ---------------- TEMI PER PIANETA ---------------- */
body[data-theme="blu"]{
  --theme:#006ebb;
  --theme-dark:#12507f;
  --accent:#006ebb;
  --theme-soft:#e6f1f8;
}
body[data-theme="rosa"]{
  --theme:#88a8d9;
  --theme-dark:#35619b;
  --accent:#88a8d9;
  --theme-soft:#f2f5fb;
}
body[data-theme="viola"]{
  --theme:#901de0;
  --theme-dark:#521fa8;
  --accent:#901de0;
  --theme-soft:#f4e9fc;
}
body[data-theme="arancio"]{
  --theme:#ff5d22;
  --theme-dark:#c74a1c;
  --accent:#ff5d22;
  --theme-soft:#feedea;
}
body[data-theme="magenta"]{
  --theme:#d21a90;
  --theme-dark:#a81260;
  --accent:#d21a90;
  --theme-soft:#f9e7f4;
}
body[data-theme="turchese"]{
  --theme:#00accc;
  --theme-dark:#0c7d8e;
  --accent:#00accc;
  --theme-soft:#e6f7fa;
}

/* ---------------- BASE ---------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Poppins","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--text);
  background:#fff;
  overflow-x:hidden;
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--theme);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto}}

.wrap{max-width:calc(var(--larghezza-contenuto) + 2 * var(--margine-pagina));margin:0 auto;padding:0 var(--margine-pagina)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------- HEADER ---------------- */
/* Nel design l'header non e' un rettangolo con un taglio bianco: sono tre forme
   sovrapposte su fondo bianco (massa colorata, sagoma chiara in blend screen,
   fascia di bordo) piu' 63 stelle. Forme e gradienti sono estratti dai PDF in
   design/ da tools/onde/genera.py; l'immagine sta nel blocco @onde in fondo a
   questo foglio, una volta sola per tema, e tutte le pagine la usano da li'. */
.site-header{
  position:relative;
  /* Due livelli: le stelle sopra, le onde sotto. Separati perche' le onde si
     stirano in larghezza (il disegno del cliente esiste solo a 1440) mentre le
     stelle devono restare cerchi: il loro SVG usa slice, quindi ritaglia ai
     lati invece di schiacciare. */
  background:
    url("onde/stelle.svg") no-repeat 0 0 / 100% 100%,
    var(--onda-header) no-repeat 0 0 / 100% 100%,
    #fff;
  padding:44px 0 0;
  min-height:330px;
  overflow:hidden;
}
.header-inner{position:relative;z-index:2}
.logo{display:inline-block;line-height:0}
.logo img{width:240px;height:auto;display:block}
.logo-tag{margin:2px 0 0;color:#fff;font-size:1.19rem;font-weight:400;opacity:.95}
.logo-tag b,.logo-tag strong{font-weight:700}

/* ---------------- INTESTAZIONE PAGINA ---------------- */
.page-head{text-align:center;padding:60px 0 8px}
.page-badge{
  display:inline-flex;align-items:center;gap:10px;
  background:#fff;border:2px solid var(--theme);
  border-radius:999px;padding:14px 28px 14px 12px;
  font-weight:600;font-size:1.2rem;color:var(--text);
  box-shadow:0 4px 14px rgba(31,36,66,.07);
}
/* I pianeti sono l'arte vettoriale estratta dai badge dei PDF di design
   (tools/pianeti/), non piu' cerchi con un gradiente addosso. Misure e immagini
   stanno nel blocco @pianeti in fondo a questo foglio. */
.badge-planet{flex:0 0 auto;background:center/contain no-repeat}

.page-title{
  margin:40px auto 12px;max-width:900px;
  font-size:2.5rem;line-height:1.25;font-weight:800;
  color:var(--accent);text-transform:uppercase;letter-spacing:.2px;
}
.page-sub{margin:0 auto 70px;max-width:960px;color:var(--accent);opacity:.85;font-size:1.35rem}

/* ---------------- PANNELLI ---------------- */
.panel{
  background:var(--theme-soft);
  border-radius:22px;
  --panel-pad-b:28px;
  padding:24px 46px var(--panel-pad-b);
  margin:0 0 25px;
}
.panel-title{
  margin:0 0 18px;text-align:center;
  font-size:1.85rem;font-weight:800;color:var(--theme);
  text-transform:uppercase;letter-spacing:.3px;
}
.panel-intro{margin:-6px auto 18px;max-width:680px;text-align:center;color:var(--text);font-size:1.2rem}
/* `b` e `strong` insieme ovunque: l'editor del pannello salva il grassetto
   come <strong>, i testi del sito statico lo avevano come <b>. */
.panel-intro b,.panel-intro strong{color:inherit}

.cards{display:grid;grid-template-columns:1fr 1fr;gap:19px}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card{
  background:#fff;border-radius:14px;padding:15px 46px;
  text-align:center;font-size:1.22rem;line-height:1.4;color:var(--text);
}
.card h3{margin:0 0 4px;font-size:1.2rem;line-height:1.3;font-weight:700;color:var(--theme)}
.card p,.card .testo-ricco{margin:0;color:var(--text)}

/* ---------------- TESTI DAL PANNELLO ----------------
   Allineamento scelto nell'editor: in database sta come style="text-align",
   in pagina diventa una di queste classi (TestoRicco::perLaPagina), così lo
   stile resta qui e non sparso nei testi. */
.testo-centro{text-align:center}
.testo-destra{text-align:right}
.testo-giustificato{text-align:justify}
/* Un blocco diventato documento (più paragrafi, elenchi, titoli): x-testo lo
   stampa in un div con questa classe al posto del <p>. I margini interni
   seguono quelli del testo attorno, il primo e l'ultimo figlio non ne aggiungono. */
.testo-ricco p,.testo-ricco ul,.testo-ricco ol{margin:0 0 .6em}
.testo-ricco h2,.testo-ricco h3{margin:.9em 0 .3em;line-height:1.3;color:var(--theme)}
.testo-ricco h2{font-size:1.25em}
.testo-ricco h3{font-size:1.1em}
.testo-ricco ul,.testo-ricco ol{padding-left:1.3em;text-align:left}
.testo-ricco li>p{margin:0}
.testo-ricco>:first-child{margin-top:0}
.testo-ricco>:last-child{margin-bottom:0}
.testo-ricco a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---------------- ACCORDION ---------------- */
.acc{background:#fff;border-radius:12px;padding:14px 22px;margin:0 20px 12px}
.acc summary{
  cursor:pointer;font-weight:700;font-size:1.3rem;color:var(--text);
  list-style:none;display:flex;align-items:center;gap:8px;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::before{content:"";width:9px;height:13px;flex:0 0 auto;background:url("icone/freccia.svg") center/contain no-repeat;transition:transform .18s ease}
.acc[open] summary::before{transform:rotate(90deg)}
.acc p,.acc .testo-ricco{margin:8px 0 2px 16px;color:var(--muted);font-size:1.2rem}
.acc .testo-ricco p{margin:0 0 .6em;font-size:inherit}

/* ---------------- TABELLA ---------------- */
.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;font-size:1.14rem}
.tbl th{background:#fff;text-align:left;padding:12px 14px;font-weight:700;border-bottom:2px solid var(--theme-soft)}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--theme-soft);color:var(--text)}
.tbl tr:last-child td{border-bottom:0}

/* ---------------- BOTTONI ---------------- */
/* L'etichetta sta su una riga (correzione del 02/10: "Prenota lo screening
   regionale" andava a capo). Vale per tutti i pulsanti con questo stile e per
   quelli del blocco viaggio. Solo sotto i 520 px, se l'etichetta non entra
   nella larghezza disponibile, puo' andare a capo (vedi la media query):
   text-wrap: balance ripartisce le due righe. Gli a capo manuali (<br>)
   nelle etichette non esistono piu': CtaLink::suUnaRiga li toglie. */
.btn{
  display:inline-block;appearance:none;border:0;cursor:pointer;
  text-align:center;  /* commento 4 del 17/09: su due righe il testo stava a sinistra */
  white-space:nowrap;max-width:100%;
  background:var(--accent);color:#fff;
  font-family:inherit;font-weight:700;font-size:1.3rem;
  padding:12px 24px;border-radius:999px;
  transition:transform .15s ease,filter .15s ease;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
/* Disabilitato: si deve vedere. Fino al 07/10/2026 era identico a quello attivo,
   hover compreso, e nel modulo Storie "non succedeva nulla". */
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn:disabled:hover{transform:none;filter:none}
/* alcune tavole usano il maiuscolo per i pulsanti dentro i pannelli */
.btn.maiuscolo{text-transform:uppercase;letter-spacing:.4px}
.btn.outline{background:#fff;color:var(--accent);border:2px solid var(--accent)}
/* Pulsanti DENTRO un box (richiesta del 30/09): --spazio-cta sopra, e sotto
   la stessa distanza dal bordo del box, padding compreso. Prima c'erano 70 px
   sopra e 28 sotto. */
.btn-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:var(--spazio-cta)}
.panel > .btn-row:last-child{margin-bottom:calc(var(--spazio-cta) - var(--panel-pad-b))}
/* Pulsante FUORI dai box (screening): resta la misura del PDF. Commento 2 del
   17/09 ("pulsanti troppo attaccati ai box"): in screening_02.pdf fra il fondo
   dell'ultimo pannello e il pulsante ci sono 94 px, e dal pulsante al
   disclaimer 74. Il pannello porta gia' 25 px di margine sotto. */
.panel + .btn-row{margin-top:70px}

/* ---------------- PAGINE LEGALI ----------------
   Informativa privacy e cookie policy: testo lungo, allineato a sinistra e non
   centrato come nei pannelli. Il corpo di queste due pagine e' generato dai
   .docx da tools/legali/genera.py; questo foglio e' l'unica copia dello stile,
   cosi' il generatore non deve riscriverlo. */
.legale-pagina .page-title{text-transform:none;font-size:2rem;max-width:1000px}
.legale{max-width:1000px;margin:0 auto;text-align:left;font-size:1.14rem;line-height:1.55;color:var(--text)}
.legale p{margin:0 0 12px}
.legale h3{margin:20px 0 8px;font-size:1.25rem;color:var(--theme)}
.legale a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.legale-lista{margin:0 0 14px;padding-left:22px}
.legale-lista li{margin:0 0 6px}
.tbl-scroll{overflow-x:auto;margin:0 0 16px}
.tbl-scroll .tbl{font-size:1rem;min-width:640px}
/* i campi lasciati in bianco nell'informativa: si devono vedere */
.da-completare{background:#ffe9a8;color:#6b4a00;padding:1px 6px;border-radius:5px;font-weight:700}
@media (max-width:600px){.legale{font-size:1.05rem}}

/* ---------------- DISCLAIMER ---------------- */
/* Commento 6 del 17/09: l'icona sta al centro della riga, non in alto. E'
   l'icona del PDF (icone/info.svg, 31x30), non un quadratino CSS. */
.disclaimer{
  display:flex;align-items:center;gap:14px;justify-content:center;
  margin:45px auto 55px;max-width:960px;
  color:var(--muted);font-size:1.04rem;text-align:left;
}
.disclaimer .ico{flex:0 0 auto;height:30px}

/* ---------------- CONTINUA IL VIAGGIO ---------------- */
/* Onda in alto (360 px, estratta dal PDF) e, sotto, lo stesso gradiente che nel
   PDF prosegue fino in fondo al blocco. */
.journey{
  position:relative;
  /* L'onda e' il ritaglio bianco in cima; il fondo sta sotto e copre tutto il
     blocco. Se fossero invertiti, il fondo si vedrebbe attraverso l'onda. */
  background:var(--onda-viaggio) no-repeat top center / 100% 360px, var(--viaggio-fondo);
  padding:300px 0 200px;overflow:hidden;margin-top:70px;
}
/* Onda e contenuti restano nell'ordine di sorgente: nessuno z-index esplicito,
   cosi' .journey-grid non crea un contesto di impilamento e il blob delle card
   puo' fondersi con il gradiente del blocco. */
.journey h2{
  position:relative;text-align:center;color:#fff;
  font-size:1.72rem;font-weight:800;letter-spacing:.6px;margin:0 0 34px;text-transform:uppercase;
}
.journey-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:30px;max-width:760px;margin:0 auto}
.journey-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:30px}

/* Il blob dietro Neil fa parte delle illustrazioni consegnate dal cliente
   (astronauta-*.png): niente sfondo CSS. */
/* Richiesta del 30/09: le illustrazioni stavano alla misura della tavola
   (fino a 224x255) ed erano una piu' alta dell'altra di un terzo. Ora ogni
   card ha un riquadro quadrato uguale per tutte e l'illustrazione ci sta
   dentro intera (object-fit: contain); i width/height nel markup restano solo
   come proporzioni intrinseche. Su mobile il riquadro scala con la finestra. */
.journey-card .ill-riga{--ill:clamp(104px,32vw,160px);display:flex;align-items:flex-end;justify-content:center;width:var(--ill);height:var(--ill)}
.journey-card .ill{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}
/* Ordine richiesto dal cliente (13/07/2026): prima il testo, poi il pulsante */
.journey-card p{margin:0;color:#fff;font-size:1.08rem;line-height:1.45;max-width:300px}
.journey-btn{
  appearance:none;border:0;cursor:pointer;font-family:inherit;
  white-space:nowrap;max-width:100%;
  background:#fff;color:var(--text);
  font-weight:800;font-size:1.15rem;letter-spacing:.3px;
  padding:12px 22px;border-radius:999px;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  transition:transform .15s ease;
}
.journey-btn:hover{transform:translateY(-2px)}

/* ---------------- PIANETI (menu) ---------------- */
/* Componente x-pianeti: in alto su /esplora e, dall'08/10/2026 (richiesta del
   cliente), in fondo a "Continua il viaggio" su tutte le altre pagine.
   Pianeti consegnati dal cliente (design/icone/LEGGIMI.md), resi a 4x: in
   pagina a un quarto dei pixel del file, cioe' la sfera di 101 px della
   tavola su celle da 202. width/height espliciti nel markup. */
.planets{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:46px 0 20px}
.planet-link{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  font-size:1.1rem;font-weight:600;color:var(--text);padding:10px 4px;border-radius:14px;
  transition:transform .15s ease,background .15s ease}
.planet-link:hover{transform:translateY(-3px);background:#f5f8ff}
.planet-riga{display:flex;align-items:center;justify-content:center;height:112px}
.planet-riga .pianeta{display:block;height:auto}
/* In fondo alle pagine (.planets-piede) stanno sul bianco, subito prima
   dell'onda di "Continua il viaggio": il pianeta della pagina corrente ha lo
   stesso velo dell'hover. Il margine del blocco viaggio fa da spazio sotto. */
.planets-piede{margin:70px 0 0}
.planets-piede .planet-link[aria-current="page"]{background:#f5f8ff}

/* ---------------- FOOTER ---------------- */
/* Lo spazio per il pulsante di Neil (--ingombro-neil) sta sotto il testo del
   footer solo fino a 830 px: vedi la media query. */
.site-footer{background:var(--footer-bar);color:rgba(255,255,255,.9);text-align:center;font-size:.8rem;padding:23px var(--margine-pagina)}
.site-footer a{color:#fff;font-weight:400;text-decoration:underline;text-underline-offset:2px}
.site-footer .sep{margin:0 6px;opacity:.55}

/* ---------------- NEIL FAB ---------------- */
/* Pulsante flottante come in home.pdf p.2: cerchio di 81 px con il fumetto
   bianco. Il fumetto e' quello del PDF (icone/fumetto-neil.svg, ricavato da
   chat-neil.svg togliendo il cerchio); il cerchio sta in CSS nel colore
   della pagina, per richiesta del cliente del 30/09 e correzione del 01/10:
   viola in home, arancione su Screening. Il casco (icone/neil-casco.svg) si
   usa SOLO nell'intestazione della chat aperta (neil-widget.js).
   Il cerchio in CSS supera la regola del 24/09 per questo solo elemento.
   La posizione resta a 22 px dai bordi: nel PDF sta a 154 px dal bordo
   destro perche' allineato al contenuto a 1440, e su finestre piu' strette
   andrebbe rideciso. */
.neil-fab{
  position:fixed;right:22px;bottom:22px;z-index:60;
  width:81px;height:81px;border:0;padding:0;cursor:pointer;border-radius:50%;
  background:var(--theme) url("icone/fumetto-neil.svg") center/100% no-repeat;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  transition:transform .15s ease;
}
.neil-fab:hover{transform:scale(1.07)}

/* ---------------- RESPONSIVE ---------------- */
/* Spazio in fondo al footer per il pulsante di Neil (segnalazione del 01/10:
   a 600 px copriva "Cookie Policy"). La riga del footer e' larga 604 px,
   centrata: il pulsante, che inizia a 103 px dal bordo destro, la tocca
   sotto gli 810 px di finestra (misurato sugli screenshot del 01/10: a 768
   la copre di 21 px, a 1024 ne resta lontano 107). In hover il pulsante si
   ingrandisce del 7% (quasi 3 px per lato) e la sfiora fino a 816: la soglia
   sta a 830, con margine. Sopra, il footer ha l'altezza di prima e il
   pulsante sta sul vuoto. */
@media (max-width:830px){
  .site-footer{padding-bottom:calc(23px + var(--ingombro-neil))}
}
@media (max-width:820px){
  .cards,.cards.three{grid-template-columns:1fr}
  .journey-grid{grid-template-columns:1fr;gap:40px}
  .planet-riga{height:92px}
  .planet-riga .pianeta{width:auto;height:84px}
  .planets{grid-template-columns:repeat(3,1fr);row-gap:22px}
  .page-title{font-size:1.97rem}
  .page-sub{font-size:1.2rem}
  .panel-title{font-size:1.55rem}
  .card{font-size:1.1rem}
  .card h3{font-size:1.1rem}
  .acc summary{font-size:1.14rem}
  .btn{font-size:1.14rem}
  .journey h2{font-size:1.45rem}
  /* Sotto gli 820 px l'arte da 1440 verrebbe schiacciata fino a 3,7 volte in
     orizzontale. Si passa alle varianti che RITAGLIANO invece di deformare:
     l'header ancorato a sinistra (la forma resta quella del design, si vede la
     parte con il logo), il blocco viaggio su una finestra della collina con
     l'onda alta 200 px invece di 360. Il disegno completo si vede solo a 1440:
     per il mobile non esiste una tavola del cliente, questa composizione e' una
     scelta nostra da far validare. */
  /* min-height piu' bassa che a desktop: col ritaglio il disegno non si taglia,
     si allarga solo la finestra sull'arte, e sotto l'onda resta meno bianco. */
  .site-header{
    padding:22px 0 0;min-height:250px;
    background-image:url("onde/stelle-stretta.svg"),var(--onda-header-stretta);
  }
  .journey{
    background:url("onde/viaggio-stretta.svg") no-repeat top center / 100% 200px,
               var(--viaggio-fondo);
    padding:170px 0 90px;
  }
  .tbl{font-size:1.06rem}
  .tbl th,.tbl td{padding:10px}
}
@media (max-width:520px){
  /* Il design del cliente esiste solo a 1440 px: sotto i 520 la scala desktop
     risulterebbe sovradimensionata, quindi qui si scende a corpi da telefono
     mantenendo le stesse proporzioni fra gli elementi. */
  .page-title{font-size:1.68rem}
  .page-sub{font-size:1.1rem}
  .page-badge{font-size:1rem}
  .panel-title{font-size:1.3rem}
  .panel-intro{font-size:1rem}
  .card{font-size:1rem}
  .card h3{font-size:1.02rem}
  .acc summary{font-size:1.02rem}
  .acc p{font-size:.98rem}
  /* Qui, e solo qui, un'etichetta piu' larga dello spazio disponibile va su
     due righe bilanciate invece di uscire dal contenitore (a 390 px e' il
     caso di "Prenota il vaccino nella tua regione"). */
  .btn,.journey-btn{white-space:normal;text-wrap:balance}
  .planets{grid-template-columns:repeat(2,1fr)}
  /* In fondo alle pagine bastano tre colonne di pianeti piu' piccoli: due
     righe invece di tre sotto i pulsanti. */
  .planets-piede{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:50px}
  .planets-piede .planet-riga{height:70px}
  .planets-piede .planet-riga .pianeta{height:62px}
  .planets-piede .planet-link{font-size:.95rem;gap:8px;padding:8px 2px}
  .btn{font-size:1.02rem;padding:11px 20px}
  .disclaimer{font-size:.9rem}
  .journey h2{font-size:1.28rem}
  .journey-card p{font-size:1rem}
  .journey-btn{font-size:.98rem}
  .logo-tag{font-size:.95rem}
  .panel{--panel-pad-b:20px;padding:18px 14px var(--panel-pad-b);border-radius:18px}
  .logo img{width:150px}
  .journey{padding:150px 0 70px;margin-top:70px}
  /* Tabella responsive: diventa a blocchi su mobile */
  .tbl thead{display:none}
  .tbl tr{display:block;background:#fff;border-radius:12px;margin-bottom:10px;padding:6px 0}
  .tbl td{display:flex;justify-content:space-between;gap:12px;border:0;padding:8px 14px}
  .tbl td::before{content:attr(data-label);font-weight:700;color:var(--theme)}
}

/* @onde:inizio — generato da tools/onde/genera.py, non modificare a mano */
body[data-theme="blu"]{
  --onda-header:url("onde/header-blu.svg");
  --onda-header-stretta:url("onde/header-blu-stretta.svg");
  --onda-viaggio:url("onde/viaggio.svg");
  --viaggio-fondo:linear-gradient(90deg,#166BB4 0%,#1967B2 8.33%,#1B64AF 16.67%,#1D60AC 25%,#205DA9 33.33%,#225AA7 41.67%,#2456A4 50%,#2753A1 58.33%,#29509F 66.67%,#29519F 75%,#2659A4 83.33%,#2461A9 91.67%,#2169AE 100%);
}
body[data-theme="rosa"]{
  --onda-header:url("onde/header-rosa.svg");
  --onda-header-stretta:url("onde/header-rosa-stretta.svg");
  --onda-viaggio:url("onde/viaggio.svg");
  --viaggio-fondo:linear-gradient(90deg,#B286D1 0%,#B782CD 8.33%,#BB7EC9 16.67%,#BF7BC5 25%,#C377C2 33.33%,#C774BE 41.67%,#CB71BB 50%,#CF6DB8 58.33%,#D36AB4 66.67%,#D767B1 75%,#DA64AE 83.33%,#DE61AB 91.67%,#E15EA9 100%);
}
body[data-theme="viola"]{
  --onda-header:url("onde/header-viola.svg");
  --onda-header-stretta:url("onde/header-viola-stretta.svg");
  --onda-viaggio:url("onde/viaggio.svg");
  --viaggio-fondo:linear-gradient(90deg,#166BB4 0%,#1967B2 8.33%,#1B64AF 16.67%,#1D60AC 25%,#205DA9 33.33%,#225AA7 41.67%,#2456A4 50%,#2753A1 58.33%,#29509F 66.67%,#29519F 75%,#2659A4 83.33%,#2461A9 91.67%,#2169AE 100%);
}
body[data-theme="arancio"]{
  --onda-header:url("onde/header-arancio.svg");
  --onda-header-stretta:url("onde/header-arancio-stretta.svg");
  --onda-viaggio:url("onde/viaggio.svg");
  --viaggio-fondo:linear-gradient(90deg,#FF7647 0%,#FF7B52 8.33%,#FF815C 16.67%,#FF8664 25%,#FF8A67 33.33%,#FF8D67 41.67%,#FF9168 50%,#FF9467 58.33%,#FF9867 66.67%,#FF9C66 75%,#FF9F67 83.33%,#FFA267 91.67%,#FFA666 100%);
}
body[data-theme="magenta"]{
  --onda-header:url("onde/header-magenta.svg");
  --onda-header-stretta:url("onde/header-magenta-stretta.svg");
  --onda-viaggio:url("onde/viaggio.svg");
  --viaggio-fondo:radial-gradient(121.403vw 121.403vw at 68.7514vw 51.9458vw,#D21A90 0%,#D21A90 6.79%,#DF2790 21.27%,#EA318F 35.75%,#F3398F 50.23%,#F9408F 64.71%,#FE448F 79.19%,#FF458F 93.67%,#FF458F 100%);
}
body[data-theme="turchese"]{
  --onda-header:url("onde/header-turchese.svg");
  --onda-header-stretta:url("onde/header-turchese-stretta.svg");
  --onda-viaggio:url("onde/viaggio.svg");
  --viaggio-fondo:linear-gradient(90deg,#01A5C3 0%,#01A0BE 8.33%,#019BB9 16.67%,#0196B4 25%,#0291AE 33.33%,#028CA9 41.67%,#0287A4 50%,#02829F 58.33%,#027E9A 66.67%,#02819D 75%,#02839F 83.33%,#0285A2 91.67%,#0288A4 100%);
}
/* @onde:fine */

/* @pianeti:inizio — generato da tools/pianeti/genera.py, non modificare a mano */
/* Riquadri in scala fra loro: le proporzioni sono quelle del design,
   il pianeta piu' alto occupa 44 px nel badge e 68 px nella home. */
.pl-cose-hpv{width:42.4px;height:41.8px;background-image:url("pianeti/cose-hpv.svg")}
.pl-screening{width:42.3px;height:42.3px;background-image:url("pianeti/screening.svg")}
.pl-storie{width:55.6px;height:38.7px;background-image:url("pianeti/storie.svg")}
.pl-toolkit{width:43.4px;height:43.4px;background-image:url("pianeti/toolkit.svg")}
.pl-community{width:44px;height:44px;background-image:url("pianeti/community.svg")}
.pl-about{width:45.9px;height:43.9px;background-image:url("pianeti/about.svg")}
.pb-cose-hpv{width:65.5px;height:64.6px;background-image:url("pianeti/cose-hpv.svg")}
.pb-screening{width:65.3px;height:65.3px;background-image:url("pianeti/screening.svg")}
.pb-storie{width:85.9px;height:59.8px;background-image:url("pianeti/storie.svg")}
.pb-toolkit{width:67.1px;height:67.1px;background-image:url("pianeti/toolkit.svg")}
.pb-community{width:68px;height:68px;background-image:url("pianeti/community.svg")}
.pb-about{width:70.9px;height:67.8px;background-image:url("pianeti/about.svg")}
/* @pianeti:fine */

/* ---------------- ICONE ----------------
   Le icone dei titoli sono SVG estratti dai PDF del cliente (tools/icone/):
   nelle tavole sono emoji vettoriali, uguali per tutti, mentre come caratteri
   emoji le disegnava il font di sistema del visitatore (commento 1 del 17/09).
   L'icona sta nel template, non nel testo del blocco: e' decorazione.
   Nel badge l'icona resta a 43 px come il pianeta. */
.ico{display:inline-block;height:1em;aspect-ratio:var(--ico-r,1);vertical-align:-.16em;background:center/contain no-repeat}
/* Icone accanto ai titoli: UNA regola per tutte le pagine (30/09, 01/10 e
   02/10). Il titolo con icona ha l'icona come primo elemento e il testo in
   .titolo-testo. Nei titoli centrati l'icona sta IN LINEA col testo, attaccata
   alla prima parola: se il titolo va a capo resta sulla prima riga, davanti
   alla prima parola, non all'estrema sinistra del blocco (correzione del
   02/10, Screening a 768 e 1024). Alta --icona-titolo (0,85em), distacco
   0,3em dal testo.
   Perche' e' un inline con padding e non un inline-block: un inline-block
   (o un <img>) e' un "atomic inline", e i browser ammettono l'a capo subito
   dopo, anche senza spazio: a certe larghezze l'icona resta sola sulla prima
   riga e la parola scende sotto (provato in Chrome 154 e Firefox 156). Un
   inline vuoto con il padding largo quanto l'icona non e' un punto di a capo:
   l'icona e il testo restano insieme. L'icona e' lo sfondo del padding,
   centrata in verticale sull'area del carattere: in Poppins il centro cade
   sulla meta' delle maiuscole, nella stessa posizione del flex di prima.
   La larghezza del padding viene da --ico-r (la proporzione dell'icona, nel
   blocco @icone), perche' cronometro, saturno e il razzo non sono quadrati.
   Vale per gli SVG (.ico) e per il razzo PNG (.ico-razzo) di Cos'e' l'HPV,
   About, Community e Quiz. text-wrap: balance ripartisce le righe in modo
   che la prima non resti lunga e la seconda di una parola.
   Il flex (icona a sinistra, centrata in verticale sul blocco di testo)
   resta solo per i titoli allineati a sinistra, con la classe
   .titolo-sinistra: oggi nessun titolo la usa. Nessun override di pagina: se
   un titolo ha bisogno di altro, si cambia qui. */
:is(.page-title,.panel-title):has(> .titolo-testo){text-wrap:balance}
:is(.page-title,.panel-title) > .ico{
  display:inline;height:auto;aspect-ratio:auto;vertical-align:baseline;
  padding-left:calc(var(--icona-titolo) * var(--ico-r,1));margin-right:.3em;
  background-size:auto var(--icona-titolo);background-position:left center;
}
:is(.page-title,.panel-title).titolo-sinistra:has(> .titolo-testo){display:flex;align-items:center;justify-content:flex-start;gap:.3em;text-wrap:initial}
:is(.page-title,.panel-title).titolo-sinistra > .ico{flex:0 0 auto;display:inline-block;height:var(--icona-titolo);aspect-ratio:var(--ico-r,1);padding:0;margin:0;background-size:contain;background-position:center}
.titolo-sinistra > .titolo-testo{min-width:0}
/* Il razzo dei titoli (PNG estratto dal PDF, come le altre icone): stessa
   regola delle icone SVG. Nel badge del Quiz resta l'<img>. */
.ico-razzo{--ico-r:400/384;background-image:url("icone/razzo-chip@8x.png")}
.page-badge .ico{height:44px}
.evidenza .ico{height:1.5em;margin-right:.2em}

/* @icone:inizio — generato da tools/icone/estrai.py, non modificare a mano */
.ico-provetta{--ico-r:50/48;background-image:url("icone/provetta.svg")}
.ico-stella-raggi{--ico-r:42/41;background-image:url("icone/stella-raggi.svg")}
.ico-spunta{--ico-r:32/30;background-image:url("icone/spunta.svg")}
.ico-interrobang{--ico-r:28/30;background-image:url("icone/interrobang.svg")}
.ico-scintille{--ico-r:39/36;background-image:url("icone/scintille.svg")}
.ico-cronometro{--ico-r:38/45;background-image:url("icone/cronometro.svg")}
.ico-punto-domanda{--ico-r:23/35;background-image:url("icone/punto-domanda.svg")}
.ico-freccia{--ico-r:10/14;background-image:url("icone/freccia.svg")}
.ico-info{--ico-r:32/32;background-image:url("icone/info.svg")}
.ico-cassetta{--ico-r:48/46;background-image:url("icone/cassetta.svg")}
.ico-vero{--ico-r:50/50;background-image:url("icone/vero.svg")}
.ico-falso{--ico-r:50/50;background-image:url("icone/falso.svg")}
.ico-instagram{--ico-r:37/38;background-image:url("icone/instagram.svg")}
.ico-telegram{--ico-r:38/38;background-image:url("icone/telegram.svg")}
.ico-whatsapp{--ico-r:38/38;background-image:url("icone/whatsapp.svg")}
.ico-messenger{--ico-r:38/38;background-image:url("icone/messenger.svg")}
.ico-chat-neil{--ico-r:84/83;background-image:url("icone/chat-neil.svg")}
.ico-saturno{--ico-r:59/36;background-image:url("icone/saturno.svg")}
.ico-siringa{--ico-r:45/44;background-image:url("icone/siringa.svg")}
.ico-microscopio{--ico-r:36/39;background-image:url("icone/microscopio.svg")}
.ico-appunti{--ico-r:32/40;background-image:url("icone/appunti.svg")}
.ico-fumetto{--ico-r:39/36;background-image:url("icone/fumetto.svg")}
.ico-telescopio{--ico-r:43/42;background-image:url("icone/telescopio.svg")}
.ico-divieto{--ico-r:34/34;background-image:url("icone/divieto.svg")}
.ico-quaderno{--ico-r:37/37;background-image:url("icone/quaderno.svg")}
.ico-megafono{--ico-r:47/43;background-image:url("icone/megafono.svg")}
.ico-parla{--ico-r:36/32;background-image:url("icone/parla.svg")}
.ico-ciak{--ico-r:33/33;background-image:url("icone/ciak.svg")}
.ico-cassetta-posta{--ico-r:36/35;background-image:url("icone/cassetta-posta.svg")}
/* @icone:fine */

/* ---------------- BANNER COOKIE (CF-Consent) ----------------
   Lo stile è quello di CF-Consent (iniettato dallo script); qui solo il font
   del sito e il colore dei pulsanti preso dal tema della pagina. "html" davanti
   all'id serve a vincere sullo stile iniettato, che arriva dopo. */
html #cfc-root{font-family:"Poppins",sans-serif;--cfc-acc:var(--theme-dark,#521fa8)}
html #cfc-root .cfc-btn{font-family:"Poppins",sans-serif}