/* BisB — stile della pagina. Solo valori del sistema (sistema.css) per testo, raggi, ombre e famiglie. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--s5); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* la parete: il verde salvia del sistema con la trama d'intonaco sopra (strumenti/intonaco.js), fusa in soft-light */
body {
  background: url("/media/intonaco.webp") 0 0 / 640px repeat, var(--c-parete);
  background-blend-mode: soft-light;
  color: var(--c-inchiostro);
  font-family: var(--f-testo);
  font-size: var(--t-base);
  font-weight: var(--p-testo);
  line-height: var(--l-testo);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  scrollbar-color: var(--c-ottone) var(--c-carta);
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
ul { list-style: none; padding: 0; }
::selection { background: var(--c-ottone); color: var(--c-chiaro); }
:focus-visible { outline: 2px solid var(--c-ottone-testo); outline-offset: 3px; border-radius: var(--r-piccolo); }

.visivamente-nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.salta {
  position: absolute; left: var(--s2); top: var(--s2); z-index: 10;
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: 0 var(--s2); background: var(--c-mogano); color: var(--c-chiaro);
  transform: translateY(-200%);
}
.salta:focus { transform: none; }

.icona { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }
.icona--tratto { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }   /* rasoio e pennello, allo spessore di Phosphor */

/* ------------------------------------------------------------------ bottoni (due livelli, come nel riferimento) */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  min-height: 2.75rem; padding: 0 1.125rem;   /* 44 px, come nella comp e come il minimo per il tocco */
  font-family: var(--f-testo); font-size: var(--t-piccolo); font-weight: var(--p-etichette);
  letter-spacing: var(--k-maiuscole); text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--r-piccolo);
  transition: background-color var(--tempo) var(--curva), color var(--tempo) var(--curva), border-color var(--tempo) var(--curva);
}
.bottone--pieno { background: var(--c-ottone); color: var(--c-chiaro); }
.bottone--pieno:hover { background: var(--c-ottone-scuro); }
.bottone--contorno { border-color: var(--c-testo-parete); color: var(--c-testo-parete); }
.bottone--contorno:hover { background: var(--c-testo-parete); color: var(--c-chiaro); }
.bottone--piccolo { padding: 0 var(--s2); }
.bottone .icona--freccia { transition: transform var(--tempo) var(--curva); }
.bottone:hover .icona--freccia { transform: translateX(0.2em); }
.bottone:active { transform: translateY(1px); }

.bottone-icona {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid var(--c-testo-parete); border-radius: var(--r-piccolo);
  background: none; color: var(--c-testo-parete); cursor: pointer;
  transition: background-color var(--tempo) var(--curva), color var(--tempo) var(--curva);
}
.bottone-icona:hover { background: var(--c-testo-parete); color: var(--c-chiaro); }

/* ------------------------------------------------------------------ testata */
.testata {
  position: relative; z-index: 4;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  height: var(--testata); padding: 0 var(--margine);
}
.logo { display: block; width: 3.75rem; aspect-ratio: 1600 / 1400; color: var(--c-inchiostro); }
.logo__segno {
  display: block; width: 100%; height: 100%; background: currentColor;
  -webkit-mask: url("/media/logo-bisb.svg") center / contain no-repeat;
  mask: url("/media/logo-bisb.svg") center / contain no-repeat;
}
.testata__azioni { display: flex; align-items: center; gap: var(--s1); }
.testata__azioni .bottone { display: none; }

/* il menu: sul telefono è un pannello (popover nativo, funziona anche senza script) */
.menu:popover-open {
  position: fixed; inset: 0 0 auto; width: 100%; height: auto; max-height: 100svh; margin: 0;
  display: block; padding: var(--testata) var(--margine) var(--s5);
  border: 0; background: var(--c-parete); color: var(--c-inchiostro);
  box-shadow: var(--ombra-cornice);
}
.menu::backdrop { background: oklch(21.7% 0.033 60.6 / 0.5); }
.menu__chiudi { position: absolute; top: calc((var(--testata) - 2.75rem) / 2); right: var(--margine); }
.menu ul { display: grid; gap: var(--s1); }
.menu a {
  display: inline-block; padding: var(--s1) 0;
  font-family: var(--f-titoli); font-weight: var(--p-titoli); font-size: var(--t-titolo); line-height: var(--l-titoli); text-decoration: none;
}
.menu a:hover { color: var(--c-ottone-testo); }

/* ------------------------------------------------------------------ prima schermata: il testo e la parete */
/* la parete sale sotto la testata: il cervo sta tra il logo e i bottoni, come nella bottega sta sopra lo specchio */
.apertura {
  display: grid;
  grid-template-columns: var(--margine) minmax(0, 1fr) var(--margine);
  grid-template-areas: "parete parete parete" ". testo ." "fascia fascia fascia";
  row-gap: var(--s3);
  margin-top: calc(var(--testata) * -1);
  padding-top: calc(var(--testata) / 2);
  /* la luce della bottega: più chiara dietro i quadri, un poco più scura verso i bordi, come nella comp */
  background:
    radial-gradient(ellipse 70% 65% at 62% 36%, oklch(100% 0 0 / 0.08), transparent 70%),
    radial-gradient(ellipse 130% 110% at 55% 38%, transparent 55%, oklch(28% 0.03 100 / 0.12));
}
.apertura__testo { grid-area: testo; min-width: 0; padding-bottom: var(--s4); }

.riga {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: var(--t-piccolo); font-weight: var(--p-etichette); letter-spacing: var(--k-maiuscole); text-transform: uppercase; text-wrap: balance;
  color: var(--c-testo-parete);
}
.riga::before { content: ""; width: 1.5rem; height: 1px; background: currentColor; flex: none; }

h1 {
  margin-top: var(--s2);
  font-family: var(--f-titoli); font-weight: var(--p-titoli); font-size: var(--t-enorme);
  line-height: var(--l-titoli); letter-spacing: var(--k-titoli);
  text-wrap: balance;
}
h1 em { font-style: italic; color: var(--c-ottone-testo); padding-right: 0.04em; }

.apertura__lead { margin-top: var(--s2); max-width: 18.5rem; /* tre righe come nella comp: a capo dopo «Lucca.» e dopo «naturali,» da 16 a 17 px */ color: var(--c-testo-parete); line-height: 1.3; text-wrap: pretty; }
/* sul telefono i due bottoni stanno uno sopra l'altro, larghi quanto il più lungo, non a tutta pagina (comp) */
.bottoni { display: grid; width: fit-content; gap: var(--s1); margin-top: var(--s3); }

.prova {
  display: inline-flex; align-items: center; gap: 0.75rem; margin-top: var(--s3);
  text-decoration: none; font-size: var(--t-base); color: var(--c-testo-parete);
}
/* più grande di prima, come ha chiesto Kim il 24/09 («la parte delle recensioni più grande»): 56 px sul telefono,
   68 px sul computer (la comp ne ha 53), con la riga del voto che resta su una riga sola */
.prova__volti { height: 3.5rem; width: auto; }
.prova__voto { display: grid; gap: 0.2rem; }
.prova:hover .prova__voto span:last-child { text-decoration: underline; text-underline-offset: 0.2em; }
.stelle { display: flex; gap: 0.15rem; color: var(--c-velluto); }
.stella { width: 1.25rem; height: 1.25rem; fill: currentColor; }

/* la parete: ogni cornice è appesa nella sua posizione (%, dalla comp approvata) */
.parete {
  grid-area: parete; position: relative; min-width: 0;   /* niente z-index: isolerebbe il cervo, che si moltiplica sulla parete */
  aspect-ratio: 885 / 425;
  margin-inline: var(--margine);
}
.cornice, .cervo {
  position: absolute; margin: 0;
  left: calc(var(--xm) * 1%); top: calc(var(--ym) * 1%); width: calc(var(--wm) * 1%);
}
.cornice img { width: 100%; box-shadow: var(--ombra-cornice); }
.cornice--computer { display: none; }
.cervo img { mix-blend-mode: multiply; }   /* il cervo della comp con la sua ombra, moltiplicato sulla parete (strumenti/cervo-dalla-comp.py) */

/* il video di Andrea: un cartellino scuro appoggiato sul quadro grande, sopra Andrea */
.video {
  position: absolute; z-index: 3; left: 28%; top: 66%;
  display: inline-flex; align-items: center; gap: 0.75rem;
  text-decoration: none; color: var(--c-chiaro);
  font-size: var(--t-piccolo); font-weight: var(--p-etichette); letter-spacing: var(--k-maiuscole); text-transform: uppercase;
}
.video__tondo {
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border: 1px solid var(--c-chiaro); border-radius: var(--r-tondo);
  background: oklch(21.7% 0.033 60.6 / 0.6);
  transition: background-color var(--tempo) var(--curva), border-color var(--tempo) var(--curva);
}
.video:hover .video__tondo { background: var(--c-ottone); border-color: var(--c-ottone); }
.video .icona--play { width: 1.1rem; height: 1.1rem; margin-left: 0.1rem; }
.video__testo { display: none; }

/* la finestra del video (creata da sito.js) */
.finestra {
  margin: auto; padding: 0; border: 0; background: none; overflow: visible;
  width: min(24rem, 100vw - 2 * var(--margine)); max-height: none;
}
.finestra::backdrop { background: oklch(21.7% 0.033 60.6 / 0.88); }
.finestra__video { display: block; width: 100%; max-height: 85svh; aspect-ratio: 9 / 16; background: var(--c-mogano); border-radius: var(--r-piccolo); }
.finestra__chiudi {
  position: absolute; top: calc(var(--s1) * -1); right: calc(var(--s1) * -1); translate: 0 -100%;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--c-chiaro); border-radius: var(--r-tondo); background: none; color: var(--c-chiaro); cursor: pointer;
}
.finestra__chiudi:hover { background: var(--c-chiaro); color: var(--c-mogano); }
/* sul fondo scuro e sull'ottone l'anello del fuoco va chiaro, o non si vede (UI/UX Pro Max, ux: Focus States) */
.finestra :focus-visible, .barra :focus-visible, .numeri :focus-visible { outline-color: var(--c-chiaro); }
.barra :focus-visible { outline-offset: -5px; }
.chiusura :focus-visible, .piede :focus-visible, .prenota-fisso:focus-visible { outline-color: var(--c-chiaro); }

/* ------------------------------------------------------------------ la fascia dei numeri, sul bordo basso della prima schermata */
.numeri {
  grid-area: fascia;
  background: var(--c-mogano); color: var(--c-chiaro);
  padding: var(--s4) var(--margine);
}
.numeri__elenco { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s2); }
.numero { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.75rem; align-items: center; }
.numero .icona { grid-row: span 2; width: 2.25rem; height: 2.25rem; color: var(--c-ottone-icona); }
.numero__cifra { font-family: var(--f-titoli); font-weight: var(--p-titoli); font-size: var(--t-grande); line-height: 1; color: var(--c-crema); }
.numero__testo { font-size: var(--t-piccolo); line-height: 1.3; color: var(--c-crema-scura); }

/* ------------------------------------------------------------------ la barra per prenotare, sul telefono */
.barra {
  position: fixed; inset: auto 0 0; z-index: 5;
  display: grid; grid-template-columns: 1fr auto;
  background: var(--c-ottone); color: var(--c-chiaro);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra__prenota { min-height: 3.5rem; border-radius: 0; justify-content: flex-start; padding-inline: var(--margine); }
.barra__tel {
  display: grid; place-items: center; width: 3.5rem;
  border-left: 1px solid oklch(97.7% 0.010 81.8 / 0.35); color: var(--c-chiaro);
  transition: background-color var(--tempo) var(--curva);
}
.barra__tel:hover { background: var(--c-ottone-scuro); }

/* ------------------------------------------------------------------ computer */
@media (min-width: 60em) {
  /* logo e bottoni vicini ai bordi, come nella comp (logo a 12 px dal bordo, Prenota a 20 px) */
  .testata { padding-inline: clamp(0.75rem, 1.4vw, 1.25rem); }
  .logo { width: 5.75rem; }
  .testata__azioni .bottone--pieno { min-width: 9rem; }   /* 144 px, un po' più lungo: la comp è 145 × 42 */
  .testata__azioni { gap: var(--s2); }
  .testata__azioni .bottone { display: inline-flex; }
  .menu-apri, .menu__chiudi, .barra { display: none; }

  /* sul computer il menu è una riga fissa: si tolgono gli stili del popover */
  .menu, .menu:popover-open {
    display: block; position: static; inset: auto; width: auto; height: auto; margin: 0; padding: 0;
    overflow: visible; border: 0; background: none; color: inherit; box-shadow: none;
  }
  .menu ul { display: flex; gap: clamp(1.25rem, 3vw, 3.25rem); }
  .menu a {
    font-family: var(--f-testo); font-size: var(--t-base); font-weight: var(--p-testo); line-height: var(--l-testo);
    letter-spacing: var(--k-maiuscole); text-transform: uppercase; color: var(--c-testo-parete);
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0;   /* 44 px da toccare, la riga resta sotto la parola */
    background: linear-gradient(currentColor, currentColor) left calc(100% - 0.5rem) / 0 1px no-repeat;
    transition: background-size var(--tempo) var(--curva);
  }
  .menu a:hover { color: inherit; }
  .menu a:hover, .menu a.attiva { background-size: 100% 1px; }

  /* il testo e la fascia rientrano rispetto al logo, come nella comp */
  .apertura {
    --rientro: calc(var(--margine) * 1.5);
    grid-template-columns: var(--rientro) minmax(18rem, 24.5rem) var(--fessura) minmax(0, 1fr);
    grid-template-areas: ". testo . parete" "fascia fascia fascia fascia";
    row-gap: var(--s2);
  }
  .apertura__testo { align-self: center; padding: calc(var(--testata) / 2 + var(--s3)) 0 var(--s1); } /* poco spazio sotto: la colonna sta dove la mette la comp */
  .riga { gap: var(--s2); letter-spacing: var(--k-maiuscole); }
  .riga::before { width: 2.5rem; }
  h1 { margin-top: var(--s3); }
  .apertura__lead { margin-top: var(--s2); }
  .bottoni { display: flex; flex-wrap: wrap; width: auto; gap: 0.75rem; margin-top: var(--s3); }
  .prova { margin-top: var(--s3); }
  .prova__volti { height: 4.25rem; }

  .parete { margin: 0; aspect-ratio: 1120 / 775; align-self: start; }
  .cornice, .cervo { left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); }
  .cornice--computer { display: block; }
  .video { left: 31.5%; top: 68%; }

  .numeri { padding: var(--s3) var(--margine) var(--s3) var(--rientro); }
  .numeri__elenco { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .numero { column-gap: var(--s2); padding: 0 clamp(1rem, 2.2vw, 2rem); border-left: 1px solid oklch(73.1% 0.086 73.5 / 0.25); }
  .numero:first-child { padding-left: 0; border-left: 0; }
  .numero .icona { width: clamp(2.25rem, 3.9vw, 3.5rem); height: clamp(2.25rem, 3.9vw, 3.5rem); }   /* 56 px a 1440, come nella comp */
}

/* il cartellino del video con la scritta, solo dove il quadro grande è abbastanza largo da contenerlo */
@media (min-width: 80em) {
  .video {
    padding: 0.375rem 1.125rem 0.375rem 0.375rem; border-radius: var(--r-piccolo);
    background: oklch(21.7% 0.033 60.6 / 0.78);
    transition: background-color var(--tempo) var(--curva);
  }
  .video:hover { background: var(--c-mogano); }
  .video__tondo { background: none; }
  .video__testo { display: block; }
}

/* ================================================================== dopo la prima schermata
   Il contenuto è largo 1300 px come nella comp (--pagina), con i margini di pagina sotto quella misura.
   Listino e CBC seguono la comp approvata (mix-approvata-1440/390); il resto segue l'ordine del riferimento LUXÉ
   (bozze/riferimenti/dispositivi.md) e il piano di design. */
.listino, .bottega, .recensioni, .chiusura, .piede {
  padding-inline: max(var(--margine), calc((100% - var(--pagina)) / 2));
}
.titolo-sezione {
  margin-top: var(--s2);
  font-family: var(--f-titoli); font-weight: var(--p-titoli); font-size: var(--t-titolo);
  line-height: var(--l-titoli); letter-spacing: var(--k-titoli); text-wrap: balance;
}
.titolo-sezione em { font-style: italic; color: var(--c-ottone-testo); padding-right: 0.04em; }

/* ------------------------------------------------------------------ il listino, sulla carta */
.listino { background: var(--c-carta); padding-block: var(--s6); }
.listino__testa { display: grid; justify-items: start; }
.listino__tutti { margin-top: var(--s3); border-color: var(--c-inchiostro); color: var(--c-inchiostro); }
.listino__tutti:hover { background: var(--c-inchiostro); color: var(--c-chiaro); }

.tessere { display: grid; gap: var(--s2); margin-top: var(--s4); }

/* sul telefono la tessera è orizzontale, come nella comp: foto a sinistra, medaglione e testo a destra */
.tessera {
  position: relative; overflow: clip;
  display: grid;
  grid-template-columns: 44% auto minmax(0, 1fr);
  grid-template-rows: 1fr auto auto auto 1fr;
  grid-template-areas: "foto . ." "foto med nome" "foto . dati" "foto . prenota" "foto . .";
  column-gap: 0.75rem;
  padding-right: var(--s2);
  background: var(--c-carta);
  border: 1px solid var(--c-filo-chiaro); border-radius: var(--r-piccolo);
}
.tessera__foto { grid-area: foto; position: relative; min-height: 6.5rem; overflow: hidden; }
.tessera__foto img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform calc(var(--tempo) * 2) var(--curva);
}
.tessera__medaglione {
  grid-area: med; align-self: center; margin-left: var(--s2);
  position: relative; z-index: 1;   /* sopra la foto, che è posizionata */
  display: grid; place-items: center;
  width: 2.25rem; aspect-ratio: 1; border-radius: var(--r-tondo);
  background: var(--c-medaglione); color: var(--c-chiaro);
  transition: background-color var(--tempo) var(--curva);
}
.tessera__medaglione .icona { width: 56%; height: 56%; }   /* l'icona della comp occupa più di metà del medaglione */
.tessera__nome {
  grid-area: nome; align-self: center;
  font-family: var(--f-testo); font-size: var(--t-base); font-weight: var(--p-etichette);
  line-height: 1.2; letter-spacing: var(--k-maiuscole); text-transform: uppercase;
}
.tessera__dati {
  grid-area: dati; margin-top: 0.25rem;
  display: flex; align-items: center; white-space: nowrap;
  font-size: var(--t-piccolo); color: var(--c-grigio); font-variant-numeric: tabular-nums;
}
/* durata e prezzo nella stessa zona, divisi da un filetto (niente puntino medio: regola 5) */
.tessera__dati span + span::before {
  content: ""; display: inline-block; vertical-align: -0.1em;
  width: 1px; height: 0.9em; margin-inline: 0.6em; background: currentColor; opacity: 0.45;
}
.tessera__prenota {
  grid-area: prenota; justify-self: start;
  display: inline-flex; align-items: center; gap: 0.4em; min-height: 2.75rem;
  font-size: var(--t-piccolo); font-weight: var(--p-etichette); letter-spacing: var(--k-maiuscole); text-transform: uppercase;
  text-decoration: none; color: var(--c-ottone-link);
}
/* tutta la tessera porta a Treatwell; il nome accessibile resta quello del link */
.tessera__prenota::after { content: ""; position: absolute; inset: 0; }
.tessera__prenota .icona--freccia { transition: transform var(--tempo) var(--curva); }
.tessera:hover .tessera__foto img { transform: scale(1.04); }
.tessera:hover .tessera__medaglione { background: var(--c-ottone); }
.tessera:hover .tessera__prenota .icona--freccia { transform: translateX(0.25em); }
.tessera:has(.tessera__prenota:focus-visible) { outline: 2px solid var(--c-ottone-testo); outline-offset: 3px; }
.tessera__prenota:focus-visible { outline: none; }

/* il blocco CBC: il ritratto di Andrea e le quattro voci in colonna */
.cbc {
  display: grid; margin-top: var(--s3); overflow: clip;
  background: var(--c-carta);
  border: 1px solid var(--c-filo-chiaro); border-radius: var(--r-piccolo);
}
.cbc__foto { aspect-ratio: 1040 / 746; }
.cbc__foto img { width: 100%; height: 100%; object-fit: cover; }
.cbc__testo { padding: var(--s4) var(--s3) var(--s3); }
.cbc__titolo {
  font-family: var(--f-titoli); font-weight: var(--p-titoli); font-size: var(--t-grande);
  line-height: 1.15; letter-spacing: var(--k-titoli); text-wrap: balance;
}
.cbc__voci { margin-top: var(--s2); }
.cbc__voce {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 3.5em; align-items: baseline; column-gap: var(--s2);
  padding-block: 0.625rem;
  font-variant-numeric: tabular-nums;
}
.cbc__voce + .cbc__voce { border-top: 1px solid var(--c-filo-chiaro); }
.cbc__nome { font-size: var(--t-medio); color: var(--c-grigio); }
.cbc__durata { font-size: var(--t-base); color: var(--c-grigio); }
.cbc__prezzo {
  justify-self: end; white-space: nowrap;
  font-family: var(--f-titoli); font-weight: var(--p-titoli); font-size: var(--t-grande); line-height: 1;
}

/* ------------------------------------------------------------------ la bottega, di nuovo sulla parete */
.bottega { display: grid; gap: var(--s5); align-items: center; padding-block: var(--s-sezione); }
.bottega__foto img { width: 100%; box-shadow: var(--ombra-cornice); }
.bottega__storia { margin-top: var(--s3); max-width: var(--misura); color: var(--c-testo-parete); text-wrap: pretty; }
.garanzie { display: grid; gap: var(--s2) var(--s4); margin-top: var(--s4); }
.garanzia { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.75rem; line-height: 1.3; }
.garanzia .icona { width: 2rem; height: 2rem; color: var(--c-ottone-testo); }
.bottega__accademia {
  margin-top: var(--s4); padding-top: var(--s3); max-width: var(--misura);
  border-top: 1px solid var(--c-filo); color: var(--c-testo-parete); text-wrap: pretty;
}

/* ------------------------------------------------------------------ marchi e recensioni, sulla carta */
.recensioni { background: var(--c-carta); padding-block: var(--s5) var(--s-sezione); }
.marchi {
  display: grid; gap: var(--s2);
  padding-bottom: var(--s5); margin-bottom: var(--s6);
  border-bottom: 1px solid var(--c-filo-chiaro);
}
.marchi__elenco {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s5);
  font-family: var(--f-titoli); font-weight: var(--p-titoli); font-size: var(--t-alto); line-height: 1.2; color: var(--c-grigio);
}
/* il salto di scala: una recensione sola, enorme, nel mezzo di tanto vuoto */
.recensione--grande { max-width: 40rem; margin: var(--s5) auto var(--s6); text-align: center; }
.recensione--grande p {
  font-family: var(--f-titoli); font-weight: var(--p-titoli); font-size: var(--t-grande);
  line-height: 1.15; letter-spacing: var(--k-titoli); text-wrap: balance;
}
.recensione--grande .recensione__firma { justify-content: center; margin-top: var(--s4); text-align: left; }
.recensioni__elenco { display: grid; gap: var(--s5) var(--s6); }
.recensioni__elenco .recensione { padding-top: var(--s3); border-top: 1px solid var(--c-filo); }
.recensioni__elenco .recensione p { max-width: var(--misura); text-wrap: pretty; }
.recensione__firma { display: flex; align-items: center; gap: 0.75rem; margin-top: var(--s3); line-height: 1.3; }
.recensione__volto { flex: none; width: 3rem; height: 3rem; border-radius: var(--r-tondo); object-fit: cover; }
.recensione__volto--iniziale {
  display: grid; place-items: center;
  background: var(--c-parete); color: var(--c-inchiostro);
  font-family: var(--f-titoli); font-weight: var(--p-titoli); font-size: var(--t-alto); line-height: 1;
}
.recensione cite { display: block; font-style: normal; font-weight: var(--p-etichette); }
.recensione__fonte { display: block; font-size: var(--t-piccolo); color: var(--c-grigio); }
.recensioni__tutte { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-top: var(--s5); }
.recensioni__tutte a {
  display: inline-flex; align-items: center; gap: 0.4em; min-height: 2.75rem;
  font-size: var(--t-piccolo); font-weight: var(--p-etichette); letter-spacing: var(--k-maiuscole); text-transform: uppercase;
  text-decoration: none; color: var(--c-ottone-link);
}
.recensioni__tutte a:hover { text-decoration: underline; text-underline-offset: 0.25em; }

/* ------------------------------------------------------------------ la chiusura: il mogano sopra le maioliche del pavimento */
.chiusura {
  display: grid; gap: var(--s5); align-items: center; padding-block: var(--s-sezione);
  color: var(--c-chiaro);
  background:
    linear-gradient(oklch(21.2% 0.033 60.7 / 0.86), oklch(21.2% 0.033 60.7 / 0.86)),
    image-set(url("/media/foto/maioliche-675.avif") type("image/avif"), url("/media/foto/maioliche-675.webp") type("image/webp")) center / cover,
    var(--c-mogano);
}
.chiusura .riga { color: var(--c-crema); }
.chiusura .titolo-sezione em { color: var(--c-ottone-icona); }
.chiusura__riga { margin-top: var(--s3); max-width: var(--misura); color: var(--c-crema); }
.chiusura .bottoni { margin-top: var(--s4); }
.bottone--chiaro { border-color: var(--c-chiaro); color: var(--c-chiaro); }
.bottone--chiaro:hover { background: var(--c-chiaro); color: var(--c-mogano); }

.chiusura__scheda {
  padding: var(--s3); background: var(--c-carta); color: var(--c-inchiostro);
  border-radius: var(--r-piccolo); box-shadow: var(--ombra-cornice);
}
.info { display: grid; gap: var(--s2); }
.info__voce { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start; line-height: 1.4; }
.info__voce .icona { width: 1.5rem; height: 1.5rem; color: var(--c-ottone-link); }
.info dd { margin: 0; }
.aperto:not(:empty) {
  display: flex; align-items: center; gap: 0.5rem; margin-top: 0.375rem;
  font-weight: var(--p-etichette);
}
.aperto:not(:empty)::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--r-tondo); background: var(--c-velluto); }
.aperto--si::before { background: var(--c-ottone); }

.mappa { position: relative; display: block; margin-top: var(--s3); overflow: hidden; border-radius: var(--r-piccolo); text-decoration: none; }
.mappa img { width: 100%; aspect-ratio: 1100 / 500; object-fit: cover; transition: transform calc(var(--tempo) * 2) var(--curva); }
/* BisB è al centro dell'immagine (strumenti/immagini-sezioni.js): la punta del segnaposto va lì */
.mappa__segno { position: absolute; left: 50%; top: 50%; translate: -50% -100%; color: var(--c-velluto); }
.mappa__segno .icona { width: 2.5rem; height: 2.5rem; }
.mappa__apri {
  position: absolute; left: var(--s2); bottom: var(--s2);
  display: inline-flex; align-items: center; gap: 0.4em; min-height: 2.75rem; padding: 0 var(--s2);
  background: var(--c-carta); color: var(--c-inchiostro); border-radius: var(--r-piccolo);
  font-size: var(--t-piccolo); font-weight: var(--p-etichette); letter-spacing: var(--k-maiuscole); text-transform: uppercase;
  transition: background-color var(--tempo) var(--curva), color var(--tempo) var(--curva);
}
.mappa:hover img { transform: scale(1.03); }
.mappa:hover .mappa__apri { background: var(--c-ottone); color: var(--c-chiaro); }

/* ------------------------------------------------------------------ piè di pagina */
.piede {
  display: grid; gap: var(--s4);
  padding-block: var(--s5) calc(var(--s4) + 3.5rem + env(safe-area-inset-bottom));   /* sul telefono c'è la barra sotto */
  background: var(--c-mogano-scuro); color: var(--c-crema);
  font-size: var(--t-piccolo);
}
.logo--piede { width: 5rem; color: var(--c-crema); }
.piede__dati { display: grid; gap: 0.25rem; }
.piede__nome { font-family: var(--f-titoli); font-weight: var(--p-titoli); font-size: var(--t-alto); color: var(--c-chiaro); }
.piede__contatti { display: grid; }
.piede__contatti a {
  display: inline-flex; align-items: center; gap: 0.75rem; min-height: 2.75rem;
  text-decoration: none; color: var(--c-crema);
}
.piede__contatti a:hover span { text-decoration: underline; text-underline-offset: 0.25em; color: var(--c-chiaro); }
.piede__contatti .icona { color: var(--c-ottone-icona); }
.piede__crediti {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3);
  padding-top: var(--s3); border-top: 1px solid oklch(67.2% 0.03 80 / 0.2); color: var(--c-crema-scura);
}

/* ------------------------------------------------------------------ la barra e il bottone fisso */
.barra { transition: translate var(--tempo) var(--curva), visibility 0s linear 0s; }
.barra--nascosta { translate: 0 100%; visibility: hidden; transition: translate var(--tempo) var(--curva), visibility 0s linear var(--tempo); }
html { scroll-padding-bottom: 4rem; }   /* il fuoco della tastiera non finisce sotto la barra (UI/UX Pro Max, ux: Focus Not Obscured) */
.prenota-fisso { display: none; }

/* ------------------------------------------------------------------ tablet: le tessere diventano verticali, due per riga */
@media (min-width: 40em) {
  .tessere { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .tessera {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "foto" "med" "nome" "dati" "prenota";
    justify-items: center; text-align: center;
    padding: 0 0 var(--s3);
  }
  .tessera__foto { width: 100%; min-height: 0; aspect-ratio: 309 / 293; }
  /* il medaglione: largo il 28% della tessera, a metà sul bordo basso della foto, dove la comp aveva il suo (strumenti/listino-dalla-comp.py) */
  .tessera__medaglione { width: 28%; margin: -14% 0 0; }
  .tessera__nome { margin-top: var(--s4); font-size: var(--t-alto); }
  .tessera__dati { justify-content: center; margin-top: var(--s2); font-size: var(--t-medio); }
  .tessera__prenota { justify-self: center; margin-top: 0.25rem; font-size: var(--t-base); }
  .garanzie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recensioni__elenco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ computer */
@media (min-width: 60em) {
  .listino__testa { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "riga ." "titolo tutti"; align-items: center; }
  .listino__testa .riga { grid-area: riga; }
  .listino__testa .titolo-sezione { grid-area: titolo; }
  .listino__tutti { grid-area: tutti; margin-top: var(--s2); min-height: 3.125rem; padding-inline: 1.75rem; }   /* 325 × 50, come nella comp */
  .tessere { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); }
  .tessera { padding-bottom: var(--s1); }

  .cbc { grid-template-columns: 38.8% minmax(0, 1fr); }
  .cbc__foto { aspect-ratio: auto; min-height: 100%; }
  .cbc__testo { align-self: center; padding: var(--s5) var(--s6); }
  .cbc__voci { margin-top: var(--s3); }
  .cbc__voce { grid-template-columns: minmax(0, 1fr) 9rem 5rem; padding-block: 0.5rem; }

  .bottega { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s6); }

  .marchi { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s6); }
  .marchi__elenco { justify-content: space-between; font-size: var(--t-grande); }
  .recensione--grande { max-width: 60rem; margin-block: var(--s6) var(--s7); }
  .recensione--grande p { font-size: var(--t-titolo); }
  .recensioni__elenco { gap: var(--s5) var(--s7); }

  .chiusura {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s6);
    background:
      linear-gradient(oklch(21.2% 0.033 60.7 / 0.86), oklch(21.2% 0.033 60.7 / 0.86)),
      image-set(url("/media/foto/maioliche-1350.avif") type("image/avif"), url("/media/foto/maioliche-1350.webp") type("image/webp")) center / cover,
      var(--c-mogano);
  }
  .chiusura__scheda { padding: var(--s4); }
  .info { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s3); }
  .info__voce:first-child { grid-row: span 2; }

  .piede {
    grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo dati contatti" "crediti crediti crediti";
    align-items: start; column-gap: var(--s5); padding-block: var(--s6) var(--s4);
  }
  .logo--piede { grid-area: logo; width: 6rem; }
  .piede__dati { grid-area: dati; }
  .piede__contatti { grid-area: contatti; grid-template-columns: repeat(2, auto); column-gap: var(--s5); }
  .piede__crediti { grid-area: crediti; }
  html { scroll-padding-bottom: 0; }

  /* sul computer, dopo la prima schermata, il bottone per prenotare resta in un angolo (prenotazione.md) */
  .prenota-fisso {
    display: inline-flex; position: fixed; right: var(--s4); bottom: var(--s4); z-index: 5;
    box-shadow: var(--ombra-cornice);
    opacity: 0; translate: 0 var(--s2); visibility: hidden;
    transition: opacity var(--tempo) var(--curva), translate var(--tempo) var(--curva), visibility 0s linear var(--tempo);
  }
  .prenota-fisso.visibile { opacity: 1; translate: 0 0; visibility: visible; transition-delay: 0s; }
}

/* ------------------------------------------------------------------ il momento d'autore: la parete ha profondità
   Scorrendo via dalla prima schermata, ogni quadro e il cervo salgono di pochi px (--z, da 6 a 28, in genera.js),
   ognuno di un tanto diverso: la parete si stacca in piani, come una parete vera vista camminando.
   Solo sul computer, solo translate, e solo se il browser e la persona lo vogliono: fuori da qui la parete è ferma e visibile.
   Il cervo si muove dall'immagine e non dalla figura, perché la figura isolerebbe il suo multiply sulla parete. */
@keyframes profondita { to { translate: 0 calc(var(--z, 0) * -1px); } }
@media (min-width: 60em) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .cornice, .cervo img {
      animation: profondita linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
  }
}

/* ------------------------------------------------------------------ la pagina 404 */
.non-trovata { padding: var(--s6) var(--margine) var(--s-sezione); max-width: calc(var(--misura) + 2 * var(--margine)); }
.non-trovata h1 { margin-top: 0; }
.non-trovata__testo { margin-top: var(--s3); color: var(--c-testo-parete); text-wrap: pretty; }
.non-trovata .bottoni { margin-top: var(--s4); }
@media (min-width: 60em) { .non-trovata { padding-inline: calc(var(--margine) * 1.5); } }