/* Il Ferracavallo - foglio di stile */

/* ==========================================================================
   CARATTERI — ospitati qui dentro, non presi da Google.
   Tre motivi, in ordine di importanza:
   1. Il carattere di Google Fonts si scarica dai server di Google, e per
      farlo il browser del visitatore gli manda il proprio indirizzo IP.
      Senza consenso e' un trasferimento di dati che il titolare del sito
      non puo' giustificare. Ospitandoli qui, il problema non esiste.
   2. Zero richieste esterne: niente DNS, niente handshake, niente attesa.
   3. Il sito funziona anche se Google e' irraggiungibile.
   Totale: 180 KB per otto tagli. Si scaricano una volta e restano in cache.
   ========================================================================== */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400;font-display:swap;
  src:url("font/fraunces-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:400;font-display:swap;
  src:url("font/fraunces-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;
  src:url("font/fraunces-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:300;font-display:swap;
  src:url("font/work-sans-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("font/work-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("font/work-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("font/work-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("font/space-mono-latin-400-normal.woff2") format("woff2")}

/* ==========================================================================
   IL FERRACAVALLO — sistema visivo
   --------------------------------------------------------------------------
   Tesi: in una trattoria di paese il tavolo e' vestito di carta. Sopra la
   carta si scrive a mano il piatto del giorno, sulla carta si fa il conto a
   matita nell'angolo, e sulla carta resta l'anello lasciato dal bicchiere.
   Tutto il sistema nasce da li': fondo di carta, inchiostro che non e' nero
   ma il blu della biro, e un solo rosso — quello del vino sulla tovaglia.

   L'unico oggetto scuro di tutta la pagina e' la lavagna. Compare due volte:
   in apertura e nella banda. Serve a dare il contrasto che la carta non ha.

   Superfici   Carta #f4f0e6 -> Tovaglia #ece7d9 -> Piega #e2dcca
               Lavagna #1c2230 (unica superficie scura, usata due volte)
   Testo       Inchiostro #1c2230 / Grafite #5a6272 / Matita #646a78
               (nessuno sotto 4,5:1 sulla carta — verificato, non stimato)
   Azione      Vino #8a2436 — solo il bottone principale e lo stato attivo
   Forme       Nessun angolo tondo oltre i 3px. La carta non ha raggi.
   Scala       11 · 13 · 15 · 17 · 21 · 28 · 40 · 58 · 92
   Ritmo       base 4px · gap sezione 128px · frame 1120px
   Elevazione  nessuna. Le cose stanno sulla carta, non sopra la carta.
               L'unica separazione consentita e' un capello da 1px.
   ========================================================================== */

:root{
  /* — Superfici: tre di carta, una di ardesia. Mai una quinta — */
  --carta:    #f4f0e6;
  --tovaglia: #ece7d9;
  --piega:    #e2dcca;
  --lavagna:  #1c2230;

  /* — Testo: neutri con dentro il blu dell'inchiostro, mai grigi puri.
       Nessuno dei tre scende sotto 4,5:1 sulla carta: le etichette sono
       piccole e in maiuscolo, e sono proprio quelle che si perdono. — */
  --inchiostro: #1c2230;   /* 13,97:1 sulla carta */
  --grafite:    #5a6272;   /*  5,39:1 */
  --matita:     #646a78;   /*  4,76:1 — piu' chiaro di cosi' non si legge */
  --gesso:      #e8e4d8;   /* 12,51:1 sulla lavagna */

  /* — Azione: l'anello di vino. Un solo posto, un solo scopo — */
  --vino:       #8a2436;
  --vino-caldo: #a83046;
  --vino-fioco: rgba(138, 36, 54, 0.10);

  /* — Bordi: capelli, non linee — */
  --capello:       rgba(28, 34, 48, 0.13);
  --capello-fioco: rgba(28, 34, 48, 0.065);
  --capello-gesso: rgba(232, 228, 216, 0.14);

  /* — Caratteri — */
  --display:  "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --testo:    "Work Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --etichetta:"Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* — Scala: salti larghi, contrasto da menu scritto a mano — */
  --t11:11px; --t13:13px; --t15:15px; --t17:17px;
  --t21:21px; --t28:28px; --t40:40px; --t58:58px; --t92:92px;

  /* — Ritmo: base 4 — */
  --s4:4px;  --s8:8px;   --s12:12px; --s16:16px; --s24:24px;
  --s32:32px; --s40:40px; --s56:56px; --s72:72px; --s96:96px; --s128:128px;

  --frame:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--carta);
  color:var(--inchiostro);
  font-family:var(--testo);
  font-size:var(--t15);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Il display e' Fraunces e basta: mai per il corpo, mai per l'interfaccia. */
h1,h2,.display{
  font-family:var(--display);
  font-weight:400;
  font-optical-sizing:auto;
  letter-spacing:-0.025em;
  line-height:1.06;
  text-wrap:balance;
}

:focus-visible{outline:2px solid var(--vino);outline-offset:3px}

/* ---------- Impalcatura ---------- */
.frame{width:100%;max-width:var(--frame);margin-inline:auto;padding-inline:var(--s24)}
.pagina{display:flex;flex-direction:column;gap:var(--s128);padding-block:var(--s96) var(--s96)}
.sezione{display:flex;flex-direction:column;gap:var(--s40)}

/* ---------- Etichetta: mono minuscola, spaziata, mai dentro un chip ---------- */
.etichetta{
  font-family:var(--etichetta);
  font-size:var(--t11);
  font-weight:400;
  line-height:1;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--matita);
}
.etichetta--vino{color:var(--vino)}
.etichetta--gesso{color:rgba(232,228,216,.72)}

/* ---------- Bottoni: squadrati. La carta non ha angoli tondi ---------- */
.bottone{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s8);
  border:1px solid transparent;border-radius:2px;
  padding:14px var(--s24);
  font-family:var(--testo);font-size:var(--t13);font-weight:600;
  letter-spacing:0.02em;line-height:1;cursor:pointer;background:none;
  transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease,transform 260ms cubic-bezier(.16,.8,.24,1);
}
.bottone--vino{background:var(--vino);color:var(--carta)}
/* Il colore del bottone cambia ovunque; il sollevamento solo dove c'e' un
   puntatore vero, perche' su un dito il :hover resta appiccicato dopo il tocco. */
.bottone--vino:hover{background:var(--vino-caldo)}
@media (hover: hover) and (pointer: fine){
  .bottone--vino:hover{transform:translateY(-2px)}
  .fantasma:hover::after{transform:translateX(6px)}
}
.bottone--vino:active{transform:translateY(0)}
.bottone--filo{border-color:var(--capello);color:var(--inchiostro)}
.bottone--filo:hover{border-color:var(--inchiostro)}
.bottone--piccolo{padding:9px var(--s16);font-size:var(--t11)}
/* Il terziario non e' un bottone: e' testo con una freccia. */
.fantasma{display:inline-flex;align-items:center;gap:var(--s8);font-size:var(--t13);
  font-weight:500;color:var(--grafite);transition:color 200ms ease}
.fantasma::after{content:"→";display:inline-block;transition:transform 260ms cubic-bezier(.16,.8,.24,1)}
.fantasma:hover{color:var(--inchiostro)}

/* ---------- Navigazione: a filo, senza barra, senza fondo ---------- */
.nav{position:absolute;inset:0 0 auto 0;z-index:3;padding-block:var(--s32)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s24)}
.marchio{font-family:var(--display);font-size:var(--t21);letter-spacing:-0.01em;color:var(--inchiostro)}
.nav__links{display:flex;align-items:center;gap:var(--s32);font-size:var(--t13);color:var(--grafite)}
.nav__links a{transition:color 200ms ease}
.nav__links a:hover{color:var(--inchiostro)}

/* ---------- Apertura ----------
   Due colonne asimmetriche: a sinistra la carta, a destra la lavagna.
   La lavagna e' l'unico oggetto scuro dell'apertura, e regge tutto il contrasto. */
.apertura{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden}
.apertura__farina{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.apertura__griglia{position:relative;z-index:2;display:grid;grid-template-columns:1fr;
  align-items:center;gap:var(--s56);padding-block:var(--s128) var(--s96)}
@media (min-width:960px){.apertura__griglia{grid-template-columns:1.15fr .85fr;gap:var(--s72)}}
.apertura__testo{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s24)}
.apertura h1{font-size:clamp(44px,8.6vw,var(--t92));max-width:11ch}
.apertura h1 em{font-style:italic;color:var(--vino)}
.apertura__corpo{max-width:44ch;font-size:var(--t17);font-weight:300;color:var(--grafite)}
.apertura__azioni{display:flex;flex-wrap:wrap;gap:var(--s12);padding-top:var(--s8)}

/* Il voto: numero in Fraunces, non una stellina */
.voto{display:flex;align-items:center;gap:var(--s16);margin-top:var(--s16);
  padding-top:var(--s24);border-top:1px solid var(--capello-fioco);max-width:34rem}
.voto__testo{font-size:var(--t13);color:var(--grafite);line-height:1.55}
.voto__testo b{color:var(--inchiostro);font-weight:600}

/* ---------- La lavagna ---------- */
.lavagna{background:var(--lavagna);color:var(--gesso);border-radius:3px;padding:var(--s32) var(--s24);
  display:flex;flex-direction:column;gap:var(--s16);
  background-image:radial-gradient(70% 50% at 30% 0%,rgba(232,228,216,.055) 0%,rgba(28,34,48,0) 70%)}
.lavagna__cima{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s12);
  padding-bottom:var(--s16);border-bottom:1px solid var(--capello-gesso)}
.lavagna__titolo{font-family:var(--display);font-size:var(--t21);color:var(--gesso);letter-spacing:-0.01em}
.lavagna ul{display:flex;flex-direction:column}
.lavagna li{display:flex;align-items:baseline;gap:var(--s12);padding-block:var(--s12);
  border-bottom:1px solid rgba(232,228,216,.07);font-size:var(--t13)}
.lavagna li:last-child{border-bottom:0}
.lavagna__nome{color:var(--gesso)}
.lavagna__punti{flex:1;border-bottom:1px dotted rgba(232,228,216,.22);transform:translateY(-.28rem)}
.lavagna__prezzo{font-family:var(--etichetta);font-size:var(--t13);color:rgba(232,228,216,.82);
  font-variant-numeric:tabular-nums;flex:none}
.lavagna__piede{font-family:var(--etichetta);font-size:var(--t11);letter-spacing:.1em;
  color:rgba(232,228,216,.66);padding-top:var(--s8)}

/* ---------- Filo dei piatti ---------- */
.filo{display:flex;flex-wrap:wrap;gap:var(--s16) var(--s40);padding-block:var(--s24);
  border-block:1px solid var(--capello-fioco);font-family:var(--etichetta);font-size:var(--t11);
  letter-spacing:.16em;text-transform:uppercase;color:var(--matita)}

/* ---------- Testata di sezione ---------- */
.testata{display:flex;flex-direction:column;gap:var(--s16);max-width:620px}
.testata h2{font-size:clamp(30px,5vw,var(--t58))}
.testata p{font-size:var(--t15);color:var(--grafite);max-width:56ch}

/* ---------- Blocco a due colonne ---------- */
.blocco{display:grid;grid-template-columns:1fr;gap:var(--s40);align-items:start}
@media (min-width:940px){.blocco{grid-template-columns:1fr 1fr;gap:var(--s72)}}
.blocco p{color:var(--grafite);max-width:52ch}
.blocco p + p{margin-top:var(--s16)}
.blocco p strong{color:var(--inchiostro);font-weight:600}

/* Il segnaposto foto e' progettato, non un rettangolo tratteggiato */
.posafoto{position:relative;aspect-ratio:4/5;background:var(--tovaglia);border-radius:3px;
  border:1px solid var(--capello-fioco);display:grid;place-items:center;overflow:hidden}
.posafoto::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(46deg,rgba(28,34,48,.028) 0 1px,transparent 1px 11px)}
.posafoto span{position:relative;font-family:var(--etichetta);font-size:var(--t11);
  letter-spacing:.16em;text-transform:uppercase;color:var(--matita);text-align:center;padding:var(--s24)}

/* ---------- Avviso segnaposto ---------- */
.avviso{border-left:2px solid var(--vino);background:var(--vino-fioco);
  padding:var(--s16) var(--s24);font-size:var(--t13);color:var(--inchiostro);max-width:70ch}
.avviso b{color:var(--vino);font-weight:600}

/* ---------- Menu a schede, zero JavaScript ---------- */
.schede{display:flex;flex-direction:column;gap:var(--s32)}
.schede input{position:absolute;opacity:0;pointer-events:none}
.linguette{display:flex;flex-wrap:wrap;gap:var(--s4);border-bottom:1px solid var(--capello-fioco);padding-bottom:var(--s12)}
.linguette label{font-family:var(--etichetta);font-size:var(--t11);letter-spacing:.14em;
  text-transform:uppercase;padding:11px var(--s16);border-radius:2px;cursor:pointer;
  color:var(--matita);user-select:none;transition:color 200ms ease,background-color 200ms ease}
.linguette label:hover{color:var(--inchiostro)}
.pannello{display:none}
#t1:checked~.linguette label[for=t1],#t2:checked~.linguette label[for=t2],
#t3:checked~.linguette label[for=t3],#t4:checked~.linguette label[for=t4]
  {background:var(--vino);color:var(--carta)}
#t1:checked~#p1,#t2:checked~#p2,#t3:checked~#p3,#t4:checked~#p4{display:block}
.schede input:focus-visible~.linguette label[for]{outline:2px solid var(--vino);outline-offset:2px}

/* La riga del piatto e' un conto fatto a mano: nome, puntini, prezzo allineato */
.piatti{display:grid;grid-template-columns:1fr;gap:var(--s24)}
@media (min-width:820px){.piatti{grid-template-columns:1fr 1fr;gap:var(--s24) var(--s56)}}
.piatto__riga{display:flex;align-items:baseline;gap:var(--s12)}
.piatto__nome{font-family:var(--display);font-size:var(--t17);letter-spacing:-0.01em}
.piatto__punti{flex:1;border-bottom:1px dotted var(--capello);transform:translateY(-.3rem)}
.piatto__prezzo{font-family:var(--etichetta);font-size:var(--t15);color:var(--vino);
  font-variant-numeric:tabular-nums;flex:none}
.piatto__nota{font-size:var(--t11);color:var(--matita);margin-top:var(--s4);
  font-family:var(--etichetta);letter-spacing:.06em}

/* ---------- Passi: la cifra e' la grafica, nessuna scheda ---------- */
.passi{display:grid;grid-template-columns:1fr;gap:var(--s56)}
@media (min-width:820px){.passi{grid-template-columns:repeat(3,1fr);gap:var(--s40)}}
.passo{display:flex;flex-direction:column;gap:var(--s12)}
.passo__cifra{font-family:var(--display);font-size:var(--t58);line-height:.85;
  letter-spacing:-0.05em;color:var(--vino);font-variant-numeric:tabular-nums}
.passo h3{font-family:var(--testo);font-size:var(--t17);font-weight:600;letter-spacing:-0.01em}
.passo p{font-size:var(--t13);color:var(--grafite);max-width:34ch}
.passo a{border-bottom:1px solid var(--capello);transition:border-color 200ms ease}
.passo a:hover{border-color:var(--vino)}

/* ---------- Domande ---------- */
details{border-bottom:1px solid var(--capello-fioco);padding-block:var(--s16)}
summary{font-size:var(--t15);font-weight:500;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:var(--s16);align-items:baseline}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--etichetta);font-size:var(--t17);color:var(--vino);flex:none;line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--grafite);margin-top:var(--s12);max-width:62ch;font-size:var(--t13)}

/* ---------- Orari ---------- */
.visita{display:grid;grid-template-columns:1fr;gap:var(--s56)}
@media (min-width:820px){.visita{grid-template-columns:1fr 1fr;gap:var(--s72)}}
.orari{display:flex;flex-direction:column}
.orari li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s16);
  padding-block:var(--s12);border-bottom:1px solid var(--capello-fioco);
  font-size:var(--t13);color:var(--grafite)}
.orari li[data-oggi]{color:var(--inchiostro)}
.orari li[data-oggi] .orari__val{color:var(--vino)}
.orari__val{font-family:var(--etichetta);font-size:var(--t11);color:var(--matita);font-variant-numeric:tabular-nums}
.recapiti{display:flex;flex-direction:column;gap:var(--s24)}
.recapito{display:flex;flex-direction:column;gap:var(--s4)}
.recapito__v{font-size:var(--t15);line-height:1.55}
.recapito__v a{border-bottom:1px solid var(--capello);padding-bottom:1px;transition:border-color 200ms ease}
.recapito__v a:hover{border-color:var(--vino)}

/* ---------- Banda: l'unico momento che rompe il frame ---------- */
.banda{position:relative;width:100%;background:var(--lavagna);color:var(--gesso);
  padding-block:var(--s96);overflow:hidden}
.banda::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 60% at 78% 20%,rgba(168,48,70,.18) 0%,rgba(28,34,48,0) 68%)}
.banda .frame{position:relative}
.banda h2{font-size:clamp(30px,5.4vw,var(--t58));color:var(--gesso);max-width:17ch}
.banda h2 em{font-style:italic;color:var(--vino-caldo)}
.banda p{color:rgba(232,228,216,.78);max-width:48ch;margin-top:var(--s16);font-size:var(--t15)}
.banda .bottone--filo{border-color:var(--capello-gesso);color:var(--gesso)}
.banda .bottone--filo:hover{border-color:var(--gesso)}

/* ---------- Chiusura ---------- */
.chiusura{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s24);
  padding-block:var(--s96) var(--s40);border-top:1px solid var(--capello-fioco)}
.chiusura h2{font-size:clamp(34px,7vw,var(--t92));max-width:12ch}
.chiusura h2 em{font-style:italic;color:var(--vino)}
.piede{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s16);
  padding-top:var(--s24);border-top:1px solid var(--capello-fioco);
  font-family:var(--etichetta);font-size:var(--t11);letter-spacing:.1em;color:var(--matita)}

/* ---------- Comparse ----------
   Salita e accensione, mai un rimbalzo. Lo stato nascosto lo applica solo
   `html.anima`: senza JS, o a movimento spento, la pagina resta leggibile.

   Erano 900ms con una sfocatura in transizione. Sono scesi a 280ms e la
   sfocatura e' sparita, per due ragioni: 900ms su una comparsa fanno sembrare
   lento il sito, non elegante - chi scorre arriva sul blocco prima che abbia
   finito di comparire - e `filter` non e' fra le proprieta' che il browser
   sa animare senza ridipingere, mentre opacity e transform si'. */
.rivela{transition:opacity 280ms cubic-bezier(.16,.8,.24,1),
                  transform 280ms cubic-bezier(.16,.8,.24,1);
        transition-delay:var(--rit,0ms)}
html.anima .rivela{opacity:0;transform:translateY(16px)}
html.anima .rivela.dentro{opacity:1;transform:none}

/* Dal 2026-08-30 (richiesta dell'utente: movimento su ogni cosa): le righe
   di un gruppo — nav, filo dei piatti, lavagna, orari, recapiti, piede —
   salgono a cascata di ~50ms l'una dall'altra. Il gruppo e' anche .rivela. */
html.anima .rivela--righe > *{opacity:0;transform:translateY(12px)}
html.anima .rivela--righe.dentro > *{opacity:1;transform:none;
  transition:opacity 240ms cubic-bezier(.16,.8,.24,1),
             transform 240ms cubic-bezier(.16,.8,.24,1)}
html.anima .rivela--righe.dentro > *:nth-child(1){transition-delay:30ms}
html.anima .rivela--righe.dentro > *:nth-child(2){transition-delay:80ms}
html.anima .rivela--righe.dentro > *:nth-child(3){transition-delay:130ms}
html.anima .rivela--righe.dentro > *:nth-child(4){transition-delay:180ms}
html.anima .rivela--righe.dentro > *:nth-child(5){transition-delay:230ms}
html.anima .rivela--righe.dentro > *:nth-child(6){transition-delay:270ms}
html.anima .rivela--righe.dentro > *:nth-child(n+7){transition-delay:290ms}

/* La brace della banda respira, lenta. Stesso rosso di prima (era gia' un
   alone su .banda::before), reso vivo. Solo transform e opacity. Vive solo
   dove il movimento e' ammesso; con "riduci movimento" html:not(.anima)
   azzera comunque ogni animation. */
@media (prefers-reduced-motion: no-preference){
  .banda::before{
    /* durata dichiarata: alone ambientale continuo, non un feedback UI. */
    animation:brace-respiro 12s ease-in-out infinite alternate;
  }
}
@keyframes brace-respiro{
  from{transform:scale(1);   opacity:0.75}
  to  {transform:scale(1.07);opacity:1}
}

/* Micro-reazioni: solo dove c'e' un puntatore fine. Solo transform, il
   segnale statico (colore, bordo) resta. */
@media (hover: hover) and (pointer: fine){
  .passo,.recapito{transition:transform 200ms cubic-bezier(.16,.8,.24,1)}
  .passo:hover,.recapito:hover{transform:translateY(-3px)}
  .orari li{transition:transform 160ms cubic-bezier(.16,.8,.24,1)}
  .orari li:hover{transform:translateX(3px)}
  details summary{transition:color 160ms ease}
  details summary:hover{color:var(--inchiostro)}
}

/* A movimento spento non si muove niente, nemmeno le micro-interazioni.
   Chi ha "riduci movimento" nelle impostazioni non prende la classe `anima`,
   e per lui la pagina e' ferma e intera fin dal primo disegno. */
html:not(.anima) *,html:not(.anima) *::before,html:not(.anima) *::after{
  animation:none !important;transition:none !important}

/* ---------- Chiamata fissa sul telefono ---------- */
.chiama-fisso{display:none}
@media (max-width:760px){
  .nav__links{display:none}
  body{padding-bottom:4.4rem}
  .chiama-fisso{display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--vino);color:var(--carta);text-align:center;
    font-family:var(--testo);font-size:var(--t15);font-weight:600;padding:var(--s16)}
  .pagina{gap:var(--s96);padding-block:var(--s96) var(--s72)}
  .apertura{min-height:auto}
  .apertura__griglia{padding-block:var(--s96) var(--s72)}
}