/* ============================================================
   Dietro L'Angolo — struttura condivisa
   Tutto ciò che è "visivo" passa da custom properties:
   il tema (tema.css) le sovrascrive.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Le barre in cima sono sovrapposte al contenuto: senza questo, ogni salto a
   un'ancora porta il titolo sotto l'header e sembra che manchi un pezzo. */
html { scroll-padding-top: calc(var(--nav-h, 70px) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: var(--lh-body, 1.7);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }

img, svg, iframe { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: var(--fw-display, 700); letter-spacing: var(--ls-display, -.02em); line-height: 1.14; margin: 0 0 .5em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

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

/* icone inline: dimensione di default, sempre. Senza questa regola un SVG
   senza width esplicita si espande fino a riempire il contenitore. */
.i { width: 1.15em; height: 1.15em; flex: none; }

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

/* ---------- layout ---------- */
.wrap { width: min(100% - 2.5rem, var(--wrap, 1200px)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, 820px); margin-inline: auto; }
.sec { padding-block: var(--sec-y, 88px); position: relative; }
.sec--tight { padding-block: calc(var(--sec-y, 88px) * .62); }
.sec--alt { background: var(--c-bg-alt); }
.sec--dark { background: var(--c-dark); color: var(--c-on-dark); }
.sec--dark h2, .sec--dark h3 { color: var(--c-on-dark); }

.skip {
  position: absolute; left: 1rem; top: -100px; z-index: 999;
  background: var(--c-dark); color: #fff; padding: .8rem 1.2rem; border-radius: var(--r-sm);
  transition: top .2s;
}
.skip:focus { top: 1rem; }

/* ---------- tipografia di servizio ---------- */
.eyebrow {
  display: block; font-family: var(--f-body); font-weight: 600;
  font-size: .74rem; letter-spacing: var(--ls-eyebrow, .18em);
  text-transform: uppercase; color: var(--c-brand); margin-bottom: 1rem;
}
.sec--dark .eyebrow, .hero .eyebrow { color: var(--c-brand-on-dark, var(--c-brand)); }
h2.big  { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.1rem); }
h2.mid  { font-size: clamp(1.65rem, 1.1rem + 1.9vw, 2.4rem); }
.lead   { font-size: clamp(1.02rem, .98rem + .3vw, 1.16rem); color: var(--c-ink-soft); }
.small  { font-size: .86rem; color: var(--c-ink-soft); }
.sec--dark .lead, .sec--dark .small { color: rgba(255,255,255,.78); }
.center { text-align: center; }
.center .eyebrow { margin-inline: auto; }
.sec-head { max-width: 640px; margin-bottom: clamp(2rem, 4vw, 3.4rem); }
.sec-head.center { margin-inline: auto; }

/* ---------- bottoni ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .92rem 1.6rem; border-radius: var(--r-btn, var(--r-sm));
  font-family: var(--f-body); font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  line-height: 1; min-height: 48px; text-align: center;
  transition: background .22s, color .22s, border-color .22s, transform .22s, box-shadow .22s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--c-btn-bg, var(--c-dark)); color: var(--c-btn-fg, #fff); box-shadow: var(--sh-btn, none); }
.btn--primary:hover { background: var(--c-btn-bg-h, var(--c-brand)); transform: var(--btn-lift, none); box-shadow: var(--sh-btn-h, none); }
.btn--ghost { background: var(--c-btn2-bg, transparent); color: var(--c-btn2-fg, var(--c-dark)); border: 1px solid var(--c-btn2-bd, currentColor); }
.btn--ghost:hover { background: var(--c-btn2-bg-h, var(--c-dark)); color: var(--c-btn2-fg-h, #fff); border-color: transparent; transform: var(--btn-lift, none); }
.btn--onDark { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.55); backdrop-filter: blur(6px); }
.btn--onDark:hover { background: #fff; color: var(--c-dark); border-color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.center .btn-row { justify-content: center; }

.link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--c-brand-strong); border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: gap .2s; }
.link-arrow:hover { gap: .8rem; }

/* ---------- selettore di lingua ----------
   Nella barra compare solo dove c'e' anche la navigazione estesa (da 1024px,
   vedi in fondo al file). Sotto quella soglia si passa all'hamburger e il
   selettore vive dentro il drawer: due selettori nella stessa schermata
   sarebbero una ripetizione. */
.navbar .lang { display: none; }
.lang { align-items: center; gap: .1rem; flex: none; }
.lang a {
  padding: .4rem .5rem; border-radius: var(--r-sm);
  font-size: .78rem; font-weight: 700; letter-spacing: .07em;
  color: var(--c-ink-soft); transition: color .2s, background .2s;
}
.lang a:hover { color: var(--c-ink); }
.lang a.is-on { color: var(--c-brand-strong); background: var(--c-brand-soft); }
.lang > span { color: var(--c-line); font-size: .78rem; }
/* Sopra l'hero la barra e' trasparente e le scritte diventano chiare: il
   selettore deve seguirle. Senza queste righe la lingua NON attiva era
   marrone scuro sopra la foto scura, cioe' invisibile, e sulla home si
   leggeva solo "EN". Le variabili le imposta .has-hero e le rimette a posto
   .is-stuck, quindi il selettore si adatta da solo nei tre stati.
   Si usa il colore PIENO e non quello smorzato: al 72% su una foto il
   contrasto misurava 3,77:1, sotto la soglia AA di 4,5. La lingua attiva si
   distingue gia' dalla pastiglia, non serve smorzare l'altra. */
.navbar .lang a { color: var(--c-nav-fg, var(--c-ink-soft)); }
.navbar .lang a:hover { color: var(--c-nav-fg, var(--c-ink)); text-decoration: underline; }
.navbar .lang > span { color: var(--c-nav-fg, var(--c-line)); opacity: .45; }
/* Sopra l'hero non basta il bianco: dietro al selettore passa la parte piu'
   luminosa della foto (il boccale al sole) e il contrasto misurava 3,69:1.
   Un velo scuro sotto al gruppo garantisce la leggibilita' qualunque foto ci
   finisca dietro. Sparisce appena la barra si aggancia e torna piena. */
.has-hero .navbar .lang { background: rgba(30,12,7,.5); border-radius: var(--r-sm); }
.is-stuck .has-hero .navbar .lang { background: transparent; }
/* nel drawer: due voci per esteso, bersagli comodi da toccare */
.lang--drawer { display: flex; gap: .6rem; margin: 1.6rem 0 .4rem; }
.lang--drawer > a {
  flex: 1; min-height: 48px; display: flex; align-items: center; justify-content: center;
  font-size: .9rem; letter-spacing: .04em;
  border: 1px solid rgba(255,255,255,.32); border-radius: var(--r-btn, var(--r-sm));
  color: rgba(255,255,255,.82); background: transparent;
}
.lang--drawer > a:hover { color: #fff; border-color: rgba(255,255,255,.6); }
.lang--drawer > a.is-on { color: var(--c-dark); background: #fff; border-color: #fff; }

/* ---------- badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .34rem .7rem; border-radius: var(--r-pill, 999px);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--c-brand-soft); color: var(--c-brand-strong);
}
.badge--solid { background: var(--c-brand); color: #fff; }
.badge--out { background: transparent; border: 1px solid var(--c-line); color: var(--c-ink-soft); }

/* ---------- immagini + segnaposto ---------- */
.media {
  position: relative; overflow: hidden; background: var(--c-brand-soft);
  border-radius: var(--r-media, var(--r-md)); isolation: isolate;
}
.media::after {
  content: attr(data-ph); position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 1rem; font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-brand-strong); opacity: .55;
  background: repeating-linear-gradient(45deg, transparent 0 12px, rgba(0,0,0,.025) 12px 24px);
}
.media > img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.media--43 { aspect-ratio: 4/3; }
.media--34 { aspect-ratio: 3/4; }
.media--45 { aspect-ratio: 4/5; }
.media--11 { aspect-ratio: 1/1; }
.media--169 { aspect-ratio: 16/9; }
.media--zoom > img { transition: transform .6s cubic-bezier(.22,1,.36,1); }
.media--zoom:hover > img { transform: scale(1.05); }

/* ============================================================
   HEADER
   ============================================================ */
.topbar {
  background: var(--c-dark); color: rgba(255,255,255,.86);
  font-size: .78rem; height: 38px; display: none;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 1.5rem; white-space: nowrap; }
.topbar .wrap > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.topbar .i { width: 15px; height: 15px; }
.topbar a { transition: color .2s; }
.topbar a:hover { color: #fff; }
.topbar-side { display: flex; align-items: center; gap: 1.1rem; }
.topbar-ico { display: inline-flex; opacity: .8; transition: opacity .2s; }
.topbar-ico:hover { opacity: 1; }
.topbar-ico .i { width: 16px; height: 16px; }
.status { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #9aa; flex: none; }
.dot.is-open { background: #63d471; box-shadow: 0 0 0 0 rgba(99,212,113,.7); animation: pulse 2.4s infinite; }
.dot.is-soon { background: #f0b429; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(99,212,113,0); } 100% { box-shadow: 0 0 0 0 rgba(99,212,113,0); } }

.site-header { position: sticky; top: 0; z-index: 90; transition: transform .3s; }
.navbar {
  background: var(--c-nav-bg, var(--c-bg));
  border-bottom: 1px solid var(--c-nav-bd, var(--c-line));
  transition: background .3s, border-color .3s, box-shadow .3s, padding .3s;
}
.navbar .wrap { display: flex; align-items: center; gap: 1.4rem; height: var(--nav-h, 70px); transition: height .3s; }

.brand { display: flex; align-items: center; gap: .7rem; margin-right: auto; }
.brand img { height: 34px; width: auto; transition: height .3s, filter .3s; }
.brand-txt { display: block; line-height: 1.05; }
.brand-txt b { display: block; font-family: var(--f-display); font-size: .98rem; letter-spacing: -.01em; color: var(--c-nav-fg, var(--c-ink)); white-space: nowrap; }
.brand-txt span { font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c-nav-fg-soft, var(--c-ink-soft)); white-space: nowrap; }

.nav { display: none; align-items: center; gap: .3rem; }
.nav a {
  position: relative; padding: .6rem .85rem; border-radius: var(--r-navlink, var(--r-pill));
  font-size: .93rem; font-weight: 500; color: var(--c-nav-fg, var(--c-ink));
  transition: color .2s, background .2s;
}
.nav a::after {
  content: ''; position: absolute; left: .85rem; right: .85rem; bottom: .3rem; height: 1px;
  background: currentColor; transform: scaleX(var(--u, 0)); transform-origin: left; transition: transform .28s cubic-bezier(.22,1,.36,1);
  opacity: var(--u-op, 1);
}
.nav a:hover { --u: 1; }
.nav a[aria-current="page"] { --u: 1; color: var(--c-nav-active, var(--c-brand-strong)); }

.nav-cta { display: none; }
.nav-tel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--c-brand); color: #fff; flex: none;
}
.nav-tel svg { width: 18px; height: 18px; }

.burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; align-items: center; }
.burger span { display: block; width: 21px; height: 2px; background: var(--c-nav-fg, var(--c-ink)); border-radius: 2px; transition: transform .3s, opacity .2s; }
.is-menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.is-menu-open .burger span:nth-child(2) { opacity: 0; }
.is-menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* header trasparente sopra l'hero */
.has-hero .navbar { background: transparent; border-color: transparent; --c-nav-fg: #fff; --c-nav-fg-soft: rgba(255,255,255,.7); --c-nav-active: #fff; }
.has-hero .brand img { filter: brightness(0) invert(1); }
/* is-stuck lo mette main.js sull'ELEMENTO <html>, mentre has-hero sta sull'<header>:
   scritte attaccate (.has-hero.is-stuck) chiedevano le due classi sullo stesso
   elemento e non corrispondevano mai. La barra restava trasparente anche dopo
   l'hero, il contenuto le passava sotto e su telefono logo e titolo di sezione si
   accavallavano. Vanno tenute come discendenti. */
.is-stuck .has-hero .navbar { background: var(--c-nav-bg, var(--c-bg)); border-color: var(--c-nav-bd, var(--c-line)); box-shadow: var(--sh-nav, 0 4px 24px rgba(0,0,0,.07)); --c-nav-fg: var(--c-ink); --c-nav-fg-soft: var(--c-ink-soft); --c-nav-active: var(--c-brand-strong); backdrop-filter: blur(10px); }
.is-stuck .has-hero .brand img { filter: var(--logo-filter, none); }
.is-stuck .navbar { box-shadow: var(--sh-nav, 0 4px 24px rgba(0,0,0,.07)); }
.brand img { filter: var(--logo-filter, none); }

/* drawer mobile */
.drawer {
  position: fixed; inset: 0; z-index: 120;
  background: var(--c-drawer, var(--c-dark)); color: #fff;
  display: flex; flex-direction: column; padding: 1.2rem 1.6rem 2rem;
  transform: translateX(100%); transition: transform .38s cubic-bezier(.22,1,.36,1);
  visibility: hidden; overflow-y: auto;
}
.drawer.is-open { transform: none; visibility: visible; }
.drawer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem; margin-bottom: 2.4rem; }
/* il marchio intero, cupola compresa: senza l'arco resta solo una scritta */
.drawer-top img { height: 76px; width: auto; flex: none; filter: brightness(0) invert(1); }
.drawer-close { width: 44px; height: 44px; display: grid; place-items: center; color: #fff; }
.drawer-close svg { width: 22px; height: 22px; }
.drawer nav { display: flex; flex-direction: column; gap: .2rem; }
.drawer nav a {
  font-family: var(--f-display); font-size: 1.75rem; padding: .55rem 0;
  border-bottom: 1px solid rgba(255,255,255,.14); color: #fff;
  opacity: 0; transform: translateX(18px);
}
.drawer.is-open nav a { animation: slideIn .45s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes slideIn { to { opacity: 1; transform: none; } }
.drawer nav a[aria-current="page"] { color: var(--c-brand-on-dark, #9fd8a4); }
.drawer-foot { margin-top: auto; padding-top: 2.2rem; font-size: .9rem; color: rgba(255,255,255,.8); }
.drawer-foot .btn { width: 100%; margin-bottom: 1.2rem; }
.drawer-foot p { margin-bottom: .4rem; }
/* secondaria di proposito: la chiamata resta l'azione principale del cassetto */
.drawer-pdf {
  display: inline-flex; align-items: center; gap: .5rem;
  /* il padding verticale porta il bersaglio da 29 a 45px: si tocca col pollice */
  padding: .5rem 0; margin-bottom: 1.1rem;
  color: rgba(255,255,255,.92); font-weight: 600; font-size: .92rem;
  transition: gap .2s, color .2s;
}
.drawer-pdf span { border-bottom: 1px solid rgba(255,255,255,.32); padding-bottom: 3px; transition: border-color .2s; }
.drawer-pdf:hover { gap: .75rem; color: #fff; }
.drawer-pdf:hover span { border-bottom-color: #fff; }
.drawer-pdf svg { width: 17px; height: 17px; flex: none; }
.drawer-social { display: flex; gap: .8rem; margin-top: 1rem; }
.drawer-social a { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; display: grid; place-items: center; }
.drawer-social svg { width: 18px; height: 18px; }

/* barra fissa mobile.
   La fascia sotto i pulsanti e' COSTANTE. Prima veniva da
   env(safe-area-inset-bottom): quel valore pero' i browser di telefono lo
   cambiano DA SOLI mentre la loro barra degli indirizzi si ritira scrollando
   (misurato: 0 -> 34px), e a ogni cambio la barra si rialzava di altrettanto,
   trascinandosi dietro icone ed etichette. E' il "gioco" di qualche
   millimetro che si vedeva scendendo e risalendo. L'altezza ora e' fissa:
   la barra non si muove piu', e i 20px di fascia sono anche l'aria che
   prima mancava fra le scritte e il bordo dello schermo. */
.quickbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--c-quick-bg, #fff); border-top: 1px solid var(--c-line);
  box-shadow: 0 -6px 24px rgba(0,0,0,.09);
  /* L'aria sta META' sopra e META' sotto la riga dei pulsanti: se si mette
     tutta sotto, le icone restano incollate al bordo superiore e sotto si
     apre un buco: la barra sembra tirata su. Il +1/-1 e' una correzione
     ottica: sotto la parola c'e' gia' lo spazio del rigo tipografico, quindi
     l'inchiostro sta un paio di pixel piu' in alto del centro geometrico. */
  padding-top: calc(var(--quick-aria, 10px) + 1px);
  padding-bottom: calc(var(--quick-aria, 10px) - 1px);
}
.quickbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: var(--quick-riga, 62px); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--c-quick-fg, var(--c-ink)); border-right: 1px solid var(--c-line);
}
.quickbar a:last-child { border-right: 0; }
.quickbar a svg { width: 19px; height: 19px; color: var(--c-brand); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; display: flex; align-items: flex-end; min-height: 88svh; margin-top: calc(-1 * var(--nav-h, 70px) - var(--topbar-h, 0px)); color: #fff; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: var(--hero-overlay, linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 38%, rgba(0,0,0,.82) 100%)); }
.hero .wrap { position: relative; z-index: 2; padding-block: clamp(5rem, 12vh, 8rem) clamp(4rem, 9vh, 6rem); }
.hero-in { max-width: 660px; }
.hero h1 { font-size: clamp(2.4rem, 1.2rem + 4.6vw, 4.4rem); color: #fff; margin-bottom: 1.1rem; text-wrap: balance; }
.hero p { font-size: clamp(1.02rem, .95rem + .5vw, 1.22rem); color: rgba(255,255,255,.92); max-width: 52ch; }
.hero .eyebrow { color: rgba(255,255,255,.9); }
.scroll-hint { position: absolute; left: 50%; bottom: 1.4rem; z-index: 2; transform: translateX(-50%); color: rgba(255,255,255,.75); animation: float 2.4s ease-in-out infinite; }
.scroll-hint svg { width: 22px; height: 22px; }
@keyframes float { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* hero interno pagine */
.phero { position: relative; display: flex; align-items: flex-end; min-height: 46vh; margin-top: calc(-1 * var(--nav-h, 70px) - var(--topbar-h, 0px)); color: #fff; overflow: hidden; }
.phero .hero-bg::after { background: var(--phero-overlay, linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.72))); }
.phero .wrap { position: relative; z-index: 2; padding-block: clamp(6rem, 14vh, 8rem) clamp(2.4rem, 5vh, 3.4rem); }
.phero h1 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.4rem); color: #fff; margin-bottom: .6rem; }
.phero p { color: rgba(255,255,255,.9); max-width: 56ch; }
.crumbs { font-size: .78rem; color: rgba(255,255,255,.72); margin-top: 1.2rem; }
.crumbs a:hover { color: #fff; text-decoration: underline; }

/* ============================================================
   COMPONENTI DI CONTENUTO
   ============================================================ */

/* striscia servizi */
.strip { background: var(--c-strip-bg, var(--c-dark)); color: var(--c-strip-fg, #fff); position: relative; z-index: 3; }
.strip ul { list-style: none; margin: 0; padding: 1.1rem 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2rem; }
.strip li { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.strip svg { width: 17px; height: 17px; color: var(--c-strip-ico, var(--c-brand-on-dark, #8fd095)); flex: none; }

/* split testo/immagine */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--rev .split-media { order: -1; }
.split-body h2 { margin-bottom: 1.2rem; }

/* card generiche */
.cards { display: grid; gap: var(--gap, 1.5rem); }
.cards--2 { grid-template-columns: 1fr; }
.cards--3 { grid-template-columns: 1fr; }
.cards--4 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--c-surface); border: 1px solid var(--c-card-bd, var(--c-line));
  border-radius: var(--r-card, var(--r-md)); overflow: hidden;
  box-shadow: var(--sh-card, none); transition: transform .28s, box-shadow .28s, border-color .28s;
  display: flex; flex-direction: column;
}
.card:hover { transform: var(--card-lift, none); box-shadow: var(--sh-card-h, var(--sh-card, none)); border-color: var(--c-card-bd-h, var(--c-card-bd, var(--c-line))); }
.card-body { padding: clamp(1.3rem, 2.4vw, 2rem); flex: 1; display: flex; flex-direction: column; }
.card-body h3 { font-size: 1.32rem; margin-bottom: .55rem; }
.card-body .badge { align-self: flex-start; margin-bottom: .9rem; }
.card-body .link-arrow, .card-body .btn { margin-top: auto; align-self: flex-start; }
.card-body p + .link-arrow, .card-body p + .btn { margin-top: 1.2rem; }
.price-tag {
  display: inline-flex; align-items: baseline; gap: .4rem; margin: 1.1rem 0 0;
  background: var(--c-brand-soft); color: var(--c-brand-strong);
  padding: .6rem 1rem; border-radius: var(--r-sm); font-weight: 700;
}
.price-tag b { font-family: var(--f-display); font-size: 1.5rem; }

/* tile specialità */
.tile { display: block; position: relative; overflow: hidden; border-radius: var(--r-card, var(--r-md)); color: #fff; }
.tile .media { border-radius: 0; }
.tile .media::after { color: #fff; }
.tile-cap { position: absolute; inset: auto 0 0 0; padding: 1.2rem 1.3rem; background: linear-gradient(180deg, transparent, rgba(0,0,0,.82)); z-index: 2; }
.tile-cap h3 { font-size: 1.18rem; color: #fff; margin-bottom: .2rem; }
.tile-cap p { font-size: .84rem; color: rgba(255,255,255,.82); margin: 0; }
.tile > .media > img { transition: transform .6s cubic-bezier(.22,1,.36,1); }
.tile:hover > .media > img { transform: scale(1.06); }

/* fascia promo */
.band { position: relative; overflow: hidden; color: #fff; text-align: center; }
.band .hero-bg::after { background: var(--band-overlay, linear-gradient(180deg, rgba(20,67,42,.9), rgba(20,67,42,.94))); }
.band .wrap { position: relative; z-index: 2; padding-block: clamp(3.4rem, 7vw, 5.4rem); }
.band h2 { color: #fff; font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3rem); }
.band p { color: rgba(255,255,255,.9); max-width: 56ch; margin-inline: auto; }
.band-price { font-family: var(--f-display); font-size: clamp(2.6rem, 1.4rem + 4vw, 4.4rem); line-height: 1; display: block; margin-bottom: .4rem; }
.band-list { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.band-list li { border: 1px solid rgba(255,255,255,.4); border-radius: var(--r-pill, 999px); padding: .45rem 1rem; font-size: .84rem; }

/* citazione */
.quote { text-align: center; }
.quote blockquote { margin: 0; font-family: var(--f-display); font-size: clamp(1.4rem, 1rem + 1.9vw, 2.3rem); line-height: 1.34; text-wrap: balance; }
.quote .mark { display: block; font-family: var(--f-display); font-size: 4rem; line-height: .6; color: var(--c-brand); margin-bottom: 1.4rem; opacity: .55; }

/* valori */
.values { display: grid; gap: var(--gap, 1.5rem); grid-template-columns: 1fr; }
.value { padding: clamp(1.4rem, 2.6vw, 2rem); background: var(--c-surface); border: 1px solid var(--c-card-bd, var(--c-line)); border-radius: var(--r-card, var(--r-md)); box-shadow: var(--sh-card, none); }
.value .ico { width: 46px; height: 46px; border-radius: var(--r-ico, 50%); background: var(--c-brand-soft); color: var(--c-brand-strong); display: grid; place-items: center; margin-bottom: 1.1rem; }
.value .ico svg { width: 22px; height: 22px; }
.value h3 { font-size: 1.14rem; margin-bottom: .4rem; }
.value p { font-size: .93rem; color: var(--c-ink-soft); margin: 0; }

/* recensioni */
.review { padding: clamp(1.4rem, 2.6vw, 2rem); background: var(--c-surface); border: 1px solid var(--c-card-bd, var(--c-line)); border-radius: var(--r-card, var(--r-md)); box-shadow: var(--sh-card, none); }
.stars { display: flex; gap: 2px; margin-bottom: 1rem; color: #e8a33d; }
.stars svg { width: 17px; height: 17px; }
.review p { font-size: .97rem; }
.review footer { font-size: .84rem; color: var(--c-ink-soft); font-weight: 600; }
.ratings { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.4rem; margin-bottom: 2.6rem; }
.rating { text-align: center; }
.rating b { display: block; font-family: var(--f-display); font-size: 2.1rem; line-height: 1; color: var(--c-brand-strong); }
.rating span { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-soft); }

/* ============================================================
   MENÙ
   ============================================================ */
.notice {
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--c-brand-soft); border: 1px solid var(--c-brand);
  border-radius: var(--r-sm); padding: 1rem 1.2rem; font-size: .9rem; color: var(--c-ink);
}
.notice svg { width: 19px; height: 19px; color: var(--c-brand-strong); flex: none; margin-top: 2px; }
.notice p { margin: 0; }

.highlights { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 2rem; }
.hl { padding: 1.4rem 1.5rem; border-radius: var(--r-card, var(--r-md)); background: var(--c-dark); color: #fff; }
.hl span { display: block; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; opacity: .72; margin-bottom: .5rem; }
.hl b { font-family: var(--f-display); font-size: 1.5rem; display: block; line-height: 1.2; }
.hl small { display: block; font-size: .84rem; opacity: .78; margin-top: .35rem; }
.hl:nth-child(2) { background: var(--c-brand); }
.hl:nth-child(3) { background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-line); }
.hl:nth-child(3) span { color: var(--c-brand-strong); opacity: 1; }
.hl:nth-child(3) small { color: var(--c-ink-soft); }

/* --catnav-top e' la stessa misura usata da top: serve a motion.css per sapere
   di quanto alzare la barra quando l'header si nasconde. Tenerle allineate. */
/* La barra si appoggia esattamente sotto l'header e ha lo stesso fondo: senza
   un segno di stacco le due si saldano in un unico blocco crema e le
   linguette sembrano schiacciate contro il bordo dello schermo. Un filo
   chiaro in cima e piu' respiro dentro bastano a farla leggere come un
   ripiano appoggiato, non come un pezzo dell'header. */
.catnav {
  --catnav-top: var(--nav-h, 70px);
  position: sticky; top: var(--catnav-top); z-index: 60;
  background: var(--c-bg); border-bottom: 1px solid var(--c-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 14px -12px rgba(44,21,13,.5);
}
.catnav-in { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: .95rem 0; scroll-snap-type: x proximity; }
.catnav-in::-webkit-scrollbar { display: none; }
.catnav a {
  flex: none; scroll-snap-align: start; padding: .5rem .95rem; border-radius: var(--r-pill, 999px);
  font-size: .86rem; font-weight: 600; white-space: nowrap; color: var(--c-ink-soft);
  border: 1px solid var(--c-line); transition: all .2s;
}
.catnav a:hover { color: var(--c-brand-strong); border-color: var(--c-brand); }
.catnav a.is-active { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }

.mcat { padding-top: clamp(2.6rem, 5vw, 4rem); scroll-margin-top: calc(var(--nav-h, 70px) + 68px); }
.mcat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.4rem; border-bottom: 2px solid var(--c-dark); padding-bottom: .8rem; margin-bottom: 1.6rem; }
.mcat-head h2 { margin: 0; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.1rem); }
.mcat-head .eyebrow { margin: 0; }
.mlist { display: grid; gap: .2rem; grid-template-columns: 1fr; }
/* Senza min-width:0 sulla voce e senza flex-wrap sulla riga, il minimo
   incomprimibile (nome + tag + puntini + prezzo, tutti nowrap) alzava la traccia
   1fr della griglia a 401px dentro un contenitore da 313px, e su telefono
   trascinava di lato l'intera pagina. Lo faceva "La nostra Dietro L'Angolo",
   che porta due tag ed e' la voce piu' larga del menu'.
   Il nome NON va ristretto con min-width:0: la parola piu' lunga uscirebbe dal
   suo box e finirebbe sotto i tag. Va invece mandata a capo la riga: quando non
   ci sta, puntini e prezzo scendono sotto e la lineetta resta intera. */
.mitem { padding: .95rem 0; border-bottom: 1px dashed var(--c-line); min-width: 0; }
.mitem-top { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.mitem-name { font-family: var(--f-display); font-weight: 600; font-size: 1.06rem; }
.mitem-dots { flex: 1; border-bottom: 1px dotted var(--c-line); transform: translateY(-4px); min-width: 18px; }
.mitem-price { font-family: var(--f-display); font-weight: 700; font-size: 1.06rem; color: var(--c-brand-strong); white-space: nowrap; margin-left: auto; }
.mitem-desc { font-size: .89rem; color: var(--c-ink-soft); margin: .25rem 0 0; max-width: 62ch; }
.mitem-tags { display: inline-flex; gap: .35rem; margin-left: .1rem; }
.mtag { font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .18rem .42rem; border-radius: 3px; background: var(--c-brand-soft); color: var(--c-brand-strong); white-space: nowrap; }
.mtag--pic { background: #fdeaea; color: #b3261e; }
.mtag--casa { background: var(--c-brand); color: #fff; }
.mitem.is-casa { background: var(--c-brand-soft); border-radius: var(--r-sm); padding-inline: 1rem; border-bottom-color: transparent; }
.mnote { font-size: .86rem; color: var(--c-ink-soft); font-style: italic; margin-top: 1.2rem; }

/* numerini degli allergeni accanto al nome, come sul menù stampato */
.mall { font-size: .6em; font-family: var(--f-body); font-weight: 700; letter-spacing: .12em; color: var(--c-brand-strong); margin-left: .45em; white-space: nowrap; }

/* sotto-sezioni di una categoria (In bottiglia / Alla spina / Gin / Amari...) */
.mgroup { font-family: var(--f-body); font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--c-brand-strong); margin: 2.2rem 0 .4rem; padding-bottom: .5rem; border-bottom: 1px solid var(--c-line); }
.mgroup:first-of-type { margin-top: .4rem; }
.mgroup-nota { font-size: .86rem; color: var(--c-ink-soft); font-style: italic; margin: .2rem 0 .6rem; }

.impasti { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin-bottom: 1.8rem; }
.impasto { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem 1.1rem; border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-surface); font-size: .92rem; }
.impasto b { font-weight: 600; }
.impasto span { font-size: .82rem; color: var(--c-brand-strong); font-weight: 700; }

/* accordion allergeni */
.acc { border: 1px solid var(--c-line); border-radius: var(--r-card, var(--r-md)); overflow: hidden; background: var(--c-surface); }
.acc-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem; font-weight: 600; text-align: left; }
.acc-btn svg { width: 18px; height: 18px; transition: transform .3s; flex: none; }
.acc-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.acc-panel { display: none; padding: 0 1.4rem 1.4rem; }
.acc-panel.is-open { display: block; }
.acc-panel ol { margin: 0; padding-left: 1.2rem; columns: 1; }
.acc-panel li { margin-bottom: .7rem; font-size: .88rem; }
.acc-panel li b { display: block; }
.acc-panel li span { color: var(--c-ink-soft); }

/* ============================================================
   GALLERIA
   ============================================================ */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2.4rem; }
.filters button { padding: .55rem 1.1rem; border-radius: var(--r-pill, 999px); border: 1px solid var(--c-line); font-size: .88rem; font-weight: 600; color: var(--c-ink-soft); transition: all .2s; }
.filters button:hover { border-color: var(--c-brand); color: var(--c-brand-strong); }
.filters button.is-active { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }

.grid-gal { columns: 2; column-gap: var(--gap, 1.5rem); }
.gitem { break-inside: avoid; margin-bottom: var(--gap, 1.5rem); display: block; width: 100%; position: relative; border-radius: var(--r-media, var(--r-md)); overflow: hidden; transition: opacity .3s, transform .3s; }
.gitem.is-hidden { display: none; }
.gitem .media { border-radius: 0; }
.gitem::after { content: ''; position: absolute; inset: 0; background: rgba(20,67,42,.35); opacity: 0; transition: opacity .3s; z-index: 2; pointer-events: none; }
.gitem:hover::after { opacity: 1; }
.gitem .zoom-ico { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.94); display: grid; place-items: center; opacity: 0; transform: scale(.8); transition: all .3s; z-index: 3; }
.gitem:hover .zoom-ico { opacity: 1; transform: none; }
.gitem .zoom-ico svg { width: 20px; height: 20px; color: var(--c-dark); }
/* segnaposto: niente lente e niente velo, non c'è nulla da ingrandire */
.gitem--attesa { cursor: default; }
.gitem--attesa .zoom-ico, .gitem--attesa::after { display: none; }

.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(8,16,11,.95); display: none; align-items: center; justify-content: center; padding: 3.5rem 1rem 5rem; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: min(96vw, 1200px); max-height: 82vh; width: auto; object-fit: contain; border-radius: 4px; }
.lb-cap { position: absolute; left: 0; right: 0; bottom: 1.4rem; text-align: center; color: rgba(255,255,255,.86); font-size: .9rem; padding-inline: 1rem; }
.lb-cap b { display: block; color: #fff; margin-bottom: .2rem; }
.lb-btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; transition: background .2s; }
.lb-btn:hover { background: rgba(255,255,255,.26); }
.lb-btn svg { width: 22px; height: 22px; }
.lb-close { top: 1rem; right: 1rem; }
.lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* ============================================================
   CONTATTI
   ============================================================ */
.ccards { display: grid; gap: var(--gap, 1.5rem); grid-template-columns: 1fr; }
.ccard { display: block; padding: clamp(1.5rem, 3vw, 2.1rem); background: var(--c-surface); border: 1px solid var(--c-card-bd, var(--c-line)); border-radius: var(--r-card, var(--r-md)); box-shadow: var(--sh-card, none); transition: transform .28s, box-shadow .28s, border-color .28s; }
.ccard:hover { transform: var(--card-lift, none); box-shadow: var(--sh-card-h, var(--sh-card, none)); border-color: var(--c-brand); }
.ccard .ico { width: 46px; height: 46px; border-radius: var(--r-ico, 50%); background: var(--c-brand-soft); color: var(--c-brand-strong); display: grid; place-items: center; margin-bottom: 1.1rem; }
.ccard .ico svg { width: 21px; height: 21px; }
.ccard h3 { font-size: 1.02rem; margin-bottom: .5rem; }
.ccard .big-val { font-family: var(--f-display); font-size: 1.32rem; color: var(--c-brand-strong); display: block; margin-bottom: .35rem; }
.ccard p { font-size: .9rem; color: var(--c-ink-soft); margin: 0; }

.map-wrap { border-radius: var(--r-card, var(--r-md)); overflow: hidden; border: 1px solid var(--c-line); }
.map-wrap iframe { width: 100%; height: 340px; border: 0; filter: var(--map-filter, none); }
/* riquadro al posto della mappa: Google viene contattato solo al click.
   Stessa altezza dell'iframe, cosi' lo scambio non sposta la pagina. */
.map-ask {
  height: 340px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .85rem;
  padding: 1.6rem; text-align: center; background: var(--c-bg-alt);
}
.map-ask > svg { width: 30px; height: 30px; color: var(--c-brand); }
.map-ask-addr { margin: 0; font-size: .96rem; line-height: 1.45; }
.map-ask-note { margin: 0; font-size: .78rem; color: var(--c-ink-soft); max-width: 36ch; }

.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--c-line); font-size: .93rem; }
.hours th { font-weight: 600; width: 42%; }
.hours td { color: var(--c-ink-soft); }
.hours tr.is-today { background: var(--c-brand-soft); }
.hours tr.is-today th, .hours tr.is-today td { color: var(--c-brand-strong); font-weight: 700; }


.svc { display: flex; flex-wrap: wrap; gap: .6rem; }
.svc span { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border: 1px solid var(--c-line); border-radius: var(--r-pill, 999px); font-size: .86rem; background: var(--c-surface); }
.svc svg { width: 16px; height: 16px; color: var(--c-brand); flex: none; }

/* ============================================================
   FOOTER
   ============================================================ */
.cta-band { position: relative; overflow: hidden; color: #fff; text-align: center; }
.cta-band .hero-bg::after { background: var(--cta-overlay, linear-gradient(180deg, rgba(20,67,42,.88), rgba(20,67,42,.94))); }
.cta-band .wrap { position: relative; z-index: 2; padding-block: clamp(3rem, 6vw, 4.6rem); }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.88); max-width: 52ch; margin-inline: auto; }

.site-footer { background: var(--c-dark); color: rgba(255,255,255,.76); font-size: .92rem; }
.foot-grid { display: grid; gap: 2.4rem; grid-template-columns: 1fr; padding-block: clamp(3rem, 6vw, 4.6rem) 2.4rem; }
.foot-col h4 { font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-bottom: 1.2rem; font-family: var(--f-body); font-weight: 700; }
.foot-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin-bottom: .6rem; }
.foot-logo { height: 74px; width: auto; filter: brightness(0) invert(1); margin-bottom: 1.2rem; }
.foot-social { display: flex; gap: .7rem; margin-top: 1.4rem; }
.foot-social a { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; display: grid; place-items: center; transition: all .22s; }
.foot-social a:hover { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.foot-social svg { width: 17px; height: 17px; }

/* Icone social in attesa dei due profili nuovi: restano dove sono, ma non
   portano da nessuna parte. Un pelo piu' scariche e senza reazione al tocco,
   cosi' si capisce che non sono ancora attive invece di sembrare rotte.
   Quando arrivano gli account basta rimettere href e togliere questa classe. */
.is-attesa { cursor: default; opacity: .45; }
.topbar-ico.is-attesa:hover { opacity: .45; }
.foot-social a.is-attesa:hover,
.drawer-social a.is-attesa:hover { background: transparent; border-color: inherit; color: inherit; }
.foot-tel { font-family: var(--f-display); font-size: 1.36rem; color: #fff; display: inline-block; margin-bottom: .4rem; }
.foot-hours { width: 100%; border-collapse: collapse; font-size: .86rem; }
.foot-hours th, .foot-hours td { padding: .34rem 0; text-align: left; font-weight: 400; }
.foot-hours td { text-align: right; }
.foot-hours tr.is-today th, .foot-hours tr.is-today td { color: #fff; font-weight: 700; }
.foot-bar { border-top: 1px solid rgba(255,255,255,.13); padding-block: 1.4rem; font-size: .8rem; color: rgba(255,255,255,.55); display: flex; flex-direction: column; gap: .6rem; text-align: center; }
.foot-bar nav { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; }
/* Firma dello studio. Non serve altro layout: la foot-bar e' gia' una
   colonna centrata su telefono e una riga con space-between da 900px in su,
   quindi il copyright resta a sinistra e la firma va a destra da sola. */
.foot-credit { white-space: nowrap; }
.foot-credit b { font-weight: 600; color: rgba(255,255,255,.78); }

/* ============================================================
   ANIMAZIONI
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.is-in { opacity: 1; transform: none; }

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

/* ============================================================
   BREAKPOINT
   ============================================================ */
@media (min-width: 600px) {
  .cards--2 { grid-template-columns: repeat(2, 1fr); }
  .cards--3 { grid-template-columns: repeat(2, 1fr); }
  .brand-txt b { font-size: 1.12rem; }
  .brand-txt span { font-size: .62rem; letter-spacing: .22em; }
  .values { grid-template-columns: repeat(2, 1fr); }
  .ccards { grid-template-columns: repeat(3, 1fr); }
  .highlights { grid-template-columns: repeat(3, 1fr); }
  .mlist { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-gal { columns: 2; }
  .acc-panel ol { columns: 2; column-gap: 2rem; }
}

@media (min-width: 900px) {
  .cards--3 { grid-template-columns: repeat(3, 1fr); }
  .cards--4 { grid-template-columns: repeat(4, 1fr); }
  .values { grid-template-columns: repeat(4, 1fr); }
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide { grid-template-columns: 1.15fr .85fr; }
  .grid-gal { columns: 3; }
  .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
  .map-wrap iframe, .map-ask { height: 440px; }
  .impasti { grid-template-columns: repeat(4, 1fr); }
  .mlist--2col { grid-template-columns: repeat(2, 1fr); column-gap: 3.4rem; }
  .foot-bar { flex-direction: row; justify-content: space-between; text-align: left; }
}

@media (min-width: 1024px) {
  :root { --nav-h: 88px; --topbar-h: 38px; }
  .topbar { display: block; }
  .nav { display: flex; }
  .nav-cta { display: inline-flex; }
  .navbar .lang { display: inline-flex; }
  .nav-tel, .burger { display: none; }
  .quickbar { display: none; }
  body { padding-bottom: 0 !important; }
  .brand img { height: 44px; }
  .is-stuck .navbar .wrap { height: 70px; }
  .is-stuck .brand img { height: 36px; }
  /* qui l'header agganciato e' alto 109px (topbar 38 + nav 70 + bordo), non 88:
     senza questa riga la barra categorie si infilava sotto e l'header ne
     copriva 21px, tagliando le pastiglie. 108 lascia 1px di sovrapposizione,
     come su telefono, cosi' il contenuto non filtra nella fessura. */
  .catnav { --catnav-top: 108px; }
  .grid-gal { columns: 4; }
  .hero { min-height: 92vh; }
}

@media (max-width: 1023px) {
  /* La geometria della barra fissa in basso sta tutta qui, in un posto solo:
     l'altezza vera e lo spazio che la pagina le riserva vengono dagli stessi
     numeri e non possono piu' scostarsi. Prima erano due valori scritti a
     mano in punti diversi (62px di riserva contro una barra alta 63px, piu'
     l'incavo di sistema che si aggiungeva solo alla barra) e il footer
     finiva sotto la barra. Il +1px e' il bordo superiore. */
  :root {
    --quick-riga: 62px;   /* il bersaglio da toccare */
    --quick-aria: 10px;   /* aria sopra E sotto, non solo sotto */
    --quick-h: calc(var(--quick-riga) + var(--quick-aria) * 2 + 1px);
  }
  body { padding-bottom: var(--quick-h); }
  .catnav { --catnav-top: 70px; }
}