/* stile.css — Massimo Ceragioli Coiffure. Misure, colori, famiglie, durate e curve da sistema.css.
   Al computer (da 1100 px) ogni sezione è la sua fascia della comp: gli elementi stanno alle coordinate della comp
   (--x, --y, --w, --h in px della comp) e --px scala tutto con la larghezza. Al telefono si va a flusso. */

html { background: var(--colore-piano); color: var(--colore-inchiostro); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--famiglia-testo); font-weight: var(--peso-testo); font-size: var(--testo-corpo); line-height: var(--interlinea-testo); overflow-x: clip; }
img, picture, video, svg { display: block; max-width: 100%; }
h1, h2, h3 { overflow-wrap: break-word; }   /* col testo al 200% una parola lunga dei titoli al telefono va a capo invece di allargare la pagina */
img { height: auto; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: var(--linea); }
::selection { background: var(--colore-oro); color: var(--colore-su-blu); }
:focus-visible { outline: 2px solid var(--colore-fuoco); outline-offset: 3px; }
.unito { white-space: nowrap; }
.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.salta { position: absolute; left: var(--spazio-2); top: calc(-1 * var(--spazio-8)); z-index: 30; padding: var(--spazio-1) var(--spazio-2); min-height: var(--altezza-tocco); box-sizing: border-box; display: flex; align-items: center;
         background: var(--colore-blu); color: var(--colore-su-blu); font-family: var(--famiglia-etichette); font-size: var(--testo-piccolo); }
.salta:focus { top: var(--spazio-2); }

/* ---------- testata ---------- */
.testata { font-family: var(--famiglia-etichette); font-weight: var(--peso-etichette); text-transform: uppercase; letter-spacing: var(--spaziatura-etichetta); }
.testata a { text-decoration: none; }
.testata-info, .menu { margin: 0; }

/* ---------- prima schermata ---------- */
.apertura .porta, .apertura .pannello { position: absolute; }
.porta img { width: 100%; height: 100%; }
.porta.sx { transform-origin: 100% 36%; }          /* la cerniera è il lato attaccato al pannello, all'altezza del suo centro (y 502 della comp) */
.porta.dx { transform-origin: 0 36%; }
@media (prefers-reduced-motion: no-preference) {
  /* Kim, 29/09 (STOP 3): «deve chiudersi a libro aperto quasi a 180 gradi e l'effetto di chiudersi deve frenare per poi fermarsi
     all'angolazione che c'è ora». Nella comp le porte sono girate di ~27° verso chi guarda; qui partono girate indietro di 25°
     (quasi in piano col pannello) e un po' più larghe, e si chiudono frenando fino alla comp (trasformazione nulla alla fine). */
  .porta { animation: libro-sx var(--moto-scena) var(--curva-scena) 250ms both; }
  .porta.dx { animation-name: libro-dx; }
  @keyframes libro-sx { from { transform: perspective(calc(720 * var(--px))) rotateY(-25deg) scaleX(1.2); } to { transform: perspective(calc(720 * var(--px))) rotateY(0deg) scaleX(1); } }
  @keyframes libro-dx { from { transform: perspective(calc(720 * var(--px))) rotateY(25deg) scaleX(1.2); } to { transform: perspective(calc(720 * var(--px))) rotateY(0deg) scaleX(1); } }
}
.pannello { background: var(--colore-blu); }
.finestra { position: absolute; inset: 0; overflow: hidden; }       /* taglia la foto che cresce piano; «Ferma» può stare fuori dal pannello */
.gesto { position: absolute; inset: 0; }
.gesto img { width: 100%; height: 100%; object-fit: cover; }
.gesto:not(.su) { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  /* il gesto nuovo entra da 1,06 a 1; quello in vista cresce piano (The Shave) */
  .gesto { transform: scale(1.06); transition: opacity var(--moto-entrata) var(--curva-risposta), transform var(--moto-entrata) var(--curva-risposta); }
  .gesto.su { transform: none; }
  .gesto.su.lento { transform: scale(1.05); transition: opacity var(--moto-entrata) var(--curva-risposta), transform var(--moto-passo) linear; }
}
@media (prefers-reduced-motion: reduce) { .gesto { transition: opacity var(--moto-stato) var(--curva-risposta); } }   /* con «Riprendi» i gesti si scambiano in dissolvenza, senza zoom */
.barra { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 3px; background: var(--colore-cornice); transform: scaleX(0); transform-origin: 0 50%; }
.ferma { position: absolute; right: var(--spazio-1); bottom: var(--spazio-2); min-height: 32px; padding: 0 var(--spazio-2); border: var(--linea) solid var(--colore-cornice);
         background: var(--colore-blu); color: var(--colore-su-blu); font-family: var(--famiglia-etichette); font-size: var(--testo-etichetta); letter-spacing: var(--spaziatura-etichetta); cursor: pointer; opacity: 0.86; }
.ferma[hidden] { display: none; }
.bottone { display: flex; align-items: center; justify-content: center; text-decoration: none; font-family: var(--famiglia-titoli); letter-spacing: 0.02em; white-space: nowrap; }
.voto { margin: 0; }
.voto-numero { font-family: var(--famiglia-titoli); line-height: 1; }
.voto-stelle { color: var(--colore-stelle); }

/* ---------- titoli di sezione ---------- */
.titolo-sezione { margin: 0; font-family: var(--famiglia-titoli); font-weight: var(--peso-titoli); text-transform: uppercase; letter-spacing: var(--spaziatura-sezione);
                  color: var(--colore-oro); text-wrap: balance; }

/* ---------- i lavori: la striscia (provino bozze/movimento/striscia.html, scelto da Kim) ---------- */
.striscia { perspective: calc(1100 * var(--px)); touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; --ox: 0px; --oy: 0px; }
.striscia.presa { cursor: grabbing; }
.striscia:focus-visible { outline-offset: -4px; }
.lavoro { position: absolute; left: 0; top: calc(var(--oy) + 293 * var(--px)); width: calc(370 * var(--px)); height: calc(686 * var(--px)); margin: 0; will-change: transform; }
/* il riflesso sul piano: un'immagine già capovolta e sfumata (strumenti/riflessi-striscia.js), dentro il pannello, così gira con lui.
   Prima era un riflesso CSS (box-reflect), che sui pannelli in 3D Chrome ridisegnava a ogni fotogramma: la pagina scorreva a 10-12 fps (30/09) */
.lavoro .riflesso { left: 0; top: calc(100% + 4 * var(--px)); width: 100%; height: auto; object-fit: fill; }
.lavoro .foto { position: absolute; inset: 0; overflow: hidden; background: var(--colore-blu); box-shadow: var(--ombra-stampa); }
.lavoro img { position: absolute; left: -4%; top: 0; width: 108%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
.lavoro .foto::after { content: ""; position: absolute; inset: 0; border: max(2px, calc(4 * var(--px))) solid var(--colore-cornice); }   /* la cornice d'oro della comp, 4 px a 1440 */
.nome-lavoro { position: absolute; margin: 0; left: calc(75 * var(--px)); top: calc(var(--oy) + 1000 * var(--px)); width: calc(220 * var(--px)); text-align: center; pointer-events: none;
               font-family: var(--famiglia-titoli); font-weight: var(--peso-bottone); text-transform: uppercase; letter-spacing: var(--spaziatura-nome); color: var(--colore-oro-scuro); }
.frecce { display: flex; gap: var(--spazio-2); }
.frecce button { display: grid; place-items: center; width: var(--altezza-tocco); height: var(--altezza-tocco); padding: 0; border: var(--linea) solid var(--colore-cornice);
                 background: var(--colore-scheda); color: var(--colore-oro-scuro); cursor: pointer;
                 transition: transform var(--moto-risposta) var(--curva-risposta), background-color var(--moto-risposta) var(--curva-risposta); }
.frecce button:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .frecce button:hover { background: var(--colore-su-blu); } }

/* ---------- i servizi: la sala e la scheda a linguette (provino bozze/movimento/servizi.html) ---------- */
.sala { overflow: hidden; }
.sala img { width: 100%; height: 100%; object-fit: cover; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* la sala entra un po' più grande e più in basso, e si posa sulla comp quando la sezione è a metà schermo */
    .sala img { animation: sala linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    @keyframes sala { from { transform: translateY(4%) scale(1.06); } to { transform: none; } }
  }
}
.linguette { position: relative; }
.linguette button { border: 0; background: none; color: var(--colore-inchiostro); font-family: var(--famiglia-titoli); letter-spacing: 0.02em; white-space: nowrap; cursor: pointer; }
.linguette button[aria-selected="true"] { color: var(--colore-oro-scuro); }
.linguette button:focus-visible { outline-offset: -2px; }
.linea { position: absolute; left: 0; width: 100px; height: 3px; background: var(--colore-oro); transform-origin: 0 50%; transition: transform var(--moto-stato) var(--curva-risposta); }
.scheda-testo { transition: opacity var(--moto-risposta) var(--curva-risposta), transform var(--moto-risposta) var(--curva-risposta); }
.scheda-testo.via { opacity: 0; transform: translateY(6px); }
.scheda-titolo { margin: 0; font-family: var(--famiglia-titoli); font-weight: var(--peso-titoli); font-variant-caps: small-caps; letter-spacing: var(--spaziatura-scheda); color: var(--colore-oro); }
.scheda-frase { margin: 0; font-style: italic; }
.scheda-nota { margin: 0; }
.scheda-chiama { display: flex; align-items: center; justify-content: center; font-family: var(--famiglia-titoli); font-weight: var(--peso-bottone); color: var(--colore-su-blu); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .linea, .scheda-testo { transition: opacity var(--moto-stato) var(--curva-risposta); } .scheda-testo.via { transform: none; } }

/* ---------- l'aloe di Mirko: due stampe che salgono a velocità diverse (provino bozze/movimento/pagina.html) ---------- */
.aloe-testo { margin: 0; font-style: italic; }
.aloe-nota { margin: 0; color: var(--colore-oro-scuro); }
.aloe-nota::before { content: ""; display: block; height: 2px; background: var(--colore-oro); }   /* il secondo filetto della comp */
.stampa img { width: 100%; height: 100%; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .aloe .stampa { animation: sale linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    .aloe .stampa.dietro { --da: calc(36 * var(--px)); }
    .aloe .stampa.davanti { --da: calc(110 * var(--px)); }
    @keyframes sale { from { transform: translateY(var(--da)); } to { transform: none; } }
  }
}

/* ---------- la famiglia: tre tessere che entrano e poi girano piano sull'asse (Kim, 29/09) ---------- */
.famiglia-testo, .famiglia-corsivo { margin: 0; text-align: center; }
.famiglia-corsivo { font-style: italic; }
.tessera { margin: 0; transform-origin: 50% 50%; will-change: transform; }
.tessera img { width: 100%; height: 100%; }
.tessera figcaption { position: absolute; left: 0; right: 0; text-align: center; font-family: var(--famiglia-titoli); text-transform: uppercase;
                      letter-spacing: var(--spaziatura-tessera); color: var(--colore-oro); pointer-events: none; }
.ferma-giro { min-height: var(--altezza-tocco); padding: 0 var(--spazio-2); border: var(--linea) solid var(--colore-cornice); background: var(--colore-scheda);
              color: var(--colore-inchiostro); font-family: var(--famiglia-etichette); font-size: var(--testo-etichetta); letter-spacing: var(--spaziatura-etichetta); cursor: pointer; }
/* entrata: una volta sola, in fila; solo se il JavaScript c'è (senza, le tessere sono già al loro posto) */
.js .entra .tessera { transition: translate var(--moto-entrata) var(--curva-scena), opacity var(--moto-entrata) var(--curva-risposta); transition-delay: calc(var(--i) * 90ms); }
.js .entra:not(.dentro) .tessera { opacity: 0; translate: 0 14px; }
@media (prefers-reduced-motion: no-preference) {
  /* Kim: «fai finta che hanno un asse nel mezzo e si gira di pochi gradi su se stesso», poi «meno gradi e piu lento e piu coordinato»:
     ±5°, 12 s, a onda (0,7 s dall'una all'altra); a inizio giro è la comp. Si ferma fuori schermo e col bottone. */
  .famiglia.dentro .tessera { animation: ondeggia var(--moto-giro) var(--curva-giro) calc(var(--i) * 0.7s + 0.9s) infinite; }
  .famiglia.fermo .tessera, .famiglia.fuori .tessera { animation-play-state: paused; }
  @keyframes ondeggia { 0%, 100% { rotate: y 0deg; } 25% { rotate: y 5deg; } 75% { rotate: y -5deg; } }
}
@media (prefers-reduced-motion: reduce) {
  .js .entra .tessera { transition: opacity var(--moto-stato) var(--curva-risposta); transition-delay: 0ms; }
  .js .entra:not(.dentro) .tessera { translate: none; }
  .ferma-giro { display: none; }
}

/* ---------- le informazioni: il collage che si posa (provino bozze/movimento/pagina.html) ---------- */
.riquadro { text-align: center; }
.riquadro h3 { margin: 0; font-family: var(--famiglia-titoli); font-weight: var(--peso-titoli); color: var(--colore-inchiostro); }
.riquadro p { margin: 0; font-family: var(--famiglia-etichette); font-weight: var(--peso-riquadro); }
.riquadro a { font-family: var(--famiglia-etichette); font-weight: var(--peso-riquadro); color: var(--colore-inchiostro); }
.finestra-tel { display: none; }
.js .posa .pezzo { transition: translate var(--moto-entrata) var(--curva-scena), scale var(--moto-entrata) var(--curva-scena), opacity var(--moto-entrata) var(--curva-risposta);
                   transition-delay: calc(var(--i) * 90ms); }
.js .posa .pezzo.piccolo { transition-delay: calc(360ms + var(--i) * 70ms); }
.js .posa:not(.dentro) .pezzo { opacity: 0; translate: 0 -16px; scale: 1.015; }
@media (prefers-reduced-motion: reduce) {
  .js .posa .pezzo { transition: opacity var(--moto-stato) var(--curva-risposta); transition-delay: 0ms; }
  .js .posa:not(.dentro) .pezzo { translate: none; scale: none; }
}

/* ---------- le recensioni: il voto e tre targhe che entrano in fila ---------- */
.rec-voto, .rec-nota { margin: 0; }
.rec-numero { font-family: var(--famiglia-titoli); line-height: 1; color: var(--colore-oro); }
.rec-stelle { color: var(--colore-stelle); }
.rec-nota { font-family: var(--famiglia-etichette); font-weight: var(--peso-etichette); }
.targa { margin: 0; }
.targa blockquote { margin: 0; }
.targa blockquote p, .targa figcaption { margin: 0; text-align: center; font-family: var(--famiglia-etichette); font-weight: var(--peso-etichette); color: var(--colore-inchiostro); }
.js .entra .targa { transition: translate var(--moto-entrata) var(--curva-scena), opacity var(--moto-entrata) var(--curva-risposta); transition-delay: calc(var(--i) * 90ms); }
.js .entra:not(.dentro) .targa { opacity: 0; translate: 0 14px; }
@media (prefers-reduced-motion: reduce) {
  .js .entra .targa { transition: opacity var(--moto-stato) var(--curva-risposta); transition-delay: 0ms; }
  .js .entra:not(.dentro) .targa { translate: none; }
}

/* ---------- la chiusura e il piè di pagina ---------- */
.chiusura-chiama { display: flex; align-items: center; justify-content: center; font-family: var(--famiglia-titoli); text-transform: uppercase;
                   letter-spacing: var(--spaziatura-bottone-grande); color: var(--colore-su-blu); text-decoration: none; }
.chiusura-link { margin: 0; padding: 0; list-style: none; font-family: var(--famiglia-etichette); font-weight: var(--peso-etichette); }
.chiusura-link a { color: var(--colore-inchiostro); }
.facciata img { width: 100%; height: 100%; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* la stampa della facciata si raddrizza come una porta che si chiude, e finisce sulla comp a metà schermo */
    .facciata { transform-origin: 0 50%; animation: porta linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; }
    @keyframes porta { from { transform: perspective(calc(1400 * var(--px))) rotateY(-24deg); } to { transform: perspective(calc(1400 * var(--px))) rotateY(0deg); } }
  }
}
.piede-dati, .piede-lingua { margin: 0; font-family: var(--famiglia-etichette); font-weight: var(--peso-etichette); }
.piede a { color: inherit; }

/* ---------- barra fissa «Chiama» (telefono) ---------- */
.barra-chiama { display: none; }

/* ================= computer: la comp ================= */
@media (min-width: 1100px) {
  .solo-telefono { display: none !important; }
  .testata { position: absolute; top: 0; left: 0; right: 0; margin-inline: auto; width: min(100%, var(--larghezza-pagina)); aspect-ratio: 1440 / 68; z-index: 5; container-type: inline-size; }
  .menu a { position: absolute; top: calc(24 * var(--px)); left: calc(var(--x) * var(--px)); font-size: calc(var(--comp-etichetta) * var(--px)); line-height: calc(30 * var(--px)); }
  /* a riga, con gli spazi della comp (50 px): se «aperto oggi» diventa «riapre domani alle 9» l'indirizzo si sposta, non ci finisce sotto */
  .testata-info { position: absolute; top: calc(24 * var(--px)); left: calc(46 * var(--px)); display: flex; column-gap: calc(50 * var(--px)); white-space: nowrap;
                  font-size: calc(var(--comp-etichetta) * var(--px)); line-height: calc(30 * var(--px)); }
  .testata-menu { display: none; }
  .menu a:hover, .testata-info a:hover { text-decoration: underline; }

  .fascia { position: relative; width: min(100%, var(--larghezza-pagina)); margin-inline: auto; aspect-ratio: 1440 / var(--H); container-type: inline-size; overflow-x: clip; }
  .fascia .palco { position: absolute; inset: 0; }
  .fondo img { position: absolute; inset: 0 0 auto; width: 100%; height: auto; }   /* il fondo è alto quanto il suo ritaglio (1024 nella prima schermata): sotto la fascia lo copre la sezione dopo */
  .nome-telefono { display: none; }
  .trittico { position: absolute; inset: 0; }
  .porta, .pannello, .bottone { position: absolute; left: calc(var(--x) * var(--px)); top: calc(var(--y) * var(--px)); width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px)); }
  /* i bottoni della comp sono disegnati nel fondo: qui c'è il testo vero sopra */
  /* spaziature e alzate misurate sull'inchiostro della comp (29/09, sessione 11): «Chiama» 207 px, «4,7» 58 px, «92 recensioni» 233 px */
  .bottone { box-sizing: border-box; font-size: calc(var(--comp-bottone) * var(--px)); color: var(--colore-inchiostro); padding-bottom: calc(9 * var(--px)); }
  .bottone.pieno { color: var(--colore-su-blu); font-weight: var(--peso-testo); letter-spacing: 0.045em; }
  .bottone:hover { text-decoration: underline; }
  .voto { position: absolute; inset: 0; pointer-events: none; }
  .voto-numero { position: absolute; left: calc(535 * var(--px)); top: calc(829 * var(--px)); font-size: calc(var(--comp-voto) * var(--px)); letter-spacing: 0.12em; }
  .voto-stelle { display: none; }          /* le stelle sono nel fondo */
  .voto-nota { position: absolute; left: calc(722 * var(--px)); translate: -50% 0; white-space: nowrap; top: calc(884 * var(--px)); font-size: calc(var(--comp-nota-voto) * var(--px)); line-height: 1.4; letter-spacing: 0.055em; }

  /* titolo e nomi misurati sull'inchiostro della comp (29/09): lettere alte 35 px, righe larghe 698 e 740 px → spaziatura quasi nulla qui;
     nella comp il titolo è centrato a x 752, non a 720 */
  .lavori .titolo-sezione { position: absolute; left: calc(64 * var(--px)); right: 0; top: calc(73 * var(--px)); text-align: center; font-size: calc(var(--comp-sezione) * var(--px)); line-height: calc(66 * var(--px)); letter-spacing: 0.02em; }
  .striscia { position: absolute; inset: 0; overflow: clip; }      /* gli estremi escono dalla pagina: nella comp sono tagliati dal bordo */
  .nome-lavoro { font-size: calc(var(--comp-nome) * var(--px)); line-height: calc(30 * var(--px)); font-weight: var(--peso-titoli); letter-spacing: 0.01em; translate: 0 calc(-8 * var(--px)); }
  .lavori .frecce { position: absolute; left: 50%; top: calc(1060 * var(--px)); translate: -50% 0; gap: calc(14 * var(--px)); }

  .sala { position: absolute; left: calc(74 * var(--px)); top: calc(107 * var(--px)); width: calc(1330 * var(--px)); height: calc(698 * var(--px)); }
  .scheda { position: absolute; left: calc(150 * var(--px)); top: calc(628 * var(--px)); width: calc(1172 * var(--px)); height: calc(278 * var(--px)); border-radius: var(--raggio-scheda); overflow: hidden;
            background: image-set(url("media/foto/servizi-scheda-1178.avif") type("image/avif"), url("media/foto/servizi-scheda-1178.webp") type("image/webp"))
                        calc(-2 * var(--px)) 0 / calc(1178 * var(--px)) calc(280 * var(--px)) no-repeat; }
  .linguette { position: absolute; left: 0; top: calc(18 * var(--px)); width: 100%; height: calc(44 * var(--px)); --sporgenza: calc(18 * var(--px)); }
  .linguette button { position: absolute; top: 0; left: calc(var(--x) * var(--px)); height: calc(44 * var(--px)); translate: -50% 0; padding: 0 calc(12 * var(--px));
                      font-size: calc(var(--comp-linguetta) * var(--px)); line-height: calc(44 * var(--px)); }
  .linea { top: calc(39 * var(--px)); }
  .scheda-titolo { position: absolute; left: calc(64 * var(--px)); top: calc(70 * var(--px)); font-size: calc(var(--comp-scheda) * var(--px)); line-height: calc(60 * var(--px)); }
  .scheda-frase { position: absolute; left: calc(64 * var(--px)); top: calc(132 * var(--px)); width: calc(700 * var(--px)); font-size: calc(var(--comp-frase) * var(--px)); line-height: calc(35 * var(--px)); }
  .scheda-nota { position: absolute; left: calc(64 * var(--px)); top: calc(216 * var(--px)); font-size: calc(var(--comp-nota) * var(--px)); line-height: calc(30 * var(--px)); }
  .scheda-chiama { position: absolute; left: calc(857 * var(--px)); top: calc(183 * var(--px)); width: calc(245 * var(--px)); height: calc(50 * var(--px)); font-size: calc(var(--comp-bottone-scheda) * var(--px)); }
  .scheda-chiama:hover { text-decoration: underline; }

  /* l'aloe: righe misurate sull'inchiostro della comp (29/09): maiuscole alte 35 px a y 196, 260, 324; corsivo a passo 40 da y 441 */
  .stampa { position: absolute; left: calc(var(--x) * var(--px)); top: calc(var(--y) * var(--px)); width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px)); }
  .titolo-aloe { position: absolute; left: calc(345 * var(--px)); top: calc(170 * var(--px)); font-size: calc(var(--comp-sezione) * var(--px)); line-height: calc(64 * var(--px)); letter-spacing: 0.075em; text-wrap: nowrap; }
  .aloe-testo { position: absolute; left: calc(345 * var(--px)); top: calc(427 * var(--px)); width: calc(380 * var(--px)); font-size: calc(var(--comp-aloe) * var(--px)); line-height: calc(40 * var(--px)); letter-spacing: -0.015em; white-space: nowrap; }
  .aloe-nota { position: absolute; left: calc(345 * var(--px)); top: calc(698 * var(--px)); font-size: calc(var(--comp-nota-aloe) * var(--px)); line-height: calc(40 * var(--px)); letter-spacing: 0.02em; }
  .aloe-nota::before { width: calc(102 * var(--px)); margin-bottom: calc(14 * var(--px)); }

  /* la famiglia: righe misurate sulla comp (29/09): titolo a y 100 (maiuscole 31 px, largo 1050), testo a passo 35 e corsivo a passo 38, centrati a x 726 */
  .famiglia .palco { perspective: calc(1600 * var(--px)); }
  .famiglia-parole { position: absolute; left: calc(12 * var(--px)); right: 0; top: calc(75 * var(--px)); }
  .titolo-famiglia { text-align: center; font-size: calc(var(--comp-sezione-lunga) * var(--px)); line-height: calc(60 * var(--px)); letter-spacing: 0.078em; white-space: nowrap; padding-left: calc(30 * var(--px)); }   /* nella comp è centrato a x 741 */
  .famiglia-testo { margin-top: calc(14 * var(--px)); font-size: calc(var(--comp-famiglia) * var(--px)); line-height: calc(35 * var(--px)); letter-spacing: 0.01em; }
  .famiglia-corsivo { font-size: calc(var(--comp-famiglia-corsivo) * var(--px)); line-height: calc(38 * var(--px)); }
  .tessera { position: absolute; left: calc(var(--x) * var(--px)); top: calc(var(--y) * var(--px)); width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px)); }
  .tessera figcaption { top: calc(var(--ly) * var(--px)); font-size: calc(var(--comp-tessera) * var(--px)); line-height: calc(46 * var(--px)); letter-spacing: 0.04em; }
  .ferma-giro { position: absolute; right: calc(36 * var(--px)); bottom: calc(28 * var(--px)); }

  /* le informazioni: ogni testo dentro il suo pezzo, centrato a --cx, con le maiuscole dal rigo --cy (px del pezzo, misurati sulla comp) */
  .pezzo { position: absolute; left: calc(var(--x) * var(--px)); top: calc(var(--y) * var(--px)); width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px)); }
  .pezzo img { width: 100%; height: 100%; }
  .riquadro { position: absolute; left: calc((var(--cx) - 150) * var(--px)); top: calc(var(--cy) * var(--px)); width: calc(300 * var(--px)); }
  .riquadro h3 { font-size: calc(var(--comp-riquadro) * var(--px)); line-height: calc(31 * var(--px)); }
  .riquadro p { margin-top: calc(var(--pm, 10) * var(--px)); font-size: calc(var(--comp-riquadro-testo) * var(--px)); line-height: calc(21 * var(--px)); }
  .riquadro.dove h3 { font-size: calc(28 * var(--px)); }
  .riquadro.dove p, .riquadro.dove a { display: block; font-size: calc(var(--comp-dove) * var(--px)); line-height: calc(24 * var(--px)); }
  .riquadro.dove p { margin-top: calc(14 * var(--px)); }
  .riquadro.dove a { margin-top: calc(24 * var(--px)); text-decoration: none; }
  .riquadro.dove a:hover { text-decoration: underline; }

  /* le recensioni: voto e nota misurati sulla comp (29/09); il testo di ogni targa centrato a --cx dal rigo --cy, la firma a --ny (px della targa) */
  .rec-numero { position: absolute; left: calc(499 * var(--px)); top: calc(69 * var(--px)); font-size: calc(var(--comp-voto-grande) * var(--px)); letter-spacing: 0.04em; }
  .rec-stelle { display: none; }                       /* al computer sono nel fondo */
  .rec-nota { position: absolute; left: calc(723 * var(--px)); translate: -50% 0; top: calc(186 * var(--px)); white-space: nowrap; font-size: calc(var(--comp-nota-recensioni) * var(--px)); line-height: calc(30 * var(--px)); letter-spacing: 0.02em; }
  .targa { position: absolute; left: calc(var(--x) * var(--px)); top: calc(var(--y) * var(--px)); width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px)); }
  .targa img { width: 100%; height: 100%; }
  .targa blockquote { position: absolute; left: calc((var(--cx) - 180) * var(--px)); top: calc(var(--cy) * var(--px)); width: calc(360 * var(--px)); }
  .targa blockquote p { font-size: calc(var(--fs, var(--comp-recensione)) * var(--px)); line-height: calc(32.5 * var(--px)); white-space: nowrap; }
  .targa figcaption { position: absolute; left: calc((var(--cx) - 180) * var(--px)); top: calc(var(--ny) * var(--px)); width: calc(360 * var(--px)); font-size: calc(var(--comp-firma) * var(--px)); line-height: calc(30 * var(--px)); }

  /* la chiusura: titolo a y 254 (maiuscole 36 px, passo 67), bottone disegnato nel fondo a 103, 477 (419 × 87), link a passo 51 da y 606 */
  .titolo-chiusura { position: absolute; left: calc(103 * var(--px)); top: calc(226 * var(--px)); font-size: calc(var(--comp-sezione) * var(--px)); line-height: calc(67 * var(--px)); letter-spacing: 0.06em; white-space: nowrap; }
  .chiusura-chiama { position: absolute; left: calc(103 * var(--px)); top: calc(477 * var(--px)); width: calc(419 * var(--px)); height: calc(87 * var(--px)); font-size: calc(var(--comp-bottone-chiusura) * var(--px)); }
  .chiusura-chiama:hover { text-decoration: underline; }
  .chiusura-link { position: absolute; left: calc(101 * var(--px)); top: calc(585 * var(--px)); font-size: calc(var(--comp-link) * var(--px)); line-height: calc(51 * var(--px)); }
  .facciata { position: absolute; left: calc(var(--x) * var(--px)); top: calc(var(--y) * var(--px)); width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px)); }
  .piede-fondo img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .piede-dati { position: absolute; left: calc(705 * var(--px)); translate: -50% 0; top: calc(80 * var(--px)); white-space: nowrap; font-size: calc(var(--comp-piede) * var(--px)); line-height: calc(26 * var(--px)); }
  .piede-lingua { position: absolute; left: calc(1288 * var(--px)); top: calc(74 * var(--px)); font-size: calc(20 * var(--px)); line-height: calc(26 * var(--px)); letter-spacing: var(--spaziatura-etichetta); }
  .piede a { text-decoration: none; }
  .piede a:hover { text-decoration: underline; }
}

/* ================= telefono e tablet: a flusso ================= */
@media (max-width: 1099.98px) {
  /* le sezioni sotto la prima schermata si impaginano solo quando si avvicinano: il primo calcolo costava 381 ms a CPU ×4 (30/09) */
  .fascia:not(.apertura) { content-visibility: auto; contain-intrinsic-size: auto 900px; }
  .solo-computer { display: none !important; }
  .testata { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: var(--spazio-2);
             min-height: var(--altezza-tocco); padding: 0 var(--margine-pagina); font-size: var(--testo-etichetta); border-bottom: var(--linea) solid var(--colore-filetto); }
  .testata-menu { display: inline-flex; align-items: center; gap: var(--spazio-1); min-height: var(--altezza-tocco); padding: 0; border: 0; background: none; color: inherit;
                  font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
  .menu { position: absolute; top: 100%; left: 0; right: 0; display: grid; padding: var(--spazio-1) var(--margine-pagina) var(--spazio-3); background: var(--colore-piano);
          border-bottom: var(--linea) solid var(--colore-filetto); box-shadow: var(--ombra-scheda); }
  .menu[hidden] { display: none; }
  .menu a { display: flex; align-items: center; min-height: var(--altezza-tocco); font-size: var(--testo-piccolo); border-bottom: var(--linea) solid var(--colore-filetto); }
  .menu a:last-child { border-bottom: 0; }

  .apertura { background: var(--colore-parete); }
  .apertura .voto { background: var(--colore-pavimento); }
  .fondo { display: none; }
  /* il ritaglio del nome prende in basso a destra l'angolo della porta destra: al telefono lo si taglia via */
  .nome-telefono { display: block; width: min(92%, 34rem); margin: var(--spazio-4) auto var(--spazio-3); clip-path: polygon(0 0, 100% 0, 100% 84%, 91% 100%, 0 100%); }
  /* il trittico della comp intero nella larghezza, da x 36 a x 1404 (Kim, 29/09: «b», dalla tavola bozze/telefono/tavola-telefono.jpg).
     Dietro c'è lo stesso fondo del computer alla stessa scala, così i ritagli delle porte (col loro riflesso) combaciano. */
  .apertura .palco { container-type: inline-size; }
  .trittico { position: relative; --px: calc(100cqw / 1368); height: calc(778 * var(--px)); overflow: hidden;
              /* stessa impronta del precaricamento in index.html (se il fondo cambia, rifarla a mano qui) */
              --fondo: image-set(url("media/foto/apertura-fondo-1440.avif?v=c02ecadd") type("image/avif"), url("media/foto/apertura-fondo-1440.webp?v=1306cdae") type("image/webp"));
              background: linear-gradient(var(--colore-parete), var(--colore-parete)) no-repeat 0 0 / 100% calc(24 * var(--px)),    /* la coda di «COIFFURE» del fondo */
                          var(--colore-pavimento) var(--fondo) no-repeat calc(50cqw - 720 * var(--px)) calc(-222 * var(--px)) / calc(1440 * var(--px)) auto; }
  /* sotto il pannello il fondo ha i bottoni e le stelle disegnati (y 754-876): al telefono li copre il pavimento di più in basso
     (x 380-1060, y 880-1024 della comp) messo a y 740-884, sfumato ai bordi; le porte ci stanno sopra */
  .trittico::before { content: ""; position: absolute; left: calc(50cqw - 340 * var(--px)); top: calc(518 * var(--px)); width: calc(680 * var(--px)); height: calc(144 * var(--px));
                      background: var(--fondo) no-repeat calc(-380 * var(--px)) calc(-880 * var(--px)) / calc(1440 * var(--px)) auto;
                      mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(transparent, #000 8%, #000 96%, transparent);
                      mask-composite: intersect; }
  .trittico::after { content: ""; position: absolute; inset: auto 0 0; height: calc(30 * var(--px)); background: linear-gradient(transparent, var(--colore-pavimento)); }
  .porta, .pannello { left: calc(50cqw + (var(--x) - 720) * var(--px)); top: calc((var(--y) - 222) * var(--px)); width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px)); }
  /* «Ferma» sotto il pannello: nel trittico intero il pannello è troppo piccolo per averlo sopra la foto */
  .ferma { bottom: auto; top: 100%; right: 50%; translate: 50% var(--spazio-1); min-height: var(--altezza-tocco); }
  .azioni { display: flex; flex-direction: column; align-items: center; gap: var(--spazio-2); padding: var(--spazio-2) var(--margine-pagina) 0; background: var(--colore-pavimento); }
  .bottone { min-height: var(--altezza-tocco); padding: 0 var(--spazio-3); font-size: var(--testo-bottone); border: var(--linea) solid var(--colore-cornice);
            max-width: 100%; box-sizing: border-box; white-space: normal; text-align: center; }   /* col testo al 200% va a capo invece di uscire */
  .bottone.pieno { background: var(--colore-blu); color: var(--colore-su-blu); }
  .voto { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: var(--spazio-2); row-gap: var(--spazio-1); padding: var(--spazio-3) var(--margine-pagina) var(--spazio-5); }
  .voto-numero { font-size: var(--testo-voto); }
  .voto-stelle svg { width: 7.5rem; height: auto; }
  .voto-nota { flex-basis: 100%; text-align: center; font-size: var(--testo-corpo); }

  /* i lavori: la stessa scena della comp, col pannello al centro al 62% dello schermo e i vicini che escono dai lati */
  .lavori { padding-top: var(--spazio-sezioni); }
  .lavori .palco { container-type: inline-size; }
  .lavori .titolo-sezione { padding: 0 var(--margine-pagina); text-align: center; font-size: var(--testo-sezione); line-height: var(--interlinea-titoli); }
  .titolo-sezione br { display: none; }        /* l'a capo è quello della comp a 1440: al telefono le righe le equilibra text-wrap */
  .lavori .titolo-sezione::after { content: ""; display: block; width: 5rem; height: var(--linea); margin: var(--spazio-3) auto 0; background: var(--colore-filetto); }
  .striscia { position: relative; --px: calc(100cqw * 0.62 / 370); --ox: calc(50cqw - 715 * var(--px)); --oy: calc(-293 * var(--px) + var(--spazio-2));
              height: calc(707 * var(--px) + var(--spazio-2) + 3.5rem); margin-top: var(--spazio-4); overflow: hidden; }
  .nome-lavoro { font-size: var(--testo-nome); line-height: 1.3; letter-spacing: var(--spaziatura-etichetta); }
  /* al telefono non c'è il pavimento della comp dietro: il riflesso parte forte sotto il pannello e sfuma, senza bordo */
  .lavoro .riflesso { display: none; }   /* al telefono il riflesso non si vedeva (misurato il 30/09) */
  .lavori .frecce { justify-content: center; margin-top: var(--spazio-2); }

  /* i servizi: la sala a tutta larghezza, e sotto la scheda che le sale sopra come nella comp */
  .servizi { padding-top: var(--spazio-sezioni); }
  /* il ritaglio della sala ha in basso (da y 521 su 698) la scheda disegnata della comp: al telefono si mostra solo la sala sopra */
  .sala { position: relative; aspect-ratio: 4 / 3; margin: 0 var(--margine-pagina); border: max(2px, 0.19rem) solid var(--colore-cornice); }
  .sala picture { position: absolute; inset: 0; }
  .sala img { position: absolute; top: 0; left: 50%; width: auto; max-width: none; height: calc(100% * 698 / 521); translate: -50% 0; }
  .scheda { position: relative; margin: calc(-1 * var(--spazio-6)) calc(var(--margine-pagina) + var(--spazio-2)) 0;
            padding: 0 var(--spazio-3) var(--spazio-3); background: var(--colore-scheda); border-radius: var(--raggio-scheda); box-shadow: var(--ombra-scheda); }
  .linguette { display: flex; gap: var(--spazio-1); margin: 0 calc(-1 * var(--spazio-3)); padding: 0 var(--spazio-2); overflow-x: auto; scrollbar-width: none;
               border-bottom: var(--linea) solid var(--colore-filetto); --sporgenza: 0px; }
  .linguette::-webkit-scrollbar { display: none; }
  .linguette button { flex: none; min-height: var(--altezza-tocco); padding: 0 var(--spazio-1); font-size: var(--testo-voce); }
  .linea { bottom: -1px; }
  .scheda-titolo { margin-top: var(--spazio-3); font-size: var(--testo-scheda); line-height: 1.2; }
  .scheda-frase { margin-top: var(--spazio-2); font-size: var(--testo-corpo); line-height: var(--interlinea-testo); }
  .scheda-nota { margin-top: var(--spazio-3); font-size: var(--testo-corpo); }
  .scheda-chiama { margin-top: var(--spazio-2); min-height: var(--altezza-tocco); background: var(--colore-blu); border: var(--linea) solid var(--colore-cornice); font-size: var(--testo-bottone); }

  /* l'aloe: parole sopra, le due stampe affiancate sotto, allineate in basso come nella comp */
  .aloe { padding-top: var(--spazio-sezioni); }
  .aloe-parole { padding: 0 var(--margine-pagina); }
  .titolo-aloe { font-size: var(--testo-sezione); line-height: var(--interlinea-titoli); }
  .titolo-aloe::after { content: ""; display: block; width: 5rem; height: var(--linea); margin: var(--spazio-3) 0; background: var(--colore-filetto); }
  .aloe-testo { font-size: var(--testo-corpo-grande); line-height: var(--interlinea-testo); max-width: 34rem; }
  .aloe-testo br { display: none; }
  .aloe-nota { margin-top: var(--spazio-3); font-size: var(--testo-corpo-grande); }
  .aloe-nota::before { width: 4rem; height: var(--linea); margin-bottom: var(--spazio-2); }
  .aloe-stampe { display: flex; align-items: flex-end; gap: var(--spazio-2); margin-top: var(--spazio-5); padding: 0 var(--margine-pagina); }
  .stampa.dietro { flex: 268; aspect-ratio: 268 / 768; }
  .stampa.davanti { flex: 668; aspect-ratio: 668 / 897; }
  .aloe .stampa { --px: 0.25px; }

  /* la famiglia: parole centrate, poi le tessere che scorrono di lato (55vw: i ritagli non si ingrandiscono oltre la loro risoluzione) */
  .famiglia { padding-top: var(--spazio-sezioni); }
  .famiglia-parole { padding: 0 var(--margine-pagina); }
  .titolo-famiglia { text-align: center; font-size: var(--testo-sezione-lunga); line-height: var(--interlinea-titoli); }
  .famiglia-testo, .famiglia-corsivo { margin-top: var(--spazio-2); font-size: var(--testo-corpo); line-height: var(--interlinea-testo); }
  .famiglia-testo br, .famiglia-corsivo br { display: none; }
  .tessere { display: flex; align-items: flex-start; gap: var(--spazio-3); margin-top: var(--spazio-5); padding: var(--spazio-2) var(--margine-pagina); overflow-x: auto; scroll-snap-type: x mandatory;
             scroll-padding-inline: var(--margine-pagina); scrollbar-width: none; perspective: 60rem; }
  .tessere::-webkit-scrollbar { display: none; }
  .tessera { position: relative; flex: none; width: 55vw; aspect-ratio: var(--w) / var(--h); scroll-snap-align: start; }
  .tessera figcaption { top: calc(var(--lc) * 100%); translate: 0 -50%; font-size: var(--testo-voce); line-height: 1.2; color: var(--colore-oro-scuro); }   /* sotto i 24 px l'oro chiaro non basta (3,8:1) */   /* al centro della fascia chiara (misurata sul ritaglio) */
  .ferma-giro { display: block; margin: var(--spazio-2) auto 0; }
  @media (prefers-reduced-motion: reduce) { .ferma-giro { display: none; } }   /* le tessere sono già ferme */

  /* le informazioni: finestre sulle foto dei pezzi (mai più grandi della loro risoluzione) accanto a riquadri veri, leggibili */
  .informazioni { padding-top: var(--spazio-sezioni); }
  .collage { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--spazio-2); align-items: center; padding: 0 var(--margine-pagina); }   /* col testo grande una colonna sola */
  .collage .pezzo { display: contents; }
  .collage .pezzo > picture { display: none; }
  .finestra-tel { display: block; position: relative; overflow: hidden; width: min(calc(var(--fw) * 0.5px), 42vw); aspect-ratio: var(--fw) / var(--fh);
                  border: var(--linea-cornice) solid var(--colore-cornice); box-shadow: var(--ombra-stampa); justify-self: center; }
  .finestra-tel img { position: absolute; max-width: none; width: calc(var(--pw) / var(--fw) * 100%); height: auto;
                      left: calc(var(--fx) / var(--fw) * -100%); top: calc(var(--fy) / var(--fh) * -100%); }
  .finestra-tel[style*="order:5"] { grid-column: 1 / -1; justify-self: center; width: min(calc(var(--fw) * 0.5px), 100%); }
  .riquadro { padding: var(--spazio-3) var(--spazio-2); background: var(--colore-carta); border: var(--linea) solid var(--colore-cornice); box-shadow: var(--ombra-stampa); }
  .riquadro h3 { font-size: var(--testo-riquadro); line-height: 1.25; }
  .riquadro h3 br { display: none; }
  .riquadro p, .riquadro a { display: block; margin-top: var(--spazio-1); font-size: var(--testo-piccolo); line-height: 1.5; }
  .riquadro a { display: flex; align-items: center; justify-content: center; min-height: var(--altezza-tocco); }
  .riquadro.dove { grid-column: 1 / -1; }

  /* le recensioni: il voto grande con le stelle, poi le targhe come riquadri veri con la cornice d'oro (i ritagli sono larghi 384 px) */
  .recensioni { padding-top: var(--spazio-sezioni); text-align: center; }
  .rec-voto { display: flex; align-items: center; justify-content: center; gap: var(--spazio-2); }
  .rec-numero { font-size: var(--testo-voto-grande); }
  .rec-stelle svg { width: 9rem; height: auto; }
  .rec-nota { margin-top: var(--spazio-1); font-size: var(--testo-corpo); }
  .targhe { display: grid; gap: var(--spazio-3); margin-top: var(--spazio-5); padding: 0 var(--margine-pagina); }
  .targa { padding: var(--spazio-4) var(--spazio-3); background: var(--colore-carta); border: var(--linea-cornice) solid var(--colore-cornice);
           outline: var(--linea) solid var(--colore-filetto); outline-offset: -0.6rem; box-shadow: var(--ombra-stampa); }
  .targa picture { display: none; }
  .targa blockquote p { font-size: var(--testo-voce); line-height: var(--interlinea-testo); }
  .targa blockquote br { display: none; }
  .targa figcaption { margin-top: var(--spazio-3); font-size: var(--testo-piccolo); font-weight: var(--peso-riquadro); }

  /* la chiusura: parole e bottone, poi la facciata a tutta larghezza; il piè di pagina col logo della comp in una finestra */
  .chiusura { padding: var(--spazio-sezioni) 0 var(--spazio-5); overflow-x: clip; }  /* la facciata girata sporgeva di 22 px */
  .chiusura-parole { padding: 0 var(--margine-pagina); }
  .titolo-chiusura { font-size: var(--testo-sezione); line-height: var(--interlinea-titoli); }
  .titolo-chiusura br { display: none; }
  .chiusura-chiama { margin-top: var(--spazio-4); min-height: calc(var(--altezza-tocco) + var(--spazio-1)); background: var(--colore-blu); border: var(--linea) solid var(--colore-cornice);
                     font-size: var(--testo-bottone-grande); letter-spacing: 0.1em; }
  .chiusura-link { margin-top: var(--spazio-3); font-size: var(--testo-corpo); }
  .chiusura-link a { display: flex; align-items: center; min-height: var(--altezza-tocco); }
  .facciata { margin: var(--spazio-5) var(--margine-pagina) 0; aspect-ratio: var(--w) / var(--h); }
  .facciata { --px: 0.6px; }                  /* la prospettiva della porta che si chiude: 840 px al telefono */
  .piede { padding: var(--spazio-4) var(--margine-pagina) calc(var(--altezza-tocco) + var(--spazio-4)); border-top: var(--linea) solid var(--colore-filetto); text-align: center;
           font-size: var(--testo-piccolo); }
  .piede-fondo { display: block; width: 5.5rem; aspect-ratio: 177 / 125; margin: 0 auto var(--spazio-3); overflow: hidden; position: relative; }
  .piede-fondo img { position: absolute; max-width: none; width: calc(1440 / 177 * 100%); left: calc(-76 / 177 * 100%); top: calc(-37 / 125 * 100%); height: auto; }
  .piede-lingua { margin-top: var(--spazio-2); }
  .piede-lingua a { display: inline-flex; align-items: center; min-height: var(--altezza-tocco); }

  .barra-chiama { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: center; gap: var(--spazio-1);
                  min-height: calc(var(--altezza-tocco) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
                  background: var(--colore-blu); color: var(--colore-su-blu); text-decoration: none; font-family: var(--famiglia-titoli); font-size: var(--testo-bottone);
                  transform: translateY(110%); transition: transform var(--moto-stato) var(--curva-risposta); }
  .barra-chiama.su { transform: none; }
}

/* ---------- pagina 404 ---------- */
.non-trovata { min-height: 100svh; box-sizing: border-box; display: grid; place-content: center; justify-items: center; gap: var(--spazio-3);
               padding: var(--spazio-6) var(--margine-pagina); text-align: center; background: var(--colore-parete); }
.non-trovata-nome { width: min(92vw, 40rem); clip-path: polygon(0 0, 100% 0, 100% 84%, 91% 100%, 0 100%); }   /* l'angolo della porta destra, come al telefono */
.non-trovata h1 { margin: 0; font-family: var(--famiglia-titoli); font-weight: var(--peso-titoli); font-size: var(--testo-sezione); color: var(--colore-oro-scuro); letter-spacing: 0.04em; }
.non-trovata p { margin: 0; max-width: 34rem; }
.non-trovata-bottoni { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spazio-2); }
.non-trovata .bottone { position: static; box-sizing: border-box; width: auto; height: auto; min-height: var(--altezza-tocco); padding: 0 var(--spazio-3);
                        font-size: var(--testo-bottone); border: var(--linea) solid var(--colore-cornice); }
.non-trovata .bottone.pieno { background: var(--colore-blu); color: var(--colore-su-blu); }