/* ==========================================================================
   FLAVORE — foglio della landing Google Ads (/ristorante-montecatini-terme/)

   NON e' il foglio del sito. custom.css sono 1165 righe di animazioni
   scroll-driven per una pagina da 21 schermate: su una landing pagata a clic
   sono peso morto e rischio CLS. Qui non c'e' UNA animazione allo scorrimento,
   e non c'e' Lenis.

   Cosa e' stato copiato da custom.css, e perche':
   1. i tre @font-face Libertinus — i woff2 sono gia' online e gia' in cache
      per chi ha visto il sito;
   2. il blocco [data-cookie-banner], media query 520px compresa. consent.js
      mette stili inline SOLO su h3, p e contenitore bottoni: position, top,
      z-index, sfondo e larghezza vivono qui. Senza questo blocco il banner
      finisce in fondo al body, in flusso normale, senza sfondo, e non lo vede
      nessuno. Non e' estetica: e' il consenso che salta;
   3. le regole del carosello recensioni, cosi' i due muri non divergono.

   GLI Z-INDEX VERI DI FLAVORE (non quelli di Piazza):
     banner cookie      1000  (qui sotto)
     modale preferenze  1001  (inline in consent.js:208)
     barra fissa CTA     900  ← STA SOTTO. Il banner esce IN ALTO, la barra
                               sta in basso: non si toccano mai, e la barra
                               resta cliccabile anche col banner aperto.
   ========================================================================== */

@font-face{
  font-family:'Libertinus Sans';
  src:url('/fonts/libertinus-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Libertinus Sans';
  src:url('/fonts/libertinus-400-italic.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Libertinus Sans';
  src:url('/fonts/libertinus-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --notte:#141414;
  --bosco:#3b4e3b;
  --rame:#c38848;
  --crema:#f7f3f0;
  --inchiostro:#231f20;
  /* sul fondo bosco il rame fa 2,96:1 e non si usa: al suo posto questo */
  --rame-su-verde:#e6c9a4;

  /* font-imposto-dal-brand: stesso stack del sito, i woff2 sono gia' serviti
     dal dominio e gia' in cache per chi passa dalla home */
  --sans:Optima, 'Optima nova', 'Libertinus Sans', Candara, ui-serif, Georgia, serif;

  --titolo:clamp(1.6rem, 4.6vw, 2.6rem);
  --corpo:clamp(1rem, .4vw + .92rem, 1.12rem);
  --minuta:.78rem;
  --respiro:clamp(3.4rem, 7vw, 6rem);
  --largo:70rem;
  --barra-h:4.35rem;
}

*,*::before,*::after{box-sizing:border-box}

/* BLOCCANTE, learning site-mobile-overflow-x-lock-mandatory */
html,body{overflow-x:clip;touch-action:pan-y;max-width:100vw}
html{scroll-behavior:auto}

body{
  margin:0;
  background:var(--notte);
  color:var(--crema);
  font-family:var(--sans);
  font-size:var(--corpo);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block}

a{color:inherit}

.salta{
  position:absolute;left:-9999px;top:0;z-index:1200;
  background:var(--crema);color:var(--inchiostro);padding:.8rem 1.2rem;
}
.salta:focus{left:.5rem;top:.5rem}

:focus-visible{outline:2px solid var(--rame);outline-offset:3px}

.dentro{
  width:min(100% - 2.4rem, var(--largo));
  margin-inline:auto;
}

/* ── bottoni ─────────────────────────────────────────────────────────────
   Tutti almeno 50px di altezza: sotto i 48 il dito sbaglia (WCAG 2.2 AA). */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:.75rem 1.35rem;
  font-family:inherit;font-size:1rem;line-height:1.2;
  text-decoration:none;text-align:center;
  border:1px solid transparent;border-radius:0;
  transition:background-color .25s ease, color .25s ease;
}
.btn--primario{background:var(--rame);color:var(--inchiostro);border-color:var(--rame)}
.btn--primario:hover{background:var(--crema);border-color:var(--crema)}
.btn--linea{background:transparent;color:inherit;border-color:currentColor}
.btn--linea:hover{background:currentColor}
.sezione--chiara .btn--linea:hover{color:var(--crema)}
.sezione--scura .btn--linea:hover,.fold .btn--linea:hover{color:var(--inchiostro)}
.btn--largo{width:100%}

.azioni{display:flex;flex-wrap:wrap;gap:.7rem;margin:0}
.azioni .btn{flex:1 1 12rem}
/* su schermo largo due bottoni a meta' pagina sembrano una barra di
   navigazione, non due azioni: si fermano prima */
@media (min-width:700px){.azioni{max-width:34rem}}

/* ── testa: solo il monogramma, nessuna navigazione ──────────────────────
   Un obiettivo, una pagina, zero vie d'uscita. Non e' fisso: un elemento
   fisso in piu' e' un intercettatore di clic in piu'. */
.testa{
  position:absolute;top:0;left:0;right:0;z-index:5;
  display:flex;justify-content:center;
  padding:1.15rem 1rem 0;
  pointer-events:none;
}
.testa img{width:42px;height:44px;opacity:.95}

/* ══════════ FOLD ══════════════════════════════════════════════════════
   Il contenuto e' ancorato IN BASSO. Il banner cookie esce in alto e a
   375px si prende i primi ~350px degli 812: qualunque cosa ancorata in
   alto finisce sotto di lui. Ancorando in basso il banner non copre
   niente e i bottoni restano cliccabili — misurato con elementFromPoint,
   non a occhio. */
.fold{
  position:relative;
  min-height:100svh;
  display:flex;align-items:flex-end;
  padding-block:6.5rem 1.25rem;
  padding-bottom:calc(1.25rem + env(safe-area-inset-bottom));
  overflow:hidden;
  background:var(--notte);
}
/* proporzione-libera: sfondo */
.fold__sfondo{position:absolute;inset:0;z-index:0}
.fold__sfondo img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.fold__velo{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top, rgba(10,10,10,.94) 0%, rgba(10,10,10,.82) 34%, rgba(10,10,10,.42) 62%, rgba(10,10,10,.55) 100%);
}
.fold .dentro{position:relative;z-index:2}

/* senza JS la barra fissa resta a schermo anche qui: si lascia lo spazio */
html:not(.js) .fold{padding-bottom:calc(var(--barra-h) + 1.4rem + env(safe-area-inset-bottom))}

.fold h1{
  margin:0 0 .45rem;
  font-size:clamp(1.6rem, 5.9vw, 3.15rem);
  line-height:1.12;font-weight:400;letter-spacing:-.005em;
  text-wrap:balance;
}
.fold__sotto{
  margin:0 0 .7rem;
  font-size:clamp(.93rem, 2.8vw, 1.15rem);line-height:1.42;
  color:rgba(247,243,240,.9);
  max-width:34rem;
}
.fold__fatti{
  margin:0 0 .85rem;
  font-size:clamp(.8rem, 2.6vw, .92rem);line-height:1.48;
  color:rgba(247,243,240,.86);
}
/* i pezzi non si spezzano dentro, ma FRA un pezzo e l'altro si va a capo:
   e' l'unico modo in cui la riga sta in 375px senza perdere l'ultima voce */
.fold__fatti span{white-space:nowrap}
.fold__fatti i{font-style:normal;color:rgba(247,243,240,.45)}

/* ── voto: MAI cinque stelle piene accanto a 4,6 ─────────────────────────
   Il generatore delle recensioni scrive sempre cinque simboli. Qui si
   spengono e ne resta uno solo, seguito dal numero: 4,6 non e' 5,0, e su
   una pagina che vende l'onesta' del prezzo contraddirsi costa piu' di
   quanto rende. La regola vive nel CSS, cosi' regge anche il giorno in
   cui il job del martedi' riscrivera' il blocco. */
.voto{
  display:flex;align-items:baseline;justify-content:flex-start;
  gap:.45rem;flex-wrap:wrap;margin:0 0 .75rem;
}
.voto__stelle{font-size:0;line-height:1}
.voto__stelle::before{
  content:"\2605";font-size:1.15rem;color:var(--rame);
}
.voto__numero{font-size:1.35rem;line-height:1;color:var(--crema)}
.voto__conto{font-size:.86rem;color:rgba(247,243,240,.68)}

/* ══════════ BARRA FISSA ═══════════════════════════════════════════════
   z-index 900: SOTTO il banner (1000) e sotto il modale (1001). Il banner
   esce in alto, la barra sta in basso: non si sovrappongono mai, quindi la
   CTA resta visibile E cliccabile col consenso ancora da dare — che e'
   quello che chiede l'errore 6 del gate CRO.
   Stato di partenza: VISIBILE. Se il JS non gira resta a schermo (ridondanza
   innocua), non sparisce. Con il JS si toglie finche' si e' nella fold, dove
   i bottoni ci sono gia'. */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:900;
  display:flex;gap:.6rem;
  padding:.6rem .9rem;
  padding-bottom:calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(16,16,16,.97);
  border-top:1px solid rgba(247,243,240,.14);
  transition:transform .28s ease;
}
.barra .btn{flex:1 1 0;font-size:.95rem;padding-inline:.6rem}
/* su desktop due bottoni larghi mezzo schermo sembrano una barra di
   navigazione: si stringono e si centrano */
@media (min-width:700px){
  .barra{justify-content:center;padding-block:.7rem}
  .barra .btn{flex:0 1 15rem}
}
html.js .barra{transform:translateY(115%)}
html.js .barra.barra--su{transform:translateY(0)}
@media (prefers-reduced-motion: reduce){.barra{transition:none}}

/* ══════════ SEZIONI ═══════════════════════════════════════════════════ */
.sezione{padding-block:var(--respiro)}
.sezione--scura{background:var(--notte);color:var(--crema)}
.sezione--inchiostro{background:var(--inchiostro);color:var(--crema)}
.sezione--chiara{background:var(--crema);color:var(--inchiostro)}
.sezione--verde{background:var(--bosco);color:var(--crema)}

.occhiello{
  margin:0 0 .55rem;font-size:var(--minuta);letter-spacing:.16em;
  text-transform:uppercase;color:var(--rame);
}
.sezione--verde .occhiello{color:var(--rame-su-verde)}
.sezione--chiara .occhiello{color:#8a5f2e}   /* rame scurito: 4,6:1 su crema */

h2{
  margin:0 0 1rem;font-size:var(--titolo);line-height:1.18;
  font-weight:400;letter-spacing:-.005em;text-wrap:balance;
}
h3{margin:0 0 .35rem;font-size:1.08rem;font-weight:700;line-height:1.3}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

.testo{max-width:38rem}

.elenco{margin:0 0 1.3rem;padding:0;list-style:none;max-width:34rem}
.elenco li{
  position:relative;padding-left:1.15rem;margin-bottom:.45rem;
  font-size:1.02rem;line-height:1.5;
}
.elenco li::before{
  content:"\00B7";position:absolute;left:.15rem;top:0;
  font-size:1.35rem;line-height:1.15;color:var(--rame);
}
.sezione--verde .elenco li::before{color:var(--rame-su-verde)}
.sezione--chiara .elenco li::before{color:#8a5f2e}

/* La foto tiene la SUA proporzione: non si ritaglia, si stringe. Su schermo
   largo una 3:2 a tutta colonna diventerebbe alta 750px e spingerebbe la
   sezione dopo fuori da tre schermate. */
.foto{margin:0 0 1.8rem;max-width:46rem}
.foto img{width:100%;height:auto}
.foto figcaption{
  margin-top:.6rem;font-size:var(--minuta);letter-spacing:.06em;
  color:rgba(247,243,240,.55);
}
/* .6 di opacità su crema dava 4,18:1, sotto la soglia AA di 4,5. Misurato
   con Lighthouse, non stimato. */
.sezione--chiara .foto figcaption{color:rgba(35,31,32,.74)}

.nota{font-size:.88rem;color:rgba(247,243,240,.62);margin-top:.85rem}
.sezione--chiara .nota{color:rgba(35,31,32,.66)}

/* Un link che e' un'azione vera deve avere l'altezza di un bersaglio da dito
   (WCAG 2.2 AA: 44px). Da testo puro misurava 19px. */
.link-azione{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--rame);text-underline-offset:.25em;
}
.sezione--chiara .link-azione{color:#8a5f2e}

/* ── prova sociale sotto la fold: tre citazioni vere ─────────────────── */
.prove{
  display:grid;grid-template-columns:1fr;gap:1rem;
  margin:0 0 1.8rem;padding:0;list-style:none;
}
@media (min-width:860px){.prove{grid-template-columns:repeat(3,1fr)}}
/* le tre schede finiscono alla stessa altezza: bordi sfalsati in fondo
   sono la firma di una griglia lasciata a se' stessa */
.prove > li{display:flex}
.prova{
  flex:1;
  margin:0;padding:1.25rem 1.3rem;
  border:1px solid rgba(247,243,240,.15);
  background:rgba(247,243,240,.03);
}
.prova__stelle{margin:0 0 .6rem;color:var(--rame);letter-spacing:.2em;font-size:.8rem}
.prova{display:flex;flex-direction:column}
.prova blockquote{margin:0 0 .7rem;font-size:.97rem;line-height:1.6;color:rgba(247,243,240,.92)}
.prova figcaption{margin-top:auto;font-size:var(--minuta);letter-spacing:.09em;text-transform:uppercase;color:rgba(247,243,240,.5)}

/* ── i tre piatti ───────────────────────────────────────────────────── */
.piatti{
  display:grid;grid-template-columns:1fr;gap:1.1rem;
  margin:0 0 1.4rem;padding:0;list-style:none;
}
@media (min-width:860px){.piatti{grid-template-columns:repeat(3,1fr)}}
.piatto{
  display:flex;flex-direction:column;
  padding:1.2rem 1.3rem;
  border:1px solid rgba(247,243,240,.15);
  background:rgba(247,243,240,.03);
}
.piatto p{margin:0;font-size:.97rem;line-height:1.55;color:rgba(247,243,240,.86)}
/* il prezzo si allinea in fondo a tutte e tre le schede, non dove finisce
   il testo: tre prezzi a tre altezze diverse si leggono peggio */
.piatto__prezzo{display:block;margin-top:auto;padding-top:.6rem;color:var(--rame)}

/* ── domande ─────────────────────────────────────────────────────────── */
.domande{margin:0;max-width:44rem}
.domanda{
  border-bottom:1px solid rgba(35,31,32,.16);
  padding-block:.15rem;
}
.domanda summary{
  cursor:pointer;list-style:none;
  padding:.95rem 2rem .95rem 0;position:relative;
  font-size:1.05rem;line-height:1.4;
}
.domanda summary::-webkit-details-marker{display:none}
.domanda summary::after{
  content:"+";position:absolute;right:.2rem;top:.85rem;
  font-size:1.3rem;line-height:1;color:#8a5f2e;
}
.domanda[open] summary::after{content:"–"}
.domanda p{padding:0 0 1.1rem;font-size:.98rem;line-height:1.6;color:rgba(35,31,32,.82)}
/* le stesse domande su fondo scuro (pagina menù) */
.domanda--scura{border-bottom-color:rgba(247,243,240,.16)}
.domanda--scura summary::after{color:var(--rame)}
.domanda--scura p{color:rgba(247,243,240,.82)}

/* ── piede ───────────────────────────────────────────────────────────── */
.piede{
  background:var(--inchiostro);color:rgba(247,243,240,.72);
  padding-block:clamp(2.8rem,6vw,4.2rem);
  padding-bottom:calc(clamp(2.8rem,6vw,4.2rem) + var(--barra-h));
  text-align:center;font-size:.92rem;
}
.piede__marchio{width:60px;height:auto;margin:0 auto 1.6rem;opacity:.9}
.piede__payoff{
  margin:0 0 1.6rem;font-style:italic;font-size:1.05rem;color:rgba(247,243,240,.86);
}
.piede a{color:var(--rame-su-verde);display:inline-flex;align-items:center;min-height:44px}
.piede__righe{
  margin:1.4rem 0 0;display:flex;gap:.4rem 1.1rem;justify-content:center;flex-wrap:wrap;
  font-size:var(--minuta);letter-spacing:.13em;text-transform:uppercase;
  color:rgba(247,243,240,.5);
}
.piede__righe a{color:rgba(247,243,240,.72);text-decoration:none;min-height:44px}
.piede__righe a:hover{color:var(--crema)}

/* ══════════════════════════════════════════════════════════════════════
   RECENSIONI — il muro si riscrive da solo (regole copiate da custom.css
   righe 457-533, cosi' i due caroselli non divergono nell'aspetto).
   Nessuna schema.org qui: marcare recensioni prese da terzi, o le proprie
   recensioni sul proprio sito, e' contro le linee guida dei rich result.
   DUE DIFFERENZE VOLUTE sulla landing: niente avanzamento automatico e
   niente trascinamento col mouse (quel JS sta in animazioni.js, che qui
   non c'e'), quindi si aggiunge lo scatto allo scorrimento nativo; e il
   gruppo clone — che serviva solo all'animazione continua — si spegne
   sempre, non solo con prefers-reduced-motion.
   ═════════════════════════════════════════════════════════════════════ */
#recensioni{text-align:center}
#recensioni .voto{justify-content:center;margin-bottom:clamp(2rem,4vw,3rem)}

.recensioni{
  position:relative;width:100%;
  overflow-x:auto;overflow-y:hidden;
  text-align:left;
  /* il body e' pan-y per bloccare lo scorrimento laterale della PAGINA:
     qui serve l'eccezione, se no il dito non puo' spostare le schede */
  touch-action:pan-x pan-y;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
  scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.recensioni::-webkit-scrollbar{display:none}
.recensioni__pista{display:flex;width:max-content}
.recensioni__gruppo{display:flex;gap:clamp(1rem,1.8vw,1.5rem);padding-right:clamp(1rem,1.8vw,1.5rem)}
.recensioni__gruppo[aria-hidden="true"]{display:none}
.recensioni__velo{display:none}
.recensione{
  flex:0 0 auto;width:clamp(15.5rem, 21vw, 19rem);
  margin:0;padding:clamp(1.4rem,2.4vw,2rem);
  border:1px solid rgba(247,243,240,.14);
  background:rgba(247,243,240,.028);
  display:flex;flex-direction:column;gap:.9rem;
  scroll-snap-align:start;
}
.recensione__stelle{margin:0;color:var(--rame);letter-spacing:.2em;font-size:.82rem}
.recensione blockquote{
  margin:0;font-size:.95rem;line-height:1.65;color:rgba(247,243,240,.88);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;
  overflow:hidden;
}
.recensione figcaption{
  margin-top:auto;font-size:var(--minuta);letter-spacing:.1em;
  text-transform:uppercase;color:rgba(247,243,240,.52);
}

/* ══════════════════════════════════════════════════════════════════════
   PAGINA MENU — stessa impalcatura, una colonna
   ═════════════════════════════════════════════════════════════════════ */
.menu__gruppo{margin:0 0 2.6rem;max-width:44rem}
.menu__gruppo h2{
  font-size:1.15rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rame);margin-bottom:1.1rem;
}
.menu__lista{margin:0;padding:0;list-style:none}
.menu__voce{
  display:flex;gap:1rem;align-items:baseline;justify-content:space-between;
  padding-block:.7rem;border-bottom:1px solid rgba(247,243,240,.12);
}
.menu__voce strong{font-weight:400;font-size:1.04rem}
.menu__voce em{display:block;font-style:normal;font-size:.88rem;color:rgba(247,243,240,.62);line-height:1.45}
.menu__prezzo{white-space:nowrap;color:var(--rame)}
.menu__nota{font-size:.86rem;color:rgba(247,243,240,.58);max-width:44rem;line-height:1.6}

/* ══════════════════════════════════════════════════════════════════════
   BANNER COOKIE — copiato VERBATIM da custom.css righe 1126-1158.
   consent.js crea il div e mette stili inline solo su h3, p e contenitore
   dei bottoni: senza questo blocco il banner finisce in fondo al body, in
   flusso normale, senza sfondo. Non e' CRO, e' il consenso Garante.
   Esce IN ALTO: in basso si sedeva sopra il bottone di prenotazione e il
   clic finiva su di lui (misurato il 25/08 con elementFromPoint).
   ═════════════════════════════════════════════════════════════════════ */
[data-cookie-banner]{
  position:fixed; left:50%; top:1rem; transform:translateX(-50%);
  z-index:1000; width:min(94vw, 40rem);
  max-height:calc(100dvh - 2rem); overflow-y:auto;
  background:rgba(23,29,23,.96);
  border:1px solid rgba(247,243,240,.16);
  color:var(--crema); padding:1.6rem 1.5rem 1.4rem;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
  font-size:.92rem; line-height:1.6;
}
[data-cookie-banner] p{color:rgba(247,243,240,.82)}
[data-cookie-banner] a{color:#e6c9a4}
[data-cookie-banner] .close-x{
  position:absolute; top:.6rem; right:.7rem; width:2rem; height:2rem;
  background:transparent; border:0; color:rgba(247,243,240,.6);
  font-size:1.3rem; line-height:1; cursor:pointer;
}
[data-cookie-banner] .close-x:hover{color:var(--crema)}
[data-cookie-banner] button[data-action]{
  flex:1 1 auto; min-width:8rem;
  padding:.7rem 1.1rem; border-radius:0; cursor:pointer;
  font-family:inherit; font-size:.88rem; letter-spacing:normal;
  background:transparent; color:var(--crema);
  border:1px solid rgba(247,243,240,.6);
  transition:background-color .3s ease, color .3s ease;
}
[data-cookie-banner] button[data-action]:hover{background:var(--crema);color:var(--inchiostro)}
[data-cookie-banner] .btn-accept{border-color:var(--crema)}
[data-cookie-banner] button:focus-visible{outline:2px solid var(--rame);outline-offset:3px}
@media (max-width:520px){
  [data-cookie-banner]{top:0;width:100%;border-left:0;border-right:0;border-top:0;max-height:100dvh}
  [data-cookie-banner] button[data-action]{flex:1 1 100%}
}