/* Istituto Belmonte — foglio di stile.
   =========================================================================
   IL VINCOLO CHE GOVERNA QUESTO FILE, e non e' estetico.

   L'Acuerdo SEP 17/11/17 art. 42 impone che la leyenda «ESTUDIOS SIN RECONOCIMIENTO
   DE VALIDEZ OFICIAL» sia resa con un corpo **pari al testo piu' grande della pagina**.
   Non si risolve rimpicciolendo la leyenda, e' vietato. Si risolve all'incontrario:
   il titolo piu' grande del sito non supera una dimensione che resti sostenibile se
   applicata alla leyenda.

   Da qui: --corpo-massimo. Nessun elemento lo supera, hero compresi.
   Chi aggiunge una regola con un font-size piu' grande rompe la conformita' della
   versione es-MX, non solo il ritmo tipografico.

   🔄 Riscritto il 13/10/2026 (redesign). La versione precedente resta accanto in
   `stile.css.prima-del-redesign`. Il tetto, la leyenda e i tre divieti di
   impaginazione sono passati di qui **senza una modifica**: tutto il resto e' nuovo.
   La leva del redesign e' quella che la norma lascia libera, cioe' **l'immagine, lo
   spazio e il colore**, non la dimensione del carattere.
   ========================================================================= */

:root {
  /* --- tipografia. Il tetto non e' una preferenza, vedi sopra. --- */
  --corpo-base: 1.0625rem;      /* 17px */
  --corpo-massimo: 2rem;        /* 32px — il tetto. Nessun elemento lo supera, mai */
  --h1: var(--corpo-massimo);
  --h2: 1.5rem;                 /* 24px */
  --h3: 1.25rem;                /* 20px */
  --piccolo: 0.9375rem;         /* 15px — note, didascalie, crediti */
  --minuto: 0.8125rem;

  --famiglia-titoli: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --famiglia-testo: ui-serif, Georgia, "Times New Roman", serif;

  /* --- colore ---
     Due accenti, non uno. Il terra bruciata e' l'azione (iscriversi, scaricare,
     scrivere). L'ottone e' la prova (marchio registrato, registro imprese, societa'
     benefit): e' il colore che non chiede niente a chi legge, e per questo puo'
     stare accanto a un numero di registro senza sembrare pubblicita'. */
  --inchiostro: #1a1a18;
  --inchiostro-tenue: #55544f;
  --carta: #fbfaf7;
  --carta-alta: #ffffff;        /* superfici sollevate: schede, bande, moduli */
  --carta-cupa: #f3efe8;        /* bande di sfondo che separano senza una riga */
  --riga: #ddd9d0;
  --riga-forte: #c6c0b4;
  --accento: #7a2e1e;           /* terra bruciata, sobrio */
  --accento-cupo: #5d2316;
  --accento-chiaro: #f3ece8;
  --ottone: #7d6230;            /* la prova verificabile. ⚠️ Non schiarirlo: a #8a6d35
                                   l'etichetta a 13px maiuscola stava a 4,66:1, mezzo
                                   punto dalla soglia. Qui sta a 5,5. */
  --ottone-chiaro: #f5f0e4;

  --ombra: 0 1px 2px rgba(26,26,24,.05), 0 8px 24px -12px rgba(26,26,24,.18);
  --ombra-alta: 0 2px 4px rgba(26,26,24,.06), 0 18px 48px -20px rgba(26,26,24,.28);
  --raggio: 3px;                /* quasi nulla: e' un istituto, non un'applicazione */
  --raggio-grande: 6px;

  --misura: 68ch;               /* lunghezza di riga leggibile */
  --colonna: 72rem;             /* la colonna del sito */
  --largo: 84rem;               /* le bande a tutta pagina */
  --spazio: 1.5rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --inchiostro: #ece9e2;
    --inchiostro-tenue: #a8a49a;
    --carta: #16161a;
    --carta-alta: #1e1e23;
    --carta-cupa: #1b1b20;
    --riga: #33322e;
    --riga-forte: #4a4843;
    --accento: #d98b72;
    --accento-cupo: #e3a28d;
    --accento-chiaro: #232228;
    --ottone: #c7a768;
    --ottone-chiaro: #24231f;
    --ombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --ombra-alta: 0 2px 4px rgba(0,0,0,.45), 0 18px 48px -20px rgba(0,0,0,.7);
  }
}
:root[data-tema="scuro"] {
  --inchiostro: #ece9e2; --inchiostro-tenue: #a8a49a;
  --carta: #16161a; --carta-alta: #1e1e23; --carta-cupa: #1b1b20;
  --riga: #33322e; --riga-forte: #4a4843;
  --accento: #d98b72; --accento-cupo: #e3a28d; --accento-chiaro: #232228;
  --ottone: #c7a768; --ottone-chiaro: #24231f;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font: var(--corpo-base)/1.65 var(--famiglia-testo);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* =======================================================================
   TESTATA
   La barra alta parla all'ufficio che deve firmare, la bassa a chi porta
   il gruppo. Sul telefono la bassa si chiude dentro un bottone: prima le
   undici voci occupavano i primi 300 px di ogni pagina, cioe' il lettore
   apriva il sito e vedeva un indice invece del sito.
   ======================================================================= */

.barra-alta {
  background: var(--carta-cupa);
  border-bottom: 1px solid var(--riga);
  font-family: var(--famiglia-titoli);
  font-size: var(--minuto);
}
.contenitore, .barra-alta > ul, .barra-bassa > .dentro {
  max-width: var(--colonna); margin-left: auto; margin-right: auto;
}
/* La colonna del testo: --colonna meno il respiro laterale di `main`. Footer e
   leyenda la usano, altrimenti sporgono di 24 px a sinistra su ogni pagina. */
:root { --colonna-testo: calc(var(--colonna) - 3rem); }
footer > * { max-width: var(--colonna-testo); margin-left: auto; margin-right: auto; }
.barra-alta ul {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  margin: 0 auto; padding: 0.55rem 1.5rem; list-style: none;
}
.barra-alta a { color: var(--inchiostro-tenue); text-decoration: none; }
.barra-alta a:hover { color: var(--inchiostro); text-decoration: underline; }

.barra-bassa {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--carta) 96%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--riga);
  font-family: var(--famiglia-titoli);
  font-size: var(--piccolo);
}
@supports not (backdrop-filter: blur(1px)) { .barra-bassa { background: var(--carta); } }
.barra-bassa > .dentro {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 0.7rem 1.5rem;
}
.barra-bassa ul {
  display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: center;
  margin: 0; padding: 0; list-style: none;
}
.barra-bassa nav { flex: 1 1 auto; }
.barra-bassa .solo-telefono { display: none; }
.barra-bassa a { color: var(--inchiostro); text-decoration: none; }
.barra-bassa a:hover { text-decoration: underline; }
/* Dove sei. Senza questo l'unico elemento grafico forte del sito invitava a premere
   la pagina che si stava gia' leggendo. */
.barra-bassa a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 5px; text-decoration-color: var(--accento); }
.barra-bassa a.bottone[aria-current="page"] { text-decoration: none; background: var(--accento-cupo);
  box-shadow: inset 0 0 0 2px var(--carta), inset 0 0 0 3px var(--accento-cupo); }
.barra-alta a[aria-current="page"] { color: var(--inchiostro); text-decoration: underline; }

/* Il marchio. Un segno e una parola: il segno e' il monte, che e' il significato
   del nome, e si disegna con due bordi invece che con un file da caricare. */
.marchio {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-weight: 600; text-decoration: none; color: var(--inchiostro);
  letter-spacing: 0.005em; white-space: nowrap; font-size: 1.0625rem;
}
.marchio:hover { text-decoration: none; }
.marchio .segno {
  width: 1.5rem; height: 1.5rem; flex: none;
  border: 1.5px solid var(--accento); border-radius: 2px;
  display: grid; place-items: center;
}
.marchio .segno::before {
  content: ""; width: 0; height: 0;
  border-left: .38rem solid transparent; border-right: .38rem solid transparent;
  border-bottom: .46rem solid var(--accento);
}

/* Il bottone. «Para grupos» resta l'unico elemento grafico forte del sito:
   e' il buco del mercato, nessuno dei venti istituti auditati ha un percorso
   per chi porta un gruppo. */
.bottone {
  display: inline-block;
  background: var(--accento); color: #fff !important;
  padding: 0.5rem 1rem; border-radius: var(--raggio); font-weight: 600;
  border: 1px solid var(--accento); text-decoration: none !important;
  transition: background .15s ease, transform .15s ease;
}
.bottone:hover { background: var(--accento-cupo); transform: translateY(-1px); }
.bottone.fantasma {
  background: transparent; color: var(--accento) !important;
  border-color: var(--riga-forte);
}
.bottone.fantasma:hover { background: var(--accento-chiaro); }
@media (prefers-color-scheme: dark) {
  .bottone { color: var(--carta) !important; }
  .bottone.fantasma { color: var(--accento) !important; }
}

.lingue > summary {
  cursor: pointer; color: var(--inchiostro-tenue); list-style: none;
  padding: .25rem 0; white-space: nowrap;
}
.lingue > summary::-webkit-details-marker { display: none; }
.lingue > summary::after { content: " ▾"; }
.lingue { position: relative; }
.lingue > ul {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 30;
  flex-direction: column; gap: 0.1rem; padding: .5rem;
  background: var(--carta-alta); border: 1px solid var(--riga);
  border-radius: var(--raggio); box-shadow: var(--ombra-alta); min-width: 11rem;
}
.lingue > ul li { margin: 0; }
.lingue > ul a { display: block; padding: .35rem .5rem; border-radius: 2px; }
.lingue > ul a:hover { background: var(--accento-chiaro); text-decoration: none; }

/* Il menu del telefono, senza JavaScript.
   Una casella di spunta nascosta alla vista ma non alla tastiera, e un'etichetta
   che la aziona. Cosi' il menu si apre anche se lo script non arriva mai, e si
   richiude da solo cambiando pagina perche' la casella non sopravvive al caricamento. */
.interruttore-menu {
  position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0;
  pointer-events: none;
}
.apri-menu {
  display: none; margin-left: auto;
  background: transparent; border: 1px solid var(--riga-forte);
  /* Il bersaglio era 90x31. Il minimo e' 44x44 (WCAG 2.5.8), e su un telefono e'
     il primo bottone che si tocca. */
  border-radius: var(--raggio); padding: .45rem .75rem; min-height: 44px;
  font: 600 var(--piccolo) / 1 var(--famiglia-titoli); color: var(--inchiostro);
  cursor: pointer; align-items: center; gap: .5rem; user-select: none;
}
.interruttore-menu:focus-visible + .apri-menu { outline: 2px solid var(--accento); outline-offset: 2px; }
.apri-menu .barre { display: grid; gap: 3px; }
.apri-menu .barre span { display: block; width: 1rem; height: 1.5px; background: currentColor; transition: transform .18s ease, opacity .18s ease; }
.interruttore-menu:checked + .apri-menu { border-color: var(--accento); color: var(--accento); }
.interruttore-menu:checked + .apri-menu .barre span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.interruttore-menu:checked + .apri-menu .barre span:nth-child(2) { opacity: 0; }
.interruttore-menu:checked + .apri-menu .barre span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

.avviso-lingua {
  background: var(--ottone-chiaro); border-bottom: 1px solid var(--riga);
  font-size: var(--piccolo); font-family: var(--famiglia-titoli);
}
.avviso-lingua p {
  margin: 0 auto; padding: 0.6rem 1.5rem; max-width: var(--colonna);
  display: flex; align-items: center; gap: .6rem;
}
.avviso-lingua button {
  background: none; border: 0; font-size: 1.1rem; cursor: pointer;
  color: inherit; margin-left: auto; line-height: 1;
  min-width: 2.75rem; min-height: 2.75rem; border-radius: var(--raggio);
}
/* La freccia cambia lingua, la croce chiude l'avviso, e stavano a pochi pixel con
   bersagli da 13x25 e 22x20. Sbagliare mira portava il lettore in un'altra lingua. */
.avviso-lingua a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; min-height: 2.75rem; border-radius: var(--raggio);
  text-decoration: none; font-size: 1.1rem;
}
.avviso-lingua a:hover { background: color-mix(in srgb, var(--ottone) 18%, transparent); }

/* =======================================================================
   CORPO
   ======================================================================= */

main {
  max-width: var(--colonna); margin: 0 auto;
  padding: 0 1.5rem 5rem;
}
/* Quando la pagina finisce con la banda di chiusura, la banda tocca il footer: fra
   le due non ci va una striscia di niente alta cento pixel. */
main:has(> .banda.chiusura:last-child) { padding-bottom: 0; }
.banda.chiusura:last-child { margin-bottom: 0; border-bottom: 0; }
main > p, main > ul, main > ol, main > blockquote,
main > h1, main > h2, main > h3, main > h4,
.testo-lungo > p, .testo-lungo > ul, .testo-lungo > ol, .testo-lungo > blockquote,
.testo-lungo > h3, .testo-lungo > h4 {
  max-width: var(--misura);
}
/* Nella colonna con l'indice il titolo di sezione prende tutta la colonna, perche'
   la colonna e' gia' stretta: limitarlo due volte lo spezzerebbe senza motivo. */
.testo-lungo > h2 { max-width: none; }
.testo-lungo > .tabella-scorre, .testo-lungo > figure,
.testo-lungo > .griglia, .testo-lungo > .prove { max-width: 100%; }

h2[id] { scroll-margin-top: 5.5rem; }

h1, h2, h3, h4 {
  font-family: var(--famiglia-titoli);
  line-height: 1.22; font-weight: 600; letter-spacing: -0.015em;
  margin: 2.5rem 0 0.75rem; text-wrap: balance;
}
h1 { font-size: var(--h1); margin-top: 0.5rem; }   /* mai oltre --corpo-massimo */
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--corpo-base); }

/* Un filo sotto gli h2: la gerarchia che non si puo' fare con la dimensione si
   fa con la riga e con l'aria. */
main > h2 {
  margin-top: 3.5rem; max-width: var(--colonna);
}
main > h2::before, .testo-lungo > h2::before {
  content: ""; display: block; width: 2.5rem; height: 2px;
  background: var(--accento); margin-bottom: .9rem;
}
/* Le sezioni sono numerate come nell'indice. Due numerazioni che si corrispondono
   valgono piu' di due elenchi che si somigliano: chi guarda «05» nell'indice trova
   «05» nel testo, e sa dove si trova senza contare. */
.testo-lungo { counter-reset: sezione; }
.testo-lungo > h2 { counter-increment: sezione; position: relative; }
@media (min-width: 760px) {
  .testo-lungo > h2::after {
    content: counter(sezione, decimal-leading-zero);
    position: absolute; left: -3.2rem; top: .25rem;
    font-size: var(--minuto); font-weight: 600; color: var(--riga-forte);
    font-variant-numeric: tabular-nums; letter-spacing: .04em;
  }
}
@media (min-width: 1100px) {
  .con-indice { padding-left: 3.2rem; }
}

body.leyenda-lunga { --corpo-massimo: 1.75rem; }

main > h1 { margin-top: 2.5rem; margin-bottom: 1.25rem; max-width: 24ch; }
main > h1:first-child { margin-top: 2rem; }

/* ⛔ Tre divieti di impaginazione, scritti qui perche' si vedano: niente parola singola a
   tutto schermo, niente numero gigante, niente claim in corpo 96. E niente testo grande
   DENTRO un'immagine, che e' il modo piu' banale di aggirare la scala e il piu' facile da
   contestare, perche' l'immagine e' pubblicita' a tutti gli effetti. */
.numero-gigante, .claim-gigante { font-size: var(--corpo-base) !important; }

p { margin: 0 0 1.1rem; }
a { color: var(--accento); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--riga); margin: 3rem 0; max-width: var(--colonna); }

ul, ol { padding-left: 1.25rem; }
li { margin-bottom: 0.4rem; }

/* I richiami. Un avviso e un divieto si distinguono dal corpo con una barra e un
   fondo, non con un'emoji: `⚠️` e `⛔` erano badge colorati fuori tavolozza, e su un
   sito che vieta i sigilli non verificabili erano sigilli che il sito si disegnava da
   solo. Il peso ora e' tipografico, e si legge anche stampato in bianco e nero. */
p.avvertenza, p.divieto {
  max-width: var(--misura); padding: .85rem 1.1rem; border-radius: 0 var(--raggio) var(--raggio) 0;
  background: var(--ottone-chiaro); border-left: 3px solid var(--ottone);
}
p.divieto { background: var(--accento-chiaro); border-left-color: var(--accento); }
main > p.avvertenza, main > p.divieto { max-width: var(--misura); }

blockquote {
  margin: 1.5rem 0; padding: 1rem 1.35rem;
  border-left: 3px solid var(--accento); background: var(--accento-chiaro);
  border-radius: 0 var(--raggio) var(--raggio) 0;
  font-size: var(--piccolo);
}
blockquote p:last-child { margin-bottom: 0; }

code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }

/* I segnaposto dichiarati. Finche' un dato non esiste il sito lo dice invece di
   inventarlo, e si deve vedere che e' una dichiarazione, non un refuso. */
main code { background: var(--ottone-chiaro); color: var(--inchiostro-tenue);
  padding: .1em .4em; border-radius: 2px; border: 1px dashed var(--riga-forte); }

/* --- tabelle: scorrono invece di sfondare la pagina --- */
/* Scorre il contenitore, non la tabella: una tabella in `display: block` perde la
   semantica di tabella per chi usa un lettore di schermo, e il contenitore puo'
   prendere il fuoco da tastiera, cosa che la tabella non dovrebbe fare. */
.tabella-scorre {
  margin: 1.75rem 0; max-width: 100%; overflow-x: auto;
  background:
    linear-gradient(to right, var(--carta) 30%, transparent),
    linear-gradient(to left, var(--carta) 30%, transparent) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.18), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.18), transparent) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.tabella-scorre:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
table {
  width: 100%; border-collapse: collapse; margin: 0;
  font-size: var(--piccolo); font-family: var(--famiglia-titoli);
}
th, td { text-align: left; padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--riga); vertical-align: top; }
th { font-weight: 600; color: var(--inchiostro-tenue); white-space: nowrap; }
tbody tr:hover td, table tr:hover td { background: var(--carta-cupa); }

/* =======================================================================
   LA SCHEDA DEI DATI
   Le coppie etichetta-valore che aprono ogni programma e ogni esperienza
   erano una tabella con l'intestazione vuota, cioe' una griglia di righe
   tutte uguali in cui niente pesa piu' di niente. Qui l'etichetta e' una
   cosa e il valore un'altra, e si legge in diagonale.
   ======================================================================= */

.scheda-dati {
  display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr);
  gap: 0; margin: 2rem 0; max-width: var(--colonna);
  border-top: 1px solid var(--riga);
}
.scheda-dati dt, .scheda-dati dd {
  padding: .8rem .9rem .8rem 0; border-bottom: 1px solid var(--riga); margin: 0;
}
.scheda-dati dt {
  font-family: var(--famiglia-titoli); font-size: var(--minuto); font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; color: var(--inchiostro-tenue);
  padding-top: 1rem;
}
.scheda-dati dd { font-size: var(--piccolo); font-family: var(--famiglia-titoli); }
.scheda-dati dd strong { color: var(--inchiostro); }
@media (max-width: 600px) {
  .scheda-dati { grid-template-columns: minmax(0, 1fr); }
  .scheda-dati dt { padding-bottom: .1rem; border-bottom: 0; }
  .scheda-dati dd { padding-top: 0; }
}

/* =======================================================================
   LA COPERTINA
   Il titolo non puo' crescere (art. 42), quindi il peso della prima
   schermata lo porta l'immagine. Il testo resta nella sua misura e
   l'immagine prende la meta' larga: e' l'unico modo di avere una prima
   schermata forte senza toccare la scala tipografica.
   ======================================================================= */

.copertina {
  display: grid; gap: 2.5rem; align-items: stretch;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: 3rem 0 2.5rem;
}
.copertina .testo { display: flex; flex-direction: column; justify-content: center; }
.copertina.senza-foto { grid-template-columns: minmax(0, 1fr); padding-bottom: 1.5rem; }
.copertina .testo > :first-child { margin-top: 0; }
.copertina h1 { margin: 0 0 1rem; max-width: 20ch; }
.copertina .sommario {
  font-size: 1.1875rem; line-height: 1.6; color: var(--inchiostro-tenue);
  max-width: 46ch; margin-bottom: 1.75rem;
}
.briciole {
  font-family: var(--famiglia-titoli); font-size: var(--minuto);
  color: var(--inchiostro-tenue); padding-top: 1.5rem;
}
.briciole p { margin: 0; }
.copertina .sottotitolo {
  font-family: var(--famiglia-titoli); font-size: var(--h3); font-weight: 600;
  color: var(--inchiostro-tenue); margin: -.35rem 0 1rem;
}
.occhiello {
  font-family: var(--famiglia-titoli); font-size: var(--minuto);
  letter-spacing: .09em; text-transform: uppercase; font-weight: 600;
  color: var(--ottone); margin: 0 0 .75rem;
}
/* La foto non deve DETTARE l'altezza della prima schermata, deve prenderla dal testo.
   Con l'immagine nel flusso era lei a fissare la riga della griglia (397 px sulla
   colonna piena), e una pagina con due righe di titolo lasciava 311 px di vuoto
   accanto. Qui l'immagine e' fuori dal flusso: la riga la decide il testo, con un
   minimo e un massimo perche' una colonna cortissima non schiacci la foto a una
   striscia e una lunghissima non la faccia diventare un muro. */
.copertina .foto { margin: 0; max-width: none; }
/* Il ritaglio sta qui dentro, non sulla figura: una figura che ritaglia non puo'
   portare la sua didascalia, e la didascalia su queste immagini non e' un ornamento,
   e' la dichiarazione che la foto non ritrae un luogo nostro. */
.copertina .telaio-foto {
  position: relative; border-radius: var(--raggio-grande); overflow: hidden;
  box-shadow: var(--ombra-alta); background: var(--carta-cupa);
  min-height: 19rem; max-height: 30rem;
}
.copertina .telaio-foto img,
.copertina .telaio-foto video { position: absolute; inset: 0; }
.copertina .telaio-foto img,
.copertina .telaio-foto video { width: 100%; height: 100%; object-fit: cover; margin: 0; display: block; }
.copertina .foto figcaption { margin-top: .55rem; }
/* Un movimento che parte da solo e dura piu' di cinque secondi deve potersi fermare
   (WCAG 2.2.2). Il bottone lo aggiunge lo script, quindi non esiste se il filmato
   non parte. */
.ferma-moto {
  position: absolute; right: .6rem; bottom: .6rem; z-index: 2;
  min-width: 2.75rem; min-height: 2.75rem; padding: 0 .75rem;
  border: 1px solid color-mix(in srgb, var(--inchiostro) 25%, transparent);
  border-radius: var(--raggio); cursor: pointer;
  background: color-mix(in srgb, var(--carta) 88%, transparent);
  color: var(--inchiostro); font: 600 var(--minuto) var(--famiglia-titoli);
  backdrop-filter: blur(6px);
}
.ferma-moto:hover { background: var(--carta); }
.azioni { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }

/* =======================================================================
   L'INDICE DI PAGINA
   A destra del testo c'erano quattrocento pixel di niente, e le pagine che
   vendono sono lunghe sedicimila: chi le scorre non aveva un solo appiglio.
   Qui ci sta la mappa della pagina, e resta ferma mentre il testo scorre.
   Sotto i 1100 px torna in cima, chiuso dentro un <details>.
   ======================================================================= */

.con-indice { display: block; }
.indice-pagina {
  font-family: var(--famiglia-titoli); font-size: var(--minuto);
  border-left: 2px solid var(--riga); padding: .15rem 0 .15rem 1rem;
  margin: 2rem 0;
}
.titolo-indice {
  margin: 0 0 .6rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 600; color: var(--ottone); cursor: pointer; list-style: none;
}
.titolo-indice::-webkit-details-marker { display: none; }
.indice-pagina:not([open]) .titolo-indice { margin-bottom: 0; }
.titolo-indice::after { content: " ▾"; color: var(--riga-forte); }
.indice-pagina[open] .titolo-indice::after { content: " ▴"; }
@media (min-width: 1100px) {
  /* A schermo largo l'indice non si chiude: e' una colonna, non un pannello. */
  .titolo-indice { cursor: default; pointer-events: none; }
  .titolo-indice::after { content: ""; }
}
.indice-pagina ol { list-style: none; padding: 0; margin: 0; counter-reset: sez; }
.indice-pagina li { margin: 0 0 .5rem; counter-increment: sez; }
.indice-pagina a {
  color: var(--inchiostro-tenue); text-decoration: none; display: block; line-height: 1.35;
}
.indice-pagina a::before {
  content: counter(sez, decimal-leading-zero);
  color: var(--riga-forte); margin-right: .5rem; font-variant-numeric: tabular-nums;
}
.indice-pagina a:hover { color: var(--accento); }
.indice-pagina a[aria-current="true"] { color: var(--inchiostro); font-weight: 600; }
.indice-pagina a[aria-current="true"]::before { color: var(--accento); }

@media (min-width: 1100px) {
  .con-indice {
    display: grid; grid-template-columns: minmax(0, 1fr) 15rem;
    gap: 3.5rem; align-items: start;
  }
  .indice-pagina {
    grid-column: 2; grid-row: 1; position: sticky; top: 5.5rem;
    max-height: calc(100dvh - 8rem); overflow-y: auto; margin: 2.5rem 0 0;
  }
  .testo-lungo { grid-column: 1; grid-row: 1; min-width: 0; }
  /* ⚠️ Il trucco della fascia a tutta pagina — `margin: 0 calc(50% - 50vw)` — vale
     **solo se il genitore e' centrato nel viewport**. Da qui in su `.testo-lungo` e'
     la prima colonna di una griglia e sta 122 px a sinistra del centro, quindi la
     banda ereditava quello scarto: usciva dallo schermo a sinistra e lasciava una
     striscia di carta a destra, alta quanto il blocco. Non faceva scorrere la pagina
     perche' l'eccedenza era a sinistra, ed e' il motivo per cui nessun controllo di
     scroll orizzontale l'ha mai vista. Dentro la griglia la banda smette di essere
     una fascia e diventa un blocco, che e' la forma giusta per una colonna. */
  .con-indice .banda {
    margin-inline: 0; padding-inline: 2.5rem;
    border-radius: var(--raggio-grande); border-width: 1px;
  }
}

/* =======================================================================
   BANDE A TUTTA PAGINA
   Servono a cambiare il fondo senza tracciare una riga, e a far respirare
   un sito che per il resto e' una colonna di testo.
   ======================================================================= */

.banda {
  margin: 4rem calc(50% - 50vw); padding: 3.5rem calc(50vw - 50%);
  background: var(--carta-cupa); border-top: 1px solid var(--riga);
  border-bottom: 1px solid var(--riga);
}
.banda > :first-child { margin-top: 0; }
.banda > :last-child { margin-bottom: 0; }
.banda.chiara { background: var(--accento-chiaro); }
/* La chiusura. Una scheda lunga diciassettemila pixel finiva senza niente da
   premere: si legge tutto e poi si torna indietro a cercarsi la strada. */
.banda.chiusura {
  background: var(--inchiostro); border-color: var(--inchiostro);
  color: var(--carta); margin-bottom: 0; text-align: center;
}
.banda.chiusura h2 { color: var(--carta); margin: 0 auto .75rem; max-width: 22ch; }
.banda.chiusura h2::before { margin: 0 auto .9rem; background: var(--ottone); }
.banda.chiusura p { color: color-mix(in srgb, var(--carta) 78%, transparent);
  max-width: 48ch; margin-left: auto; margin-right: auto; }
.banda.chiusura .azioni { justify-content: center; margin-top: 1.5rem; }
.banda.chiusura .bottone { background: var(--carta); color: var(--inchiostro) !important;
  border-color: var(--carta); }
.banda.chiusura .bottone:hover { background: #fff; }
.banda.chiusura .bottone.fantasma { background: transparent; color: var(--carta) !important;
  border-color: color-mix(in srgb, var(--carta) 45%, transparent); }
.banda.chiusura .bottone.fantasma:hover { background: color-mix(in srgb, var(--carta) 12%, transparent); }

/* =======================================================================
   SCHEDE E GRIGLIE
   ======================================================================= */

.griglia {
  display: grid; gap: 1.5rem; margin: 2rem 0 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  max-width: var(--colonna);
}
.griglia.due { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }
/* Quattro schede su tre colonne lasciano un'orfana in fondo, e l'orfana sembra un
   avanzo. Con esattamente quattro si va a due per riga. */
@supports selector(:has(*)) {
  .griglia:has(> .scheda:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .griglia:has(> .scheda:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.scheda {
  display: flex; flex-direction: column;
  background: var(--carta-alta); border: 1px solid var(--riga);
  border-radius: var(--raggio-grande); overflow: hidden;
  box-shadow: var(--ombra); transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.scheda:hover { box-shadow: var(--ombra-alta); transform: translateY(-2px); border-color: var(--riga-forte); }
.scheda .foto { margin: 0; aspect-ratio: 16 / 10; background: var(--carta-cupa); }
.scheda .foto img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
.scheda .dentro { padding: 1.25rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
/* La scheda intera e' il bersaglio, non solo il titolo: la riga in fondo
   («Los programas →») ha la forma di un bottone, e prima non navigava. Il link
   resta uno solo, cosi' chi usa la tastiera sente un bersaglio e non tre. */
.scheda { position: relative; }
.scheda h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.scheda:focus-within { box-shadow: var(--ombra-alta); }
.scheda:focus-within h3 a { outline: 2px solid var(--accento); outline-offset: 3px; }
.scheda .dati-scheda a { position: relative; z-index: 1; }
.scheda h3 { margin: 0 0 .6rem; font-size: var(--h3); }
.scheda h3 a { color: var(--inchiostro); text-decoration: none; }
.scheda h3 a:hover { color: var(--accento); text-decoration: underline; }
.scheda p { font-size: var(--piccolo); color: var(--inchiostro-tenue); margin-bottom: .9rem; }
/* ⚠️ Niente `display: flex` qui dentro. Con il flex ogni `<strong>` diventava un
   elemento a se' e il testo fra due grassetti un altro, quindi una riga poteva
   cominciare con un «·» orfano: succedeva su tutte e cinquanta le schede del sito.
   Questo e' un capoverso di testo e si comporta come tale. */
.scheda .dati-scheda {
  margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--riga);
  font-family: var(--famiglia-titoli); font-size: var(--minuto); line-height: 1.5;
  color: var(--inchiostro-tenue); display: block;
}
.scheda .dati-scheda strong { color: var(--inchiostro); font-weight: 600; }

/* =======================================================================
   IL CALENDARIO
   Ventotto righe per sei colonne sono un foglio di calcolo: tutto pesa
   uguale, e il giorno in cui si va in azienda o si consegna sta dentro una
   cella come tutte le altre. Qui e' una linea di giorni.
   ======================================================================= */

.calendario {
  list-style: none; padding: 0; margin: 2rem 0; max-width: var(--colonna);
  border-top: 1px solid var(--riga);
}
.calendario .giorno {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  gap: 0 1rem; align-items: baseline; margin: 0;
  padding: .85rem 0; border-bottom: 1px solid var(--riga);
}
.calendario .numero {
  font-family: var(--famiglia-titoli); font-size: var(--piccolo); font-weight: 600;
  color: var(--inchiostro); font-variant-numeric: tabular-nums;
  text-align: right; padding-top: .1rem;
}
.calendario .dentro { min-width: 0; }
.calendario .dentro p { margin: 0; }
.calendario .meta {
  font-family: var(--famiglia-titoli); font-size: var(--minuto);
  color: var(--inchiostro-tenue); margin-bottom: .2rem !important;
}
.calendario .tipo {
  display: inline-block; padding: .05rem .4rem; border-radius: 2px;
  background: var(--ottone-chiaro); color: var(--ottone); font-weight: 600;
}
.calendario .ore {
  font-family: var(--famiglia-titoli); font-size: var(--minuto);
  color: var(--inchiostro-tenue); white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* Un giorno senza ore e' un giorno libero o di viaggio: si riconosce senza leggerlo. */
.calendario .senza-ore { background: var(--carta-cupa); }
.calendario .senza-ore .numero, .calendario .senza-ore .ore { color: var(--riga-forte); }
@media (max-width: 600px) {
  .calendario .giorno { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .calendario .ore { grid-column: 2; margin-top: .25rem; }
}

/* =======================================================================
   LE PROVE
   ⚠️ Qui dentro entra solo cio' che un lettore puo' andare a verificare da
   solo, con un numero di registro e un link al registro. Nessun badge
   inventato, nessun sigillo che non corrisponda a un atto, nessuna
   recensione che non esista. Un badge falso su un sito che vende
   formazione e' il modo piu' rapido di perdere un ufficio che valuta.
   ======================================================================= */

.prove { display: grid; gap: 1.25rem; margin: 2rem 0; max-width: var(--colonna);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.prova {
  border: 1px solid var(--riga); border-left: 3px solid var(--ottone);
  border-radius: var(--raggio); padding: 1.1rem 1.25rem; background: var(--carta-alta);
}
.prova .etichetta {
  font-family: var(--famiglia-titoli); font-size: var(--minuto); font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ottone);
  margin: 0 0 .4rem;
}
.prova p { margin: 0 0 .5rem; font-size: var(--piccolo); }
.prova p:last-child { margin-bottom: 0; }
/* ⚠️ Dentro una prova il codice NON porta il tratteggio dei segnaposto: la' dentro
   i numeri esistono e si possono cercare in un registro. Confondere i due segnali
   rende il dato vero indistinguibile dal buco dichiarato. */
.prova code, .prova .codice {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--piccolo); color: var(--inchiostro); font-weight: 600;
  background: none; border: 0; padding: 0;
}

/* =======================================================================
   FIGURE
   ======================================================================= */

figure { margin: 2rem 0; max-width: min(var(--colonna), 100%); }
figure img { border-radius: var(--raggio-grande); box-shadow: var(--ombra); margin: 0; width: 100%; }
figcaption {
  font-family: var(--famiglia-titoli); font-size: var(--minuto);
  color: var(--inchiostro-tenue); margin-top: .6rem; max-width: var(--misura);
}

/* =======================================================================
   FOOTER
   ======================================================================= */

footer {
  border-top: 1px solid var(--riga);
  background: var(--carta-cupa);
  padding: 3.5rem 1.5rem 3rem;
  font-family: var(--famiglia-titoli);
  font-size: var(--minuto); color: var(--inchiostro-tenue);
}
footer .colonne {
  display: grid; gap: 2.5rem;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
}
footer .identita .marchio { margin-bottom: 1rem; }
footer .identita p { margin: 0 0 .8rem; line-height: 1.7; }
footer .titolo-colonna {
  margin: .35rem 0 .9rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 600; color: var(--inchiostro);
}
footer nav ul { list-style: none; padding: 0; margin: 0; }
footer .colonne nav li { margin: 0 0 .55rem; }
footer .colonne nav a { text-decoration: none; }
footer .colonne nav a:hover { text-decoration: underline; }
footer .colonne nav a.bottone { background: none; border: 0; color: var(--inchiostro-tenue) !important;
  padding: 0; font-weight: 400; }
footer .colonne nav a.bottone:hover { color: var(--inchiostro) !important; transform: none; }
footer .legali ul {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  padding: 1.25rem 0 0; margin: 2.5rem 0 0; border-top: 1px solid var(--riga);
}
footer a { color: var(--inchiostro-tenue); }
footer a:hover { color: var(--inchiostro); }
@media (max-width: 760px) {
  footer .colonne { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

/* --- il salto al contenuto --- */
/* ⛔ WCAG 1.4.10, il contenuto deve stare a 320 px senza scorrimento orizzontale.
   Gli indirizzi di posta e gli URL sono parole senza punti di rottura: a 320 px
   `institucional@istitutobelmonte.com` misura 316 px e, dentro un grassetto, otto
   pagine legali scorrevano. Si spezza l'indirizzo, non si rimpicciolisce il testo. */
a[href^="mailto:"], a[href^="http"], code { overflow-wrap: break-word; }

.salta-al-contenuto {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--carta); color: var(--inchiostro);
  padding: 0.6rem 1rem; border: 2px solid var(--inchiostro); border-radius: var(--raggio);
}
.salta-al-contenuto:focus { left: 0.5rem; top: 0.5rem; }

:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; border-radius: 2px; }

/* --- pagine di servizio: radice e 404 --- */
body.pagina-servizio main { max-width: 40rem; margin: 4rem auto; padding: 0 1.5rem; }
/* La radice ha un compito solo, far scegliere una lingua, e prima quel compito
   riceveva il trattamento piu' debole del sito: quattro link di testo sottolineato.
   Qui diventano bersagli veri, e la pagina porta il marchio come tutte le altre. */
body.pagina-servizio .scelta-lingua {
  list-style: none; padding: 0; margin: 2rem 0 0;
  display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
body.pagina-servizio .scelta-lingua li { margin: 0; }
body.pagina-servizio .scelta-lingua a {
  display: block; padding: .9rem 1.1rem; text-decoration: none;
  color: var(--inchiostro);
  background: var(--carta-alta); border: 1px solid var(--riga);
  border-radius: var(--raggio-grande); box-shadow: var(--ombra);
  transition: border-color .15s ease, transform .15s ease;
}
/* Il nome della lingua e, sotto, che cosa si apre. Scritta nella lingua stessa:
   chi arriva alla radice spesso non legge le altre tre. */
body.pagina-servizio .scelta-lingua .nome {
  display: block;
  font-family: var(--famiglia-titoli); font-weight: 600; font-size: 1.0625rem;
}
body.pagina-servizio .scelta-lingua .riga {
  display: block; margin-top: .25rem;
  font-size: var(--piccolo); line-height: 1.35; color: var(--inchiostro-tenue);
}
body.pagina-servizio .scelta-lingua a:hover {
  border-color: var(--accento); transform: translateY(-1px);
}
body.pagina-servizio .marchio-servizio {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--famiglia-titoli); font-weight: 600; font-size: 1.0625rem;
  color: var(--inchiostro); text-decoration: none; margin-bottom: 2rem;
}
body.pagina-servizio .marchio-servizio .segno {
  width: 1.5rem; height: 1.5rem; flex: none;
  border: 1.5px solid var(--accento); border-radius: 2px;
  display: grid; place-items: center;
}
body.pagina-servizio .marchio-servizio .segno::before {
  content: ""; width: 0; height: 0;
  border-left: .38rem solid transparent; border-right: .38rem solid transparent;
  border-bottom: .46rem solid var(--accento);
}

/* --- la radice: occhiello, invito e fotografia --- */
body.pagina-servizio .occhiello-radice {
  max-width: var(--misura); margin: 0.75rem 0 0;
  font-size: var(--h3); line-height: 1.5; color: var(--inchiostro);
}
body.pagina-servizio .invito-lingua {
  margin: 2.25rem 0 0; font-size: var(--piccolo);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--inchiostro-tenue);
}
/* La fotografia sta **sotto** la scelta, non sopra: il compito della pagina e'
   scegliere una lingua, e un'immagine alta prima dei bersagli li spinge fuori
   dalla prima schermata del telefono. */
body.pagina-servizio .foto-radice { margin: 2.5rem 0 0; }
body.pagina-servizio .foto-radice img {
  margin: 0; width: 100%; height: auto;
  aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--raggio-grande); border: 1px solid var(--riga);
}
body.pagina-servizio .foto-radice figcaption {
  margin-top: .6rem; font-size: var(--piccolo); color: var(--inchiostro-tenue);
}

/* --- quello che esiste solo sulla carta --- */
.solo-stampa { display: none; }

/* =======================================================================
   LA LEYENDA — non si tocca.
   L'art. 42 dell'Acuerdo SEP 17/11/17 chiede **tipo e corpo pari al testo
   piu' grande** del documento. Non e' una nota a pie' di pagina con un
   carattere da nota a pie' di pagina: e' la cosa che non si deve poter non
   vedere, ed e' per questo che la norma la lega al massimo invece che a una
   misura fissa. Da qui discende tutto il sistema tipografico: il tetto
   `--corpo-massimo` esiste **perche'** la leyenda lo erediti.
   ⛔ Chi in futuro la trovasse ingombrante **non tocca questa regola**:
   abbassa `--corpo-massimo`, che e' l'unica mossa che la norma consente.
   ======================================================================= */
.leyenda {
  margin: 2.5rem auto 0; max-width: var(--colonna-testo);
  padding: 1.25rem; border: 2px solid var(--inchiostro);
  border-radius: var(--raggio);
  font-family: var(--famiglia-titoli);
  font-size: var(--corpo-massimo); line-height: 1.25; color: var(--inchiostro);
  /* A 400% di zoom «RECONOCIMIENTO» misura 1125 px dentro un riquadro da 924 e la
     pagina scorre in orizzontale. La leyenda non si puo' rimpicciolire, quindi la
     parola va a capo: e' l'unica mossa che non tocca il corpo prescritto.
     ⛔ Niente `hyphens: auto`. L'ifenazione inserisce un trattino dentro la parola, e
     nel PDF la frase prescritta dall'art. 42 smette di essere leggibile per intero:
     provato il 14/10, 82 documenti su 176 sono usciti rossi al guardiano. Qui si va a
     capo e basta, senza trattino. */
  overflow-wrap: break-word;
}
.leyenda > span { display: block; max-width: var(--misura); }

/* --- immagini --- */
img { max-width: 100%; height: auto; display: block; margin: 1.75rem auto; }
main img[src*="/facsimile/"] { border: 1px solid var(--riga); max-width: min(var(--colonna), 100%); border-radius: var(--raggio); }

pre.facsimile {
  margin: 1.75rem auto; max-width: min(var(--colonna), 100%);
  padding: 1.35rem; border: 1px solid var(--riga); border-radius: var(--raggio);
  background: var(--carta-alta);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--piccolo); line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* =======================================================================
   SCHERMI STRETTI
   ======================================================================= */

@media (max-width: 960px) {
  .copertina { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding-top: 2rem; }
  /* ⚠️ Niente `aspect-ratio` qui: con l'immagine fuori dal flusso il rapporto si
     risolve a partire dall'ALTEZZA minima, e la figura diventava larga 540 px dentro
     una finestra di 390, cioe' l'unica cosa che sfondava la pagina sul telefono.
     Su una colonna sola l'altezza si fissa, la larghezza la da' la colonna. */
  .copertina .foto { min-height: 14rem; height: 14rem; max-height: none; width: 100%; }
}

@media (max-width: 800px) {
  .apri-menu { display: inline-flex; }
  .barra-alta { display: none; }
  .barra-bassa .solo-telefono { display: block; }
  .barra-bassa .solo-telefono a { color: var(--inchiostro-tenue); }
  .barra-bassa > .dentro { flex-wrap: wrap; padding: .6rem 1rem; gap: .6rem; }
  /* L'intestazione e' ancorata in cima: col menu aperto diventava alta 770 px e
     scorrere la pagina non la muoveva, quindi «Contacto» su un iPhone SE non si
     poteva toccare. Qui il menu scorre dentro di se'. */
  .barra-bassa { max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
  .barra-bassa nav { flex-basis: 100%; order: 5; display: none; }
  .interruttore-menu:checked ~ nav { display: block; }
  .barra-bassa .lingue { order: 6; flex-basis: 100%; display: none; }
  .interruttore-menu:checked ~ .lingue { display: block; }
  .barra-bassa .lingue > ul { position: static; box-shadow: none; border: 0; padding: 0 0 .5rem; }
  .barra-bassa nav ul {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .25rem 0 .5rem; border-top: 1px solid var(--riga);
  }
  .barra-bassa nav li { margin: 0; }
  .barra-bassa nav a { display: block; padding: .7rem .25rem; border-bottom: 1px solid var(--riga); }
  .barra-bassa nav a.bottone { margin: .6rem 0 .25rem; text-align: center; border-bottom: 1px solid var(--accento); }
  .barra-alta ul { gap: .9rem; padding: .5rem 1rem; }
  main { padding-left: 1rem; padding-right: 1rem; }
  footer { padding: 2.25rem 1rem 2.75rem; }
}

@media (max-width: 600px) {
  :root { --corpo-massimo: 1.75rem; }        /* 28px */
  body.leyenda-lunga { --corpo-massimo: 1.5rem; }
  :root { --h2: 1.375rem; --h3: 1.1875rem; }
  .copertina .sommario { font-size: 1.0625rem; }
  .banda { padding: 2.5rem calc(50vw - 50%); margin-top: 3rem; margin-bottom: 3rem; }
  .azioni .bottone { width: 100%; text-align: center; }
}