/* =============================================================================
   SITO DI LEO - foglio di stile comune
   Di serie NERO E ROSSO (fondo nero profondo, rosso Leo per azioni ed evidenze, testo bianco
   e grigi caldi); tema CHIARO a scelta con lo stesso rosso; "come il sistema" facoltativo.
   Nessun carattere scaricato (caratteri di sistema con ripieghi), nessun framework: il sito
   funziona anche offline, dentro l'app e aprendo i file dal disco.
   Indice:  1 variabili  2 base  3 intestazione  4 pulsanti  5 sezioni e titoli
            6 schede  7 codice (colori di Leo Studio)  8 piede  9 comparse
            10 pagine di testo  11 home (vecchie parti condivise)  12 template  13 scarica
            14 404  15 movimento ridotto  16 videoteca  17 telefono  18 home  19 ricerca
   ============================================================================= */

/* ---------- 1. Variabili ----------
   Nomi per funzione: --fondo = sfondo della pagina, --superficie = schede e pannelli,
   --accento = rosso del marchio (sfondi, pulsanti), --accento-vivo = rosso per testi e link
   (piu' chiaro sul nero, piu' scuro sul bianco: contrasto AA). Il tema e' deciso dallo script
   nella <head>: data-tema="scuro" (di serie) o "chiaro" su <html>. I blocchi di codice restano
   neri in tutti e due i temi, come l'editor di Leo Studio. */
:root {
  --fondo: #050506;
  --fondo-2: #09090B;
  --superficie: #0E0E11;
  --superficie-2: #151518;
  --bordo: #1D1D22;
  --bordo-forte: #2B2B31;
  --testo: #F5F3EF;
  --testo-2: #B5B0A8;
  --testo-3: #8A857E;
  --velo-testata: rgba(5, 5, 6, .72);
  --fondo-piede: #030304;
  --fondo-codice: #0A0A0C;
  --riflesso: rgba(255, 255, 255, .025);

  --accento: #E0182D;
  --accento-rgb: 224, 24, 45;
  --accento-vivo: #FF4D5E;
  --accento-scuro: #9E0F20;
  --accento-tenue: rgba(224, 24, 45, .1);
  --accento-linea: rgba(255, 77, 94, .3);
  --grad-accento: linear-gradient(180deg, #EA2338 0%, #D01328 100%);
  --grad-titolo: linear-gradient(180deg, #FF6070 0%, #E0182D 100%);
  --su-accento: #FFFFFF;
  --rosso: #E0182D;
  --rosso-chiaro: #FF4D5E;
  --verde: #6FCF97;

  --car: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "SF Pro Text", "Helvetica Neue", Roboto, Arial, sans-serif;
  --car-titoli: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "SF Pro Display", "Helvetica Neue", Roboto, Arial, sans-serif;
  --car-manifesto: var(--car-titoli);
  --car-codice: "Cascadia Mono", "Cascadia Code", "JetBrains Mono", "SF Mono", Consolas, "SFMono-Regular", Menlo, "DejaVu Sans Mono", monospace;

  --r: 10px;
  --r-piccolo: 6px;
  --r-grande: 18px;
  --larghezza: 1200px;
  --margine: clamp(16px, 4vw, 40px);
  --altezza-testata: 60px;
  --curva: cubic-bezier(.2, .7, .1, 1);
  --ombra: 0 24px 60px -24px rgba(0, 0, 0, .9);
  --ombra-scheda: 0 20px 44px -28px rgba(0, 0, 0, .9);
  color-scheme: dark;
}
:root[data-tema="chiaro"] {
  --fondo: #FFFFFF; --fondo-2: #F7F6F3; --superficie: #FFFFFF; --superficie-2: #F2F1ED;
  --bordo: #E7E5E0; --bordo-forte: #D3D0CA; --testo: #111113; --testo-2: #48453F; --testo-3: #6B675F;
  --velo-testata: rgba(255, 255, 255, .8); --fondo-piede: #F7F6F3; --riflesso: rgba(0, 0, 0, .012);
  --accento: #D2122A; --accento-rgb: 210, 18, 42; --accento-vivo: #BF0F26; --accento-scuro: #8C0A1A;
  --accento-tenue: rgba(210, 18, 42, .06); --accento-linea: rgba(210, 18, 42, .24);
  --grad-accento: linear-gradient(180deg, #DE1A31 0%, #C60F25 100%);
  --grad-titolo: linear-gradient(180deg, #E0182D 0%, #B30D21 100%);
  --ombra: 0 24px 60px -30px rgba(30, 20, 20, .35); --ombra-scheda: 0 18px 40px -26px rgba(30, 20, 20, .28);
  color-scheme: light;
}
/* Parti sempre scure (codice, finte finestre di Leo Studio, schermi del telefono): i colori scuri
   valgono anche quando la pagina e' in tema chiaro. */
.finestra-codice, .studio, .sempre-scuro, pre.codice, .m-codice, .h-editor {
  --fondo: #050506; --fondo-2: #09090B; --superficie: #0E0E11; --superficie-2: #151518;
  --bordo: #1D1D22; --bordo-forte: #2B2B31; --testo: #F5F3EF; --testo-2: #B5B0A8; --testo-3: #8A857E;
  --accento-vivo: #FF4D5E; --accento-linea: rgba(255, 77, 94, .3); --riflesso: rgba(255, 255, 255, .025);
  color-scheme: dark;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--altezza-testata) + 20px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100vh;
  background: var(--fondo); color: var(--testo);
  font: 16.5px/1.62 var(--car);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--accento-vivo); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accento-vivo); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accento-vivo); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(var(--accento-rgb), .38); color: #fff; }
h1, h2, h3, h4 { font-family: var(--car-titoli); line-height: 1.1; margin: 0; letter-spacing: -.025em; font-weight: 700; text-wrap: balance; }
p { margin: 0 0 1em; }
p, li { text-wrap: pretty; }
code, kbd, pre { font-family: var(--car-codice); }
:not(pre) > code {
  font-size: .86em; background: var(--superficie-2); border: 1px solid var(--bordo);
  border-radius: 5px; padding: .06em .38em; color: var(--testo);
}
kbd { font-size: .8em; background: var(--superficie-2); border: 1px solid var(--bordo-forte); border-bottom-width: 2px; border-radius: 5px; padding: .05em .42em; color: var(--testo-2); }
hr { border: 0; height: 1px; background: var(--bordo); margin: 2em 0; }

.salta { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--accento); color: #fff; padding: 10px 16px; border-radius: var(--r-piccolo); font-weight: 700; text-decoration: none; }
.salta:focus { top: 12px; color: #fff; }
.solo-lettori { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contenitore { width: 100%; max-width: var(--larghezza); margin: 0 auto; padding: 0 var(--margine); }
.stretto { max-width: 820px; }
.accento { color: var(--accento-vivo); }
/* La seconda parte dei titoli: stesso carattere, grigio caldo (due toni, niente corsivi decorativi). */
.testo-accento { color: var(--testo-3); }
.centro { text-align: center; }

/* ---------- 3. Intestazione ---------- */
.testata {
  position: sticky; top: 0; z-index: 100; height: var(--altezza-testata);
  background: var(--velo-testata);
  backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--bordo);
}
.testata .contenitore { display: flex; align-items: center; gap: 8px; height: 100%; max-width: 1280px; }
.marchio { display: inline-flex; align-items: center; gap: 10px; color: var(--testo); text-decoration: none; margin-right: auto; }
.marchio:hover { color: var(--testo); text-decoration: none; }
.marchio img { width: 30px; height: 30px; }
.marchio span { font: 700 19px/1 var(--car-titoli); letter-spacing: -.01em; }
.navigazione ul { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; align-items: center; }
.navigazione a {
  position: relative; display: block; padding: 7px 11px; color: var(--testo-2); text-decoration: none;
  font-size: 14.5px; font-weight: 500; border-radius: 8px; transition: color .15s, background-color .15s;
}
.navigazione a:not(.pulsante):hover { color: var(--testo); background: var(--superficie-2); text-decoration: none; }
.navigazione a[aria-current="page"]:not(.pulsante) { color: var(--testo); }
.navigazione a[aria-current="page"]:not(.pulsante)::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: -11px; height: 2px; border-radius: 2px; background: var(--accento);
}
.navigazione .voce-scarica { margin-left: 8px; }
.navigazione a.pulsante, .navigazione a.pulsante:hover { color: var(--su-accento); }
.apri-menu { display: none; }
.apri-cerca {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 11px; margin-left: 6px;
  background: var(--superficie); border: 1px solid var(--bordo-forte); border-radius: 9px; color: var(--testo-3);
  font: 500 14px/1 var(--car); cursor: pointer; transition: color .15s, border-color .15s;
}
.apri-cerca:hover { color: var(--testo); border-color: var(--testo-3); }
.apri-cerca svg { width: 16px; height: 16px; }
.apri-cerca-testo { min-width: 64px; text-align: left; }
.apri-cerca kbd { font-size: 12px; padding: 1px 6px; }
.cambia-tema {
  display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none;
  background: transparent; border: 1px solid transparent; border-radius: 9px; color: var(--testo-2); cursor: pointer;
  transition: color .15s, background-color .15s;
}
.cambia-tema:hover { color: var(--testo); background: var(--superficie-2); }
.cambia-tema svg { width: 18px; height: 18px; grid-area: 1 / 1; transition: opacity .2s, transform .3s var(--curva); }
.cambia-tema .icona-luna { opacity: 0; transform: rotate(40deg) scale(.6); }
:root[data-tema="chiaro"] .cambia-tema .icona-sole { opacity: 0; transform: rotate(-60deg) scale(.6); }
:root[data-tema="chiaro"] .cambia-tema .icona-luna { opacity: 1; transform: none; }
.avviso-rete {
  position: relative; z-index: 90; margin: 0; padding: 9px var(--margine); text-align: center;
  font-size: 14px; color: var(--testo); background: var(--accento-tenue); border-bottom: 1px solid var(--accento-linea);
}
.avviso-rete::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 9px; background: var(--accento); vertical-align: 1px; }
.nota-rete { font-size: 14.5px; color: var(--testo-2); }
:root.in-app .solo-fuori-app { display: none !important; }
:root:not(.in-app) .solo-in-app { display: none !important; }

@media (max-width: 1080px) {
  .apri-cerca-testo, .apri-cerca kbd { display: none; }
  .apri-cerca { width: 40px; height: 40px; padding: 0; justify-content: center; border-color: transparent; background: transparent; }
}
@media (max-width: 960px) {
  .apri-menu {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    background: transparent; border: 0; border-radius: 9px; color: var(--testo); cursor: pointer;
  }
  .cambia-tema { width: 40px; height: 40px; }
  .apri-menu svg { width: 22px; height: 22px; }
  .navigazione {
    position: fixed; top: var(--altezza-testata); left: 0; right: 0; bottom: 0; overflow-y: auto;
    background: var(--fondo);
    visibility: hidden; opacity: 0;
    transition: opacity .2s, visibility 0s .2s;
  }
  .navigazione.aperta { visibility: visible; opacity: 1; transition: opacity .2s; }
  .navigazione ul { flex-direction: column; align-items: stretch; padding: 12px var(--margine) 28px; gap: 0; }
  .navigazione li { border-bottom: 1px solid var(--bordo); }
  .navigazione a { padding: 16px 4px; font-size: 20px; font-weight: 600; color: var(--testo); border-radius: 0; }
  .navigazione a:not(.pulsante):hover { background: transparent; color: var(--accento-vivo); }
  .navigazione a[aria-current="page"]:not(.pulsante) { color: var(--accento-vivo); }
  .navigazione a[aria-current="page"]:not(.pulsante)::after { display: none; }
  .navigazione .voce-scarica { margin: 20px 0 0; border: 0; }
  .navigazione .pulsante { width: 100%; font-size: 17px; padding: 14px; }
}

/* ---------- 4. Pulsanti ---------- */
.pulsante {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--grad-accento); color: var(--su-accento); border: 0;
  font: 600 15.5px/1.2 var(--car); padding: 12px 20px; border-radius: 10px;
  text-decoration: none; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(var(--accento-rgb), .9), 0 8px 24px -12px rgba(var(--accento-rgb), .8);
  transition: filter .15s, box-shadow .2s, transform .15s;
}
.pulsante:hover { color: var(--su-accento); filter: brightness(1.08); text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 0 1px rgba(var(--accento-rgb), 1), 0 10px 30px -10px rgba(var(--accento-rgb), .9); }
.pulsante:active { transform: translateY(1px); filter: brightness(.96); }
.pulsante:focus-visible { outline: 2px solid var(--testo); outline-offset: 3px; }
.pulsante svg { width: 18px; height: 18px; flex: none; }
.pulsante.secondario {
  background: var(--superficie); color: var(--testo);
  box-shadow: inset 0 0 0 1px var(--bordo-forte);
}
.pulsante.secondario:hover { color: var(--testo); filter: none; background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--testo-3); }
.pulsante.grande { font-size: 16.5px; padding: 15px 26px; border-radius: 12px; }
.pulsante.piccolo { font-size: 14px; padding: 8px 14px; border-radius: 8px; }
.pulsante[aria-disabled="true"], .pulsante.in-arrivo {
  background: var(--superficie-2); color: var(--testo-2); cursor: default; filter: none;
  box-shadow: inset 0 0 0 1px var(--accento-linea); transform: none;
}
.pulsante.in-arrivo .punto-arrivo { width: 8px; height: 8px; border-radius: 50%; background: var(--accento); }
.azioni { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.link-freccia { font-weight: 600; text-decoration: none; }
.link-freccia:hover { text-decoration: underline; }

/* ---------- 5. Sezioni e titoli ---------- */
.sezione { position: relative; padding: clamp(72px, 10vw, 128px) 0; }
.sezione.scura { background: var(--fondo-2); border-block: 1px solid var(--bordo); }
.sopratitolo {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px;
  font: 600 14px/1.4 var(--car); letter-spacing: 0; color: var(--accento-vivo);
}
.titolo-sezione { font-size: clamp(32px, 4.6vw, 56px); margin-bottom: 20px; letter-spacing: -.035em; }
.titolo-sezione em, .manifesto em, h1 em.testo-accento, h2 em.testo-accento { font-style: normal; }
.introduzione { font-size: clamp(17px, 1.5vw, 20px); color: var(--testo-2); max-width: 680px; line-height: 1.6; }
.centro .introduzione { margin-left: auto; margin-right: auto; }
.intestazione-sezione { margin-bottom: clamp(40px, 5vw, 64px); }

/* Filo che si disegna (licenza) */
.filo { display: block; width: 100%; height: 2px; overflow: visible; }

/* ---------- 6. Schede ---------- */
.scheda {
  position: relative; background: var(--superficie);
  border: 1px solid var(--bordo); border-radius: 16px; padding: 26px;
  transition: border-color .2s;
}
a.scheda, .scheda:has(> a:only-child) { text-decoration: none; color: inherit; }
.scheda:hover { border-color: var(--bordo-forte); }
.scheda h3 { font-size: 19px; margin: 0 0 8px; letter-spacing: -.015em; }
.scheda p { color: var(--testo-2); margin: 0; font-size: 15.5px; }
.griglia-schede { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* ---------- 7. Codice (colori del tema "Nero" di Leo Studio) ---------- */
.finestra-codice {
  background: var(--fondo-codice); border: 1px solid #222228; border-radius: 12px; overflow: hidden;
  box-shadow: var(--ombra); text-align: left;
}
.finestra-codice .barra {
  display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #0F0F12;
  border-bottom: 1px solid #1F1F25; font: 500 12.5px/1 var(--car); color: #8A857E;
}
.finestra-codice .barra i { width: 10px; height: 10px; border-radius: 50%; background: #2A2A31; }
.finestra-codice .barra i:first-child { background: var(--rosso); }
.finestra-codice .barra span { margin-left: 8px; }
pre.codice {
  margin: 0; padding: 18px 20px; overflow-x: auto; font-size: 14px; line-height: 1.7;
  color: #E6E6EA; background: var(--fondo-codice); tab-size: 4; -moz-tab-size: 4;
  scrollbar-width: thin; scrollbar-color: #33333B transparent;
}
pre.codice code { font: inherit; white-space: pre; }
pre.uscita {
  margin: 0; padding: 14px 20px; font: 13.5px/1.65 var(--car-codice); color: #CFCFD6;
  background: #070708; border-top: 1px solid #1F1F25; overflow-x: auto; white-space: pre;
}
pre.uscita::before { content: "Uscita"; display: block; margin-bottom: 6px; font: 600 12px/1 var(--car); color: #8A857E; }
/*#colori-leo  (generato da strumenti/sito_template/genera.py dal tema dati/temi/nero.toml) */
.c-testo_normale { color: #E6E6EA; }
.c-flusso { color: #FF3B4E; font-weight: 700; }
.c-dichiarazioni { color: #FF8A9A; font-weight: 700; }
.c-errori { color: #FF5C8A; font-weight: 700; }
.c-logici { color: #D9A3AA; }
.c-valori_speciali { color: #FF8C42; font-style: italic; }
.c-numeri { color: #FFBE8C; }
.c-testi { color: #FFB020; }
.c-interpolazione { color: #FFE08A; }
.c-libreria { color: #FFC7CE; }
.c-funzioni_utente { color: #FFC7CE; font-style: italic; }
.c-controlli { color: #D2D2D8; }
.c-proprieta { color: #A8A8B3; }
.c-commenti { color: #8A8A94; font-style: italic; }
.c-variabili { color: #F2C94C; }
.c-costanti { color: #6FCF97; }
.c-parametri { color: #FF9E7A; }
.c-campi { color: #A6C8FF; }
.c-eventi { color: #FF7B72; }
.c-operatori { color: #C4C4CC; }
.c-punteggiatura { color: #9A9AA6; }
/*/colori-leo*/

.copia {
  display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
  background: transparent; border: 1px solid #2B2B31; color: #B5B0A8;
  font: 600 12.5px/1 var(--car); padding: 6px 10px; border-radius: 7px; cursor: pointer;
  transition: color .15s, border-color .15s, background-color .15s;
}
.copia svg { width: 14px; height: 14px; }
.copia:hover { color: #fff; border-color: #55525A; }
.copia.copiato { color: #fff; background: var(--rosso); border-color: var(--rosso); }

/* ---------- 8. Piede ---------- */
.piede { position: relative; border-top: 1px solid var(--bordo); background: var(--fondo-piede); padding: 64px 0 32px; font-size: 14.5px; color: var(--testo-2); }
.piede-griglia { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 36px; }
.piede-marchio p { margin: 14px 0 0; max-width: 320px; }
.piede-marchio .piede-autore { font-size: 14px; color: var(--testo-3); }
.piede-marchio .piede-autore strong { color: var(--testo-2); font-weight: 600; }
.scelta-tema { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--bordo); border-radius: 10px; background: var(--fondo); }
.scelta-tema button {
  border: 0; background: transparent; color: var(--testo-3); font: 600 12.5px/1 var(--car); padding: 8px 12px; border-radius: 7px; cursor: pointer;
  min-height: 32px;
}
.scelta-tema button:hover { color: var(--testo); }
.scelta-tema button[aria-checked="true"] { background: var(--superficie-2); color: var(--testo); box-shadow: inset 0 0 0 1px var(--bordo-forte); }
.piede h2 { font: 600 14px/1 var(--car); color: var(--testo); margin: 6px 0 16px; letter-spacing: 0; }
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.piede a { color: var(--testo-2); text-decoration: none; }
.piede a:hover { color: var(--testo); }
.piede-fondo { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; justify-content: space-between; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--bordo); font-size: 13.5px; color: var(--testo-3); }
.piede-fondo p { margin: 0; }
@media (max-width: 760px) { .piede-griglia { grid-template-columns: 1fr 1fr; } .piede-marchio { grid-column: 1 / -1; } }

/* ---------- 9. Comparse ----------
   Il sito non fa comparire ogni sezione allo scorrimento: il contenuto c'e' subito (piu' veloce,
   niente sfarfallii). Le classi restano per compatibilita' con le pagine. */
.compari, .parole .p { opacity: 1; transform: none; }
.parole .p { display: inline; }
.avanzamento { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 150; transform-origin: 0 50%; transform: scaleX(0); background: var(--accento); pointer-events: none; }

/* ---------- 10. Pagine di testo (licenza, privacy, termini) ---------- */
.testa-pagina { position: relative; padding: clamp(80px, 11vw, 130px) 0 clamp(40px, 6vw, 60px); overflow: hidden; }
.testa-pagina::before {
  content: ""; position: absolute; inset: -40% -10% auto; height: 520px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--accento-rgb),.14), transparent 70%);
}
.testa-pagina h1 { font-size: clamp(38px, 6vw, 68px); position: relative; }
.testa-pagina .introduzione { margin-top: 20px; position: relative; }
.documento { padding-bottom: 110px; }
.documento h2 { font-size: 24px; margin: 2.2em 0 .7em; padding-top: .2em; }
.documento h2::before { content: ""; display: block; width: 32px; height: 1px; background: var(--accento); margin-bottom: 18px; }
.documento p, .documento li { color: var(--testo); opacity: .92; }
.documento ul, .documento ol { padding-left: 1.3em; }
.documento li { margin: .35em 0; }
.documento li::marker { color: var(--accento); }
.riquadro-breve { border: 1px solid var(--accento-linea); background: var(--accento-tenue); border-radius: 16px; padding: 22px 26px; }
.riquadro-breve h2 { margin-top: 0; font-size: 19px; }
.riquadro-breve h2::before { display: none; }
.riquadro-breve ul { margin: 0; }
.aggiornato { color: var(--testo-3); font-size: 14px; margin-top: 3em; }

/* Linea del tempo della licenza (licenza.html, index.html) */
.tempi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; list-style: none; margin: 0; padding: 0; }
.tempi .filo-tempi { position: absolute; left: 6%; right: 6%; top: 27px; height: 2px; }
.tempo { position: relative; padding-top: 72px; }
.tempo .nodo {
  position: absolute; top: 10px; left: 0; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--fondo); border: 1px solid var(--accento);
  color: var(--accento-vivo); font: 700 14px/1 var(--car); box-shadow: 0 0 0 6px var(--fondo), 0 0 30px -4px rgba(var(--accento-rgb),.6);
}
.tempo .quando { font: 700 13px/1 var(--car); letter-spacing: 0; color: var(--accento); margin-bottom: 10px; display: block; }
.tempo h3 { font-size: 22px; margin-bottom: 10px; }
.tempo p { color: var(--testo-2); margin: 0; }
@media (max-width: 760px) {
  .tempi { grid-template-columns: 1fr; gap: 34px; }
  .tempi .filo-tempi { display: none; }
  .tempo { padding: 0 0 0 58px; }
  .tempo .nodo { top: 0; }
}
.prezzo { display: grid; gap: 26px; grid-template-columns: 1fr 1fr; align-items: center; }
.prezzo .cifra { font: 700 clamp(34px, 5vw, 52px)/1 var(--car-titoli); }
.elenco-spunte { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.elenco-spunte li { position: relative; padding-left: 32px; color: var(--testo); }
.elenco-spunte li::before { content: ""; position: absolute; left: 0; top: .3em; width: 18px; height: 18px; border-radius: 50%; background: var(--accento-tenue); box-shadow: inset 0 0 0 1px var(--accento-scuro); }
.elenco-spunte li::after { content: ""; position: absolute; left: 6px; top: calc(.3em + 5px); width: 6px; height: 4px; border: solid var(--accento-vivo); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.domande details { border-bottom: 1px solid var(--bordo); padding: 18px 0; }
.domande summary { cursor: pointer; font-weight: 600; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after { content: "+"; color: var(--accento); font-size: 24px; line-height: 1; transition: transform .3s; }
.domande details[open] summary::after { transform: rotate(45deg); }
.domande details p { color: var(--testo-2); margin: 12px 0 0; }
@media (max-width: 760px) { .prezzo { grid-template-columns: 1fr; } }

/* =============================================================================
   11. HOME
   ============================================================================= */
.hero {
  position: relative; display: flex; align-items: center; min-height: min(860px, calc(100svh - var(--altezza-testata)));
  padding: clamp(36px, 6vh, 72px) 0 clamp(56px, 8vh, 96px); overflow: hidden; isolation: isolate;
}
.hero-sfondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-sfondo .alone {
  position: absolute; width: 1000px; height: 1000px; right: -220px; top: 50%; transform: translateY(-50%);
  background: radial-gradient(closest-side, rgba(var(--accento-rgb), .26), rgba(var(--accento-rgb), .07) 45%, transparent 70%);
  animation: respiro 10s ease-in-out infinite;
}
.hero-sfondo .alone.secondo { width: 640px; height: 640px; left: -280px; right: auto; top: 95%; background: radial-gradient(closest-side, rgba(var(--accento-rgb), .10), transparent 70%); animation-delay: -5s; }
@keyframes respiro { 0%, 100% { opacity: .75; transform: translateY(-50%) scale(1); } 50% { opacity: 1; transform: translateY(-50%) scale(1.05); } }
.hero-sfondo .griglia {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(var(--accento-rgb), .08) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accento-rgb), .08) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 70% 50%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 60% at 70% 50%, #000 10%, transparent 75%);
}
.hero-griglia { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hero .sopratitolo { margin-bottom: 24px; }
.manifesto { font-size: clamp(40px, 5.6vw, 80px); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; }
.manifesto em { display: inline-block; padding-right: .06em; }
.hero .sottotitolo { font-size: clamp(18px, 1.6vw, 21px); color: var(--testo-2); max-width: 580px; margin: 26px 0 36px; line-height: 1.58; }
.hero .nota-azioni { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 26px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--testo-3); }
.hero .nota-azioni li { display: inline-flex; align-items: center; gap: 8px; }
.hero .nota-azioni li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accento); }

/* La scena: codice vero dietro, il telefono con l'app in esecuzione davanti */
.scena-hero { position: relative; min-height: 560px; display: grid; place-items: center; }
.scena-hero .hero-codice {
  position: absolute; left: 0; top: 50%; width: min(440px, 78%); transform: translateY(-58%) rotate(-3deg);
  box-shadow: var(--ombra), 0 0 0 1px rgba(255, 255, 255, .03);
}
.scena-hero .hero-codice pre.codice { font-size: 13.5px; padding: 18px 20px; line-height: 1.75; }
.scena-hero .telefono { position: relative; margin-left: 38%; width: min(290px, 60%); transform: rotate(3deg); animation: galleggia 8s ease-in-out infinite; }
.bollino {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px;
  border-radius: 14px; background: var(--superficie); border: 1px solid var(--bordo); box-shadow: var(--ombra-scheda);
  font: 600 13.5px/1.25 var(--car); color: var(--testo); white-space: nowrap;
}
.bollino small { display: block; font-weight: 500; color: var(--testo-3); font-size: 12px; }
.bollino .segno { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--accento); color: #fff; flex: none; }
.bollino .segno svg { width: 18px; height: 18px; }
.scena-hero .bollino.b1 { left: 4%; bottom: 7%; animation: galleggia 9s ease-in-out -3s infinite; }
.scena-hero .bollino.b2 { right: -2%; top: 8%; animation: galleggia 10s ease-in-out -6s infinite; }
@keyframes galleggia { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@media (max-width: 960px) {
  .hero { min-height: 0; }
  .hero-griglia { grid-template-columns: 1fr; }
  .scena-hero { min-height: 480px; margin-top: 8px; }
  .scena-hero .hero-codice { width: min(420px, 82%); }
  .scena-hero .telefono { margin-left: 40%; width: min(250px, 52%); }
}
@media (max-width: 520px) {
  .scena-hero { min-height: 420px; }
  .scena-hero .hero-codice { top: 44%; width: 86%; }
  .scena-hero .hero-codice pre.codice { font-size: 11.5px; padding: 14px; }
  .scena-hero .telefono { margin-left: 44%; width: 50%; }
  .scena-hero .bollino.b2 { display: none; }
  .scena-hero .bollino.b1 { left: 0; bottom: 2%; }
}

/* Cornice da telefono (le schermate sono foto vere dell'app, 390x844 punti) */
.telefono {
  --raggio-t: clamp(30px, 14%, 46px);
  position: relative; aspect-ratio: 390 / 844; padding: 3.2%; border-radius: var(--raggio-t);
  background: linear-gradient(150deg, #34343C, #0C0C0F 40%, #1A1A1F);
  box-shadow: 0 0 0 1px #45454E, 0 0 0 2px #09090B, inset 0 1px 1px rgba(255, 255, 255, .12),
    0 44px 80px -34px rgba(0, 0, 0, .85), 0 0 110px -36px rgba(var(--accento-rgb), .55);
}
.telefono::after { /* tasto laterale */
  content: ""; position: absolute; right: -3px; top: 22%; width: 3px; height: 11%; border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, #2A2A30, #4A4A52);
}
.telefono .schermo { position: relative; width: 100%; height: 100%; border-radius: calc(var(--raggio-t) * .8); overflow: hidden; background: #000; }
.telefono .schermo img { width: 100%; height: 100%; object-fit: cover; }
.telefono .schermo::after { /* riflesso del vetro */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .07), transparent 32%);
}

/* Nastro di parole chiave */
.nastro { position: relative; overflow: hidden; border-block: 1px solid var(--bordo); background: var(--fondo-piede); padding: 20px 0; }
.nastro::before, .nastro::after { content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 1; pointer-events: none; }
.nastro::before { left: 0; background: linear-gradient(90deg, var(--fondo-piede), transparent); }
.nastro::after { right: 0; background: linear-gradient(-90deg, var(--fondo-piede), transparent); }
.nastro-traccia { display: flex; width: max-content; gap: 0; animation: nastro 60s linear infinite; }
.nastro:hover .nastro-traccia { animation-play-state: paused; }
.nastro-traccia span { font: 500 clamp(20px, 2.4vw, 30px)/1 var(--car-manifesto); font-style: italic; color: var(--testo-3); padding: 0 26px; white-space: nowrap; transition: color .3s; }
.nastro-traccia span:hover { color: var(--accento-vivo); }
.nastro-traccia span::after { content: "✦"; font-style: normal; font-size: .5em; color: var(--accento-scuro); margin-left: 52px; vertical-align: middle; }
@keyframes nastro { to { transform: translateX(-50%); } }

/* L'idea: dal codice alla frase */
.idea { overflow: hidden; }
.idea .alone-idea { position: absolute; left: 50%; top: 30%; width: 1000px; height: 700px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(var(--accento-rgb),.13), transparent 70%); pointer-events: none; }
.traduzione { display: grid; grid-template-columns: 1.1fr auto 1fr; gap: 28px; align-items: center; margin-top: 60px; }
.traduzione pre.codice { font-size: clamp(13px, 1.12vw, 16px); padding: 28px 24px; line-height: 1.9; }
.traduzione .tk { border-radius: 4px; transition: background-color .4s, box-shadow .4s; }
.traduzione .tk.acceso { background: rgba(var(--accento-rgb),.16); box-shadow: 0 0 0 3px rgba(var(--accento-rgb),.16); }
.freccia-oro { width: 70px; color: var(--accento); }
.freccia-oro path { stroke-dasharray: 90; stroke-dashoffset: 90; transition: stroke-dashoffset 1.2s var(--curva) .3s; }
.visibile .freccia-oro path { stroke-dashoffset: 0; }
.frase { font: 400 clamp(24px, 2.6vw, 36px)/1.45 var(--car-manifesto); color: var(--testo-2); }
.frase .fp { transition: color .4s; background-image: var(--grad-accento); background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 100%; transition: color .4s, background-size .6s var(--curva); }
.frase .fp.acceso { color: var(--accento-vivo); background-size: 100% 2px; }
.cursore-scrittura::after { content: ""; display: inline-block; width: .55em; height: 1.1em; margin-left: 2px; vertical-align: text-bottom; background: var(--rosso); animation: lampeggio 1s steps(1) infinite; }
@keyframes lampeggio { 50% { opacity: 0; } }
.confronto { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 90px; }
.confronto .finestra-codice { height: 100%; }
.confronto .etichetta-confronto { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font: 700 13px/1 var(--car); letter-spacing: 0; color: var(--testo-3); }
.confronto .leo .etichetta-confronto { color: var(--accento); }
.errore-italiano pre { margin: 0; padding: 22px; font: 13.5px/1.65 var(--car-codice); color: #DADAE0; white-space: pre-wrap; background: #0B0B0D; }
.errore-italiano .e-tipo { color: #FFB020; font-weight: 700; }
.errore-italiano .e-num { color: #7A7A84; }
.errore-italiano .e-car { color: #FF3B4E; }
.errore-italiano .e-ok { color: var(--verde); }
@media (max-width: 900px) {
  .traduzione { grid-template-columns: 1fr; }
  .traduzione pre.codice { font-size: 13px; padding: 20px 16px; }
  .confronto { gap: 34px; }
  .freccia-oro { transform: rotate(90deg); margin: -6px auto; }
  .confronto { grid-template-columns: 1fr; }
}

/* Cosa puoi fare: schede con illustrazioni */
.poteri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.potere { padding: 0; display: flex; flex-direction: column; }
.potere .illustrazione { height: 170px; display: grid; place-items: center; border-bottom: 1px solid var(--bordo); background: radial-gradient(ellipse at 50% 120%, rgba(var(--accento-rgb),.12), transparent 60%); }
.potere .illustrazione svg { width: 150px; height: 130px; overflow: visible; }
.potere .corpo { padding: 22px 22px 26px; }
.potere .corpo h3 { font-size: 19px; }
.potere .corpo p { font-size: 15.5px; }
@media (max-width: 1080px) { .poteri { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .poteri { grid-template-columns: 1fr; } }
/* animazioni delle illustrazioni: partono quando la scheda e' visibile */
.il { transform-box: fill-box; transform-origin: center; animation-play-state: paused; }
.visibile .il { animation-play-state: running; }
.il-sale { animation: il-sale 2.8s var(--curva) infinite; }
@keyframes il-sale { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-26px); } 60% { transform: translateY(-26px); } }
.il-gira { animation: il-gira 2.8s linear infinite; }
@keyframes il-gira { 0% { transform: scaleX(1); } 50% { transform: scaleX(.15); } 100% { transform: scaleX(1); } }
.il-barra { transform-origin: bottom; animation: il-barra 3.2s var(--curva) infinite; }
@keyframes il-barra { 0% { transform: scaleY(.1); } 35%, 80% { transform: scaleY(1); } 100% { transform: scaleY(.1); } }
.il-orbita { animation: ruota 8s linear infinite; transform-origin: 75px 65px; transform-box: view-box; }
.il-onda { animation: il-onda 1.6s ease-in-out infinite; transform-origin: center; }
@keyframes il-onda { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.il-clic { animation: il-clic 3s var(--curva) infinite; }
@keyframes il-clic { 0%, 30% { transform: translate(34px, 30px); } 45% { transform: translate(0, 0); } 52% { transform: translate(0, 0) scale(.85); } 58%, 100% { transform: translate(0, 0) scale(1); } }
.il-appare { animation: il-appare 3s ease infinite; }
@keyframes il-appare { 0%, 52% { opacity: 0; } 60%, 92% { opacity: 1; } 100% { opacity: 0; } }
.il-cartella { animation: il-cartella 3.6s var(--curva) infinite; }
@keyframes il-cartella { 0%, 15% { transform: translate(0, 0); opacity: 1; } 55%, 80% { transform: translate(var(--dx), var(--dy)) scale(.6); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.6); opacity: 0; } }
.il-traccia { stroke-dasharray: 400; stroke-dashoffset: 400; animation: il-traccia 4s ease-in-out infinite; }
@keyframes il-traccia { 0% { stroke-dashoffset: 400; } 60%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -400; } }
.il-lampeggia { animation: il-lampeggia 1.4s ease-in-out infinite; }
@keyframes il-lampeggia { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* Come funziona: i tre passi con l'interfaccia animata */
.tre-passi { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.elenco-passi { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: passo; }
.elenco-passi button {
  width: 100%; text-align: left; display: grid; grid-template-columns: 54px 1fr; gap: 4px 16px; align-items: start;
  background: transparent; border: 1px solid transparent; border-radius: 16px; padding: 20px; color: inherit; font: inherit; cursor: pointer;
  position: relative; overflow: hidden; transition: background-color .3s, border-color .3s;
}
.elenco-passi button:hover { background: var(--riflesso); }
.elenco-passi .num { grid-row: span 2; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font: 700 20px/1 var(--car-manifesto); color: var(--testo-3); border: 1px solid var(--bordo-forte); transition: all .4s; }
.elenco-passi strong { font: 700 22px/1.2 var(--car-titoli); color: var(--testo-2); transition: color .3s; padding-top: 4px; }
.elenco-passi span.descr { color: var(--testo-3); font-size: 16px; transition: color .3s; }
.elenco-passi .barretta { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--grad-accento); transform: scaleX(0); transform-origin: left; }
.elenco-passi [aria-current="step"] { background: rgba(var(--accento-rgb),.05); border-color: var(--accento-linea); }
.elenco-passi [aria-current="step"] .num { color: var(--su-accento); background: var(--grad-accento); border-color: transparent; box-shadow: 0 0 30px -6px rgba(var(--accento-rgb),.7); }
.elenco-passi [aria-current="step"] strong { color: var(--testo); }
.elenco-passi [aria-current="step"] span.descr { color: var(--testo-2); }
.elenco-passi [aria-current="step"] .barretta { animation: barretta var(--durata-passo, 4.5s) linear forwards; }
.fermo .elenco-passi [aria-current="step"] .barretta { animation: none; transform: scaleX(1); }
@keyframes barretta { to { transform: scaleX(1); } }

.studio { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--bordo-forte); background: #0B0B0D; box-shadow: var(--ombra), 0 0 0 1px rgba(var(--accento-rgb),.06), 0 0 120px -40px rgba(var(--accento-rgb),.35); font: 13px/1.4 var(--car); user-select: none; }
.studio-barra { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; background: #121215; border-bottom: 1px solid var(--bordo); color: var(--testo-3); font-size: 12.5px; }
.studio-barra img { width: 18px; height: 18px; }
.studio-barra .esegui { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 6px; background: #1C1C21; color: var(--testo-2); font-weight: 600; transition: background-color .3s, color .3s, transform .2s; }
.studio-barra .esegui svg { width: 12px; height: 12px; }
.studio[data-passo="3"] .studio-barra .esegui { background: var(--rosso); color: #fff; animation: premi 4.5s var(--curva) both; }
@keyframes premi { 0%, 12% { transform: scale(1); } 16% { transform: scale(.9); } 22%, 100% { transform: scale(1); } }
.studio-corpo { position: relative; display: grid; grid-template-columns: 92px 1fr; height: 330px; }
.studio-casella { border-right: 1px solid var(--bordo); padding: 10px 8px; display: grid; gap: 6px; align-content: start; background: #0E0E11; }
.studio-casella span { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 5px; color: var(--testo-3); font-size: 11px; }
.studio-casella span i { width: 14px; height: 10px; border: 1px solid currentColor; border-radius: 2px; flex: none; }
.studio-casella span.scelto { color: var(--accento-vivo); background: rgba(var(--accento-rgb),.1); }
.studio-area { position: relative; overflow: hidden; background-image: radial-gradient(#26262D 1px, transparent 1px); background-size: 14px 14px; }
.modulo { position: absolute; left: 12%; top: 11%; width: 64%; height: 64%; background: #F4F2EC; border-radius: 8px; box-shadow: 0 20px 40px -20px #000; color: #222; overflow: hidden; transition: transform .6s var(--curva), opacity .6s; }
.modulo .titolo-modulo { height: 24px; background: #E6E2D8; display: flex; align-items: center; padding: 0 10px; font-size: 11px; color: #555; }
.modulo .etichetta { position: absolute; left: 10%; top: 26%; font-size: 13px; color: #555; }
.modulo .casella { position: absolute; left: 10%; top: 42%; width: 80%; height: 24px; background: #fff; border: 1px solid #CFCBC0; border-radius: 4px; }
.modulo .pulsante-modulo { position: absolute; right: 10%; bottom: 12%; width: 32%; height: 30px; border-radius: 6px; background: var(--rosso); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; opacity: 0; transform: scale(.6); transition: opacity .4s, transform .5s var(--curva); }
.studio[data-passo="1"] .pulsante-modulo { transition-delay: 1.9s; }
.studio:not([data-passo="0"]) .pulsante-modulo { opacity: 1; transform: none; }
.fantasma { position: absolute; left: 8px; top: 40px; z-index: 3; width: 72px; height: 26px; border-radius: 6px; border: 1px dashed var(--accento); background: rgba(var(--accento-rgb),.18); opacity: 0; }
.puntatore { position: absolute; left: 40px; top: 48px; width: 18px; height: 22px; z-index: 3; opacity: 0; filter: drop-shadow(0 2px 3px #000); }
.studio[data-passo="1"] .puntatore { animation: trascina 4.5s var(--curva) both; }
.studio[data-passo="1"] .fantasma { animation: fantasma 4.5s var(--curva) both; }
@keyframes trascina { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 1; transform: translate(0, 0); } 20% { transform: translate(0, 0) scale(.9); } 45% { transform: translate(var(--tx), var(--ty)) scale(.9); opacity: 1; } 55% { transform: translate(var(--tx), var(--ty)) scale(1); opacity: 1; } 75%, 100% { opacity: 0; transform: translate(var(--tx), var(--ty)); } }
@keyframes fantasma { 0%, 18% { opacity: 0; transform: translate(0, 0); } 22% { opacity: 1; } 45% { opacity: 1; transform: translate(var(--tx), var(--ty)); } 50%, 100% { opacity: 0; transform: translate(var(--tx), var(--ty)); } }
.editor-mini { position: absolute; inset: 0; background: #0B0B0D; padding: 22px 18px; opacity: 0; transform: translateX(40px); transition: opacity .5s, transform .6s var(--curva); pointer-events: none; }
.studio[data-passo="2"] .editor-mini { opacity: 1; transform: none; }
.editor-mini .schede-editor { display: flex; gap: 4px; margin: -8px 0 16px; }
.editor-mini .schede-editor span { font-size: 11px; padding: 4px 10px; border-radius: 5px 5px 0 0; color: var(--testo-3); border-bottom: 1px solid var(--bordo); }
.editor-mini .schede-editor span:first-child { color: var(--testo); border-bottom-color: var(--rosso); }
.editor-mini pre { margin: 0; font: 14px/1.9 var(--car-codice); white-space: pre; color: #E6E6EA; }
.editor-mini .numeri-riga { position: absolute; left: 0; top: 56px; width: 14px; text-align: right; color: #55555E; font: 12px/2.22 var(--car-codice); }
.app-in-esecuzione {
  position: absolute; left: 50%; top: 50%; width: 62%; transform: translate(-50%, -40%) scale(.85); opacity: 0;
  background: #F4F2EC; color: #222; border-radius: 10px; overflow: hidden; box-shadow: 0 40px 80px -20px #000, 0 0 0 1px rgba(255,255,255,.1);
  transition: opacity .5s, transform .6s var(--curva); z-index: 2;
}
.studio[data-passo="3"] .app-in-esecuzione { opacity: 1; transform: translate(-50%, -50%); transition-delay: .7s; }
.studio[data-passo="3"] .modulo { opacity: .15; transform: scale(.96); }
.app-in-esecuzione .titolo-modulo { height: 26px; background: #E6E2D8; display: flex; align-items: center; padding: 0 10px; font-size: 11px; color: #555; }
.app-in-esecuzione .contenuto { padding: 18px; display: grid; gap: 12px; }
.app-in-esecuzione .riga-app { display: flex; gap: 10px; align-items: center; }
.app-in-esecuzione .casella-app { flex: 1; height: 28px; border: 1px solid #CFCBC0; border-radius: 5px; background: #fff; padding: 0 8px; display: flex; align-items: center; font-size: 13px; }
.app-in-esecuzione .tasto-app { background: var(--rosso); color: #fff; border-radius: 6px; padding: 7px 14px; font-weight: 600; font-size: 12px; }
.app-in-esecuzione .saluto { font: 700 22px/1.2 var(--car-titoli); color: #111; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--curva); }
.studio[data-passo="3"] .saluto { opacity: 1; transform: none; transition-delay: 2.4s; }
.studio[data-passo="3"] .tasto-app { animation: premi-app 4.5s both; }
@keyframes premi-app { 0%, 48% { transform: scale(1); } 52% { transform: scale(.9); filter: brightness(1.2); } 58%, 100% { transform: scale(1); } }
@media (max-width: 900px) { .tre-passi { grid-template-columns: 1fr; } .studio { order: -1; } .studio-corpo { height: 280px; } }
@media (max-width: 480px) { .studio-corpo { grid-template-columns: 70px 1fr; } .studio-casella span { font-size: 10px; padding: 5px 3px; } .editor-mini pre { font-size: 12px; } }

/* Per chi e' */
.pubblico { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pubblico .scheda { padding: 30px 26px; }
.pubblico .icona { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 22px; background: var(--accento-tenue); box-shadow: inset 0 0 0 1px var(--accento-linea); color: var(--accento-vivo); transition: transform .5s var(--curva); }
.pubblico .scheda:hover .icona { transform: rotate(-8deg) scale(1.08); }
.pubblico .icona svg { width: 26px; height: 26px; }
@media (max-width: 1000px) { .pubblico { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .pubblico { grid-template-columns: 1fr; } }

/* Numeri */
.numeri { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--bordo); border-radius: 22px; overflow: hidden; background: var(--bordo); gap: 1px; }
.numero-grande { background: var(--fondo); padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 34px); position: relative; overflow: hidden; }
.numero-grande::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--grad-accento); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--curva) .3s; }
.numero-grande.visibile::after { transform: scaleX(1); }
.numero-grande .cifra { display: block; font: 700 clamp(46px, 5.4vw, 76px)/1 var(--car-manifesto); letter-spacing: -.03em; margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.numero-grande strong { display: block; font-size: 17px; margin-bottom: 6px; }
.numero-grande p { color: var(--testo-3); font-size: 15px; margin: 0; }
@media (max-width: 900px) { .numeri { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .numeri { grid-template-columns: 1fr; } }

/* Invito finale */
.invito { text-align: center; overflow: hidden; }
.invito .anelli { position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; transform: translate(-50%, -50%); pointer-events: none; }
.invito .anelli span { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(var(--accento-rgb),.12); animation: onda-anello 6s linear infinite; }
.invito .anelli span:nth-child(2) { animation-delay: -2s; }
.invito .anelli span:nth-child(3) { animation-delay: -4s; }
@keyframes onda-anello { 0% { transform: scale(.2); opacity: 0; } 20% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.invito h2 { font-size: clamp(40px, 6.5vw, 88px); letter-spacing: -.035em; margin-bottom: 24px; position: relative; }
.invito .introduzione { margin: 0 auto 40px; position: relative; }
.invito .azioni { justify-content: center; position: relative; }

/* Link con freccia */
.link-freccia { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--accento-vivo); text-decoration: none; }
.link-freccia span { transition: transform .3s var(--curva); }
.link-freccia:hover span { transform: translateX(4px); }
.link-freccia:hover { color: var(--accento-vivo); text-decoration: underline; }

/* Perche' in italiano: tre ostacoli */
.tre-ostacoli { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tre-ostacoli li { position: relative; padding: 26px 24px 24px; border: 1px solid var(--bordo); border-radius: 18px; background: var(--superficie); }
.tre-ostacoli .num-ostacolo { font: 600 13px/1 var(--car-codice); color: var(--accento-vivo); }
.tre-ostacoli h3 { font-size: 21px; margin: 12px 0 8px; }
.tre-ostacoli p { color: var(--testo-2); margin: 0; font-size: 16px; }
@media (max-width: 860px) { .tre-ostacoli { grid-template-columns: 1fr; } }

/* PC e telefono */
.mondi { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.mondo { padding: clamp(24px, 3vw, 38px); display: flex; flex-direction: column; gap: 18px; }
.mondo > p { color: var(--testo-2); font-size: 17px; }
.mondo-testa { display: flex; align-items: center; gap: 16px; }
.mondo-icona { width: 56px; height: 56px; flex: none; border-radius: 16px; display: grid; place-items: center; background: var(--grad-accento); color: #fff; box-shadow: 0 14px 30px -14px rgba(var(--accento-rgb), .8); }
.mondo-icona svg { width: 28px; height: 28px; }
.mondo-sopra { margin: 0 0 4px; font: 700 13px/1 var(--car); letter-spacing: 0; color: var(--accento-vivo); }
.mondo h3 { font-size: clamp(24px, 2.4vw, 30px); margin: 0; }
.mondo .elenco-spunte { gap: 10px; }
.mondo .azioni { margin-top: auto; padding-top: 6px; gap: 18px; }
@media (max-width: 860px) { .mondi { grid-template-columns: 1fr; } }

/* Vetrina del telefono: elenco a schede + un telefono con le schermate vere */
.vetrina { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 6vw, 90px); align-items: center; }
.vetrina-voci { display: grid; gap: 8px; }
.vetrina-voci button {
  display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; width: 100%; text-align: left;
  padding: 16px 18px; border-radius: 16px; border: 1px solid transparent; background: transparent; color: var(--testo-2);
  font: inherit; cursor: pointer; transition: background-color .3s, border-color .3s, color .3s;
}
.vetrina-voci button:hover { background: var(--riflesso); color: var(--testo); }
.vetrina-voci .vt-num { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 700 15px/1 var(--car); border: 1px solid var(--bordo-forte); color: var(--testo-3); transition: all .3s; }
.vetrina-voci strong { display: block; font-size: 18.5px; color: var(--testo); margin-bottom: 3px; }
.vetrina-voci .vt-descr { display: block; font-size: 15.5px; line-height: 1.5; }
.vetrina-voci [aria-selected="true"] { background: var(--superficie); border-color: var(--accento-linea); color: var(--testo-2); box-shadow: var(--ombra-scheda); }
.vetrina-voci [aria-selected="true"] .vt-num { background: var(--grad-accento); color: #fff; border-color: transparent; }
.vetrina-scena { position: relative; }
.vetrina-scena::before { content: ""; position: absolute; inset: -12% -30%; background: radial-gradient(closest-side, rgba(var(--accento-rgb), .22), transparent 70%); z-index: -1; }
.vetrina .telefono { width: min(310px, 70vw); }
.vetrina-foto { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.03); transition: opacity .6s var(--curva), transform .8s var(--curva); }
.vetrina-foto.attiva { opacity: 1; transform: none; }
.vetrina-foto img { width: 100%; height: 100%; object-fit: cover; }
.vetrina-foto[hidden] { display: block; }
@media (max-width: 860px) {
  .vetrina { grid-template-columns: 1fr; }
  .vetrina-scena { order: -1; justify-self: center; }
  .vetrina .telefono { width: min(260px, 64vw); }
  .vetrina-voci { grid-auto-flow: column; grid-auto-columns: minmax(250px, 80%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
  .vetrina-voci::-webkit-scrollbar { display: none; }
  .vetrina-voci button { scroll-snap-align: center; border-color: var(--bordo); }
}

/* Esempi di codice a schede */
.schede-codice-voci { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.schede-codice-voci button {
  height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--bordo-forte); background: transparent;
  color: var(--testo-2); font: 600 15px/1 var(--car); cursor: pointer; transition: all .25s var(--curva);
}
.schede-codice-voci button:hover { color: var(--testo); border-color: var(--testo-3); }
.schede-codice-voci [aria-selected="true"] { background: var(--grad-accento); color: #fff; border-color: transparent; }
.scheda-codice-pannello .finestra-codice .barra, .py-leo .finestra-codice .barra { padding-top: 8px; padding-bottom: 8px; min-height: 44px; }
.scheda-codice-pannello pre.codice { font-size: 15px; }
.scheda-codice-pannello pre.uscita u { text-decoration-color: var(--accento-vivo); color: #fff; }
.codice-con-telefono { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 34px; align-items: center; }
.telefono.piccolo { width: 230px; }
.nota-codice { color: var(--testo-2); margin: 18px 0 0; font-size: 16px; }
@media (max-width: 760px) { .codice-con-telefono { grid-template-columns: 1fr; } .telefono.piccolo { display: none; } }
.py-leo { margin-top: clamp(60px, 8vw, 100px); }
.intestazione-py h3 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 10px; }
.intestazione-py p { color: var(--testo-2); max-width: 680px; }
.confronto-py { margin-top: 26px; }
.confronto-py pre.codice { font-size: 14px; }

/* Anteprime della videoteca in home */
.intestazione-con-azione { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.intestazione-con-azione .introduzione { margin-bottom: 0; }

/* In arrivo */
.in-arrivo {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(26px, 5vw, 70px); align-items: center;
  padding: clamp(28px, 5vw, 60px); border-radius: 28px; border: 1px dashed var(--accento-linea);
  background: radial-gradient(ellipse at 100% 0%, var(--accento-tenue), transparent 60%), var(--superficie);
}
.in-arrivo .titolo-sezione { font-size: clamp(30px, 4vw, 48px); }
.gettoni { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.gettoni li { padding: 10px 16px; border-radius: 999px; background: var(--fondo); border: 1px solid var(--bordo); font-weight: 600; font-size: 15px; }
@media (max-width: 860px) { .in-arrivo { grid-template-columns: 1fr; } }
.in-arrivo.arrivato { border-style: solid; }
.gettoni-ok li { display: inline-flex; align-items: center; gap: 6px; }
.gettoni-poi { margin: 22px 0 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--testo-2); font-weight: 600; }
.etichetta-poi { display: inline-block; padding: 6px 11px; border-radius: 999px; border: 1px dashed var(--accento-linea); color: var(--accento-vivo); font: 700 13px/1 var(--car); letter-spacing: 0; }

/* Domande in home */
.domande-griglia { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.domande-griglia .titolo-sezione { font-size: clamp(32px, 4vw, 52px); }
@media (max-width: 860px) { .domande-griglia { grid-template-columns: 1fr; } }
.invito-stemma { width: 96px; height: 96px; margin: 0 auto 26px; filter: drop-shadow(0 20px 40px rgba(var(--accento-rgb), .45)); position: relative; }

/* =============================================================================
   12. TEMPLATE
   ============================================================================= */
.strumenti-galleria { position: sticky; top: var(--altezza-testata); z-index: 20; background: var(--velo-testata); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--bordo); padding: 14px 0; }
.strumenti-galleria .contenitore { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.riga-strumenti { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cerca { position: relative; flex: 1 1 260px; }
.cerca svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--testo-3); pointer-events: none; }
.cerca input {
  width: 100%; height: 44px; padding: 0 16px 0 42px; border-radius: 999px; border: 1px solid var(--bordo-forte);
  background: var(--superficie); color: var(--testo); font: 16px var(--car); transition: border-color .2s, box-shadow .2s;
}
.cerca input::placeholder { color: var(--testo-3); }
.cerca input:focus { outline: none; border-color: var(--accento-scuro); box-shadow: 0 0 0 4px rgba(var(--accento-rgb),.12); }
.filtri { flex: 1 1 auto; min-width: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.filtri::-webkit-scrollbar { display: none; }
.filtri { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); padding-right: 40px; }
.filtro {
  flex: none; height: 36px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--bordo-forte); background: transparent;
  color: var(--testo-2); font: 600 14px/1 var(--car); cursor: pointer; transition: all .25s var(--curva); white-space: nowrap;
}
.filtro:hover { color: var(--testo); border-color: var(--testo-3); }
.filtro[aria-pressed="true"] { background: var(--grad-accento); color: var(--su-accento); border-color: transparent; }
.filtro .quanti { opacity: .6; margin-left: 4px; font-weight: 500; }
.livelli { display: flex; gap: 6px; }
.conteggio { font-size: 14px; color: var(--testo-3); margin-left: auto; }
.galleria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding: 40px 0 120px; }
.modello { display: flex; flex-direction: column; padding: 0; transition: opacity .4s, transform .5s var(--curva), border-color .3s, box-shadow .4s; }
.modello.nascosto { display: none; }
.modello.entra { animation: entra .6s var(--curva) both; animation-delay: var(--ritardo, 0s); }
@keyframes entra { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.modello header { padding: 24px 24px 18px; }
.modello .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.distintivo { display: inline-flex; align-items: center; gap: 6px; font: 700 13px/1 var(--car); letter-spacing: 0; padding: 6px 10px; border-radius: 999px; background: var(--riflesso); color: var(--testo-2); border: 1px solid var(--bordo); }
.distintivo.cat { color: var(--accento-vivo); border-color: var(--accento-linea); background: var(--accento-tenue); }
.distintivo.liv::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.distintivo.facile { color: #8FDDAE; }
.distintivo.medio { color: var(--accento-vivo); }
.distintivo.avanzato { color: #FF8A9A; }
.distintivo.tipo { color: var(--testo-3); }
.modello h2 { font-size: 22px; margin-bottom: 8px; }
.modello header p { color: var(--testo-2); margin: 0; font-size: 15.5px; }
.modello .finestra-codice { margin: 0 16px 16px; box-shadow: none; flex: 1; display: flex; flex-direction: column; }
.modello pre.codice { font-size: 13.5px; max-height: 420px; flex: 1; }
.modello .nota-file { margin: -4px 20px 18px; font-size: 13.5px; color: var(--testo-3); }
.nessun-risultato { text-align: center; padding: 60px 0 140px; color: var(--testo-2); }
@media (max-width: 980px) { .galleria { grid-template-columns: minmax(0, 1fr); } }
.modello { min-width: 0; }
@media (max-width: 600px) {
  .strumenti-galleria { position: static; }
  .conteggio { margin-left: 0; width: 100%; }
  .livelli { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .livelli::-webkit-scrollbar { display: none; }
  .galleria { padding-top: 24px; }
  .modello header { padding: 20px 18px 14px; }
  .modello .finestra-codice { margin: 0 10px 10px; }
}

/* =============================================================================
   13. SCARICA
   ============================================================================= */
.scarica-hero { text-align: center; }
.scarica-hero .testa-pagina::before { inset: -30% -10% auto; }
.pannello-download {
  position: relative; max-width: 760px; margin: 0 auto; padding: clamp(28px, 5vw, 52px);
  border-radius: 26px; border: 1px solid var(--accento-linea); text-align: center; overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--accento-rgb),.16), transparent 60%), var(--superficie);
}
.pannello-download img.stemma { width: 88px; height: 88px; margin: 0 auto 20px; filter: drop-shadow(0 16px 30px rgba(var(--accento-rgb),.35)); }
.pannello-download h2 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 10px; }
.pannello-download .dettagli { color: var(--testo-3); font-size: 14.5px; margin: 18px 0 0; }
.pannello-download .spiegazione-arrivo { color: var(--testo-2); font-size: 15px; margin: 16px auto 0; max-width: 460px; }
.requisiti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.requisiti .scheda { padding: 22px; }
.requisiti dt { font: 700 13px/1 var(--car); letter-spacing: 0; color: var(--accento); margin-bottom: 10px; }
.requisiti dd { margin: 0; font-size: 17px; }
.passi-installa { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: installa; }
.passi-installa li { counter-increment: installa; }
.passi-installa .scheda::after { content: counter(installa); position: absolute; right: 18px; top: 6px; font: italic 700 86px/1 var(--car-manifesto); color: rgba(var(--accento-rgb),.1); }
.smartscreen { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.finto-avviso { background: #0B4A8B; color: #fff; border-radius: 12px; padding: 26px; font: 14px/1.5 "Segoe UI", system-ui, sans-serif; box-shadow: var(--ombra); }
.finto-avviso strong { display: block; font-size: 22px; font-weight: 600; margin-bottom: 14px; }
.finto-avviso .dati-app { margin: 16px 0 22px; font-size: 13px; opacity: .95; }
.finto-avviso .tasti-avviso { display: flex; gap: 10px; justify-content: flex-end; }
.finto-avviso .tasti-avviso span { border: 1px solid rgba(255,255,255,.8); padding: 6px 18px; font-size: 13px; }
.finto-avviso .tasti-avviso span.evid { box-shadow: 0 0 0 3px var(--accento-vivo); border-color: #fff; }
@media (max-width: 860px) { .requisiti, .passi-installa, .smartscreen { grid-template-columns: 1fr; } }
.scarica-due { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.scarica-due .pannello-download { max-width: none; margin: 0; }
.pannello-download .piattaforma { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--accento-vivo); background: var(--accento-tenue); box-shadow: inset 0 0 0 1px var(--accento-linea); }
.pannello-download .piattaforma svg { width: 22px; height: 22px; }
.nota-apk { margin: 14px 0 0; font-size: 15px; }
.nota-apk a { text-decoration: none; font-weight: 600; }
.nota-offline { margin-top: 28px; text-align: center; color: var(--testo-2); font-size: 15.5px; }
.nota-offline strong { color: var(--testo); }
@media (max-width: 860px) { .scarica-due { grid-template-columns: 1fr; } }

/* =============================================================================
   14. 404
   ============================================================================= */
.pagina-404 { min-height: calc(100svh - var(--altezza-testata)); display: grid; place-items: center; text-align: center; padding: 60px 0; position: relative; overflow: hidden; }
.pagina-404 .cifra-404 { font: 800 clamp(120px, 24vw, 260px)/.9 var(--car-manifesto); letter-spacing: -.05em; }
.pagina-404 > .contenitore { width: 100%; }
.pagina-404 pre.codice { max-width: 100%; display: inline-block; text-align: left; border-radius: 12px; margin: 26px 0 34px; border: 1px solid var(--bordo); }

/* =============================================================================
   15. Movimento ridotto
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js .compari, .js .parole .p { opacity: 1; transform: none; filter: none; }
  .nastro-traccia { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .nastro-traccia span:nth-child(n+16) { display: none; }
  .nastro-traccia span { padding: 4px 14px; }
  .nastro-traccia span::after { margin-left: 28px; }
  .il { animation: none !important; }
  .passo-racconto { opacity: 1; }
}

/* Template: come usare */
.come-usare { list-style: none; counter-reset: uso; display: flex; flex-wrap: wrap; gap: 12px 30px; padding: 0; margin: 34px 0 0; position: relative; }
.come-usare li { counter-increment: uso; position: relative; padding-left: 42px; min-height: 30px; line-height: 30px; color: var(--testo-2); font-size: 16px; }
.come-usare li::before { content: counter(uso); position: absolute; left: 0; top: 0; width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 700 14px/1 var(--car); color: var(--su-accento); background: var(--grad-accento); }
.come-usare strong { color: var(--testo); }

/* =============================================================================
   16. VIDEOTECA (video.html) e anteprime dei video in home (js/video.js)
   ============================================================================= */
.v-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 22px 20px; }
.v-fila { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(250px, calc((100% - 60px) / 4)); overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 14px; margin: -4px -2px 0; scrollbar-width: thin; scrollbar-color: var(--bordo-forte) transparent; }
.v-fila > * { scroll-snap-align: start; }
@media (max-width: 700px) { .v-fila { grid-auto-columns: 78%; } }
.v-scheda { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.v-copertina {
  position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; isolation: isolate;
  background: #0B0B0E; border: 1px solid var(--bordo); color: #fff; text-decoration: none;
  transition: transform .45s var(--curva), box-shadow .45s var(--curva), border-color .3s;
}
.v-copertina:hover, .v-copertina:focus-visible { color: #fff; transform: translateY(-4px); border-color: rgba(var(--accento-rgb), .5); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .8), 0 0 0 1px rgba(var(--accento-rgb), .15); }
.v-copertina > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform .8s var(--curva); }
.v-copertina:hover > img { transform: scale(1.04); }
.v-segnaposto {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 14px 16px;
  background: radial-gradient(120% 90% at 100% 0%, rgba(224, 24, 45, .55), transparent 55%), linear-gradient(160deg, #1A1A20, #07070A 70%);
}
.v-segnaposto::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%); mask-image: linear-gradient(200deg, #000, transparent 70%); }
.v-segnaposto[data-serie="telefono"], .v-segnaposto[data-serie="telefono-hardware"] { background: radial-gradient(110% 90% at 0% 0%, rgba(255, 74, 94, .5), transparent 55%), linear-gradient(200deg, #1C1C22, #07070A 70%); }
.v-segnaposto[data-serie="app-finestre"], .v-segnaposto[data-serie="apk"] { background: radial-gradient(90% 90% at 100% 100%, rgba(224, 24, 45, .6), transparent 60%), linear-gradient(20deg, #07070A, #1E1E25); }
.v-segnaposto[data-serie="studio"] { background: radial-gradient(120% 80% at 50% 120%, rgba(224, 24, 45, .55), transparent 60%), linear-gradient(180deg, #16161B, #07070A); }
.v-segnaposto[data-serie="logica"], .v-segnaposto[data-serie="trucchi"] { background: radial-gradient(90% 80% at 0% 100%, rgba(179, 13, 33, .7), transparent 60%), linear-gradient(140deg, #202027, #07070A 65%); }
.v-segnaposto { justify-content: flex-end; }
.v-segnaposto b { position: absolute; z-index: 1; right: 14px; top: 6px; font: italic 600 clamp(48px, 5.4vw, 68px)/1 var(--car-manifesto); letter-spacing: -.03em; color: rgba(255, 255, 255, .92); text-shadow: 0 6px 30px rgba(0,0,0,.5); }
.v-segnaposto i { position: relative; z-index: 1; align-self: flex-start; max-width: 62%; font: 700 11px/1.3 var(--car); letter-spacing: .16em; text-transform: uppercase; font-style: normal; color: #FFC7CE; }
.v-play {
  position: absolute; z-index: 2; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(224, 24, 45, .92); color: #fff; box-shadow: 0 10px 30px -8px rgba(224, 24, 45, .9), 0 0 0 6px rgba(255,255,255,.1);
  transform: scale(.86); opacity: .92; transition: transform .35s var(--curva), opacity .3s;
}
.v-play svg { width: 24px; height: 24px; margin-left: 3px; }
.v-copertina:hover .v-play, .v-copertina:focus-visible .v-play { transform: scale(1); opacity: 1; }
.v-durata { position: absolute; z-index: 2; right: 10px; bottom: 10px; padding: 4px 8px; border-radius: 6px; background: rgba(0, 0, 0, .78); font: 600 12.5px/1 var(--car); font-variant-numeric: tabular-nums; color: #fff; }
.v-etichetta { position: absolute; z-index: 2; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; font: 700 11px/1 var(--car); letter-spacing: .06em; text-transform: uppercase; }
.v-etichetta svg { width: 12px; height: 12px; }
.v-etichetta.visto { background: #fff; color: #07070A; }
.v-etichetta.arrivo { background: rgba(7, 7, 10, .82); color: #FFC7CE; box-shadow: inset 0 0 0 1px rgba(255, 84, 103, .5); }
.vt-in-arrivo .v-etichetta.arrivo, .vt-sc-t em { position: static; }
.v-avanzamento { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .25); }
.v-avanzamento i { display: block; height: 100%; background: var(--rosso); }
.non-pronto .v-copertina { cursor: pointer; }
.non-pronto .v-segnaposto { filter: saturate(.7); }
.gia-visto .v-copertina::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .28); }
.v-corpo { min-width: 0; }
.v-meta { margin: 0 0 4px; font: 600 12.5px/1.3 var(--car); color: var(--testo-3); letter-spacing: .02em; }
.v-titolo { font-size: 17.5px; line-height: 1.3; letter-spacing: -.01em; margin: 0; }
.v-titolo a { color: var(--testo); text-decoration: none; }
.v-scheda:hover .v-titolo a { color: var(--accento-vivo); }
.v-descr { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--testo-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.v-riassunto { margin: 30px 0 14px; color: var(--testo-2); font-size: 15px; }
.v-percorsi-home { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.v-percorsi-home a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--bordo-forte); color: var(--testo-2); text-decoration: none; font-weight: 600; font-size: 14.5px; transition: all .25s var(--curva); }
.v-percorsi-home a:hover { color: var(--testo); border-color: var(--accento-scuro); background: var(--accento-tenue); }
.v-percorsi-home span { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--superficie-2); font-size: 12px; color: var(--testo-3); }
.anteprime-video .nota-rete { margin: 0; }

/* testa della videoteca: una pellicola di fotogrammi rossi che scorre dietro al titolo */
.vt-testa { padding-bottom: clamp(36px, 5vw, 56px); }
.vt-testa-sfondo { position: absolute; right: -4%; top: 50%; width: 52%; height: 70%; transform: translateY(-50%) rotate(-8deg); display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; opacity: .55; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
.vt-testa-sfondo span { border-radius: 14px; border: 1px solid rgba(var(--accento-rgb), .28); background: linear-gradient(160deg, rgba(var(--accento-rgb), .16), transparent 70%); animation: fotogramma 9s ease-in-out infinite; }
.vt-testa-sfondo span:nth-child(2n) { animation-delay: -3s; }
.vt-testa-sfondo span:nth-child(3n) { animation-delay: -6s; }
@keyframes fotogramma { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-10px); } }
@media (max-width: 760px) { .vt-testa-sfondo { display: none; } }
.vt-testa .contenitore { position: relative; }
.vt-statistiche { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 30px 0 0; padding: 0; color: var(--testo-2); font-size: 15px; }
.vt-statistiche b { font: 700 26px/1 var(--car-manifesto); color: var(--testo); margin-right: 6px; }
.vt-nota-rete { margin-top: 18px; }
.vt-strumenti .riga-strumenti { gap: 12px 16px; }
.vt-strumenti .livelli { flex: 0 1 auto; }
.vt-corpo { padding-top: 36px; padding-bottom: 110px; }
.vt-sezione-t { font-size: 22px; margin: 0 0 18px; }
.vt-continua { margin-bottom: 54px; padding: 24px; border-radius: 20px; border: 1px solid var(--accento-linea); background: radial-gradient(ellipse at 0% 0%, var(--accento-tenue), transparent 60%), var(--superficie); }
.vt-percorso + .vt-percorso { margin-top: 56px; }
.vt-percorso-testa { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 30px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--bordo); }
.vt-percorso-n { margin: 0 0 6px; font: 700 13px/1 var(--car); letter-spacing: 0; color: var(--accento); }
.vt-percorso-testa h2 { font-size: clamp(24px, 2.6vw, 32px); }
.vt-percorso-testa h2 a { color: var(--testo); text-decoration: none; }
.vt-percorso-testa h2 a:hover { color: var(--accento-vivo); }
.vt-percorso-d { margin: 8px 0 0; color: var(--testo-2); max-width: 640px; font-size: 16px; }
.vt-descr-filtro { margin: 0 0 24px; font-size: 17px; }
.vt-percorso-info { display: grid; gap: 8px; justify-items: end; color: var(--testo-3); font-size: 14px; }
.vt-barra { display: block; width: 140px; height: 5px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.vt-barra i { display: block; height: 100%; background: var(--grad-accento); }
.vt-vuoto { padding: 70px 20px; text-align: center; color: var(--testo-2); border: 1px dashed var(--bordo-forte); border-radius: 20px; }
.vt-vuoto strong { color: var(--testo); font-size: 19px; }
.link-bottone { background: none; border: 0; padding: 0; font: inherit; color: var(--accento-vivo); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vt-scheletro { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.vt-scheletro i { aspect-ratio: 16 / 9; border-radius: 14px; background: linear-gradient(100deg, var(--superficie) 30%, var(--superficie-2) 50%, var(--superficie) 70%); background-size: 300% 100%; animation: luccica 1.6s linear infinite; }
@keyframes luccica { to { background-position: -150% 0; } }

/* un video */
.vt-video { padding-top: 26px; padding-bottom: 110px; }
.vt-indietro { margin: 0 0 18px; }
.vt-indietro a { color: var(--testo-2); text-decoration: none; font-weight: 600; font-size: 15px; }
.vt-indietro a:hover { color: var(--accento-vivo); }
.vt-video-griglia { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(24px, 3vw, 40px); align-items: start; }
.vt-lettore { position: relative; border-radius: 18px; overflow: hidden; background: #000; box-shadow: var(--ombra), 0 0 0 1px var(--bordo); aspect-ratio: 16 / 9; }
.vt-lettore video { display: block; width: 100%; height: 100%; background: #000; }
.vt-avviso-lettore { position: absolute; left: 14px; right: 14px; bottom: 64px; z-index: 2; padding: 12px 16px; border-radius: 12px; background: rgba(7, 7, 10, .9); color: #F3F2EF; font-size: 15px; box-shadow: inset 0 0 0 1px rgba(255, 84, 103, .4); }
.vt-avviso-lettore a, .vt-avviso-lettore .link-bottone { color: #FF8A97; }
.vt-in-arrivo { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; color: #F3F2EF; background: radial-gradient(90% 90% at 100% 0%, rgba(224, 24, 45, .45), transparent 60%), linear-gradient(160deg, #1A1A20, #07070A 70%); }
.vt-in-arrivo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.vt-in-arrivo > div { position: relative; max-width: 420px; }
.vt-in-arrivo p { margin: 14px 0 0; color: #D8D6D0; }
.vt-in-arrivo a { color: #FF9AA5; }
/* con la locandina (la prima slide del video): l'immagine si vede bene, la scritta sta in basso */
.vt-in-arrivo.con-poster { place-items: end start; text-align: left; padding: 0; }
.vt-in-arrivo.con-poster img { opacity: 1; }
.vt-in-arrivo.con-poster > div { max-width: none; width: 100%; padding: 44px 22px 18px; background: linear-gradient(180deg, transparent, rgba(7, 7, 10, .88) 45%); }
.vt-in-arrivo.con-poster p { margin-top: 10px; font-size: 15.5px; max-width: 620px; }
@media (max-width: 600px) {
  .vt-in-arrivo.con-poster > div { padding: 30px 14px 12px; }
  .vt-in-arrivo.con-poster p { display: none; }
}
.vt-copione { margin-top: 34px; max-width: 760px; }
.vt-copione h2 { font-size: 20px; margin-bottom: 6px; outline: none; scroll-margin-top: calc(var(--altezza-testata) + 16px); }
.vt-copione-nota { color: var(--testo-3); font-size: 15px; margin: 0 0 16px; }
.vt-copione ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: parte; }
.vt-copione li { position: relative; padding-left: 44px; counter-increment: parte; }
.vt-copione li::before { content: counter(parte); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie-2); color: var(--testo-3); font: 700 12px/1 var(--car); }
.vt-copione h3 { font-size: 17px; line-height: 1.35; margin: 4px 0 6px; }
.vt-copione p { margin: 0; color: var(--testo-2); line-height: 1.65; }
.vt-info { padding-top: 22px; }
.vt-meta { margin: 0 0 10px; color: var(--testo-3); font-size: 14.5px; font-weight: 600; }
.vt-meta a { color: var(--accento-vivo); text-decoration: none; }
.vt-titolo { font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 14px; outline: none; }
.vt-descrizione { color: var(--testo-2); font-size: 18px; max-width: 760px; }
.vt-obiettivi { margin: 20px 0; padding: 18px 22px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--bordo); max-width: 760px; }
.vt-obiettivi h2 { font: 700 13px/1 var(--car); letter-spacing: 0; color: var(--accento); margin: 0 0 12px; }
.vt-obiettivi ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.vt-obiettivi li::marker { color: var(--accento); }
.vt-prima { color: var(--testo-2); font-size: 15.5px; }
.vt-azioni { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 8px; }
.vt-azioni .pulsante svg { width: 16px; height: 16px; }
.vt-capitoli { margin-top: 30px; }
.vt-capitoli h2 { font-size: 20px; margin-bottom: 12px; }
.vt-capitoli ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.vt-capitoli button { width: 100%; min-height: 48px; display: flex; gap: 12px; align-items: center; text-align: left; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--bordo); background: var(--superficie); color: var(--testo); font: 500 15px/1.35 var(--car); cursor: pointer; transition: border-color .2s, background-color .2s; }
.vt-capitoli button:hover:not(:disabled) { border-color: var(--accento-scuro); }
.vt-capitoli button:disabled { cursor: default; opacity: .7; }
.vt-capitoli button[aria-current="true"] { border-color: var(--accento); background: var(--accento-tenue); }
.vt-cap-t { flex: none; min-width: 46px; font: 700 13px/1 var(--car-codice); color: var(--accento-vivo); font-variant-numeric: tabular-nums; }
.vt-lato { position: sticky; top: calc(var(--altezza-testata) + 20px); display: grid; gap: 14px; max-height: calc(100vh - var(--altezza-testata) - 40px); overflow: auto; scrollbar-width: thin; padding-right: 4px; }
.vt-lato-t { margin: 0; font: 700 13px/1.3 var(--car); letter-spacing: 0; color: var(--accento); }
.vt-successivo { padding-bottom: 16px; border-bottom: 1px solid var(--bordo); display: grid; gap: 10px; }
.vt-scaletta { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.vt-scaletta a { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; color: var(--testo-2); text-decoration: none; font-size: 15px; line-height: 1.35; }
.vt-scaletta a:hover { background: var(--superficie); color: var(--testo); }
.vt-scaletta [aria-current="true"] a { background: var(--accento-tenue); color: var(--testo); box-shadow: inset 2px 0 0 var(--accento); }
.vt-sc-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie-2); font: 700 12px/1 var(--car); color: var(--testo-3); }
[aria-current="true"] .vt-sc-n { background: var(--grad-accento); color: #fff; }
.vt-sc-t em { font-style: normal; font-size: 12px; color: var(--accento-vivo); margin-left: 4px; white-space: nowrap; }
.vt-sc-d { font: 600 12.5px/1 var(--car); color: var(--testo-3); font-variant-numeric: tabular-nums; }
.vt-altri { margin-top: 64px; }
@media (max-width: 1000px) {
  .vt-video-griglia { grid-template-columns: 1fr; }
  .vt-lato { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 600px) {
  .vt-lettore { border-radius: 12px; margin: 0 calc(var(--margine) * -1); border-radius: 0; box-shadow: none; }
  .vt-avviso-lettore { bottom: 56px; font-size: 14px; }
}
.vt-invito-griglia { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.vt-consigli { list-style: none; margin: 0; padding: 26px; display: grid; gap: 14px; border-radius: 20px; background: var(--superficie); border: 1px solid var(--bordo); }
.vt-consigli li { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 12px; color: var(--testo-2); }
.vt-consigli b { display: flex; gap: 6px; font-weight: 400; }
@media (max-width: 860px) { .vt-invito-griglia { grid-template-columns: 1fr; } }
@media (hover: none), (max-width: 700px) { .vt-consigli { display: none; } }

/* =============================================================================
   17. LEO SUL TELEFONO (telefono.html)
   ============================================================================= */
figure.telefono, .telefono figure { margin: 0; }
figure { margin: 0; }
.tel-hero .manifesto { font-size: clamp(40px, 5.2vw, 74px); }
.ventaglio { position: relative; min-height: 600px; display: grid; place-items: center; }
.ventaglio .telefono { position: absolute; width: min(240px, 38%); }
.ventaglio .t-centro { position: relative; width: min(280px, 46%); z-index: 2; animation: galleggia 8s ease-in-out infinite; }
.ventaglio .t-sinistra { left: 4%; top: 12%; transform: rotate(-9deg); opacity: .92; }
.ventaglio .t-destra { right: 2%; top: 9%; transform: rotate(8deg); opacity: .92; }
.ventaglio .bollino.b1 { left: 0; bottom: 4%; animation: galleggia 9s ease-in-out -3s infinite; }
@media (max-width: 960px) { .ventaglio { min-height: 520px; margin-top: 10px; } }
@media (max-width: 520px) {
  .ventaglio { min-height: 440px; }
  .ventaglio .t-centro { width: 54%; }
  .ventaglio .telefono:not(.t-centro) { width: 42%; }
  .ventaglio .t-sinistra { left: -2%; } .ventaglio .t-destra { right: -2%; }
  .ventaglio .bollino.b1 { display: none; }
}

.due-modi { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.modo { padding: clamp(22px, 3vw, 34px); display: grid; gap: 26px; align-content: start; }
.modo-foto { display: flex; justify-content: center; gap: 16px; padding: 16px 0 6px; background: radial-gradient(closest-side, rgba(var(--accento-rgb), .14), transparent 80%); }
.modo-foto .telefono { width: min(200px, 44%); }
.modo-foto .telefono:first-child { transform: rotate(-3deg) translateY(8px); }
.modo-foto .telefono:last-child { transform: rotate(3deg); }
.modo-testo h3 { font-size: clamp(22px, 2.3vw, 28px); margin: 0 0 16px; }
.modo .elenco-spunte li { font-size: 16px; }
@media (max-width: 860px) { .due-modi { grid-template-columns: 1fr; } }

.striscia {
  list-style: none; margin: 0; padding: 8px max(var(--margine), calc((100vw - var(--larghezza)) / 2 + var(--margine))) 26px;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 270px); gap: 26px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--margine), calc((100vw - var(--larghezza)) / 2 + var(--margine)));
  scrollbar-width: thin; scrollbar-color: var(--bordo-forte) transparent;
}
.striscia:focus-visible { outline-offset: -4px; }
.passo-app { scroll-snap-align: start; display: grid; gap: 22px; align-content: start; }
.passo-app .telefono { width: 100%; max-width: 240px; transition: transform .5s var(--curva); }
.passo-app:hover .telefono { transform: translateY(-6px); }
.passo-app h3 { font-size: 20px; margin: 10px 0 8px; }
.passo-app p { color: var(--testo-2); font-size: 15.5px; margin: 0; }
.num-passo { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--grad-accento); color: #fff; font: 700 15px/1 var(--car); box-shadow: 0 10px 24px -10px rgba(var(--accento-rgb), .9); }
.frecce-striscia { display: flex; gap: 8px; color: var(--testo-3); font-size: 22px; }
.frecce-striscia button { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--bordo-forte); background: transparent; color: var(--testo); font: 600 20px/1 var(--car); cursor: pointer; transition: all .25s var(--curva); }
.frecce-striscia button:hover { border-color: var(--accento); color: var(--accento-vivo); background: var(--accento-tenue); }
.frecce-striscia button:disabled { opacity: .35; cursor: default; }
@media (hover: none) { .frecce-striscia { display: none; } }

.stili-griglia { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.stili-gettoni li { display: inline-flex; align-items: center; gap: 9px; }
.stili-gettoni i { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.stili-telefoni { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 22px); align-items: end; }
.stili-telefoni .telefono:nth-child(2) { transform: translateY(-28px); }
.stili-telefoni figcaption { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); font: 700 12px/1 var(--car); letter-spacing: .18em; text-transform: uppercase; color: var(--testo-3); }
.stili-telefoni { padding-bottom: 36px; }
@media (max-width: 900px) { .stili-griglia { grid-template-columns: 1fr; } }

.hardware { overflow: hidden; }
.hardware .alone-idea { position: absolute; left: 50%; top: 12%; width: 1100px; height: 700px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(var(--accento-rgb), .14), transparent 70%); pointer-events: none; }
.hw-griglia { position: relative; display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.hw-telefoni { display: flex; justify-content: center; gap: 18px; }
.hw-telefoni .telefono { width: min(250px, 47%); }
.hw-telefoni .telefono:last-child { transform: translateY(40px); }
.hw-voci { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hw-voci li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--bordo); transition: border-color .3s, transform .4s var(--curva); }
.hw-voci li:hover { border-color: var(--accento-linea); transform: translateY(-3px); }
.hw-voci li:first-child { grid-column: 1 / -1; background: radial-gradient(ellipse at 0% 0%, var(--accento-tenue), transparent 60%), var(--superficie); border-color: var(--accento-linea); }
.hw-ic { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--grad-accento); color: #fff; box-shadow: 0 10px 22px -12px rgba(var(--accento-rgb), .9); }
.hw-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hw-voci h3 { font-size: 17.5px; margin: 2px 0 6px; }
.hw-voci p { margin: 0; color: var(--testo-2); font-size: 15px; line-height: 1.5; }
.hw-codice { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: clamp(60px, 8vw, 96px); }
.hw-codice pre.codice { font-size: 14.5px; }
.hw-note { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.hw-note p { margin: 0; color: var(--testo-2); font-size: 15.5px; padding-top: 16px; border-top: 1px solid var(--bordo); }
.hw-note strong { color: var(--testo); display: block; margin-bottom: 4px; }
@media (max-width: 1000px) { .hw-griglia { grid-template-columns: 1fr; } .hw-telefoni .telefono:last-child { transform: translateY(24px); } }
@media (max-width: 760px) { .hw-codice, .hw-note { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .hw-voci { grid-template-columns: 1fr; } }

.oggetti-griglia { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.oggetti-telefoni { display: flex; justify-content: center; gap: 18px; }
.oggetti-telefoni .telefono { width: min(250px, 47%); }
.oggetti-telefoni .telefono:first-child { transform: rotate(-4deg); }
.oggetti-telefoni .telefono:last-child { transform: rotate(4deg) translateY(30px); }
.oggetti-elenco { margin: 8px 0 0; display: grid; gap: 0; }
.oggetti-elenco div { display: grid; grid-template-columns: 170px 1fr; gap: 18px; padding: 14px 0; border-top: 1px solid var(--bordo); }
.oggetti-elenco dt { font: 700 13px/1.6 var(--car); letter-spacing: 0; color: var(--accento); }
.oggetti-elenco dd { margin: 0; color: var(--testo-2); font-size: 16px; }
@media (max-width: 900px) { .oggetti-griglia { grid-template-columns: 1fr; } .oggetti-telefoni { order: -1; margin-bottom: 40px; } }
@media (max-width: 520px) { .oggetti-elenco div { grid-template-columns: 1fr; gap: 4px; } }

.galleria-app { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 3vw, 34px); }
.galleria-app .telefono { width: 100%; max-width: 230px; margin: 0 auto; transition: transform .5s var(--curva); }
.galleria-app figure:hover .telefono { transform: translateY(-8px) rotate(-1.5deg); }
.galleria-app figcaption { text-align: center; margin-top: 18px; font-weight: 700; font-size: 17px; }
.galleria-app figcaption small { display: block; font-weight: 500; font-size: 14px; color: var(--testo-3); margin-top: 2px; }
@media (max-width: 860px) { .galleria-app { grid-template-columns: repeat(2, 1fr); row-gap: 40px; } }

.offline-griglia { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.offline-scena { display: grid; place-items: center; position: relative; }
.offline-scena::before { content: ""; position: absolute; inset: -10% -20%; background: radial-gradient(closest-side, rgba(var(--accento-rgb), .18), transparent 70%); z-index: -1; }
.offline-scena .telefono { width: min(290px, 72vw); }
.schermo-sito { display: flex; flex-direction: column; background: #07070A !important; color: #F3F2EF; font-family: var(--car); }
.ss-barra { display: flex; align-items: center; justify-content: space-between; padding: 26px 14px 10px; font-size: 13px; border-bottom: 1px solid #25252D; }
.ss-barra span { color: #FF5467; font-size: 18px; line-height: 1; }
.ss-pagina { flex: 1; padding: 14px 16px; background: radial-gradient(ellipse at 100% 30%, rgba(224, 24, 45, .28), transparent 60%); }
.ss-testata { display: flex; align-items: center; gap: 7px; padding-bottom: 10px; border-bottom: 1px solid #25252D; margin-bottom: 22px; }
.ss-testata b { letter-spacing: .3em; font-size: 12px; }
.ss-sopra { margin: 0 0 8px; font: 700 9px/1 var(--car); letter-spacing: .24em; text-transform: uppercase; color: #FF5467; }
.ss-titolo { margin: 0 0 18px; font: 800 24px/1.08 var(--car-titoli); letter-spacing: -.02em; }
.ss-titolo em { font: italic 500 24px/1.08 var(--car-manifesto); color: #FF5467; }
.ss-schede { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ss-schede i { height: 64px; border-radius: 10px; background: #121217; border: 1px solid #25252D; }
.ss-schede i:first-child { border-color: rgba(255, 84, 103, .5); }
.ss-offline { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 10px 22px; font-size: 11.5px; color: #F3F2EF; background: rgba(224, 24, 45, .16); border-top: 1px solid rgba(255, 84, 103, .32); }
.ss-offline span { width: 7px; height: 7px; border-radius: 50%; background: #E0182D; animation: pulsazione 2s infinite; }
@media (max-width: 860px) { .offline-griglia { grid-template-columns: 1fr; } .offline-scena::before { inset: -10% 0; } }
.ss-testata img { width: 16px !important; height: 16px !important; object-fit: contain; }
.invito h2 em { font-family: var(--car-manifesto); font-weight: 500; font-style: italic; letter-spacing: -.01em; }

/* =============================================================================
   19. RICERCA IN TUTTO IL SITO (js/cerca.js): finestra che si apre con "/" o Ctrl+K
   ============================================================================= */
.cerca-velo {
  position: fixed; inset: 0; z-index: 400; display: flex; justify-content: center; align-items: flex-start;
  padding: min(12vh, 110px) 16px 16px; background: rgba(0, 0, 0, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.cerca-velo[hidden] { display: none; }
:root[data-tema="chiaro"] .cerca-velo { background: rgba(20, 16, 16, .32); }
:root.cerca-aperta body { overflow: hidden; }
.cerca-finestra {
  width: min(680px, 100%); max-height: min(640px, 100%); display: flex; flex-direction: column;
  background: var(--superficie); border: 1px solid var(--bordo-forte); border-radius: 16px;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .02); overflow: hidden;
}
.cerca-campo-riga { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--bordo); }
.cerca-campo-riga > svg { width: 20px; height: 20px; fill: none; stroke: var(--accento-vivo); stroke-width: 1.9; stroke-linecap: round; flex: none; }
.cerca-campo { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--testo); font: 500 18px/1.3 var(--car); padding: 6px 0; }
.cerca-campo:focus { outline: none; }
.cerca-campo::-webkit-search-cancel-button { -webkit-appearance: none; }
.cerca-chiudi { border: 0; background: transparent; cursor: pointer; padding: 4px; }
.cerca-risultati { overflow-y: auto; padding: 8px; flex: 1; scrollbar-width: thin; }
.cerca-voce {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px; color: var(--testo); text-decoration: none;
}
.cerca-voce:hover { background: var(--superficie-2); text-decoration: none; color: var(--testo); }
.cerca-voce[aria-selected="true"] { background: var(--superficie-2); box-shadow: inset 2px 0 0 var(--accento); }
.cerca-tipo { font: 600 11.5px/1 var(--car); color: var(--testo-3); padding: 5px 7px; border: 1px solid var(--bordo-forte); border-radius: 6px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cerca-funzione, .cerca-metodo { color: var(--accento-vivo); border-color: var(--accento-linea); }
.cerca-testo { min-width: 0; }
.cerca-testo strong { display: block; font: 600 15px/1.3 var(--car-codice); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cerca-testo span { display: block; font-size: 13.5px; color: var(--testo-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.cerca-testo mark { background: none; color: var(--accento-vivo); }
.cerca-dove { font-size: 12.5px; color: var(--testo-3); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cerca-vuoto { padding: 18px 12px; margin: 0; color: var(--testo-2); font-size: 15px; }
.cerca-piede { display: flex; gap: 18px; margin: 0; padding: 10px 16px; border-top: 1px solid var(--bordo); font-size: 12.5px; color: var(--testo-3); }
.cerca-piede kbd { margin-right: 3px; }
.cerca-stato { margin-left: auto; }
@media (max-width: 600px) {
  .cerca-velo { padding: 8px; align-items: stretch; }
  .cerca-finestra { max-height: none; height: 100%; }
  .cerca-voce { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .cerca-tipo { justify-self: start; }
  .cerca-dove, .cerca-piede span:not(.cerca-stato) { display: none; }
}

/* =============================================================================
   18. HOME (index.html)
   Un solo momento animato: l'editor "Leo scrive con te" che scrive le righe una alla volta.
   Il resto e' fermo e ordinato: testo a sinistra, un mosaico di tessere di misure diverse.
   ============================================================================= */
.h-apertura {
  position: relative; padding: clamp(56px, 8vw, 112px) 0 clamp(64px, 8vw, 104px); overflow: hidden;
  border-bottom: 1px solid var(--bordo);
  background:
    radial-gradient(900px 480px at 78% 30%, rgba(var(--accento-rgb), .16), transparent 70%),
    linear-gradient(180deg, transparent 60%, var(--fondo-2));
}
.h-apertura::before { /* reticolo sottile, solo dietro l'editor */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--bordo) 1px, transparent 1px), linear-gradient(90deg, var(--bordo) 1px, transparent 1px);
  background-size: 48px 48px; opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse 45% 55% at 75% 45%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 45% 55% at 75% 45%, #000, transparent 75%);
}
.h-apertura-griglia { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.h-sopra { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; font-size: 14.5px; font-weight: 600; color: var(--testo-2); }
.h-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--accento); box-shadow: 0 0 0 4px rgba(var(--accento-rgb), .18); flex: none; }
.h-apertura h1 { font-size: clamp(34px, 3.5vw, 50px); line-height: 1.02; letter-spacing: -.045em; font-weight: 750; }
.h-grigio { color: var(--testo-3); }
.h-sottotitolo { font-size: clamp(17px, 1.45vw, 19.5px); color: var(--testo-2); line-height: 1.6; margin: 26px 0 32px; max-width: 560px; }
.h-sottotitolo strong { color: var(--testo); font-weight: 600; }
.h-note { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 26px 0 0; padding: 0; font-size: 14px; color: var(--testo-3); }
.h-note li { display: inline-flex; align-items: center; gap: 8px; }
.h-note li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accento); }

/* L'editor che scrive con te */
.h-editor {
  margin: 0; background: #09090B; border: 1px solid #25252C; border-radius: 16px; overflow: hidden;
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .02), 0 0 120px -50px rgba(var(--accento-rgb), .7);
  color: #E6E6EA; text-align: left;
}
:root[data-tema="chiaro"] .h-editor { box-shadow: 0 40px 90px -40px rgba(40, 10, 10, .55), 0 0 0 1px rgba(0, 0, 0, .05); }
.h-editor-barra { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid #1F1F25; background: #0E0E11; font: 500 12.5px/1 var(--car); color: #8A857E; }
.h-editor-barra i { width: 10px; height: 10px; border-radius: 50%; background: #2A2A31; }
.h-editor-barra i:first-child { background: var(--rosso); }
.h-editor-barra > span:first-of-type { margin-left: 8px; }
.h-editor-stato { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: #CFCBC4; font-weight: 600; }
.h-editor-stato .h-punto { width: 7px; height: 7px; background: #4CC38A; box-shadow: 0 0 0 3px rgba(76, 195, 138, .18); }
.h-righe { list-style: none; margin: 0; padding: 16px 0; counter-reset: riga; font: 14.5px/1.5 var(--car-codice); }
.h-righe li {
  counter-increment: riga; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline;
  padding: 5px 16px 5px 0; position: relative;
}
.h-righe li::before { content: counter(riga); text-align: right; padding-right: 14px; color: #55525A; font-size: 12.5px; }
.h-righe code { font: inherit; white-space: pre; color: #E6E6EA; background: none; border: 0; padding: 0; overflow: hidden; text-overflow: clip; }
.h-capito {
  grid-column: 2; display: flex; align-items: center; gap: 7px; margin-top: 3px;
  font: 500 12.5px/1.35 var(--car); color: #8FCFA9;
}
.h-capito::before { content: ""; width: 12px; height: 1px; background: #3C7A57; flex: none; }
.h-capito b { font-weight: 700; color: #BFE6CF; }
.h-pastiglia-testo { color: #F2D6A2; background: rgba(255, 176, 32, .1); border-radius: 4px; padding: 1px 3px; box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .2); }
.h-pastiglia-calcolo { color: #fff; background: rgba(var(--accento-rgb), .28); border-radius: 4px; padding: 1px 2px; box-shadow: inset 0 0 0 1px rgba(255, 77, 94, .45); }
.h-pastiglia-calcolo .c-variabili { color: #FFE08A; }
.h-unita { color: #A8A39B; font-style: italic; }
.h-editor-uscita { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-top: 1px solid #1F1F25; background: #060607; }
.h-editor-uscita pre { margin: 0; font: 13.5px/1.6 var(--car-codice); color: #CFCBC4; white-space: pre-wrap; }
.h-editor-uscita u { color: var(--accento-vivo); text-decoration-color: rgba(255, 77, 94, .5); }
.h-triangolo { width: 74px; height: 68px; flex: none; }
.h-triangolo path { fill: none; stroke: var(--accento-vivo); stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 260; stroke-dashoffset: 0; }
.h-triangolo circle { fill: #F5F3EF; }
/* animazione: le righe compaiono una dopo l'altra, poi la spiegazione di Leo; infine l'uscita */
@media (prefers-reduced-motion: no-preference) {
  .js .h-editor[data-scrive] .h-righe li { opacity: 0; transform: translateY(4px); }
  .js .h-editor[data-scrive] .h-capito { opacity: 0; }
  .js .h-editor[data-scrive] .h-editor-uscita { opacity: 0; }
  .js .h-editor[data-scrive] .h-triangolo path { stroke-dashoffset: 260; }
  .js .h-editor.scrive .h-righe li { animation: h-riga .45s var(--curva) forwards; animation-delay: calc(var(--n) * .55s + .2s); }
  .js .h-editor.scrive .h-capito { animation: h-appare .5s ease forwards; animation-delay: calc(var(--n) * .55s + .55s); }
  .js .h-editor.scrive .h-editor-uscita { animation: h-appare .5s ease forwards; animation-delay: 3.8s; }
  .js .h-editor.scrive .h-triangolo path { animation: h-disegna 1.4s ease-out forwards; animation-delay: 4s; }
}
@keyframes h-riga { to { opacity: 1; transform: none; } }
@keyframes h-appare { to { opacity: 1; } }
@keyframes h-disegna { to { stroke-dashoffset: 0; } }

/* Sezioni della home */
.h-sezione { padding: clamp(72px, 9vw, 120px) 0; }
.h-scura { background: var(--fondo-2); border-block: 1px solid var(--bordo); }
.h-testa-sezione { max-width: 760px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.h-testa-sezione h2, .h-titolo-domande, .h-prova h2, .h-invito h2 { font-size: clamp(32px, 4.2vw, 52px); letter-spacing: -.04em; line-height: 1.05; }
.h-testa-sezione p { font-size: clamp(17px, 1.4vw, 19px); color: var(--testo-2); margin: 16px 0 0; }
.h-testa-con-azione { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 40px; flex-wrap: wrap; }
.h-testa-con-azione > div { max-width: 700px; }

/* Mosaico: tessere di misure diverse su 6 colonne */
.h-mosaico { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.h-tessera {
  position: relative; background: var(--superficie); border: 1px solid var(--bordo); border-radius: 18px;
  padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 12px; overflow: hidden; min-width: 0;
}
.h-tessera h3 { font-size: clamp(19px, 1.6vw, 22px); letter-spacing: -.02em; line-height: 1.2; }
.h-tessera p { margin: 0; color: var(--testo-2); font-size: 15.5px; line-height: 1.6; }
.h-tessera .link-freccia { margin-top: auto; font-size: 15px; }
.h-tessera .finestra-codice { box-shadow: none; margin-top: 6px; }
.h-t-italiano { grid-column: span 4; }
.h-t-parentesi { grid-column: span 2; }
.h-t-libreria { grid-column: span 2; }
.h-t-compila { grid-column: span 2; }
.h-t-oggetti { grid-column: span 2; }
.h-t-giochi { grid-column: span 4; flex-direction: row; align-items: flex-start; gap: 28px; max-height: 360px; }
.h-t-sicurezza { grid-column: span 2; }
.h-t-editor { grid-column: span 6; }
.h-t-giochi-testo { display: flex; flex-direction: column; gap: 12px; flex: 1; align-self: stretch; }
.h-t-giochi .telefono.piccolo { width: 170px; flex: none; margin: 0 0 -200px; }
.h-errore pre { margin: 0; padding: 16px 18px; font: 13px/1.6 var(--car-codice); color: #DADAE0; white-space: pre-wrap; background: #0A0A0C; }
.h-errore .e-tipo, .errore-italiano .e-tipo { color: #FFB020; font-weight: 700; }
.h-errore .e-num { color: #6E6A73; }
.h-errore .e-car { color: #FF3B4E; }
.h-errore .e-ok { color: #6FCF97; }
.h-regola { margin: 4px 0 8px; display: grid; gap: 8px; }
.h-regola div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--fondo-2); border: 1px solid var(--bordo); }
.h-regola dt code { font-size: 13.5px; background: none; border: 0; padding: 0; color: var(--testo); }
.h-regola dd { margin: 0; font: 13.5px/1.4 var(--car-codice); color: #4CC38A; }
:root[data-tema="chiaro"] .h-regola dd { color: #177A45; }
.h-regola dd::before { content: "→ "; color: var(--testo-3); }
.h-tessera .h-numero { font: 750 clamp(52px, 5.6vw, 76px)/.95 var(--car-titoli); letter-spacing: -.05em; color: var(--testo); margin: 0 !important; }
.h-numero span { color: var(--accento-vivo); }
.h-tessera .h-numero + h3 { margin-top: -4px; }
.h-aree { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.h-aree a { display: inline-block; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--bordo-forte); color: var(--testo-2); text-decoration: none; font-size: 13.5px; }
.h-aree a:hover { color: var(--testo); border-color: var(--testo-3); }
.h-aree li:last-child a { color: var(--accento-vivo); border-color: var(--accento-linea); }
.h-terminale pre { margin: 0; padding: 14px 18px; font: 13.5px/1.7 var(--car-codice); color: #E6E6EA; background: #0A0A0C; white-space: pre; overflow-x: auto; }
.h-prompt { color: var(--accento-vivo); }
.h-ok { color: #6FCF97; }
/* Per chi è: sei tessere uguali */
.h-pubblico { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.h-pubblico .h-tessera h3 { margin: 4px 0 0; }
@media (max-width: 900px) { .h-pubblico { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .h-pubblico { grid-template-columns: minmax(0, 1fr); } }
.h-icona { width: 30px; height: 30px; fill: none; stroke: var(--accento-vivo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Esempi vivi */
.h-esempi .schede-codice-voci button { font-size: 14.5px; }
.h-esempi pre.uscita:empty { display: none; }

/* Confronto con Python */
.h-py-codice { margin-top: 0; }
.h-tabella-py { margin-top: 32px; overflow-x: auto; border: 1px solid var(--bordo); border-radius: 14px; background: var(--superficie); }
.h-tabella-py table { width: 100%; border-collapse: collapse; font-size: 15px; }
.h-tabella-py th, .h-tabella-py td { text-align: left; vertical-align: top; padding: 13px 18px; border-bottom: 1px solid var(--bordo); }
.h-tabella-py tbody tr:last-child > * { border-bottom: 0; }
.h-tabella-py thead th { font-size: 14px; color: var(--testo-3); font-weight: 600; background: var(--fondo-2); }
.h-tabella-py thead th:nth-child(2) { color: var(--accento-vivo); }
.h-tabella-py th[scope="row"] { color: var(--testo); font-weight: 600; white-space: nowrap; }
.h-tabella-py td { color: var(--testo-2); }
.h-tabella-py td.meglio { color: var(--testo); }
.h-tabella-py td.meglio::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--accento); vertical-align: 1px; }
.h-nota { margin: 22px 0 0; color: var(--testo-2); }

/* Novita' */
.h-novita { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.h-novita-voce a {
  display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 22px; border-radius: 16px; border: 1px solid var(--bordo);
  background: var(--superficie); color: var(--testo); text-decoration: none; transition: border-color .15s;
}
.h-novita-voce a:hover { border-color: var(--accento-linea); text-decoration: none; }
.h-novita-data { font-size: 13px; color: var(--accento-vivo); font-weight: 600; }
.h-novita-voce strong { font: 700 18px/1.25 var(--car-titoli); letter-spacing: -.015em; }
.h-novita-voce span:last-child { color: var(--testo-2); font-size: 14.5px; line-height: 1.55; }

/* Prova */
.h-prova { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.h-prova p { color: var(--testo-2); font-size: 17px; margin-top: 18px; }
.h-passi-prova { list-style: none; margin: 0; padding: 0; counter-reset: passo; border-left: 1px solid var(--bordo-forte); }
.h-passi-prova li { counter-increment: passo; position: relative; padding: 0 0 26px 28px; display: grid; gap: 4px; }
.h-passi-prova li::before { content: ""; position: absolute; left: -5px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--fondo); border: 2px solid var(--accento); }
.h-passi-prova strong { font-size: 17px; }
.h-passi-prova span { color: var(--testo-2); }

/* Invito finale */
.h-invito { padding: clamp(80px, 10vw, 128px) 0; text-align: center; background: radial-gradient(640px 300px at 50% 100%, rgba(var(--accento-rgb), .16), transparent 70%); }
.h-invito-stemma { margin: 0 auto 24px; width: 64px; height: 64px; }
.h-invito p { color: var(--testo-2); font-size: 18px; max-width: 560px; margin: 18px auto 30px; }
.h-invito .azioni { justify-content: center; }

@media (max-width: 1080px) {
  .h-apertura-griglia { grid-template-columns: 1fr; }
  .h-editor { max-width: 640px; }
  .h-novita { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .h-mosaico { grid-template-columns: 1fr 1fr; }
  .h-t-italiano, .h-t-giochi { grid-column: span 2; }
  .h-t-parentesi, .h-t-libreria, .h-t-compila, .h-t-oggetti, .h-t-sicurezza { grid-column: span 1; }
  .h-t-editor { grid-column: span 1; }
  .h-prova { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .h-mosaico { grid-template-columns: 1fr; }
  .h-mosaico > * { grid-column: auto !important; }
  .h-t-giochi { flex-direction: column; align-items: stretch; }
  .h-t-giochi .telefono.piccolo { display: none; }
  .h-novita { grid-template-columns: 1fr; }
  .h-righe { font-size: 12.5px; }
  .h-righe li { grid-template-columns: 26px minmax(0, 1fr); padding-right: 10px; }
  .h-righe code { white-space: pre-wrap; overflow-wrap: anywhere; }
  .h-righe li::before { padding-right: 8px; font-size: 11px; }
  .h-capito { font-size: 11.5px; }
  .h-triangolo { width: 54px; height: 50px; }
  .h-tabella-py table, .h-tabella-py tbody, .h-tabella-py tr, .h-tabella-py th, .h-tabella-py td { display: block; }
  .h-tabella-py thead { display: none; }
  .h-tabella-py tr { padding: 14px 16px; border-bottom: 1px solid var(--bordo); }
  .h-tabella-py tbody tr:last-child { border-bottom: 0; }
  .h-tabella-py th, .h-tabella-py td { padding: 2px 0; border: 0; }
  .h-tabella-py th[scope="row"] { font-size: 16px; margin-bottom: 4px; }
  .h-tabella-py td::before { content: attr(data-etichetta) ": "; font-weight: 600; color: var(--testo-3); }
  .h-tabella-py td.meglio::before { content: attr(data-etichetta) ": "; width: auto; height: auto; background: none; border-radius: 0; color: var(--accento-vivo); margin: 0; }
}

/* =============================================================================
   20. NOVITA' (novita.html, generata da strumenti/sito_riferimento/genera.py da novita.toml)
   ============================================================================= */
.testa-pagina h1 { font-size: clamp(36px, 5vw, 60px); letter-spacing: -.04em; }
.nv-elenco { padding-bottom: 110px; }
.nv-mese { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px 32px; padding: 36px 0; border-top: 1px solid var(--bordo); }
.nv-mese > h2 { font-size: 17px; letter-spacing: -.01em; color: var(--testo-2); position: sticky; top: calc(var(--altezza-testata) + 24px); align-self: start; }
.nv-voce { grid-column: 2; display: grid; gap: 18px; padding: 24px 26px; border: 1px solid var(--bordo); border-radius: 16px; background: var(--superficie); scroll-margin-top: calc(var(--altezza-testata) + 20px); }
.nv-voce:target { border-color: var(--accento-linea); box-shadow: 0 0 0 3px var(--accento-tenue); }
.nv-area { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: var(--accento-vivo); }
.nv-voce h3 { font-size: 21px; letter-spacing: -.02em; margin-bottom: 8px; }
.nv-breve { color: var(--testo-2); margin: 0; }
.nv-punti { margin: 12px 0 0; padding-left: 1.2em; color: var(--testo-2); }
.nv-punti li { margin: 5px 0; }
.nv-punti li::marker { color: var(--accento); }
.nv-link { margin: 14px 0 0; display: flex; gap: 18px; flex-wrap: wrap; }
.nv-codice .m-codice { margin: 0; }
.nv-codice, .nv-codice .m-codice { min-width: 0; max-width: 100%; }
.nv-codice .m-pre { overflow-x: auto; }
@media (max-width: 760px) {
  .nv-mese { grid-template-columns: 1fr; }
  .nv-mese > h2 { position: static; }
  .nv-voce { grid-column: 1; padding: 20px; }
}

/* ---------- Dentro l'app Leo (classe in-app): la barra dell'app ha gia' Indietro, Casa e Chiudi.
   Niente secondo menu, tema (lo decide l'app), marchio-casa e inviti a scaricare: le sezioni restano
   in una riga che scorre. ---------- */
:root.in-app .testata .marchio, :root.in-app .cambia-tema, :root.in-app .apri-menu, :root.in-app .voce-scarica,
:root.in-app a.pulsante[href*="scarica"] { display: none !important; }
@media (max-width: 960px) {
  :root.in-app .testata .contenitore { gap: 6px; }
  :root.in-app .navigazione { position: static; flex: 1; min-width: 0; visibility: visible; opacity: 1; transform: none;
    background: none; border: 0; overflow-x: auto; scrollbar-width: none; transition: none; }
  :root.in-app .navigazione::-webkit-scrollbar { display: none; }
  :root.in-app .navigazione ul { flex-direction: row; align-items: center; padding: 0; gap: 2px; }
  :root.in-app .navigazione li { border: 0; }
  :root.in-app .navigazione a { padding: 10px 10px; font-size: 15px; font-weight: 600; white-space: nowrap; }
}