/* I dodici blocchi, uno dopo l'altro. Ogni blocco usa solo le variabili. */

/* 1. testata ------------------------------------------------------------ */
.testata { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.testata.solida { background: rgba(247, 246, 251, 0.85); backdrop-filter: blur(14px); border-color: var(--bordo); }
.testata-dentro { max-width: var(--contenitore); margin: 0 auto; padding: 16px var(--bordo-pagina); display: flex; align-items: center; gap: 32px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--testo); }
.logo svg { display: block; }
.logo b { font-size: 21px; font-weight: 800; letter-spacing: -0.03em; }
.testata-voci { display: flex; gap: 26px; margin-left: 8px; }
.testata-voci a { color: var(--testo-2); text-decoration: none; font-size: var(--corpo-piccolo); font-weight: 500; transition: color var(--veloce); }
.testata-voci a:hover, .testata-voci a[aria-current="page"] { color: var(--testo); }
.testata-spazio { flex: 1; }
.accedi { color: var(--testo-2); text-decoration: none; font-size: var(--corpo-piccolo); font-weight: 500; }
.accedi:hover { color: var(--testo); }
.testata-apri { display: none; width: 42px; height: 42px; border: 1px solid var(--bordo-vivo); border-radius: var(--raggio); background: var(--pannello); cursor: pointer; align-items: center; justify-content: center; }
.testata-apri span, .testata-apri span::before, .testata-apri span::after { display: block; width: 18px; height: 2px; background: var(--testo); position: relative; transition: transform var(--veloce), opacity var(--veloce); }
.testata-apri span::before, .testata-apri span::after { content: ""; position: absolute; left: 0; }
.testata-apri span::before { top: -6px; } .testata-apri span::after { top: 6px; }
.testata.aperta .testata-apri span { background: transparent; }
.testata.aperta .testata-apri span::before { transform: translateY(6px) rotate(45deg); }
.testata.aperta .testata-apri span::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 920px) {
  .testata-voci, .testata .accedi, .testata .btn-nav { display: none; }
  .testata-apri { display: inline-flex; }
  .testata.aperta { background: var(--fondo); border-color: var(--bordo); }
  .testata.aperta .testata-voci { display: flex; flex-direction: column; gap: 4px; position: absolute; left: 0; right: 0; top: 100%; background: var(--fondo); border-bottom: 1px solid var(--bordo); padding: 12px var(--bordo-pagina) 20px; margin: 0; }
  .testata.aperta .testata-voci a { font-size: 18px; padding: 10px 0; }
  .testata.aperta .testata-voci .solo-telefono { display: flex; gap: 12px; margin-top: 10px; }
}
.testata-voci .solo-telefono { display: none; }

/* 2. piè di pagina ------------------------------------------------------- */
.pie { border-top: 1px solid var(--bordo); padding: 44px 0 36px; color: var(--testo-3); font-size: 13.5px; }
.pie-dentro { max-width: var(--contenitore); margin: 0 auto; padding: 0 var(--bordo-pagina); display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.pie .powered { display: flex; align-items: center; gap: 8px; }
.pie .powered b { color: var(--testo-2); }
.pie h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--testo-3); margin-bottom: 12px; }
.pie ul { list-style: none; }
.pie li { padding: 4px 0; }
.pie a { color: var(--testo-3); text-decoration: none; }
.pie a:hover { color: var(--testo-2); }
.pie-legale { margin-top: 14px; line-height: 1.6; }
@media (max-width: 720px) { .pie-dentro { grid-template-columns: 1fr; gap: 22px; } }

/* 3. hero ------------------------------------------------------------------ */
.hero { min-height: 100vh; display: flex; align-items: center; position: relative; padding: 120px 0 60px;
  background: radial-gradient(900px 500px at 85% 8%, var(--accento-velo), transparent 60%), radial-gradient(700px 420px at 8% 90%, rgba(123, 97, 255, 0.05), transparent 60%), var(--fondo); }
.hero.solo-testo { min-height: auto; padding: 150px 0 70px; text-align: center; }
.hero-griglia { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; max-width: var(--contenitore); margin: 0 auto; padding: 0 var(--bordo-pagina); width: 100%; }
.hero.solo-testo .hero-griglia { grid-template-columns: 1fr; justify-items: center; }
.hero h1 { font-size: clamp(40px, 5.6vw, 72px); font-weight: 850; font-variation-settings: 'wdth' 115; line-height: 0.99; letter-spacing: -0.025em; margin: 20px 0 22px; }
.hero h1 .evid { color: var(--accento-scuro); }
.hero-sotto { color: var(--testo-2); font-size: 18px; line-height: var(--interlinea); max-width: 480px; margin-bottom: 32px; }
.hero.solo-testo .hero-sotto { margin-left: auto; margin-right: auto; max-width: 560px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero.solo-testo .hero-cta, .hero.solo-testo .nota-spunte { justify-content: center; }
@media (max-width: 920px) { .hero-griglia { grid-template-columns: 1fr; gap: 44px; } }

/* 4. finestra -------------------------------------------------------------- */
.finestra { background: var(--pannello); border: 1px solid var(--bordo-vivo); border-radius: var(--raggio-grande); box-shadow: var(--ombra-finestra); overflow: hidden; font-size: 13.5px; position: relative; }
.finestra-testa { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--bordo); background: var(--pannello-2); }
.puntini { display: flex; gap: 6px; }
.puntini i { width: 10px; height: 10px; border-radius: var(--raggio-pillola); background: var(--bordo-vivo); }
.finestra-titolo { font-family: var(--font-mono); font-size: 11.5px; color: var(--testo-3); margin-left: 8px; letter-spacing: 0.04em; }
.f-logo { margin-left: auto; opacity: 0.85; }
.finestra img { width: 100%; display: block; }
.finestra .dimostrativi { position: absolute; right: 10px; bottom: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--testo-3); background: rgba(255, 255, 255, 0.85); padding: 3px 8px; border-radius: var(--raggio-pillola); border: 1px solid var(--bordo); }
.finestra.telefono { max-width: 300px; margin: 0 auto; border-radius: 28px; padding: 10px; background: var(--testo); border-color: var(--testo); }
.finestra.telefono img { border-radius: 20px; }
.finestra.telefono .dimostrativi { bottom: 18px; right: 18px; }
/* i mockup del prototipo dentro la finestra */
.plan-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--bordo); border-bottom: 1px solid var(--bordo); }
.plan-kpi div { background: var(--pannello); padding: 14px 16px; }
.plan-kpi b { font-size: 22px; font-weight: 800; display: block; letter-spacing: -0.02em; }
.plan-kpi span { font-family: var(--font-mono); font-size: 10.5px; color: var(--testo-3); text-transform: uppercase; letter-spacing: 0.08em; }
.plan-kpi .k-ambra b { color: var(--ambra); } .plan-kpi .k-verde b { color: var(--verde); }
.riga-lavoro { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--bordo); transition: background var(--veloce); }
.riga-lavoro:hover { background: rgba(123, 97, 255, 0.04); }
.riga-lavoro:last-child { border-bottom: none; }
.r-data { font-family: var(--font-mono); font-size: 11px; color: var(--testo-3); width: 52px; flex-shrink: 0; }
.r-nome { font-weight: 600; font-size: 13.5px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-nome small { display: block; font-weight: 400; color: var(--testo-3); font-size: 11.5px; margin-top: 1px; }
.riga-art { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--bordo); font-size: 13px; }
.riga-art:last-child { border-bottom: none; }
.riga-art .a-nome { flex: 1; font-weight: 500; }
.riga-art .a-nome small { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--testo-3); margin-top: 1px; }
.disp { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; }
.disp.ok { color: var(--verde); } .disp.parziale { color: var(--ambra); }
.barra-disp { width: 70px; height: 5px; border-radius: var(--raggio-pillola); background: var(--bordo-vivo); overflow: hidden; }
.barra-disp i { display: block; height: 100%; border-radius: var(--raggio-pillola); }
.riga-crew { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bordo); font-size: 13.5px; }
.finestra .riga-crew { padding: 12px 16px; }
.finestra .riga-crew:last-child { border-bottom: none; }
.avatar { width: 32px; height: 32px; border-radius: var(--raggio-pillola); flex-shrink: 0; background: var(--pannello-2); border: 1px solid var(--bordo-vivo); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--accento-scuro); }
.riga-crew .c-info { flex: 1; }
.riga-crew .c-ruolo { font-family: var(--font-mono); font-size: 10.5px; color: var(--testo-3); text-transform: uppercase; letter-spacing: 0.07em; }
.riga-crew .c-nome { font-weight: 600; margin-top: 1px; }

/* la barra della prova (parte della home) ---------------------------------- */
.barra-prova { border-top: 1px solid var(--bordo); border-bottom: 1px solid var(--bordo); background: var(--pannello); }
.barra-dentro { max-width: var(--contenitore); margin: 0 auto; padding: 26px var(--bordo-pagina); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.barra-voce { display: flex; align-items: baseline; gap: 10px; }
.barra-voce b { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; font-variation-settings: 'wdth' 110; }
.barra-voce span { font-family: var(--font-mono); font-size: 11.5px; color: var(--testo-3); text-transform: uppercase; letter-spacing: 0.07em; }
.barra-nato { font-size: 13.5px; color: var(--testo-2); }
.barra-nato b { color: var(--testo); }

/* il problema (parte della home) ------------------------------------------- */
.problema-griglia { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 44px; }
.problema-card { background: var(--pannello); border: 1px solid var(--bordo); border-radius: 14px; padding: 26px 26px 24px; transition: border-color .25s, transform .25s; }
.problema-card:hover { border-color: rgba(123, 97, 255, 0.3); transform: translateY(-3px); }
.problema-card .p-eti { font-family: var(--font-mono); font-size: 11px; color: var(--rosso); letter-spacing: 0.1em; text-transform: uppercase; }
.problema-card h3 { font-size: 19px; font-weight: 700; margin: 10px 0 8px; letter-spacing: -0.01em; }
.problema-card p { color: var(--testo-2); font-size: var(--corpo-piccolo); line-height: 1.55; }
@media (max-width: 920px) { .problema-griglia { grid-template-columns: 1fr; } }

/* 5. blocco funzione --------------------------------------------------------- */
.funzione { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 70px 0; }
.funzione.inversa .f-testo { order: 2; }
.f-testo h3 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; font-variation-settings: 'wdth' 110; letter-spacing: -0.02em; line-height: 1.08; margin: 14px 0 14px; }
.f-testo p { color: var(--testo-2); font-size: var(--corpo); line-height: var(--interlinea); margin-bottom: 20px; max-width: 440px; }
.f-lista { list-style: none; }
.f-lista li { padding: 8px 0 8px 26px; position: relative; color: var(--testo-2); font-size: 15px; }
.f-lista li::before { content: "→"; position: absolute; left: 0; color: var(--accento); font-weight: 700; }
.f-lista li b { color: var(--testo); font-weight: 600; }
@media (max-width: 920px) { .funzione { grid-template-columns: 1fr; gap: 36px; } .funzione.inversa .f-testo { order: 0; } }

/* 6. scroll-telling ----------------------------------------------------------- */
.ciclo { position: relative; }
.ciclo-testata { padding: var(--sezione) 0 40px; }
.scena { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; max-width: var(--contenitore); margin: 0 auto; padding: 0 var(--bordo-pagina); align-items: start; }
.scena-app { position: sticky; top: calc(50vh - 250px); height: 500px; display: flex; align-items: center; }
.scheda { width: 100%; background: var(--pannello); border: 1px solid var(--bordo-vivo); border-radius: var(--raggio-grande); box-shadow: var(--ombra-finestra); overflow: hidden; position: relative; }
.scheda-testa { padding: 18px 22px 14px; border-bottom: 1px solid var(--bordo); }
.scheda-testa h4 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.scheda-testa .s-meta { font-family: var(--font-mono); font-size: 11px; color: var(--testo-3); margin-top: 4px; }
.scheda-stato { position: absolute; top: 18px; right: 20px; }
.scheda-stato .pill { display: none; }
.scheda[data-step="1"] .pill.st-1, .scheda[data-step="2"] .pill.st-2, .scheda[data-step="3"] .pill.st-3, .scheda[data-step="4"] .pill.st-4 { display: inline-flex; }
.scheda-corpo { position: relative; height: 360px; }
.pannello-step { position: absolute; inset: 0; padding: 18px 22px; opacity: 0; transform: translateY(14px); transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva); pointer-events: none; }
.scheda[data-step="1"] .pannello-step.ps-1, .scheda[data-step="2"] .pannello-step.ps-2, .scheda[data-step="3"] .pannello-step.ps-3, .scheda[data-step="4"] .pannello-step.ps-4 { opacity: 1; transform: none; pointer-events: auto; }
.scheda-corpo.con-scatti .pannello-step { padding: 0; }
.scheda-corpo.con-scatti img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.riga-mat { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--bordo); font-size: 13.5px; }
.riga-mat .m-q { font-family: var(--font-mono); font-size: 11.5px; color: var(--testo-3); width: 34px; }
.riga-mat .m-nome { flex: 1; font-weight: 500; }
.riga-mat .m-euro { font-family: var(--font-mono); font-size: 12px; color: var(--testo-2); }
.tot-riga { display: flex; justify-content: space-between; padding: 14px 0 0; font-weight: 700; }
.tot-riga span { font-family: var(--font-mono); }
.finto-btn { margin-top: 14px; width: 100%; text-align: center; background: var(--accento); color: #fff; font-weight: 600; font-size: 14px; padding: 11px; border-radius: 9px; }
.finto-btn.verde { background: var(--verde); color: var(--verde-testo); }
.riga-check { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--bordo); font-size: 13.5px; }
.boxcheck { width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; border: 1.5px solid var(--bordo-vivo); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--verde-testo); font-weight: 800; transition: background .3s, border-color .3s; }
.scheda[data-step="4"] .boxcheck { background: var(--verde); border-color: var(--verde); }
.scheda[data-step="4"] .boxcheck::after { content: "✓"; }
.riga-check .qr { font-family: var(--font-mono); font-size: 10.5px; color: var(--testo-3); margin-left: auto; }
.passi { padding: 12vh 0 20vh; }
.passo { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; opacity: 0.25; transition: opacity .4s; }
.passo.attivo { opacity: 1; }
.passo-num { font-family: var(--font-mono); font-size: 13px; color: var(--accento-scuro); letter-spacing: 0.1em; }
.passo h3 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; font-variation-settings: 'wdth' 110; letter-spacing: -0.015em; margin: 12px 0 12px; line-height: 1.1; }
.passo p { color: var(--testo-2); font-size: var(--corpo); line-height: 1.65; max-width: 420px; }
.passo .p-colore { display: inline-block; margin-top: 14px; }
@media (max-width: 920px) {
  .scena { grid-template-columns: 1fr; gap: 0; }
  .scena-app { position: sticky; top: 74px; height: auto; z-index: 5; padding: 10px 0; background: var(--fondo); }
  .scheda-corpo { height: 330px; }
  .passo { min-height: 64vh; }
}

/* 7. onestà ------------------------------------------------------------------- */
.onesta { max-width: 760px; }
.onesta-lista { margin-top: 34px; border-top: 1px solid var(--bordo); }
.onesta-riga { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--bordo); font-size: 15px; }
.onesta-riga b { font-weight: 700; }
.onesta-riga p { color: var(--testo-2); line-height: 1.55; }
.onesta-riga .pill { margin-left: 8px; vertical-align: 2px; }
.onesta-breve { display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border: 1px solid var(--bordo-vivo); border-left: 4px solid var(--ambra); border-radius: var(--raggio); background: var(--pannello); max-width: 760px; }
.onesta-breve p { color: var(--testo-2); line-height: 1.55; font-size: 15px; }
.onesta-breve b { color: var(--testo); display: block; margin-bottom: 4px; }
@media (max-width: 920px) { .onesta-riga { grid-template-columns: 1fr; gap: 6px; } }

/* 8. prezzi -------------------------------------------------------------------- */
.prezzi { background: var(--pannello); border-top: 1px solid var(--bordo); border-bottom: 1px solid var(--bordo); }
.prezzi-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.prezzo-card { background: var(--fondo); border: 1px solid var(--bordo); border-radius: 14px; padding: 30px 28px; transition: border-color .25s, transform .25s; }
.prezzo-card:hover { border-color: rgba(123, 97, 255, 0.35); transform: translateY(-3px); }
.prezzo-card.evid { border-color: rgba(123, 97, 255, 0.5); background: linear-gradient(180deg, rgba(123, 97, 255, 0.07), transparent 60%), var(--fondo); }
.prezzo-card .pr-eti { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accento-scuro); }
.prezzo-card h3 { font-size: 22px; font-weight: 800; margin: 12px 0 10px; letter-spacing: -0.015em; }
.prezzo-card p { color: var(--testo-2); font-size: var(--corpo-piccolo); line-height: var(--interlinea); }
.prezzo-card .importo { font-size: 40px; font-weight: 850; letter-spacing: -0.03em; margin: 10px 0 2px; font-variation-settings: 'wdth' 110; }
.prezzo-card .importo small { font-family: var(--font-mono); font-size: 12px; color: var(--testo-3); font-weight: 500; letter-spacing: 0; }
.prezzo-card ul { list-style: none; margin: 16px 0 22px; }
.prezzo-card li { padding: 6px 0 6px 22px; position: relative; font-size: var(--corpo-piccolo); color: var(--testo-2); }
.prezzo-card li::before { content: "✓"; position: absolute; left: 0; color: var(--verde); font-weight: 700; }
.moduli-extra { margin-top: 28px; border-top: 1px solid var(--bordo); }
.moduli-extra li { list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--bordo); font-size: 15px; }
.moduli-extra li span { color: var(--testo-3); font-size: 13px; display: block; }
.moduli-extra li b { font-family: var(--font-mono); font-weight: 500; white-space: nowrap; }
.prezzi-nota { margin-top: 26px; font-family: var(--font-mono); font-size: 12.5px; color: var(--testo-3); }
@media (max-width: 920px) { .prezzi-griglia { grid-template-columns: 1fr; } }

/* 9. domande frequenti ------------------------------------------------------------ */
.faq { max-width: 760px; }
.faq details { border-bottom: 1px solid var(--bordo); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; font-weight: 600; font-size: 17px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-family: var(--font-mono); font-size: 22px; color: var(--accento-scuro); transition: transform var(--veloce); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--testo-2); line-height: var(--interlinea); padding: 0 0 20px; max-width: 640px; }

/* 10. fascia finale ----------------------------------------------------------------- */
.finale { text-align: center; padding: 140px 0; background: radial-gradient(700px 400px at 50% 110%, var(--accento-velo), transparent 65%), var(--fondo); }
.finale .segno-grande { margin: 0 auto 28px; display: block; width: 64px; }
.finale h2 { font-size: clamp(34px, 4.6vw, 58px); }
.finale .sottotesto { margin: 16px auto 36px; }
.finale .hero-cta { justify-content: center; margin-top: 30px; }
.finale .nota-spunte { justify-content: center; }

/* 11. moduli ------------------------------------------------------------------------- */
.modulo { max-width: 620px; background: var(--pannello); border: 1px solid var(--bordo-vivo); border-radius: var(--raggio-grande); padding: 30px 28px; }
.modulo .griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.modulo label { display: block; font-size: 13.5px; font-weight: 600; color: var(--testo-2); margin-bottom: 14px; }
.modulo input, .modulo textarea, .modulo select { display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 15px; padding: 11px 12px; border: 1px solid var(--bordo-vivo); border-radius: var(--raggio); background: var(--fondo); color: var(--testo); }
.modulo textarea { min-height: 120px; resize: vertical; }
.modulo .privacy { font-weight: 400; font-size: 13px; display: flex; gap: 8px; align-items: flex-start; }
.modulo .privacy input { width: auto; margin: 3px 0 0; }
.modulo .esito { margin-top: 14px; padding: 12px 14px; border-radius: var(--raggio); font-size: 14.5px; }
.modulo .esito.ok { background: rgba(31, 164, 107, 0.10); color: var(--verde); }
.modulo .esito.errore { background: rgba(225, 75, 68, 0.10); color: var(--rosso); }
.modulo .turnstile { margin: 8px 0 14px; min-height: 66px; }
@media (max-width: 600px) { .modulo .griglia { grid-template-columns: 1fr; gap: 0; } }

/* 12. documento legale -------------------------------------------------------------------- */
.documento { display: grid; grid-template-columns: 240px 1fr; gap: 56px; padding: 150px 0 90px; }
.documento-indice { position: sticky; top: 100px; align-self: start; }
.documento-indice h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--testo-3); margin-bottom: 10px; }
.documento-indice ol { list-style: none; border-left: 1px solid var(--bordo); }
.documento-indice li a { display: block; padding: 6px 14px; color: var(--testo-2); text-decoration: none; font-size: 14px; border-left: 2px solid transparent; margin-left: -1px; }
.documento-indice li a:hover, .documento-indice li a[aria-current="true"] { color: var(--testo); border-left-color: var(--accento); }
.documento-corpo { max-width: 700px; }
.documento-corpo h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 800; line-height: 1.06; margin: 14px 0 10px; }
.documento-corpo .versione { font-family: var(--font-mono); font-size: 12.5px; color: var(--testo-3); margin-bottom: 30px; }
.documento-corpo .versione a { color: var(--accento-scuro); }
.documento-corpo h2 { font-size: 22px; margin: 34px 0 10px; }
.documento-corpo p, .documento-corpo li { color: var(--testo-2); line-height: 1.7; margin-bottom: 12px; }
.documento-corpo ul { padding-left: 20px; }
@media (max-width: 920px) { .documento { grid-template-columns: 1fr; gap: 24px; padding-top: 110px; } .documento-indice { position: static; } }

/* campionario e 404 ------------------------------------------------------------------------- */
.campione { border-top: 2px dashed var(--bordo-vivo); padding-top: 30px; margin-top: 40px; }
.campione-titolo { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rosso); margin-bottom: 20px; }
.pagina-404 { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 150px var(--bordo-pagina) 80px; }
.pagina-404 h1 { font-size: clamp(40px, 8vw, 96px); font-weight: 850; letter-spacing: -0.03em; }

/* larghezze: un figlio di griglia o di flex non deve mai allargare la pagina (nowrap dentro i mockup) */
.hero-griglia > *, .funzione > *, .scena > *, .finestra, .scheda, .r-nome, .a-nome, .c-info { min-width: 0; }
.affianco { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: start; }
.affianco.pari { grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 720px) { .affianco, .affianco.pari { grid-template-columns: 1fr; } }