/* stile.css — Domina Hair Wellness
   Sul computer (da 75em) ogni sezione ha le proporzioni della sua fascia nella comp approvata e i pezzi stanno alle
   sue coordinate, in percentuale (x su 1440, y sull'altezza della fascia). Sul telefono si va a flusso, coi ritagli.
   Misure, raggi, ombre e famiglie solo da sistema.css. */

/* --- base ---------------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--colore-parete);
  color: var(--colore-testo);
  font-family: var(--famiglia-testo);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--colore-filetto) var(--colore-testata);
  scroll-behavior: smooth;
  scroll-padding-top: var(--altezza-testata);
}
body { margin: 0; min-height: 100vh; font-size: var(--testo-corpo); line-height: var(--interlinea-testo); caret-color: var(--colore-bottone); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: var(--linea); }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
::selection { background: var(--colore-bottone); color: var(--colore-inchiostro); }
:focus-visible { outline: 2px solid var(--colore-fuoco); outline-offset: 3px; border-radius: var(--raggio-bottone); }

.solo-lettore {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.salta {
  position: absolute; left: var(--spazio-2); top: var(--spazio-2); z-index: 20;
  padding: var(--spazio-1) var(--spazio-2);
  background: var(--colore-bottone); color: var(--colore-inchiostro);
  border-radius: var(--raggio-bottone);
  transform: translateY(-200%);
}
.salta:focus { transform: none; }

/* --- bottoni ------------------------------------------------------------------------------------------------- */
.bottone {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--altezza-bottone);
  padding: 0 var(--spazio-3);
  border: var(--linea) solid transparent;
  border-radius: var(--raggio-bottone);
  font-family: var(--famiglia-testo);
  font-size: var(--testo-etichetta);
  font-weight: var(--peso-etichetta);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 180ms var(--curva-accensione), border-color 180ms var(--curva-accensione);
}
.bottone-pieno { background: var(--colore-bottone); color: var(--colore-inchiostro); }
.bottone-pieno:hover { background: var(--colore-oro-chiaro); }
.bottone-filo { border-color: var(--colore-contorno); color: var(--colore-titolo); font-weight: var(--peso-testo); }
.bottone-filo:hover { background: color-mix(in oklch, var(--colore-contorno) 14%, transparent); border-color: var(--colore-titolo); }

/* --- testata ------------------------------------------------------------------------------------------------- */
.testata {
  position: relative; z-index: 10;
  display: flex; align-items: center; gap: var(--spazio-2);
  height: var(--altezza-testata);
  padding-inline: max(var(--margine-pagina), calc((100% - var(--larghezza-pagina)) / 2 + var(--margine-pagina)));
  background: var(--colore-testata);
  border-bottom: var(--linea) solid var(--colore-filetto-testata);
}
.testata-logo { display: block; flex: none; width: clamp(9rem, 6.5rem + 10vw, 12.8125rem); margin-left: calc(var(--spazio-1) * -1); }
.testata-menu a {
  font-size: var(--testo-piccolo);
  font-weight: var(--peso-testo);
  color: var(--colore-titolo);
  text-decoration: none;
}
.testata-menu a:hover { color: var(--colore-bottone); }
.testata-chiama { margin-left: auto; }
.testata-apri {
  display: inline-grid; place-items: center;
  width: var(--altezza-tocco); height: var(--altezza-tocco);
  padding: 0; border: 0; background: none; color: var(--colore-titolo); cursor: pointer;
}
.testata-apri svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.solo-largo { display: none; }

/* il menù sul telefono: una tendina sotto la testata */
.testata-menu {
  position: absolute; left: 0; right: 0; top: 100%;
  display: none; flex-direction: column;
  padding: var(--spazio-1) var(--margine-pagina) var(--spazio-3);
  background: var(--colore-testata);
  border-bottom: var(--linea) solid var(--colore-filetto-testata);
}
.testata-menu[data-aperto] { display: flex; }
.testata-menu a { display: flex; align-items: center; min-height: var(--altezza-tocco); border-bottom: var(--linea) solid var(--colore-filetto-testata); }

/* --- prima schermata: telefono e tavoletta (a flusso) -------------------------------------------------------- */
.apertura {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; align-items: end;
  grid-template-areas:
    "insegna insegna" "occhiello mano" "titolo titolo" "foto foto" "bottoni bottoni"
    "sotto sotto" "punti punti" "lista lista" "anni anni";
  padding: var(--spazio-3) var(--margine-pagina) var(--spazio-6);
  overflow: hidden;
}
.apertura-testo { display: contents; }
.apertura-insegna {
  grid-area: insegna; justify-self: center; width: min(100%, 24rem); margin: calc(var(--spazio-2) * -1) 0 0;
  /* il ritaglio porta la sua parete illuminata: i bordi si sfumano nella parete della pagina */
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect;
}
.occhiello {
  grid-area: occhiello;
  font-size: var(--testo-etichetta);
  font-weight: var(--peso-testo);
  letter-spacing: var(--spaziatura-maiuscole);
  text-transform: uppercase;
  color: var(--colore-testo);
}
.apertura-titolo {
  grid-area: titolo;
  margin-top: var(--spazio-2);
  font-family: var(--famiglia-titoli);
  font-size: var(--testo-titolo);
  font-weight: var(--peso-titoli);
  line-height: var(--interlinea-titoli);
  letter-spacing: var(--spaziatura-titoli);
  color: var(--colore-titolo);
  text-wrap: balance;
}
.apertura-immagine { grid-area: foto; margin-top: var(--spazio-3); }
.apertura-immagine img {
  width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 42%;
  border: var(--linea-cornice) solid var(--colore-luce);
  box-shadow: var(--luce-cornice);
}
.apertura-bottoni { grid-area: bottoni; display: grid; gap: var(--spazio-1); margin-top: var(--spazio-3); }
.apertura-bottoni .bottone { min-height: var(--altezza-tocco); }
.apertura-sotto { grid-area: sotto; margin-top: var(--spazio-3); max-width: 34em; color: var(--colore-testo); text-wrap: pretty; }
.apertura-punti {
  grid-area: punti;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spazio-2) var(--spazio-1);
  margin-top: var(--spazio-4);
  font-size: var(--testo-minimo); line-height: 1.45; text-align: center; color: var(--colore-testo);
}
.apertura-punti img { width: auto; height: var(--spazio-5); margin: 0 auto var(--spazio-1); }
.apertura-mano {
  grid-area: mano;
  position: relative;
  padding-bottom: var(--spazio-1);
  font-family: var(--famiglia-mano); font-size: var(--testo-mano); font-weight: var(--peso-mano);
  line-height: 1; color: var(--colore-oro-chiaro);
  transform: rotate(-7deg);
}
.apertura-sottolineo {
  position: absolute; left: 4%; bottom: calc(var(--spazio-1) * -1); width: 100%; height: auto;
  fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round;
}
.apertura-lista {
  grid-area: lista;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--spazio-3);
  margin-top: var(--spazio-4);
}
.apertura-lista a {
  display: flex; align-items: center; min-height: var(--altezza-tocco);
  border-bottom: var(--linea) solid var(--colore-filetto);
  font-size: var(--testo-etichetta); letter-spacing: var(--spaziatura-maiuscole); text-transform: uppercase;
  color: var(--colore-titolo); text-decoration: none;
}
.apertura-lista a:hover { color: var(--colore-bottone); }
.apertura-anni {
  grid-area: anni;
  display: grid; place-content: center; gap: var(--spazio-1);
  margin-top: var(--spazio-5); padding: var(--spazio-3);
  border: var(--linea) solid var(--colore-oro); border-radius: var(--raggio-cartoncino);
  font-size: var(--testo-piccolo); text-align: center; color: var(--colore-testo);
}
.apertura-anni-numero {
  font-family: var(--famiglia-titoli); font-size: var(--testo-numero); font-weight: var(--peso-titoli);
  line-height: 1.1; color: var(--colore-titolo-sezione);
}
.apertura-velo { display: none; }

/* la barra Prenota sul telefono, quando i bottoni della prima schermata escono dallo schermo */
.barra-prenota {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--spazio-1);
  padding: var(--spazio-1) var(--margine-pagina) calc(var(--spazio-1) + env(safe-area-inset-bottom));
  background: var(--colore-testata);
  border-top: var(--linea) solid var(--colore-filetto-testata);
}
.barra-prenota[hidden] { display: none; }
.barra-prenota .bottone { min-height: var(--altezza-tocco); }

/* --- computer: la prima schermata alle coordinate della comp (fascia 102–950, 1440 × 848) --------------------- */
@media (min-width: 48em) {
  .solo-largo { display: inline; }
}

@media (min-width: 75em) {
  .testata-apri { display: none; }
  .testata-menu,
  .testata-menu[data-aperto] {
    position: static; display: flex; flex-direction: row; justify-content: space-between;
    width: 45.18%; margin-left: auto; padding: 0;             /* il menù della comp va da 498 a 1098 */
    background: none; border: 0;
  }
  .testata-menu a { min-height: 0; border: 0; }
  .testata-chiama { margin-left: var(--spazio-4); }           /* più lo spazio della testata: 48 px come nella comp */
  .testata-logo { width: auto; }

  .apertura {
    display: block;
    width: 100%; max-width: var(--larghezza-pagina); margin-inline: auto;
    aspect-ratio: 1440 / 848;
    padding: 0;
  }
  .apertura-testo, .apertura-mano, .apertura-lista, .apertura-anni, .apertura-velo, .apertura-immagine { position: absolute; }
  .apertura-immagine { inset: 0; margin: 0; }
  .apertura-immagine img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border: 0; box-shadow: none; }
  .apertura-insegna { display: none; }

  .apertura-testo { display: block; left: 3.889%; top: 14.5%; width: 34.1%; }
  .apertura-titolo { margin-top: var(--spazio-2); }
  .apertura-sotto { margin-top: var(--spazio-2); max-width: none; }
  .apertura-sotto .a-capo { display: block; }
  .apertura-bottoni { display: flex; gap: var(--spazio-3); margin-top: var(--spazio-4); }
  .apertura-bottoni .bottone { min-height: var(--altezza-bottone); }
  /* le quattro icone coi centri della comp: 41, 187, 314 e 432 px dal bordo del testo (su 491) */
  .apertura-punti { grid-template-columns: 1fr; margin-top: var(--spazio-5); }
  .apertura-punti li { grid-area: 1 / 1; justify-self: start; translate: -50% 0; }
  .apertura-punti li:nth-child(1) { margin-left: 8.35%; }
  .apertura-punti li:nth-child(2) { margin-left: 38.09%; }
  .apertura-punti li:nth-child(3) { margin-left: 63.95%; }
  .apertura-punti li:nth-child(4) { margin-left: 87.98%; }
  .apertura-punti .a-capo { display: block; }
  .apertura-punti img { height: auto; margin-bottom: var(--spazio-2); }

  .apertura-mano { left: 81.11%; top: 10.4%; margin: 0; }
  .apertura-lista {
    left: 81.25%; top: 22.5%; width: 15.14%; height: 51.3%;
    display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; margin: 0;
  }
  .apertura-lista a { height: 100%; min-height: 0; }
  .apertura-lista li:last-child a { border-bottom: 0; }
  .apertura-anni { left: 80.83%; top: 77.6%; width: 15.63%; height: 14.5%; margin: 0; padding: 0; gap: 0; }

  /* l'insegna e le nicchie si accendono: un velo del colore della parete sopra il ritaglio, che si toglie */
  .apertura-velo {
    display: block; left: 38.06%; top: 1.18%; width: 41.11%; height: 95.5%;
    background: var(--colore-parete);
    mask-image: radial-gradient(closest-side, #000 82%, transparent);
    opacity: 0; pointer-events: none;
  }
}

@media (min-width: 90.01em) {
  .apertura-immagine img { mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
}

/* --- titoli di sezione e link ------------------------------------------------------------------------------- */
.titolo-sezione {
  font-family: var(--famiglia-titoli);
  font-size: var(--testo-sezione);
  font-weight: var(--peso-sezione);
  line-height: var(--interlinea-titoli);
  letter-spacing: var(--spaziatura-titoli);
  color: var(--colore-titolo-sezione);
  text-wrap: balance;
}
.link-listino {
  font-size: var(--testo-piccolo);
  color: var(--colore-oro-chiaro);
  text-decoration: underline;
  text-underline-offset: 0.35em;
}
.link-listino:hover { color: var(--colore-titolo); }

/* --- servizi: telefono (una colonna di tessere nella cornice di luce) ----------------------------------------- */
.servizi {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--spazio-3) var(--spazio-2);
  padding: var(--spazio-6) var(--margine-pagina);
}
.servizi-tessere { grid-column: 1 / -1; display: grid; gap: var(--spazio-4); }
.tessera a { display: block; color: inherit; text-decoration: none; }
.tessera-foto { display: block; overflow: hidden; }
.tessera-pannello { display: grid; }
.tessera-nome { font-family: var(--famiglia-titoli); font-size: var(--testo-voce); font-weight: var(--peso-titoli); line-height: 1.2; color: var(--colore-titolo); }
.tessera-sotto { margin-top: calc(var(--spazio-1) / 2); font-size: var(--testo-minimo); line-height: 1.5; color: var(--colore-testo); }
.tessera-prezzo {
  margin-top: var(--spazio-1); padding-top: var(--spazio-1);
  border-top: var(--linea) solid var(--colore-filetto);
  font-size: var(--testo-etichetta); line-height: 1.2; color: var(--colore-testo);
}
.tessera a:hover .tessera-nome { color: var(--colore-bottone); }

@media (max-width: 74.99em) {
  .tessera a {
    border: var(--linea-cornice) solid var(--colore-luce);
    box-shadow: var(--luce-cornice);
    background: var(--colore-pannello);
  }
  /* il ritaglio porta la sua cornice disegnata: al telefono la cornice è quella del CSS, e si mostra solo la foto */
  .tessera-foto { aspect-ratio: 399 / 317; }
  .tessera-foto img { width: 104.5%; max-width: none; margin: -2.26% 0 0 -2.5%; }
  .tessera-pannello { padding: var(--spazio-2) var(--spazio-3) var(--spazio-3); }
  /* zone da toccare di 48 px al telefono: link di testo, filtri corti e voci del piede */
  .link-listino, .piede-colonna a { display: inline-flex; align-items: center; min-height: var(--altezza-tocco); }
  .lavori-filtri button { min-width: var(--altezza-tocco); }
}

/* --- servizi: computer (fascia 950–1970, 1440 × 1020) ------------------------------------------------------- */
@media (min-width: 75em) {
  .sezione-fondo {
    position: relative; display: block;
    width: 100%; max-width: var(--larghezza-pagina); margin-inline: auto;
    padding: 0;
    background-repeat: no-repeat; background-size: 100% 100%;
  }
  .sezione-fondo > * { position: absolute; margin: 0; }
  .servizi { aspect-ratio: 1440 / 1020; }
  .servizi { background-image: image-set(url("media/foto/servizi-fondo-1440.avif") type("image/avif"), url("media/foto/servizi-fondo-1440.webp") type("image/webp")); }
  .servizi-titolo { left: 3.889%; top: 2.4%; }
  .link-listino { right: 5.42%; top: 4.6%; }
  .servizi-tessere { inset: 0; display: block; pointer-events: none; }
  .tessera { position: absolute; pointer-events: auto; }
  .tessera a { height: 100%; }
  .tessera-foto img { width: 100%; }
  .tessera-pannello { padding: var(--spazio-1) 8.6% 0 8.2%; }
  /* il testo non comincia alla stessa distanza in ogni tessera della comp: 34, 16, 21 / 30, 18, 25 px */
  .tessera-colore .tessera-pannello { padding-left: 3.9%; }
  .tessera-taglio .tessera-pannello { padding-left: 4.8%; }
  .tessera-acconciature .tessera-pannello { padding-left: 7.2%; }
  .tessera-trattamenti .tessera-pannello { padding-left: 4.4%; }
  .tessera-unghie .tessera-pannello { padding-left: 5.7%; }
  .tessera-schiariture, .tessera-acconciature { left: 3.889%; width: 28.958%; }
  .tessera-colore, .tessera-trattamenti { left: 34.792%; width: 28.611%; }
  .tessera-taglio, .tessera-unghie { left: 65.417%; width: 30.556%; }
  .tessera-schiariture, .tessera-colore, .tessera-taglio { top: 10.588%; height: 44.314%; }
  .tessera-acconciature, .tessera-trattamenti, .tessera-unghie { top: 57.451%; height: 42.549%; }
}

/* --- lavori: telefono (due colonne; il prima e dopo a tutta larghezza) -------------------------------------- */
.lavori {
  display: grid; grid-template-columns: 1fr; gap: var(--spazio-3);
  padding: var(--spazio-6) var(--margine-pagina);
}
.lavori-filtri { display: flex; flex-wrap: wrap; gap: 0 var(--spazio-3); }
.lavori-filtri button {
  min-height: var(--altezza-tocco); padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--famiglia-testo); font-size: var(--testo-minimo); color: var(--colore-titolo);
  text-decoration: underline transparent; text-decoration-thickness: var(--linea); text-underline-offset: 0.45em;
  transition: text-decoration-color 180ms var(--curva-accensione), color 180ms var(--curva-accensione);
}
.lavori-filtri button:hover { color: var(--colore-bottone); }
.lavori-filtri button[aria-pressed="true"] { color: var(--colore-bottone); text-decoration-color: var(--colore-bottone); }
.lavori-instagram { justify-self: start; }
.lavori-tessere { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spazio-4) var(--spazio-3); }
.lavoro { transition: opacity 300ms var(--curva-accensione); }
.lavoro.spento { opacity: 0.22; }
.lavoro img { width: 100%; }
.lavoro-nome {
  margin-top: var(--spazio-2);
  font-family: var(--famiglia-titoli); font-size: var(--testo-voce); font-weight: var(--peso-titoli);
  line-height: 1.2; text-align: center; color: var(--colore-titolo);
}
.lavoro-primadopo { grid-column: 1 / -1; }
.primadopo {
  position: relative; display: flex; aspect-ratio: 1;
  border: var(--linea-cornice) solid var(--colore-luce); box-shadow: var(--luce-cornice);
  overflow: hidden;
}
.primadopo img { height: 100%; object-fit: cover; min-width: 0; }
.primadopo-prima { width: var(--pos); }
.primadopo-dopo { width: calc(100% - var(--pos)); border-left: 2px solid var(--colore-titolo); }
.primadopo-pomello {
  position: absolute; left: var(--pos); top: 50%; translate: -50% -50%;
  width: var(--spazio-4); height: var(--spazio-4); border-radius: 50%;
  background: var(--colore-bottone);
  pointer-events: none;
}
.primadopo-pomello::before {
  content: ""; position: absolute; inset: 30% 42%; border-radius: var(--raggio-bottone);
  background: var(--colore-inchiostro);
}
.primadopo-cursore {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
}
.primadopo:has(.primadopo-cursore:focus-visible) { outline: 2px solid var(--colore-fuoco); outline-offset: 3px; }
.lavori-avviso { font-size: var(--testo-corpo); color: var(--colore-testo); }
.lavori-avviso a { color: var(--colore-oro-chiaro); }
.nota-mano {
  position: relative; justify-self: end;
  padding-bottom: var(--spazio-1);
  font-family: var(--famiglia-mano); font-size: var(--testo-mano); font-weight: var(--peso-mano);
  line-height: 1; color: var(--colore-oro-chiaro);
  transform: rotate(-7deg);
}
.nota-sottolineo {
  position: absolute; left: 2%; bottom: calc(var(--spazio-1) * -1); width: 100%; height: auto;
  fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round;
}

/* --- lavori: computer (fascia 1970–2560, 1440 × 590) -------------------------------------------------------- */
@media (min-width: 75em) {
  .lavori { aspect-ratio: 1440 / 590; padding: 0; }
  .lavori { background-image: image-set(url("media/foto/lavori-fondo-1440.avif") type("image/avif"), url("media/foto/lavori-fondo-1440.webp") type("image/webp")); }
  .lavori-titolo { left: 3.68%; top: 10.3%; }
  .lavori-filtri { left: 33.1%; top: 12.4%; width: 37.99%; flex-wrap: nowrap; justify-content: space-between; }
  .lavori-filtri button { min-height: 0; line-height: 1.5; }
  .lavori-instagram { right: 5.07%; top: 12.4%; }
  .lavori-tessere { inset: 0; display: block; pointer-events: none; }
  .lavoro { position: absolute; top: 23.56%; pointer-events: auto; }
  .lavoro-rame { left: 3.75%; width: 18.82%; }
  .lavoro-taglio { left: 23.75%; width: 16.32%; }
  .lavoro-raccolto { left: 41.32%; width: 16.875%; }
  .lavoro-balayage { left: 59.31%; width: 13.54%; }
  .lavoro-primadopo { left: 74.03%; width: 22.15%; }
  /* il prima e dopo sta dentro la cornice disegnata nella comp (9 px per lato) */
  .primadopo { aspect-ratio: 319 / 320; border: 0; box-shadow: none; padding: 2.82%; }
  .lavori-avviso { left: 3.75%; top: 88%; width: 45%; }
  .lavori-mano { position: absolute; left: 72.9%; top: 87.2%; }
}

/* --- chi siamo e prenota: telefono ------------------------------------------------------------------------- */
.chi-siamo { display: grid; gap: var(--spazio-3); padding: var(--spazio-6) var(--margine-pagina); }
.squadra { width: 100%; }
.chi-siamo-titolo { margin-top: var(--spazio-2); }
.chi-siamo-mano { justify-self: start; font-size: var(--testo-mano-grande); transform: rotate(-6deg); }
.chi-siamo-testo, .chi-siamo-citazione { font-size: var(--testo-corpo-grande); line-height: var(--interlinea-testo); color: var(--colore-testo); text-wrap: pretty; }
.chi-siamo-bottone { justify-self: start; font-size: var(--testo-corpo-grande); }
.prenota {
  display: grid; gap: var(--spazio-2);
  margin-top: var(--spazio-4); padding: var(--spazio-4) var(--spazio-3);
  border: var(--linea) solid var(--colore-oro); border-radius: var(--raggio-cartoncino);
}
.prenota-titolo { font-family: var(--famiglia-titoli); font-size: var(--testo-riquadro); font-weight: var(--peso-titoli); line-height: var(--interlinea-titoli); color: var(--colore-titolo); text-wrap: balance; }
.prenota-riga { font-size: var(--testo-corpo-grande); color: var(--colore-testo); }
.prenota .bottone { min-height: var(--altezza-tocco); white-space: normal; text-align: center; padding-block: var(--spazio-1); }
.prenota-chiama { font-size: var(--testo-bottone-grande); }
.prenota-treatwell, .prenota-whatsapp { font-size: var(--testo-bottone-medio); }
.orari { margin: var(--spazio-1) 0 0; font-size: var(--testo-corpo-grande); line-height: var(--interlinea-testo); color: var(--colore-testo); }
.orari div { display: flex; flex-wrap: wrap; column-gap: 0.6em; }
.orari dt, .orari dd { margin: 0; }
.orari .oggi { color: var(--colore-titolo); }
.aperto { font-size: var(--testo-piccolo); color: var(--colore-oro-chiaro); }
.aperto:empty { display: none; }
.prenota-mano { justify-self: end; transform: rotate(-5deg); }

/* --- chi siamo e prenota: computer (fascia 2560–4070, 1440 × 1510) ------------------------------------------ */
@media (min-width: 75em) {
  .chi-siamo { aspect-ratio: 1440 / 1510; padding: 0; }
  .chi-siamo { background-image: image-set(url("media/foto/chi-siamo-fondo-1440.avif") type("image/avif"), url("media/foto/chi-siamo-fondo-1440.webp") type("image/webp")); }
  .squadra { left: 3.333%; top: 2.053%; width: 91.597%; }
  .chi-siamo-titolo { left: 5.486%; top: 48.4%; margin: 0; font-size: calc(var(--testo-sezione) * 1.25); }   /* nella comp è più grande degli altri titoli: 300 px di riga */
  .chi-siamo-mano { position: absolute; left: 5.63%; top: 54.64%; }
  .chi-siamo-testo { left: 5.556%; top: 60.86%; width: 38.9%; }
  .chi-siamo-citazione { left: 5.556%; top: 79.27%; width: 38.9%; }
  .chi-siamo-testo .a-capo, .chi-siamo-citazione .a-capo { display: block; }
  .chi-siamo-bottone { left: 5.35%; top: 90.2%; width: 26.46%; height: 5.3%; font-size: var(--testo-bottone-medio); }
  .prenota { left: 44.861%; top: 48.675%; width: 49.861%; height: 49.338%; display: block; margin: 0; padding: 0; }
  .prenota > * { position: absolute; margin: 0; }
  .prenota-titolo, .prenota-riga, .prenota .bottone, .orari, .aperto { left: 6.4%; }
  .prenota-titolo { top: 3.6%; }
  .prenota-riga { top: 13.7%; }
  .prenota .bottone { width: 87.2%; padding-block: 0; }
  .prenota-chiama { top: 22.3%; height: 10.9%; }
  .prenota-treatwell { top: 36.4%; height: 9.9%; }
  .prenota-whatsapp { top: 49.4%; height: 9.8%; }
  .orari { top: 63%; }
  .aperto { top: 92%; font-size: var(--testo-minimo); }
  .prenota-mano { position: absolute; left: 38.6%; top: 87.2%; }
}

/* --- listino: a flusso anche sul computer, alle misure della comp (le schede lunghe allungano la sezione) ------ */
.listino { display: grid; gap: var(--spazio-4); padding: var(--spazio-6) var(--margine-pagina); }
.listino-corpo { min-width: 0; }
.listino-schede {
  display: flex; gap: var(--spazio-3); overflow-x: auto; scrollbar-width: none;
  margin-top: var(--spazio-3);
  border-bottom: var(--linea) solid var(--colore-filetto);
}
.listino-schede button {
  flex: none; min-height: var(--altezza-tocco); padding: 0 0 var(--spazio-1);
  border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  font-family: var(--famiglia-testo); font-size: var(--testo-minimo); color: var(--colore-titolo);
  transition: border-color 180ms var(--curva-accensione), color 180ms var(--curva-accensione);
}
.listino-schede button:hover { color: var(--colore-bottone); }
.listino-schede button[aria-selected="true"] { border-bottom-color: var(--colore-bottone); color: var(--colore-bottone); }
.listino table { width: 100%; border-collapse: collapse; font-size: var(--testo-corpo); }
.listino tr { border-bottom: var(--linea) solid var(--colore-filetto); }
.listino tr:last-child { border-bottom: 0; }
.listino th, .listino td { padding: var(--spazio-2) 0; font-weight: var(--peso-testo); line-height: 1.2; vertical-align: baseline; }
.listino th { text-align: left; color: var(--colore-titolo); padding-right: var(--spazio-2); }
.listino td { color: var(--colore-testo); white-space: nowrap; font-variant-numeric: tabular-nums; }
.listino td:first-of-type { padding-right: var(--spazio-2); }
.listino td:last-child { text-align: right; font-size: var(--testo-corpo-grande); color: var(--colore-oro-chiaro); }
.listino-nota { margin-top: var(--spazio-2); font-size: var(--testo-corpo); color: var(--colore-testo); }
.listino-foto { justify-self: center; width: min(70%, 16rem); }

@media (min-width: 75em) {
  .listino {
    position: relative; display: block;
    width: 100%; max-width: var(--larghezza-pagina); min-height: min(55.56vw, 50rem); margin-inline: auto;
    padding: min(2.22vw, 2rem) 0 var(--spazio-3) 5.486%;
    background-repeat: no-repeat; background-size: 100% auto; background-position: top center;
  }
  .listino { background-image: image-set(url("media/foto/listino-fondo-1440.avif") type("image/avif"), url("media/foto/listino-fondo-1440.webp") type("image/webp")); }
  .listino-corpo { width: 65.61%; }                                         /* 893 px su 1361: da 79 a 972 */
  .listino-schede { justify-content: space-between; margin-top: calc(var(--spazio-5) - var(--spazio-1)); padding-bottom: 0.625rem; gap: 0; overflow: visible; }  /* la scheda attiva sta 10 px sopra il filetto */
  .listino-schede button { min-height: 0; padding: 0 0 0.6875rem; line-height: 1.5; }
  .listino table { margin-top: 1.25rem; table-layout: fixed; }
  .listino th, .listino td { height: 3.625rem; padding-block: 0; }          /* il passo delle righe della comp: 58 px */
  .listino .col-nome { width: 56.2%; }                                       /* la durata comincia a 581 px */
  .listino .col-durata { width: 26.65%; }
  .listino .col-prezzo { width: 17.15%; }
  .listino td:last-child { padding-right: 4.7%; }                            /* il prezzo finisce a 930 px */
  .listino-foto { position: absolute; left: 70.2%; top: min(5.69vw, 5.125rem); width: 24.72%; }   /* 82 px a 1440, come la fascia */
}

/* --- recensioni: telefono ------------------------------------------------------------------------------------ */
.recensioni { display: grid; gap: var(--spazio-2); padding: var(--spazio-6) var(--margine-pagina); }
.recensioni-titolo {
  font-family: var(--famiglia-titoli); font-size: var(--testo-titolo); font-weight: var(--peso-titoli);
  line-height: var(--interlinea-titoli); letter-spacing: var(--spaziatura-titoli); color: var(--colore-titolo);
  text-wrap: balance;
}
.voto { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.4em; font-size: var(--testo-corpo-grande); line-height: 1.5; color: var(--colore-titolo-sezione); }
.voto .punto { color: var(--colore-oro); }
.stelle { display: inline-flex; margin-left: 0.4em; }
.stelle svg { width: 5.5em; height: 1.1em; fill: var(--colore-stelle); }
.stelle .stelle-vuote { fill: color-mix(in oklch, var(--colore-stelle) 28%, transparent); }
.recensioni-elenco { display: grid; gap: var(--spazio-3); margin-top: var(--spazio-3); }
.recensione figure {
  display: grid; grid-template-columns: auto 1fr; gap: var(--spazio-2) var(--spazio-3); align-items: center;
  margin: 0; padding: var(--spazio-4) var(--spazio-3);
  background: var(--colore-cartoncino); color: var(--colore-inchiostro);
  border-radius: var(--raggio-cartoncino); box-shadow: var(--luce-cartoncino);
}
.recensione-iniziale {
  display: grid; place-items: center; width: var(--spazio-6); aspect-ratio: 1;
  border: var(--linea) solid var(--colore-oro); border-radius: 50%;
  font-family: var(--famiglia-titoli); font-size: var(--testo-numero); font-weight: var(--peso-titoli); color: var(--colore-oro);
}
.recensione .stelle { margin: 0; font-size: var(--testo-corpo); }
.recensione blockquote { grid-column: 1 / -1; margin: 0; font-size: var(--testo-corpo); line-height: 1.65; }
.recensione figcaption { grid-column: 1 / -1; font-size: var(--testo-corpo); font-weight: 600; }

/* --- recensioni: computer (fascia 4870–5930, 1440 × 1060) --------------------------------------------------- */
@media (min-width: 75em) {
  .recensioni { aspect-ratio: 1440 / 1060; padding: 0; }
  .recensioni { background-image: image-set(url("media/foto/recensioni-fondo-1440.avif") type("image/avif"), url("media/foto/recensioni-fondo-1440.webp") type("image/webp")); }
  .recensioni-titolo { left: 7.64%; top: 11%; }
  .voto { font-size: var(--testo-bottone-medio); }
  .voto-google { left: 7.64%; top: 22.08%; }
  .voto-treatwell { left: 7.64%; top: 28.49%; }
  .recensioni-elenco { inset: 0; display: block; }
  .recensione { position: absolute; top: 36.98%; height: 51.79%; }
  .recensione-uno { left: 7.71%; width: 28.33%; }
  .recensione-due { left: 37.85%; width: 28.06%; }
  .recensione-tre { left: 67.71%; width: 27.57%; }
  /* il cartoncino è quello della comp, nel fondo: qui solo i testi, alle sue coordinate */
  .recensione figure { position: relative; display: block; height: 100%; padding: 0; background: none; box-shadow: none; }
  .recensione figure > * { position: absolute; }
  .recensione-iniziale { left: 7.1%; top: 8%; width: 18.4%; }
  .recensione .stelle { left: 32.6%; top: 8.4%; font-size: var(--testo-voce); }
  .recensione blockquote { left: 32.6%; top: 16.2%; width: 63.7%; white-space: nowrap; line-height: 2.2125rem; }   /* 35,4 px tra le righe, come nella comp */
  .recensione blockquote .a-capo { display: block; }
  .recensione figcaption { left: 32.6%; top: 87.2%; }
  .recensione-tre blockquote { top: 18.3%; }
}

/* --- contatti: telefono -------------------------------------------------------------------------------------- */
.contatti { display: grid; justify-items: center; gap: var(--spazio-3); padding: var(--spazio-6) var(--margine-pagina); text-align: center; }
.entrata { width: 100%; }
.frase-salone { font-family: var(--famiglia-mano); font-size: var(--testo-frase); font-weight: var(--peso-mano); line-height: 1.2; color: var(--colore-oro-chiaro); text-wrap: balance; }
.indirizzo { font-size: var(--testo-corpo-grande); line-height: 1.5; color: var(--colore-titolo); }
.indirizzo .punto { color: var(--colore-oro); }
.indirizzo-piccolo { font-size: var(--testo-corpo); }
.contatti-bottone { min-height: var(--altezza-tocco); font-size: var(--testo-corpo); }

/* --- piede: telefono ----------------------------------------------------------------------------------------- */
.piede {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--spazio-4) var(--spazio-3);
  padding: var(--spazio-6) var(--margine-pagina) calc(var(--spazio-6) + var(--altezza-tocco));
  background: var(--colore-piede); border-top: var(--linea) solid var(--colore-filetto-testata);
}
.piede-logo { grid-column: 1 / -1; width: min(60%, 16.625rem); }
.piede-frase { grid-column: 1 / -1; font-size: var(--testo-piccolo); color: var(--colore-testo); }
.piede-social { justify-self: start; width: var(--altezza-tocco); }
.piede-titolo { font-size: var(--testo-corpo-grande); color: var(--colore-titolo); }
.piede-colonna ul { margin-top: var(--spazio-1); font-size: var(--testo-piccolo); line-height: 2; color: var(--colore-testo); }
.piede-colonna a { text-decoration: none; }
.piede-colonna a:hover { color: var(--colore-bottone); }
.piede-contatti { grid-column: 1 / -1; }
.piede-mano { justify-self: end; grid-column: 1 / -1; }
.copyright { grid-column: 1 / -1; padding-top: var(--spazio-3); border-top: var(--linea) solid var(--colore-filetto-testata); font-size: var(--testo-piccolo); color: var(--colore-testo); text-align: center; }

/* --- contatti e piede: computer (fasce 5930–6936 e 6936–7298) ----------------------------------------------- */
@media (min-width: 75em) {
  .contatti { aspect-ratio: 1440 / 1006; padding: 0; background-image: image-set(url("media/foto/contatti-fondo-1440.avif") type("image/avif"), url("media/foto/contatti-fondo-1440.webp") type("image/webp")); }
  .entrata { left: 20.833%; top: 0.994%; width: 58.333%; }
  .frase-salone, .indirizzo { left: 0; right: 0; }
  .frase-salone { top: 78.73%; line-height: 1; }
  .indirizzo { top: 84.69%; }
  .contatti-bottone { left: 41.74%; top: 90.56%; width: 17.99%; height: 6.36%; min-height: 0; }

  .piede { aspect-ratio: 1440 / 362; padding: 0; border: 0; background-color: transparent; background-image: image-set(url("media/foto/piede-fondo-1440.avif") type("image/avif"), url("media/foto/piede-fondo-1440.webp") type("image/webp")); }
  .piede-logo { left: 6.11%; top: 8.84%; width: 18.47%; }
  .piede-frase { left: 6.67%; top: 38.1%; }
  .piede-social { top: 50.55%; width: 4.44%; }
  .piede-instagram { left: 6.39%; }
  .piede-facebook { left: 12.5%; }
  .piede-titolo { font-size: var(--testo-corpo-grande); line-height: 1.5; }
  .piede-colonna ul { position: absolute; margin: 0; white-space: nowrap; }
  .piede-salone { left: 31.875%; top: 8.84%; }
  .piede-salone ul { top: calc(var(--spazio-5) - 0.375rem); line-height: 2.4375rem; }
  .piede-servizi { left: 47.08%; top: 8.84%; }
  .piede-servizi ul { top: calc(var(--spazio-5) - 0.125rem); line-height: 1.96875rem; }
  .piede-contatti { left: 64.51%; top: 8.84%; }
  .piede-contatti ul { top: calc(var(--spazio-5) - 0.5rem); line-height: 2.6875rem; }
  .piede-mano { position: absolute; left: 83.47%; top: 23.2%; transform: rotate(-8deg); }
  .copyright { left: 0; right: 0; top: 87.6%; padding: 0; border: 0; }
}

/* --- movimento ----------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .apertura-velo { animation: accensione var(--durata-insegna) var(--curva-accensione) 250ms both; }
  .apertura-insegna { animation: accensione-insegna var(--durata-insegna) var(--curva-accensione) 250ms both; }
  .apertura-velo.acceso, .apertura-insegna.acceso { animation: none; }
}
@keyframes accensione {
  0% { opacity: 0.94; }
  10% { opacity: 0.55; }
  16% { opacity: 0.9; }
  28% { opacity: 0.35; }
  36% { opacity: 0.7; }
  100% { opacity: 0; }
}
@keyframes accensione-insegna {
  0% { opacity: 0.12; }
  10% { opacity: 0.6; }
  16% { opacity: 0.2; }
  28% { opacity: 0.8; }
  36% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* --- pagina non trovata (404.html): testata senza menù, un messaggio e i due bottoni ------------------------ */
.pagina-404 .testata-chiama { margin-left: auto; }
.non-trovata {
  display: grid; gap: var(--spazio-3); align-content: center;
  min-height: calc(100svh - var(--altezza-testata));
  max-width: var(--larghezza-pagina); margin-inline: auto;
  padding: var(--spazio-6) var(--margine-pagina);
}
.non-trovata p { max-width: 36em; }
.non-trovata-bottoni { display: flex; flex-wrap: wrap; gap: var(--spazio-2); }
.non-trovata-bottoni .bottone { min-height: var(--altezza-tocco); }