/* ==========================================================================
   PIZZA STOP — Bernalda (MT)
   Foglio di stile unico. Ordine: token → base → componenti → sezioni → media
   ========================================================================== */

/* ------------------------------ 1. TOKEN ------------------------------ */
:root{
  /* superfici */
  --nero:        #0c0a09;
  --carbone:     #13100e;
  --superficie:  #1b1512;
  --superficie2: #241b16;
  --bordo:       rgba(245,239,230,.13);
  --bordo-forte: rgba(245,239,230,.26);

  /* testo */
  --crema:       #f6f0e7;
  --crema-70:    rgba(246,240,231,.72);
  --crema-50:    rgba(246,240,231,.52);
  --crema-35:    rgba(246,240,231,.35);

  /* accenti */
  --rosso:       #d62839;
  --rosso-vivo:  #ef4351;
  --brace:       #f2900d;
  --oro:         #e8b44a;
  --verde-wa:    #25d366;
  --verde-open:  #4ade80;

  /* misure */
  --wrap:        1180px;
  --r-sm:        10px;
  --r:           16px;
  --r-lg:        24px;
  --r-pill:      999px;

  /* ombre */
  --ombra-s: 0 2px 8px rgba(0,0,0,.28);
  --ombra:   0 14px 40px -18px rgba(0,0,0,.75);
  --ombra-l: 0 32px 80px -32px rgba(0,0,0,.85);

  /* tipografia */
  --f-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
  --f-testo:   'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --t-rapido: .18s cubic-bezier(.4,0,.2,1);
  --t-medio:  .34s cubic-bezier(.4,0,.2,1);
  --t-lento:  .7s cubic-bezier(.16,1,.3,1);
}

/* ------------------------------ 2. BASE ------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--nero);
  color:var(--crema);
  font-family:var(--f-testo);
  font-size:clamp(15.5px,.42vw + 14.6px,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.7rem,7.2vw,5.1rem); font-weight:700; }
h2{ font-size:clamp(2rem,3.9vw,3.15rem); }
h3{ font-size:clamp(1.15rem,1.5vw,1.4rem); }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

::selection{ background:var(--rosso); color:#fff; }

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

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }

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

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--rosso); color:#fff; padding:.8rem 1.2rem;
  border-radius:0 0 var(--r-sm) 0; font-weight:600;
}
.skip-link:focus{ left:0; }

/* animazione di comparsa — attiva solo con JS: senza JS il contenuto resta visibile */
.js .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity var(--t-lento), transform var(--t-lento);
}
.js .reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .js .reveal{ opacity:1; transform:none; }
}

/* ------------------------------ 3. COMPONENTI ------------------------------ */

/* occhielli e testate di sezione */
.eyebrow{
  font-size:.74rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brace); margin:0 0 1rem; display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{
  content:''; width:26px; height:1px; background:currentColor; opacity:.6; flex:none;
}
.sec-head{ max-width:62ch; margin-bottom:clamp(2.2rem,4vw,3.4rem); }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-head--center .eyebrow{ justify-content:center; }
.sec-head--center .eyebrow::after{ content:''; width:26px; height:1px; background:currentColor; opacity:.6; }
.sec-head__lead{ color:var(--crema-70); font-size:1.06rem; }
.lead{ font-size:1.09rem; color:var(--crema-70); }

.section{ padding:clamp(4rem,8.5vw,7.5rem) 0; position:relative; }

/* bottoni */
.btn{
  --bg:transparent; --fg:var(--crema); --bd:var(--bordo-forte);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.82rem 1.5rem; border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  border-radius:var(--r-pill); font-weight:600; font-size:.94rem; letter-spacing:.01em;
  cursor:pointer; transition:transform var(--t-rapido), background var(--t-rapido),
             border-color var(--t-rapido), box-shadow var(--t-rapido), color var(--t-rapido);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--primary{ --bg:var(--rosso); --fg:#fff; --bd:var(--rosso); box-shadow:0 10px 26px -12px var(--rosso); }
.btn--primary:hover{ --bg:var(--rosso-vivo); --bd:var(--rosso-vivo); box-shadow:0 16px 34px -12px var(--rosso); }
.btn--wa{ --bg:var(--verde-wa); --fg:#06301a; --bd:var(--verde-wa); box-shadow:0 10px 26px -12px rgba(37,211,102,.7); }
.btn--wa:hover{ --bg:#2ee774; --bd:#2ee774; }
.btn--ghost:hover{ --bg:rgba(246,240,231,.08); --bd:var(--crema-50); }
.btn--lg{ padding:1rem 1.9rem; font-size:1rem; }
.btn--full{ width:100%; }

/* ------------------------------ 4. TOPBAR ------------------------------ */
.topbar{
  background:var(--carbone);
  border-bottom:1px solid var(--bordo);
  font-size:.82rem;
  position:relative; z-index:60;
}
.topbar__in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:42px; }
.topbar__stato{ margin:0; display:flex; align-items:center; gap:.5rem; font-weight:500; color:var(--crema-70); }
.topbar__stato .dot{
  width:8px; height:8px; border-radius:50%; background:var(--crema-35); flex:none;
}
.topbar__stato.is-open .dot{ background:var(--verde-open); box-shadow:0 0 0 4px rgba(74,222,128,.18); animation:pulse 2.6s ease-in-out infinite; }
.topbar__stato.is-closed .dot{ background:var(--rosso-vivo); box-shadow:0 0 0 4px rgba(239,67,81,.16); }
.topbar__stato.is-open strong{ color:var(--verde-open); }
.topbar__stato.is-closed strong{ color:var(--rosso-vivo); }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(74,222,128,.18);} 50%{ box-shadow:0 0 0 7px rgba(74,222,128,.05);} }
.topbar__info{ margin:0; display:flex; align-items:center; gap:1.1rem; color:var(--crema-50); }
.topbar__tel{ color:var(--crema); font-weight:600; }
.topbar__tel:hover{ color:var(--brace); }

/* ------------------------------ 5. HEADER ------------------------------ */
.site-header{
  position:sticky; top:0; z-index:70;
  background:rgba(12,10,9,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:background var(--t-medio), border-color var(--t-medio), box-shadow var(--t-medio);
}
.site-header.is-stuck{
  background:rgba(12,10,9,.94);
  border-bottom-color:var(--bordo);
  box-shadow:var(--ombra-s);
}
.site-header__in{ display:flex; align-items:center; gap:1.5rem; min-height:74px; }

.logo{ display:flex; align-items:center; gap:.7rem; flex:none; }
.logo__img{ width:46px; height:46px; flex:none; transition:transform var(--t-medio); }
.logo:hover .logo__img{ transform:rotate(-8deg) scale(1.06); }
.logo--footer .logo__img{ width:56px; height:56px; }
.logo__mark{ color:var(--rosso); display:grid; place-items:center; transition:transform var(--t-medio), color var(--t-medio); }
.logo:hover .logo__mark{ transform:rotate(-8deg) scale(1.06); color:var(--brace); }
.logo__txt{ display:flex; flex-direction:column; line-height:1.1; }
.logo__txt strong{ font-family:var(--f-display); font-size:1.32rem; font-weight:700; letter-spacing:-.02em; }
.logo__txt em{ font-style:normal; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--crema-50); }

.nav{ margin-left:auto; }
.nav__list{ display:flex; align-items:center; gap:.35rem; list-style:none; margin:0; padding:0; }
.nav__list a{
  display:block; padding:.5rem .82rem; border-radius:var(--r-pill);
  font-size:.9rem; font-weight:500; color:var(--crema-70);
  transition:color var(--t-rapido), background var(--t-rapido);
}
.nav__list a:hover{ color:var(--crema); background:rgba(246,240,231,.07); }
.nav__list a.is-active{ color:var(--crema); background:rgba(214,40,57,.16); }

.site-header__cta{ display:flex; align-items:center; gap:.6rem; flex:none; }
.site-header__cta .btn{ padding:.62rem 1.15rem; font-size:.88rem; }

.burger{
  display:none; width:44px; height:44px; border:1px solid var(--bordo);
  background:transparent; border-radius:var(--r-sm); cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{ width:19px; height:2px; background:var(--crema); border-radius:2px; transition:transform var(--t-medio), opacity var(--t-rapido); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ------------------------------ 6. HERO ------------------------------ */
.hero{
  position:relative; min-height:min(92svh,860px);
  display:flex; align-items:center;
  padding:clamp(3.5rem,9vw,7rem) 0 clamp(5rem,9vw,7rem);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 58%;
  transform:scale(1.06); animation:heroZoom 18s ease-out forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero__media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(12,10,9,.96) 0%, rgba(12,10,9,.86) 34%, rgba(12,10,9,.42) 62%, rgba(12,10,9,.62) 100%),
    linear-gradient(to top, var(--nero) 2%, transparent 34%);
}
.hero__in{ position:relative; z-index:1; max-width:none; }
.hero__eyebrow{
  font-size:.76rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--oro); margin:0 0 1.3rem; font-weight:600;
}
.hero__title{ margin:0 0 1.3rem; max-width:15ch; }
.hero__title .fire{
  background:linear-gradient(96deg, var(--brace) 0%, var(--rosso-vivo) 46%, var(--oro) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-style:italic;
}
.hero__lead{ max-width:52ch; color:var(--crema-70); font-size:clamp(1rem,1.2vw,1.16rem); margin-bottom:2rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:3rem; }
.hero .reveal:nth-child(2){ transition-delay:.06s; }
.hero .reveal:nth-child(3){ transition-delay:.12s; }
.hero .reveal:nth-child(4){ transition-delay:.18s; }
.hero .reveal:nth-child(5){ transition-delay:.24s; }

.hero__facts{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:var(--bordo); border:1px solid var(--bordo);
  border-radius:var(--r); overflow:hidden; max-width:760px;
  backdrop-filter:blur(6px);
}
.hero__facts li{ background:rgba(19,16,14,.72); padding:1.1rem 1.2rem; }
.hero__facts strong{ display:block; font-family:var(--f-display); font-size:1.32rem; font-weight:600; letter-spacing:-.01em; }
.hero__facts span{ display:block; font-size:.78rem; color:var(--crema-50); margin-top:.15rem; }

.hero__scroll{
  position:absolute; left:50%; bottom:1.6rem; translate:-50% 0; z-index:2;
  width:26px; height:42px; border:1.5px solid var(--crema-35); border-radius:var(--r-pill);
  display:grid; place-items:start center; padding-top:8px;
}
.hero__scroll span{ width:3px; height:8px; border-radius:2px; background:var(--crema-50); animation:scrollDot 2s ease-in-out infinite; }
@keyframes scrollDot{ 0%,100%{ transform:translateY(0); opacity:1;} 55%{ transform:translateY(12px); opacity:.15;} }

/* ------------------------------ 7. MODALITÀ ------------------------------ */
.section--modalita{ background:var(--carbone); border-block:1px solid var(--bordo); }
.modalita-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.4rem; }

.mod-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--superficie); border:1px solid var(--bordo);
  border-radius:var(--r-lg); overflow:hidden;
  transition:transform var(--t-medio), border-color var(--t-medio), box-shadow var(--t-medio);
}
.mod-card:hover{ transform:translateY(-6px); border-color:var(--bordo-forte); box-shadow:var(--ombra); }
.mod-card__img{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.mod-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.16,1,.3,1); }
.mod-card:hover .mod-card__img img{ transform:scale(1.07); }
.mod-card__img::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, var(--superficie) 4%, transparent 58%); }
.mod-card__num{
  position:absolute; top:1rem; left:1rem; z-index:2;
  font-family:var(--f-display); font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(12,10,9,.78); border:1px solid var(--bordo); color:var(--oro);
  padding:.32rem .8rem; border-radius:var(--r-pill); backdrop-filter:blur(6px);
}
.mod-card__body{ padding:1.5rem 1.6rem 1.7rem; display:flex; flex-direction:column; flex:1; }
.mod-card__body h3{ margin-bottom:.5rem; font-size:1.5rem; }
.mod-card__body > p{ color:var(--crema-70); font-size:.95rem; }
.mod-card__punti{ list-style:none; margin:1.1rem 0 1.5rem; padding:0; display:grid; gap:.55rem; }
.mod-card__punti li{ position:relative; padding-left:1.5rem; font-size:.9rem; color:var(--crema-70); }
.mod-card__punti li::before{
  content:''; position:absolute; left:0; top:.52em; width:7px; height:7px;
  border-radius:50%; background:var(--rosso); box-shadow:0 0 0 3px rgba(214,40,57,.2);
}
.mod-card .btn{ margin-top:auto; align-self:flex-start; }

/* ------------------------------ 8. STORIA ------------------------------ */
.storia{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,5rem); align-items:center; }
.storia__testo h2{ margin-bottom:1.2rem; }
.storia__punti{ list-style:none; margin:2.2rem 0; padding:0; display:grid; gap:1.4rem; }
.storia__punti li{ display:flex; gap:1.1rem; align-items:flex-start; }
.storia__punti .num{
  font-family:var(--f-display); font-size:.9rem; font-weight:700; color:var(--rosso);
  border:1px solid var(--bordo); border-radius:var(--r-sm);
  width:38px; height:38px; display:grid; place-items:center; flex:none;
  background:var(--superficie);
}
.storia__punti strong{ display:block; margin-bottom:.15rem; font-size:1.02rem; }
.storia__punti div{ font-size:.93rem; color:var(--crema-70); }

.storia__media{ position:relative; display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.storia__img{ margin:0; position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--bordo); box-shadow:var(--ombra); }
.storia__img img{ width:100%; height:100%; object-fit:cover; }
.storia__img figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:2rem .9rem .8rem;
  background:linear-gradient(to top, rgba(12,10,9,.95), transparent);
  font-size:.76rem; color:var(--crema-70); line-height:1.35;
}
.storia__img--1{ grid-column:1; aspect-ratio:3/4; }
.storia__img--2{ grid-column:2; aspect-ratio:3/4; margin-top:2.6rem; }
.storia__img--3{ grid-column:1 / -1; aspect-ratio:16/8; }
.storia__img--2{ transition-delay:.1s; }
.storia__img--3{ transition-delay:.2s; }

/* ------------------------------ 9. MENU ------------------------------ */
.section--menu{ background:var(--carbone); border-block:1px solid var(--bordo); }

.menu-tools{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  margin-bottom:1.2rem;
  position:sticky; top:74px; z-index:40;
  padding:1rem 0;
  background:linear-gradient(to bottom, var(--carbone) 74%, rgba(19,16,14,0));
}
.menu-filtri{ display:flex; flex-wrap:wrap; gap:.5rem; flex:1 1 auto; min-width:0; }
.chip{
  border:1px solid var(--bordo); background:var(--superficie); color:var(--crema-70);
  padding:.5rem 1rem; border-radius:var(--r-pill); font-size:.86rem; font-weight:500;
  cursor:pointer; transition:all var(--t-rapido); white-space:nowrap;
}
.chip:hover{ color:var(--crema); border-color:var(--bordo-forte); transform:translateY(-1px); }
.chip.is-active{ background:var(--rosso); border-color:var(--rosso); color:#fff; box-shadow:0 8px 20px -10px var(--rosso); }

.menu-search{ position:relative; display:flex; align-items:center; flex:0 1 300px; min-width:0; }
.menu-search svg{ position:absolute; left:.95rem; color:var(--crema-35); pointer-events:none; }
.menu-search input{
  width:100%; padding:.65rem 2.4rem .65rem 2.7rem;
  background:var(--superficie); border:1px solid var(--bordo); border-radius:var(--r-pill);
  color:var(--crema); font-size:.9rem; transition:border-color var(--t-rapido), background var(--t-rapido);
}
.menu-search input::placeholder{ color:var(--crema-35); }
.menu-search input:focus{ outline:none; border-color:var(--bordo-forte); background:var(--superficie2); }
.menu-search input:focus-visible{ outline:2px solid var(--oro); outline-offset:2px; }
.menu-search__clear{
  position:absolute; right:.55rem; width:26px; height:26px; border:0; background:rgba(246,240,231,.1);
  border-radius:50%; cursor:pointer; font-size:1.05rem; line-height:1; color:var(--crema-70);
}
.menu-search__clear:hover{ background:rgba(246,240,231,.2); color:var(--crema); }

.menu-count{ font-size:.83rem; color:var(--crema-35); margin:0 0 2rem; }
.menu-empty{ text-align:center; color:var(--crema-50); padding:3rem 0; font-size:1.05rem; }

.menu-lista{ display:grid; gap:clamp(2rem,3.5vw,3rem); }

/* vista "Tutte": griglia visiva delle categorie */
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.1rem; }
.cat-tile{
  position:relative; display:block; width:100%; text-align:left; cursor:pointer;
  border:1px solid var(--bordo); border-radius:var(--r); overflow:hidden;
  background:var(--superficie); padding:0; aspect-ratio:4/3;
  transition:transform var(--t-medio), border-color var(--t-medio), box-shadow var(--t-medio);
}
.cat-tile:hover{ transform:translateY(-5px); border-color:var(--bordo-forte); box-shadow:var(--ombra); }
.cat-tile img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1s cubic-bezier(.16,1,.3,1);
}
.cat-tile:hover img{ transform:scale(1.08); }
.cat-tile::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(12,10,9,.96) 6%, rgba(12,10,9,.45) 46%, rgba(12,10,9,.12) 100%);
}
.cat-tile__txt{ position:absolute; left:1.1rem; right:1.1rem; bottom:1rem; z-index:2; }
.cat-tile__txt .oc{
  display:block; font-size:.63rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brace); margin-bottom:.3rem;
}
.cat-tile__txt strong{
  display:block; font-family:var(--f-display); font-size:1.28rem; font-weight:600;
  letter-spacing:-.01em; line-height:1.15; margin-bottom:.25rem;
}
.cat-tile__txt .n{ font-size:.78rem; color:var(--crema-50); }
.cat-tile__txt .n::after{
  content:'›'; margin-left:.45rem; color:var(--rosso-vivo); font-size:1.05rem;
  display:inline-block; transition:transform var(--t-rapido);
}
.cat-tile:hover .cat-tile__txt .n::after{ transform:translateX(4px); }

/* torna a tutte le categorie */
.cat-back{
  display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1.4rem;
  background:none; border:0; cursor:pointer; color:var(--crema-50);
  font-size:.88rem; font-weight:600; padding:.3rem 0;
}
.cat-back:hover{ color:var(--brace); }
.cat-back::before{ content:'‹'; font-size:1.25rem; line-height:1; }

.cat{
  background:var(--superficie); border:1px solid var(--bordo); border-radius:var(--r-lg);
  overflow:hidden; display:grid; grid-template-columns:340px 1fr;
}
.cat__cover{ position:relative; overflow:hidden; min-height:100%; }
.cat__cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.16,1,.3,1); }
.cat:hover .cat__cover img{ transform:scale(1.06); }
.cat__cover::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to right, rgba(12,10,9,.06) 0%, rgba(12,10,9,.28) 62%, var(--superficie) 99%),
             linear-gradient(to top, rgba(12,10,9,.92) 0%, rgba(12,10,9,.1) 52%);
}
.cat__cover-txt{ position:absolute; left:1.6rem; right:1.6rem; bottom:1.5rem; z-index:2; }
.cat__cover-txt .eyebrow{ margin-bottom:.4rem; font-size:.66rem; }
.cat__cover-txt h3{ font-size:clamp(1.5rem,2.1vw,1.9rem); margin:0; }

.cat__body{ padding:1.8rem clamp(1.4rem,2.2vw,2.2rem) 2rem; }
.cat__nota{
  font-size:.88rem; color:var(--crema-50); font-style:italic;
  border-left:2px solid var(--rosso); padding-left:.9rem; margin:0 0 1.5rem;
}
.voci{ list-style:none; margin:0; padding:0; display:grid; gap:.15rem; }
.voce{
  display:grid; grid-template-columns:1fr auto; gap:.2rem 1rem; align-items:baseline;
  padding:.72rem .7rem; border-radius:var(--r-sm);
  transition:background var(--t-rapido);
}
.voce:hover{ background:rgba(246,240,231,.045); }
.voce__nome{ font-weight:600; font-size:1rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.voce__prezzo{
  font-family:var(--f-display); font-weight:600; font-size:1.04rem; color:var(--oro);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.voce__desc{ grid-column:1 / -1; font-size:.87rem; color:var(--crema-50); margin:0; }
.voce mark{ background:rgba(242,144,13,.28); color:inherit; border-radius:3px; padding:0 .12em; }

.tag{
  font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.18rem .48rem; border-radius:var(--r-pill); border:1px solid currentColor; line-height:1.4;
}
.tag--top{ color:var(--oro); }
.tag--veg{ color:#6ec98a; }
.tag--piccante{ color:var(--rosso-vivo); }
.tag--locale{ color:var(--brace); }
.tag--gf{ color:#7ec8e3; }

/* intestazione di gruppo dentro una categoria (Rossi, Salumi, Alla spina…) */
.voci__gruppo{
  list-style:none; margin:1.4rem 0 .5rem; padding:0 .7rem .45rem;
  font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brace); border-bottom:1px solid var(--bordo);
}
.voci__gruppo:first-child{ margin-top:0; }

.menu-nota{
  margin-top:2.6rem; padding:1.3rem 1.5rem;
  background:var(--superficie); border:1px solid var(--bordo);
  border-left:3px solid var(--oro); border-radius:var(--r-sm);
  font-size:.88rem; color:var(--crema-50);
}
.menu-nota p{ margin:0; }
.menu-nota p + p{ margin-top:.5rem; }

/* ------------------------------ 9-bis. IMPASTI ------------------------------ */
.impasti{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1.2rem; }
.impasto{
  position:relative; padding:1.7rem 1.5rem 1.6rem;
  background:var(--superficie); border:1px solid var(--bordo); border-radius:var(--r-lg);
  transition:transform var(--t-medio), border-color var(--t-medio), box-shadow var(--t-medio);
}
.impasto:hover{ transform:translateY(-5px); border-color:var(--bordo-forte); box-shadow:var(--ombra); }
.impasto__n{
  display:block; font-family:var(--f-display); font-size:.82rem; font-weight:700;
  color:var(--rosso); letter-spacing:.14em; margin-bottom:.9rem;
}
.impasto h3{ font-size:1.28rem; margin-bottom:.3rem; }
.impasto__prezzo{
  font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--oro); margin:0 0 .9rem;
}
.impasto p:last-child{ font-size:.9rem; color:var(--crema-70); margin:0; }

/* ------------------------------ 9-ter. GLUTEN FREE ------------------------------ */
.section--gf{
  background:
    radial-gradient(1100px 460px at 88% 12%, rgba(126,200,227,.09), transparent 62%),
    var(--carbone);
  border-block:1px solid var(--bordo);
}
.gf{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:center; }
.gf__media{ margin:0; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--bordo); box-shadow:var(--ombra-l); }
.gf__media img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.gf__testo .eyebrow{ color:#7ec8e3; }
.gf__punti{ list-style:none; margin:1.8rem 0 1.6rem; padding:0; display:grid; gap:.75rem; }
.gf__punti li{ position:relative; padding-left:1.9rem; font-size:.95rem; color:var(--crema-70); }
.gf__punti li::before{
  content:''; position:absolute; left:0; top:.34em; width:14px; height:14px; border-radius:50%;
  background:rgba(126,200,227,.16); border:1px solid rgba(126,200,227,.5);
}
.gf__punti li::after{
  content:''; position:absolute; left:4px; top:.62em; width:6px; height:3px;
  border-left:2px solid #7ec8e3; border-bottom:2px solid #7ec8e3; rotate:-45deg;
}
/* specificità doppia: .avviso è dichiarata più avanti nel foglio */
.avviso.avviso--gf{ background:rgba(126,200,227,.08); border:1px solid rgba(126,200,227,.32); }
.avviso.avviso--gf svg{ color:#7ec8e3; }

/* ------------------------------ 9-quater. SOCIAL ------------------------------ */
.social{ display:flex; gap:.6rem; margin:0 0 1.6rem; }
.social a{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1rem; border:1px solid var(--bordo); border-radius:var(--r-pill);
  font-size:.86rem; font-weight:600; color:var(--crema-70);
  transition:color var(--t-rapido), border-color var(--t-rapido), background var(--t-rapido);
}
.social a:hover{ color:var(--crema); border-color:var(--bordo-forte); background:rgba(246,240,231,.06); }
.social--footer{ margin:1.2rem 0 0; }
.social--footer a{ padding:.5rem; border-radius:var(--r-sm); }

/* ------------------------------ 10. FASCIA ------------------------------ */
.fascia{ position:relative; padding:clamp(5rem,11vw,9rem) 0; overflow:hidden; }
.fascia__media{ position:absolute; inset:0; }
.fascia__media img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }
.fascia__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to right, rgba(12,10,9,.93) 12%, rgba(12,10,9,.55) 62%, rgba(12,10,9,.86));
}
.fascia__in{ position:relative; z-index:1; }
.fascia blockquote{ margin:0; max-width:min(94%, 660px); }
.fascia blockquote p{
  font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:clamp(1.7rem,4.1vw,3.1rem); line-height:1.16; letter-spacing:-.02em; margin:0 0 1.1rem;
}
.fascia cite{ font-style:normal; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--oro); }

/* ------------------------------ 11. DOMICILIO ------------------------------ */
.domicilio{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:center; }

.specs{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin:2rem 0;
  background:var(--bordo); border:1px solid var(--bordo); border-radius:var(--r); overflow:hidden;
}
.specs > div{ background:var(--superficie); padding:1.15rem 1.3rem; }
.specs dt{ font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; color:var(--crema-35); margin-bottom:.3rem; }
.specs dd{ margin:0; font-family:var(--f-display); font-size:1.42rem; font-weight:600; color:var(--crema); }

.avviso{
  display:flex; gap:.95rem; align-items:flex-start;
  padding:1.05rem 1.25rem; border-radius:var(--r-sm); margin-bottom:1.5rem;
  background:rgba(214,40,57,.1); border:1px solid rgba(214,40,57,.34);
}
.avviso svg{ color:var(--rosso-vivo); flex:none; margin-top:.1rem; }
.avviso p{ margin:0; font-size:.92rem; color:var(--crema-70); }
.avviso strong{ color:var(--crema); }

.domicilio__zone{ font-size:.94rem; color:var(--crema-70); margin-bottom:1.8rem; }

.domicilio__media{ margin:0; position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--bordo); box-shadow:var(--ombra-l); }
.domicilio__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.domicilio__media figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:2.6rem 1.6rem 1.4rem;
  background:linear-gradient(to top, rgba(12,10,9,.94), transparent);
  font-family:var(--f-display); font-style:italic; font-size:1.14rem;
}

/* ------------------------------ 12. PRENOTA ------------------------------ */
.section--prenota{ background:var(--carbone); border-block:1px solid var(--bordo); }
.prenota{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:start; }
.prenota__note{ list-style:none; margin:1.8rem 0 2.2rem; padding:0; display:grid; gap:.75rem; }
.prenota__note li{ position:relative; padding-left:1.75rem; font-size:.93rem; color:var(--crema-70); }
.prenota__note li::before{
  content:''; position:absolute; left:0; top:.45em; width:11px; height:11px; border-radius:3px;
  border:2px solid var(--oro); border-top:0; border-right:0; rotate:-45deg;
}
.prenota__img{ margin:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--bordo); }
.prenota__img img{ width:100%; aspect-ratio:16/9; object-fit:cover; }

.form{
  background:var(--superficie); border:1px solid var(--bordo);
  border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.3rem); box-shadow:var(--ombra);
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field{ display:block; margin-bottom:1.05rem; }
.field--small{ max-width:150px; }
.field__lab{ display:block; font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--crema-50); margin-bottom:.42rem; }
.field__lab .opt{ text-transform:none; letter-spacing:0; font-weight:400; color:var(--crema-35); }
.field input, .field select, .field textarea{
  width:100%; padding:.78rem .95rem;
  background:var(--nero); border:1px solid var(--bordo); border-radius:var(--r-sm);
  color:var(--crema); font-family:inherit; font-size:.95rem;
  transition:border-color var(--t-rapido), background var(--t-rapido);
}
.field textarea{ resize:vertical; min-height:84px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--oro); background:#0a0807; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ outline:2px solid var(--oro); outline-offset:1px; }
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f6f0e7'%3E%3Cpath d='m7 10 5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .7rem center; background-size:20px; padding-right:2.4rem;
}
.field__err{ display:block; font-size:.79rem; color:var(--rosso-vivo); margin-top:.32rem; min-height:0; }
.field.has-error input, .field.has-error select{ border-color:var(--rosso-vivo); }

.form__hint{
  font-size:.86rem; color:var(--oro); background:rgba(232,180,74,.1);
  border:1px solid rgba(232,180,74,.28); border-radius:var(--r-sm);
  padding:.7rem .95rem; margin:0 0 1.1rem; display:none;
}
.form__hint.is-visible{ display:block; }
.form__privacy{ font-size:.79rem; color:var(--crema-35); margin:1rem 0 0; text-align:center; }
.form__privacy a{ color:var(--crema-70); text-decoration:underline; text-underline-offset:2px; }

/* ------------------------------ 13. DOTAZIONI ------------------------------ */
.dotazioni{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:var(--bordo); border:1px solid var(--bordo); border-radius:var(--r-lg); overflow:hidden;
}
.dotazioni li{
  background:var(--carbone); padding:1.7rem 1.5rem;
  transition:background var(--t-medio);
}
.dotazioni li:hover{ background:var(--superficie); }
.dotazioni .ico{
  display:grid; place-items:center; width:42px; height:42px; margin-bottom:.9rem;
  border-radius:var(--r-sm); background:rgba(214,40,57,.14); color:var(--rosso-vivo);
}
.dotazioni h3{ font-size:1.05rem; margin-bottom:.3rem; font-family:var(--f-testo); font-weight:600; letter-spacing:0; }
.dotazioni p{ font-size:.86rem; color:var(--crema-50); margin:0; }

/* ------------------------------ 14. CONTATTI ------------------------------ */
.contatti{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:start; }

.orari{ width:100%; border-collapse:collapse; margin-top:.5rem; }
.orari td{ padding:.82rem .2rem; border-bottom:1px solid var(--bordo); font-size:.95rem; vertical-align:top; }
.orari tr:last-child td{ border-bottom:0; }
.orari td:first-child{ color:var(--crema-70); }
.orari td:last-child{ text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
.orari tr.is-today td{ color:var(--crema); }
.orari tr.is-today td:first-child::after{
  content:'oggi'; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  background:var(--rosso); color:#fff; padding:.14rem .45rem; border-radius:var(--r-pill); margin-left:.6rem; vertical-align:middle;
}
.orari__note{ list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:.6rem; }
.orari__note li{ font-size:.86rem; color:var(--crema-50); position:relative; padding-left:1.2rem; }
.orari__note li::before{ content:'·'; position:absolute; left:.35rem; color:var(--brace); font-size:1.3rem; line-height:1; }

.contatti__lista{ list-style:none; margin:.5rem 0 2rem; padding:0; display:grid; gap:1.3rem; }
.contatti__lista li{ display:flex; gap:1rem; align-items:flex-start; }
.contatti__lista .ico{
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  border-radius:var(--r-sm); background:var(--superficie); border:1px solid var(--bordo); color:var(--brace);
}
.contatti__lista strong{ display:block; font-size:.98rem; margin-bottom:.1rem; }
.contatti__lista div{ font-size:.93rem; color:var(--crema-70); }
.contatti__lista em{ display:block; font-style:normal; font-size:.84rem; color:var(--crema-35); margin-top:.25rem; }
.contatti__lista a:hover{ color:var(--brace); }
.contatti__azioni{ display:flex; flex-wrap:wrap; gap:.75rem; }

.mappa{
  margin-top:clamp(3rem,5vw,4.5rem); width:100%; height:clamp(300px,42vw,440px);
  border-top:1px solid var(--bordo); border-bottom:1px solid var(--bordo);
  background:var(--superficie); position:relative;
}
.mappa iframe{
  width:100%; height:100%; border:0; display:block;
  background:var(--superficie);
  filter:grayscale(.35) contrast(1.05) brightness(.86);
}

/* ------------------------------ 15. FAQ ------------------------------ */
.section--faq{ background:var(--carbone); border-top:1px solid var(--bordo); }
.faq{ max-width:840px; margin-inline:auto; display:grid; gap:.6rem; }
.faq__item{ background:var(--superficie); border:1px solid var(--bordo); border-radius:var(--r); overflow:hidden; transition:border-color var(--t-rapido); }
.faq__item.is-open{ border-color:var(--bordo-forte); }
.faq__q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:1.15rem 3.2rem 1.15rem 1.4rem; position:relative;
  font-size:1.02rem; font-weight:600; line-height:1.4;
}
.faq__q::after{
  content:''; position:absolute; right:1.35rem; top:50%; translate:0 -50%;
  width:11px; height:11px; border-right:2px solid var(--crema-50); border-bottom:2px solid var(--crema-50);
  rotate:45deg; transition:rotate var(--t-medio), border-color var(--t-medio); margin-top:-3px;
}
.faq__item.is-open .faq__q::after{ rotate:-135deg; margin-top:2px; border-color:var(--brace); }
.faq__q:hover{ color:var(--brace); }
.faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t-medio); }
.faq__item.is-open .faq__a{ grid-template-rows:1fr; }
.faq__a > div{ overflow:hidden; }
.faq__a p{ padding:0 1.4rem 1.3rem; margin:0; color:var(--crema-70); font-size:.95rem; }

/* ------------------------------ 16. FOOTER ------------------------------ */
.site-footer{ background:var(--nero); border-top:1px solid var(--bordo); padding-top:clamp(3rem,6vw,4.5rem); }
.site-footer__in{ display:grid; grid-template-columns:1.1fr 2fr; gap:clamp(2rem,4vw,4rem); padding-bottom:3rem; }
.logo--footer{ margin-bottom:1.2rem; }
.site-footer__brand p{ font-size:.9rem; color:var(--crema-50); line-height:1.9; }
.site-footer__brand a:hover{ color:var(--brace); }
.site-footer__nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.site-footer__nav h3{
  font-family:var(--f-testo); font-size:.76rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--crema-35); margin-bottom:1rem;
}
.site-footer__nav ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.site-footer__nav a{ font-size:.92rem; color:var(--crema-70); transition:color var(--t-rapido); }
.site-footer__nav a:hover{ color:var(--brace); }
.site-footer__orari li{ font-size:.9rem; color:var(--crema-70); display:flex; justify-content:space-between; gap:1rem; }
.site-footer__orari span{ color:var(--crema); font-weight:600; font-variant-numeric:tabular-nums; }
.site-footer__legal{
  border-top:1px solid var(--bordo); padding:1.4rem 0;
  display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between;
  font-size:.8rem; color:var(--crema-35);
}
.site-footer__legal p{ margin:0; }

/* ------------------------------ 17. BARRA MOBILE / TO-TOP ------------------------------ */
.barra-mobile{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:rgba(12,10,9,.95); backdrop-filter:blur(14px);
  border-top:1px solid var(--bordo);
  padding:.45rem .4rem calc(.45rem + env(safe-area-inset-bottom));
}
.barra-mobile a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:.15rem;
  padding:.45rem .2rem; font-size:.68rem; color:var(--crema-50); font-weight:600;
  border-radius:var(--r-sm);
}
.barra-mobile a.is-wa{ color:var(--verde-wa); }
.barra-mobile a:active{ background:rgba(246,240,231,.07); }

.to-top{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:75;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  background:var(--rosso); border:0; color:#fff; display:grid; place-items:center;
  box-shadow:0 12px 28px -10px rgba(214,40,57,.8);
  opacity:0; transform:translateY(12px); transition:opacity var(--t-medio), transform var(--t-medio);
}
.to-top.is-visible{ opacity:1; transform:none; }
.to-top:hover{ background:var(--rosso-vivo); }

/* ------------------------------ 18. RESPONSIVE ------------------------------ */
@media (max-width:1080px){
  .cat{ grid-template-columns:280px 1fr; }
  .dotazioni{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .impasti{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:1100px){
  .hide-md{ display:none !important; }
  html{ scroll-padding-top:78px; }

  /* il pannello vive dentro un contenitore grande quanto il viewport: così il
     menu chiuso resta fuori vista senza creare scroll orizzontale sulla pagina */
  .nav{
    position:fixed; inset:0; width:auto; z-index:66;
    overflow:hidden; pointer-events:none; background:none; border:0; padding:0;
  }
  .nav.is-open{ pointer-events:auto; }
  .nav__list{
    position:absolute; top:0; right:0; bottom:0; width:min(84vw,340px);
    flex-direction:column; align-items:stretch; gap:.2rem;
    margin:0; padding:5.5rem 1.5rem 2rem;
    background:var(--carbone); border-left:1px solid var(--bordo);
    box-shadow:var(--ombra-l); overflow-y:auto;
    transform:translateX(100%); transition:transform var(--t-medio);
    pointer-events:auto;
  }
  .nav.is-open .nav__list{ transform:none; }
  .nav__list a{ padding:.9rem 1rem; font-size:1.02rem; border-radius:var(--r-sm); }
  .burger{ display:flex; }
  body.nav-open{ overflow:hidden; }
  body.nav-open::after{
    content:''; position:fixed; inset:0; background:rgba(12,10,9,.7); z-index:65;
    backdrop-filter:blur(3px);
  }

  .modalita-grid{ grid-template-columns:1fr; }
  .storia, .domicilio, .prenota, .contatti, .gf{ grid-template-columns:1fr; }
  .gf__media{ max-width:460px; }
  .storia__media{ order:-1; }
  .storia__img--2{ margin-top:0; }
  .domicilio__media{ order:-1; }
  .prenota__img{ display:none; }
  .site-footer__in{ grid-template-columns:1fr; }
  .menu-tools{ top:64px; }
}

@media (max-width:760px){
  .hide-sm{ display:none !important; }
  body{ padding-bottom:64px; }
  .barra-mobile{ display:flex; }
  .to-top{ bottom:5.2rem; }

  .hero{ min-height:auto; padding-top:2.5rem; }
  .hero__facts{ grid-template-columns:repeat(2,1fr); }
  .hero__scroll{ display:none; }
  .hero__actions .btn{ flex:1 1 auto; }

  .cat{ grid-template-columns:1fr; }
  .cat__cover{ aspect-ratio:16/9; min-height:0; }
  .cat__cover img{ position:absolute; }
  .cat__cover::after{ background:linear-gradient(to top, var(--superficie) 3%, rgba(12,10,9,.25) 60%); }
  .cat__cover-txt{ left:1.2rem; right:1.2rem; bottom:1.1rem; }

  .menu-tools{
    position:static; padding:0 0 1rem; flex-direction:column; align-items:stretch;
    background:none; min-width:0;
  }
  /* i filtri scorrono in orizzontale dentro la loro riga: min-width:0 evita
     che il contenuto largo spinga tutta la pagina fuori dallo schermo */
  .menu-filtri{
    display:flex; flex-wrap:nowrap; overflow-x:auto; padding-bottom:.5rem;
    width:100%; min-width:0; max-width:100%;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .menu-filtri::-webkit-scrollbar{ display:none; }
  .menu-search{ flex-basis:auto; width:100%; min-width:0; max-width:100%; }
  .menu-search input{ min-width:0; }

  .specs{ grid-template-columns:1fr; }
  .dotazioni{ grid-template-columns:1fr; }
  .impasti{ grid-template-columns:1fr; }
  .social{ flex-wrap:wrap; }
  .form__row{ grid-template-columns:1fr; gap:0; }
  .field--small{ max-width:none; }
  .site-footer__nav{ grid-template-columns:1fr; gap:1.8rem; }
  .site-footer__legal{ flex-direction:column; }
  .storia__media{ grid-template-columns:1fr 1fr; }
  .storia__img--3{ aspect-ratio:16/9; }
}

@media (max-width:420px){
  .hero__facts{ grid-template-columns:1fr; }
  .hero__facts li{ padding:.85rem 1rem; }
  .topbar__info .hide-sm{ display:none; }
}

/* stampa: menu leggibile su carta */
@media print{
  .topbar,.site-header,.hero__media,.barra-mobile,.to-top,.mappa,.menu-tools,.form,.hero__scroll{ display:none !important; }
  body{ background:#fff; color:#000; }
  .cat,.voce,.menu-nota{ break-inside:avoid; }
  .cat__cover{ display:none; }
  .cat{ grid-template-columns:1fr; border-color:#ccc; }
}