/* ============================================================
   BLOCCHI — i pezzi nuovi del sito.
   Vetrina dei lavori · prova di fiducia · recensioni · confronto
   prima/dopo · prenotazione · tasto WhatsApp fluttuante · spazi
   in attesa delle foto.
   ============================================================ */

/* ============================================================
   MARCHIO NELL'HEADER
   Il pittogramma non va mai ritagliato dal riquadro: `contain` e
   un'altezza fissa lo tengono intero a qualsiasi larghezza.
   ============================================================ */
.brand__mark {
  width: auto; height: 42px;
  max-width: 58px;
  object-fit: contain; object-position: center;
  flex: none;
  color: var(--c-text);          /* l'SVG usa currentColor */
}
.site-footer .footer-logo { max-width: 260px; height: auto; }

/* ============================================================
   HERO — l'arco del marchio che si disegna da solo
   ============================================================ */
.arco-marchio {
  position: absolute; z-index: 3;
  right: 5%; top: 5%;
  width: min(34%, 170px); height: auto;
  pointer-events: none;
  color: var(--c-accent);
  opacity: .9;
}
.arco-marchio path {
  fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 640; stroke-dashoffset: 640;
  transition: stroke-dashoffset 900ms var(--ease-out) 120ms;
}
.is-visibile .arco-marchio path,
.senza-moto .arco-marchio path { stroke-dashoffset: 0; }

.hero__media { position: relative; }

/* ============================================================
   VETRINA DEI LAVORI
   ------------------------------------------------------------
   Non una sfilza di foto enormi: un lavoro per volta a tutta
   larghezza, e sotto i campioni come in una cartella colore.
   Su telefono si carica una foto sola invece di cinque.
   ============================================================ */
.vetrina { display: grid; gap: var(--space-5); }

.vetrina__palco {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-surface-2);
}
@media (min-width: 768px) { .vetrina__palco { aspect-ratio: 16/10; } }

.vetrina__lastra {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity var(--dur-slow) var(--ease-out), transform 620ms var(--ease-out);
}
.vetrina__lastra.is-in { opacity: 1; transform: none; }
.vetrina__lastra img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Velo in basso: la didascalia si legge sopra qualsiasi foto */
/* Il velo sotto la didascalia. Portato da .82 a .92 e allungato: le
   foto qui sotto cambiano a ogni scheda, e su quelle chiare (la parete
   di fiori rosa, i prodotti sul ripiano bianco) il bianco della
   didascalia con il velo di prima non arrivava al minimo leggibile.
   Un velo si dimensiona sulla foto piu' chiara, non sulla media. */
.vetrina__palco::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 62%;
  background: linear-gradient(180deg, transparent 0%, hsl(336 14% 5% / .55) 45%, hsl(336 14% 5% / .92) 100%);
  pointer-events: none;
}

.vetrina__testo {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: var(--space-5);
  display: grid; gap: var(--space-1);
}
.vetrina__tecnica {
  font-size: var(--text-caption); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: hsl(327 100% 78%);
}
.vetrina__didascalia { color: hsl(20 22% 96%); font-weight: 500; margin: 0; max-width: 46ch; }
.vetrina.is-cambio .vetrina__testo { animation: scatto 220ms var(--ease-out); }

/* I campioni: quadratini, non miniature enormi */
.vetrina__campioni {
  display: flex; gap: var(--space-3);
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.vetrina__campioni::-webkit-scrollbar { display: none; }

.vetrina__scelta {
  flex: 0 0 auto;
  width: 62px; height: 62px;
  padding: 0; border: 0; border-radius: var(--r-md);
  overflow: hidden; cursor: pointer;
  background: var(--c-surface-2);
  box-shadow: inset 0 0 0 1px var(--c-hairline);
  transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-press) var(--ease);
}
.vetrina__scelta img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vetrina__scelta:hover { transform: translateY(-2px); }
.vetrina__scelta:active { transform: scale(.96); }
.vetrina__scelta:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.vetrina__scelta[aria-selected="true"] {
  box-shadow: 0 0 0 2px var(--c-primary), 0 0 0 4px color-mix(in srgb, var(--c-primary) 24%, transparent);
}
@media (min-width: 768px) { .vetrina__scelta { width: 76px; height: 76px; } }

/* ============================================================
   PROVA DI FIDUCIA — una foto vera accanto alle credenziali,
   non tre righe di testo sospese nel vuoto.
   ============================================================ */
.fiducia { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) {
  .fiducia { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 64px); }
}
.fiducia__media { position: relative; border-radius: var(--r-lg); overflow: hidden; }
.fiducia__media img { display: block; width: 100%; height: auto; }
.fiducia__bollo {
  position: absolute; left: var(--space-4); bottom: var(--space-4);
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-full);
  background: hsl(336 14% 6% / .72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: hsl(20 22% 96%);
  font-size: var(--text-caption); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}

.credenziali { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.credenziali li {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--space-4);
  align-items: start;
  padding-block: var(--space-5);
  border-top: 1px solid var(--c-hairline);
}
.credenziali li:last-child { border-bottom: 1px solid var(--c-hairline); }
.credenziali h3 { font-size: var(--text-h4); margin: 0 0 var(--space-1); }
.credenziali p { color: var(--c-text-muted); margin: 0; }
.credenziali svg { width: 44px; height: 44px; color: var(--c-primary); }

/* ============================================================
   RECENSIONI — un pannello solo, con un tasto che porta su Google
   ============================================================ */
.recensione {
  display: grid; gap: var(--space-5);
  padding: var(--space-7);
  border-radius: var(--r-lg);
  background: var(--c-surface-2);
  text-align: center;
  justify-items: center;
}
/* Cinque stelle VUOTE: sono l'invito a dare un voto, non un voto gia' dato.
   Piene, su un salone con una recensione sola, si leggerebbero come 5 su 5. */
.recensione__stelle { display: flex; gap: 5px; color: #E0A63A; }
.recensione__stelle svg { width: 24px; height: 24px; }
.recensione h2 { margin: 0; }
.recensione p { margin: 0; color: var(--c-text-muted); max-width: 46ch; }
.recensione .btn { margin-top: var(--space-2); }
.recensione__logo { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; }
.recensione__logo svg { width: 20px; height: 20px; }

/* ============================================================
   CONFRONTO PRIMA / DOPO
   ============================================================ */
.confronto {
  --taglio: 50%;
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: hsl(336 10% 6%);
}
@media (min-width: 768px) { .confronto { aspect-ratio: 16/10; } }

.confronto__lato { position: absolute; inset: 0; }
.confronto__lato > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.confronto__lato--dopo { clip-path: inset(0 0 0 var(--taglio)); }

.confronto__eti {
  position: absolute; top: var(--space-4); z-index: 3;
  padding: 6px var(--space-4); border-radius: var(--r-full);
  font-size: var(--text-caption); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: hsl(336 14% 6% / .7); color: hsl(20 22% 96%);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.confronto__eti--prima { left: var(--space-4); }
.confronto__eti--dopo  { right: var(--space-4); }

.confronto__linea {
  position: absolute; top: 0; bottom: 0; left: var(--taglio); z-index: 3;
  width: 2px; margin-left: -1px;
  background: hsl(0 0% 100% / .9);
  pointer-events: none;
}
.confronto__linea::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: hsl(0 0% 100% / .95);
  box-shadow: 0 4px 14px hsl(0 0% 0% / .4);
}
.confronto__cursore {
  position: absolute; inset: 0; z-index: 4;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none;
}
.confronto__cursore:focus-visible + .confronto__linea { box-shadow: 0 0 0 3px var(--c-focus); }

/* ============================================================
   SPAZI IN ATTESA — le foto arrivano dopo lo shooting.
   Devono sembrare progettati, non buchi bianchi.
   ============================================================ */
.attesa {
  position: relative;
  display: grid; place-items: center;
  gap: var(--space-3);
  min-height: 220px;
  padding: var(--space-7);
  border-radius: var(--r-lg);
  text-align: center;
  color: var(--c-text-muted);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--c-primary) 8%, transparent), transparent 62%),
    var(--c-surface-2);
  box-shadow: inset 0 0 0 1px var(--c-hairline);
  overflow: hidden;
}
.attesa::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    -45deg, transparent 0 11px, color-mix(in srgb, var(--c-text) 5%, transparent) 11px 12px);
  opacity: .7; pointer-events: none;
}
.attesa > * { position: relative; }
.attesa svg { width: 40px; height: 40px; color: var(--c-primary); opacity: .8; }
.attesa b { display: block; color: var(--c-text); font-size: var(--text-h4); font-family: var(--font-display); }
.attesa span { font-size: var(--text-small); max-width: 34ch; }
.attesa--alta { min-height: 340px; }

/* ============================================================
   PRENOTAZIONE — il modulo che finisce su WhatsApp
   ============================================================ */
.prenota { display: grid; gap: var(--space-8); }

.passo { display: grid; gap: var(--space-4); }
.passo__testata { display: flex; align-items: baseline; gap: var(--space-3); }
.passo__n {
  flex: none;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--c-primary); color: var(--c-on-primary);
  font-size: var(--text-caption); font-weight: 700;
  transform: translateY(3px);
}
.passo h3 { margin: 0; font-size: var(--text-h4); }
.passo > p { margin: 0; color: var(--c-text-muted); font-size: var(--text-small); }

/* Pastiglie di scelta del servizio */
.scelte { display: flex; flex-wrap: wrap; gap: var(--space-2); border: 0; padding: 0; margin: 0; }
.scelta { position: relative; }
.scelta input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.scelta span {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-5);
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--r-full);
  font-size: var(--text-small); font-weight: 500; color: var(--c-text);
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              transform var(--dur-press) var(--ease);
}
.scelta:hover span { border-color: var(--c-primary); }
.scelta input:focus-visible + span { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.scelta input:checked + span {
  border-color: var(--c-primary); font-weight: 700;
  background: color-mix(in srgb, var(--c-primary) 12%, transparent);
}
.scelta input:active + span { transform: scale(.97); }

/* Orari liberi */
.orari-liberi { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.slot {
  min-height: 44px; padding: 0 var(--space-4);
  border: 1.5px solid var(--c-border); border-radius: var(--r-sm);
  background: transparent; color: var(--c-text);
  font: inherit; font-size: var(--text-small); font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              transform var(--dur-press) var(--ease);
}
.slot:hover { border-color: var(--c-primary); }
.slot:active { transform: scale(.96); }
.slot:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.slot.is-scelto { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }

.nota-giorno { font-size: var(--text-small); font-weight: 600; margin: 0; }
.nota-giorno[data-stato="chiuso"] { color: var(--c-error); }
.nota-giorno[data-stato="aperto"] { color: var(--c-text-muted); }

/* Anteprima del messaggio: si vede cosa parte, prima che parta */
.anteprima {
  display: grid; gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--r-md) var(--r-md) var(--r-md) var(--r-xs);
  background: color-mix(in srgb, var(--c-primary) 10%, var(--c-surface));
  box-shadow: inset 0 0 0 1px var(--c-hairline);
}
.anteprima b {
  font-size: var(--text-caption); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-muted);
}
.anteprima p { margin: 0; }

.btn--wa { background: #25D366; color: #06301A; border-color: #25D366; }
.btn--wa:hover { background: #1EBE5B; border-color: #1EBE5B; }
.btn--wa svg { width: 22px; height: 22px; }

/* ============================================================
   TASTO WHATSAPP FLUTTUANTE
   ============================================================ */
.fab-wa {
  position: fixed; z-index: var(--z-overlay);
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: grid; place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25D366; color: #06301A;
  box-shadow: 0 8px 24px -6px hsl(145 60% 20% / .55), 0 2px 6px hsl(0 0% 0% / .3);
  opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              background-color var(--dur-fast) var(--ease);
}
.fab-wa.is-in { opacity: 1; transform: none; pointer-events: auto; }
.fab-wa:hover { background: #1EBE5B; }
.fab-wa:active { transform: scale(.94); }
.fab-wa:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.fab-wa svg { width: 30px; height: 30px; }

/* Su telefono resta sopra la barra dei contatti rapidi */
@media (max-width: 899px) {
  .fab-wa { bottom: calc(72px + max(12px, env(safe-area-inset-bottom))); }
}

@media (prefers-reduced-motion: reduce) {
  .fab-wa, .vetrina__lastra, .arco-marchio path { transition: none; }
  .arco-marchio path { stroke-dashoffset: 0; }
}

/* ============================================================
   CAMPIONI DELLE TECNICHE — quattro ciocche vere, ferme.
   Sulla home bastano: lo strumento che si gira col dito vive una
   volta sola, nella pagina Colore.
   ============================================================ */
.campioni {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 760px) { .campioni { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); } }
.campioni li { display: grid; gap: var(--space-2); }
.campioni h3 { font-size: var(--text-h4); margin: var(--space-3) 0 0; }
.campioni p  { color: var(--c-text-muted); font-size: var(--text-small); margin: 0; }

/* ============================================================
   PAGINA PRENOTA — impaginazione
   ============================================================ */
.prenota-griglia { display: grid; gap: var(--space-9); align-items: start; }
@media (min-width: 980px) {
  .prenota-griglia { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 5vw, 72px); }
  .prenota-lato { position: sticky; top: calc(var(--h-header, 76px) + var(--space-5)); }
}

.prenota fieldset { border: 0; margin: 0; padding: 0; }
.prenota legend { padding: 0; width: 100%; }

.scheda-lato {
  padding: var(--space-6);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: inset 0 0 0 1px var(--c-hairline);
}
.scheda-lato + .scheda-lato { margin-top: var(--space-4); }
.scheda-lato h2 { font-size: var(--text-h4); margin: 0 0 var(--space-4); }
.scheda-lato .orari { margin: 0; }

.recapiti { list-style: none; margin: 0; padding: 0; display: grid; }
.recapiti li {
  display: grid; gap: 2px;
  padding-block: var(--space-3);
  border-top: 1px solid var(--c-hairline);
}
.recapiti li:first-child { border-top: 0; padding-top: 0; }
.recapiti a { font-weight: 600; }
.recapiti span { font-size: var(--text-small); color: var(--c-text-muted); }

/* ---------- Campi ---------- */
.campo { display: grid; gap: var(--space-2); }
.campo label, .etichetta-gruppo {
  font-weight: 700; font-size: var(--text-small); margin: 0;
}
.facoltativo { font-weight: 400; color: var(--c-text-muted); }

.campo input, .campo textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px var(--space-4);
  font: 400 var(--text-body)/1.4 var(--font-body);  /* mai < 16px: evita lo zoom su iOS */
  color: var(--c-text);
  background: var(--c-bg);
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease);
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--c-text-muted); opacity: 1; }
.campo input:hover, .campo textarea:hover { border-color: var(--c-text-muted); }
.campo input:focus, .campo textarea:focus {
  outline: 3px solid var(--c-focus); outline-offset: 2px; border-color: var(--c-primary);
}
.campo input[aria-invalid="true"] { border-color: var(--c-error); }

.errore {
  display: none; margin: 0;
  color: var(--c-error); font-size: var(--text-small); font-weight: 600;
}
.errore::before { content: "\26A0\FE0E  "; }
.errore.is-visible { display: block; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* `hidden` deve vincere sempre: i blocchi a griglia lo scavalcherebbero */
[hidden] { display: none !important; }

/* ============================================================
   PAGINA COLORE
   ============================================================ */

/* Tre righe secche per tecnica, al posto del paragrafo lungo */
.punti { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; }
.punti li {
  display: grid; gap: 2px;
  padding-block: var(--space-3);
  border-top: 1px solid var(--c-hairline);
  font-size: var(--text-small);
  color: var(--c-text-muted);
}
.punti li:last-child { border-bottom: 1px solid var(--c-hairline); }
.punti b {
  font-size: var(--text-caption); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-primary);
}

/* La ciocca disegnata al posto della foto che manca */
.ciocca-campione--alta { aspect-ratio: 4/5; border-radius: var(--r-lg); }
.etichetta-disegno {
  position: absolute; z-index: 2; left: var(--space-4); bottom: var(--space-4);
  padding: 6px var(--space-4); border-radius: var(--r-full);
  font-size: var(--text-caption); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: hsl(336 14% 6% / .66); color: hsl(20 22% 96%);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

/* Le tre righe sotto il confronto */
.dati-confronto {
  list-style: none; margin: var(--space-5) 0 0; padding: 0;
  display: grid; gap: 0;
}
@media (min-width: 760px) {
  .dati-confronto { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
  .dati-confronto li { border-top: 1px solid var(--c-hairline); border-bottom: 0 !important; }
}
.dati-confronto li {
  display: grid; gap: var(--space-1);
  padding-block: var(--space-4);
  border-top: 1px solid var(--c-hairline);
}
.dati-confronto li:last-child { border-bottom: 1px solid var(--c-hairline); }
.dati-confronto b {
  font-size: var(--text-caption); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-primary);
}
.dati-confronto span { color: var(--c-text-muted); font-size: var(--text-small); }

/* Le quattro tappe nel tempo, al posto del muro di paragrafi */
.tappe { list-style: none; margin: 0; padding: 0; display: grid; }
.tappe li {
  position: relative;
  padding: var(--space-5) 0 var(--space-5) var(--space-8);
  border-top: 1px solid var(--c-hairline);
}
.tappe li:last-child { border-bottom: 1px solid var(--c-hairline); }
/* il filo verticale che lega le tappe: e' una ciocca, non una timeline */
.tappe li::before {
  content: ""; position: absolute; left: 11px; top: 0; bottom: 0;
  width: 2px; background: var(--c-hairline);
}
.tappe li:first-child::before { top: 50%; }
.tappe li:last-child::before  { bottom: 50%; }
.tappe li::after {
  content: ""; position: absolute; left: 6px; top: calc(50% - 6px);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--c-primary);
  box-shadow: 0 0 0 4px var(--c-bg);
}
.tappe__quando {
  display: block;
  font-size: var(--text-caption); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-primary);
  margin-bottom: var(--space-1);
}
.tappe h3 { font-size: var(--text-h4); margin: 0 0 var(--space-2); }
.tappe p  { color: var(--c-text-muted); margin: 0; }
@media (min-width: 900px) {
  .tappe li { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
  .tappe__quando { margin-top: 6px; }
}

/* ============================================================
   TASTO DI VETRO — solo sopra una foto, dove un bordo pieno
   sparirebbe e un bianco pieno coprirebbe l'immagine.
   ============================================================ */
.btn--vetro {
  background: hsl(0 0% 100% / .12);
  color: hsl(20 22% 97%);
  border: 1px solid hsl(0 0% 100% / .34);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.btn--vetro:hover { background: hsl(0 0% 100% / .2); border-color: hsl(0 0% 100% / .5); }
.btn--vetro:active { transform: scale(.97); }
.btn--vetro:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }

/* L'arco del marchio adesso vive dentro l'hero a tutto vetro */
.arco-marchio { right: 6%; top: 11%; width: min(30%, 150px); opacity: .8; }
@media (min-width: 900px) { .arco-marchio { right: 8%; top: 16%; width: min(22%, 200px); } }

/* ============================================================
   PROCEDURA DI PRENOTAZIONE — pagina a sé.
   ------------------------------------------------------------
   Non sta piu' in fondo ai contatti, in mezzo a orari e indirizzo:
   e' una pagina sola che fa una cosa sola. Un passo per schermata,
   perche' su un telefono un modulo lungo si abbandona.
   ============================================================ */
.container--stretto { max-width: 620px; }

.procedura-sezione { min-height: 70svh; }

.procedura-testata { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); }
.procedura-testata h1 { margin: 0; font-size: var(--text-h1); }
.procedura-testata p  { margin: 0; color: var(--c-text-muted); max-width: 44ch; }

/* ---------- Avanzamento ----------
   Quattro pallini con l'etichetta: si vede sempre a che punto si e'
   e quanto manca. Senza, una procedura a passi diventa un labirinto. */
.avanzamento {
  list-style: none; margin: 0 0 var(--space-8); padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  counter-reset: tappa;
}
.avanzamento li {
  display: grid; justify-items: center; gap: var(--space-2);
  position: relative;
  color: var(--c-text-muted);
  font-size: var(--text-caption);
}
/* il filo che unisce i pallini */
.avanzamento li::before {
  content: ""; position: absolute; top: 15px; left: -50%; right: 50%;
  height: 2px; background: var(--c-hairline);
}
.avanzamento li:first-child::before { display: none; }
.avanzamento li span {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--c-surface-2);
  box-shadow: inset 0 0 0 1.5px var(--c-border);
  font-weight: 700; font-size: var(--text-caption);
  position: relative; z-index: 1;
  transition: background-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease);
}
.avanzamento li b { font-weight: 600; letter-spacing: .02em; }
.avanzamento li.is-corrente { color: var(--c-text); }
.avanzamento li.is-corrente span {
  background: var(--c-primary); color: var(--c-on-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary) 22%, transparent);
}
.avanzamento li.is-fatta span {
  background: color-mix(in srgb, var(--c-primary) 26%, transparent);
  color: var(--c-text);
  box-shadow: inset 0 0 0 1.5px var(--c-primary);
}
.avanzamento li.is-fatta::before { background: var(--c-primary); }
@media (max-width: 479px) {
  .avanzamento li b { font-size: 11px; }
}

/* ---------- Il riquadro del passo ---------- */
.passo-schermo {
  display: grid; gap: var(--space-5);
  padding: var(--space-7);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: inset 0 0 0 1px var(--c-hairline), var(--shadow-3);
  animation: entraPasso 260ms var(--ease-out);
}
@keyframes entraPasso {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.passo-schermo h2 { margin: 0; font-size: var(--text-h3); }
.passo-aiuto { margin: calc(var(--space-4) * -1) 0 0; color: var(--c-text-muted); font-size: var(--text-small); }

.procedura-piede {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.procedura-piede .btn { min-width: 128px; }
@media (max-width: 479px) {
  .procedura-piede .btn { flex: 1; min-width: 0; }
}

/* ---------- Menu a tendina ----------
   E' un `select` vero: su iOS e Android apre la rotella di sistema,
   che con il pollice si usa dieci volte meglio di venti pastigline
   messe in fila. Qui e' solo vestito bene.
   ============================================================ */
.tendina { position: relative; }
.tendina select {
  appearance: none; -webkit-appearance: none;
  width: 100%;
  min-height: 58px;
  padding: 16px var(--space-8) 16px var(--space-5);
  text-overflow: ellipsis;
  font: 600 var(--text-body)/1.3 var(--font-body);  /* mai < 16px: evita lo zoom su iOS */
  color: var(--c-text);
  background: var(--c-bg);
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.tendina select:hover { border-color: var(--c-text-muted); }
.tendina select:focus-visible {
  outline: 3px solid var(--c-focus); outline-offset: 2px;
  border-color: var(--c-primary);
}
/* la freccia, disegnata: nessuna immagine da caricare */
.tendina::after {
  content: ""; position: absolute; right: var(--space-5); top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--c-primary);
  border-bottom: 2px solid var(--c-primary);
  rotate: 45deg;
  pointer-events: none;
}
.campo--tendina { gap: var(--space-2); }
.campo-nota { margin: 0; font-size: var(--text-small); color: var(--c-text-muted); }

/* ---------- Riepilogo ---------- */
.riepilogo { margin: 0; display: grid; }
.riepilogo > div {
  display: grid; grid-template-columns: 108px minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-top: 1px solid var(--c-hairline);
}
.riepilogo > div:last-child { border-bottom: 1px solid var(--c-hairline); }
.riepilogo dt {
  font-size: var(--text-caption); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-text-muted);
  align-self: center;
}
.riepilogo dd { margin: 0; font-weight: 600; }

.procedura-alternativa {
  margin-top: var(--space-7);
  text-align: center;
  font-size: var(--text-small);
  color: var(--c-text-muted);
}

#esito-form { margin: 0; text-align: center; color: var(--c-text-muted); }

/* ============================================================
   LE DUE STRADE — prenotare o chiamare. Sulla pagina contatti
   stanno in cima, prima di orari e indirizzo: chi apre quella
   pagina vuole prendere contatto, non leggere.
   ============================================================ */
.due-strade { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .due-strade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.strada {
  display: grid; gap: var(--space-2);
  padding: var(--space-7) var(--space-6);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--c-text);
  background: var(--c-surface);
  box-shadow: inset 0 0 0 1px var(--c-hairline);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-fast) var(--ease);
}
.strada svg { width: 34px; height: 34px; color: var(--c-primary); margin-bottom: var(--space-2); }
.strada b { font-family: var(--font-display); font-size: var(--text-h4); font-weight: 600; }
.strada span { font-size: var(--text-small); color: var(--c-text-muted); }
.strada:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--c-border), var(--shadow-3); }
.strada:active { transform: scale(.99); }
.strada:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }

.strada--primaria {
  background: var(--c-primary); color: var(--c-on-primary);
  box-shadow: var(--glow-primary);
}
.strada--primaria svg  { color: var(--c-on-primary); }
/* Pieno, non all'82%. Sul magenta il testo all'82% scendeva a 2,5:1 di
   contrasto: sotto il minimo AA di 4,5:1 per un corpo da 15px. La
   gerarchia fra titolo e sottotitolo la fanno gia' corpo e peso, non
   serve smorzare anche il colore. */
.strada--primaria span { color: var(--c-on-primary); }
.strada--primaria:hover { background: var(--c-primary-hover); box-shadow: var(--shadow-4); }

/* Le tre schede informative della pagina contatti */
.schede-info { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 900px) { .schede-info { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.schede-info .scheda-lato + .scheda-lato { margin-top: 0; }

/* ============================================================
   LA RIGA CHE SPIEGA — sopra la ciocca.
   Il pezzo interattivo non deve solo essere bello: deve far capire
   la differenza fra le tecniche. Una riga tratteggiata si sposta e
   dice a che altezza comincia la schiaritura.
   ============================================================ */
.ciocca__guida { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.ciocca__riga {
  position: absolute; left: 0; right: 0;
  top: var(--quota, 40%);
  display: flex; align-items: center;
  border-top: 1px dashed hsl(327 100% 78% / .85);
  transition: top 520ms var(--ease-out);
}
.ciocca__riga b {
  margin: -1px 0 0 var(--space-4);
  padding: 5px var(--space-3);
  border-radius: var(--r-full);
  background: hsl(336 14% 6% / .78);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: hsl(327 100% 82%);
  font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
}
.ciocca__riga.is-mossa b { animation: scatto 320ms var(--ease-out); }
[data-modo="tutta"] .ciocca__riga { top: 8%; border-top-style: solid; opacity: .95; }

/* La scala laterale: radice, metà, punte. Senza, la riga non ha
   un riferimento e non si capisce «da dove» parta. */
.ciocca__scala {
  position: absolute; right: var(--space-3); top: 6%; bottom: 14%;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  align-items: flex-end;
  font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: hsl(20 18% 92% / .5);
}
.ciocca__scala li { display: flex; align-items: center; gap: 6px; }
.ciocca__scala li::after {
  content: ""; width: 10px; height: 1px;
  background: hsl(20 18% 92% / .35);
}

@media (prefers-reduced-motion: reduce) {
  .ciocca__riga { transition: none; }
}

/* ============================================================
   PAGINE LEGALI
   ============================================================ */
.legale h2 {
  font-size: var(--text-h4);
  margin: var(--space-8) 0 var(--space-3);
}
.legale h2:first-of-type { margin-top: var(--space-6); }
.legale p, .legale li { color: var(--c-text-muted); }
.legale p + p { margin-top: var(--space-3); }
.legale ul { margin: var(--space-3) 0 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.legale__sintesi {
  display: grid; gap: var(--space-2);
  padding: var(--space-6);
  border-radius: var(--r-lg);
  background: var(--c-surface-2);
  box-shadow: inset 0 0 0 1px var(--c-hairline);
}
.legale__sintesi b {
  font-size: var(--text-caption); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-primary);
}
.legale__sintesi p { margin: 0; color: var(--c-text); }
.legale__data {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-hairline);
  font-size: var(--text-small);
}

/* La riga sotto il tasto di invio: dice dove finiscono i dati */
.nota-privacy {
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--c-text-muted);
  text-align: center;
}

/* ============================================================
   NOTA WELLA — la targa «salone ufficiale» accanto alla frase che
   la spiega. Non e' una card: due colonne separate da spazio, con
   un filetto sopra. La foto sta a sinistra e non supera i 320px,
   perche' e' una prova, non un'immagine da guardare.
   ============================================================ */
.wella-nota {
  display: grid;
  gap: var(--space-5);
  padding-top: var(--space-6);
  border-top: 1px solid var(--c-hairline);
}
.wella-nota__media { margin: 0; }
.wella-nota__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
}
.wella-nota h3 {
  font-size: var(--text-h4);
  margin: 0 0 var(--space-3);
}
.wella-nota p { margin: 0 0 var(--space-3); color: var(--c-text-muted); }
.wella-nota p:last-child { margin-bottom: 0; }
.wella-nota b { color: var(--c-text); }

@media (min-width: 900px) {
  .wella-nota {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }
}

/* ============================================================
   DOVE E QUANDO — l'indirizzo, l'insegna e gli orari, in un blocco
   solo. Regole applicate qui:
   · la foto NON viene ritagliata (niente aspect-ratio forzato):
     e' un'insegna, tagliata non serve a riconoscere il posto;
   · gli orari sono il contenuto principale, quindi hanno il corpo
     piu' grande e le cifre tabulari incolonnate;
   · nessuna scatola attorno: filetto sopra e spazio, come nel resto
     del sito.
   ============================================================ */
.dove-quando {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}

.dove-quando__foto { margin: 0; }
.dove-quando__foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
}
.dove-quando__foto figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-small);
  color: var(--c-text-muted);
}

.dove-quando__indirizzo {
  margin: 0 0 var(--space-6);
  font-size: var(--text-body);
  color: var(--c-text-muted);
  line-height: 1.4;
}
.dove-quando__indirizzo span {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-text);
}

/* Variante grande della tabella orari: stessa struttura, piu' aria.
   La riga di oggi resta segnata, ma senza frase di stato: quella
   sta gia' nell'hero. */
.orari--grande { max-width: none; font-size: var(--text-lg); }
.orari--grande th, .orari--grande td { padding: var(--space-4) 0; }
.orari--grande td i {
  font-style: normal;
  font-size: var(--text-small);
  color: var(--c-text-muted);
  margin-left: var(--space-2);
}

@media (min-width: 900px) {
  .dove-quando {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-10);
  }
}

/* ============================================================
   LINK SOCIAL CON ICONA — nei pie' di pagina e nei recapiti.
   L'icona e' decorativa: il nome resta scritto, quindi chi non
   riconosce il glifo (e chi usa uno screen reader) legge comunque
   «Instagram». Misura fissa 18px: allineata alla riga di testo.
   ============================================================ */
.social {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.social svg {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  opacity: .85;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.social:hover svg, .social:focus-visible svg { opacity: 1; }

/* ============================================================
   RITRATTO — il riquadro dove prima c'era il segnaposto «foto in
   attesa». Nessun ritaglio forzato: la foto arriva gia' tagliata
   in verticale dallo script degli asset.
   ============================================================ */
.ritratto { margin: 0; }
.ritratto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
}
.ritratto figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-small);
  color: var(--c-text-muted);
  max-width: 34ch;
}

/* ============================================================
   SCHERMO GRANDE — sopra i 1000 px
   ------------------------------------------------------------
   Il sito e' nato mobile-first e su un telefono funziona: una
   colonna, una foto per volta a tutta larghezza. Portato pari pari
   su un monitor da 1440 px quella stessa regola diventava un
   difetto: la vetrina misurava 1105x691 px e le fotografie dentro
   venivano ingrandite a 1138x1518, cioe' molto oltre la risoluzione
   dei file. Una foto da 1080 px stirata a 1138 non e' solo
   ingombrante, e' anche sgranata.

   Qui la larghezza in piu' si usa per METTERE LE COSE A FIANCO,
   non per gonfiarle: la vetrina diventa foto a sinistra e provini a
   destra, e ogni blocco fotografico ha un tetto vicino alla
   dimensione reale del file che gli sta dietro.

   Niente di quello che c'e' qui dentro tocca il telefono: sotto i
   1000 px questo blocco non esiste.
   ============================================================ */
@media (min-width: 1000px) {

  /* --- La vetrina: due colonne invece di un lenzuolo --- */
  .vetrina {
    grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }
  /* 4:5 come le foto vere, invece di 16:10 che le ritagliava a meta' */
  .vetrina__palco { aspect-ratio: 4/5; }

  /* I provini smettono di essere una striscia da scorrere e
     diventano una griglia: su un monitor si vedono tutti insieme,
     e scorrere in orizzontale col mouse e' scomodo. */
  .vetrina__campioni {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: var(--space-3);
    overflow: visible;
  }
  .vetrina__scelta { width: 100%; height: auto; aspect-ratio: 1; }

  /* --- Tetti alle fotografie --- */
  /* 800 px e' la misura piu' grande che esportiamo per questi file:
     oltre non c'e' altro da mostrare, c'e' solo da ingrandire. */
  .ritratto img        { max-width: 430px; }
  .dove-quando__foto   { max-width: 360px; }
  .fiducia__media      { max-width: 400px; }
  .wella-nota__media   { max-width: 300px; }

  /* Le due colonne di «Dove e quando» si riequilibrano: con la foto
     piu' stretta, gli orari possono prendersi il resto. */
  .dove-quando { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
}