/* =========================================================================
   Bomber Garage - foglio di stile unico
   Officina moto, via Umberto Biancamano 34, Roma

   Impostazione grafica: fondo nero, oro preso dal logo (#e8c888),
   titoli grossi in maiuscolo, foto grandi. Niente righe di separazione:
   a dividere sono lo spazio e il fondo. Angoli leggermente stondati.

   Indice:
     1.  Carattere
     2.  Variabili                      <- si cambia quasi tutto da qui
     3.  Base
     4.  Tipografia
     5.  Impaginazione
     6.  Icone
     7.  Testata
     8.  Pulsanti e barra contatti
     9.  Apertura
    10.  Cosa si fa qui
    11.  Galleria
    12.  L'officina
    13.  Dove siamo
    14.  Contatti
    15.  Piede pagina

   Mobile first: le regole base valgono per il telefono, i @media
   aggiungono roba solo dagli schermi larghi in su.
   ========================================================================= */


/* =========================================================================
   1. CARATTERE
   Inter, caricato dalla cartella fonts/. Un solo file variabile con tutti
   gli spessori. Niente Google Fonts, niente richieste esterne, quindi
   niente cookie e niente banner.
   ========================================================================= */

@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* =========================================================================
   2. VARIABILI
   ========================================================================= */

:root {

  /* --- colori ---------------------------------------------------------- */
  --nero:      #0c0c0d;   /* fondo pagina */
  --nero-2:    #151517;   /* sezioni e riquadri staccati */
  --nero-3:    #1f1f23;   /* superfici sopra ai riquadri */
  --bianco:    #f6f4f0;   /* testo principale */
  --grigio:    rgba(246, 244, 240, 0.64);  /* testo secondario */
  --grigio-2:  rgba(246, 244, 240, 0.42);  /* didascalie */
  --oro:       #e8c888;   /* preso dal logo: accento e pulsante principale */
  --oro-cupo:  #d2ac62;   /* stesso oro, per il passaggio del mouse */

  /* --- caratteri ------------------------------------------------------- */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --t-corpo:    1.0625rem;
  --t-piccolo:  0.9375rem;
  --t-micro:    0.75rem;
  --t-lead:     clamp(1.125rem, 1.7vw, 1.375rem);
  --t-h3:       1.1875rem;
  --t-h2:       clamp(2rem, 6vw, 3.5rem);
  --t-h1:       clamp(2.75rem, 10.5vw, 6.5rem);

  /* --- spazi ----------------------------------------------------------- */
  --sp-xs:  0.5rem;
  --sp-s:   1rem;
  --sp-m:   1.5rem;
  --sp-l:   2.5rem;
  --sp-xl:  4rem;
  --sezione: clamp(4rem, 9vw, 7rem);

  /* --- misure ---------------------------------------------------------- */
  --larghezza:  74rem;
  --stretto:    34rem;
  --margine:    1.375rem;
  --raggio:     8px;    /* pulsanti */
  --raggio-g:   14px;   /* riquadri e foto */
  --testata:    4.25rem;
  --barra:      4.5rem; /* barra contatti in fondo, solo telefono */
}


/* =========================================================================
   3. BASE
   ========================================================================= */

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

html {
  background: var(--nero);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--nero);
  color: var(--bianco);
  font-family: var(--font);
  font-size: var(--t-corpo);
  line-height: 1.6;
  font-feature-settings: "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: calc(var(--barra) + env(safe-area-inset-bottom, 0px));
}

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

a { color: inherit; }

:where(h1, h2, h3, p, ul, ol, figure, dl) { margin: 0; }

:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 3px;
  border-radius: 4px;
}

:target { scroll-margin-top: calc(var(--testata) + var(--sp-s)); }


/* =========================================================================
   4. TIPOGRAFIA
   I titoli sono in maiuscolo e spessi: e' la voce dell'officina.
   Inter a corpo grande vuole la spaziatura fra le lettere stretta.
   ========================================================================= */

h1, h2 {
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.96;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }

h3 {
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

p { text-wrap: pretty; }

/* etichetta di sezione, in oro, piccola */
.etichetta {
  display: block;
  margin-bottom: 0.875rem;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oro);
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  letter-spacing: -0.011em;
  color: var(--grigio);
}

.lead strong { color: var(--bianco); font-weight: 600; }

.misura   { max-width: var(--stretto); }
.misura-l { max-width: 42rem; }

.prosa { color: var(--grigio); }
.prosa > * + * { margin-top: var(--sp-s); }
.prosa strong { color: var(--bianco); font-weight: 600; }

.dopo-titolo { margin-top: var(--sp-m); }


/* =========================================================================
   5. IMPAGINAZIONE
   ========================================================================= */

.wrap {
  width: min(100% - (var(--margine) * 2), var(--larghezza));
  margin-inline: auto;
}

.sezione { padding-block: var(--sezione); }
.sezione-2 { background: var(--nero-2); }

.salta { position: absolute; left: -9999px; }
.salta:focus {
  left: var(--sp-s);
  top: var(--sp-s);
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--oro);
  color: var(--nero);
  border-radius: var(--raggio);
}


/* =========================================================================
   6. ICONE
   Disegnate a mano nello sprite in cima alla pagina e richiamate con
   <use>. Prendono il colore del testo intorno.
   ========================================================================= */

.icona {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* i marchi e le stelle sono sagome piene, non tratti */
.icona-piena { fill: currentColor; stroke: none; }


/* =========================================================================
   7. TESTATA
   Resta attaccata in cima: i contatti non spariscono mai.
   ========================================================================= */

.testata {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nero);
}

.testata .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-s);
  min-height: var(--testata);
}

.marchio {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
}

.marchio img {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
}

.marchio span {
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.1;
}

.nav { display: none; }
.azioni-testata { display: none; }

@media (min-width: 56em) {
  .marchio img { width: 2.625rem; height: 2.625rem; }
  .marchio span { font-size: 1.0625rem; }

  .nav {
    display: flex;
    align-items: center;
    gap: var(--sp-l);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .nav a { text-decoration: none; color: var(--grigio); }
  .nav a:hover { color: var(--bianco); }

  .azioni-testata { display: flex; align-items: center; gap: 0.625rem; }
}


/* =========================================================================
   8. PULSANTI E BARRA CONTATTI
   ========================================================================= */

.bottoni { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.375rem;
  padding: 0.75rem 1.625rem;
  border: 0;
  border-radius: var(--raggio);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}

.btn .icona { width: 1.1875rem; height: 1.1875rem; }

.btn-piccolo {
  min-height: 2.75rem;
  padding: 0.5rem 1.125rem;
  font-size: var(--t-piccolo);
}

/* l'oro del logo fa da pulsante principale, con la scritta nera */
.btn-oro { background: var(--oro); color: var(--nero); }
.btn-oro:hover { background: var(--oro-cupo); }

.btn-velo { background: rgba(246, 244, 240, 0.13); color: var(--bianco); }
.btn-velo:hover { background: rgba(246, 244, 240, 0.22); }

/* pulsante quadrato con la sola icona */
.btn-icona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--raggio);
  background: rgba(246, 244, 240, 0.13);
  color: var(--bianco);
  text-decoration: none;
}
.btn-icona:hover { background: rgba(246, 244, 240, 0.22); }
.btn-icona .icona { width: 1.3125rem; height: 1.3125rem; }

/* sul telefono i pulsanti grandi stanno larghi uguali */
@media (max-width: 34em) {
  .bottoni > .btn { flex: 1 1 100%; }
}

/* --- barra fissa in fondo, solo telefono ------------------------------- */

.barra-contatti {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.barra-contatti a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--barra);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
}

.barra-contatti .icona { width: 1.25rem; height: 1.25rem; }
.barra-contatti .b-chiama { background: var(--oro); color: var(--nero); }
.barra-contatti .b-wa { background: var(--nero-3); color: var(--bianco); }

/* La barra entra scorrendo, cosi' appena si apre la pagina non copre
   niente e si vede subito la fascia oro degli orari. La classe la mette
   lo script in cima alla pagina: se JavaScript non gira, la barra resta
   sempre visibile, cioe' il comportamento di prima. */
.con-js .barra-contatti {
  transform: translateY(115%);
  transition: transform 0.3s ease;
}

.con-js.scorso .barra-contatti { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .con-js .barra-contatti { transition: none; }
}

@media (min-width: 56em) {
  body { padding-bottom: 0; }
  .barra-contatti { display: none; }
}


/* =========================================================================
   9. APERTURA
   La moto di casa a tutta pagina, velo scuro sopra, logo e titolo.
   ========================================================================= */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* Non tutta l'altezza dello schermo: si lascia fuori un pezzo, cosi'
     la fascia oro con gli orari si vede senza dover scorrere. */
  min-height: calc(100vh - var(--testata) - 7rem);
  min-height: calc(100svh - var(--testata) - 7rem);
  padding-block: var(--sp-l) calc(var(--sp-s) + var(--barra));
  overflow: hidden;
}

.hero-foto { position: absolute; inset: 0; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

/* velo scuro: pieno in basso dove sta il titolo, piu' leggero in alto
   cosi' la foto respira. Serve a leggere, non a decorare. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 8, 9, 0.9) 0%, rgba(8, 8, 9, 0.62) 50%, rgba(8, 8, 9, 0.35) 100%);
}

.hero-contenuto { position: relative; z-index: 2; }

.hero-logo {
  width: clamp(5.5rem, 17vw, 8.5rem);
  height: auto;
  margin-bottom: var(--sp-m);
  border-radius: 50%;
}

.hero h1 { margin-bottom: var(--sp-m); }

.hero .lead {
  max-width: 33rem;
  margin-bottom: var(--sp-l);
  color: rgba(246, 244, 240, 0.8);
}

/* Da desktop l'apertura si stringe: logo, titolo e spazi calano quel
   tanto che basta perche' la fascia oro degli orari entri nella prima
   schermata anche sui portatili bassi. Va tenuto DOPO le regole qui
   sopra, altrimenti perde e non si applica. */
@media (min-width: 56em) {
  .hero {
    min-height: calc(100vh - var(--testata) - 6rem);
    min-height: calc(100svh - var(--testata) - 6rem);
    padding-block: var(--sp-m) var(--sp-l);
  }
  /* il testo sta a sinistra: il velo si scurisce da quella parte e
     lascia piu' luce alla scritta oro sulla destra */
  .hero::after {
    background:
      linear-gradient(to right, rgba(8, 8, 9, 0.72) 0%, rgba(8, 8, 9, 0) 65%),
      linear-gradient(to top, rgba(8, 8, 9, 0.8) 0%, rgba(8, 8, 9, 0.25) 60%);
  }
  .hero-logo { width: 4.25rem; margin-bottom: 0.75rem; }
  .hero-contenuto .etichetta { margin-bottom: 0.5rem; }
  .hero h1 { font-size: clamp(3rem, 5.6vw, 5rem); margin-bottom: var(--sp-s); }
  .hero .lead { margin-bottom: var(--sp-m); }
}

/* la riga con il voto di Google */
.voto {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--sp-m);
  font-size: var(--t-piccolo);
  color: var(--grigio);
  text-decoration: none;
}
.voto .stelle { display: inline-flex; gap: 0.125rem; color: var(--oro); }
.voto .stelle .icona { width: 0.9375rem; height: 0.9375rem; }
.voto strong { color: var(--bianco); font-weight: 700; }
.voto:hover { color: var(--bianco); }


/* =========================================================================
   10. COSA SI FA QUI
   ========================================================================= */

/* Etichetta che apre ogni gruppo di servizi. Stesso trattamento delle
   altre etichette del sito, solo con un po' d'aria sopra per staccare
   un gruppo dall'altro. */
.gruppo {
  margin: var(--sp-xl) 0 var(--sp-m);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oro);
}

.lavori {
  display: grid;
  gap: 0.875rem;
}

.lavoro {
  padding: 1.75rem;
  border: 1px solid rgba(232, 200, 136, 0.3);
  border-radius: var(--raggio-g);
  background: var(--nero-2);
}

.lavoro .icona {
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: 1rem;
  color: var(--oro);
}

.lavoro h3 { margin-bottom: 0.5rem; }
.lavoro p { font-size: var(--t-piccolo); color: var(--grigio); }

@media (min-width: 46em) {
  .lavori { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  /* il gruppo da due schede si allarga invece di lasciare un buco */
  .lavori-due { grid-template-columns: repeat(2, 1fr); }
}

/* dentro le sezioni grigie i riquadri si schiariscono, per staccare */
.sezione-2 .lavoro { background: var(--nero-3); }


/* =========================================================================
   11. GALLERIA
   Una foto alla volta, a tutta larghezza. Sul telefono si vede un pezzo
   della foto dopo, cosi' si capisce che si scorre col dito. Niente
   scritte sopra: parlano le foto. Quella in primo piano si avvicina
   piano piano, come al cinema.
   ========================================================================= */

.galleria { margin-top: var(--sp-xl); }

.galleria-nastro {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 88%;
  gap: 0.75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--raggio-g);
}
.galleria-nastro::-webkit-scrollbar { display: none; }

.foto {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--raggio-g);
  scroll-snap-align: start;
}

.foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* frecce e contatore: solo se lo script c'e', senza resta lo scorrimento */
.galleria-comandi { display: none; }

.con-js .galleria-comandi {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1rem;
}

.galleria-comandi button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(232, 200, 136, 0.3);
  border-radius: var(--raggio);
  background: var(--nero-3);
  color: var(--oro);
  cursor: pointer;
}
.galleria-comandi button:hover { border-color: var(--oro); }
.galleria-comandi .icona { width: 1.125rem; height: 1.125rem; }
.galleria-indietro .icona { transform: scaleX(-1); }

.galleria-conta {
  order: -1;
  margin-right: auto;
  font-size: var(--t-piccolo);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--grigio-2);
}
.galleria-conta b { color: var(--bianco); font-weight: 700; }

@media (min-width: 46em) {
  .galleria-nastro { grid-auto-columns: 100%; gap: 1rem; }
  /* larga, ma mai piu' alta dello schermo: frecce e contatore si vedono */
  .foto img {
    aspect-ratio: 16 / 9;
    max-height: calc(100vh - var(--testata) - 7rem);
    max-height: calc(100svh - var(--testata) - 7rem);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .foto img { transition: transform 7s ease-out; }
  .con-js .foto.attiva img { transform: scale(1.05); }
}


/* =========================================================================
   12. L'OFFICINA
   ========================================================================= */

.officina { display: grid; gap: var(--sp-l); }

.officina img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--raggio-g);
}

/* la frase di una recensione, messa in evidenza */
.citazione {
  margin-top: var(--sp-l);
  padding-left: var(--sp-m);
  border-left: 3px solid var(--oro);
  font-size: var(--t-lead);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.citazione cite {
  display: block;
  margin-top: var(--sp-xs);
  font-size: var(--t-micro);
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grigio-2);
}

@media (min-width: 56em) {
  .officina {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-xl);
    align-items: center;
  }
  .officina .officina-foto { order: -1; }
}


/* =========================================================================
   13. DOVE SIAMO
   ========================================================================= */

.dove {
  display: grid;
  gap: 0.875rem;
  margin-top: var(--sp-xl);
}

.dove-schede { display: grid; gap: 0.875rem; align-content: start; }

/* Le schede si staccano dal fondo con un grigio piu' chiaro e la stessa
   righina oro delle schede dei servizi: prima erano quasi del colore
   dello sfondo e le informazioni si leggevano male. */
.riquadro {
  padding: 1.75rem;
  border: 1px solid rgba(232, 200, 136, 0.3);
  border-radius: var(--raggio-g);
  background: var(--nero-3);
}

.riquadro .titolino {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--sp-s);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oro);
}
.riquadro .titolino .icona { width: 1.125rem; height: 1.125rem; }

/* l'indirizzo e' la cosa piu' importante della sezione, quindi la piu' grande */
.indirizzo {
  font-style: normal;
  font-size: 1.4375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.orari {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem var(--sp-m);
  font-size: var(--t-piccolo);
}
.orari dt { font-weight: 600; }
.orari dd { margin: 0; color: var(--grigio); font-variant-numeric: tabular-nums; }

/* --- la mappa ----------------------------------------------------------
   Disegno SVG dentro alla pagina, nei colori del sito. Non e' un servizio
   esterno: nessuna richiesta a Google, nessun cookie. Non e' in scala. */

.mappa {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(232, 200, 136, 0.3);
  border-radius: var(--raggio-g);
  background: var(--nero-2);
  text-decoration: none;
}

.mappa svg { display: block; width: 100%; height: auto; }

.mappa-azione {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9375rem 1rem;
  background: var(--oro);
  color: var(--nero);
  font-size: var(--t-piccolo);
  font-weight: 700;
}
.mappa:hover .mappa-azione { background: var(--oro-cupo); }
.mappa-azione .icona { width: 1.0625rem; height: 1.0625rem; }

@media (min-width: 56em) {
  .dove { grid-template-columns: 1.35fr 1fr; gap: 1rem; align-items: start; }
  .dove-schede { gap: 1rem; }
  .mappa-azione {
    position: absolute;
    right: 1.25rem;
    bottom: 1.25rem;
    display: inline-flex;
    padding: 0.625rem 1rem;
    border-radius: var(--raggio);
  }
}


/* =========================================================================
   14. CONTATTI
   ========================================================================= */

.contatti .lead { max-width: 33rem; }
.contatti .bottoni { margin-top: var(--sp-l); }

/* la riga di sottotesto sotto i pulsanti */
.sottotesto {
  max-width: 33rem;
  margin-top: var(--sp-m);
  font-size: var(--t-piccolo);
  color: var(--grigio-2);
}

.social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-m);
  margin-top: var(--sp-xl);
  font-size: var(--t-piccolo);
}

.social a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--grigio);
  text-decoration: none;
}
.social a:hover { color: var(--oro); }
.social .icona { width: 1.3125rem; height: 1.3125rem; }

/* I loghi tengono i colori dei rispettivi marchi: sono segnali, si
   riconoscono a colpo d'occhio e non entrano nella tavolozza del sito.
   Il colore sta sul logo e non sul link, cosi' passandoci sopra cambia
   solo la scritta. */
.logo-social {
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
  fill: currentColor;
  stroke: none;
}
.logo-social.instagram { color: #e4405f; }
.logo-social.facebook  { color: #1877f2; }


/* =========================================================================
   15. PIEDE PAGINA
   ========================================================================= */

.piede {
  background: #08080a;
  color: var(--grigio-2);
  padding-block: var(--sp-l);
  font-size: var(--t-micro);
}

.piede .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-xs) var(--sp-l);
}
.piede a { color: var(--grigio); }


/* =========================================================================
   16. MENU DEL TELEFONO
   Si apre e si chiude senza una riga di JavaScript: il pulsante punta a
   #menu, il pannello si mostra con :target. Toccando una voce l'ancora
   cambia e il pannello si chiude da solo. La X punta a un segnalibro
   fissato in cima allo schermo, cosi' chiudendo la pagina non salta.
   ========================================================================= */

.apri-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.5rem;
  border-radius: var(--raggio);
  color: var(--bianco);
  text-decoration: none;
}
.apri-menu .icona { width: 1.5rem; height: 1.5rem; }

.ancora-ferma {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
}

.pannello {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  flex-direction: column;
  padding: var(--sp-m) var(--margine) var(--sp-xl);
  background: var(--nero);
  overflow-y: auto;
}

.pannello:target { display: flex; }

.pannello-testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--testata);
  margin-bottom: var(--sp-l);
}

.chiudi-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.5rem;
  border-radius: var(--raggio);
  color: var(--bianco);
  text-decoration: none;
}
.chiudi-menu .icona { width: 1.5rem; height: 1.5rem; }

.pannello-nav { display: grid; gap: 0.25rem; }

.pannello-nav a {
  padding-block: 0.75rem;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-decoration: none;
}
.pannello-nav a:hover { color: var(--oro); }

.pannello-contatti {
  display: grid;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: var(--sp-xl);
}

@media (min-width: 56em) {
  .apri-menu { display: none; }
  .pannello, .pannello:target { display: none; }
}


/* =========================================================================
   17. FASCIA DEGLI ORARI
   Sotto all'apertura, in oro pieno: sono la cosa che la gente cerca
   subito dopo il numero di telefono.
   ========================================================================= */

.fascia-orari {
  background: var(--oro);
  color: var(--nero);
  padding-block: 1.125rem;
}

/* sul telefono le tre righe si impilano, da desktop stanno in fila */
.fascia-orari .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
}

.fascia-orari .orario {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.fascia-orari .icona { width: 1.3125rem; height: 1.3125rem; stroke-width: 2; }
.fascia-orari .chiuso {
  padding-left: 1.9375rem;
  font-size: var(--t-piccolo);
  font-weight: 600;
  opacity: 0.72;
}

.fascia-orari a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-piccolo);
  font-weight: 600;
  text-decoration: none;
  opacity: 0.78;
}
.fascia-orari a:hover { opacity: 1; }
.fascia-orari a .icona { width: 1.0625rem; height: 1.0625rem; }

@media (min-width: 56em) {
  .fascia-orari .wrap {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }
  .fascia-orari .orario { font-size: 1.1875rem; }
  .fascia-orari .stato { margin-right: auto; }
}


/* =========================================================================
   18. RECENSIONI
   Sul telefono scorrono di lato una alla volta, da desktop stanno
   affiancate. Tutto con lo scroll, senza JavaScript.
   ========================================================================= */

.voto-grande {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: var(--sp-m);
  font-size: var(--t-lead);
  color: var(--grigio);
  text-decoration: none;
}
.voto-grande .stelle { display: inline-flex; gap: 0.1875rem; color: var(--oro); }
.voto-grande .stelle .icona { width: 1.125rem; height: 1.125rem; }
.voto-grande .logo-google { width: 1.125rem; height: 1.125rem; }
.voto-grande strong { color: var(--bianco); font-weight: 700; }
.voto-grande:hover strong { color: var(--oro); }

.recensioni {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(82%, 21rem);
  gap: 0.875rem;
  margin-top: var(--sp-xl);
  padding-inline: var(--margine);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.recensioni::-webkit-scrollbar { display: none; }

/* Le schede sono su fondo bianco con i colori di Google: devono
   sembrare quello che sono, cioe' recensioni prese dalla sua scheda.
   I grigi (#5f6368, #3c4043) e l'ambra delle stelle (#fbbc04) sono
   quelli di Google. */
.recensione {
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: 12px;
  background: #fff;
  color: #202124;
}

.recensione-testa {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

.logo-google { width: 1.25rem; height: 1.25rem; flex: none; }
.recensione-testa .logo-google { margin-left: auto; }

/* iniziali al posto della foto profilo: sono persone vere, le loro
   facce non ce le mettiamo sul sito di un altro */
.iniziali {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #e8eaed;
  color: #5f6368;
  font-size: var(--t-piccolo);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.recensione .chi { font-size: var(--t-piccolo); line-height: 1.3; }
.recensione .chi strong { display: block; font-weight: 600; color: #202124; }
.recensione .chi span { color: #5f6368; font-size: var(--t-micro); }

.recensione .stelle {
  display: flex;
  gap: 0.125rem;
  margin-bottom: 0.75rem;
  color: #fbbc04;
}
.recensione .stelle .icona { width: 1.0625rem; height: 1.0625rem; }

.recensione blockquote {
  margin: 0;
  font-size: var(--t-piccolo);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: #3c4043;
}

.tutte-recensioni {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--sp-l);
  font-size: var(--t-piccolo);
  font-weight: 600;
  color: var(--oro);
  text-underline-offset: 4px;
}

@media (min-width: 56em) {
  .recensioni {
    width: min(100% - (var(--margine) * 2), var(--larghezza));
    margin-inline: auto;
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding-inline: 0;
    overflow: visible;
  }
}


/* =========================================================================
   19. ORARI IN EVIDENZA DENTRO LA SCHEDA
   ========================================================================= */

.orari-grandi { display: grid; gap: 0.875rem; }

.orari-grandi div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-s);
}

.orari-grandi dt { font-size: var(--t-corpo); font-weight: 600; color: var(--bianco); }

.orari-grandi dd {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--oro);
}

.orari-grandi .chiuso { color: var(--grigio); font-weight: 600; font-size: 1.0625rem; }


/* =========================================================================
   20. APERTO O CHIUSO ADESSO
   La pastiglia dentro alla fascia oro la riempie l'unico pezzo di
   JavaScript del sito. Senza, resta nascosta e in pagina restano gli
   orari scritti.
   ========================================================================= */

/* Aperto o chiuso adesso: deve saltare all'occhio sulla fascia oro.
   Aperto = pastiglia nera con il pallino verde. Chiuso = pastiglia rossa
   piena. Il rosso compare solo qui ed e' un segnale di stato, non una
   decorazione: prima era un grigio slavato e non si leggeva. */
.fascia-orari .stato {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.875rem;
  border-radius: 999px;
  font-size: var(--t-piccolo);
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
}

.fascia-orari .stato::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex: none;
}

.fascia-orari .stato b { font-weight: 800; }
.fascia-orari .stato .dettaglio { opacity: 0.8; }

.fascia-orari .stato.aperto { background: var(--nero); color: #fff; }
.fascia-orari .stato.aperto::before { background: #34a853; }

.fascia-orari .stato.chiuso { background: #9e1f17; color: #fff; }
.fascia-orari .stato.chiuso::before { background: rgba(255, 255, 255, 0.9); }

/* deve stare dopo, altrimenti il display sopra vince sull'attributo */
.fascia-orari .stato[hidden] { display: none; }

/* la riga di oggi, nella scheda degli orari */
.orari-grandi .oggi dt::after {
  content: "Oggi";
  margin-left: 0.5rem;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  background: var(--oro);
  color: var(--nero);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.orari-grandi .oggi dt { color: var(--bianco); font-weight: 600; }


/* =========================================================================
   21. CONTATTI SU DUE COLONNE
   Da desktop il titolo sta a sinistra e i pulsanti in una scheda a
   destra, cosi' la pagina non finisce tutta schiacciata a sinistra.
   ========================================================================= */

.contatti-griglia { display: grid; gap: var(--sp-xl); }

.scheda-contatti {
  padding: 1.75rem;
  border: 1px solid rgba(232, 200, 136, 0.3);
  border-radius: var(--raggio-g);
  background: var(--nero-3);
}

.scheda-contatti .bottoni { flex-direction: column; gap: 0.75rem; }
.scheda-contatti .btn { width: 100%; }
.scheda-contatti .sottotesto { max-width: none; margin-top: var(--sp-m); }

@media (min-width: 56em) {
  .contatti-griglia {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-xl);
    align-items: start;
  }
  .scheda-contatti { padding: var(--sp-l); }
}


/* =========================================================================
   22. PAGINE SEMPLICI (privacy, 404) e link nel piede
   Stessa grafica del resto, senza tutte le sezioni.
   ========================================================================= */

.piede .link-privacy { text-decoration: underline; text-underline-offset: 3px; }
.piede .link-privacy:hover { color: var(--oro); }

.pagina-semplice {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--testata));
  min-height: calc(100svh - var(--testata));
  padding-block: var(--sezione);
}

.pagina-semplice .prosa { max-width: 38rem; }
.pagina-semplice .prosa > * + * { margin-top: var(--sp-m); }

.pagina-semplice h1 {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  margin-bottom: var(--sp-m);
}

.pagina-semplice .bottoni { margin-top: var(--sp-xl); }

/* il numerone della 404 */
.numero-404 {
  font-size: clamp(5rem, 20vw, 11rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--oro);
  margin-bottom: var(--sp-m);
}


/* =========================================================================
   23. LE RECENSIONI CHE AVANZANO DI UNA ALLA VOLTA
   Solo da desktop, dove prima stavano ferme in tre colonne. Sul telefono
   restano come sono: si scorrono col dito e vanno bene cosi'.

   Non e' uno scorrimento continuo: ne stanno tre in vista, restano ferme
   sei secondi e mezzo, poi il nastro scatta di una posizione a sinistra e
   ne entra una nuova da destra. Giro completo in 64 secondi.

   I conti: il nastro e' largo quanto la finestra, e ogni scheda e' un
   terzo della finestra meno gli spazi. Un passo vale quindi una scheda
   piu' uno spazio, cioe' (100% + 1rem) / 3. Tanti passi quante sono le
   recensioni (adesso 8) fanno esattamente una serie intera di schede:
   per questo le schede sono scritte due volte nel markup, cosi' all'ultimo
   passo si riparte da capo senza che si veda il salto.

   Si ferma passandoci sopra col mouse o arrivandoci col tasto Tab, e non
   parte proprio per chi ha chiesto meno animazioni nelle impostazioni.
   ========================================================================= */

/* senza il nastro attivo il contenitore non deve esistere per il layout,
   e la seconda serie di schede va nascosta: serve solo a chiudere il giro
   del nastro, altrimenti sul telefono si scorrerebbero due volte */
.recensioni-nastro { display: contents; }
.recensione[aria-hidden="true"] { display: none; }

@media (min-width: 56em) and (prefers-reduced-motion: no-preference) {
  .recensioni {
    display: block;
    width: min(100% - (var(--margine) * 2), var(--larghezza));
    margin-inline: auto;
    padding-inline: 0;
    overflow: hidden;
  }

  /* le colonne oltre la terza escono dal contenitore e vengono tagliate */
  .recensioni-nastro {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2rem) / 3);
    gap: 1rem;
    animation: passo-recensioni 64s infinite;
  }

  .recensioni .recensione { width: auto; margin-right: 0; }
  .recensione[aria-hidden="true"] { display: flex; }

  .recensioni:hover .recensioni-nastro,
  .recensioni:focus-within .recensioni-nastro { animation-play-state: paused; }

  @keyframes passo-recensioni {
    /* Otto recensioni = otto passi. Ogni passo dura un ottavo del giro
       (12,5%): 10% fermo, 2,5% di scatto. A 64 secondi sono 6,4 secondi
       di sosta e 1,6 di scatto, come prima. Le coppie di percentuali
       sono inizio e fine di ogni sosta. Se cambia il numero di
       recensioni, cambiano le percentuali e la durata sopra. */
    0%, 10% {
      transform: translateX(0);
      animation-timing-function: ease-in-out;
    }
    12.5%, 22.5% {
      transform: translateX(calc((100% + 1rem) / 3 * -1));
      animation-timing-function: ease-in-out;
    }
    25%, 35% {
      transform: translateX(calc((100% + 1rem) / 3 * -2));
      animation-timing-function: ease-in-out;
    }
    37.5%, 47.5% {
      transform: translateX(calc((100% + 1rem) / 3 * -3));
      animation-timing-function: ease-in-out;
    }
    50%, 60% {
      transform: translateX(calc((100% + 1rem) / 3 * -4));
      animation-timing-function: ease-in-out;
    }
    62.5%, 72.5% {
      transform: translateX(calc((100% + 1rem) / 3 * -5));
      animation-timing-function: ease-in-out;
    }
    75%, 85% {
      transform: translateX(calc((100% + 1rem) / 3 * -6));
      animation-timing-function: ease-in-out;
    }
    87.5%, 97.5% {
      transform: translateX(calc((100% + 1rem) / 3 * -7));
      animation-timing-function: ease-in-out;
    }
    100% {
      transform: translateX(calc((100% + 1rem) / 3 * -8));
    }
  }

}