/* ============================================================
   TEMA C — "LA BOCCA DEL FORNO"
   ------------------------------------------------------------
   L'identità nasce da un solo gesto: stare davanti al forno a
   legna. Crema come la farina e la crosta del pane, bruno
   carbonizzato come l'interno del forno di notte, rosso pomodoro
   come segnale, ocra come la brace. L'ARCO del logo è usato come
   SOGLIA, non come decoro: si entra nel sito da un'insegna a
   cupola, si entra nella cucina da una sezione notturna, si entra
   nel menù da tre piccole bocche di forno. Mai due archi che si
   contendono la stessa scena.

   FONT — restano Fraunces + Karla, ma usati davvero:
   · Fraunces è QUI il font giusto: è un serif "soft & wonky"
     disegnato per sembrare insegna dipinta a mano — premium
     artigianale, mai lusso. Prima però era importato senza
     corsivi e senza i pesi estremi: ora carico l'intero asse
     variabile (300–900, corsivo compreso) e spingo SOFT=100,
     WONK=1 e il peso 900 sui titoli, il corsivo vero sugli
     accenti e sui prezzi. È lo stesso font, ma con la voce alta.
   · Karla resta al servizio: caldo, leggermente irregolare,
     perfetto per etichette, occhielli e corpo. Fallback dignitosi:
     Georgia/'Iowan Old Style' per il serif, system-ui per il sans.
   ============================================================ */

/* I font stanno in assets/css/font.css, ospitati su questo dominio. */

:root {
  /* ---- colore: terracotta e pomodoro, niente tinte fredde ---- */
  --c-bg:            #FBF2E3;   /* crema di farina */
  --c-bg-alt:        #F4E3CC;   /* sabbia cotta */
  --c-surface:       #FFFBF2;   /* panna */
  --c-ink:           #2E1A10;   /* espresso, mai nero */
  --c-ink-soft:      #6F5140;   /* AA su crema e su sabbia */
  --c-line:          #E5CBAC;
  --c-brand:         #C8381D;   /* pomodoro maturo */
  --c-brand-strong:  #96250C;   /* cotto scuro — 7.4:1 su crema */
  --c-brand-soft:    #F8E2D1;
  --c-brand-on-dark: #F5A97E;
  --c-dark:          #2C150D;   /* l'interno del forno, di notte */
  --c-on-dark:       #FBF2E3;
  --c-ocra:          #E08A3C;   /* brace */
  --c-ember:         #F9C89B;   /* riflesso della brace */

  /* grana di carta (SVG inline, nessun file nuovo) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");

  /* ---- tipografia ---- */
  --f-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --f-body:    'Karla', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --fw-display: 700;
  --ls-display: -.02em;
  --ls-eyebrow: .18em;
  --lh-body: 1.68;

  /* ---- forma: morbida, da bottega, mai a pillola ---- */
  --r-sm: 6px;  --r-md: 12px;  --r-card: 14px;  --r-media: 12px;
  --r-btn: 9px; --r-pill: 7px; --r-navlink: 8px; --r-ico: 12px;
  --sh-card:   0 10px 26px rgba(44,21,13,.08);
  --sh-card-h: 0 22px 46px rgba(44,21,13,.16);
  --sh-nav:    0 6px 26px rgba(44,21,13,.12);
  --sh-btn:    0 8px 20px rgba(200,56,29,.28);
  --sh-btn-h:  0 14px 30px rgba(200,56,29,.36);
  --card-lift: translateY(-5px);
  --btn-lift:  translateY(-2px);

  /* ---- ritmo ---- */
  --wrap: 1200px;
  --sec-y: 100px;
  --gap: 1.7rem;

  /* ---- nav ---- */
  --c-nav-bg: rgba(251,242,227,.92);
  --c-nav-bd: var(--c-line);
  --c-nav-active: var(--c-brand-strong);
  --c-quick-bg: #FFFBF2;

  /* ---- bottoni ---- */
  --c-btn-bg: #C8381D;  --c-btn-fg: #FFF4E6;  --c-btn-bg-h: #96250C;
  --c-btn2-bg: transparent; --c-btn2-fg: #2E1A10; --c-btn2-bd: #C9A986;
  --c-btn2-bg-h: #2C150D;   --c-btn2-fg-h: #FBF2E3;

  /* ---- overlay ---- */
  --hero-overlay:  linear-gradient(180deg, rgba(44,21,13,.55) 0%, rgba(44,21,13,.06) 42%, rgba(44,21,13,.34) 100%);
  /* tarato sulle foto in pieno sole (piatti chiari, tovaglie chiare): con i
     valori precedenti (.38/.5/.88) il lead del menù scendeva a 3,84:1 su
     mobile, sotto la soglia AA di 4,5. */
  --phero-overlay: linear-gradient(180deg, rgba(44,21,13,.48) 0%, rgba(44,21,13,.62) 52%, rgba(30,12,7,.9) 100%);
  --band-overlay:  radial-gradient(110% 130% at 50% 118%, rgba(224,138,60,.42), transparent 52%),
                   linear-gradient(180deg, rgba(44,21,13,.88), rgba(30,12,7,.93));
  --cta-overlay:   radial-gradient(110% 130% at 50% 118%, rgba(224,138,60,.34), transparent 50%),
                   linear-gradient(180deg, rgba(44,21,13,.87), rgba(30,12,7,.94));
  --map-filter: sepia(.24) saturate(.92) contrast(1.02);
}

/* ============================================================
   FONDO E FINITURE GLOBALI
   ============================================================ */
body {
  background-image:
    linear-gradient(180deg, rgba(255,252,244,.9) 0%, rgba(255,252,244,0) 420px),
    radial-gradient(circle at 10% 6%,  rgba(224,138,60,.09), transparent 40%),
    radial-gradient(circle at 92% 58%, rgba(200,56,29,.06),  transparent 44%);
  /* niente background-attachment: fixed, costringe il telefono a
     ridisegnare tutto lo sfondo a ogni fotogramma di scroll */
}

::selection { background: #96250C; color: #FFE9D2; }

/* scrollbar calda, sottile */
html { scrollbar-color: #B96A3C #F0DFC8; }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #F0DFC8; }
::-webkit-scrollbar-thumb { background: #B96A3C; border-radius: 8px; border: 3px solid #F0DFC8; }
::-webkit-scrollbar-thumb:hover { background: #96250C; }

/* ============================================================
   VOCE TIPOGRAFICA
   ============================================================ */
h1, h2, h3, h4 { font-variation-settings: 'SOFT' 100, 'WONK' 1; font-optical-sizing: auto; }
h1, h2.big { font-weight: 900; letter-spacing: -.022em; }
h1 { line-height: 1; }
h2.big { font-size: clamp(2.1rem, 1.2rem + 3vw, 3.5rem); line-height: 1.04; }
h2.mid { font-size: clamp(1.7rem, 1.1rem + 2vw, 2.5rem); font-weight: 800; }
h2 em, h3 em { font-style: italic; font-weight: 700; color: var(--c-brand); }
.lead { font-weight: 500; }
.small, .crumbs, .topbar { font-variant-numeric: oldstyle-nums; }

/* occhiello con la cupolina del forno */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--c-brand-strong); font-weight: 800; font-size: .71rem;
}
.eyebrow::before {
  content: ''; width: 9px; height: 8px; flex: none;
  border-radius: 50% 50% 1px 1px / 88% 88% 1px 1px;
  background: var(--c-brand);
}
.center .eyebrow { justify-content: center; }
.center .eyebrow::after {
  content: ''; width: 9px; height: 8px; flex: none;
  border-radius: 50% 50% 1px 1px / 88% 88% 1px 1px;
  background: var(--c-brand);
}
.sec--dark .eyebrow, .band .eyebrow, .cta-band .eyebrow, .sticky-sec .eyebrow { color: var(--c-brand-on-dark); }
.sec--dark .eyebrow::before, .band .eyebrow::before, .cta-band .eyebrow::before,
.sticky-sec .eyebrow::before, .band .eyebrow::after, .cta-band .eyebrow::after { background: var(--c-ocra); }

/* numeri di sezione in filigrana: cifre enormi, corsive, solo contorno */
.sec[data-num] > .wrap { position: relative; }
.sec[data-num] > .wrap::before {
  content: attr(data-num); position: absolute; right: -.04em; top: -3.2rem;
  font-family: var(--f-display); font-style: italic; font-weight: 900;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  font-size: clamp(6.5rem, 4rem + 9vw, 12rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(200,56,29,.26);
  pointer-events: none; z-index: 0;
}

/* ============================================================
   L'ARCO COME SOGLIA — le immagini verticali chiave
   ============================================================ */
.media--45, .media--34 { border-radius: 50% 50% 14px 14px / 22% 22% 3% 3%; }
.sticky-right .media { border-radius: 50% 50% 16px 16px / 19% 19% 3% 3%; }
.media--11 { border-radius: 50% 50% 16px 16px / 30% 30% 4% 4%; }

/* Segnaposto immagini coerente col tema. Il riquadro e' un'istruzione per il
   cliente — "qui va la vostra foto" — quindi va letto: a .72 il cotto su pesca
   dava 3,66:1 e su un testo di 11,5px serve 4,5:1. A .88 sta a 4,97:1. */
.media { background: #F1DCC0; }
.media::after {
  color: #96250C; opacity: .88;
  background: repeating-linear-gradient(45deg, transparent 0 14px, rgba(150,37,12,.08) 14px 28px);
}
.sticky-sec .media { background: #472313; }
.sticky-sec .media::after { color: var(--c-ember); background: repeating-linear-gradient(45deg, transparent 0 14px, rgba(249,200,155,.06) 14px 28px); }

/* ============================================================
   HERO — L'INSEGNA: cartiglio a cupola con sigillo
   ============================================================ */
.hero { display: block; min-height: 0; }
.hero .hero-bg { position: relative; inset: auto; height: min(74vh, 660px); }
.hero .hero-bg::after {
  background: linear-gradient(180deg, rgba(44,21,13,.55) 0%, rgba(44,21,13,.08) 44%, rgba(44,21,13,.4) 100%);
}
.hero > .wrap {
  position: relative; z-index: 3;
  width: min(100% - 2.2rem, 980px);
  margin-top: clamp(-175px, -16vw, -96px);
  background:
    var(--grain),
    linear-gradient(180deg, #FFFCF4 0%, #FBF2E3 100%);
  color: var(--c-ink);
  border-radius: 50% 50% 20px 20px / clamp(58px, 15vw, 175px) clamp(58px, 15vw, 175px) 20px 20px;
  padding: clamp(4.8rem, 9vw, 7rem) clamp(1.4rem, 5vw, 4.5rem) clamp(2.6rem, 5vw, 3.6rem);
  text-align: center;
  box-shadow: 0 30px 70px rgba(44,21,13,.24);
  outline: 1px solid rgba(150,37,12,.30);
  outline-offset: -13px;
}
/* il sigillo: tondo pomodoro con la cupola del logo, appeso all'apice */
.hero > .wrap::before {
  content: ''; position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 78px; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #D8492B, #96250C 78%);
  border: 6px solid #FFFBF2;
  box-shadow: 0 12px 28px rgba(30,12,7,.35);
}
.hero > .wrap::after {
  content: ''; position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 36px; background: #FFE9D2;
  -webkit-mask: url('../img/logo-mark.png') center / contain no-repeat;
          mask: url('../img/logo-mark.png') center / contain no-repeat;
}
.hero-in { max-width: 56rem; margin-inline: auto; border: 0 !important; padding: 0 !important; }
.hero .hero-in::before { display: none; }
.hero h1 {
  color: var(--c-ink); margin-bottom: 1.1rem;
  font-size: clamp(2.55rem, 1.4rem + 4.8vw, 4.9rem);
}
.hero p { color: var(--c-ink-soft); max-width: 54ch; margin-inline: auto; }
.hero .eyebrow { color: var(--c-brand-strong); justify-content: center; }
.hero .eyebrow::before, .hero .eyebrow::after {
  content: ''; width: 9px; height: 8px; flex: none;
  border-radius: 50% 50% 1px 1px / 88% 88% 1px 1px; background: var(--c-brand);
}
.hero .btn-row { justify-content: center; }
.hero .btn--onDark { background: transparent; color: var(--c-ink); border: 1px solid #C9A986; backdrop-filter: none; }
.hero .btn--onDark:hover { background: var(--c-dark); color: var(--c-bg); border-color: var(--c-dark); }
.scroll-hint { display: none; }

/* ============================================================
   HEADER
   ============================================================ */
.has-hero .navbar { --c-nav-fg: #FFF4E6; --c-nav-fg-soft: rgba(255,244,230,.72); --c-nav-active: #FFF4E6; }
.nav a { font-weight: 600; }
.nav a::after { height: 2px; background: var(--c-brand); bottom: .34rem; }
.topbar { background: #24100A; }
.dot.is-open { background: var(--c-ocra); box-shadow: 0 0 0 0 rgba(224,138,60,.7); }
.brand-txt b { font-variation-settings: 'SOFT' 100, 'WONK' 1; font-weight: 800; }
.nav-tel { background: var(--c-brand); }
.drawer { --c-drawer: #2C150D; }
.drawer nav a { font-variation-settings: 'SOFT' 100, 'WONK' 1; }
.quickbar { border-top: 1px solid var(--c-line); }
.quickbar a svg { color: var(--c-brand); }

/* ============================================================
   STRISCIA SERVIZI — filetto da testata stampata
   ============================================================ */
.strip { background: transparent; }
.strip ul {
  margin-top: 2.6rem; padding: 1.05rem 0;
  border-block: 4px double var(--c-line);
  gap: .7rem 2.4rem; background: transparent;
}
.strip li { color: var(--c-ink-soft); font-size: .74rem; letter-spacing: .13em; font-weight: 700; }
.strip svg { color: var(--c-brand); }

/* ============================================================
   CARD, BADGE, PREZZI
   ============================================================ */
.card, .value, .review, .ccard { border-color: var(--c-line); background: var(--c-surface); }
.card { overflow: hidden; }
.card .media { border-radius: 0; }
.card-body h3 { font-size: 1.5rem; font-weight: 800; }
.value .ico, .ccard .ico {
  background: var(--c-brand-soft); color: var(--c-brand-strong);
  border-radius: 50% 50% 10px 10px / 32% 32% 6% 6%;
}
.badge {
  background: var(--c-brand); color: #FFF4E6; border-radius: 5px;
  font-weight: 800; letter-spacing: .11em; padding: .36rem .72rem;
}
.badge--solid { background: var(--c-dark); }
.badge--out { background: transparent; border-color: var(--c-line); color: var(--c-ink-soft); }

/* etichetta prezzo come scontrino della bottega */
.price-tag {
  background: #FFFDF7; color: var(--c-brand-strong);
  border: 1px dashed #D89A72; border-radius: 8px; padding: .55rem 1.1rem;
}
.price-tag b {
  font-family: var(--f-display); font-style: italic; font-weight: 900;
  font-variation-settings: 'SOFT' 100, 'WONK' 1; font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
}
.btn { font-weight: 700; letter-spacing: .015em; }
.btn--primary { box-shadow: var(--sh-btn), inset 0 1px 0 rgba(255,255,255,.28); }
.link-arrow { color: var(--c-brand-strong); border-color: var(--c-brand); border-bottom-width: 2px; }

/* recensioni: virgoletta in filigrana + voti in corsivo */
.review::before {
  content: '\201C'; position: absolute; top: .3rem; left: 1.1rem;
  font-family: var(--f-display); font-style: italic; font-weight: 900;
  font-size: 4.4rem; line-height: 1; color: var(--c-brand); opacity: .16;
  pointer-events: none;
}
.stars { color: var(--c-ocra); }
.rating b {
  font-family: var(--f-display); font-style: italic; font-weight: 900;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  font-size: 2.6rem; color: var(--c-brand);
}

/* ============================================================
   LA NOTTE NEL FORNO — sezione specialità sticky, scura
   ============================================================ */
.sticky-sec {
  background:
    var(--grain),
    radial-gradient(120% 85% at 50% 112%, rgba(224,138,60,.30), rgba(200,56,29,.10) 42%, transparent 68%),
    radial-gradient(90% 60% at 8% -8%, rgba(200,56,29,.14), transparent 55%),
    #2C150D;
  color: #F6E8D4;
}
.sticky-sec h2 { color: #FBF2E3; }
.sticky-sec .lead { color: rgba(251,242,227,.75); }
.sticky-sec .sticky-nav li { border-top-color: rgba(251,242,227,.16); opacity: .5; }
.sticky-sec .sticky-nav li:last-child { border-bottom-color: rgba(251,242,227,.16); }
.sticky-sec .sticky-nav li.is-on { opacity: 1; }
.sticky-sec .sticky-nav b {
  font-family: var(--f-display); font-style: italic; font-weight: 900;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  font-size: 1.6rem; color: var(--c-ocra); width: 2.9rem; padding-top: 0;
}
.sticky-sec .sticky-nav h3 { font-size: 1.42rem; color: #FBF2E3; transition: color .4s; }
.sticky-sec .sticky-nav li.is-on h3 { color: var(--c-brand-on-dark); font-style: italic; }
.sticky-sec .sticky-nav p { color: rgba(251,242,227,.68); }
.sticky-right a { box-shadow: 0 24px 55px rgba(0,0,0,.45); }
.sticky-sec .sticky-cap { background: linear-gradient(180deg, transparent, rgba(24,9,5,.92)); }
.sticky-sec .sticky-cap span { color: var(--c-ember); font-weight: 600; }

/* ============================================================
   MARQUEE — nastro pomodoro inclinato, pieno/contorno alternati
   ============================================================ */
div.marquee {
  position: relative; z-index: 6;
  background: linear-gradient(180deg, #D2431F, #B02D14);
  border-block: 0; padding-block: 1.15rem;
  transform: rotate(-1.4deg) scale(1.02);
  margin-block: -1.4rem -1.5rem;
  box-shadow: 0 16px 38px rgba(150,37,12,.28);
}
.marquee .marquee-track > span {
  color: #FFE9D2; font-style: italic; font-weight: 800;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.9rem);
}
.marquee .marquee-track > span:nth-child(even) {
  font-style: normal; color: transparent;
  -webkit-text-stroke: 1.2px #FFDDBC;
}
.marquee .marquee-track > span::after { color: var(--c-ember); }

/* ============================================================
   FASCE SCURE (Giro Pizza / CTA)
   ============================================================ */
.band h2, .cta-band h2 { font-weight: 900; }
.band-price {
  font-style: italic; color: var(--c-ember);
  font-size: clamp(3rem, 1.6rem + 4.6vw, 5rem);
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
}
.band-list li {
  border: 1px solid rgba(245,169,126,.5); color: #FFE9D2;
  border-radius: 50% 50% 9px 9px / 55% 55% 9px 9px;
  padding: .6rem 1.15rem .45rem; font-weight: 600;
}
.cta-band { border-radius: 50% 50% 0 0 / 60px 60px 0 0; overflow: hidden; }

/* ============================================================
   CITAZIONE — la volta del forno (chi-siamo)
   ============================================================ */
section.sec--dark.quote {
  background:
    var(--grain),
    radial-gradient(110% 120% at 50% 120%, rgba(224,138,60,.28), transparent 55%),
    #2C150D;
  border-radius: 50% 50% 0 0 / 110px 110px 0 0;
  margin-top: 1rem;
}
.quote blockquote { font-style: italic; font-weight: 600; color: #FBF2E3; line-height: 1.4; }
.quote .mark { color: var(--c-ocra); opacity: .95; font-size: 4.6rem; }

/* ============================================================
   MENÙ — deve sembrare un bel menù stampato
   ============================================================ */
/* tre bocche di forno all'ingresso */
.hl {
  border-radius: 50% 50% 14px 14px / 30% 30% 14px 14px;
  text-align: center; padding: 2.7rem 1.4rem 1.7rem;
}
.hl span { opacity: 1; color: var(--c-ember); letter-spacing: .18em; }
.hl b {
  font-size: 1.65rem; font-weight: 900;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
}
.hl small { opacity: .85; }
.hl:nth-child(1) { background: radial-gradient(120% 100% at 50% 118%, rgba(224,138,60,.35), transparent 55%), #2C150D; }
.hl:nth-child(2) { background: radial-gradient(120% 100% at 50% 118%, rgba(255,221,188,.28), transparent 55%), var(--c-brand); }
.hl:nth-child(2) span { color: #FFE9D2; }
.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); }
.hl:nth-child(3) small { color: var(--c-ink-soft); }

/* i due riquadri formula in fondo alla pagina menù */
.cards .hl { text-align: left; padding: 2.4rem 1.7rem 1.6rem; }
.cards .hl span { color: var(--c-ember); }

.notice { background: var(--c-brand-soft); border: 1px solid var(--c-brand); border-radius: 10px; }
.notice svg { color: var(--c-brand-strong); }

/* barra categorie: linguette di un menù */
.catnav { background: rgba(251,242,227,.94); backdrop-filter: blur(9px); border-bottom-color: var(--c-line); }
.catnav a {
  border-color: var(--c-line); background: var(--c-surface);
  font-size: .78rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: .52rem 1rem;
}
.catnav a:hover { border-color: var(--c-brand); color: var(--c-brand-strong); }
.catnav a.is-active { background: var(--c-brand); border-color: var(--c-brand); color: #FFF4E6; }

/* IL FOGLIO: tutto il menù vive su un'unica carta stampata */
#menu-root {
  background:
    var(--grain),
    linear-gradient(180deg, #FFFDF6 0%, #FCF5E7 100%);
  border: 1px solid var(--c-line);
  border-radius: 18px;
  outline: 1px solid rgba(150,37,12,.22);
  outline-offset: -12px;
  box-shadow: 0 34px 80px rgba(44,21,13,.12);
  padding: clamp(1.8rem, 4vw, 4.2rem) clamp(1.1rem, 4.5vw, 4.6rem) clamp(2.6rem, 4vw, 4.2rem);
  margin-block: 2rem 1rem;
}

/* capolettera di capitolo: occhiello, titolone, cupolina */
.mcat { padding-top: clamp(2.8rem, 5vw, 4.4rem); }
.mcat-head {
  display: block; text-align: center;
  border-bottom: 0; padding-bottom: 0; margin-bottom: 2rem;
}
.mcat-head .eyebrow { justify-content: center; margin-bottom: .55rem; }
.mcat-head .eyebrow::before { display: none; }
.mcat-head h2 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
  font-weight: 900; color: var(--c-ink);
}
.mcat-head > div::after {
  content: ''; display: block; width: 56px; height: 15px;
  margin: .8rem auto 0;
  border: 2px solid var(--c-brand); border-bottom: 0;
  border-radius: 999px 999px 0 0; opacity: .85;
}

/* righe come su carta: nome forte, puntini fini, prezzo corsivo */
.mitem { border-bottom: 1px dotted #D4B48D; padding: 1.05rem 0; }
.mitem-name { font-size: 1.17rem; font-weight: 700; font-variation-settings: 'SOFT' 100, 'WONK' 1; }
.mitem-dots { border-bottom: 1px dotted rgba(150,37,12,.42); }
.mitem-price {
  font-style: italic; font-weight: 800; font-size: 1.14rem;
  color: var(--c-brand-strong); font-variant-numeric: tabular-nums;
  background: transparent; box-shadow: none; padding: 0;
}
.mitem-desc { font-size: .89rem; }
.mnote { text-align: center; }

/* timbri */
.mtag {
  background: transparent; color: #A4470E; border: 1px solid #C98A52;
  border-radius: 4px; transform: rotate(-2deg); letter-spacing: .08em;
}
.mtag--pic { background: transparent; color: #96250C; border-color: #C8381D; }
.mtag--casa { background: var(--c-brand); color: #FFF4E6; border-color: var(--c-brand); }
.mitem.is-casa {
  background: #FBEBD6; border: 1px dashed #D89A72; border-radius: 12px;
  padding: 1.05rem 1.2rem; margin-block: .7rem; border-bottom-style: dashed;
}

/* impasti: piccole tessere con prezzo */
.impasti { margin-block: .4rem 2rem; }
.impasto { background: #FFFDF7; border: 1px solid var(--c-line); border-radius: 10px; }
.impasto b { font-weight: 700; }
.impasto span { color: var(--c-brand-strong); font-variant-numeric: tabular-nums; }

/* colonna doppia con filetto centrale, come sul menù vero */
@media (min-width: 900px) {
  .mlist--2col { position: relative; }
  .mlist--2col::after {
    content: ''; position: absolute; top: .6rem; bottom: .6rem; left: 50%;
    width: 1px; background: linear-gradient(180deg, transparent, var(--c-line) 10%, var(--c-line) 90%, transparent);
  }
}

.acc { border-color: var(--c-line); background: var(--c-surface); }
.acc-btn { font-weight: 700; }

/* ============================================================
   GALLERIA
   ============================================================ */
.filters button { border-color: var(--c-line); background: var(--c-surface); font-weight: 700; }
.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: #FFF4E6; }
.gitem { border-radius: 10px; }
.gitem::after { background: rgba(44,21,13,.45); }
.gitem .zoom-ico { background: var(--c-brand); }
.gitem .zoom-ico svg { color: #FFF4E6; }
.lightbox { background: rgba(24,9,5,.96); }

/* ============================================================
   CONTATTI
   ============================================================ */
.ccard .big-val { color: var(--c-brand-strong); font-weight: 800; }
.hours th { font-variant-numeric: oldstyle-nums; }
.hours tr.is-today { background: var(--c-brand-soft); }
.hours tr.is-today th, .hours tr.is-today td { color: var(--c-brand-strong); }
.svc span { background: var(--c-surface); border-color: var(--c-line); }
.svc svg { color: var(--c-brand); }
.map-wrap { border-color: var(--c-line); }

/* ============================================================
   FOOTER — brace sul bordo
   ============================================================ */
.site-footer {
  background: var(--grain), radial-gradient(120% 70% at 50% -10%, rgba(200,56,29,.12), transparent 55%), #24100A;
  border-top: 4px solid;
  border-image: linear-gradient(90deg, #96250C, #E08A3C 30%, #C8381D 60%, #96250C) 1;
}
.foot-col h4 { color: var(--c-brand-on-dark); letter-spacing: .18em; }
.foot-tel {
  font-style: italic; font-weight: 800; font-size: 1.5rem; color: #FFF4E6;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
}
.foot-social a:hover { background: var(--c-brand); border-color: var(--c-brand); }
.foot-hours { font-variant-numeric: oldstyle-nums; }
.foot-hours tr.is-today th, .foot-hours tr.is-today td { color: var(--c-brand-on-dark); }

/* ============================================================
   MOTION — ritematizzato caldo
   ============================================================ */
div.curtain {
  background: radial-gradient(circle at 50% 62%, #6B2D14 0%, #40190C 46%, #24100A 100%);
}
.progress { background: linear-gradient(90deg, #C8381D, #E08A3C); }
.cursor { background: var(--c-brand); }
.cursor-ring { border-color: rgba(224,138,60,.9); }
html.cursor-hot body .cursor-ring { background: rgba(224,138,60,.16); border-color: var(--c-ocra); }
body .card::after, body .ccard::after {
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(224,138,60,.14), transparent 62%);
}

/* pagina indice di confronto */
.pick-card { border-radius: 14px; }

/* ============================================================
   RIFINITURE FINALI
   ============================================================ */
@media (max-width: 600px) {
  /* nel cartiglio stretto il titolo andava su cinque righe */
  .hero h1 { font-size: clamp(1.85rem, 1rem + 4.4vw, 2.5rem); line-height: 1.06; }
  .hero > .wrap { padding-inline: 1.3rem; }
  .sec[data-num] > .wrap::before { font-size: 5.5rem; top: -2rem; opacity: .8; }
}
/* la barra categorie è alta: le ancore del menù devono cadere sotto */
.mcat { scroll-margin-top: calc(var(--nav-h, 70px) + 96px); }

/* ------------------------------------------------------------------
   FIX — nella shorthand `background: <gradiente>, var(--x)` il parser
   scarta l'intera dichiarazione, perché non può validare al parse time
   che la var() sia un colore. Solo i colori letterali sopravvivono.
   Qui separo colore e immagine, e do alla terza pastiglia un fondo
   che si stacchi davvero dalla carta.
   ------------------------------------------------------------------ */
.highlights .hl:nth-child(2) {
  background-color: #C8381D;
  background-image: radial-gradient(120% 100% at 50% 118%, rgba(255,221,188,.28), transparent 55%);
  color: #FFF4E6;
}
.highlights .hl:nth-child(2) span { color: #FFE3CC; }
.highlights .hl:nth-child(2) small { color: #FFEBDA; }
.highlights .hl:nth-child(3) {
  background-color: #F4E3CC;
  background-image: none;
  border: 1px solid #E5CBAC;
  color: #2E1A10;
}
.highlights .hl:nth-child(3) span { color: #96250C; }
.highlights .hl:nth-child(3) small { color: #6F5140; }
.cards .hl:nth-child(1) {
  background-color: #C8381D; color: #FFF4E6;
  background-image: radial-gradient(120% 100% at 50% 118%, rgba(255,221,188,.26), transparent 55%);
}
.cards .hl:nth-child(2) { background-color: #2C150D; background-image: none; color: #FBF2E3; }