/* SISTEMA VISIVO DELLE PAGINE — condiviso da tutte le pagine di copy-pagine/.
   Deriva dalla pagina-campione F1 v2.1 approvata (team+AM, 21-07): 7 fasce,
   combinazione A blu notte, Quicksand self-hosted. Non si modifica per una
   pagina sola: quello che cambia qui cambia ovunque. */
:root {
    --bg: #D5E6D3;
    --ink: #1B1B1B;
    --ink-dim: #4A5850;
    --hairline: color-mix(in srgb, var(--ink) 16%, transparent);
    --scuro: #1B2D1C;
    --avorio: #F2F2EC;
    --avorio-dim: #AFBCAB;
    --hairline-scuro: color-mix(in srgb, var(--avorio) 18%, transparent);
    --card: color-mix(in srgb, #FFFFFF 58%, var(--bg));
    /* Due tinte per le card domanda degli approfondimenti, alternate una sì una no.
       Servono a NON far leggere la pagina come una distesa di card uguali, visto che in
       fondo ce ne sono già nove (rilievo SD 31-07). Sono entrambe più chiare del fondo,
       quindi restano in rilievo; la differenza è di temperatura, non di valore: una
       calda (l'avorio del sistema) e una fredda (velo d'accento), così l'alternanza si
       percepisce senza diventare una scacchiera. Nessuna delle due coincide col bianco
       verdato di --card, che resta la firma delle card su cui si clicca. */
    --qa-caldo: var(--avorio);
    --qa-freddo: color-mix(in srgb, var(--accent) 9%, #FFFFFF);
    --panel-video: #17251C;
    /* Colori degli stati di revisione (scelte SD 31-07): ROSSO = ancora da giudicare,
       blu = già scelto altrove, VERDE BRILLANTE = approvato da SD,
       GIALLO CANARINO = da correggere (corregge Claude). */
    --st-bozza: #C0392B;
    --st-mancante: #8A9088;
    --st-scelto: #1F4A6E;
    --st-approvato: #2ECC40;
    --st-rivedere: #FFD400;
  }

  /* Combinazione A (blu notte) FISSA: il contenitore è chiuso, niente switch. */
  html[data-cta="blu"] { --cta-bg: #1F4A6E; --cta-fg: #FFFFFF; --cta-bg-hover: #16374F; --cta-sec: #1F4A6E; --accent: #1F4A6E; --frame-dose: 24%; }

  @font-face {
    font-family: Quicksand;
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("/assets/fonts/quicksand-vf-latin.woff2") format("woff2");
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: Quicksand, "Segoe UI", system-ui, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.65;
  }

  a { color: inherit; }
  strong { font-weight: 700; }

  .plink { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
  .plink:hover { color: color-mix(in srgb, var(--accent) 75%, #000); text-decoration-thickness: 2.5px; }

  :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 3px; }
  .atto-scuro :focus-visible, body.menu-scuro .site-head :focus-visible { outline-color: var(--avorio); }

  /* ---------- Menu e footer ---------- */

  .site-head {
    position: fixed;
    inset: 0 0 auto;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 13px max(7vw, calc((100vw - 1720px) / 2));
    font-weight: 600;
    font-size: clamp(15px, 0.9vw, 18px);
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    backdrop-filter: blur(9px);
    border-bottom: 1px solid var(--hairline);
    transition: background .25s, color .25s, border-color .25s;
  }

  .site-head .logo img { height: 30px; width: auto; display: block; }
  .site-head .logo .neg { display: none; }
  .site-head nav { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
  .site-head nav a, .site-foot nav a { text-decoration: none; }
  .site-head nav a:hover, .site-foot nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .spacer { margin-left: auto; }

  /* ---------- Tendine dell'header (#193) ---------- */
  /* <details>/<summary>: aprono anche senza JS e la tastiera li gestisce da sola;
     pagina.js aggiunge solo chiusura su click fuori, su Esc e apertura una alla volta.
     Liste semplici: mai mega-menu (D2/#174, confermato in #193). */
  .nav-gruppo { position: relative; }
  .nav-gruppo > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    user-select: none;
  }
  .nav-gruppo > summary::-webkit-details-marker { display: none; }
  .nav-gruppo > summary::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s;
  }
  .nav-gruppo[open] > summary::after { transform: rotate(225deg) translateY(1px); }
  .nav-gruppo > summary:hover { text-decoration: underline; text-underline-offset: 4px; }
  .tendina {
    position: absolute;
    top: calc(100% + 12px);
    left: -14px;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    background: var(--bg);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow: 0 14px 30px color-mix(in srgb, var(--ink) 16%, transparent);
  }
  .tendina a { padding: 8px 12px; border-radius: 9px; white-space: nowrap; }
  .tendina a:hover { background: color-mix(in srgb, currentColor 9%, transparent); text-decoration: none; }
  /* Separatore fra le due famiglie di «Prodotto» (la piattaforma / le persone).
     È un <hr>, non un bordo CSS: porta con sé role="separator", quindi il gruppo si
     sente anche con lo screen reader e non è solo una riga decorativa. */
  .tendina-sep {
    /* `color: inherit` è necessario: il foglio di stile del browser impone all'<hr> un
       colore grigio suo, quindi senza questa riga currentColor non è il colore del testo
       e la linea sparisce sul fondo scuro (difetto trovato in verifica, 03-08). */
    color: inherit;
    margin: 8px 12px;
    border: 0;
    border-top: 1px solid color-mix(in srgb, currentColor 34%, transparent);
  }
  body.menu-scuro .tendina {
    background: var(--scuro);
    border-color: var(--hairline-scuro);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
  }

  /* Selettore di lingua (#193, forma corretta da SD il 03-08): mostra la lingua
     CORRENTE accanto a un globo, e apre l'altra — come sul sito attuale. La sigla di
     destinazione era ambigua: leggendo «EN» non si capisce se ci si è o ci si va. */
  .lang-gruppo > summary {
    gap: 6px;
    font-weight: 700;
    font-size: .9em;
    letter-spacing: .03em;
    padding: 5px 11px;
    border: 1.6px solid color-mix(in srgb, currentColor 45%, transparent);
    border-radius: 999px;
  }
  .lang-gruppo > summary::after { margin-left: 1px; }
  .lang-gruppo > summary:hover { border-color: currentColor; text-decoration: none; }
  .lang-gruppo .globo { flex: none; }
  .tendina-lang {
    min-width: 0;
    left: auto;
    right: 0;
    text-align: center;
  }
  .tendina-lang a { font-weight: 700; letter-spacing: .03em; }
  .lang-mobile { display: none; }

  .btn-head {
    background: var(--cta-bg);
    color: var(--cta-fg);
    border-radius: 999px;
    padding: 9px 20px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s;
  }
  .btn-head:hover { background: var(--cta-bg-hover); }

  .hamb {
    display: none;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: inherit;
    cursor: pointer;
    place-items: center;
  }
  .hamb:hover { background: color-mix(in srgb, currentColor 10%, transparent); }

  body.menu-scuro .site-head {
    background: color-mix(in srgb, var(--scuro) 86%, transparent);
    color: var(--avorio);
    border-bottom-color: var(--hairline-scuro);
  }
  body.menu-scuro .site-head .logo .pos { display: none; }
  body.menu-scuro .site-head .logo .neg { display: block; }
  body.menu-scuro .btn-head { background: var(--avorio); color: var(--scuro); }
  body.menu-scuro .btn-head:hover { background: #FFFFFF; }

  .site-foot {
    margin-top: auto;
    padding: 20px 0 4px;
    border-top: 1px solid var(--hairline);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-dim);
  }
  .site-foot img { height: 26px; width: auto; }
  .site-foot nav { display: flex; gap: 20px; flex-wrap: wrap; }

  /* ---------- Fasce ---------- */

  .scena {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 88px max(7vw, calc((100vw - 1720px) / 2)) 72px;
    position: relative;
  }

  .atto-scuro { background: var(--scuro); color: var(--avorio); }
  .atto-scuro .dim { color: var(--avorio-dim); }

  /* [F1] Gancio */
  .s-hook { min-height: 100svh; align-items: center; text-align: center; position: relative; }

  /* `margin-inline: auto` NON e' decorativo: l'h1 e' avvolto da un div (.anim, e
     in mockup anche .rev-blocco) che prende tutta la larghezza, quindi il
     `align-items: center` della fascia centra il wrapper, non il titolo. Senza
     auto il titolo resta ancorato a sinistra e la domanda di F1 esce fuori asse
     (rilievo SD 31-07, riaperto il 24-08 sul pacchetto di revisione: la regola
     stava solo in revisione.css, che la build pulita non carica). */
  .s-hook h1 {
    margin: 0 auto;
    max-width: min(21ch, 100%);
    font-size: clamp(2.1rem, 5vw, 6.25rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.015em;
  }

  .hint {
    position: absolute;
    bottom: 26px;
    left: 50%;
    translate: -50% 0;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--avorio) 55%, transparent);
    display: grid;
    place-items: center;
    color: var(--avorio);
    animation: nudge 1.9s ease-in-out infinite;
    transition: border-color .15s, background .15s;
  }
  .hint:hover { border-color: var(--avorio); background: color-mix(in srgb, var(--avorio) 12%, transparent); }
  .hint svg { display: block; }
  @keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }

  /* A CAPO COMPOSTI A MANO, SOLO SUGLI SCHERMI LARGHI (SD, 02-09, #199).
     Sui testi grandi e centrati gli a capo automatici cadono dove capita e lasciano
     parole orfane; la composizione giusta si decide leggendo, e SD la decide sulla
     viewport di riferimento (1920). Ma un <br> nudo vale a OGNI larghezza: la stessa
     composizione, imposta a 390, spezza le righe due volte e produce orfani nuovi
     (provato sulla lama di /vibe-coding: «codice» e «mantiene» finivano da soli).
     Questa classe fa valere l'a capo solo da 901px in su — la soglia già usata dal
     sistema — e sotto lascia che il testo si disponga da sé.
     ⚠️ Si usa dove la composizione è stata DECISA guardandola, mai per abitudine: un
     <br> è una scelta fissa e va giustificata blocco per blocco. */
  br.br-largo { display: none; }
  @media (min-width: 901px) { br.br-largo { display: inline; } }

  /* [F2] Pain + lama di luce */
  .s-pain { min-height: 100svh; padding: 0; }
  .s-pain .pain-scuro {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 96px max(7vw, calc((100vw - 1720px) / 2)) 44px;
  }
  .s-pain .pain-luce {
    min-height: 32svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px max(7vw, calc((100vw - 1720px) / 2)) 34px;
  }
  .s-pain .frase-eroe {
    margin: 0;
    max-width: 40ch;
    font-size: clamp(1.35rem, 2.1vw, 2.5rem);
    font-weight: 600;
    line-height: 1.3;
  }
  .s-pain .colonna { max-width: 46em; margin-inline: auto; width: 100%; }
  .s-pain p { font-size: clamp(1.05rem, 1.35vw, 1.55rem); margin: 0 0 1.15em; }

  /* DUE CORPI SOLI NELLA FASCIA (rilievo SD, 02-09, #199, su richiesta di non usare
     troppi corpi diversi): la voce del cliente scende al corpo della prosa, e l'unica
     cosa grande resta lo statement finale. Prima erano tre corpi con salti sghembi
     (24,8 → 40 → 52,8 a 1920: ×1,61 poi ×1,32, cioè il secondo gradino più piccolo del
     primo, che si legge come un errore invece che come gerarchia).
     Il caso che ha deciso è `/ai-per-programmare`, non la home: lì la battuta dell'AI è
     di tre righe e a 40px si mangiava la fascia, mettendosi in concorrenza con la
     domanda finale. A corpo di prosa sta su una riga e lo statement torna a essere la
     cosa più grande.
     LA VOCE RESTA RICONOSCIBILE SENZA IL CORPO: la fanno il corsivo, le virgolette, il
     peso 600 contro il 500 della prosa e il grigio attenuato (.dim) di attribuzione e
     conseguenza. L'interlinea non si ridichiara: tolto l'override 1.3, eredita quella
     dei paragrafi (1,65) ed è identica per costruzione.
     ⛔ La lama nella fascia chiara (.frase-eroe) NON si tocca: «ha un altro senso» (SD). */
  .s-pain .frase-ai {
    font-size: clamp(1.05rem, 1.35vw, 1.55rem);
    font-weight: 600;
    font-style: italic;
    margin: 0 0 1em;
  }

  /* LO STATEMENT PARLA COME LA LAMA (SD, 02-09, #199): stesso corpo, non centrato.
     Con la voce del cliente scesa al corpo della prosa la fascia aveva due misure; SD
     ha chiuso il sistema portando lo statement alla misura della lama, che è l'altro
     enunciato della sequenza — la domanda chiude il buio, la risposta apre la luce, e
     alla stessa voce si leggono come uno scambio invece che come due frasi grandi in
     fila. Il clamp è COPIATO da .frase-eroe: se un giorno cambia lì, va cambiato qui.
     ⛔ PROVATO E SCARTATO nello stesso giro: centrare anche lo statement, per dargli
     lo stesso trattamento della domanda di fascia 1 e della lama. Sulla carta chiudeva
     il sistema («a sinistra racconta, al centro afferma»); in pagina no — prosa e
     citazione partono dal margine sinistro e lo statement rientrava, spezzando la
     colonna proprio dove la lettura deve scendere dritta (SD: «non parte allineato con
     la descrizione precedente e così si legge tutto male»). I tre blocchi condividono
     lo stesso bordo, misurato: 538px a 1920 su /creare-software-gestionale.
     ⛔ La lama (.frase-eroe) NON si tocca: «ha un altro senso» (SD). Qui si è portato
     lo statement alla sua misura, non il contrario. */
  .s-pain .punch {
    font-size: clamp(1.35rem, 2.1vw, 2.5rem);
    font-weight: 600;
    line-height: 1.25;
    margin: 1.1em 0 0 !important;
  }

  /* [F3] Eroe: frase sopra + segnaposto video in cornice + banda CTA */
  .s-eroe {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: var(--alt-barra, 57px);
  }
  @media (min-width: 901px) {
    .s-eroe { height: 88svh; }
  }
  .s-eroe .frase-sopra {
    margin: 0;
    padding: clamp(10px, 1.6svh, 18px) 6vw 4px;
    text-align: center;
    font-weight: 600;
    font-size: clamp(1.1rem, 1.4vw, 1.65rem);
  }
  .s-eroe .palco {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bg);
  }
  /* ⛔ LA CORNICE NON IMPONE PIÙ IL FORMATO: lo impone il video, che è l'unico a conoscerlo.
     Qui la cornice fa solo da bordo e si stringe sul contenuto (`fit-content`).
     PERCHÉ, con la storia in breve (05-09, dentro il QA #163). Il video usciva tagliato ai lati:
     la cornice portava `aspect-ratio` con `padding: 8px` in `border-box`, quindi il rapporto
     governava il bordo ESTERNO e l'area interna valeva (L−16)/(A−16) — 0,5504 invece di 0,5625,
     7 px di quadro persi. Il primo rimedio (passare la cornice a `content-box`) ha azzerato il
     taglio su Chrome ma NON su Safari iOS, dove il difetto è perfino peggiorato: 9,19 px.
     Misurato su un iPhone 16 vero, non dedotto — Safari, davanti a `aspect-ratio` + `max-height`,
     restringe anche la LARGHEZZA del contenitore (palco 321 invece di 402), Chrome no. Poggiare
     il formato su quel comportamento vuol dire scrivere una regola che vale su un browser solo,
     e su Chrome la verifica non lo può vedere.
     Il formato messo sul VIDEO toglie di mezzo la divergenza: un elemento rimpiazzato con
     `max-width`/`max-height` e dimensioni intrinseche si ridimensiona mantenendo il rapporto —
     è il comportamento più antico e più uniforme del CSS, lo stesso di `img { max-width:100% }`.
     Con l'area interna che ha ESATTAMENTE il rapporto del file, `object-fit` non ha più niente
     da tagliare, su nessun browser.
     `flex: none` non è ornamentale: senza, il `flex-shrink` del palco stringerebbe la cornice
     senza toccare l'altezza — in silenzio. */
  .s-eroe .shot-eroe {
    --bordo-eroe: 8px;
    flex: none;
    width: fit-content;
    max-width: 100%;
    padding: var(--bordo-eroe);
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) var(--frame-dose), transparent);
    box-shadow:
      0 1px 2px rgba(20, 35, 26, .08),
      0 10px 24px -12px rgba(20, 35, 26, .18);
    scale: .86;
  }
  .s-eroe .palco.in .shot-eroe {
    scale: 1;
    transition: scale 1s cubic-bezier(.3, .6, .3, 1) .1s;
  }
  @media (min-width: 901px) {
    /* Il tetto ora è del VIDEO, non della cornice, ed è espresso in altezza invece che in
       larghezza: è la stessa quantità di prima — quel che resta della fascia una volta tolte
       barra, banda ed eventuale frase — meno il doppio del bordo, che sta fuori dal video.
       Non serve più convertirla in larghezza moltiplicando per 16/9: al rapporto ci pensa il
       video da sé, ed è proprio quella conversione che rendeva la regola dipendente dal modo
       in cui il browser risolve `aspect-ratio` sui contenitori. Il tetto di 1720 px resta sulla
       larghezza, dove è sempre stato. */
    .s-eroe .shot-eroe { --tetto-video: calc(88svh - var(--alt-barra, 57px) - var(--alt-banda, 140px) - var(--alt-frase, 0px) - var(--bordo-eroe) * 2); }
    .s-eroe .shot-eroe video { max-width: min(100%, 1720px); }
  }

  .s-eroe .banda-cta {
    padding: clamp(16px, 2.6svh, 30px) 6vw;
    text-align: center;
  }
  .s-eroe .invito-eroe {
    margin: 0 0 10px;
    font-size: clamp(1.1rem, 1.3vw, 1.55rem);
    font-weight: 600;
  }

  /* [F4] Svolta */
  .s-svolta .due-colonne {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 4vw;
    align-items: center;
  }
  .s-svolta p { font-size: clamp(1.05rem, 1.3vw, 1.5rem); margin: 0 0 1.05em; }

  figure { margin: 0; }
  figcaption { font-size: clamp(13px, 0.8vw, 16px); font-weight: 500; color: var(--ink-dim); margin-top: .8em; }

  .shot {
    border-radius: 14px;
    padding: 8px;
    background: color-mix(in srgb, var(--accent) var(--frame-dose), transparent);
    box-shadow:
      0 1px 2px rgba(20, 35, 26, .08),
      0 10px 24px -12px rgba(20, 35, 26, .18);
  }
  /* `video` sta qui accanto a `img` per la clip della fascia 5 (03-09): è un elemento
     rimpiazzato con dimensione intrinseca 1920x1080, quindi senza `width:100%` sborda
     dalla colonna a QUALSIASI larghezza. Il video eroe non passa di qui: ha cornice e
     regola sue (`.s-eroe .shot-eroe video`, più sotto). */
  .shot img, .shot video, .shot .media-ph { border-radius: 8px; overflow: hidden; width: 100%; }
  .shot img, .shot video { display: block; height: auto; }
  /* ⛔ `object-fit: cover` NON è un dettaglio: senza, il video sta a `contain`, cioè
     incornicia in letterbox — e Chrome dipinge la banda di letterbox in NERO. La scatola
     esce larga 880,104 px e alta 495,0568, cioè 0,002 px meno di quanto servirebbe per il
     16:9 esatto: basta quello per un filo nero fra la cornice e il video (rilievo SD, 03-09).
     Con `cover` la banda non esiste, quindi il nero non può comparire; si perde una frazione
     di pixel di contenuto, invisibile. `aspect-ratio` fissa il formato anche PRIMA che
     arrivino i metadati, così la pagina non salta al caricamento. È la stessa soluzione già
     adottata per il video eroe, dove però la impone la cornice. */
  .shot video { aspect-ratio: 16 / 9; object-fit: cover; }

  .cta-mini {
    display: inline-block;
    font-weight: 700;
    font-size: 16px;
    padding: 12px 30px;
    border-radius: 999px;
    background: var(--cta-bg);
    color: var(--cta-fg);
    text-decoration: none;
    transition: background .15s;
  }
  .cta-mini:hover { background: var(--cta-bg-hover); }
  .cta-riga { text-align: center; margin-top: clamp(20px, 3.2svh, 40px); }
  .s-svolta .cta-riga { text-align: left; margin-top: 1.8em; }

  /* [F5] Prova */
  .s-prova .griglia {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 4vw;
    align-items: center;
  }

  .s-prova .prosa-lead { font-size: clamp(1.05rem, 1.3vw, 1.5rem); margin: 0 0 1.1em; }

  .s-prova figure {
    width: 100%;
    max-width: min(100%, calc((100svh - 480px) * 1.7778));
    margin-inline: auto;
  }

  .card-ciclo {
    background: var(--card);
    border-radius: 14px;
    padding: clamp(20px, 2vw, 34px) clamp(22px, 2.4vw, 40px);
    box-shadow:
      0 1px 2px rgba(20, 35, 26, .07),
      0 8px 22px -12px rgba(20, 35, 26, .16);
  }
  .card-ciclo .titolo-card {
    font-size: clamp(.85rem, .9vw, 1rem);
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin: 0 0 14px;
  }
  .card-ciclo ol { list-style: none; margin: 0; padding: 0; }
  .card-ciclo li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: clamp(1.05rem, 1.3vw, 1.5rem);
    font-weight: 600;
    padding: 9px 0;
  }
  .card-ciclo li + li { border-top: 1px solid var(--hairline); }
  .card-ciclo .chiusa { color: var(--ink-dim); font-weight: 500; }

  .segno {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    display: grid;
    place-items: center;
  }
  .segno svg { display: block; }
  .segno path { stroke: var(--accent); }

  /* STACCO DALLA GRIGLIA SOPRA (rilievo SD nella sua revisione, applicato 02-09, #199:
     «stacchiamo questa frase visivamente dal blocco sopra»). Sopra c'è una griglia a due
     colonne che parla del PRODOTTO, qui una riga larga e centrata che parla di NOI: sono
     due discorsi diversi e a 26px di distanza il secondo si leggeva come la didascalia
     della card del ciclo. Alzato da clamp(16-28) a clamp(40-72): 65px a 1920, 50 a 390.
     Le due eccezioni per schermi bassi e tablet stretti salgono in proporzione (16→32 e
     12→24, più in fondo al foglio): senza, il rimedio non arrivava proprio dove il
     difetto era peggiore. Misurato: a 1366×768 la fascia passa da 699 a 715 su 768,
     quindi restano 53px di respiro. Vale sulle 5 landing, zero pagine convertite. */
  .s-prova .prosa-fondo {
    max-width: 52em;
    margin: clamp(40px, 6svh, 72px) auto 0;
    font-size: clamp(1.05rem, 1.25vw, 1.45rem);
    text-align: center;
  }
  .s-prova .prosa-fondo p { margin: 0 0 .4em; }
  .s-prova .prosa-fondo .cta-mini { margin-top: 12px; }

  /* Filtro anti-founder: riga discreta in coda alla fascia 5, stile link secondario. */
  .filtro-founder {
    margin: 18px auto 0;
    font-size: clamp(.9rem, .85vw, 1.05rem);
    color: var(--ink-dim);
  }

  /* [F6] Lockup + CTA */
  .s-cta { padding-left: 0; padding-right: 0; text-align: center; }

  .fascia {
    background: var(--card);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    padding: clamp(36px, 5vw, 72px) 7vw;
    display: flex;
    justify-content: center;
  }

  .lockup { display: block; width: clamp(280px, 27vw, 560px); height: auto; }

  .cta-corpo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 max(7vw, calc((100vw - 1720px) / 2));
  }

  .s-cta .invito {
    font-size: clamp(1.2rem, 1.7vw, 1.9rem);
    max-width: 28em;
    margin: 26px 0 0;
  }

  .cta-row { margin-top: 22px; }

  .cta-primary {
    display: inline-block;
    font-weight: 700;
    font-size: clamp(1.1rem, 1.25vw, 1.5rem);
    padding: clamp(12px, 0.9vw, 17px) clamp(28px, 2.2vw, 44px);
    border-radius: 999px;
    background: var(--cta-bg);
    color: var(--cta-fg);
    text-decoration: none;
    transition: background .15s;
  }
  .cta-primary:hover { background: var(--cta-bg-hover); }

  .cta-alt { margin-top: 18px; font-size: clamp(1rem, 0.95vw, 1.15rem); display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; }
  .cta-alt p { margin: 0; color: var(--ink-dim); }

  .cta-secondary {
    display: inline-block;
    font-weight: 700;
    font-size: 16px;
    padding: 10px 26px;
    border-radius: 999px;
    border: 2px solid var(--cta-sec);
    color: var(--cta-sec);
    text-decoration: none;
    transition: background .15s;
  }
  .cta-secondary:hover { background: color-mix(in srgb, var(--cta-sec) 12%, transparent); }

  /* [F7] Card approfondimento */
  .menu-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 1.4vw, 26px);
    max-width: 1400px;
    /* PAVIMENTO SOTTO LE CARD (rilievo AM, 02-09, #199). Il footer sta DENTRO questa
       stessa sezione e ha anch'esso margine automatico: quando la sezione è piena lo
       spazio residuo da spartire è zero, e la righetta del footer arriva a toccare
       l'angolo stondato dell'ultima card. Il margine automatico resta (serve a spingere
       il blocco in basso quando la sezione avanza spazio), ma sotto c'è un minimo
       garantito. Il valore è deliberatamente MAGGIORE del gap fra le card
       (clamp 18-26): con una misura uguale o minore la riga si legge come l'ennesima
       linea della griglia invece che come il confine del footer. */
    margin: auto auto clamp(28px, 2.6vw, 44px);
  }

  .voce {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border-radius: 14px;
    padding: clamp(18px, 1.6vw, 26px) clamp(20px, 1.8vw, 28px) clamp(14px, 1.3vw, 20px);
    text-decoration: none;
    box-shadow:
      0 1px 2px rgba(20, 35, 26, .07),
      0 8px 22px -12px rgba(20, 35, 26, .16);
    transition: box-shadow .15s;
  }
  .voce:hover {
    box-shadow:
      0 2px 4px rgba(20, 35, 26, .09),
      0 14px 30px -12px rgba(20, 35, 26, .24);
  }
  .voce h3 { margin: 0; font-size: clamp(1.05rem, 1.05vw, 1.3rem); font-weight: 700; line-height: 1.35; }
  .voce p { margin: .45em 0 0; font-size: clamp(0.9rem, 0.85vw, 1.1rem); color: var(--ink-dim); line-height: 1.5; }

  .voce .go {
    margin-top: auto;
    align-self: flex-end;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    display: grid;
    place-items: center;
    transition: background .15s;
  }
  .voce .go svg { display: block; }
  .voce .go path { stroke: var(--accent); transition: stroke .15s; }
  .voce:hover .go { background: var(--accent); }
  .voce:hover .go path { stroke: #FFFFFF; }
  .voce :where(h3, p):last-of-type { margin-bottom: clamp(14px, 1.4svh, 22px); }

  .foot-riga { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
  .foot-riga .spacer { margin-left: auto; }
  .foot-legale {
    margin-top: 16px;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.7;
  }
  .foot-legale p { margin: 0; }
  .foot-legale a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
  .foot-legale a:hover { color: color-mix(in srgb, var(--accent) 75%, #000); }

  /* ---------- Tipi di pagina non-landing ----------
     Le 7 fasce sono lo stampo delle LANDING. Approfondimenti, pagine di servizio e
     legali fanno un lavoro diverso: l'approfondimento risponde a chi è già in pagina
     e vuole i fatti (struttura a domande, citabile dai motori generativi — sitemap
     §2.3 e §10), il servizio ospita testo istituzionale. Restano condivisi header,
     fascia 1-domanda, lockup+CTA, card e footer: cambia il corpo. */

  /* [A1] RISPOSTA SECCA = la lama di luce dell'approfondimento. Si esce dalla fascia
     scura della domanda e si atterra sulla risposta, in luce e al centro: stesso
     movimento della lama di F2 nelle landing, senza il pain davanti. È anche il primo
     blocco che un motore generativo estrae, quindi deve reggere staccato dal resto. */
  .s-risposta {
    min-height: 42svh;
    align-items: center;
    text-align: center;
    padding-top: clamp(60px, 8svh, 110px);
    padding-bottom: clamp(30px, 4svh, 56px);
  }
  /* Scala più bassa della lama di luce delle landing: là è una frase sola e può urlare,
     qui è una risposta di due o tre righe (140-260 caratteri) e con quel corpo diventava
     una colonna di otto righe a bandiera. */
  .s-risposta .colonna { max-width: 52em; margin-inline: auto; width: 100%; }
  .s-risposta .risposta {
    margin: 0 auto;
    max-width: 46ch;
    font-size: clamp(1.2rem, 1.45vw, 1.75rem);
    font-weight: 600;
    line-height: 1.4;
  }

  /* [A2] HERO IMMAGINE. L'approfondimento non ha il video eroe delle landing: al suo
     posto UNA immagine grande, subito dopo la risposta. Non è decorazione — è la cosa
     che rende credibile la risposta prima che cominci l'elenco delle domande. Cornice
     e dose d'accento sono quelle del sistema (.shot), l'altezza è più contenuta del
     palco video perché qui la pagina deve proseguire, non fermarsi. */
  .s-eroe-img { padding-top: 0; padding-bottom: clamp(40px, 5svh, 72px); }
  .s-eroe-img figure { max-width: min(100%, 1180px); margin-inline: auto; width: 100%; }
  .s-eroe-img figcaption { text-align: center; }

  /* [A2 · variante LOCKUP] Su /chi-siamo l'hero non è una fotografia: è il lockup, in
     grande e in negativo (proposta SD, 20-08). Regge perché lì il soggetto della pagina
     È l'identità, quindi il marchio non riempie un buco, dice di cosa si sta parlando.
     Il fondo scuro serve a due cose: separarlo dal lockup di fascia 6, che è il culmine
     della pagina e non deve sembrarne una replica, e dare al segno il respiro che su
     fondo chiaro non avrebbe. Stessa cornice del sistema (.shot): cambia il contenuto,
     non il formato. */
  .lockup-hero {
    aspect-ratio: 16 / 7;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--scuro);
    padding: clamp(12px, 2vw, 28px);
  }
  .lockup-hero img { width: min(94%, 900px); height: auto; display: block; }
  @media (max-width: 700px) {
    .lockup-hero { aspect-ratio: 4 / 3; }
    .lockup-hero img { width: min(96%, 520px); }
  }


  /* [A3] DOMANDE E FATTI — carta velata a due tinte alternate (scelta SD, 31-07:
     variante A fra le tre in prova; le altre due sono state tolte). */
  .s-qa { padding-top: clamp(20px, 3svh, 40px); }
  .s-qa .colonna { max-width: 52em; margin-inline: auto; width: 100%; }
  .qa h2 {
    margin: 0 0 .5em;
    font-size: clamp(1.2rem, 1.55vw, 1.8rem);
    font-weight: 700;
    line-height: 1.3;
  }
  .qa p { font-size: clamp(1.02rem, 1.2vw, 1.38rem); margin: 0 0 .9em; }
  .qa p:last-of-type { margin-bottom: 0; }
  .qa ul { margin: 0 0 .9em; padding-left: 1.3em; }
  .qa li { font-size: clamp(1.02rem, 1.2vw, 1.38rem); margin-bottom: .4em; }

  /* Ogni domanda è una scheda. Le tinte si alternano (caldo / freddo) e NON portano
     ombra: l'ombra è la firma delle card di fascia 7, quelle su cui si clicca. Qui si
     legge e basta, quindi la superficie è piatta. È la differenza che impedisce alla
     pagina di sembrare due griglie della stessa cosa, una sopra l'altra. */
  .qa-carta .qa {
    background: var(--qa-caldo);
    border-radius: 14px;
    padding: clamp(20px, 1.9vw, 32px) clamp(22px, 2.2vw, 38px);
  }
  .qa-carta .qa:nth-child(even) { background: var(--qa-freddo); }
  .qa-carta .qa + .qa { margin-top: clamp(10px, 1vw, 16px); }

  /* Riga del caso terzo (link .plink al case study — formato standard §1 di
     selezione-case-study.md, esteso agli approfondimenti in #187): prosa breve
     dopo l'ultima domanda, prima della CTA di fascia. */
  .caso-riga {
    font-size: clamp(1.02rem, 1.2vw, 1.38rem);
    margin: clamp(14px, 1.4vw, 22px) 0 0;
  }

  /* La riga «fonte del fatto» (.fonte-fatto) è stata ELIMINATA il 18-08 (decisione SD,
     #187): le fonti autoreferenziali con la data di stesura non sono fonti. La
     provenienza dei fatti resta nei data-fonte dei box, che non vanno in pubblico. */

  /* Avviso «testi finti» — UNO SOLO per pagina, fisso in basso a sinistra, fuori dal
     contenuto. Prima era un bollo su ogni blocco riempito: SD lo ha bocciato perché
     impediva di valutare la pagina (rilievo 31-07). L'avvertenza serve comunque — un
     testo di riempimento scambiato per copy approvato è già costato tre chiarimenti —
     ma sta fuori dalla pagina, non dentro. Il dettaglio blocco per blocco resta nei
     data-fonte, e ogni blocco riempito è comunque data-stato="mancante". */
  .avviso-finto {
    position: fixed;
    left: 14px;
    bottom: 14px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px dashed color-mix(in srgb, var(--st-bozza) 50%, transparent);
    background: color-mix(in srgb, var(--st-bozza) 10%, #FFFFFF);
    color: var(--st-bozza);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    box-shadow: 0 2px 10px -4px rgba(20, 35, 26, .3);
  }
  /* Sotto i ~720px l'avviso e i chip di revisione (in basso a destra) non stanno più
     sulla stessa riga senza toccarsi (verifica viewport 390, 03-08): l'avviso sale
     sopra la linea dei chip. Solo mockup: in pubblico non c'è né l'uno né gli altri. */
  @media (max-width: 720px) { .avviso-finto { font-size: 11px; padding: 6px 10px; bottom: 58px; } }

  /* Corpo delle pagine di servizio: prosa istituzionale, nessuna storia. */
  .s-corpo { padding-top: 96px; }
  .s-corpo .colonna { max-width: 48em; margin-inline: auto; width: 100%; }
  .s-corpo p { font-size: clamp(1.05rem, 1.3vw, 1.5rem); margin: 0 0 1.05em; }
  .s-corpo h2 {
    margin: 1.4em 0 .5em;
    font-size: clamp(1.2rem, 1.5vw, 1.7rem);
    font-weight: 700;
  }

  /* Riquadri informativi del corpo servizio (nati su /contatti, rilievo SD 03-08:
     la sola prosa era troppo piatta — riferimento: sezione sedi del sito attuale).
     Tile squadrati affiancati per i fatti puntuali: canali, sedi, recapiti.
     Bordo hairline e superficie piatta, NIENTE ombra: l'ombra resta la firma delle
     card di fascia 7, quelle su cui si clicca. */
  .info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.2vw, 22px);
    margin: clamp(22px, 3svh, 36px) 0 0;
  }
  .info-grid.due { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-box {
    /* Colonna, perché la riga dei recapiti si ancora al fondo (vedi .riga-rec). */
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--hairline);
    border-radius: 14px;
    padding: clamp(20px, 1.9vw, 30px) clamp(18px, 1.7vw, 26px);
    text-align: center;
    /* Tinta FREDDA delle schede approfondimento (scelta SD 03-08): il primo giro
       usava un bianco-verdato troppo vicino a --card, la firma delle card cliccabili. */
    background: var(--qa-freddo);
  }
  .info-box .ico {
    width: 46px;
    height: 46px;
    margin: 0 auto 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    display: grid;
    place-items: center;
  }
  .info-box .ico svg { display: block; }
  .info-box h3 { margin: 0 0 .45em; font-size: clamp(1.02rem, 1.05vw, 1.25rem); font-weight: 700; line-height: 1.3; }
  /* DUE RIGHE RISERVATE AL TITOLO dove le schede stanno affiancate (SD, 02-09, #199).
     «Direzione e Uffici commerciali» va a capo e gli altri due titoli no: senza questo
     i tre indirizzi partivano a quote diverse e la fila si leggeva storta. Sotto i
     901px la griglia è a colonna singola e non c'è niente da allineare: lì lo spazio
     riservato sarebbe solo un buco, quindi la regola vive dentro la media query. */
  @media (min-width: 901px) {
    .info-grid .info-box h3 { min-height: 2.6em; }
  }
  .info-box p { margin: 0; font-size: clamp(.92rem, .95vw, 1.08rem); color: var(--ink-dim); line-height: 1.6; flex: 1; display: flex; flex-direction: column; }
  /* L'indirizzo prende lo spazio che avanza, così la riga dei recapiti finisce in fondo. */
  .info-box .indirizzo { flex: 1; }
  /* align-self: da quando la scheda è una colonna flex (02-09, #199) un figlio si
     stira per tutta la larghezza, e il pulsante da pastiglia diventava una barra
     (misurato: 462px dentro una scheda di 517). Al testo, centrato, come prima. */
  .info-box .cta-secondary { margin-top: 14px; align-self: center; }
  /* Bustina accanto al numero di telefono (SD, 31-08): scrivi agli uffici commerciali.
     L'indirizzo NON sta nel sorgente HTML — lo compone pagina.js da due attributi
     separati (anti-raccolta). Finché l'href non esiste l'icona resta nascosta, così
     senza JS non rimane una bustina che non fa niente. Area di tocco 27px: sopra i
     24px minimi di WCAG 2.2 (2.5.8) sull'icona più piccola della pagina. */
  /* RIGA DEI RECAPITI, rifatta il 02-09 (#199) su rilievo SD. Prima la bustina stava
     attaccata alle ultime cifre del telefono, e lì leggeva come una decorazione del
     numero invece che come una seconda informazione: il telefono è TESTO, la mail è un
     COMANDO. Tre tentativi in riga (separatore, doppia pastiglia, pastiglia con la
     parola «Scrivi») sono caduti tutti — il difetto non era la bustina, era che la
     scheda non aveva una griglia interna che reggesse un'aggiunta all'ultima riga.
     Ora i recapiti sono una fascia in fondo alla scheda, sotto una riga sottile che
     dice una cosa sola e sempre la stessa: «sotto ci sono i recapiti».
     ANCORATA AL FONDO (p in flex, .indirizzo che si espande): così le righette delle
     tre schede cadono alla stessa quota senza doverle inventare un contenuto.
     ⛔ Il fax NON è stato rimesso per riempire la scheda «Sede legale»: era stato tolto
     il 20-08 perché su un sito che vende agenti AI data la pagina, e l'allineamento non
     ne aveva bisogno — chi non ha recapiti semplicemente non porta la riga. */
  .info-box .riga-rec {
    display: flex;
    align-items: center;
    /* Un recapito solo resta al centro: spinto a sinistra da solo, lascia un mezzo
       vuoto a destra e la riga sembra a cui manca un pezzo (visto su Software
       Factory). Il :has() guarda l'href, non la classe, così il caso «JavaScript
       spento» — dove la bustina non esiste — ricade da sé sul centrato. */
    justify-content: center;
    gap: 14px;
    margin-top: .7em;
    padding-top: .6em;
    border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  }
  /* Ai due lati SOLO dove le schede stanno affiancate e sono strette. Sotto i 901px
     la griglia è a colonna singola e la scheda arriva a 661px: lì «space-between»
     scaglia il telefono e la bustina agli estremi opposti con un vuoto in mezzo
     (misurato a 768 il 02-09, #199). Al centro, vicini, si leggono come una coppia. */
  @media (min-width: 901px) {
    .info-box .riga-rec:has(.mailto[href]) { justify-content: space-between; }
  }
  /* Il telefono scende sotto il corpo dell'indirizzo: è un dato di servizio, non una
     riga dell'indirizzo. Il corpo più piccolo è anche ciò che libera la larghezza che
     serviva alla riga inglese, che è più lunga di due parole. */
  /* ALTEZZA RISERVATA, uguale a quella della bustina (21 di icona + 6 di padding per
     lato = 33). Senza, la riga con la bustina è più alta di quella col solo telefono e,
     essendo ancorata al fondo, la sua righetta sale di 16px: le tre schede tornavano
     disallineate proprio nel punto che si voleva allineare (misurato a 1366 e 1536 il
     02-09). Sta sul .tel e non sulla riga perché con box-sizing:border-box un
     min-height sulla riga verrebbe mangiato da padding e bordo. */
  .info-box .riga-rec .tel { font-size: .88em; line-height: 1.3; white-space: nowrap; min-height: 33px; display: inline-flex; align-items: center; }
  /* Bustina verso gli uffici commerciali (SD, 31-08). L'indirizzo NON sta nel sorgente
     HTML — lo compone pagina.js da due attributi separati (anti-raccolta), e finché
     l'href non esiste il link resta nascosto, così senza JS non rimane un'icona muta.
     Pastiglia della stessa famiglia del badge in testa alla scheda (.ico, accent 12%).
     Area di tocco 33px (21 di icona + 6 di padding per lato): sopra i 24px minimi di
     WCAG 2.2 (2.5.8). */
  .info-box .mailto {
    display: none;
    margin: 0;
    padding: 6px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-radius: 9px;
    line-height: 0;
    color: var(--accent);
    transition: background-color .18s ease;
  }
  .info-box .mailto[href] { display: inline-flex; align-items: center; justify-content: center; }
  /* La misura sta qui e non nel markup: l'icona è la stessa dei sorgenti, ridimensionata. */
  .info-box .mailto svg { width: 21px; height: 21px; }
  /* Il fondo a riposo c'è già: l'hover deve staccare da quello, non dal nulla. */
  .info-box .mailto:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }
  @media (max-width: 900px) {
    .info-grid, .info-grid.due { grid-template-columns: 1fr; }
  }

  /* Guscio: riquadro che dichiara un contenuto non ancora scritto e da dove verrà.
     Serve nel mockup, sparisce quando il testo arriva. */
  .guscio {
    border: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent);
    border-radius: 14px;
    padding: clamp(22px, 2.4vw, 38px);
    text-align: center;
    color: var(--ink-dim);
  }
  .guscio p { margin: 0 0 .5em; font-size: clamp(1rem, 1.1vw, 1.25rem); }
  .guscio p:last-child { margin-bottom: 0; }
  .guscio strong { color: var(--ink); }

  /* ---------- Segnaposto media (unico per tutti) ---------- */

  .media-ph {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 8px;
    background:
      repeating-linear-gradient(45deg,
        color-mix(in srgb, var(--accent) 5%, transparent) 0 16px,
        transparent 16px 32px),
      color-mix(in srgb, var(--accent) 8%, #F4F7F3);
  }
  .media-ph .foglia {
    position: absolute;
    inset: 0;
    margin: auto;
    height: 42%;
    opacity: .14;
    pointer-events: none;
  }
  .ph-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #17251C;
    color: #F2F2EC;
    font-size: clamp(12px, 0.8vw, 15px);
    font-weight: 700;
    letter-spacing: .08em;
  }
  .ph-badge svg { display: block; }
  .ph-nome {
    position: relative;
    max-width: 80%;
    text-align: center;
    font-size: clamp(11px, 0.72vw, 14px);
    font-weight: 600;
    color: var(--ink-dim);
  }
  /* Nell'eroe la cornice (.shot-eroe) governa il formato: il segnaposto riempie
     l'area interna SENZA imporre il proprio 16:9 (a larghezza piena sborderebbe
     di qualche pixel sotto la cornice — rilievo SD 31-07; il video vero fa lo
     stesso con height:100%). */
  .s-eroe .shot-eroe .media-fig { height: 100%; }
  .s-eroe .shot-eroe .media-ph { aspect-ratio: auto; height: 100%; }

  /* Il video eroe vero, al posto del segnaposto: stessa regola, stesso raggio.
     `object-fit: cover` perché sotto i 720px la cornice diventa 9:16 (→ riga ~1100)
     e serve il file verticale: se per un attimo è ancora in campo il 16:9 — lo
     scambio lo fa `pagina.js` — deve riempire senza deformare. Il fondo scuro copre
     quell'istante e i bordi arrotondati durante il caricamento. */
  /* Il video PORTA il formato (→ commento sulla cornice, riga ~383). `max-width`/`max-height`
     con `width`/`height` a `auto` sono la via uniforme fra browser: l'elemento si rimpicciolisce
     mantenendo il rapporto, come una `<img>`, senza che nessun contenitore debba calcolarlo.
     `aspect-ratio` serve PRIMA che arrivino i metadati, così la pagina non salta al caricamento,
     e lo scambio 16:9 → 9:16 sotto i 720 px lo fa la media query più sotto. */
  .s-eroe .shot-eroe video {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: var(--tetto-video, none);
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    /* ⚠️ IL FONDO DEL VIDEO NON DEVE ESSERE SCURO (05-09, rilievo SD). Era `#17251C`, e si
       vedeva: durante lo scorrimento compariva una RIGHETTA NERA verticale fra il video e la
       cornice, che spariva se si faceva uno screenshot — firma dell'artefatto di compositing,
       non del layout. Il meccanismo: la cornice entra in scena con una transizione di `scale`
       (riga 396), quindi il video finisce su un layer che il browser rasterizza a dimensioni
       frazionarie; basta un sub-pixel non coperto da `object-fit: cover` e sotto affiora il
       fondo dell'elemento video. Non è eliminabile agendo sulla geometria — l'arrotondamento
       resta — ma è eliminabile TOGLIENDO IL CONTRASTO: qui il fondo è ora lo stesso colore
       della cornice che lo circonda (la sua mescola, resa opaca sul fondo pagina), così un
       sub-pixel scoperto è indistinguibile dal bordo. Serve ancora al suo scopo originario,
       coprire l'istante prima che arrivi il poster e i bordi arrotondati al caricamento, e in
       più lo fa senza lo stacco di uno scuro dentro una pagina chiara.
       ⛔ Non rimettere un colore scuro qui: la righetta torna, e non si vede negli screenshot. */
    background: color-mix(in srgb, var(--accent) var(--frame-dose), var(--bg));
  }

  /* ---------- Dinamicità automatica ---------- */

  body.anima .anim { opacity: 0; translate: 0 24px; }
  body.anima .anim.in {
    opacity: 1;
    translate: 0 0;
    transition: opacity .9s cubic-bezier(.25, .5, .3, 1), translate .9s cubic-bezier(.25, .5, .3, 1);
    transition-delay: var(--d, 0s);
  }

  /* ---------- Responsive ---------- */

  @media (max-width: 1100px) {
    .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 701px) and (max-width: 1100px) {
    .menu-grid .voce:last-child {
      grid-column: 1 / -1;
      justify-self: center;
      width: calc(50% - clamp(18px, 1.4vw, 26px) / 2);
    }
  }

  @media (max-width: 900px) {
    .site-head nav { display: none; }
    .hamb { display: grid; }
    .btn-head { padding: 10px 20px; }
    body.nav-aperta .site-head nav {
      display: flex;
      flex-direction: column;
      align-items: stretch; /* la barra desktop centra in riga: in colonna centrerebbe le voci */
      gap: 2px;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      padding: 8px 6vw 16px;
      background: var(--bg);
      border-bottom: 1px solid var(--hairline);
    }
    .nav-gruppo > summary { justify-content: flex-start; }
    body.nav-aperta .site-head nav a { padding: 11px 0; }
    body.menu-scuro.nav-aperta .site-head nav {
      background: var(--scuro);
      border-bottom-color: var(--hairline-scuro);
    }
    /* Tendine dentro l'hamburger: diventano fisarmoniche in colonna (#193). */
    .nav-gruppo { position: static; }
    .nav-gruppo > summary { padding: 11px 0; }
    .tendina {
      position: static;
      min-width: 0;
      padding: 0 0 8px 18px;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }
    body.menu-scuro .tendina { background: transparent; box-shadow: none; }
    .tendina a { white-space: normal; }
    /* Dentro l'hamburger il separatore delle due famiglie perde la LINEA e resta solo
       come spazio: le voci figlie sono già rientrate sotto il loro gruppo, quindi la
       linea non aggiunge nulla, mentre accanto al divisore di primo livello (quello
       sopra lo switch di lingua) darebbe due segnali uguali per gerarchie diverse
       (rilievo SD sugli screenshot, 03-08). L'<hr> resta nel markup, quindi il
       raggruppamento continua a esistere per chi usa uno screen reader. */
    .tendina-sep { border-top-color: transparent; margin: 4px 0; }
    /* Selettore di lingua: la pillola esce dalla barra (lo spazio va a logo, CTA e
       hamburger) e in fondo all'hamburger compaiono le due sigle affiancate, con la
       corrente marcata. Qui non serve una tendina dentro una tendina: si vedono
       entrambe le lingue e si tocca quella che si vuole. */
    .lang-gruppo { display: none; }
    body.nav-aperta .site-head nav .lang-mobile {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: 6px;
      padding-top: 14px;
      border-top: 1px solid var(--hairline);
      font-weight: 700;
    }
    body.menu-scuro.nav-aperta .site-head nav .lang-mobile { border-top-color: var(--hairline-scuro); }
    body.nav-aperta .site-head nav .lang-mobile { gap: 4px; }
    .lang-mobile .globo { margin-right: 6px; }
    .lang-mobile .lang-ora { opacity: .5; padding: 11px 12px; }
    /* Padding orizzontale, non solo verticale: una sigla di due lettere lascerebbe un
       bersaglio da toccare largo ~20 px, sotto il minimo d'uso. Il selettore ripete
       tutta la catena perché `body.nav-aperta .site-head nav a` (padding: 11px 0) ha
       specificità maggiore di `.lang-mobile a` e vincerebbe. */
    body.nav-aperta .site-head nav .lang-mobile a { padding: 11px 12px; }
    .s-svolta .due-colonne, .s-prova .griglia { grid-template-columns: 1fr; gap: 26px; }
    .s-svolta .colonna-testo { display: contents; }
    .s-svolta .due-colonne figure { order: 1; }
    .s-svolta .cta-riga { order: 2; }
    .scena { padding: 88px 6vw 44px; }
    .s-pain { padding: 0; }
    .s-cta { padding-left: 0; padding-right: 0; }
    .cta-corpo { padding: 0 6vw; }
  }

  @media (max-width: 700px) {
    .menu-grid { grid-template-columns: 1fr; }
  }

  @media (max-width: 720px) {
    .scena { padding-top: 80px; padding-bottom: 52px; }
    .s-pain { padding: 0; }
    .s-cta { padding-left: 0; padding-right: 0; }
    /* Eroe verticale: il video passa al file 9:16 e si porta dietro il formato; il segnaposto
       lo segue. Il tetto di 80svh sta sul VIDEO, meno il bordo, così la cornice completa misura
       esattamente 80svh e non può eccedere il palco — che qui non impone più né rapporto né
       altezza, e si limita ad adattarsi (`flex: none`, nessun `aspect-ratio`). Togliere quei due
       vincoli al palco chiude anche il sospetto sul fondo tagliato su iPhone: non esistono più
       due calcoli indipendenti su `svh` che possano divergere, e sull'iPhone 16 del tester `svh`
       e `dvh` divergono davvero — 7,14 contro 7,54, cioè 40 px di barra di Safari.
       ⚠️ Il palco conserva `overflow: hidden` (riga ~380) come rete: se una fascia futura lo
       stringesse, si perderebbe un filo di bordo e non un pezzo di video. */
    .s-eroe .shot-eroe video { aspect-ratio: 9 / 16; }
    .s-eroe .shot-eroe { --tetto-video: calc(80svh - var(--bordo-eroe) * 2); }
    .s-eroe .palco { flex: none; }
    .s-eroe .banda-cta { padding-bottom: 74px; }
  }

  @media (min-width: 721px) and (max-height: 840px) {
    .s-prova, .s-cta { padding-top: 84px; padding-bottom: 32px; }
    .s-pain .pain-scuro { padding-top: 78px; padding-bottom: 28px; }
    .s-pain .pain-luce { min-height: 26svh; padding-top: 18px; padding-bottom: 22px; }
    .s-prova .griglia { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }
    .s-prova .prosa-lead { font-size: 1.02rem; margin-bottom: .85em; }
    .card-ciclo li { padding: 7px 0; font-size: 1.05rem; }
    .card-ciclo { padding: 18px 22px; }
    .s-prova .prosa-fondo { margin-top: 32px; font-size: 1rem; } /* 16→32 il 02-09 (#199) */
    .cta-mini { margin-top: .35em; padding: 10px 26px; }
    figcaption { margin-top: .5em; }
    .fascia { padding: clamp(24px, 3.5svh, 44px) 7vw; }
    .lockup { width: clamp(260px, 22vw, 420px); }
  }

  @media (min-width: 721px) and (max-width: 900px) {
    .s-eroe { justify-content: center; }
    /* Fra 721 e 900 px il vincolo è la larghezza, non l'altezza: il video sta nel 16:9 per
       costruzione e non serve nessun tetto verticale. Il palco non impone più il rapporto, per
       la stessa ragione scritta più sotto nel blocco dei 720 px. */
    .s-eroe .palco { flex: none; }
    .s-prova { padding-top: 76px; padding-bottom: 24px; }
    .s-prova .griglia { gap: 14px; }
    .s-prova .prosa-lead { margin-bottom: .7em; }
    .s-prova .prosa-fondo { margin-top: 24px; } /* 12→24 il 02-09 (#199) */
    .s-prova .prosa-fondo .cta-mini { margin-top: 8px; }
    .s-prova .card-ciclo { padding: 16px 20px; }
    .s-prova figcaption { margin-top: .4em; }
  }

  @media (min-width: 2200px) {
    html { font-size: 20px; }
    body { font-size: 22px; }
    .cta-mini { font-size: 19px; padding: 14px 36px; }
    .cta-secondary { font-size: 19px; padding: 12px 32px; }
    .site-head .logo img { height: 36px; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hint { animation: none; }
    * { transition: none !important; }
    .s-eroe .shot-eroe { scale: 1; }
  }