/* vetrina.css — la parte pubblica. Solo var(--...): i valori stanno in art-tokens.css. */

/* ---------------------------------------------------------------- impianto */
.gabbia { width: min(100% - 2.5rem, var(--gabbia)); margin-inline: auto; }
/* la foto che sborda a destra non deve regalare una barra di scorrimento */
html { overflow-x: hidden; }
.sezione { padding-block: var(--respiro); }
.sezione--chiara { background: var(--bg-1); }
.sezione--scura { background: var(--bg-scuro); color: var(--fg-su-scuro); }

.intestazione { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s7); }
.intestazione h2 { font-size: var(--t-titolo); line-height: var(--i-titolo); letter-spacing: var(--s-titolo); }
.intestazione p { color: var(--fg-2); max-width: var(--misura); }

/* ------------------------------------------------------------------ barra */
.barra {
  position: sticky; top: 0; z-index: 300;
  min-height: var(--barra-h); box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5);
  padding: var(--s4) 0;
  transition: background var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.barra--posata {
  background: oklch(0.933 0.016 65 / .82);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 1px 0 var(--linea);
}
.barra > .gabbia { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); width: min(100% - 2.5rem, var(--gabbia)); }
.marchio { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; }
.marchio img { width: 34px; height: 34px; object-fit: contain; object-position: left center; }
.marchio span { font-size: var(--t-micro); letter-spacing: var(--s-micro); text-transform: uppercase; font-weight: 500; color: var(--fg); white-space: nowrap; }
.menu { display: flex; align-items: center; gap: var(--s5); }
.menu a:not(.bottone) { font-size: var(--t-piccolo); text-decoration: none; color: var(--fg-2); position: relative; padding-block: var(--s1); }
.menu a:not(.bottone)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--accento); transform: scaleX(0); transform-origin: right;
  transition: transform var(--d-base) var(--e-out);
}
.menu a:not(.bottone):hover { color: var(--fg); }
.menu a:not(.bottone):hover::after, .menu a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.menu a[aria-current]:not(.bottone) { color: var(--fg); }

/* ---------------------------------------------------------------- bottoni */
.bottone {
  display: inline-flex; align-items: center; gap: var(--s3);
  padding: 0.875rem 1.375rem;
  background: var(--accento); color: var(--accento-fg);
  border: 0; border-radius: var(--r1);
  font: 400 var(--t-piccolo)/1 var(--f-testo); letter-spacing: 0.04em;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--ombra-1);
  transition: transform var(--d-micro) var(--e-out), box-shadow var(--d-micro) var(--e-out),
              background var(--d-micro) var(--e-out);
}
.bottone:hover { transform: translateY(-1px); box-shadow: var(--ombra-2); }
.bottone:active { transform: translateY(0); box-shadow: var(--ombra-1); transition-duration: var(--d-uscita); }
.bottone--fine {
  background: transparent; color: var(--fg); box-shadow: none;
  border-bottom: 1px solid var(--linea-2); border-radius: 0;
  padding: 0.5rem 0;
}
.bottone--fine:hover { border-color: var(--accento); color: var(--accento); transform: none; box-shadow: none; }
.bottone--scuro { background: var(--bg-2); color: var(--fg); }
.bottone[disabled] { opacity: .45; pointer-events: none; }

/* ------------------------------------------------------------ APERTURA (hero) */
/* niente overflow:hidden qui: è proprio da qui che il monogramma deve uscire.
   Lo z-index lo tiene sopra il fondo della sezione seguente (ART.md §8). */
.apertura { position: relative; z-index: 1; padding-top: clamp(2rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 7vw, 6rem); }
.apertura .gabbia { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); align-items: center; }
.apertura h1 {
  font-size: var(--t-display); line-height: var(--i-display); letter-spacing: var(--s-display);
  margin-block: var(--s5) var(--s5);
  max-width: 12ch;
}
.apertura h1 em { font-style: italic; color: var(--accento); }
.apertura p { color: var(--fg-2); max-width: 46ch; font-size: var(--t-lead); }
.apertura .azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); margin-top: var(--s6); }

/* il monogramma sborda in basso e passa sotto la sezione seguente: unica
   rottura di griglia della pagina (ART.md §8) */
/* allineato in basso: solo così il margine negativo lo spinge OLTRE la sezione
   invece di alzarlo dentro la sua cella */
.monogramma { position: relative; justify-self: center; align-self: end; }
/* La rottura di griglia della pagina: la foto esce dalla sezione e si appoggia
   su quella dopo (ART.md §8). Finché sotto c'era altro crema il taglio netto
   non si vedeva — crema su crema. Adesso sotto c'è il bruno, e una foto senza
   raggio e senza ombra vera diventa un rettangolo bianco incollato male.
   Quindi: sporge meno, ha il raggio delle foto grandi, e porta l'ombra che
   porterebbe una stampa posata su un tavolo scuro. */
.monogramma img {
  display: block; width: min(100%, 540px); height: auto;
  position: relative; z-index: 2;
  margin-bottom: calc(-1 * clamp(5rem, 11vw, 11rem));
  border-radius: var(--r3);
  box-shadow: var(--ombra-3);
}

.contatore { display: flex; align-items: baseline; gap: var(--s3); color: var(--fg-2); }
.contatore b { font-family: var(--f-display); font-size: 2.25rem; font-weight: 400; color: var(--fg); line-height: 1; }

/* ---------------------------------------------------------------- listino */
.voci { border-top: 1px solid var(--linea); }
.voce {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s3) var(--s5); align-items: baseline;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--linea);
  transition: background var(--d-micro) var(--e-out);
}
.voce:hover { background: oklch(1 0 0 / .35); }
.voce h3 { font-size: 1.5rem; line-height: 1.2; }
.voce p { color: var(--fg-2); font-size: var(--t-piccolo); max-width: 52ch; margin-top: var(--s1); }
.voce .conto { text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.voce .prezzo { font-family: var(--f-display); font-size: 1.75rem; }
.voce .durata { display: block; margin-top: var(--s1); }

/* --------------------------------------------------------------- galleria */
.mosaico {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 12rem;
  grid-auto-flow: dense;      /* le foto alte non devono lasciare celle vuote dietro di sé */
  gap: var(--s4);
}
/* In home le foto sono cinque e la disposizione è decisa a mano: una grande a
   sinistra e quattro attorno. Lasciarla all'automatismo produceva un buco e due
   scatti sovrapposti. */
.mosaico--home { grid-auto-rows: 13rem; }
.mosaico--home:has(.scatto:nth-child(5)) {
  grid-template-areas:
    'grande grande due   tre'
    'grande grande quattro cinque';
}
.mosaico--home:has(.scatto:nth-child(5)) .scatto:nth-child(1) { grid-area: grande; }
.mosaico--home:has(.scatto:nth-child(5)) .scatto:nth-child(2) { grid-area: due; }
.mosaico--home:has(.scatto:nth-child(5)) .scatto:nth-child(3) { grid-area: tre; }
.mosaico--home:has(.scatto:nth-child(5)) .scatto:nth-child(4) { grid-area: quattro; }
.mosaico--home:has(.scatto:nth-child(5)) .scatto:nth-child(5) { grid-area: cinque; }
.scatto {
  position: relative; overflow: hidden;
  border-radius: var(--r3);
  background: var(--bg-2);
  box-shadow: var(--ombra-1);
}
.scatto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--d-cine) var(--e-out); }
.scatto:hover img { transform: scale(1.035); }
.scatto figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: var(--s5) var(--s4) var(--s3);
  color: oklch(0.98 0.006 70);
  background: linear-gradient(to top, oklch(from var(--nero) l c h / .82), transparent 88%);
  font-size: var(--t-micro); letter-spacing: var(--s-micro); text-transform: uppercase;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.scatto:hover figcaption, .scatto:focus-within figcaption { opacity: 1; transform: none; }
.scatto--grande { grid-column: span 2; grid-row: span 2; }
.scatto--alto { grid-row: span 2; }

.filtri { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s6); }
.filtri a {
  padding: var(--s2) var(--s4); border: 1px solid var(--linea);
  border-radius: var(--r-pallino); text-decoration: none;
  font-size: var(--t-piccolo); color: var(--fg-2);
  transition: border-color var(--d-micro) var(--e-out), color var(--d-micro) var(--e-out);
}
.filtri a:hover { border-color: var(--linea-2); color: var(--fg); }
.filtri a[aria-current] { background: var(--fg); border-color: var(--fg); color: var(--bg-1); }

/* Dove la colonna è stretta (l'area cliente), i giorni scorrono in orizzontale
   invece di impilarsi su dodici righe e spingere il bottone fuori dallo schermo. */
.giorni-striscia { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin;
  padding-bottom: var(--s2); scroll-snap-type: x proximity; }
.giorni-striscia > * { flex: 0 0 auto; scroll-snap-align: start; }

/* -------------------------------------------------------------- instagram */
/* auto-fit, non auto-fill: con quattro post le tessere si allargano a riempire
   la riga invece di lasciare mezza fascia vuota a destra. */
.rullo { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s3); }
.rullo a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r2); background: var(--bg-2); }
.rullo img { width: 100%; height: 100%; object-fit: cover; }
.rullo .reel { position: absolute; top: var(--s2); right: var(--s2); width: 22px; height: 22px; color: var(--bianco); filter: drop-shadow(0 1px 3px oklch(0.19 0.045 45 / .6)); }

/* La tessera dei post incollati a mano: senza anteprima (nessuno può averla
   senza autenticarsi), ma con la stessa forma delle altre, così la striscia
   resta una striscia sola e non due cose diverse messe vicine. */
.tessera {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  aspect-ratio: 1; width: 100%; gap: var(--s3);
  padding: var(--s4);
  background: var(--bg-2); border: 1px solid var(--linea); border-radius: var(--r2);
  font: inherit; color: var(--fg); text-align: left; cursor: pointer;
  transition: border-color var(--d-micro) var(--e-out), transform var(--d-micro) var(--e-out),
              box-shadow var(--d-micro) var(--e-out);
}
.tessera:hover { border-color: var(--accento); transform: translateY(-1px); box-shadow: var(--ombra-2); }
.tessera:active { transform: none; transition-duration: var(--d-uscita); }
.tessera svg { width: 26px; height: 26px; color: var(--accento); }
.tessera span { font-size: var(--t-piccolo); line-height: 1.35; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.tessera em { font-style: normal; font-size: var(--t-micro); letter-spacing: var(--s-micro);
  text-transform: uppercase; color: var(--fg-3); }

/* La lente: l'incorporamento ufficiale si carica qui, e solo dopo un tocco. */
.lente {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s5);
  background: oklch(0.19 0.045 45 / .62);
  backdrop-filter: blur(3px);
}
.lente iframe { width: min(400px, 100%); height: min(680px, 86vh); border: 0;
  border-radius: var(--r3); background: var(--bianco); box-shadow: var(--ombra-3); }
.lente .chiudi {
  position: absolute; top: var(--s5); right: var(--s5);
  background: var(--bg-2); color: var(--fg); border: 0; border-radius: var(--r-pallino);
  width: 38px; height: 38px; font-size: 1.1rem; cursor: pointer; box-shadow: var(--ombra-2);
}

/* ------------------------------------------------------------------ dove */
.dove .gabbia { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s7); }
.dove h2 { font-size: var(--t-titolo); }
/* Un bottone NON è un link di testo: se una regola di contesto gli riscrive il
   colore, il testo sparisce sul suo fondo. È già successo due volte — con
   «Prenota» nella barra e col numero di telefono qui — e si evita solo così. */
.dove a:not(.bottone) { color: var(--fg-su-scuro); }
.orari { width: 100%; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; }
.orari th { text-align: left; font-weight: 400; color: var(--fg-3-scuro); padding: var(--s2) 0; }
.orari td { text-align: right; padding: var(--s2) 0; }
.orari td { color: var(--fg-2-scuro); }
.orari tr + tr th, .orari tr + tr td { border-top: 1px solid var(--linea-scuro-2); }
.orari .oggi th, .orari .oggi td { color: var(--bianco); }
.orari .chiuso th, .orari .chiuso td { color: var(--fg-3-scuro); }

/* ------------------------------------------------------------------ piede */
.piede { background: var(--bg-scuro); color: var(--fg-2-scuro); padding-block: var(--s7) var(--s6); }
.piede .gabbia { display: flex; flex-wrap: wrap; gap: var(--s5); justify-content: space-between; align-items: center; }
.piede a { color: inherit; text-decoration: none; }
.piede a:hover { color: var(--fg-su-scuro); }

/* ----------------------------------------------------------------- moduli */
/* `minmax(0, 1fr)`: senza, gli elementi di una griglia hanno min-width:auto e
   una fila di orari sfonda la colonna invece di andare a capo. */
.modulo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
.campo { display: grid; gap: var(--s2); }
.campo > span { font-size: var(--t-micro); letter-spacing: var(--s-micro); text-transform: uppercase; color: var(--fg-3); font-weight: 500; }
input[type=text], input[type=tel], input[type=email], input[type=date],
input[type=time], input[type=number], input[type=password], select, textarea {
  font: 300 var(--t-corpo)/1.5 var(--f-testo);
  color: var(--fg);
  background: var(--bg-2);
  border: 1px solid var(--linea);
  border-radius: var(--r1);
  padding: 0.7rem 0.875rem;
  width: 100%;
  box-shadow: var(--ombra-dentro);
  transition: border-color var(--d-micro) var(--e-out), box-shadow var(--d-micro) var(--e-out);
}
input:hover, select:hover, textarea:hover { border-color: var(--linea-2); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accento); box-shadow: 0 0 0 3px var(--accento-velo); }
textarea { min-height: 6rem; resize: vertical; }

.scelte { display: grid; gap: var(--s2); }
/* Dieci schede in colonna spingevano il calendario due schermate sotto: su due
   colonne il modulo sta in una vista sola, che è la differenza fra prenotare e
   chiudere la pagina. */
.scelte--due { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .scelte--due { grid-template-columns: 1fr; } }
.scelta {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) var(--s4); border: 1px solid var(--linea); border-radius: var(--r2);
  background: var(--bg-2); cursor: pointer;
  transition: border-color var(--d-micro) var(--e-out), box-shadow var(--d-micro) var(--e-out);
}
.scelta:hover { border-color: var(--linea-2); }
.scelta:has(input:checked) { border-color: var(--accento); box-shadow: 0 0 0 1px var(--accento); }
.scelta input { margin-top: .3rem; accent-color: var(--accento); }
.scelta .conto { margin-left: auto; text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; color: var(--fg-2); font-size: var(--t-piccolo); }

.orari-liberi { display: flex; flex-wrap: wrap; gap: var(--s2); min-width: 0; }
.orari-liberi label {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 4.5rem; padding: var(--s3) var(--s4);
  border: 1px solid var(--linea); border-radius: var(--r1);
  background: var(--bg-2); cursor: pointer;
  font-variant-numeric: lining-nums tabular-nums; font-size: var(--t-piccolo);
  transition: border-color var(--d-micro) var(--e-out), background var(--d-micro) var(--e-out);
}
.orari-liberi input { position: absolute; opacity: 0; pointer-events: none; }
.orari-liberi label:hover { border-color: var(--linea-2); }
.orari-liberi label:has(input:checked) { background: var(--fg); border-color: var(--fg); color: var(--bg-1); }
.orari-liberi label:has(input:focus-visible) { outline: 2px solid var(--accento); outline-offset: 2px; }

.avviso {
  padding: var(--s4) var(--s5); border-radius: var(--r2);
  border-left: 2px solid var(--accento);
  background: var(--accento-velo); color: var(--fg);
  font-size: var(--t-piccolo);
}
.avviso--errore { border-color: var(--errore); background: oklch(0.52 0.14 28 / .08); }
.avviso ul { margin: var(--s2) 0 0; padding-left: 1.1rem; }

/* Le due colonne (modulo + riepilogo) esistono solo se c'è spazio: sotto i
   900px diventano una sola, e il riepilogo smette di stare appiccicato. */
.due-colonne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: var(--s8);
  align-items: start;
}
.appiccicato { position: sticky; top: 6rem; }
@media (max-width: 900px) {
  .due-colonne { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .appiccicato { position: static; }
  .due-colonne > aside { order: -1; }     /* il riepilogo sopra, dove si legge */
}

.scheda {
  background: var(--bg-2); border: 1px solid var(--linea);
  border-radius: var(--r3); padding: var(--s6);
  box-shadow: var(--ombra-1);
}

/* ------------------------------------------- l'area della cliente: la risposta
   La fascia che apre la pagina della cliente. Non è una scheda fra le altre:
   è **la** risposta, e si vede da tre cose — il fondo chiaro, il filetto
   rame sul fianco, e l'ora scritta nel display, che in tutto il sito è il
   corpo riservato alle cose che si guardano invece di leggersi. */
.prossimo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s5); align-items: end;
  background: var(--bg-2); border: 1px solid var(--linea);
  border-left: 3px solid var(--accento);
  border-radius: var(--r3); padding: var(--s6);
  box-shadow: var(--ombra-2);
  margin-bottom: var(--s7);
}
.prossimo--vuoto { border-left-color: var(--linea-2); }
.prossimo__testo { display: grid; gap: var(--s2); }
.prossimo__quando {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3);
  margin-top: var(--s1);
}
.prossimo__quando b {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(2rem, 5vw, 3rem); line-height: 1;
  letter-spacing: var(--s-titolo);
  font-variant-numeric: lining-nums;
}
.prossimo__quando span { color: var(--fg-2); font-size: var(--t-corpo); }
.prossimo__cosa { color: var(--fg-2); max-width: 52ch; }
.prossimo__conto {
  display: block; margin-top: var(--s1);
  color: var(--fg-3); font-size: var(--t-piccolo);
  font-variant-numeric: lining-nums tabular-nums;
}
.prossimo__gesti { display: grid; gap: var(--s3); justify-items: end; }
/* L'etichetta viveva solo nel CSS del CRM: in questa pagina «confermato» era
   testo nudo, con lo stesso peso di tutto il resto. */
.etichetta {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 2px var(--s3); border-radius: var(--r-pallino);
  border: 1px solid var(--linea); font-size: var(--t-micro);
  letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2);
  white-space: nowrap;
}
.etichetta--ok { border-color: var(--accento); color: var(--accento); }

/* Gli appuntamenti che vengono dopo il primo: una riga, non una scheda. */
.prossimi-righe { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.prossimi-righe li {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  gap: var(--s2) var(--s4); align-items: baseline;
  padding: var(--s3) 0; border-bottom: 1px solid var(--linea);
}
.prossimi-righe__quando { font-weight: 500; font-variant-numeric: lining-nums tabular-nums; }
.prossimi-righe__cosa { color: var(--fg-2); font-size: var(--t-piccolo); }
.come-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--t-piccolo); color: var(--fg-3);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--linea-2);
}
.come-link:hover { color: var(--accento); text-decoration-color: currentColor; }

/* La piega: il passato si apre, non si subisce. */
.piega > summary {
  cursor: pointer; list-style: none;
  padding: var(--s3) 0; color: var(--fg-2); font-size: var(--t-piccolo);
  border-bottom: 1px solid var(--linea);
}
.piega > summary::-webkit-details-marker { display: none; }
.piega > summary::after { content: ' ↓'; color: var(--fg-3); }
.piega[open] > summary::after { content: ' ↑'; }
.piega > summary:hover { color: var(--accento); }

@media (max-width: 620px) {
  .prossimo { grid-template-columns: 1fr; align-items: start; }
  .prossimo__gesti { justify-items: start; }
  .prossimi-righe li { grid-template-columns: minmax(0, 1fr) auto; }
  .prossimi-righe__cosa { grid-column: 1; }
}

/* ------------------------------------------------------------ animazioni */
/* Il contenuto è visibile di default: l'animazione esiste solo se il JS gira e
   mette .animazioni sull'html. Una pagina che si nasconde da sola e aspetta uno
   script è una pagina che, se lo script tarda, non c'è. */
.animazioni .entra { opacity: 0; transform: translateY(14px); }
.animazioni .entra.vista { opacity: 1; transform: none; transition: opacity var(--d-cine) var(--e-out), transform var(--d-cine) var(--e-out); }
.animazioni .filetto.entra { transform: scaleX(0); opacity: 1; }
.animazioni .filetto.entra.vista { transform: scaleX(1); transition: transform var(--d-base) var(--e-out); }

/* ----------------------------------------------------------------- schermi */
@media (max-width: 900px) {
  .apertura .gabbia { grid-template-columns: 1fr; gap: var(--s5); }
  .monogramma { order: -1; justify-self: start; }
  .monogramma img { width: min(62%, 260px); margin-bottom: 0; }
  .apertura h1 { max-width: 16ch; }
  .mosaico { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 10rem; }
  .mosaico--home:has(.scatto:nth-child(5)) { grid-template-areas: 'grande grande' 'due tre' 'quattro cinque'; }
  .menu { gap: var(--s4); }
  .menu .solo-largo { display: none; }
}
@media (max-width: 620px) {
  /* Il nome per esteso non ci sta senza spezzarsi: resta il monogramma, che è
     lo stesso marchio. Un nome mandato a capo è peggio di un nome assente. */
  .marchio span { display: none; }
  .marchio img { width: 30px; height: 30px; }
}
@media (max-width: 560px) {
  .voce { grid-template-columns: 1fr; }
  .voce .conto { text-align: left; }
  .mosaico { grid-auto-rows: 9rem; }
}

/* --------------------------------------------------------------- prodotti
   Il listino dei trattamenti è una lista: si legge riga per riga, il prezzo a
   destra. I prodotti no — sono oggetti, e un oggetto si guarda prima di
   leggerlo. Quindi schede con la foto in alto, non righe. */
.prodotti {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--s5);
}
.prodotto {
  display: flex; flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--linea);
  border-radius: var(--r2);
  overflow: hidden;
  transition: transform var(--d-micro) var(--e-out), box-shadow var(--d-micro) var(--e-out);
}
.prodotto:hover { transform: translateY(-2px); box-shadow: var(--ombra-1); }
.prodotto__foto { aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-1); }
.prodotto__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prodotto__testo { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.prodotto__testo h3 { font-size: 1.25rem; line-height: 1.2; }
.prodotto__testo p { color: var(--fg-2); font-size: var(--t-piccolo); }
.prodotto__conto {
  margin-top: auto; padding-top: var(--s3);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3);
  font-variant-numeric: lining-nums tabular-nums;
}
.prodotto__conto .prezzo { font-family: var(--f-display); font-size: 1.5rem; color: var(--fg-1); }
.prodotto__conto { font-variant-numeric: lining-nums tabular-nums; }

/* Nella pagina della cliente il consiglio è un consiglio, non la vetrina: le
   stesse schede a tutta larghezza schiacciavano lo storico dei trattamenti —
   due righe di testo — sotto milletrecento pixel di prodotti. Qui diventano
   righe: miniatura quadrata, testo, e il gesto in fondo. */
.prodotti--righe { grid-template-columns: 1fr; gap: var(--s3); }
.prodotti--righe .prodotto { flex-direction: row; align-items: stretch; }
/* niente aspect-ratio qui: la miniatura deve arrivare in fondo alla riga,
   qualunque altezza le dia il testo accanto */
.prodotti--righe .prodotto__foto { aspect-ratio: auto; flex: 0 0 5.5rem; min-height: 5.5rem; }
.prodotti--righe .prodotto__testo { padding: var(--s3) var(--s4); gap: var(--s1); }
.prodotti--righe .prodotto__testo h3 { font-size: 1.0625rem; }
.prodotti--righe .prodotto__conto { padding-top: var(--s2); gap: var(--s4); }
.prodotti--righe .prodotto__conto .prezzo { font-size: 1.25rem; }
@media (min-width: 560px) {
  .prodotti--righe .prodotto__testo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center; gap: var(--s2) var(--s4);
  }
  .prodotti--righe .prodotto__testo .micro { grid-column: 1; grid-row: 1; }
  .prodotti--righe .prodotto__testo h3 { grid-column: 1; grid-row: 2; }
  .prodotti--righe .prodotto__testo p:not(.micro):not(.prodotto__conto) { grid-column: 1; grid-row: 3; }
  .prodotti--righe .prodotto__conto { grid-column: 2; grid-row: 1 / -1; margin: 0; padding: 0; display: block; text-align: right; }
  .prodotti--righe .prodotto__conto .micro { display: block; }
  .prodotti--righe .prodotto form { grid-column: 3; grid-row: 1 / -1; }
}

/* ------------------------------------------------------------- i ritratti
   Non la griglia di schede uguali: le persone si guardano una per volta. Foto
   alta a sinistra, parole a destra, e la riga dopo specchiata — così l'occhio
   scende a zig-zag invece di scorrere una colonna. */
.ritratti { display: grid; gap: var(--s7); }
.ritratto {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--s5) var(--s6);
  align-items: center;
}
/* Le righe pari si specchiano scambiando le COLONNE, non con `direction: rtl`.
   Con quello si invertivano le posizioni ma non le misure: la colonna larga
   restava a sinistra, il testo ci si incollava al bordo e in mezzo alla riga
   si apriva un buco che le righe dispari non avevano. */
.ritratto:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); }
.ritratto:nth-child(even) .ritratto__foto { order: 2; }
.ritratto:nth-child(even) .ritratto__testo { order: 1; justify-self: end; }
.ritratto__foto {
  aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--r3); background: var(--bg-1);
  box-shadow: var(--ombra-2);
}
.ritratto__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ritratto__foto--vuota {
  display: grid; place-items: center;
  border: 1px solid var(--linea);
  box-shadow: none;
}
.ritratto__foto--vuota span {
  font-family: var(--f-display); font-size: 4rem; color: var(--linea-2);
}
.ritratto__testo { display: grid; gap: var(--s3); justify-items: start; }
.ritratto__testo h3 { font-size: 2rem; line-height: 1.1; }
.ritratto__testo p:not(.micro) { color: var(--fg-2); max-width: 46ch; }
.ritratto__cose {
  list-style: none; padding: 0; margin: var(--s2) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--s2);
}
.ritratto__cose li {
  border: 1px solid var(--linea); border-radius: var(--r-pallino);
  padding: 2px var(--s3);
  font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-2);
}
@media (max-width: 700px) {
  .ritratto, .ritratto:nth-child(even) { grid-template-columns: 1fr; }
  .ritratto:nth-child(even) .ritratto__foto { order: 0; }
  .ritratto:nth-child(even) .ritratto__testo { order: 0; justify-self: start; }
  .ritratto__foto { max-width: 13rem; }
}

/* ======================================================== le cinque stelle
   Radio veri, non icone cliccabili con JavaScript: funzionano senza script,
   si toccano con il pollice, arrivano con il tab e un lettore di schermo le
   legge come «5 stelle su 5». Costa tre righe di CSS in più e vale ogni riga.

   L'ordine nel markup è 5→1 e il blocco è `row-reverse`: in CSS un selettore
   guarda solo in avanti (`~`), quindi per accendere anche le stelle a sinistra
   di quella scelta bisogna scriverle al contrario e poi rigirarle. È il
   trucco vecchio di vent'anni, ed è ancora l'unico che non chiede script. */
.stelle { display: flex; flex-direction: row-reverse; justify-content: flex-end;
          gap: var(--s2); margin-top: var(--s4); }
.stelle input { position: absolute; opacity: 0; width: 0; height: 0; }
.stelle label {
  font-size: 2rem; line-height: 1; cursor: pointer; color: var(--linea-2);
  transition: color var(--d-micro) var(--e-out), transform var(--d-micro) var(--e-out);
  /* Il bersaglio del dito, non quello dell'occhio. Il glifo è alto 32px e le
     stelle erano a 8px l'una dall'altra: su un telefono si sbaglia mira, e
     sbagliare mira qui vuol dire mandare un voto che non è il tuo. Il riempimento
     porta la zona sensibile a 44px e il margine negativo tiene lo spazio
     visibile dov'era. */
  padding: var(--s2); margin: calc(var(--s2) * -1);
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.stelle label:hover, .stelle label:active { transform: scale(1.12); }
.stelle input:checked ~ label,
.stelle label:hover, .stelle label:hover ~ label { color: var(--accento); }
/* il contorno di messa a fuoco deve restare visibile: la stella è l'unica
   cosa cliccabile del blocco, e chi naviga da tastiera deve vedere dov'è */
.stelle input:focus-visible + label { outline: 2px solid var(--accento);
                                      outline-offset: 3px; border-radius: var(--r1); }

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

/* ==========================================================================
   LE FASCE BRUNE

   La pagina si scurisce scendendo: crema, crema, bruno (i lavori), crema,
   crema, e poi bruno fino in fondo. Prima il bruno esisteva solo negli ultimi
   seicento pixel di quindicimila, e quindi in pratica non esisteva: una pagina
   senza i due estremi in campo è nebbia (ART.md §3).

   Fino a ieri ogni fascia scura si riscriveva i colori a mano dentro
   l'attributo `style` del template — quattro `oklch(...)` che vivevano fuori
   da art-tokens.css e che nessuna prova di contrasto avrebbe mai visto.
   Adesso le regole stanno qui e i valori stanno nei token.
   ========================================================================== */
.sezione--scura .micro,
.sezione--scura .intestazione p,
.sezione--scura .nota { color: var(--fg-2-scuro); }
.sezione--scura .micro { color: var(--fg-3-scuro); }
.sezione--scura .filetto { background: var(--accento-su-scuro); }
.sezione--scura .bottone--fine { color: var(--fg-su-scuro); border-color: var(--linea-scuro-2); }
.sezione--scura .bottone--fine:hover { color: var(--accento-su-scuro); border-color: var(--accento-su-scuro); }
/* il riquadro che si vede mentre la foto arriva: sul bruno, un crema chiaro è
   un lampo bianco che poi si spegne */
.sezione--scura .scatto { background: var(--linea-scuro); }

/* Sezioni brune consecutive: senza questo, fra una e l'altra restano due
   respiri sommati — 256px di bruno vuoto — e tre fasce distinte al posto di
   una sola discesa continua. */
.sezione--attaccata { padding-top: 0; }
/* e il listino si appoggia al bruno che comincia: il taglio di colore separa
   già, il respiro in più lo allontanerebbe soltanto */
.sezione--verso-il-bruno { padding-bottom: var(--s8); }

/* La nota a piè di sezione: testo piccolo normale, non micro-maiuscolo. Una
   nota che grida è più importante di ciò che commenta (giro 18). */
.nota { color: var(--fg-3); font-size: var(--t-piccolo); max-width: var(--misura); }
.sezione .stanza + .nota { margin-top: var(--s6); }

/* Intestazione col gesto a destra, dove la riga è larga abbastanza */
.intestazione--riga { flex-direction: row; justify-content: space-between;
                      align-items: flex-end; flex-wrap: wrap; }

/* ============================================================== i tre passi

   Tre passi e un filo di rame da un pixel che entra da sinistra, gira attorno
   ai numeri ed esce a destra. È lo stesso tratto del monogramma — una linea
   continua che non si stacca mai dal foglio (ART.md, riferimento 2).

   Si disegna scorrendo, e la regola che governa quel movimento l'ho imparata
   rompendola sulla soglia: **un'animazione legata allo scorrimento deve finire
   nello stato che l'elemento ha senza l'animazione.** Qui lo stato di base è il
   filo intero (`stroke-dashoffset: 0`); la corsa finisce lì, quindi risalire di
   scatto non può lasciare impresso un fotogramma a metà. Sulla soglia finiva in
   `exit`, cioè a metà trasformazione, e il fotogramma restava. */
.passi__quadro { position: relative; }
.passi__lista {
  position: relative; z-index: 1;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s7) var(--s6);
}
.passi__lista li { display: grid; gap: var(--s3); align-content: start; }
.passi__numero {
  font-family: var(--f-display); font-size: 2.5rem; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--accento-su-scuro);
  /* l'alone bruno serve al filo: passandoci dietro, la linea si interrompe
     attorno alla cifra invece di attraversarla — è così che un tratto continuo
     passa dietro una lettera senza sporcarla */
  text-shadow: 0 0 12px var(--bg-scuro), 0 0 5px var(--bg-scuro),
               0 0 2px var(--bg-scuro);
}
.passi__lista h3 { font-size: var(--t-sotto); line-height: 1.15; }
.passi__lista p { color: var(--fg-2-scuro); font-size: var(--t-piccolo); max-width: 34ch; }
/* Il bottone non sta da solo in fondo a un campo di bruno vuoto: accanto ha la
   riga che risponde all'unica domanda che resta a chi non ha mai prenotato
   online da un negozio. Prima erano centosettanta pixel di niente. */
.passi__gesto { display: flex; flex-wrap: wrap; align-items: center;
                gap: var(--s5) var(--s6); margin-top: var(--s7); }
.passi__rassicura { flex: 1 1 22rem; min-width: 0;
                    color: var(--fg-2-scuro); font-size: var(--t-piccolo);
                    max-width: 46ch; }

/* Il filo sta SOLO sulla riga dei numeri — a mezza altezza delle cifre — e non
   scende mai nei paragrafi. Al primo giro li attraversava a mezza riga: non si
   leggeva come un tratto continuo, si leggeva come un graffio sullo schermo.
   Al secondo era un'onda, e a metà corsa sembrava un ghirigoro disegnato per
   sbaglio accanto a «01».

   Adesso è dritto. Cresce da sinistra a destra mentre la fascia entra, e passa
   dietro le tre cifre — che portano il loro alone bruno apposta. È la stessa
   cosa che fa il tratto del monogramma: una linea sola, continua, che non si
   stacca mai dal foglio.

   Lo stato di riposo è il filo INTERO. Senza `animation-timeline`, senza JS, o
   con il movimento ridotto, si vede un tratto finito — ed è anche lo stato in
   cui l'animazione finisce, per la regola imparata sulla soglia: un'animazione
   legata allo scorrimento deve finire dove l'elemento starebbe senza di lei,
   o risalire di scatto lascia impresso un fotogramma a metà. */
.filo {
  position: absolute; left: 0; right: 0; top: 1.25rem;   /* mezza cifra */
  height: 1px; background: var(--accento-su-scuro);
  opacity: .45; pointer-events: none;
  transform-origin: left;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .filo {
      animation: filo-si-tende linear both;
      animation-timeline: view();
      /* comincia appena la fascia entra, finisce quando è ben dentro lo
         schermo: nessun `exit`, quindi nessun fotogramma congelato */
      animation-range: entry 20% cover 55%;
    }
  }
}
@keyframes filo-si-tende { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 860px) {
  .passi__lista { grid-template-columns: 1fr; gap: var(--s6); }
  /* in colonna il filo non ha più tre curve da collegare: sarebbe un ghirigoro
     dietro il testo, e un ghirigoro non è un tratto */
  .filo { display: none; }
}

/* La parola accanto alle stelle: cosa abbiamo capito dal tocco. */
.stelle-riga { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s4); }
.stelle-riga .stelle { margin-top: 0; }
.stelle-parola {
  font-family: var(--f-display); font-size: 1.375rem; color: var(--accento);
  line-height: 1;
}
.stelle-parola:empty { display: none; }

/* La riga del permesso quando si accende da sola: un lampo, non un allarme.
   Deve farsi notare da chi sta guardando lo schermo e sparire da sola — se
   restasse evidenziata diventerebbe un errore, e non c'è nessun errore. */
@keyframes si-accende {
  from { background: var(--accento-velo); box-shadow: 0 0 0 6px var(--accento-velo); }
  to   { background: transparent; box-shadow: 0 0 0 6px transparent; }
}
.si-accende { animation: si-accende 1.4s var(--e-out) both; border-radius: var(--r2); }
@media (prefers-reduced-motion: reduce) { .si-accende { animation-duration: 0.01ms; } }