/* ==========================================================
   Bar Gelateria Nazionale — sito, versione 2
   Direzione: gelateria classica italiana.
   Caldo, morbido, appetitoso. Il colore dei gusti e' il
   sistema portante: ogni gusto ha la sua tinta vera.
   ========================================================== */

:root{
  /* --- Fondo e inchiostro (tutto caldo, mai nero) --- */
  --panna:      #FFF7EA;
  --panna-2:    #FFFCF5;
  --crema:      #F6E3BD;
  --crema-2:    #FBEFD6;
  --cioccolato: #3B2416;
  --nocciola:   #A96C3C;
  --amarena:    #B81238;
  --pistacchio: #8FAE5D;

  --bordo:      #EBD8B4;
  --tenue:      #7A5C43;

  /* --- Il colore vero dei gusti --- */
  --g-crema:       #F3D28C;
  --g-pistacchio:  #9CBB63;
  --g-nocciola:    #B98153;
  --g-cioccolato:  #683E26;
  --g-amarena:     #C3163F;
  --g-limone:      #F2D25C;
  --g-fiordilatte: #FFF0D8;
  --g-fragola:     #E8748A;
  --g-fichi:       #A98BC0;
  --g-mandorla:    #E7D2AB;
  --g-caffe:       #8A5A33;
  --g-melone:      #F4A863;

  /* --- Tipografia --- */
  --titolo: "Fraunces", Georgia, "Times New Roman", serif;
  --testo:  "Rubik", "Segoe UI", system-ui, sans-serif;

  /* --- Spazio e forma --- */
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --max: 1180px;
  --r:  18px;
  --r-g: 30px;
  --ombra: 0 18px 40px -26px rgba(59, 36, 22, .45);
  --ombra-alta: 0 26px 56px -30px rgba(59, 36, 22, .5);
}

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

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

body{
  margin:0;
  background:var(--panna);
  color:var(--cioccolato);
  font-family:var(--testo);
  font-size:clamp(1.02rem, .35vw + .95rem, 1.14rem);
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
::selection{ background:var(--amarena); color:var(--panna); }
:focus-visible{ outline:3px solid var(--amarena); outline-offset:4px; border-radius:6px; }

.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
section{ padding-block:clamp(3.5rem, 8vw, 7rem); }

/* ---------------- Tipografia ---------------- */

h1,h2,h3{
  font-family:var(--titolo);
  font-weight:600;
  font-variation-settings:"opsz" 100;
  letter-spacing:-.015em;
  line-height:1.06;
  margin:0;
  text-wrap:balance;
}

.titolo{ font-size:clamp(2.1rem, 5vw, 3.5rem); margin-bottom:1rem; }
.titolo-grande{ font-size:clamp(2.5rem, 6.4vw, 4.6rem); line-height:1.02; }

.occhiello{
  font-family:var(--testo);
  font-size:clamp(1.05rem, .5vw + .95rem, 1.24rem);
  line-height:1.65;
  color:var(--tenue);
  max-width:52ch;
  margin:0 0 2.2rem;
}

.etichetta{
  display:inline-block;
  font-family:var(--testo);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--amarena);
  margin:0 0 .9rem;
}

/* ---------------- Bottoni ---------------- */

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--testo); font-size:1rem; font-weight:500;
  padding:.85rem 1.7rem;
  border-radius:999px;
  border:2px solid var(--cioccolato);
  background:transparent; color:var(--cioccolato);
  text-decoration:none; cursor:pointer;
  transition:background .18s, color .18s, transform .18s, border-color .18s;
}
.btn:hover{ background:var(--cioccolato); color:var(--panna); transform:translateY(-2px); }
.btn-pieno{ background:var(--amarena); border-color:var(--amarena); color:#FFF7EA; }
.btn-pieno:hover{ background:var(--cioccolato); border-color:var(--cioccolato); }
.btn-chiaro{ border-color:var(--panna); color:var(--panna); }
.btn-chiaro:hover{ background:var(--panna); color:var(--cioccolato); }

.azioni{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* ---------------- Barra in alto ---------------- */

.avviso{
  background:var(--cioccolato); color:var(--crema);
  font-size:.8rem; text-align:center;
  padding:.6rem var(--gutter); line-height:1.5;
}

/* Sta sopra la fotografia dell'apertura: trasparente in cima,
   piena appena si scorre. La classe "solida" la mette il JavaScript. */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.nav.solida{
  background:color-mix(in srgb, var(--panna) 92%, transparent);
  backdrop-filter:blur(12px);
  border-bottom-color:var(--bordo);
}
/* finche' e' trasparente il testo sta su una foto scura: va chiaro */
.nav:not(.solida) .marchio,
.nav:not(.solida) .nav-link > a{ color:var(--panna); }
.nav:not(.solida) .marchio small{ color:var(--g-crema); }
.nav:not(.solida) .lingua-btn,
.nav:not(.solida) .burger{
  background:rgba(255,247,234,.16);
  border-color:rgba(255,247,234,.36);
  color:var(--panna);
}
.nav:not(.solida) .burger svg{ fill:var(--panna); }
@media (prefers-reduced-motion:reduce){ .nav{ transition:none; } }
.nav-in{
  max-width:var(--max); margin-inline:auto;
  padding:.8rem var(--gutter);
  display:flex; align-items:center; gap:1.4rem;
}
.marchio{
  font-family:var(--font-marchio, var(--titolo)); font-weight:var(--peso-marchio, 700);
  font-size:1.35rem; line-height:1; text-decoration:none;
  display:flex; flex-direction:column; gap:.15rem;
}
.marchio small{
  font-family:var(--font-sotto, var(--testo)); font-size:.62rem; font-weight:var(--peso-sotto, 500);
  letter-spacing:.18em; text-transform:uppercase; color:var(--nocciola);
  white-space:nowrap; line-height:1.35;
}
.nav-link{ margin-left:auto; display:flex; gap:1.35rem; align-items:center; }
.nav-link a{
  font-size:.95rem; text-decoration:none; padding-block:.2rem;
  white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:border-color .18s, color .18s;
}
.nav-link a:hover{ border-color:var(--amarena); color:var(--amarena); }
/* sotto i 1024 le voci non ci starebbero senza andare a capo:
   da li' in giu' comanda il menu a panino (vedi componenti.css) */

/* ================= APERTURA =================
   A tutto schermo, con tre fotografie che si alternano sotto una
   velatura calda. Il testo ci sta sopra, quindi tutto qui e' chiaro. */

.hero{
  position:relative;
  min-height:clamp(560px, 86svh, 900px);
  display:grid; align-items:center;
  overflow:hidden;
  background:#20120A;
  isolation:isolate;
}

.hero-sfondi{ position:absolute; inset:0; z-index:0; }
.hero-sfondo{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0;
  animation:scorri 27s infinite linear;
  will-change:opacity, transform;
}
.hero-sfondo.s1{ background-image:url('../img/foto/hero-1.webp'); animation-delay:0s; }
.hero-sfondo.s2{ background-image:url('../img/foto/hero-2.webp'); animation-delay:9s; }
.hero-sfondo.s3{ background-image:url('../img/foto/hero-3.webp'); animation-delay:18s; }

@keyframes scorri{
  0%   { opacity:0; transform:scale(1); }
  4%   { opacity:1; }
  30%  { opacity:1; }
  36%  { opacity:0; transform:scale(1.06); }
  100% { opacity:0; transform:scale(1); }
}
@media (prefers-reduced-motion:reduce){
  .hero-sfondo{ animation:none; }
  .hero-sfondo.s1{ opacity:1; }
}

/* la velatura: senza, il testo sulla foto non si legge */
.hero-velo{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(28,14,6,.62) 0%, rgba(28,14,6,.34) 38%, rgba(28,14,6,.86) 100%),
    linear-gradient(90deg, rgba(28,14,6,.55) 0%, rgba(28,14,6,0) 62%);
}

.hero-dentro{
  position:relative; z-index:2;
  padding-block:clamp(5rem,12vw,7rem);
  max-width:var(--max);
  color:var(--panna);
}
/* il riquadro meteo sta in alto a destra: qui si riserva il suo posto,
   altrimenti il titolo ci finisce sotto */
@media (min-width:981px){
  .hero-dentro{ padding-right:calc(var(--gutter) + 268px); }
}
.hero-dentro .etichetta{ color:var(--g-crema); }
.hero-dentro h1{
  font-size:clamp(2.5rem, 6.4vw, 4.6rem);
  color:var(--panna);
  margin-bottom:1.2rem;
  max-width:16ch;
  text-shadow:0 2px 26px rgba(20,10,4,.5);
}
.hero-dentro h1 em{ font-style:normal; color:var(--g-crema); }
.hero-dentro .occhiello{
  color:color-mix(in srgb, var(--panna) 90%, transparent);
  max-width:48ch; margin-bottom:2rem;
  text-shadow:0 1px 16px rgba(20,10,4,.6);
}

.stato{
  display:inline-flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  margin-top:1.8rem; padding:.6rem 1.1rem;
  background:rgba(255,247,234,.14);
  border:1px solid rgba(255,247,234,.3);
  backdrop-filter:blur(8px);
  border-radius:999px; font-size:.94rem; color:var(--panna);
}
.spia{
  width:9px; height:9px; border-radius:50%; background:#A8D06A;
  box-shadow:0 0 0 4px rgba(168,208,106,.28);
}
.spia.chiuso{ background:#FF8FA3; box-shadow:0 0 0 4px rgba(255,143,163,.26); }
.stato b{ font-weight:600; }
.stato .sep{ color:rgba(255,247,234,.45); }

/* Nastro dei gusti sotto l'apertura */
.nastro-gusti{
  background:var(--crema-2);
  border-block:1px solid var(--bordo);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.nastro-gusti::-webkit-scrollbar{ display:none; }
.nastro-in{
  display:flex; gap:.55rem; align-items:center;
  padding:.85rem var(--gutter);
  width:max-content; min-width:100%;
  justify-content:center;
}
/* Su schermo largo le pastiglie vanno a capo e restano centrate:
   una striscia che scorre ha senso col pollice, non col mouse. */
@media (min-width:981px){
  .nastro-gusti{ overflow-x:visible; }
  .nastro-in{
    width:auto; flex-wrap:wrap; row-gap:.5rem;
    max-width:var(--max); margin-inline:auto;
  }
}
.gusto-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--panna-2); border:1px solid var(--bordo);
  border-radius:999px; padding:.35rem .95rem .35rem .5rem;
  font-size:.92rem; white-space:nowrap;
}
.punto{
  width:20px; height:20px; border-radius:50%; flex:none;
  border:1px solid rgba(59,36,22,.14);
}

/* ================= I GUSTI ================= */

.gusti{ background:var(--panna-2); }

.griglia-gusti{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(196px,1fr));
  gap:clamp(.8rem,1.8vw,1.2rem);
}
/* La scheda gusto e' una foto piena con il nome sotto: il ritaglio
   tondo su una fotografia larga tagliava via il soggetto. */
.gusto{
  background:var(--panna); border:1px solid var(--bordo);
  border-radius:var(--r-g); padding:0; overflow:hidden;
  text-align:center;
  display:flex; flex-direction:column; gap:0;
  transition:transform .2s, box-shadow .2s;
}
.gusto:hover{ transform:translateY(-4px); box-shadow:var(--ombra); }
.gusto > b{ padding:.9rem 1rem .15rem; }
.gusto > span{ padding:0 1rem 1.1rem; }
.gusto > .finito-tag{ padding:0 1rem 1.1rem; }
.pallina{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  display:block; background:var(--crema-2);
}
.gusto b{ font-family:var(--titolo); font-weight:600; font-size:1.12rem; line-height:1.2; }
.gusto span{ font-size:.85rem; color:var(--tenue); }
.gusto.finito{ opacity:.5; }
.gusto.finito .pallina{ filter:grayscale(.6); }
.gusto .finito-tag{
  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--amarena);
}

.riga-formati{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(216px,1fr));
  gap:.8rem; margin-top:2.2rem;
}
.formato{
  background:var(--crema-2); border-radius:var(--r);
  padding:.9rem 1.15rem;
  display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:baseline; gap:.1rem .9rem;
  min-width:0;
}
.formato b{
  font-family:var(--titolo); font-weight:600; font-size:1.05rem;
  line-height:1.25;
}
/* il prezzo va a capo invece di uscire dal riquadro */
.formato span{ font-weight:500; color:var(--amarena); }

/* ================= SI PRENOTA ================= */

.schede{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(1rem,2.4vw,1.6rem);
}
.scheda{
  background:var(--panna-2); border:1px solid var(--bordo);
  border-radius:var(--r-g); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .2s, box-shadow .2s;
}
.scheda:hover{ transform:translateY(-5px); box-shadow:var(--ombra-alta); }
.scheda-img{ background:var(--crema-2); aspect-ratio:4/3; overflow:hidden; }
.scheda-img img{ width:100%; height:100%; object-fit:cover; }
.scheda-testo{ padding:1.4rem 1.5rem 1.7rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.scheda-testo h3{ font-size:1.5rem; }
.scheda-testo p{ margin:0; color:var(--tenue); }
.scheda-testo .prezzo{ font-weight:600; color:var(--amarena); }
.scheda-testo .quando{
  margin-top:auto; padding-top:.9rem; border-top:1px solid var(--bordo);
  font-size:.88rem; color:var(--tenue);
}

/* ================= APERTI DALLE 5 ================= */

.fascia{ background:var(--cioccolato); color:var(--crema); }
.fascia .titolo{ color:var(--panna); }
.fascia .occhiello{ color:color-mix(in srgb, var(--crema) 82%, transparent); }
.fascia .etichetta{ color:var(--g-crema); }

.fascia-griglia{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
}
@media (max-width:900px){ .fascia-griglia{ grid-template-columns:1fr; } }

.momenti{ display:grid; gap:.2rem; }
.momento{
  display:grid; grid-template-columns:auto 1fr; gap:1.1rem;
  padding:1rem 0; align-items:baseline;
  border-bottom:1px solid rgba(246,227,189,.16);
}
.momento:last-child{ border-bottom:none; }
.momento .quando{
  font-family:var(--titolo); font-weight:600; font-size:1.5rem;
  color:var(--g-crema); min-width:3.6ch;
}
.momento b{ display:block; font-family:var(--titolo); font-weight:600; font-size:1.15rem; margin-bottom:.15rem; }
.momento p{ margin:0; color:color-mix(in srgb, var(--crema) 76%, transparent); font-size:.98rem; line-height:1.55; }
.momento.adesso .quando{ color:#FF9BB0; }
.momento.adesso b::after{
  content:"adesso"; margin-left:.6rem;
  font-family:var(--testo); font-size:.7rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  background:var(--amarena); color:var(--panna);
  padding:.15rem .5rem; border-radius:999px; vertical-align:middle;
}

/* ================= DOVE SIAMO ================= */

.dove-griglia{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:clamp(1.4rem,3vw,2.6rem);
}
.riquadro{
  background:var(--panna-2); border:1px solid var(--bordo);
  border-radius:var(--r-g); padding:1.6rem 1.7rem 1.8rem;
}
.riquadro h3{ font-size:1.35rem; margin-bottom:.9rem; }
.riquadro p{ margin:0 0 .5rem; }
.riquadro a{ color:var(--amarena); text-underline-offset:3px; }

.orari{ width:100%; border-collapse:collapse; }
.orari td{ padding:.5rem 0; border-bottom:1px solid var(--bordo); font-size:.98rem; }
.orari tr:last-child td{ border-bottom:none; }
.orari td:last-child{ text-align:right; white-space:nowrap; }
.orari tr.oggi td{ color:var(--amarena); font-weight:600; }

.distanze{ list-style:none; margin:0; padding:0; }
.distanze li{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.5rem 0; border-bottom:1px solid var(--bordo); font-size:.98rem;
}
.distanze li:last-child{ border-bottom:none; }
.distanze span{ color:var(--nocciola); font-weight:500; white-space:nowrap; }

/* ================= RECENSIONI ================= */

.voti{
  display:flex; flex-wrap:wrap; gap:clamp(1.4rem,4vw,3.5rem);
  margin-bottom:2.6rem;
}
.voto b{
  display:block; font-family:var(--titolo); font-weight:600;
  font-size:clamp(2.2rem,5vw,3rem); line-height:1; color:var(--amarena);
}
.voto span{ font-size:.88rem; color:var(--tenue); }

.voci{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(1rem,2.4vw,1.6rem);
}
.voce{
  background:var(--crema-2); border-radius:var(--r-g);
  padding:1.6rem 1.6rem 1.4rem;
}
.voce blockquote{
  margin:0 0 .9rem; font-family:var(--titolo); font-weight:500;
  font-size:1.28rem; line-height:1.35;
}
.voce cite{ font-style:normal; font-size:.86rem; color:var(--tenue); }

/* ================= PIEDE ================= */

.piede{
  background:var(--cioccolato); color:var(--crema);
  padding-top:clamp(3rem,6vw,4.5rem); padding-bottom:7rem;
}
.piede-griglia{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(1.8rem,4vw,3.2rem);
}
.piede h4{
  font-family:var(--testo); font-size:.78rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--g-crema); margin:0 0 1rem;
}
.piede p{ margin:0 0 .5rem; color:color-mix(in srgb, var(--crema) 84%, transparent); }
.piede a{ color:var(--panna); text-underline-offset:3px; }
.piede .orari td{ border-color:rgba(246,227,189,.18); color:color-mix(in srgb,var(--crema) 84%,transparent); }
.piede .orari tr.oggi td{ color:#FFB3C2; }
.colofone{
  margin-top:2.6rem; padding-top:1.3rem;
  border-top:1px solid rgba(246,227,189,.18);
  font-size:.82rem; color:color-mix(in srgb, var(--crema) 62%, transparent);
  display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between;
}

/* ================= BARRA MOBILE ================= */

.barra-mobile{
  position:fixed; bottom:0; left:0; right:0; z-index:70;
  display:none; grid-template-columns:repeat(3,1fr);
  background:var(--panna-2); border-top:1px solid var(--bordo);
  box-shadow:0 -8px 24px -18px rgba(59,36,22,.6);
}
.barra-mobile a{
  padding:.95rem .4rem; text-align:center; text-decoration:none;
  font-size:.88rem; font-weight:500;
  border-right:1px solid var(--bordo);
}
.barra-mobile a:last-child{ border-right:none; }
.barra-mobile a.spicca{ color:var(--amarena); font-weight:600; }
@media (max-width:860px){ .barra-mobile{ display:grid; } }

/* ================= PAGINA MENU ================= */

/* Apertura del menu: stessa lingua della home, ma piu' bassa. */
.menu-testa{
  position:relative;
  min-height:clamp(280px,38svh,420px);
  display:grid; align-items:end;
  overflow:hidden;
  background:#20120A;
  isolation:isolate;
  border-bottom:1px solid var(--bordo);
}
.menu-testa::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:url('../img/foto/menu-hero.webp') center/cover;
}
.menu-testa::after{
  content:""; position:absolute; inset:0; z-index:1;
  /* piu' coperta al centro: le lettere del pannello sono grandi e
     competevano con il titolo */
  /* la lavagna e' gia' scura: velatura piu' leggera al centro,
     cosi la scrittura a mano resta visibile */
  background:linear-gradient(180deg, rgba(28,14,6,.66) 0%, rgba(28,14,6,.42) 45%, rgba(28,14,6,.90) 100%);
}
.menu-testa .wrap{
  position:relative; z-index:2;
  /* in una griglia margin-inline:auto blocca lo stiramento e il blocco
     si stringe sul contenuto: la larghezza va forzata */
  width:100%;
  padding-block:clamp(4.5rem,10vw,5.5rem) clamp(1.6rem,4vw,2.4rem);
  color:var(--panna);
}
.menu-testa h1{
  font-size:clamp(2.4rem,7vw,4rem); margin:.3rem 0 .5rem;
  color:var(--panna); text-shadow:0 2px 24px rgba(20,10,4,.55);
}
.menu-testa p{ margin:0; color:color-mix(in srgb, var(--panna) 84%, transparent); }
.menu-testa p a{ color:var(--g-crema) !important; }
.menu-testa .etichetta{ color:var(--g-crema); }
.menu-testa .marchio-piede b{ color:var(--panna) !important; }

.filtri{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--panna) 94%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--bordo);
  overflow-x:auto; scrollbar-width:none;
}
.filtri::-webkit-scrollbar{ display:none; }
.filtri-in{
  display:flex; gap:.5rem; padding:.8rem var(--gutter);
  max-width:var(--max); margin-inline:auto; width:max-content; min-width:100%;
}
.filtro{
  font-family:var(--testo); font-size:.92rem;
  padding:.5rem 1.1rem; border-radius:999px;
  border:1.5px solid var(--bordo); background:var(--panna-2); color:inherit;
  cursor:pointer; white-space:nowrap;
  transition:background .16s, color .16s, border-color .16s;
}
.filtro:hover{ border-color:var(--nocciola); }
.filtro[aria-pressed="true"]{
  background:var(--cioccolato); color:var(--panna); border-color:var(--cioccolato);
}
.filtro.lingua{ margin-left:auto; font-weight:600; }

/* Ogni categoria e' una scheda, e tra nome e prezzo corre il
   filetto punteggiato dei menu stampati. */

.menu-sez{
  background:var(--panna-2);
  border:1px solid var(--bordo);
  border-radius:var(--r-g);
  padding:clamp(1.4rem,3vw,2rem) clamp(1.2rem,3vw,2rem) clamp(1rem,2vw,1.4rem);
  margin-block:clamp(1rem,2.4vw,1.6rem);
}
.menu-sez h2{
  font-size:clamp(1.5rem,3.6vw,2.1rem);
  margin:0 0 .2rem;
  display:flex; align-items:center; gap:.7rem;
}
.menu-sez h2::before{
  content:""; width:26px; height:4px; border-radius:2px;
  background:var(--amarena); flex:none;
}
.menu-sez .sotto{
  margin:0 0 1.2rem; padding-bottom:1rem;
  border-bottom:1px solid var(--bordo);
  color:var(--tenue); font-size:.96rem;
}

.riga{
  display:grid;
  /* fit-content, non auto: con auto la colonna del nome si prendeva
     tutto lo spazio e al filetto punteggiato restavano 24px */
  grid-template-columns:fit-content(64%) minmax(1.5rem,1fr) auto;
  gap:0 .9rem; align-items:baseline;
  padding:.6rem .5rem;
  border-radius:var(--r);
  border-bottom:none;
  transition:background .16s;
}
.riga:hover{ background:var(--crema-2); }
.riga.con-foto{ grid-template-columns:78px fit-content(58%) minmax(1.5rem,1fr) auto; align-items:center; }

/* Riga e colonna vanno dette esplicitamente a tutti: il filetto e'
   uno pseudo-elemento e in ordine DOM viene per ultimo, quindi senza
   grid-row finirebbe a capo. */
.riga .foto  { grid-column:1; grid-row:1; }
.riga .nome  { grid-column:2; grid-row:1; }
.riga::after {
  content:""; grid-column:3; grid-row:1;
  align-self:end;
  border-bottom:2px dotted color-mix(in srgb, var(--nocciola) 42%, transparent);
  margin-bottom:.5rem; min-width:1.5rem;
}
.riga .prezzo{ grid-column:4; grid-row:1; }

/* le poche righe senza fotografia hanno una colonna in meno */
.riga:not(.con-foto) .nome  { grid-column:1; }
.riga:not(.con-foto)::after { grid-column:2; }
.riga:not(.con-foto) .prezzo{ grid-column:3; }

.riga .nome{
  font-family:var(--titolo); font-weight:600; font-size:1.1rem; line-height:1.25;
}
.riga .nome small{
  display:block; font-family:var(--testo); font-weight:400;
  font-size:.88rem; color:var(--tenue); margin-top:.15rem; line-height:1.45;
}
.riga .prezzo{
  font-weight:600; color:var(--amarena); white-space:nowrap;
  font-size:1.02rem;
}
.riga .foto{
  box-shadow:0 6px 16px -12px rgba(59,36,22,.7);
  transition:transform .2s;
}
.riga:hover .foto{ transform:scale(1.05); }

.allergeni{
  margin-top:2.4rem; padding:1.3rem 1.5rem;
  background:var(--crema-2); border-radius:var(--r);
  font-size:.92rem; line-height:1.7; color:var(--tenue);
}
.allergeni b{ color:var(--cioccolato); }

/* ---------------- Mappa ---------------- */

.mappa{
  border-radius:var(--r-g);
  overflow:hidden;
  border:1px solid var(--bordo);
  box-shadow:var(--ombra);
  background:var(--crema-2);
  margin-bottom:1rem;
}
.mappa iframe{
  display:block; width:100%;
  height:clamp(300px, 44vw, 460px);
  border:0;
}
.mappa-nota{
  font-size:.88rem; color:var(--tenue);
  margin:0 0 2.4rem;
  display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; align-items:baseline;
}
.mappa-nota a{ color:var(--amarena); }