/* Georgia, servita dal sito. È un font di sistema: su Windows, Mac e iOS
   c'è, su Android no. Chiedendola e basta, il telefono ripiegava su Gelasio,
   che ha le stesse metriche ma un tratto più grasso: data e countdown
   venivano diversi da quelli del disegno. Servendola, arriva uguale a tutti.
   Vedi brand/FONT.md, compresa la nota sulla licenza Microsoft. */
@font-face {
  font-family: 'Georgia';
  src: url('/assets/font/georgia-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* Perpetua, servita dal sito. Solo i caratteri che usiamo: vedi brand/FONT.md,
   compresa la nota sulla licenza Monotype. */
@font-face {
  font-family: 'Perpetua';
  src: url('/assets/font/perpetua-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Perpetua';
  src: url('/assets/font/perpetua-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Perpetua';
  src: url('/assets/font/perpetua-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ===================================================================
   Palette: brand/palette-sito.pdf · brand/COLORI.md
   Impaginazione: ogni pagina è UNA videata. La pagina non scorre mai;
   scorre al massimo il contenuto centrale, e solo se non ci sta.
   =================================================================== */

:root {
  /* Sabbie e creme */
  --bianco:      #FCF9F5;
  --crema:       #FAF4E8;
  --sabbia:      #F3E5D0;
  --sabbia-cupa: #E8D6B8;
  --oro:         #B99862;
  --bronzo:      #A97C4F;

  /* Neutri */
  --inchiostro:  #3A3534;
  --tenue:       #6E6764;
  --grigio:      #CFC6BE;

  /* Rosa, pesca, terracotta */
  --rosa:        #E6C9C3;
  --rosa-cupo:   #C98E92;
  --pesca:       #F0C8A7;
  --terracotta:  #C97458;
  --mattone:     #B9694C;

  /* Verdi */
  --verde:       #9AAD9A;
  --salvia:      #8A9E8D;
  --bosco:       #68765D;

  /* Prugna */
  --prugna:      #4E2331;

  /* Ruoli */
  --carta:      var(--bianco);
  --bordo:      var(--sabbia-cupa);
  --errore:     var(--mattone);
  --fondo:      var(--crema);
  --superficie: var(--carta);

  /* Titoli: Georgia. Gelasio è il ripiego su Android e Linux, dove Georgia
     non c'è: ha le stesse metriche, quindi l'impaginazione non si muove. */
  --titoli: Georgia, Gelasio, 'Times New Roman', serif;

  /* Sottotitoli: Perpetua, caricata dal sito con le @font-face qui sopra. */
  --sottotitoli: Perpetua, Georgia, serif;

  /* Testo, campi e musica: Source Sans 3 variabile, tondo e corsivo. */
  --testo: 'Source Sans 3', system-ui, -apple-system, sans-serif;

  --max: 1080px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

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

/* Toccando, i browser dei telefoni accendono un velo azzurrino sopra tutto
   l'elemento. La risposta al dito la diamo noi, in tinta col resto. */
html { -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--inchiostro);
  font-family: var(--testo);
  font-size: var(--corpo);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Niente parole sole in fondo a un testo: «pretty» allunga la penultima riga
   per tirarsi dietro l'ultima parola, «balance» pareggia le righe e serve ai
   blocchi corti e centrati, dove una riga mozza si vede subito. */
p, li, figcaption { text-wrap: pretty; }
h1, h2, h3, .sezione-titolo p, .nota-piede, .spunti li { text-wrap: balance; }

h1, h2 { font-family: var(--titoli); font-weight: 400; line-height: 1.18; margin: 0 0 .4em; }
h3     { font-family: var(--sottotitoli); font-weight: 400; line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: clamp(2.25rem, 7.5vw, 4.5rem); }
h2 { font-size: clamp(1.7rem, 4.5vw, 2.3rem); }
h3 { font-size: clamp(1.15rem, 3vw, 1.45rem); }
p  { margin: 0 0 1rem; }
a  { color: var(--bosco); }

/* Cifre allineate e a passo fisso dove il carattere lo sa fare. Qui ci sono
   solo Perpetua e Source Sans, che il sito si porta dietro: arrivano uguali
   a tutti. Data e countdown no: sono in Georgia, che questa richiesta la
   ignora, mentre Gelasio — il suo ripiego su Android — la esegue. Chiederla
   voleva dire numeri di un disegno sul computer e di un altro sul telefono,
   e pure il 16% più larghi. */
.orari .ora, .riga-ospite .testa strong, .iban, .porta .numero {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
}

/* ===================================================================
   L'impalcatura della videata singola
   =================================================================== */

body.schermata {
  height: 100vh;
  height: 100dvh;          /* tiene conto delle barre del browser mobile */
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* minmax(0,1fr) impedisce alla colonna di allargarsi fino al contenuto
     più largo: senza, la barra delle linguette sfonda la pagina in orizzontale */
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

/* Il centro è l'unica cosa che può scorrere, e solo se serve.
   `margin: auto` sul figlio lo centra finché ci sta, poi lascia scorrere. */
body.schermata > main {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  scrollbar-width: thin;
}
body.schermata > main > * {
  margin: auto;
  width: 100%;
  max-width: var(--max);
  padding: clamp(.8rem, 2.9vh, 1.6rem) var(--gutter);
}

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Marchio, data, decori ---------- */

/* Il lockup "famiglia Alvisi Davoli": brand/grafica/grafica_reference-29.svg.
   L'h1 che lo contiene non deve portarsi dietro i margini di un titolo di testo. */
h1.marchio { margin: 0; font-size: 0; line-height: 0; }
.logo { display: block; height: clamp(66.6px, 9.4275 * var(--g), 190.8px); width: auto;
        max-width: 82vw; margin: 0 auto; }

/* Il formato data del riferimento: 25.04 sopra, 20 27 sotto, con l'interlinea
   strettissima (0.7) di brand/grafica/grafica_reference-30.svg. */
.data-blocco {
  display: grid; justify-items: center;
  font-family: var(--titoli);
  font-size: clamp(15.3px, 2.1429 * var(--g), 34.29px);
  line-height: .7;
  margin: 0;
}

/* ---------- Grafica: un solo sistema di scala ---------- */
/* Le tavole originali sono disegnate tutte nello stesso spazio: ogni
   composizione da 1 a 28 colloca i suoi elementi col fattore 0,24. Qui
   quello spazio si conserva. Ogni immagine dichiara la propria larghezza
   in unità di tavola (--u) e una sola variabile (--scala) decide quanto
   vale un'unità in pixel: due elementi mantengono così fra loro le stesse
   proporzioni che hanno nel disegno, invece di essere schiacciati ognuno
   nella propria scatola. I moltiplicatori per famiglia (schede, pannelli,
   decori d'ambiente) sono rapporti dichiarati di quella stessa base. */
:root { --scala: .38; }

/* Rampa tipografica unica. Vale 16px sul formato del disegno (1440x900) e
   scende seguendo il lato più stretto, perché la pagina deve stare in una
   videata: sotto, ogni corpo è un multiplo di --t con un minimo leggibile,
   così i testi rimpiccioliscono insieme invece che ognuno per conto suo. */
:root { --t: clamp(10.2px, min(.5vw + 8.8px, 1.15vh + 5.65px), 16px); }

/* Corpo del testo: lo stesso sulle descrizioni dei riquadri e sui paragrafi
   delle altre pagine, così restano coerenti fra loro a ogni formato. */
:root { --corpo: clamp(13.5px, 1 * var(--t), 16px); }

/* Marchio, data e countdown hanno una scala propria, --g, che normalmente
   coincide con --t ma può scendere più in basso: sono loro a occupare il
   grosso della videata, e scendendo insieme fanno stare tutto senza
   scomporre le proporzioni del gruppo. */
:root { --g: var(--t); }

.ornamento, .divisore {
  display: block; height: auto; pointer-events: none;
  width: calc(var(--u) * var(--s, var(--scala)) * 1px);
}

/* Il profilo attorno ai fiori non è appoggiato sopra alla scatola: È il
   perimetro della scatola. Un tracciato chiuso solo — rettangolo stondato
   con la gobba innestata in un lato — disegnato da app.js, che è l'unico a
   conoscere le misure in pixel della carta. Riempimento e tratto sono lo
   stesso tracciato (<use>), così non c'è nulla da far combaciare: niente
   fasce di copertura, niente mezzi pixel, niente linee che si sospendono.
   I fiori stanno in mezzo ai due, perché la linea passi sopra ai petali. */
.sagoma { position: absolute; display: block; pointer-events: none; overflow: visible; }
/* Il disegno per il telefono non è una riduzione di quello grande: i
   mazzetti sono rimontati sugli angoli e il perimetro li comprende già,
   quindi qui il tracciato arriva fatto dal file di Illustrator invece di
   essere composto da app.js. Il viewBox è la carta nelle coordinate della
   tavola, così path e immagini stanno dove li ha messi lui. */
.sagoma-tel { display: none; }
.sagoma-fondo { fill: var(--superficie); stroke: none; }
.sagoma-tratto {
  fill: none;
  stroke: var(--bordo);
  stroke-width: 1;
  transition: stroke .15s ease;
}
/* Il segno di «qui stai scrivendo» rifatto lungo il profilo invece che
   attorno al rettangolo. Sono due copie dello stesso tracciato, dipinte
   sotto al fondo, che il fondo taglia a metà perché il tratto in SVG sta
   a cavallo della linea:
     · 6 di verde    lascia fuori 3
     · 2 del colore della scheda, sopra, ne rimangia 1
   Resta una riga verde di 2 staccata di 1, come l'outline degli altri
   campi, ma che segue anche la gobba. */
.sagoma-fuoco, .sagoma-stacco { fill: none; stroke: none; }
.sagoma-fuoco  { stroke-width: 6; }
.sagoma-stacco { stroke-width: 2; }
/* La sagoma è in posizione assoluta, quindi si dipinge dopo il contenuto in
   flusso: senza questo il riempimento coprirebbe titolo e descrizione. */
/* …tranne un'altra sagoma: quella resta fuori dal flusso, o la carta
   si allunga per contenerla. */
.sagoma ~ *:not(.sagoma) { position: relative; }
/* Finché la sagoma non è disegnata la scatola tiene il suo bordo; quando lo
   è, il bordo resta solo a occupare il suo pixel nel calcolo delle misure.
   Il selettore nomina anche la scatola: da solo perdeva contro .porta e
   .form-box, che vengono dopo, e il bordo restava dipinto sotto al tratto. */
.porta.sagomata, .form-box.sagomata { border-color: transparent; background: none; }
.form-box > .ornamento { --s: calc(var(--scala) * 1.4); margin: 0 auto .8rem; }

.pannello { position: relative; }
/* Il contenuto sta sopra a quel che si dipinge sul fondo della videata. */
body.schermata > header,
body.schermata > main,
body.schermata > footer { position: relative; z-index: 1; }


/* Le scintille sono prese dal disegno in Illustrator: stessa tavola degli
   altri, posate a scala 0,5 come le ha messe lui (0,38 x 1,32). */

/* Data con le tre scintille intorno. Le misure stanno nella scala condivisa,
   le posizioni in em del corpo della data, così restano agganciate al testo. */
.data-gruppo {
  position: relative; display: inline-block;
  font-size: clamp(15.3px, 2.1429 * var(--g), 34.29px);
  margin-top: calc(5.316 * var(--g));
}
.data-gruppo .data-blocco { font-size: 1em; margin: 0; }
.scintilla { position: absolute; width: calc(var(--u) * .0131em); }
.scintilla { height: auto; display: block; pointer-events: none; }
.sc-sinistra { left: -.93em;            top: -1.10em; }
.sc-punto    { left: calc(100% + .56em); top:   .51em; }
.sc-destra   { left: calc(100% + .03em); top:  1.89em; }

.porta, .form-box.con-mazzo { position: relative; }

/* La scheda del regalo nel disegno ha molta aria sopra: 88,6px fino a «IBAN». */
.form-box.con-mazzo { padding-top: clamp(2rem, 5.18vw, 4.66rem); }
/* Qui i fiori rientrano da sinistra: il margine si allarga da tutt'e due i
   lati, altrimenti il contenuto, che è centrato, scivolerebbe di lato. */
.form-box.con-mazzo {
  padding-inline: max(clamp(1.25rem, 3.5vw, 2.25rem), var(--aria-fiori, 0px));
}

/* ---------- Barra ---------- */
.barra {
  border-bottom: 1px solid var(--bordo);
  background: var(--crema);
}
.barra .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 3.5rem;
}
.monogramma { font-family: var(--sottotitoli); font-size: clamp(15px, 1.25 * var(--t), 20px);
              letter-spacing: .1em; }
a.monogramma { text-decoration: none; color: inherit; }
a.monogramma:hover { color: var(--bosco); }
.barra .dove {
  font-size: clamp(10px, .7375 * var(--t), 11.8px);
  letter-spacing: .2em; text-transform: uppercase; color: var(--tenue);
}

/* ---------- Piede ---------- */
.piede {
  border-top: 1px solid var(--bordo);
  background: var(--crema);
  text-align: center;
  font-size: .78rem;
  color: var(--tenue);
  padding: .85rem var(--gutter);
}
.piede a { color: var(--tenue); }

/* Sfumatura sopra il piede: compare solo se sotto c'è altro da leggere. */
.piede { position: relative; }
.piede::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 2.25rem;
  background: linear-gradient(to top, var(--crema), transparent);
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
body.c-e-altro .piede::before { opacity: 1; }

/* ---------- Testatine ---------- */
.centrato { text-align: center; }

.occhiello {
  font-size: .74rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--bronzo); margin-bottom: .6rem;
}

.sezione-titolo { text-align: center; margin-bottom: clamp(1.25rem, 3.5vh, 2.5rem); }
.sezione-titolo p { color: var(--tenue); max-width: 46ch; margin-inline: auto; }
.sezione-titolo p:last-child { margin-bottom: 0; }

/* Una lettera del colore dello sfondo, appoggiata fuori dal titolo: non
   occupa spazio, quindi quello che si legge resta centrato com'era. */
.con-segreto { position: relative; display: inline-block; }
.segreta {
  position: absolute; right: 100%;
  color: var(--crema); transition: color .7s ease;
}
/* Passandoci sopra si scopre: la lettera prende piano il colore del
   titolo. Il blocco sul movimento ridotto, più in basso, la lascia
   comparire di scatto invece che in dissolvenza. Sul telefono il
   passaggio del mouse non c'è: ci pensa app.js a mettere .svelata
   quando il dito passa di lì. */
.con-segreto:hover .segreta,
.con-segreto.svelata .segreta { color: currentColor; }

.filetto { width: 56px; height: 1px; background: var(--oro); margin: clamp(.9rem, 2.5vh, 1.6rem) auto; border: 0; }

/* ===================================================================
   Home
   =================================================================== */

/* Solo sulla home il disegno non centra il blocco: tiene più aria sopra. */
body.schermata > main > .centrato { padding-top: clamp(1.1rem, 5.73vh, 3.3rem); padding-bottom: clamp(.4rem, .55vh, .8rem); }

.nomi { margin-bottom: .2rem; }
.nomi .e { display: block; font-family: var(--sottotitoli); font-size: .42em; color: var(--oro); font-style: italic; margin-block: .05em; }
.data {
  font-size: .82rem; letter-spacing: .28em; text-transform: uppercase; color: var(--tenue);
  margin-bottom: 0;
}

.countdown {
  display: flex; justify-content: center; gap: clamp(.9rem, 4vw, 2.5rem);
  /* Fra la data e il countdown c'era anche il luogo: tolto quello, lo
     spazio resta, perché il rapporto fra marchio, data e countdown è
     quello disegnato. 1,0125 + 2,784 di margine + 1,25 di riga. */
  margin-top: calc(5.0465 * var(--g));
}
.countdown .n { font-family: var(--titoli); font-size: clamp(14.85px, 2.07 * var(--g), 33.12px);
                display: block; line-height: 1; }
.countdown .u { font-size: clamp(7.2px, .619 * var(--g), 9.9px);
                letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); }

/* Le tre porte */
.porte {
  display: grid; gap: clamp(.7rem, 1.8vh, 1.1rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  margin-top: calc(6.525 * var(--g));
}
.porta {
  display: grid; gap: clamp(.45rem, 1.83vh, 1.03rem); align-content: start;
  text-decoration: none; color: inherit;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: 14px;
  /* Il testo non deve mai finire sotto ai fiori: app.js misura quanto
     scendono dentro alla carta e alza --aria-fiori se il margine non basta. */
  padding: max(clamp(1rem, 3.07vh, 1.73rem), var(--aria-fiori, 0px))
           clamp(1rem, 3vw, 1.5rem) clamp(1.1rem, 3.36vh, 1.89rem);
  transition: border-color .15s ease, transform .15s ease;
}
/* :active è la risposta al dito, dove il passaggio del mouse non esiste. */
.porta:hover, .porta:focus-visible, .porta:active {
  border-color: var(--salvia); transform: translateY(-2px);
}
/* Dove la sagoma c'è, il bordo resta trasparente anche sotto al mouse:
   a cambiare colore è il tratto, che è il perimetro vero. */
.porta.sagomata:hover, .porta.sagomata:focus-visible,
.porta.sagomata:active { border-color: transparent; }
/* La messa a fuoco la dice il tratto che cambia colore: il rettangolo che
   il browser disegna da sé non segue il profilo. */
.porta:focus-visible { outline: none; }
.porta:hover .sagoma-tratto,
.porta:focus-visible .sagoma-tratto,
.porta:active .sagoma-tratto,
.porta:active .sagoma-tel .sagoma-tratto { stroke: var(--salvia); }
.porta .numero {
  font-size: .68rem; font-weight: 600; letter-spacing: .2em; color: var(--oro);
}
.porta strong { font-family: var(--sottotitoli); font-size: clamp(18px, 1.816 * var(--t), 29.06px);
                font-weight: 500; line-height: 1.2; }
.porta .desc { color: var(--tenue); font-size: var(--corpo);
               line-height: 1.2; text-wrap: balance; }

/* ===================================================================
   Componenti
   =================================================================== */

.griglia { display: grid; gap: clamp(.9rem, 2.5vw, 1.6rem); }
.griglia.due { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }

/* Stesso raccordo dei box delle altre pagine — le porte della home e le
   schede del regalo — che nel disegno sono stondati a 14px. */
.scheda {
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: 14px;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
}
.scheda h3 { margin-bottom: .3rem; }
.scheda p:last-child { margin-bottom: 0; }

/* ---------- Bottoni ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--testo); letter-spacing: .14em; text-transform: uppercase;
  /* In rem restavano della stessa misura su ogni schermo, soli in mezzo a
     un sito che cresce. I fattori tengono ferma la misura sul telefono. */
  font-size: calc(.9481 * var(--corpo));
  padding: 1em 2.25em; border-radius: 2px; border: 1px solid var(--bosco);
  background: var(--bosco); color: var(--bianco); text-decoration: none; cursor: pointer;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
/* :active vale per il dito, che il passaggio del mouse non ce l'ha. */
.btn:hover:not(:disabled), .btn:active:not(:disabled) { background: #586450; border-color: #586450; }
.btn:disabled { opacity: .55; cursor: progress; }
.btn.fantasma { background: transparent; color: var(--bosco); }
.btn.fantasma:hover, .btn.fantasma:active { background: var(--bosco); color: var(--bianco); }
.btn.piccolo { padding: .6429em 1.4286em; font-size: calc(.8296 * var(--corpo)); }

/* ---------- Form ---------- */
.form-box {
  max-width: 660px; margin-inline: auto;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: 14px;
  padding: clamp(1.25rem, 3.5vw, 2.25rem);
}

.campo { margin-bottom: 1.1rem; }
.campo > label, .gruppo > legend {
  display: block; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tenue); margin-bottom: .4rem; padding: 0;
}
.aiuto { font-size: .82rem; color: var(--tenue); margin: .3rem 0 0; text-transform: none; letter-spacing: 0; }

/* Per esclusione invece che per elenco: elencando i tipi uno per uno, il
   giorno che un campo diventa «password» resta fuori e perde la veste. */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), textarea, select {
  width: 100%; font: inherit; color: var(--inchiostro);
  font-size: calc(1.1259 * var(--corpo));
  background: var(--fondo); border: 1px solid var(--bordo); border-radius: 2px;
  padding: .6842em .8421em;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--salvia); outline-offset: 1px; border-color: var(--salvia);
}
textarea { resize: vertical; min-height: 4.5rem; }

.gruppo { border: 0; padding: 0; margin: 0 0 1.1rem; }
.scelte { display: flex; gap: .7rem; flex-wrap: wrap; }
.scelta {
  flex: 1 1 140px; display: flex; align-items: center; gap: .6rem;
  border: 1px solid var(--bordo); border-radius: 2px; padding: .7rem .95rem; cursor: pointer;
  background: var(--fondo);
}
.scelta:has(input:checked) { border-color: var(--bosco); background: color-mix(in srgb, var(--salvia) 18%, var(--fondo)); }
.scelta input { accent-color: var(--bosco); }

/* Allergie e intolleranze: quasi nessuno ne ha, quindi stanno chiuse in una
   riga e si aprono al bisogno. Dentro, pastiglie strette che vanno a capo,
   così quattordici voci non diventano quattordici righe. */
.elenco { border: 1px solid var(--bordo); border-radius: 2px; background: var(--fondo); }
.elenco > summary {
  cursor: pointer; padding: .55rem .8rem; font-size: .85rem;
  display: flex; justify-content: space-between; gap: .5rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--tenue);
}
.elenco > summary::-webkit-details-marker { display: none; }
/* L'anteprima resta su una riga: se le voci sono tante, sfuma in fondo. */
.elenco .riassunto {
  text-transform: none; letter-spacing: 0; text-align: right;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.elenco.piena > summary { color: var(--bronzo); }
.elenco[open] > summary { border-bottom: 1px solid var(--bordo); }
.elenco .scelte { gap: .4rem; padding: .7rem .8rem 0; }
.elenco .campo { margin: .6rem 0 0; padding: 0 .8rem .8rem; }

/* «Nessuna» non è una voce dell'elenco: è la risposta opposta. Sta sopra,
   larga quanto il riquadro e staccata da una riga, perché non la si prenda
   per il primo allergene della lista. */
.elenco .nessuna {
  flex: none; margin: .8rem .8rem 0; border-radius: 2px;
  font-size: .9rem; padding: .6rem .8rem;
}
.elenco .nessuna + .scelte { margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--bordo); }
.elenco:has(.o-nessuna:checked) .scelte,
.elenco:has(.o-nessuna:checked) .campo { opacity: .45; }
/* Finché non si è risposto, il riquadro lo dice sottovoce. */
.elenco.vuota > summary .riassunto { color: var(--terracotta); }
.elenco .scelta {
  flex: 0 0 auto; padding: .35rem .6rem; gap: .4rem;
  font-size: .85rem; border-radius: 999px;
}

/* Il blocco dei più piccoli: seggiolone e, per gli infanti, il fasciatoio. */
.o-piccoli { display: grid; gap: .4rem; }

.riga-ospite {
  border: 1px solid var(--bordo); border-radius: 2px;
  padding: 1rem; margin-bottom: .8rem; background: var(--fondo);
  display: grid; gap: .8rem;
}
/* Di suo un elemento di griglia non scende sotto la larghezza del proprio
   contenuto: senza questo l'anteprima delle allergie, che è una riga sola,
   allargava la scheda oltre lo schermo invece di farsi troncare. */
.riga-ospite > * { min-width: 0; }

/* Dove il valore è deciso da noi — il menù dei bambini — si mostra come
   testo, con l'aria di un campo ma senza poterci scrivere. */
.campo .etichetta {
  display: block; font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tenue); margin-bottom: .35rem;
}
.campo .fisso {
  margin: 0; padding: .7rem .9rem; border: 1px dashed var(--bordo);
  border-radius: 2px; color: var(--tenue);
}
.riga-ospite .testa { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.riga-ospite .testa strong { font-family: var(--sottotitoli); font-size: 1.1rem; font-weight: 500; }
.riga-ospite .doppia { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 155px), 1fr)); }
.rimuovi {
  background: none; border: 0; color: var(--tenue); cursor: pointer;
  font-size: .78rem; text-decoration: underline; padding: .25rem;
}
.rimuovi:hover { color: var(--errore); }

.avviso { padding: .8rem 1rem; border-radius: 2px; font-size: .9rem; margin-bottom: 1rem; }
.avviso.ko {
  background: color-mix(in srgb, var(--mattone) 12%, var(--bianco));
  color: #8E4C34; border: 1px solid color-mix(in srgb, var(--mattone) 32%, var(--bianco));
}
.avviso.ok {
  background: color-mix(in srgb, var(--salvia) 18%, var(--bianco));
  color: var(--bosco); border: 1px solid color-mix(in srgb, var(--salvia) 40%, var(--bianco));
}

[hidden] { display: none !important; }

.esito { text-align: center; }
.esito h3 { color: var(--bosco); }

.iban {
  font-size: clamp(1.02rem, 3.2vw, 1.3rem); font-weight: 600;
  letter-spacing: .06em; margin-bottom: .35rem; overflow-wrap: anywhere;
}

/* ---------- Etichette ---------- */
.tag {
  display: inline-block; font-size: .72rem; padding: .15rem .5rem;
  border-radius: 2px; white-space: nowrap; letter-spacing: .02em;
}
.tag.si          { background: color-mix(in srgb, var(--salvia) 22%, var(--bianco)); color: var(--bosco); }
.tag.no          { background: var(--sabbia); color: var(--tenue); }
.tag.nota        { background: color-mix(in srgb, var(--pesca) 45%, var(--bianco)); color: var(--bronzo); }

/* ===================================================================
   Pagina "La giornata": cinque schede nello stesso spazio
   =================================================================== */

.schede {
  display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--bordo); background: var(--crema);
  /* Margini propri, più stretti di quelli della pagina sugli schermi
     piccoli: la fila è centrata, quindi non si vedono mai — contano solo
     quando lo spazio manca, ed è lì che servono. */
  padding-inline: clamp(.5rem, 2.5vw, 2.5rem);
}
.schede::-webkit-scrollbar { display: none; }
.schede-interno { display: flex; gap: .3rem; margin-inline: auto; max-width: var(--max); width: max-content; }
/* Le quattro schede devono starci tutte, senza scorrere: alla misura piena
   la fila è larga 402, più dello schermo di un telefono stretto. Corpo e
   fianchi scendono col formato e tornano pieni dai 600 in su. La spaziatura
   fra le lettere è in em, quindi segue il corpo da sé. */
.schede button {
  font: inherit; letter-spacing: .14em; text-transform: uppercase;
  font-size: clamp(.62rem, 2.9vw, .76rem);
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--tenue); cursor: pointer; white-space: nowrap;
  padding: .8rem clamp(.34rem, 2.4vw, .9rem);
  transition: color .15s ease, border-color .15s ease;
}
.schede button:hover { color: var(--inchiostro); }
.schede button[aria-selected="true"] { color: var(--inchiostro); border-bottom-color: var(--oro); }

.pannello:focus { outline: none; }

/* Nella playlist il corsivo tocca solo alla citazione in coda, che se lo
   prende dal suo <em>: occhiello e descrizione vanno come in ogni altra
   pagina. */
/* Il campo della password è una scatola sagomata come le carte: le foglie
   escono dal suo bordo alto, quindi il perimetro se le porta dietro. Il
   guscio serve perché dentro a un <input> non si può mettere niente: tiene
   la misura del campo e ospita il disegno sopra. */
.campo-sagomato { position: relative; display: block; border-radius: 2px; }
/* La sagoma viene dopo nel documento: senza questo il suo fondo
   coprirebbe i caratteri digitati. */
.campo-sagomato input { position: relative; z-index: 1; }
/* Il selettore deve pesare quanto quello che veste i campi, che arriva
   dopo: altrimenti il bordo dell'input resta dipinto sotto al tratto. */
.campo-sagomato.sagomata input:not([type=checkbox]):not([type=radio]) {
  border-color: transparent; background: none;
}
.sagoma-campo { z-index: 0; }

/* Di quanto crescono i disegni passando dal telefono al grande: 10/7, che
   è il rapporto fra le due tavole, 0,084 e 0,12. Lo conferma la tavola
   02-invitati_LOGIN, dove le foglie misurano 81x66 e l'asterisco 23x29.
   Sul cancello la grafica è una sola per tutti i formati, quindi invece di
   rifarla cambia di quanto si posa. */
@media (min-width: 701px), (min-height: 951px) {
  #box-password { --tavola: 1.4286; }
  /* Sul telefono la gobba del campo cresce con l'altezza del campo; qui no,
     sta alla misura della tavola come le altre tre grafiche, che sono
     anche loro ferme. Una scala sola per tutta la scheda. */
  .sagoma-campo { --sagoma-scala: 1.4286; }
}
/* Il riempimento della sagoma fa da sfondo al campo, quindi prende il colore
   dei campi e non quello delle schede: altrimenti il campo sparisce dentro
   alla scatola, che è dello stesso colore. */
.sagoma-campo .sagoma-fondo { fill: var(--fondo); }
.campo-sagomato.sagomata input:focus-visible { outline: none; }
.campo-sagomato.sagomata:focus-within .sagoma-fuoco  { stroke: var(--salvia); }
.campo-sagomato.sagomata:focus-within .sagoma-stacco { stroke: var(--superficie); }

/* Le grafiche della scheda password: appoggiate sopra, ancorate all'angolo
   in alto a sinistra e in scala con la larghezza della scheda, come nel
   disegno. Non occupano spazio e non si prendono il tocco. */
.deco-tel {
  position: absolute; right: 0; top: 0; height: auto;
  /* Nel disegno la scheda è larga 357 e le grafiche si appoggiano al suo
     lato destro. Su schermi larghi la scheda cresce ma le grafiche no:
     restano della loro misura, agganciate a quel lato. */
  width: min(100%, calc(357px * var(--tavola, 1)));
  overflow: visible; pointer-events: none;
}
/* L'asterisco: nella tavola sta a 31 dal bordo alto della scatola, non ai
   39,5 che verrebbero scalando anche la distanza da quella del telefono.
   Come le due di sotto: cresce di misura, non si allontana. */
@media (min-width: 701px), (min-height: 951px) {
  .deco-tel { top: -8.5px; }
}

.form-box:has(.deco-tel) { position: relative; }

/* Le grafiche in fondo al cancello non galleggiano nella scatola: stanno
   attorno al pulsante. Il contenitore è alto quanto il pulsante, così
   appoggiando il disegno al suo fondo le distanze restano quelle del
   disegno anche se sopra il modulo si allunga. */
.azione { position: relative; display: inline-flex; }
.deco-btn {
  /* Appese al filo destro del pulsante, non al suo fianco sinistro: il
     pulsante cambia larghezza col corpo del testo, loro no, e partendo da
     sinistra si sarebbero staccate. In verticale la cima sta sempre 20,9
     sopra il pulsante, su tutt'e due i formati: nella tavola le due
     grafiche crescono di misura ma non si allontanano. */
  position: absolute; left: 100%; top: -20.9px; height: auto;
  width: calc(138.4px * var(--tavola, 1));
  overflow: visible; pointer-events: none;
}

.form-box.segnaposto { border-style: dashed; text-align: center; color: var(--tenue); }
.form-box.segnaposto code { font-size: .85em; background: var(--sabbia); padding: .1rem .35rem; border-radius: 2px; }
/* Un blocco per servizio: il nome, il link per ascoltare e quello da
   portarsi via. Vanno affiancati finché c'è spazio. */
.servizi {
  display: grid; gap: clamp(.9rem, 2.5vw, 1.4rem); margin-top: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.form-box > .servizi:first-child { margin-top: 0; }
.servizio { text-align: center; }
.servizio .azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: .6rem 0 0; }
/* Pulsante spento: il servizio c'è, il link non ancora. */
.btn.spento { opacity: .45; pointer-events: none; }
.form-box.segnaposto .aiuto { margin: 0 0 1rem; }

/* Scheda «il giorno»: i due luoghi sono la struttura, non una riga come le
   altre. Ognuno è una scheda con dentro i suoi orari; in mezzo la strada,
   che li tiene in fila. Affiancati dove c'è spazio — si legge da sinistra
   a destra come un viaggio — incolonnati dove non ce n'è. */
.tappe {
  display: grid; gap: clamp(.7rem, 2vw, 1.2rem);
  /* minmax(0,…) e non 1fr secco: il margine che tiene il testo lontano dai
     fiori cresce con la scheda, e una colonna che si allarga sul contenuto
     lo rimandava dentro, allargandola ancora, giro dopo giro. */
  grid-template-columns: minmax(0, 1fr);
  max-width: 900px; margin-inline: auto; align-items: center;
}
/* In colonna sola la scheda si prenderebbe tutta la pagina, e i disegni,
   che si misurano sulla sua larghezza, crescerebbero fino al doppio. Si
   ferma alla misura che ha quando le due stanno affiancate, così le tappe
   sono grandi uguali in ogni impaginazione. */
@media (max-width: 759px) { .tappe { max-width: 395px; } }

@media (min-width: 760px) {
  /* La colonna di mezzo è stretta per forza: è un raccordo, non una tappa.
     Con una colonna piena la mezz'ora di strada pesava quanto i luoghi. */
  .tappe { grid-template-columns: minmax(0, 1fr) 4.5rem minmax(0, 1fr); align-items: stretch; }
}
.tappa { display: flex; flex-direction: column; }
/* Due sagome per tappa, una per formato: le tavole posano gli stessi
   disegni a 0,084 sul telefono e a 0,12 sul web, e la scheda cambia
   proporzioni, quindi il profilo non è lo stesso tirato. Si accende solo
   quella del formato in cui siamo. */
.sagoma-giorno, .sagoma-giorno-web { display: none; }
@media (min-width: 701px), (min-height: 951px) {
  .sagoma-giorno-web { display: block; }
}
.tappa { position: relative; }
.scheda.tappa.sagomata { border-color: transparent; background: none; }
/* I disegni sul fianco destro rientrano dentro alla carta: gli orari, che
   vanno da bordo a bordo, non devono finirci sotto. */
.tappa { padding-right: max(clamp(1.1rem, 2.5vw, 1.6rem), var(--aria-destra, 0px)); }
.tappa .occhiello { margin-bottom: .25rem; }
.tappa h3 { margin-bottom: .15rem; }
.tappa .indirizzo { color: var(--tenue); font-size: .85rem; margin: 0 0 .6rem; }
.tappa .tappa-azioni { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .7rem; }

/* La strada fra i due è un filo tratteggiato con sopra il tempo, scritto
   piano: dice quanto dura il mezzo, non è uno dei due capi. */
.strada {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  margin: 0; color: var(--tenue); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase;
}
.strada::before {
  content: ''; display: block; border-top: 1px dashed var(--bordo);
  width: 100%; min-width: 2.5rem; margin-bottom: .3rem;
}

/* Gli orari dentro alla tappa: l'ora a sinistra, il resto a destra. */
/* Gli orari seguono il luogo, non vanno spinti in fondo: le due schede
   hanno un numero diverso di righe e in quella corta resterebbe un buco. */
.orari {
  list-style: none; padding: .5rem 0 0; margin: 0;
  border-top: 1px solid var(--bordo);
}
.orari li {
  display: grid; grid-template-columns: 3.6rem 1fr; gap: .6rem;
  padding-block: .3rem;
}
.orari .ora { font-family: var(--sottotitoli); color: var(--bronzo); }
.orari .desc { color: var(--tenue); font-size: .85rem; }
.orari .desc::before { content: ' · '; }

/* Le note in coda ai pannelli stanno al centro, ma senza una misura di
   lettura stretta: quella del giorno è lunga, e su uno schermo largo ci sta
   su una riga sola invece che su quattro. Sul telefono va a capo da sé. */
.nota-piede { text-align: center; }
#giorno .nota-piede { margin-top: 1.1rem; }

/* Side quest: non una lista di cose da fare, un invito a pensare. Gli
   spunti si danno il cambio uno alla volta — in colonna sembravano un
   elenco di compiti. Senza javascript restano tutti, incolonnati. */
.spunti {
  max-width: 540px; margin: clamp(1rem, 3vh, 1.8rem) auto 0;
  text-align: center; color: var(--tenue);
}
.spunti .occhiello { margin-bottom: .7rem; }
.spunti ul { list-style: none; padding: 0; margin: 0; }
.spunti li { padding-block: .3rem; }
.spunti li { font-family: var(--sottotitoli); font-size: clamp(1.05rem, 1.6vw, 1.3rem); }

/* In rotazione gli spunti stanno tutti nella stessa cella: l'altezza è
   quella del più lungo, così il resto della pagina non sobbalza. */
.spunti.gira ul { display: grid; }
.spunti.gira li { grid-area: 1 / 1; padding-block: 0; opacity: 0; }
.spunti.gira li.attivo { opacity: 1; }
/* La dissolvenza si accende un attimo dopo: altrimenti al primo istante
   si vedrebbero tutti insieme, sovrapposti, mentre sfumano via. Corta,
   perché il cambio arriva ogni tre secondi: il tempo che toglie è tempo
   di lettura. */
.spunti.gira.morbido li { transition: opacity .55s ease; }

/* Il simbolo chiude la scheda in silenzio: nessuna didascalia. */
.simbolo-chiusura { text-align: center; margin: clamp(1.2rem, 3.5vh, 2.2rem) 0 0; }
.simbolo-chiusura img {
  display: block; margin-inline: auto; width: auto;
  height: clamp(80px, 13vh, 136px); opacity: .75;
}

@keyframes sorge {
  from { opacity: 0; transform: translateY(18px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* ===================================================================
   Admin: è uno strumento, qui lo scorrimento normale va benissimo
   =================================================================== */

.admin main { max-width: 1200px; margin-inline: auto; padding: 2rem var(--gutter) 4rem; }
.statistiche { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 2rem; }
.stat { background: var(--carta); border: 1px solid var(--bordo); border-radius: 3px; padding: 1.1rem; }
.stat .n { font-family: var(--titoli); font-size: 2.1rem; line-height: 1; display: block; }
.stat .u { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
.tabella-box { overflow-x: auto; border: 1px solid var(--bordo); border-radius: 3px; background: var(--carta); }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--bordo); vertical-align: top; }
th { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
.tabella-esigenze td:first-child  { width: 45%; }
.tabella-esigenze td:nth-child(2) { width: 18%; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ===================================================================
   Schermi bassi (telefoni in verticale): la home deve starci comunque.
   Le tre porte si stringono su una riga sola e lasciano la descrizione
   agli schermi che hanno spazio per leggerla.
   =================================================================== */

/* Primo scalino: stringo gli spazi, senza togliere niente. */
@media (max-height: 880px) {
  :root { --scala: .35; }
  body.schermata > main > * { padding-block: clamp(.8rem, 1.8vh, 1.2rem); }
  body.schermata > main > .centrato { padding-block: clamp(.85rem, 2.95vh, 2.2rem) clamp(.3rem, .4vh, .7rem); }
  .sezione-titolo { margin-bottom: clamp(.9rem, 2vh, 1.5rem); }
}

/* Secondo scalino: qui lo spazio non basta più, le porte vanno su una riga. */
@media (max-height: 760px) {
  :root { --scala: .31; }
  body.schermata > main > * { padding-block: .9rem; }



  .sezione-titolo { margin-bottom: 1.1rem; }
  .sezione-titolo p { font-size: .9rem; }

  /* Schermi bassi: le due tappe si stringono quel tanto che basta. */
  .tappa { padding: .75rem 1rem; }
  .tappa .indirizzo { margin-bottom: .45rem; }
  .tappa .tappa-azioni { margin-bottom: .45rem; }
  .orari { padding-top: .35rem; }
  .orari li { padding-block: .18rem; }
  .tappe { gap: .6rem; }
  #giorno .nota-piede { margin-top: .7rem; }
  /* Su schermi bassi i pulsanti vanno in riga con l'indirizzo invece che a
     capo: due righe in meno per tappa, che qui fanno la differenza. */
  .tappa-azioni { display: inline-flex; margin: 0 0 0 .5rem; vertical-align: middle; }
  .griglia { gap: .7rem; }
  .scheda { padding: .9rem 1.1rem; }
}

/* Telefoni: qui le tre porte non ci stanno distese, vanno su una riga sola.
   Vincolo anche sulla larghezza, altrimenti un desktop basso (1280x800)
   perderebbe le descrizioni pur avendo tutto lo spazio orizzontale. */
@media (max-height: 950px) and (max-width: 700px) {
  .porte { gap: .5rem; }
  .porta {
    /* Centrato, non sulla linea di base: qui dentro c'è una parola sola, e
       la base di un elemento solo vale quanto il bordo di sopra — il titolo
       restava in alto. Safari poi quel conto lo fa a modo suo. */
    display: flex; justify-content: center; align-items: center; gap: .6rem;
    padding: .8rem 1rem;
  }
  .porta .desc { display: none; }
  /* Sul telefono il disegno vuole una colonna stretta — 207 su 390 — con
     le carte basse e il titolo in mezzo. La sagoma è quella del file di
     Illustrator: carta e gobba in un pezzo solo, quindi la carta tiene le
     proporzioni del disegno e l'svg la riempie esatta. */
  /* 207 su 390: la colonna si misura sulla videata, non sul contenitore,
     che ha già i suoi margini. */
  /* Tutto si misura sulla colonna, non sul corpo del testo: le gobbe
     crescono con le carte, quindi deve farlo anche la distanza, altrimenti
     su un telefono più largo il mazzetto finisce sulla carta di sotto. Le
     frazioni vengono dal disegno, dove la colonna è 207.
       · 20/207   la distanza fra un rettangolo e l'altro, uguale per tutti:
         a spaziare sono i rettangoli, non i disegni che ne escono. Nel
         disegno sono 29, stretti stanno meglio
       · 23,2/207 quanto scende l'ultima gobba, che altrimenti il conto
         dell'altezza non vedrebbe e finirebbe sotto al piede */
  .porte {
    /* Solo vw: una percentuale qui dentro vorrebbe dire due cose diverse,
       la larghezza del contenitore in `width` e l'altezza della griglia in
       `gap`, e le distanze uscivano più strette del dovuto. */
    --colonna: 53.1vw;
    width: min(var(--colonna), 100%); margin-inline: auto;
    gap: calc(.0966 * var(--colonna));
    padding-bottom: calc(.1121 * var(--colonna));
  }
  .porta {
    aspect-ratio: 207 / 49.6; padding: 0;
    border-color: transparent; background: none;
  }
  /* Il bordo resta trasparente anche sotto al dito: la carta qui è la
     sagoma, e un rettangolo che le spunta accanto non c'entra niente.
     Solo il bordo: tutto il resto deve restare com'è a riposo. */
  .porta:hover, .porta:focus-visible, .porta:active {
    border-color: transparent; background: none;
  }
  .porta:focus-visible .sagoma-tel .sagoma-tratto { stroke: var(--salvia); }
  .porta .sagoma { display: none; }
  .porta .sagoma-tel {
    display: block; position: absolute; inset: 0;
    width: 100%; height: 100%; overflow: visible; pointer-events: none;
  }
  .porta strong { position: relative; }
  /* Ritmo verticale del disegno telefono: fra marchio e data il riferimento
     stringe, e le etichette del countdown sono più minute. */
  .data-gruppo { margin-top: calc(4.69 * var(--g)); }
  .countdown .u { font-size: clamp(5.5px, .59 * var(--g), 9.9px); }
  /* Nel disegno telefono il blocco sta sopra la metà, non sotto come sul
     grande: l'aria sta quasi tutta di sotto. */
  body.schermata > main > .centrato { padding-block: .2rem 1.1rem; }
  /* Sul telefono gli occhielli e l'IBAN sono più minuti che sul grande:
     misurati sul disegno, 0,8 e 0,9 di quanto sono adesso. */
  .occhiello { font-size: .59rem; }
  .iban { font-size: clamp(.92rem, 2.87vw, 1.17rem); }
  /* Le due tappe sul telefono: nel disegno sono larghe 335 su 390 e si
     tengono 6,5 di stacco dal filo della strada, invece dei 11 di prima.
     Il resto lo riempie la «30 min», che sta in mezzo. */
  .tappe {
    /* Oltre i 430 la colonna si ferma: le carte non crescono più in
       altezza, perché il testo smette di andare a capo, mentre i disegni
       continuerebbero e l'ultimo uscirebbe dal fondo. */
    width: min(85.9vw, 100%); max-width: 369px; margin-inline: auto;
    gap: 1.654vw;
  }
  .sagoma-giorno { display: block; }
  .porta::before { content: none; }
}

/* Telefoni molto corti (360x640 e simili): ultimo giro di vite. */
@media (max-height: 680px) {
  :root { --scala: .26; --t: 10.2px; }
  body.schermata > main > * { padding-block: .55rem; }
  body.schermata > main > .centrato { padding-block: .65rem .35rem; }

  /* Anche qui lo spazio sopra non può scendere sotto all'ingombro dei fiori. */
  .porta { padding: max(.65rem, var(--aria-fiori, 0px)) 1rem .65rem; }
  /* Videate bassissime: il cappello della scheda si fa da parte per
     lasciare le righe al contenuto. */
  .sezione-titolo { margin-bottom: .8rem; }
  .sezione-titolo p { font-size: .82rem; }
}

/* Schermi stretti: invece di tirare dentro il mazzetto — che romperebbe
   l'offset dal profilo — restringo un filo la scheda, così la sporgenza
   ci sta senza essere tagliata. */
@media (max-width: 700px) {
  .form-box.con-mazzo { width: calc(100% - 1.4rem); }
}

/* Videate molto basse: il gruppo scende sotto alla rampa generale, tutto
   insieme, per far stare la home in una schermata. */
@media (max-height: 620px) { :root { --g: 7.9px; } }

/* Telefoni bassi: le carte restano della misura del disegno — rimpicciolirle
   le rende francobolli — e l'altezza si recupera dal marchio e dall'aria
   sopra alla data, che sono i pezzi che se lo possono permettere. Guarda
   anche la larghezza: una finestra desktop bassa ha tutto lo spazio che le
   serve e il marchio non deve rimpicciolirsi. */
@media (max-height: 680px) and (max-width: 700px) {
  .logo { height: clamp(50px, 6.8 * var(--g), 190.8px); }
  .data-gruppo { margin-top: calc(2.9 * var(--g)); }
}