/* Rubio Barber · stile di tutte le pagine
   Realizzato da Karminget Web Agency · https://www.instagram.com/karminget_webagency/

   Un tema solo, scuro: apertura con le foto, sezioni sullo stesso nero separate da una linea, PRENOTA e footer neri.
   Un solo carattere: Bricolage Grotesque. Riordinato il 4/11/2026: ogni parte del sito ha il suo blocco, in ordine di pagina:
   caratteri · colori e misure · base · testi · pulsanti · header · menu · apertura · sezioni · lavori · recensioni · listino ·
   chi sono · il salone (orari, mappa) · chiusura · footer · pagine interne · movimento · preferenze del sistema. */

/* ---------- caratteri ---------- */
@font-face {
  font-family: 'Bricolage';
  src: url(../fonts/bricolage-grotesque.woff2) format('woff2');
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
/* caratteri di riserva con le misure di Bricolage (misurate il 31/10/2026): finché Bricolage non arriva
   il testo occupa lo stesso spazio, così l'apertura non salta quando il carattere cambia */
@font-face {
  font-family: 'Bricolage-fb';
  src: local('Arial'), local('ArialMT'), local('Helvetica Neue'), local('Helvetica'), local('Roboto');
  font-weight: 100 600;
  size-adjust: 93.2%; ascent-override: 99.8%; descent-override: 29%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Bricolage-fb';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('Helvetica Bold'), local('Roboto Bold');
  font-weight: 700 900;
  size-adjust: 93.2%; ascent-override: 99.8%; descent-override: 29%; line-gap-override: 0%;
}
/* titolo dell'apertura, condensato (larghezza 75%): Arial è molto più larga, qui va rimpicciolita di più */
@font-face {
  font-family: 'Bricolage-fb-cond';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('Helvetica Bold'), local('Roboto Bold');
  font-weight: 100 900;
  size-adjust: 58.2%; ascent-override: 159.8%; descent-override: 46.4%; line-gap-override: 0%;
}

/* ---------- colori e misure ---------- */
:root {
  /* neri e grigi, dal più scuro al più chiaro */
  --k0: #050505;
  --k1: #101010;
  --k2: #1a1a1a;
  --k3: #252525;
  --k4: #313131;
  --f2: #5b5b59;
  --f1: #9f9f9b;
  --f05: #c5c5c1;
  --f0: #e2e2de;
  --wh: #f5f5f2;

  --fg: var(--wh);
  --mut: #a8a8a4;
  --ov: 245, 245, 242; /* il colore dei veli chiari: rgba(var(--ov), …) */
  --line: rgba(var(--ov), .14);
  --line-2: rgba(var(--ov), .32);
  --ink: var(--k0);
  --ink-mut: #595955;
  --ink-line: rgba(5, 5, 5, .14);
  --star: #fbbc04; /* il giallo delle stelle di Google */

  --pad: 16px;
  --r: 16px; /* angoli di tutte le schede: post, recensioni, listino, mappa */
  --hd: 76px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --font: 'Bricolage', 'Bricolage-fb', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
@media (min-width: 768px) { :root { --pad: 32px; } }
@media (min-width: 1024px) { :root { --hd: 100px; --r: 20px; } }
@media (min-width: 1440px) { :root { --pad: 48px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
p, li, blockquote, figcaption { text-wrap: pretty; } /* niente parola sola sull’ultima riga */
/* overflow-x anche su html: così il body taglia davvero (se html è "visible" il valore del body passa alla finestra e non taglia nulla);
   scrollbar-gutter: lo spazio della barra di scorrimento resta fisso, la pagina non salta di lato quando il menu blocca lo scorrimento */
html { background: var(--k0); color: var(--fg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--hd); overflow-x: hidden; overflow-x: clip; scrollbar-gutter: stable; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  font-optical-sizing: auto;
  background: var(--k0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
@media (min-width: 1920px) { body { font-size: 19px; } } /* schermi molto grandi: testo un po' più grande, la pagina resta centrata a 1840 px */
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
address { font-style: normal; }
::selection { background: var(--wh); color: var(--k0); }
:focus-visible { outline: 2px solid var(--wh); outline-offset: 3px; }
html.menu-open { overflow: hidden; }
.wrap { width: 100%; max-width: 1840px; margin-inline: auto; padding-inline: max(var(--pad), env(safe-area-inset-left)) max(var(--pad), env(safe-area-inset-right)); }
@media (min-width: 1024px) { .nw { white-space: nowrap; } }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--wh); color: var(--k0); padding: 10px 14px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.ic { display: block; flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic--arr { width: 18px; height: 18px; stroke-width: 2; transition: transform .25s var(--ease); }

/* ---------- testi ---------- */
.h2 {
  font-weight: 800;
  font-stretch: 75%;
  font-size: clamp(5rem, 27vw, 15rem);
  line-height: .8;
  letter-spacing: -.01em;
  text-transform: uppercase;
  overflow: hidden;
  padding-block: .06em .02em;
  margin-block: -.06em -.02em;
}
.h2__in { display: inline-block; }
.sec__sub { color: var(--mut); max-width: 32ch; }
.note { font-size: 14px; color: var(--mut); }
.tl { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; font-weight: 600; white-space: nowrap; }
.tl:hover { text-decoration-thickness: 2px; }
.todo { border: 1.5px dashed rgba(var(--ov), .55); padding: 12px 14px; font-size: 15px; line-height: 1.45; color: var(--fg); max-width: 52ch; }
.todo::before { content: "Segnaposto · "; font-weight: 700; }

/* ---------- pulsanti ----------
   Maiuscolo condensato come i titoli, a pillola, senza frecce. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 52px; padding: 0 24px;
  border: 1.5px solid transparent; border-radius: 999px;
  font-size: 20px; font-weight: 800; font-stretch: 75%; font-variation-settings: 'opsz' 96; line-height: 1; letter-spacing: .035em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer; background: none;
  transition: background-color .25s, border-color .25s, color .25s, transform .25s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 17px; gap: 10px; }
.btn--lg { min-height: 58px; padding: 0 26px; font-size: 22px; }
.btn--xl { min-height: 64px; padding: 0 30px; font-size: 25px; }
.btn--block { display: flex; width: 100%; }
/* pulsante pieno: al passaggio il grigio lo riempie da sinistra, come la barra di "oggi" negli orari (4/11/2026) */
.btn--light { background: linear-gradient(var(--f05), var(--f05)) 0 0 / 0% 100% no-repeat, var(--wh); color: var(--k0); transition: background-size .5s cubic-bezier(.7, 0, .2, 1), border-color .25s, color .25s, transform .25s var(--ease); }
.btn--light:hover { background-size: 100% 100%, auto; }
.btn--line { border-color: var(--line-2); color: var(--fg); }
.btn--line:hover { background: var(--wh); border-color: var(--wh); color: var(--k0); }
/* le due righe del pulsante Menu, come le lame della macchinetta: al passaggio si allargano */
.bars { display: grid; gap: 5px; width: 18px; }
.bars i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ease); }
.bars i:last-child { width: 12px; }
.btn:hover .bars i:last-child { transform: scaleX(1.5); transform-origin: 0 50%; }

/* ---------- header ----------
   Sempre visibile e sempre sfumato (30/10: niente barra piena né linea di stacco): un velo scuro che si dissolve
   verso il basso, con una sfocatura che sfuma insieme a lui. Logo, EN / IT e Menu, uguale su telefono e computer. */
.hd { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hd); }
.hd::before {
  content: ""; position: absolute; inset: 0 0 -80px; z-index: -1; pointer-events: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent);
  background: linear-gradient(180deg, rgba(5, 5, 5, .86) 0, rgba(5, 5, 5, .7) 45%, rgba(5, 5, 5, .3) 75%, rgba(5, 5, 5, 0) 100%);
}
.hd__in { height: 100%; display: flex; align-items: center; gap: 16px; }
.hd__logo { display: block; color: var(--fg); line-height: 0; margin-right: auto; }
.logo { display: block; width: 128px; height: auto; color: inherit; } /* logo-*.png: il logo mandato dal cliente, proporzioni originali (2,13:1), già alle misure giuste e doppie: resta nitido */
@media (min-width: 1024px) { .logo { width: 164px; } }
.hd__act { display: flex; align-items: center; gap: 10px; }
.hd .hd__menu { filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .5)); }

/* ---------- menu (lo stesso su telefono e computer) ----------
   Si apre "a rialzi": sei fasce nere passano una dopo l'altra come la macchinetta, poi le voci salgono a cascata.
   Si chiude al contrario. Senza movimento compare e sparisce e basta (le animazioni sono in fondo, in "movimento"). */
.menu { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--fg); overflow: hidden; }
.menu::backdrop { background: transparent; }
.menu[open] { display: flex; flex-direction: column; }
.menu__wipe { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(6, 1fr); z-index: 0; pointer-events: none; }
.menu__wipe i { background: var(--k0); margin-bottom: -1px; }
.menu__bar, .menu__body { position: relative; z-index: 1; }
.menu__bar { height: var(--hd); display: flex; align-items: center; justify-content: space-between; flex: none; }
.menu__body { flex: 1; display: flex; flex-direction: column; gap: 24px; padding-top: 8px; padding-bottom: max(20px, env(safe-area-inset-bottom)); overflow-y: auto; }
/* a destra EN / IT e la X. EN / IT (spostato dall'header nel menu il 4/11/2026) porta alla stessa pagina nell'altra lingua (/en/) */
.menu__r { display: flex; align-items: center; gap: 10px; }
.hd__lang { height: 48px; padding: 0 16px; letter-spacing: .06em; }
/* la X: due righe che si incrociano */
.menu__x { position: relative; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line-2); background: none; cursor: pointer; }
.menu__x i { position: absolute; left: 14px; right: 14px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--fg); transform: rotate(45deg); }
.menu__x i + i { transform: rotate(-45deg); }
/* le voci si dividono tutta l'altezza libera: righe alte e facili da toccare, niente vuoti */
.menu__body > nav { flex: 1; display: flex; min-height: 0; }
.menu__list { flex: 1; display: flex; flex-direction: column; }
.menu__list li { flex: 1; display: flex; min-height: 52px; }
.menu__list li + li { border-top: 1px solid var(--line); }
.menu__list a { flex: 1; display: flex; align-items: center; padding: 6px 0 4px; text-decoration: none; }
/* più piccole di Prenota: il menu serve a prenotare, chiamare, arrivare */
.menu__t { display: inline-block; font-weight: 800; font-stretch: 75%; font-variation-settings: 'opsz' 96; text-transform: uppercase; font-size: clamp(2rem, min(11vw, 6.2vh), 4rem); line-height: .9; letter-spacing: -.005em; transition: transform .3s var(--ease); }
.menu__list a:active .menu__t { transform: translateX(6px); }
.menu__foot { display: grid; gap: 10px; }
.menu__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.menu__foot > *, .menu__acts .btn { min-width: 0; }
.menu__acts .btn { gap: 10px; padding-inline: 12px; }
@media (max-width: 359.98px) { .menu__acts .btn { font-size: 17px; gap: 8px; } .menu__acts .ic { width: 18px; height: 18px; } }

/* ---------- apertura: una foto a tutto schermo che cambia da sola, come le storie ---------- */
/* la foto continua anche dietro la barra semitrasparente di Safari (lvh), testi e pulsanti restano sopra (padding = altezza della barra) */
.hero { position: relative; min-height: 100svh; min-height: 100lvh; padding-bottom: calc(100lvh - 100svh); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; overflow: clip; isolation: isolate; background: var(--k0); }
.hero__in { display: grid; gap: 14px; padding-top: calc(var(--hd) + 40px); padding-bottom: 22px; }
.hero__h1, .hero__info { position: relative; z-index: 1; }
.hero__h1 { line-height: 1; }
.hero__title { font-family: 'Bricolage', 'Bricolage-fb-cond', sans-serif; display: block; font-weight: 800; font-stretch: 75%; font-variation-settings: 'opsz' 96; text-transform: uppercase; font-size: clamp(54px, 17vw, 80px); line-height: .88; letter-spacing: -.005em; text-wrap: balance; }
.hero__lead { display: block; margin-top: 16px; font-size: 16px; line-height: 1.4; font-weight: 500; max-width: 34ch; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); } /* dentro l'H1 (per Google), stessa distanza di prima dal titolo */
.hero__lead2 { color: var(--f05); font-weight: 400; } /* sopra le foto serve più contrasto del grigio normale */
.hero__lead .nw:last-child { white-space: nowrap; } /* "Su appuntamento." non si spezza mai */

/* la foto: tutto lo schermo, dietro all'header. Le foto si susseguono come un video: dissolvenza lunga e una carrellata
   lenta che non si ferma mai, una volta da sinistra e una da destra, così il movimento sembra quello di una telecamera */
.hero__pic { position: absolute; inset: 0; z-index: 0; background: var(--k1); }
.hero__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; opacity: 0; transition: opacity 1.4s ease; }
.hero__pic img.is-on { opacity: 1; }
.hero__pic img.is-on, .hero__pic img.was-on { will-change: transform, opacity; } /* solo le due foto in movimento: meno memoria sui telefoni economici */
.hero__pic::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 5, 5, .6) 0, rgba(5, 5, 5, 0) 20%, rgba(5, 5, 5, 0) 38%, rgba(5, 5, 5, .55) 58%, rgba(5, 5, 5, .94) 82%, var(--k0) 100%); }

.hero__info { display: grid; gap: 18px; padding-top: 2px; }
.hero__cta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 22px; }
/* Listino: un link accanto a Prenota, così il pulsante pieno è uno solo (uguale su telefono e computer) */
.hero__lst { min-height: 48px; padding: 0 2px; border: 0; background: none; font-size: 18px; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.hero__lst:hover { background: none; color: var(--fg); text-decoration-thickness: 2.5px; }
/* il voto su una riga: sul telefono cresce con lo schermo e occupa la riga quasi come i pulsanti sopra (4/11/2026) */
.hero__g { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; width: max-content; }
.hero__gnum { font-weight: 800; font-stretch: 75%; font-size: min(7.8vw, 34px); line-height: 1; }
.hero__gtxt { display: inline-flex; align-items: center; gap: 10px; font-size: min(3.45vw, 16px); line-height: 1.3; color: var(--f05); }
.hero__stars { gap: 3px; padding: 0; } /* le stesse stelle della sezione recensioni: seguono la media di Google */
.hero__stars .star { width: min(5vw, 22px); height: min(5vw, 22px); }
.hero__g:hover .hero__gtxt { color: var(--fg); }

@media (min-width: 600px) {
  .hero__title { font-size: clamp(80px, 13vw, 132px); }
  .hero__info { grid-template-columns: auto; justify-content: start; }
  .hero__lead { grid-column: 1 / -1; font-size: 18px; }
  .hero__cta { grid-template-columns: auto auto; }
}
@media (min-width: 1024px) {
  .hero__in { padding-top: calc(var(--hd) + 56px); padding-bottom: 56px; gap: 20px; }
  .hero__title { font-size: clamp(104px, 9.4vw, 176px); }
  /* la foto nella metà destra, il titolo a sinistra sul nero: persona e scritte non si coprono più.
     Il bordo sinistro sfuma nel nero con una maschera: vale anche per le foto in movimento */
  .hero__pic { left: 42%; overflow: hidden; background: var(--k0);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .35) 16%, #000 48%); mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .35) 16%, #000 48%); }
  .hero__pic img { object-position: 50% 36%; }
  .hero__pic::after { background:
    linear-gradient(180deg, rgba(5, 5, 5, .55) 0, rgba(5, 5, 5, 0) 18%, rgba(5, 5, 5, 0) 70%, rgba(5, 5, 5, .9) 100%); }
  /* su computer frase, pulsanti e voto in proporzione al titolo gigante (4/11/2026: "su pc è piccolissima") */
  .hero__info { gap: 28px; padding-top: 10px; }
  .hero__cta { gap: 36px; }
  .hero__cta .btn--light { min-height: clamp(72px, 5.6vw, 92px); padding: 0 clamp(48px, 4.2vw, 76px); font-size: clamp(28px, 2.1vw, 36px); }
  .hero__lst { font-size: clamp(24px, 1.9vw, 32px); }
  .hero__lead { margin-top: 32px; font-size: clamp(23px, 2vw, 34px); max-width: 42ch; }
  .hero__gnum { font-size: clamp(28px, 2.1vw, 36px); }
  .hero__gtxt { font-size: clamp(15px, 1.1vw, 18px); gap: 10px; }
  .hero__stars .star { width: clamp(18px, 1.35vw, 22px); height: clamp(18px, 1.35vw, 22px); }
}
@media (max-height: 520px) and (orientation: landscape) {
  /* telefono in orizzontale: tutto nello schermo */
  .hero__title { font-size: clamp(40px, 9vh + 10px, 64px); }
  .hero__in { padding-top: calc(var(--hd) + 28px); gap: 10px; }
}

/* ---------- sezioni: un nero solo (4/11/2026) ----------
   Le sezioni centrali (.sec--t: lavori, recensioni, listino, chi sono, il salone) sono tutte sullo stesso nero,
   separate da una linea sottile. Un tema solo, scuro: provato anche un tema chiaro automatico e scartato (un marchio, una faccia). */
.sec { padding: 56px 0; }
.sec--t { background: var(--k0); color: var(--fg); }
.sec--t + .sec--t, .sec--t + .end { border-top: 1px solid var(--line); }
.sec__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 28px; }
@media (min-width: 1024px) {
  .sec { padding: 128px 0; }
  .sec__head { margin-bottom: 64px; }
  .sec__sub { font-size: 19px; text-align: right; }
}

/* nastro che scorre da solo (lavori e recensioni). Senza JavaScript o con "riduci movimento" si scorre a mano. */
/* position: relative: i testi .sr-only delle schede (assoluti) restano dentro il nastro, altrimenti allargano la pagina con "riduci movimento" */
.rail { position: relative; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: max(var(--pad), env(safe-area-inset-left)); scroll-padding-inline: var(--pad); outline-offset: -2px; }
.rail::-webkit-scrollbar { display: none; }
.rail__track { display: flex; width: max-content; }
.rail__g { display: flex; gap: 14px; padding-right: 14px; }
.rail__g > li { flex: none; scroll-snap-align: start; }
/* con JS la muove main.js: clip, così il browser non può spostarla di lato; si ferma al passaggio, si trascina */
.rail.is-js { overflow: hidden; overflow: clip; padding-inline: 0; scroll-snap-type: none; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.rail.is-js .rail__track { will-change: transform; }
.rail.is-drag { cursor: grabbing; }
.rail.is-js img, .rail.is-js video { -webkit-user-drag: none; pointer-events: none; }
@media (min-width: 1024px) { .rail__g { gap: 20px; padding-right: 20px; } }

/* ---------- lavori: ogni lavoro è un post di Instagram (profilo in alto, foto o video, le icone sotto) ---------- */
.post { width: 262px; }
.post__a { display: block; overflow: hidden; border-radius: var(--r); background: var(--k0); border: 1px solid var(--line); text-decoration: none; color: var(--fg); transition: border-color .25s, transform .35s var(--ease); }
.post__a:hover { border-color: var(--line-2); }
.post__a:active { transform: scale(.97); } /* al tocco: risposta immediata */
.rail .post__a:focus-visible { outline-offset: -3px; }
.post__hd { display: flex; align-items: center; gap: 10px; padding: 11px 12px; }
.post__av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--k0); box-shadow: 0 0 0 1.5px var(--k0), 0 0 0 3px var(--wh); flex: none; overflow: hidden; }
.post__av img { width: 100%; height: 100%; object-fit: cover; }
.post__u { display: grid; font-size: 14px; font-weight: 700; line-height: 1.2; }
.post__loc { font-size: 12px; font-weight: 400; color: var(--mut); }
.post__m { position: relative; display: block; aspect-ratio: 3 / 4; background: var(--k3); }
.post__m img, .post__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post__reel { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; fill: none; stroke: var(--wh); stroke-width: 1.8; stroke-linejoin: round; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .5)); }
.post__ft { display: flex; gap: 14px; padding: 11px 12px 13px; }
.post__i { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.post__i--end { margin-left: auto; }
.post__i--like { fill: #ff3040; stroke: #ff3040; } /* il cuore di Instagram, già rosso: l'unico colore oltre al giallo delle stelle */
@media (min-width: 1024px) {
  .post { width: 340px; }
  .post__hd { padding: 13px 14px; }
  .post__ft { padding: 13px 14px 15px; }
}
/* "Seguimi su Instagram": dopo i lavori, i due profili come pillole */
.igl { display: grid; gap: 12px; }
.igl--sotto { margin-top: 26px; }
.igl__k { font-weight: 800; font-stretch: 75%; font-variation-settings: 'opsz' 96; text-transform: uppercase; font-size: 20px; letter-spacing: .04em; line-height: 1; }
.igl__ls { display: flex; flex-wrap: wrap; gap: 10px; }
.igl__a { display: inline-flex; align-items: center; gap: 12px; min-width: 260px; padding: 5px 18px 5px 5px; border: 1px solid var(--line-2); border-radius: 999px; text-decoration: none; font-size: 15px; font-weight: 650; transition: background-color .25s, color .25s, border-color .25s; }
.igl__a:hover { background: var(--wh); color: var(--k0); border-color: var(--wh); }
.igl__a:active { opacity: .7; }
.igl__av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.igl__ig { width: 18px; height: 18px; margin-left: auto; color: var(--mut); transition: color .25s; }
.igl__a:hover .igl__ig { color: var(--k0); }
@media (min-width: 1024px) { .igl__k { font-size: 24px; } }
/* telefono: i due profili uno sotto l'altro, pillole a tutta larghezza come i pulsanti */
@media (max-width: 599.98px) {
  .igl__ls { display: grid; gap: 8px; }
  .igl__a { display: flex; min-width: 0; }
}

/* ---------- recensioni ---------- */
.rev { overflow: hidden; overflow: clip; }
.rev__top { display: grid; gap: 20px; margin-bottom: 36px; }
.score { font-weight: 400; }
/* il voto sale da 0,0 a 5,0 con cifre a larghezza fissa, così non tremola mentre conta */
.score__num { display: block; overflow: hidden; font-weight: 800; font-stretch: 75%; font-size: clamp(9rem, 46vw, 26rem); line-height: .78; letter-spacing: -.02em; padding-top: .05em; margin-top: -.05em; font-variant-numeric: tabular-nums; }
.rev__meta { display: grid; gap: 16px; align-content: end; }
/* le cinque stelle (anche quelle piccole dell'apertura): si riempiono di giallo una alla volta e ci passa sopra un riflesso */
.stars { position: relative; display: flex; gap: 6px; width: max-content; padding: 2px; overflow: hidden; }
.stars::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent); transform: skewX(-20deg); mix-blend-mode: overlay; opacity: 0; pointer-events: none; }
.star { position: relative; display: block; width: 34px; height: 34px; }
.star svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.star__bg { color: rgba(var(--ov), .16); }
.star__fg { color: var(--star); clip-path: inset(0 var(--cut, -10%) 0 0); } /* --cut: la parte vuota, la mette main.js dalla media di Google */
.star:nth-child(2) { --i: 1; } .star:nth-child(3) { --i: 2; } .star:nth-child(4) { --i: 3; } .star:nth-child(5) { --i: 4; }
.rev__lbl { display: flex; align-items: center; gap: 10px; font-size: 18px; line-height: 1.35; color: var(--mut); }
.rev__lbl b { color: var(--fg); font-weight: 700; }
.g-ic { width: 22px; height: 22px; flex: none; } /* la G di Google a colori: le regole di Google la chiedono accanto alle recensioni */
.rev__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.rev__w2 { font-size: 15px; color: var(--mut); } /* per chi è già cliente: un link, non un secondo pulsante */
.rev__w2 .tl { color: var(--fg); }
.rev__src { max-width: 46ch; font-size: 13px; line-height: 1.45; color: var(--mut); } /* da dove vengono le recensioni (obbligo di trasparenza, D.Lgs. 26/2023) */
/* telefono: il pulsante a tutta larghezza */
@media (max-width: 599.98px) {
  .rev__btns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rev__btns .btn { min-width: 0; min-height: 54px; padding: 8px 10px; font-size: 16px; line-height: 1.05; white-space: normal; text-align: center; }
}
/* le recensioni: schede che scorrono da sole, con l'iniziale come su Google */
.rv { position: relative; width: 300px; display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 24px; border-radius: var(--r); background: var(--k3); border: 1px solid var(--line); }
.rv__by { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.25; }
.rv__av { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--wh); color: var(--k0); font-weight: 800; font-stretch: 75%; font-size: 22px; flex: none; }
img.rv__av { object-fit: cover; background: var(--k4); }
.rv__who { display: grid; min-width: 0; }
.rv__n { font-weight: 700; font-size: 16px; }
a.rv__n { color: inherit; text-decoration: none; }
.rv__w { color: var(--mut); text-decoration: none; }
a.rv__n:hover, a.rv__w:hover { text-decoration: underline; }
.rv__g { width: 22px; height: 22px; flex: none; margin-left: auto; align-self: flex-start; }
.rv__st { color: var(--star); font-size: 15px; letter-spacing: .14em; line-height: 1; }
.rv__t { font-size: 17px; line-height: 1.45; font-weight: 500; }
.rv__t::before { content: "«"; }
.rv__t::after { content: "»"; }
@media (min-width: 1024px) {
  .rev__top { grid-template-columns: auto 1fr; column-gap: clamp(40px, 5vw, 96px); align-items: end; margin-bottom: 64px; }
  .score__num { font-size: clamp(16rem, 22vw, 26rem); }
  .star { width: 44px; height: 44px; }
  .rev__lbl { font-size: 21px; }
  .rv { width: 380px; padding: 28px 28px 30px; }
  .rv__t { font-size: 19px; }
}

/* ---------- listino: schede morbide, niente linee (30/10: "troppe linee") ---------- */
.board { display: grid; gap: 26px; }
.board__grp { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.board__grp::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wh); } /* un punto al posto della linea */
.board__list { display: grid; gap: 8px; }
.row {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "meta dur"; align-items: baseline; column-gap: 16px;
  padding: 12px 14px 12px 16px; border-radius: var(--r); background: rgba(var(--ov), .05); text-decoration: none;
  transition: background-color .25s, transform .3s var(--ease);
}
.row:hover, .row:focus-visible, .row:active { background: rgba(var(--ov), .1); }
.row:focus-visible { outline-offset: 2px; }
/* col mouse compare "Prenota su Zetabarber", sotto i minuti (sul telefono il tocco apre subito la prenotazione) */
.row::after { content: "Prenota su Zetabarber \2197"; content: "Prenota su Zetabarber \2197" / ""; position: absolute; right: 18px; bottom: 16px; font-weight: 800; font-stretch: 75%; text-transform: uppercase; letter-spacing: .05em; font-size: 14px; line-height: 1; padding: 7px 12px; border-radius: 999px; background: var(--wh); color: var(--k0); opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .3s var(--ease); pointer-events: none; }
@media (hover: none) { .row::after { display: none; } }
.row__name { grid-area: name; font-weight: 750; font-stretch: 78%; text-transform: uppercase; font-size: clamp(1.35rem, 6.2vw, 2.9rem); line-height: .95; letter-spacing: .005em; }
.row__price { grid-area: price; justify-self: end; font-weight: 800; font-stretch: 75%; font-size: clamp(2.2rem, 10vw, 4.6rem); line-height: .8; letter-spacing: -.01em; font-variant-numeric: lining-nums; }
.row__price small { font-size: .38em; font-weight: 650; font-stretch: 90%; vertical-align: .95em; margin-left: .06em; letter-spacing: 0; }
.row__meta { grid-area: meta; align-self: start; margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--mut); max-width: 56ch; }
/* la durata si deve vedere (40 minuti per un taglio non è scontato): sta sotto il prezzo, la descrizione resta pulita a sinistra */
.row__dur { grid-area: dur; justify-self: end; align-self: start; margin-top: 8px; display: inline-flex; align-items: center; gap: 5px; line-height: 1.3; transition: opacity .2s; padding: 3px 10px 3px 7px; border-radius: 999px; background: rgba(var(--ov), .16); color: var(--fg); font-size: 14px; font-weight: 750; white-space: nowrap; }
.row__dur .ic { width: 14px; height: 14px; stroke-width: 2.2; }
/* sotto il listino: come si paga. Fatto come una scheda del listino (titolo grande, frase sotto), ma solo col bordo
   perché non si tocca (4/11/2026: "manco se vede Pagamento") */
.board__note { margin-top: 12px; border: 1px solid var(--line-2); border-radius: var(--r); }
.bn { display: grid; gap: 8px; padding: 14px 14px 16px 16px; }
.bn__k { font-weight: 750; font-stretch: 78%; text-transform: uppercase; font-size: clamp(1.35rem, 6.2vw, 2.9rem); line-height: .95; letter-spacing: .005em; color: var(--fg); }
.bn__v { font-size: 15px; line-height: 1.45; color: var(--f05); }
@media (hover: hover) and (min-width: 600px) {
  .row:hover::after, .row:focus-visible::after { opacity: 1; transform: none; }
  .row { padding-bottom: 50px; } /* la riga in più per la pillola */
}
@media (min-width: 1024px) {
  /* le due colonne alte uguali: il riquadro del pagamento riempie lo spazio sotto Skin care Luxury e finisce come Taglio bimbo */
  .board { grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 3.6vw, 64px); align-items: stretch; }
  .board__col { display: flex; flex-direction: column; }
  .board__list { gap: 12px; }
  .row { padding: 24px 26px 22px; }
  .row::after { right: 26px; bottom: 20px; }
  .row__name { font-size: clamp(2.1rem, 2.6vw, 2.9rem); }
  .row__price { font-size: clamp(3.4rem, 4.2vw, 4.6rem); }
  .board__list + .board__note { flex: 1; display: flex; align-items: center; margin-top: 12px; }
  .bn { flex: 1; gap: 12px; padding: 24px 26px; }
  .bn__k { font-size: clamp(2.1rem, 2.6vw, 2.9rem); }
  .bn__v { font-size: clamp(17px, 1.3vw, 21px); }
}
@media (hover: hover) and (min-width: 1024px) { .row { padding-bottom: 60px; } }

/* ---------- chi sono ---------- */
.rub__grid { display: grid; gap: 28px; }
.rub__name { margin-top: 18px; font-weight: 700; font-stretch: 85%; font-size: clamp(1.6rem, 6.8vw, 2.75rem); line-height: 1.05; }
.rub__pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; background: var(--k2); }
.rub__text { display: grid; gap: 22px; align-content: start; }
.rub__p { font-size: 19px; line-height: 1.45; max-width: 44ch; }
.quote blockquote p { font-weight: 650; font-stretch: 85%; font-size: clamp(1.5rem, 6vw, 2.25rem); line-height: 1.12; max-width: 24ch; }
.quote figcaption { margin-top: 10px; font-size: 14px; color: var(--mut); }
@media (min-width: 1024px) {
  .rub__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; }
  .rub__head { grid-column: 1 / -1; }
  .rub__name { margin-top: 20px; }
  .rub__pic { grid-column: 1 / 6; }
  .rub__text { grid-column: 7 / -1; gap: 32px; align-self: center; }
  .rub__p { font-size: 22px; }
}

/* ---------- il salone: orari e dove ----------
   Le regole sotto erano nate per il fondo chiaro ("ink" = scuro): qui "ink" prende il colore del testo. */
.ora { --ink: var(--wh); --ink-mut: var(--f05); --ink-line: rgba(var(--ov), .16); color: var(--fg); padding-bottom: 64px; }
.ora__grid { display: grid; gap: 28px; }
.ora__grid > * { min-width: 0; } /* la colonna non può allargare la pagina (a 320 px lo faceva di 22-44 px) */
.ora__head { display: grid; gap: 20px; }
/* "Il salone" diviso in Orari e Dove (4/11/2026): etichette come i gruppi del listino */
.ora__k { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.ora__k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.ora__addr { margin-top: 12px; }
/* orari: una fascia non si spezza mai; la riga di oggi è chiara col testo nero */
.hours li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 12px; border-bottom: 1px solid var(--ink-line); font-size: 17px; }
.hours__d { font-weight: 650; display: inline-flex; align-items: center; gap: 8px; }
.hours__t { font-variant-numeric: tabular-nums; text-align: right; }
.hours__t i { font-style: normal; color: var(--ink-mut); margin: 0 .4em; }
.hours__t--off { color: var(--ink-mut); }
.hours__r { white-space: nowrap; }
.hours li.is-today { background: var(--ink); color: var(--wh); border-bottom-color: var(--ink); }
.hours li.is-today .hours__t i, .hours li.is-today .hours__t--off { color: var(--f05); }
.ora .hours li.is-today, html.motion .ora [data-hours].is-in li.is-today { color: var(--k0); }
.ora .hours li.is-today .hours__t i, .ora .hours li.is-today .hours__t--off { color: var(--f2); }
.hours__today { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border: 1px solid currentColor; padding: 3px 6px 2px; line-height: 1; }
/* avviso sui festivi, con il numero da toccare */
.hol { margin-top: 14px; font-size: 15px; line-height: 1.45; color: var(--ink-mut); }
.hol .tl { color: var(--ink); }
.addr { font-weight: 750; font-stretch: 78%; text-transform: uppercase; font-size: clamp(1.9rem, 8.2vw, 4rem); line-height: .95; }
.addr span { display: block; white-space: nowrap; }
/* parcheggio gratuito: davanti al salone e in via Benedetto Croce 48 (3/11/2026) */
.park { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 17px; line-height: 1.35; font-weight: 600; color: var(--ink); }
.park__p { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 6px; background: var(--k0); color: var(--wh); font-weight: 800; font-size: 18px; line-height: 1; }
.ora .park__p { background: var(--wh); color: var(--k0); }
/* telefoni stretti: righe più compatte; sotto i 360 px (es. 320) le due fasce vanno una sotto l'altra */
@media (max-width: 399.98px) {
  .hours li { font-size: 15px; padding-inline: 10px; gap: 8px; }
  .hours__t i { margin: 0 .25em; }
}
@media (max-width: 359.98px) {
  .hours li { align-items: center; }
  .hours__t:not(.hours__t--off) { display: grid; justify-items: end; }
  .hours__t:not(.hours__t--off) i { display: none; }
}
@media (min-width: 1024px) {
  .ora { padding-bottom: 112px; }
  .ora__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 56px; }
  .ora__head { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; }
  .ora__hours { grid-column: 1 / 7; }
  .ora__addr { grid-column: 8 / -1; align-self: start; margin-top: 0; }
  .ora__k { font-size: 15px; margin-bottom: 18px; }
  .hours li { font-size: 19px; padding-block: 16px; }
  .hol { font-size: 16px; }
  .addr { font-size: min(4rem, 3.4vw); }
}

/* mappa sull'indirizzo: chiara con i segni neri, si tocca e si apre nelle mappe del telefono */
.map { position: relative; display: block; overflow: hidden; border-radius: var(--r); aspect-ratio: 16 / 10; background: var(--f0); border: 1px solid var(--ink-line); text-decoration: none; color: var(--ink); isolation: isolate; }
.ora .map { border-color: transparent; }
.map:focus-visible { outline: 2px solid var(--k0); outline-offset: 3px; }
.map__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform .8s var(--ease); }
.map:hover .map__img { transform: scale(1.04); }
/* il segnaposto del salone al centro, col nome a sinistra: a destra c'è il parcheggio */
.map__pin { position: absolute; left: 50%; top: 50%; z-index: 1; display: flex; flex-direction: row-reverse; align-items: center; gap: 8px; transform: translate(calc(-100% + 22px), -50%); }
.map__dot { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--k0); color: var(--wh); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); flex: none; }
.map__dot svg { display: block; width: 24px; height: 20px; fill: currentColor; }
.map__name { padding: 6px 10px; background: var(--k0); color: var(--wh); font-weight: 700; font-size: 14px; line-height: 1; white-space: nowrap; }
/* la P del parcheggio di via Benedetto Croce 48. Posizione dalla mappa a zoom 19 (salone al centro, parcheggio a x 790 · y 305
   su 1120×560), convertita per object-fit: cover sulla cornice 16/10: x = 50% + (790 − 560) / 1120 × 125%, y = 50% + (305 − 280) / 560 × 100% */
.map__park { position: absolute; left: 75.7%; top: 54.5%; z-index: 1; display: flex; align-items: center; gap: 6px; transform: translate(-15px, -50%); }
.map__p { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: var(--k0); color: var(--wh); font-weight: 800; font-size: 18px; line-height: 1; box-shadow: 0 4px 12px rgba(0, 0, 0, .22); }
.map__pname { padding: 4px 7px; background: var(--wh); color: var(--k0); border: 1px solid var(--k0); font-weight: 700; font-size: 12px; line-height: 1; white-space: nowrap; }
/* "Apri nelle mappe": pillola nera ben visibile, come i pulsanti del sito */
.map__open { position: absolute; right: 12px; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 999px; background: var(--k0); color: var(--wh); font-weight: 800; font-stretch: 75%; font-variation-settings: 'opsz' 96; text-transform: uppercase; letter-spacing: .035em; font-size: 18px; line-height: 1; box-shadow: 0 8px 22px rgba(0, 0, 0, .28); transition: transform .3s var(--ease); }
.map__open .ic { width: 18px; height: 18px; stroke-width: 2.2; }
.map:hover .map__open { transform: translateY(-2px); }
@media (min-width: 1024px) { .map__open { font-size: 20px; padding: 15px 24px; right: 16px; bottom: 16px; } }
/* sotto la mappa: link e attribuzione piccoli e discreti (l'attribuzione di OpenStreetMap è obbligatoria) */
.map__alt { margin: 10px 0 24px; font-size: 14px; color: var(--ink-mut); }
.map__alt .tl { color: var(--ink); }
.ora .map__alt { margin: 8px 0 22px; font-size: 12px; color: var(--f1); }
.ora .map__alt .tl { color: inherit; font-weight: 500; text-decoration-color: rgba(var(--ov), .3); }
.ora .map__alt .tl:hover { color: var(--fg); }
.map__osm { white-space: nowrap; }
.map__osm a { color: inherit; }

/* ---------- chiusura ----------
   Fascia nera a tutta larghezza che continua nel footer (4/11/2026): la pagina finisce in un blocco nero unico. */
.end { background: var(--k0); padding: 56px 0 8px; }
.book { display: block; color: var(--wh); text-decoration: none; }
.book__k { display: block; font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: clamp(4.6rem, 25vw, 17rem); line-height: .8; letter-spacing: -.01em; }
.book__s { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 17px; font-weight: 600; }
.book:hover .ic--arr { transform: translate(3px, -3px); }
@media (min-width: 1024px) {
  .end { padding: 112px 0 16px; }
  .book { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
  .book__s { margin: 0 0 .4em; font-size: 20px; }
}

/* ---------- footer: il logo piccolo su nero ----------
   Sotto, la riga legale (partita IVA, privacy e cookie sono obbligatori) e il credito. Uguale in tutte le pagine. */
.ft { background: var(--k0); padding: 56px 0 max(28px, env(safe-area-inset-bottom)); }
/* in home il footer continua la fascia nera di PRENOTA: una linea sottile li separa, nessuno stacco di colore */
body:has(.end) .ft { padding-top: 40px; }
body:has(.end) .ft__in { padding-top: 40px; border-top: 1px solid var(--line); }
.ft__in { display: grid; justify-items: center; gap: 20px; text-align: center; }
.ft__logo { display: block; line-height: 0; color: var(--fg); opacity: .9; transition: opacity .2s; }
.ft__logo:hover { opacity: 1; }
.ft__logo .logo { width: 96px; }
/* riga legale leggibile (4/11/2026): 13 px, contrasto oltre 6:1 sul nero, link alti almeno 24 px */
.ft__legal, .ft__credit { font-size: 13px; line-height: 1.5; color: rgba(var(--ov), .64); }
.ft__legal a, .ft__credit a { display: inline-block; padding-block: 4px; color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(var(--ov), .3); }
.ft__legal a:hover, .ft__credit a:hover { color: var(--fg); text-decoration-color: currentColor; }
.ft__legal .nw { white-space: nowrap; } /* sul telefono va a capo tra la P.IVA e Privacy, mai a metà */
.ft__credit { margin-top: -12px; }
.ft__credit a { font-weight: 700; color: var(--fg); }

/* ---------- pagine interne: privacy, cookie, 404 ---------- */
.page { padding: calc(var(--hd) + 48px) 0 72px; }
.doc { max-width: 68ch; }
.doc h1 { margin-bottom: 28px; }
.doc h2 { font-size: 22px; font-weight: 700; margin: 36px 0 10px; }
.doc p { margin-bottom: 12px; color: var(--f0); }
.doc ul { margin: 0 0 12px; padding-left: 20px; list-style: disc; color: var(--f0); }
.doc li { margin-bottom: 6px; }
.doc .todo { display: inline; padding: 1px 6px; }
.doc .todo::before { content: none; }
.doc__back { margin-top: 36px; }
.nf { padding: calc(var(--hd) + 40px) 0 80px; }
.nf__code { display: block; color: var(--wh); font-weight: 800; font-stretch: 75%; font-variation-settings: 'opsz' 96; font-size: clamp(9rem, 46vw, 22rem); line-height: .78; letter-spacing: -.02em; } /* come il 5,0 delle recensioni */
.nf h1 { margin-top: 24px; font-size: clamp(2rem, 8vw, 3.5rem); font-weight: 750; font-stretch: 80%; text-transform: uppercase; line-height: 1; }
.nf p { margin-top: 12px; color: var(--mut); }
.nf__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* ---------- movimento: solo con html.motion (boot.js), mai con "riduci movimento" ---------- */
/* menu: sei fasce che entrano a rialzi, poi le voci a cascata; si chiude al contrario */
html.motion .menu__wipe i { transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s cubic-bezier(.7, 0, .2, 1); }
html.motion .menu__wipe i:nth-child(2) { transition-delay: .05s; }
html.motion .menu__wipe i:nth-child(3) { transition-delay: .1s; }
html.motion .menu__wipe i:nth-child(4) { transition-delay: .15s; }
html.motion .menu__wipe i:nth-child(5) { transition-delay: .2s; }
html.motion .menu__wipe i:nth-child(6) { transition-delay: .25s; }
html.motion .menu.is-in .menu__wipe i { transform: none; }
html.motion .menu.is-out .menu__wipe i { transform-origin: 100% 50%; transform: scaleX(0); transition-duration: .4s; }
html.motion .menu.is-out .menu__wipe i:nth-child(1) { transition-delay: .25s; }
html.motion .menu.is-out .menu__wipe i:nth-child(2) { transition-delay: .2s; }
html.motion .menu.is-out .menu__wipe i:nth-child(3) { transition-delay: .15s; }
html.motion .menu.is-out .menu__wipe i:nth-child(4) { transition-delay: .1s; }
html.motion .menu.is-out .menu__wipe i:nth-child(5) { transition-delay: .05s; }
html.motion .menu.is-out .menu__wipe i:nth-child(6) { transition-delay: 0s; }
html.motion .menu__bar, html.motion .menu__list li, html.motion .menu__foot { opacity: 0; transform: translateY(26px); transition: opacity .45s, transform .6s var(--ease); }
html.motion .menu__bar { transform: none; }
html.motion .menu.is-in .menu__bar { opacity: 1; transition-delay: .3s; }
html.motion .menu.is-in .menu__list li { opacity: 1; transform: none; }
html.motion .menu.is-in .menu__list li:nth-child(1) { transition-delay: .32s; }
html.motion .menu.is-in .menu__list li:nth-child(2) { transition-delay: .38s; }
html.motion .menu.is-in .menu__list li:nth-child(3) { transition-delay: .44s; }
html.motion .menu.is-in .menu__list li:nth-child(4) { transition-delay: .5s; }
html.motion .menu.is-in .menu__list li:nth-child(5) { transition-delay: .56s; }
html.motion .menu.is-in .menu__foot { opacity: 1; transform: none; transition-delay: .62s; }
html.motion .menu.is-in .menu__x i { animation: xIn .5s .35s var(--ease) both; }
html.motion .menu.is-in .menu__x i + i { animation-name: xIn2; }
@keyframes xIn { from { transform: rotate(0); } to { transform: rotate(45deg); } }
@keyframes xIn2 { from { transform: rotate(0); } to { transform: rotate(-45deg); } }
html.motion .menu.is-out .menu__bar, html.motion .menu.is-out .menu__list li, html.motion .menu.is-out .menu__foot { opacity: 0; transform: translateY(-12px); transition: opacity .2s, transform .25s; transition-delay: 0s; }

/* apertura: la carrellata delle foto; poi titolo e pulsanti fanno un piccolo movimento, una volta sola.
   Non partono trasparenti: il titolo è la cosa più grande della pagina e Google misura quando compare;
   Prenota deve esserci da subito per chi ha fretta (3/11/2026, prima arrivava dopo 1,2-1,9 s). */
html.motion .hero__pic img.is-on, html.motion .hero__pic img.was-on { animation: cam 7.5s linear both; }
html.motion .hero__pic picture:nth-child(even) img.is-on, html.motion .hero__pic picture:nth-child(even) img.was-on { animation-name: cam2; }
@keyframes cam { from { transform: scale(1.16) translate3d(-1.6%, 1%, 0); } to { transform: scale(1.04) translate3d(1.2%, -.6%, 0); } }
@keyframes cam2 { from { transform: scale(1.04) translate3d(1.4%, -.8%, 0); } to { transform: scale(1.16) translate3d(-1.2%, .8%, 0); } }
html.motion .hero__h1 { transform: translateY(12px); transition: transform .9s .12s var(--ease); }
html.motion .hero__info { transform: translateY(18px); transition: transform .9s var(--ease) .26s; }
html.hero-in .hero__h1, html.hero-in .hero__info { opacity: 1; transform: none; }

/* comparse: blocchi e titoli salgono quando entrano nello schermo */
html.motion [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0ms); }
html.motion [data-reveal].is-in { opacity: 1; transform: none; }
html.motion .h2 .h2__in, html.motion .score__num .h2__in { transform: translateY(102%); transition: transform 1s var(--ease); }
html.motion .is-in .h2__in, html.motion .h2.is-in .h2__in { transform: none; }
html.motion .rev__top .score__num .h2__in { transition-duration: .7s; }
/* post e recensioni: entrano da destra uno dopo l'altro la prima volta che arrivano */
html.motion [data-rail] .rail__g > li { opacity: 0; transform: translateX(56px); transition: opacity .6s ease, transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
html.motion [data-rail].is-in .rail__g > li { opacity: 1; transform: none; }
/* stelle: si riempiono una alla volta, saltano, poi passa il riflesso */
html.motion .rev__top .star__fg { clip-path: inset(0 100% 0 0); transition: clip-path .42s cubic-bezier(.6, 0, .2, 1); transition-delay: calc(1.1s + var(--i, 0) * .15s); }
html.motion .rev__top.is-built .star__fg { clip-path: inset(0 var(--cut, -10%) 0 0); }
html.motion .rev__top.is-built .star { animation: starPop .55s calc(1.3s + var(--i, 0) * .15s) cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes starPop { 0% { transform: none; } 45% { transform: scale(1.28) rotate(10deg); } 100% { transform: none; } }
html.motion .rev__top.is-built .stars::after { animation: shine 1s 2.2s ease-in-out both; }
@keyframes shine { 0% { left: -60%; opacity: 1; } 100% { left: 120%; opacity: 1; } }
/* listino: le schede a cascata */
html.motion .board .row, html.motion .board .board__grp { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease) var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms), background-color .25s; }
html.motion .board.is-in .row, html.motion .board.is-in .board__grp { opacity: 1; transform: none; }
html.motion .row::after { transition-delay: 0ms; }
/* chi sono: la foto si apre come un sipario dal basso */
html.motion .rub__pic[data-reveal] { opacity: 1; transform: none; overflow: hidden; }
html.motion .rub__pic img { clip-path: inset(100% 0 0 0); transform: scale(1.14); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1), transform 1.6s var(--ease); }
html.motion .rub__pic.is-in img { clip-path: inset(0); transform: none; }
/* orari: le righe arrivano a cascata, poi la barra di oggi si riempie da sinistra */
html.motion [data-hours] li { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
html.motion [data-hours].is-in li { opacity: 1; transform: none; }
html.motion [data-hours] li.is-today { background: linear-gradient(var(--ink), var(--ink)) 0 0 / 0% 100% no-repeat; color: var(--ink); transition: opacity .5s ease, transform .6s var(--ease), background-size .8s cubic-bezier(.7, 0, .2, 1), color .3s; transition-delay: calc(var(--i, 0) * 55ms), calc(var(--i, 0) * 55ms), .55s, .8s; }
html.motion [data-hours].is-in li.is-today { background-size: 100% 100%; color: var(--wh); }
/* PRENOTA: la parola si scopre da sinistra */
html.motion .book .book__k { clip-path: inset(-20% 100% -20% 0); transition: clip-path 1.1s .15s cubic-bezier(.7, 0, .2, 1); }
html.motion .book.is-in .book__k { clip-path: inset(-20% -20% -20% 0); }

/* ---------- preferenze del sistema ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__pic img { animation: none !important; }
  .btn--light { transition: none; }
  .map:hover .map__img { transform: none; }
}
/* chi preferisce più contrasto: grigi del testo più chiari */
@media (prefers-contrast: more) { :root { --mut: #d0d0cb; } }