/* ============================================================
   stile.css — grafica condivisa.
   Colori e forme presi dal listino stampato del locale:
   crema, rosso, verde, contorni neri spessi, pastiglie.
   Mobile prima di tutto: quasi tutti arrivano da telefono.
   ============================================================ */

:root {
  --crema:      #f4e8d8;
  --crema-2:    #fbf4e9;
  --rosso:      #c03530;
  --rosso-scuro:#90201a;
  --verde:      #3c7839;
  --verde-scuro:#2c5a2a;

  /* Sfumature: ogni categoria del menù ha il suo tono, così si
     distinguono scorrendo senza leggere l'intestazione. I due chiari
     portano testo nero: schiarire il rosso e il verde tenendo il testo
     crema scendeva sotto il contrasto minimo. */
  --rosso-1:    #efc3b3;
  --rosso-2:    #c03530;
  --rosso-3:    #8e1f19;
  --verde-1:    #cfe0c4;
  --verde-2:    #3c7839;
  --verde-3:    #285626;
  --nero:       #131214;
  --grigio:     #6b6259;
  --salmone:    #e2aa91;

  --font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Titoli e prezzi possono avere un carattere proprio. Finché vale
     var(--font) il sito ne usa uno solo. Vedi caratteri.html. */
  --font-titolo: var(--font);

  --bordo: 3px;
  /* Altezza della barra, senza il bordo. La usano anche i filtri del
     menù per appiccicarsi esattamente sotto, senza fessure. */
  --barra-h: 4.25rem;
  /* Quanto occupano insieme la barra e la striscia dei filtri, che
     restano incollate in alto. Serve a far atterrare i salti sotto,
     invece che sotto di esse. */
  --testa: calc(var(--barra-h) + var(--bordo) + 4rem);
  --raggio: 18px;
  --raggio-pill: 999px;
  --ombra: 5px 5px 0 var(--nero);
  --ombra-piccola: 3px 3px 0 var(--nero);
  --largo: 40rem;
  --margine: 1.15rem;
}

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

/* I salti fra sezioni atterrano sotto la testa appiccicata, non
   sotto la piega. La pastiglia della categoria sborda in alto, da
   qui l'aria in più.

   Lo scorrimento resta secco: con quello morbido, saltare al conto
   da capo pagina significa novemila pixel di menù che sfilano per
   qualche secondo. */
.pannello { scroll-margin-top: calc(var(--testa) + 1.5rem); }
#ordine, #elenco, #prenota { scroll-margin-top: calc(var(--testa) + 1rem); }

/* Qualsiasi display esplicito batte l'attributo hidden: senza questa
   riga una riga nascosta con display:flex resta visibile. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--nero);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-titolo); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 .5rem; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.05rem; }

p { margin: 0 0 .9rem; }
p:last-child { margin-bottom: 0; }
a { color: var(--rosso-scuro); }
img, svg { max-width: 100%; display: block; }

:focus-visible { outline: 3px solid var(--nero); outline-offset: 3px; border-radius: 4px; }

.contenuto { width: 100%; max-width: var(--largo); margin: 0 auto; padding: 0 var(--margine); }

.salta { position: absolute; left: -9999px; top: 0; z-index: 60; background: var(--nero); color: var(--crema); padding: .75rem 1rem; }
.salta:focus { left: 0; }

.solo-lettori {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- fascia a scacchi, come il bordo del listino ------------- */

.scacchi {
  height: 26px;
  /* due file di quadretti da 13px: come il bordo del listino stampato */
  background:
    repeating-conic-gradient(var(--rosso) 0% 25%, transparent 0% 50%) 0 0 / 26px 26px;
  border-bottom: var(--bordo) solid var(--nero);
}

/* --- pulsanti ------------------------------------------------ */

.btn {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; min-height: 3.75rem;
  padding: 1rem 1.4rem;
  font: inherit; font-family: var(--font-titolo);
  font-size: 1.15rem; font-weight: 700;
  letter-spacing: -0.01em; text-align: center; text-decoration: none;
  color: var(--crema-2); background: var(--rosso);
  border: var(--bordo) solid var(--nero);
  border-radius: var(--raggio-pill);
  box-shadow: var(--ombra);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--nero); }
.btn.verde { background: var(--verde); }
.btn.chiaro { background: var(--crema-2); color: var(--nero); }

.btn-piccolo {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 2.75rem; padding: .6rem 1.1rem;
  font: inherit; font-size: .95rem; font-weight: 600; text-decoration: none;
  color: var(--nero); background: var(--crema-2);
  border: 2px solid var(--nero); border-radius: var(--raggio-pill);
  box-shadow: var(--ombra-piccola); cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-piccolo:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--nero); }

/* --- copertina (index) --------------------------------------- */

.copertina {
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding-bottom: 2rem;
}
.copertina .centro {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  gap: 2rem;
  padding: 2rem var(--margine);
  max-width: 26rem; margin: 0 auto; width: 100%;
}
.copertina .marchio { width: min(78%, 17rem); }
.copertina .marchio { margin: 0 auto; }
.copertina .azioni { display: grid; gap: .85rem; }

.piede-copertina {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  padding: 0 var(--margine) .5rem;
}
/* Stretti quel tanto che basta a stare su una riga sola a 375px,
   senza scendere sotto i 44px di area toccabile. */
.piede-copertina .btn-piccolo { padding: .6rem .8rem; font-size: .88rem; }

/* --- sipario dell'animazione --------------------------------- */

.sipario {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: var(--crema);
  animation: sipario-via .5s ease-in 1.15s forwards;
}
.sipario .lockup { position: relative; display: grid; place-items: center; }
.sipario .marchio {
  position: relative; z-index: 2;
  width: min(72vw, 19rem); color: var(--rosso);
  animation: marchio-entra .6s cubic-bezier(.18, 1.5, .38, 1) .12s both;
}
/* Un cerchio salmone che si allarga dietro al marchio: è il colore
   secondario del listino, non un effetto inventato. */
.sipario .alone {
  position: absolute; z-index: 1;
  width: min(72vw, 19rem); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--salmone);
  animation: alone-esplode .75s cubic-bezier(.2, .8, .3, 1) both;
}

@keyframes marchio-entra {
  0%   { opacity: 0; transform: scale(.5) rotate(-8deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes alone-esplode {
  0%   { opacity: .9; transform: scale(.2); }
  70%  { opacity: .45; }
  100% { opacity: 0; transform: scale(2.1); }
}
@keyframes sipario-via { to { opacity: 0; visibility: hidden; } }

.sipario.chiuso { animation: none; opacity: 0; visibility: hidden; }

/* Chi ha chiesto meno animazioni salta tutto e vede subito i bottoni. */
@media (prefers-reduced-motion: reduce) {
  .sipario { animation: sipario-via .01s linear .2s forwards; }
  .sipario .marchio, .sipario .alone { animation: none; }
  .sipario .alone { opacity: 0; }
}

/* --- barra delle pagine interne ------------------------------ */

.barra {
  position: sticky; top: 0; z-index: 20;
  background: var(--crema);
  border-bottom: var(--bordo) solid var(--nero);
}
.barra .contenuto {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: var(--barra-h);
  padding-top: .5rem; padding-bottom: .5rem;
}
/* 5rem di larghezza fanno 51px di altezza: dentro una barra da 68
   restano nove pixel sopra e sotto, e il bordo non sfiora il marchio. */
.barra .logotipo { width: 5rem; height: auto; }
.barra nav { display: flex; align-items: center; gap: .5rem; }

/* --- intestazione di pagina ---------------------------------- */

.testa { padding: 2rem 0 1.25rem; }
.testa h1 { font-size: 2.1rem; }
.testa p { color: var(--grigio); max-width: 32rem; }

/* --- pannelli e pastiglie ------------------------------------ */

.pannello {
  position: relative;
  margin: 2.5rem 0 0;
  padding: 2rem 1.1rem 1.25rem;
  background: var(--crema-2);
  border: var(--bordo) solid var(--nero);
  border-radius: var(--raggio);
}
.pannello.rosso-2, .pannello.rosso-3,
.pannello.verde-2, .pannello.verde-3 { color: var(--crema-2); }
.pannello.rosso-1 { background: var(--rosso-1); color: var(--nero); }
.pannello.verde-1 { background: var(--verde-1); color: var(--nero); }
.pannello.rosso-2 { background: var(--rosso-2); }
.pannello.rosso-3 { background: var(--rosso-3); }
.pannello.verde-2 { background: var(--verde-2); }
.pannello.verde-3 { background: var(--verde-3); }

.pillola {
  font-family: var(--font-titolo);
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -50%);
  margin: 0; padding: .35rem 1.4rem;
  font-size: 1.15rem; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap;
  color: var(--crema-2); background: var(--rosso);
  border: var(--bordo) solid var(--nero);
  border-radius: var(--raggio-pill);
}
.pannello.rosso-1 .pillola { background: var(--rosso-2); }
.pannello.rosso-2 .pillola { background: var(--rosso-2); }
.pannello.rosso-3 .pillola { background: var(--rosso-3); }
.pannello.verde-1 .pillola { background: var(--verde-2); }
.pannello.verde-2 .pillola { background: var(--verde-2); }
.pannello.verde-3 .pillola { background: var(--verde-3); }

.prezzo {
  font-family: var(--font-titolo);
  flex: 0 0 auto;
  min-width: 4.1rem; padding: .2rem .6rem;
  font-size: 1rem; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--nero); background: var(--crema-2);
  border: 2px solid var(--nero); border-radius: var(--raggio-pill);
}

/* --- menù ----------------------------------------------------- */

.nota {
  margin: .75rem 0 0;
  padding: .75rem .9rem;
  font-size: .88rem;
  line-height: 1.45;
  background: var(--crema-2);
  border: 2px solid var(--nero);
  border-radius: var(--raggio);
}
.nota strong { display: block; }

.indice {
  position: sticky; top: calc(var(--barra-h) + var(--bordo)); z-index: 15;
  display: flex; gap: .45rem; overflow-x: auto;
  padding: .7rem var(--margine);
  margin: 0 calc(var(--margine) * -1);
  background: var(--crema);
  border-bottom: 2px solid var(--nero);
  scrollbar-width: none;
}
.indice::-webkit-scrollbar { display: none; }
.indice button {
  flex: 0 0 auto; min-height: 2.5rem; padding: .45rem .9rem;
  font: inherit; font-size: .88rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  color: var(--nero); background: var(--crema-2);
  border: 2px solid var(--nero); border-radius: var(--raggio-pill);
}
.indice button[aria-pressed="true"] { background: var(--nero); color: var(--crema); }

.nota-categoria { margin: 0 0 .6rem; font-weight: 400; font-size: .92rem; line-height: 1.45; }
.nota-categoria strong { font-weight: 700; }

.coperto {
  margin: 1.25rem 0 0; padding: .7rem 1rem;
  font-size: .95rem; text-align: center;
  background: var(--crema-2); border: 2px solid var(--nero);
  border-radius: var(--raggio-pill);
}

.legenda { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .5rem; }
.legenda div { display: flex; align-items: center; gap: .45rem; font-size: .9rem; }

.piatti { list-style: none; margin: 0; padding: 0; }
.piatti li + li { border-top: 2px solid rgba(19, 18, 20, .18); }
.pannello.rosso-2 .piatti li + li, .pannello.rosso-3 .piatti li + li,
.pannello.verde-2 .piatti li + li, .pannello.verde-3 .piatti li + li {
  border-top-color: rgba(251, 244, 233, .3);
}
/* Sui due pannelli chiari il separatore resta scuro. */
.pannello.rosso-1 .piatti li + li, .pannello.verde-1 .piatti li + li {
  border-top-color: rgba(19, 18, 20, .2);
}

/* La riga è un bottone solo quando c'è davvero qualcosa da aprire. */
/* Nome e prezzo sulla prima riga, etichette e allergeni sulla seconda,
   larga quanto la voce. */
.voce {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "nome prezzo freccia" "meta meta meta";
  align-items: center;
  column-gap: .85rem; row-gap: .1rem;
  width: 100%; min-height: 3rem; padding: .75rem 0;
  font: inherit; text-align: left; color: inherit;
  background: none; border: 0;
}
.voce .nome { grid-area: nome; }
.voce .prezzo, .voce .prezzo-vuoto { grid-area: prezzo; }
.voce .freccia, .voce .vuoto { grid-area: freccia; }
.voce .etichette { grid-area: meta; }
.voce .prezzo-vuoto { display: block; min-width: 4.1rem; }
button.voce { cursor: pointer; }
.voce .nome { font-family: var(--font-titolo); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.voce .formato { font-weight: 400; font-size: .85rem; opacity: .75; }

/* La freccia occupa spazio anche quando non c'è, altrimenti i prezzi
   delle righe non apribili scivolano a destra. */
.voce .freccia, .voce .vuoto {
  flex: 0 0 auto; width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  transition: transform .18s ease;
}
.voce .vuoto { visibility: hidden; }
button.voce[aria-expanded="true"] .freccia { transform: rotate(180deg); }

.ingredienti {
  padding: 0 0 1rem;
  font-size: .95rem;
  max-width: 32rem;
}
.ingredienti[hidden] { display: none; }

.etichette { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin-top: .35rem; }
/* Le icone degli allergeni si leggono come un blocco unico: serrate fra
   loro, staccate dalle etichette a parole. */
.allergeni { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; }
.icona-allergene { flex: 0 0 auto; opacity: .9; }

.etichetta {
  font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  padding: .12rem .5rem;
  border: 2px solid currentColor; border-radius: var(--raggio-pill);
}

/* --- asporto: righe con i più e meno ------------------------- */

.voce-asporto {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "nome prezzo"
    "meta conta"
    "azione azione"
    "opzioni opzioni"
    "ingredienti ingredienti";
  align-items: center;
  column-gap: .85rem; row-gap: .35rem;
  padding: .85rem 0;
}
.voce-asporto .nome-asporto {
  grid-area: nome;
  display: flex; align-items: center; gap: .5rem;
  padding: 0; font: inherit; text-align: left; color: inherit;
  background: none; border: 0;
}
button.nome-asporto { cursor: pointer; }
.voce-asporto .nome { font-family: var(--font-titolo); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.voce-asporto .formato { font-weight: 400; font-size: .85rem; opacity: .75; }
.voce-asporto .prezzo { grid-area: prezzo; }
.voce-asporto .etichette { grid-area: meta; margin: 0; }
.voce-asporto .conta { grid-area: conta; }
.voce-asporto .ingredienti { grid-area: ingredienti; padding: .2rem 0 0; }
.voce-asporto .apri-opzioni { grid-area: azione; }
.voce-asporto .opzioni { grid-area: opzioni; }

/* contorni e salse */
.apri-opzioni {
  justify-self: start;
  margin-top: .2rem; padding: .3rem .7rem;
  font: inherit; font-size: .82rem; font-weight: 600;
  color: inherit; background: none; cursor: pointer;
  border: 2px solid currentColor; border-radius: var(--raggio-pill);
  opacity: .85;
}
.apri-opzioni::after { content: ' +'; }
.apri-opzioni[aria-expanded="true"]::after { content: ' −'; }

.opzioni { padding: .6rem 0 .2rem; }
.gruppo-opzioni {
  margin: .5rem 0 .35rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  opacity: .85;
}
.gruppo-opzioni:first-child { margin-top: 0; }
.fila-opzioni { display: flex; flex-wrap: wrap; gap: .35rem; }
.opzione {
  padding: .35rem .7rem;
  font: inherit; font-size: .82rem; font-weight: 500;
  color: var(--nero); background: var(--crema-2);
  border: 2px solid var(--nero); border-radius: var(--raggio-pill);
  cursor: pointer;
}
.opzione[aria-pressed="true"] { background: var(--nero); color: var(--crema); }

.righe-ordine .con {
  display: block;
  font-size: .82rem; font-weight: 400; color: var(--grigio);
}
.voce-asporto button.nome-asporto[aria-expanded="true"] .freccia { transform: rotate(180deg); }

/* La riga scelta si stacca dalle altre: a colpo d'occhio si vede
   cosa è già nel carrello. */
.voce-asporto.scelto .nome { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.conta {
  display: flex; align-items: center; gap: .1rem;
  background: var(--crema-2);
  border: 2px solid var(--nero);
  border-radius: var(--raggio-pill);
  overflow: hidden;
}
.conta button {
  width: 2.5rem; height: 2.5rem;
  font: inherit; font-size: 1.3rem; font-weight: 700; line-height: 1;
  color: var(--nero); background: none; border: 0; cursor: pointer;
}
.conta button:hover { background: rgba(19, 18, 20, .08); }
.conta output {
  min-width: 1.6rem; text-align: center;
  font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--nero);
}

/* --- asporto: riepilogo dell'ordine -------------------------- */

.righe-ordine { list-style: none; margin: 0 0 1rem; padding: 0; }
.righe-ordine li {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: .5rem .7rem; align-items: center;
  padding: .6rem 0;
  border-bottom: 2px solid rgba(19, 18, 20, .12);
}
.righe-ordine .che .titolo { display: block; font-weight: 700; }
.righe-ordine .quanto {
  min-width: 4.2rem; text-align: right;
  font-weight: 700; font-variant-numeric: tabular-nums;
}

/* I più e meno del riepilogo: più piccoli di quelli dell'elenco,
   ma sempre sopra i 40px di area toccabile. */
.conta.piccola button { width: 2.1rem; height: 2.1rem; font-size: 1.15rem; }
.conta.piccola output { min-width: 1.3rem; font-size: .95rem; }

.conti { padding: .5rem 0 0; }
.conti .dato.totale {
  border-top: 2px solid var(--nero);
  margin-top: .3rem; padding-top: .6rem;
  font-size: 1.15rem;
}
.conti .dato.totale dt { color: var(--nero); font-weight: 700; }
.conti .dato.totale dd { font-weight: 700; }

/* Barra sempre in fondo allo schermo finché c'è qualcosa nel carrello. */
.barra-carrello {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  background: var(--crema);
  border-top: var(--bordo) solid var(--nero);
  padding: .7rem 0;
  padding-bottom: calc(.7rem + env(safe-area-inset-bottom));
}
.barra-carrello .contenuto {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.barra-carrello span { font-weight: 700; font-variant-numeric: tabular-nums; }
/* Spazio in fondo, così la barra non copre il piè di pagina. */
body:has(.barra-carrello:not([hidden])) .pie { padding-bottom: 6rem; }

/* --- modulo --------------------------------------------------- */

.modulo { margin: 1.5rem 0 0; }
.campo { margin-bottom: 1.15rem; }
.campo > label, .gruppo > legend {
  display: block; font-weight: 700; font-size: .95rem; margin-bottom: .35rem; padding: 0;
}
.facoltativo { font-weight: 400; color: var(--grigio); }
.aiuto { display: block; font-size: .85rem; color: var(--grigio); margin-top: .35rem; }

input[type="text"], input[type="tel"], input[type="email"], input[type="date"],
select, textarea {
  width: 100%; min-height: 3.25rem; padding: .7rem .85rem;
  font: inherit; font-size: 1rem;   /* 16px pieni: sotto, iPhone ingrandisce */
  font-weight: 500;
  color: var(--nero); background: var(--crema-2);
  border: 2px solid var(--nero); border-radius: 12px;
  appearance: none;
}
textarea { min-height: 5.5rem; resize: vertical; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23131214' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: .75rem;
  padding-right: 2.5rem;
}
input:focus, select:focus, textarea:focus { box-shadow: var(--ombra-piccola); }
input::placeholder, textarea::placeholder { color: var(--grigio); opacity: 1; }

.gruppo { border: 0; padding: 0; margin: 0 0 1.15rem; }
.scelte { display: grid; gap: .6rem; }
.scelta {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .85rem .9rem;
  background: var(--crema-2);
  border: 2px solid var(--nero); border-radius: 12px;
  cursor: pointer;
}
.scelta input { margin: .15rem 0 0; width: 1.15rem; height: 1.15rem; accent-color: var(--rosso); }
.scelta:has(input:checked) { box-shadow: var(--ombra-piccola); background: #fff; }
.scelta .posti { display: block; font-size: .85rem; color: var(--grigio); }

.esca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.errore { display: none; font-size: .88rem; font-weight: 600; color: var(--rosso-scuro); margin-top: .35rem; }
.errore.visibile { display: block; }
[aria-invalid="true"] { border-color: var(--rosso); }

.riepilogo-errori {
  display: none;
  padding: .9rem 1rem; margin-bottom: 1.15rem;
  background: var(--crema-2);
  border: var(--bordo) solid var(--rosso); border-radius: 12px;
}
.riepilogo-errori.visibile { display: block; }
.riepilogo-errori p { font-weight: 700; margin-bottom: .35rem; }
.riepilogo-errori ul { margin: 0; padding-left: 1.1rem; }

.nota-invio { font-size: .85rem; color: var(--grigio); margin-top: .85rem; }

.inviato {
  margin: 1.5rem 0 0; padding: 1.5rem 1.15rem;
  background: var(--crema-2);
  border: var(--bordo) solid var(--nero); border-radius: var(--raggio);
  box-shadow: var(--ombra);
}
.inviato ol { margin: 0 0 1.15rem; padding-left: 1.2rem; }
.inviato li { margin-bottom: .35rem; }
.inviato .azioni { display: grid; gap: .7rem; }

/* --- informazioni pratiche ------------------------------------ */

.schede { display: grid; gap: 1rem; margin-top: 1.25rem; }
.scheda {
  padding: 1.1rem 1.15rem;
  background: var(--crema-2);
  border: 2px solid var(--nero); border-radius: var(--raggio);
}
.scheda h3 { margin-bottom: .6rem; }
.scheda ul { margin: 0; padding-left: 1.1rem; color: var(--grigio); }
.scheda li { margin-bottom: .25rem; }

dl { margin: 0; }
.dato { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; }
.dato + .dato { border-top: 2px solid rgba(19, 18, 20, .12); }
.dato dt { color: var(--grigio); }
.dato dd { margin: 0; font-weight: 600; text-align: right; }

/* --- piè di pagina -------------------------------------------- */

.pie {
  margin-top: 2.5rem;
  border-top: var(--bordo) solid var(--nero);
  padding: 1.75rem 0 2.25rem;
  font-size: .88rem; color: var(--grigio);
}
.pie a { color: var(--grigio); }
.pie .righe { display: grid; gap: .5rem; }
.pie .legale { margin-top: 1rem; font-size: .8rem; }

/* --- documenti ------------------------------------------------- */

.documento { padding: 2rem 0 2.5rem; }
.documento h2 { font-size: 1.3rem; margin-top: 1.75rem; }
.documento ul { padding-left: 1.2rem; }
.documento li { margin-bottom: .35rem; }

/* --- da tablet in su ------------------------------------------- */

@media (min-width: 40rem) {
  h1 { font-size: 2.6rem; }
  .testa h1 { font-size: 3rem; }
  .pannello { padding: 2.25rem 1.75rem 1.5rem; }
  .schede { grid-template-columns: 1fr 1fr; }
  .campi-doppi { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  .scelte { grid-template-columns: 1fr 1fr; }
  .pie .righe { grid-template-columns: 1fr 1fr; }
  .copertina .azioni { gap: 1rem; }
  .inviato .azioni { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn-piccolo, .voce .freccia { transition: none; }
}