/* Arte Bianca (Lioni) — colori dal logo (antracite e bianco) e dalla sala (verde acqua delle pareti,
   velluto verde degli sgabelli, crema delle tovagliette). Titoli in Marcellus (come le maiuscole del logo),
   nome in Yellowtail (come il corsivo del logo), testi in Figtree. Font ospitati sul sito (fonts.css). */

:root {
  --carbone: #222321;
  --carbone-2: #2e2f2c;
  --notte: #191a18;
  --farina: #faf7f1;
  --crema: #f2ece1;
  --bianco: #ffffff;
  --ink: #1f201d;
  --ink-2: #4a4b45;
  --ink-3: #5f6058;
  --linea: #e3d9c9;
  --verde: #1d6b67;        /* pulsanti e prezzi: testo bianco sopra */
  --verde-scuro: #155350;
  --verde-2: #237a75;      /* icone e titoletti su fondo chiaro */
  --acqua: #8fd0ca;        /* accenti su fondo scuro */
  --acqua-chiaro: #e0f0ed;
  --velluto: #1c4d42;
  --crosta: #e2bf88;
  --marrone: #7a4520;
  --f-titoli: "Marcellus", Georgia, "Times New Roman", serif;
  --f-testo: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-firma: "Yellowtail", "Brush Script MT", cursive;
  --r: 18px;
  --ombra: 0 10px 30px rgba(34, 35, 33, .10);
  --barra: 70px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--barra) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-testo); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); background: var(--farina); }
img { max-width: 100%; height: auto; display: block; }
svg { width: 1em; height: 1em; fill: currentColor; flex: none; }
a { color: var(--verde); }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
button, input { font: inherit; color: inherit; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.nowrap { white-space: nowrap; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* fuoco visibile: verde su chiaro, acqua su scuro */
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; border-radius: 6px; }
.topbar :focus-visible, .hero :focus-visible, .section--carbone :focus-visible, .footer :focus-visible,
.modo--scuro :focus-visible, .format--gf :focus-visible, .tile:focus-visible, .fab:focus-visible { outline-color: var(--acqua); }

.salta { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--bianco); color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.salta:focus { top: 12px; }

/* ---------- pulsanti ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: .75em 1.3em;
  border-radius: 999px; border: 2px solid transparent; font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none;
  cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .2s; }
.btn svg { width: 1.15em; height: 1.15em; }
.btn:hover { transform: translateY(-1px); }
.btn--verde { background: var(--verde); color: var(--bianco); }
.btn--verde:hover { background: var(--verde-scuro); }
.btn--chiaro { border-color: rgba(255, 255, 255, .75); color: var(--bianco); background: transparent; }
.btn--chiaro:hover { background: rgba(255, 255, 255, .1); border-color: var(--bianco); }
.btn--scuro { background: var(--carbone); color: var(--bianco); }
.btn--scuro:hover { background: #000; }
.btn--lg { font-size: 1.05rem; padding: .9em 1.55em; min-height: 54px; }

/* ---------- barra in alto ---------- */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--barra); background: rgba(34, 35, 33, .97);
  color: var(--bianco); transition: box-shadow .25s, background-color .25s; }
.topbar.is-solid { background: var(--carbone); box-shadow: 0 6px 24px rgba(0, 0, 0, .28); }
.topbar__in { height: 100%; display: flex; align-items: center; gap: 22px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--bianco); text-decoration: none; flex: none; }
.brand img { width: 48px; height: 48px; border-radius: 50%; }
.brand__txt { display: flex; flex-direction: column; line-height: 1.1; }
.brand__nome { font-family: var(--f-firma); font-size: 1.65rem; line-height: 1; }
.brand__luogo { font-family: var(--f-titoli); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--acqua); margin-top: 3px; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { color: rgba(255, 255, 255, .88); text-decoration: none; font-weight: 600; font-size: .96rem; padding: 8px 11px; border-radius: 999px; transition: color .2s, background-color .2s; }
.nav a:hover { color: var(--bianco); background: rgba(255, 255, 255, .08); }
.topbar__call { flex: none; min-height: 44px; padding: .55em 1.05em; }
.burger { display: none; width: 46px; height: 46px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .08); cursor: pointer; padding: 0; flex: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.burger span { display: block; width: 22px; height: 2px; background: var(--bianco); border-radius: 2px; transition: transform .25s, opacity .25s; }
.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); }

/* ---------- hero ---------- */
.hero { position: relative; color: var(--bianco); padding: calc(var(--barra) + 64px) 0 76px; overflow: hidden;
  background:
    radial-gradient(900px 520px at 88% 18%, rgba(79, 179, 173, .20), transparent 62%),
    radial-gradient(700px 480px at 6% 96%, rgba(226, 191, 136, .13), transparent 60%),
    var(--carbone); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px); background-size: 22px 22px; }
.hero__in { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 56px; align-items: center; }
.hero__kicker { display: inline-flex; align-items: center; gap: .5em; font-size: .95rem; font-weight: 600; letter-spacing: .04em; color: #e6e1d6; margin-bottom: 18px; }
.hero__kicker svg { color: var(--acqua); width: 1.1em; height: 1.1em; }
.hero__titolo { margin-bottom: 22px; }
.hero__nome { display: block; font-family: var(--f-firma); font-size: clamp(3.6rem, 7.4vw, 6.4rem); line-height: .95; letter-spacing: .01em; }
.hero__sub { display: block; margin-top: 14px; font-family: var(--f-titoli); font-size: clamp(.95rem, 1.5vw, 1.18rem); letter-spacing: .2em; text-transform: uppercase; color: var(--acqua); }
.hero__lead { font-size: 1.14rem; color: #ece8df; max-width: 33em; margin-bottom: 28px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }
.hero__fatti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .16); }
.hero__fatti li { padding: 16px 14px 0 0; }
.hero__fatti li + li { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .16); }
.hero__fatti b { display: block; font-family: var(--f-titoli); font-weight: 400; font-size: 1.16rem; color: var(--bianco); }
.hero__fatti span { display: block; font-size: .9rem; color: #c9c4b9; line-height: 1.35; margin-top: 3px; }
/* la foto nella «bocca del forno»: arco in alto, con il bordo di crosta del logo */
.hero__foto { position: relative; margin: 0; padding-top: 18px; }
.hero__foto::before { content: ""; position: absolute; left: 7%; right: 7%; top: 0; height: 60%; border: 7px solid var(--bianco);
  border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; opacity: .9; pointer-events: none; }
.hero__foto img { position: relative; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 55% 60%;
  border-radius: 50% 50% 26px 26px / 38% 38% 26px 26px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }

/* ---------- punti di forza ---------- */
.strip { background: var(--bianco); border-bottom: 1px solid var(--linea); }
.strip__in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; padding-top: 40px; padding-bottom: 40px; }
.strip__item { display: flex; gap: 16px; align-items: flex-start; }
.strip__ico { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--acqua-chiaro); color: var(--verde); }
.strip__ico svg { width: 28px; height: 28px; }
.strip h2 { font-family: var(--f-titoli); font-size: 1.28rem; line-height: 1.25; margin-bottom: 6px; }
.strip p { margin: 0; color: var(--ink-2); font-size: .98rem; }
.strip b { color: var(--verde); white-space: nowrap; }

/* ---------- sezioni ---------- */
.section { padding: 92px 0; }
.section--crema { background: var(--crema); }
.section--farina { background: var(--farina); }
.section--carbone { background: var(--carbone); color: var(--bianco); }
.head { text-align: center; max-width: 760px; margin: 0 auto 44px; }
.kicker { font-family: var(--f-firma); font-size: 1.85rem; line-height: 1.1; color: var(--verde); margin-bottom: 6px; }
.kicker--chiaro { color: var(--acqua); }
.head h2, .about__txt h2, .contact h2 { font-family: var(--f-titoli); font-size: clamp(2rem, 4vw, 2.85rem); line-height: 1.15; }
.head__sub { margin: 14px auto 0; color: var(--ink-2); font-size: 1.06rem; max-width: 40em; }

/* ---------- specialità ---------- */
.firma { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 56px; align-items: center; max-width: 980px; margin: 0 auto; }
.firma__disco { width: 320px; aspect-ratio: 1 / 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--bianco); padding: 30px; box-shadow: 0 22px 50px rgba(34, 35, 33, .32), inset 0 0 0 10px rgba(255, 255, 255, .06);
  background: radial-gradient(circle at 50% 30%, #5a5b56, #2a2b28 58%, #1d1e1c); }
.firma__arco { width: 62%; height: auto; margin-bottom: 4px; }
.firma__nome { font-family: var(--f-firma); font-size: 2.9rem; line-height: 1; margin: 0; }
.firma__cat { font-family: var(--f-titoli); font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: #d8d3c8; margin: 8px 0 14px; }
.firma__prezzo { margin: 0; background: var(--acqua); color: var(--carbone); font-weight: 800; font-size: 1.1rem; padding: .3em .95em; border-radius: 999px; }
.firma__intro { font-size: 1.22rem; color: var(--ink); margin-bottom: 16px; }
.ingredienti { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.ingredienti li { background: var(--bianco); border: 1px solid var(--linea); border-radius: 999px; padding: .35em .9em; font-size: .96rem; font-weight: 600; color: var(--ink-2); }
.sotto { font-family: var(--f-titoli); font-size: 1.55rem; text-align: center; margin: 68px 0 26px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { position: relative; display: flex; flex-direction: column; background: var(--bianco); border-radius: var(--r); padding: 22px 22px 20px 104px;
  box-shadow: 0 1px 0 var(--linea); border: 1px solid var(--linea); transition: transform .25s, box-shadow .25s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--ombra); }
.card__cat { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--verde); margin: 0 0 2px; }
.card h4 { font-family: var(--f-titoli); font-size: 1.32rem; line-height: 1.2; margin-bottom: 8px; }
.card__desc { color: var(--ink-2); font-size: .95rem; line-height: 1.5; margin-bottom: 12px; }
.card .price { margin-top: auto; font-weight: 800; color: var(--verde); font-size: 1.08rem; }
/* dischetti: la pizza vista dall'alto, col colore degli ingredienti principali */
.disco { position: absolute; left: 22px; top: 22px; width: 64px; height: 64px; border-radius: 50%;
  box-shadow: inset 0 0 0 6px var(--crosta), inset 0 0 0 7px rgba(0, 0, 0, .1), 0 4px 10px rgba(0, 0, 0, .12); transition: transform .5s; }
.card:hover .disco { transform: rotate(40deg); }
.disco--stg { background: radial-gradient(circle at 36% 40%, #fff 0 10%, transparent 11%), radial-gradient(circle at 63% 63%, #fff 0 9%, transparent 10%),
  radial-gradient(circle at 62% 33%, #3d8a39 0 7%, transparent 8%), radial-gradient(circle at 38% 68%, #3d8a39 0 6%, transparent 7%), #c8372b; }
.disco--carmasciano { background: radial-gradient(circle at 40% 38%, #2a2622 0 6%, transparent 7%), radial-gradient(circle at 63% 58%, #2a2622 0 5%, transparent 6%),
  radial-gradient(circle at 46% 67%, #c27d86 0 10%, transparent 11%), radial-gradient(circle at 64% 34%, #c27d86 0 8%, transparent 9%), #efe3c6; }
.disco--crocchettona { background: radial-gradient(circle at 40% 40%, #eab0b2 0 15%, transparent 16%), radial-gradient(circle at 64% 63%, #eab0b2 0 13%, transparent 14%),
  radial-gradient(circle at 62% 34%, #d39a4a 0 10%, transparent 11%), #95a957; }
.disco--friarielli { background: radial-gradient(circle at 38% 40%, #8a5a3c 0 9%, transparent 10%), radial-gradient(circle at 62% 62%, #eadbb0 0 10%, transparent 11%),
  radial-gradient(circle at 64% 34%, #8a5a3c 0 7%, transparent 8%), #3e6a2b; }
.disco--parmigiana { background: radial-gradient(circle at 40% 40%, #5a2f4c 0 13%, transparent 14%), radial-gradient(circle at 64% 61%, #5a2f4c 0 11%, transparent 12%),
  radial-gradient(circle at 58% 30%, #f3e8cb 0 8%, transparent 9%), #c9503a; }
.disco--stella { background: radial-gradient(circle, #ece4cf 0 20%, #7aa13d 21% 24%, transparent 25%),
  conic-gradient(#6b3a5a 0 60deg, #7aa13d 0 120deg, #d6862f 0 180deg, #e9cf47 0 240deg, #c8372b 0 300deg, #6b4a2f 0 360deg); }

/* ---------- tasselli delle categorie ---------- */
.tiles-sec { background: var(--crema); padding: 0 0 92px; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tile { position: relative; display: block; height: 236px; border-radius: var(--r); overflow: hidden; color: var(--bianco); text-decoration: none;
  isolation: isolate; box-shadow: 0 1px 0 rgba(0, 0, 0, .04); }
.tile--foto { background-color: var(--carbone); }
.tile--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; z-index: -2; }
.tile--foto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(20, 20, 18, .78)); }
.tile:hover img, .tile:hover .tile__svg, .tile:hover .tile__bollino { transform: scale(1.06); }
.tile__txt { position: absolute; left: 20px; right: 20px; bottom: 16px; font-family: var(--f-titoli); font-size: 1.5rem; line-height: 1.15; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.tile__txt small { display: block; font-family: var(--f-testo); font-size: .92rem; font-weight: 600; margin-top: 4px; opacity: .95; }
.tile--gf { background: radial-gradient(circle at 50% 30%, #276455, var(--velluto) 70%); }
.tile__bollino { position: absolute; left: 50%; top: 22px; width: 132px; height: auto; margin-left: -66px; transition: transform .6s; }
.tile--disegno .tile__svg { position: absolute; left: 50%; top: 24px; width: 220px; height: 110px; margin-left: -110px; transition: transform .6s; }
.tile--metro { background: radial-gradient(circle at 50% 25%, #3a3b37, var(--carbone) 72%); color: var(--bianco); }
.tile--metro .tile__svg { color: var(--acqua); }
.tile--fritti { background: radial-gradient(circle at 50% 25%, #94582b, var(--marrone) 72%); }
.tile--fritti .tile__svg { color: #f7e2bf; }
.tile--panuozzo { background: radial-gradient(circle at 50% 25%, #2a837e, var(--verde) 72%); }
.tile--panuozzo .tile__svg { color: #dff2ee; }

/* ---------- menu ---------- */
.menu-tools { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 26px; }
.tabs { display: flex; flex-wrap: wrap; gap: 7px; flex: 1; min-width: 0; }
.tab { border: 1.5px solid var(--linea); background: var(--bianco); color: var(--ink); border-radius: 999px; padding: .5em .9em; font-weight: 700; font-size: .93rem;
  cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; }
.tab:hover { border-color: var(--verde-2); }
.tab[aria-selected="true"] { background: var(--carbone); border-color: var(--carbone); color: var(--bianco); }
.search { position: relative; flex: 0 0 284px; }
.search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--ink-3); }
.search input { width: 100%; height: 46px; border: 1.5px solid var(--linea); border-radius: 999px; background: var(--bianco); padding: 0 16px 0 42px; font-size: 1rem; }
.search input:focus { border-color: var(--verde); outline: none; box-shadow: 0 0 0 3px rgba(29, 107, 103, .25); }
.menu-list { columns: 2; column-gap: 52px; background: var(--bianco); border: 1px solid var(--linea); border-radius: 22px; padding: 24px 32px; min-height: 120px; }
.menu-cat { column-span: all; font-family: var(--f-titoli); font-size: 1.4rem; color: var(--verde); margin: 18px 0 6px; padding-bottom: 6px; border-bottom: 2px solid var(--acqua-chiaro); }
.menu-cat:first-child { margin-top: 4px; }
.menu-nota { column-span: all; background: var(--acqua-chiaro); border-left: 4px solid var(--verde-2); border-radius: 10px; padding: 10px 16px; margin: 4px 0 12px; font-size: .97rem; color: var(--ink); }
.dish { break-inside: avoid; padding: 13px 0; border-bottom: 1px dashed var(--linea); }
.dish h4 { display: flex; align-items: baseline; gap: 8px; font-size: 1.07rem; line-height: 1.3; }
.dish__n { font-weight: 700; }
.dots { flex: 1; min-width: 14px; border-bottom: 2px dotted #cdbfa9; transform: translateY(-4px); }
.dish .p { font-weight: 800; color: var(--verde); white-space: nowrap; }
.badge { flex: none; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: #fbe7dc; color: #8c3a12; border-radius: 999px; padding: .15em .6em; }
.dish p { margin: 4px 0 0; color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
.dish .var { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .92rem; }
.menu-empty { column-span: all; text-align: center; color: var(--ink-2); padding: 20px 0; margin: 0; }
.formats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.format { background: var(--bianco); border: 1px solid var(--linea); border-top: 4px solid var(--verde-2); border-radius: 16px; padding: 20px 20px 18px; }
.format h3 { display: flex; align-items: center; gap: 8px; font-family: var(--f-titoli); font-size: 1.22rem; line-height: 1.25; margin-bottom: 8px; }
.format h3 svg { width: 1.2em; height: 1.2em; }
.format p { margin: 0; font-size: .96rem; color: var(--ink-2); }
.format b { color: var(--ink); white-space: nowrap; }
.format--gf { background: var(--velluto); border-color: var(--velluto); border-top-color: var(--acqua); color: var(--bianco); }
.format--gf p { color: #e7f1ee; }
.format--gf a { color: var(--bianco); font-weight: 700; }
.allergeni { text-align: center; color: var(--ink-2); font-size: .95rem; margin: 26px auto 0; max-width: 46em; }

/* ---------- chi siamo ---------- */
.about { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 60px; align-items: center; }
.about__foto { position: relative; padding-bottom: 72px; }
.about__img { margin: 0; overflow: hidden; }
.about__img img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.about__img--grande { border-radius: 24px; box-shadow: var(--ombra); }
.about__img--piccola { position: absolute; right: -14px; bottom: 0; width: 50%; border-radius: 18px; border: 6px solid var(--crema); box-shadow: 0 16px 34px rgba(34, 35, 33, .22); }
.about__txt h2 { margin-bottom: 18px; }
.about__txt p { color: var(--ink-2); }
.services { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.services li { display: inline-flex; align-items: center; gap: 8px; background: var(--bianco); border: 1px solid var(--linea); border-radius: 999px; padding: .35em .95em; font-weight: 600; font-size: .94rem; }
.services li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verde-2); }

/* ---------- come ordinare ---------- */
.modi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1020px; margin: 0 auto; }
.modo { display: flex; flex-direction: column; align-items: flex-start; background: var(--bianco); border: 1px solid var(--linea); border-radius: 24px; padding: 34px 34px 32px; box-shadow: var(--ombra); }
.modo--scuro { background: var(--carbone); border-color: var(--carbone); color: var(--bianco); }
.modo__ico { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--acqua-chiaro); color: var(--verde); margin-bottom: 16px; }
.modo__ico svg { width: 30px; height: 30px; }
.modo--scuro .modo__ico { background: rgba(143, 208, 202, .14); color: var(--acqua); }
.modo h3 { font-family: var(--f-titoli); font-size: 1.7rem; margin-bottom: 16px; }
.modo .btn { margin-top: auto; }
.passi { counter-reset: passo; width: 100%; margin-bottom: 26px; }
.passi li { counter-increment: passo; position: relative; padding: 0 0 18px 52px; }
.passi li::before { content: counter(passo); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--carbone); color: var(--bianco); font-family: var(--f-testo); font-weight: 800; font-size: 1rem; }
.passi li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; background: var(--linea); }
.passi b { display: block; font-size: 1.05rem; }
.passi span { display: block; color: var(--ink-2); font-size: .96rem; }
.rules { width: 100%; margin-bottom: 26px; }
.rules li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.rules b { font-weight: 700; }
.rules span { color: #d6d1c6; text-align: right; }

/* ---------- dove siamo ---------- */
.contact { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 52px; align-items: start; }
.contact h2 { margin-bottom: 20px; }
.contact address { font-size: 1.1rem; line-height: 1.65; color: #ece8df; margin-bottom: 16px; }
.contact address b { color: var(--bianco); }
.contact__links { margin-bottom: 26px; }
.contact__links a { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; color: var(--bianco); font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.contact__links a:hover { text-decoration: underline; }
.contact__links svg { color: var(--acqua); width: 1.2em; height: 1.2em; }
.hours { width: 100%; border-collapse: collapse; margin-bottom: 28px; }
.hours caption { text-align: left; font-family: var(--f-titoli); font-size: 1.3rem; padding-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.hours caption svg { color: var(--acqua); }
.hours th, .hours td { padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .13); font-weight: 500; }
.hours th { text-align: left; color: #e6e1d6; }
.hours td { text-align: right; color: #e6e1d6; font-variant-numeric: tabular-nums; }
.hours tr.oggi th, .hours tr.oggi td { color: var(--acqua); font-weight: 800; }
.hours tr.oggi th::after { content: "oggi"; margin-left: 10px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: var(--acqua); color: var(--carbone); border-radius: 999px; padding: .2em .6em; vertical-align: middle; }
.gmap { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 22px; background: #e5e3df; box-shadow: 0 18px 44px rgba(0, 0, 0, .35); }
.gmap > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- footer ---------- */
.footer { background: var(--notte); color: #cfcac0; padding: 44px 0 48px; font-size: .96rem; }
.footer__in { display: flex; align-items: center; gap: 24px; }
.footer__brand img { width: 84px; height: 84px; border-radius: 50%; }
.footer p { margin: 0 0 6px; }
.footer__nome { font-family: var(--f-titoli); color: var(--bianco); font-size: 1.1rem; }
.footer a { color: var(--bianco); }
.footer__legal { color: #bdb8ad; font-size: .9rem; }

/* ---------- pulsante «Chiama» fisso (solo telefono) ---------- */
.fab { display: none; position: fixed; right: 16px; bottom: 16px; z-index: 60; align-items: center; gap: 10px; background: var(--verde); color: var(--bianco);
  text-decoration: none; font-weight: 800; padding: 14px 22px; border-radius: 999px; box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
  transition: opacity .25s, transform .25s, visibility .25s; }
.fab svg { width: 1.25em; height: 1.25em; }
.fab.is-nascosto { opacity: 0; transform: translateY(24px); visibility: hidden; pointer-events: none; }

/* ---------- comparsa allo scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
.card.reveal.is-in { transition: opacity .7s ease, transform .25s ease, box-shadow .25s ease; }
.card.reveal.is-in:hover { transform: translateY(-4px); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nav { display: none; position: fixed; top: var(--barra); left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; padding: 8px 16px 18px;
    background: var(--carbone); border-top: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 18px 30px rgba(0, 0, 0, .3); }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px 10px; border-radius: 10px; font-size: 1.05rem; border-bottom: 1px solid rgba(255, 255, 255, .07); }
  .burger { display: inline-flex; }
  .topbar__call { margin-left: auto; }
  .formats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero { padding: calc(var(--barra) + 40px) 0 56px; }
  .hero__in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero__foto { max-width: 560px; width: 100%; margin: 0 auto; }
  .strip__in { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .firma { grid-template-columns: minmax(0, 1fr); gap: 30px; justify-items: center; text-align: center; }
  .ingredienti { justify-content: center; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .about__foto { max-width: 640px; }
  .modi { grid-template-columns: minmax(0, 1fr); }
  .contact { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .gmap { aspect-ratio: 4 / 3; }
}
@media (max-width: 760px) {
  :root { --barra: 64px; }
  body { font-size: 1rem; }
  .wrap { padding: 0 16px; }
  .section { padding: 64px 0; }
  .tiles-sec { padding-bottom: 64px; }
  .brand img { width: 42px; height: 42px; }
  .brand__nome { font-size: 1.45rem; }
  .topbar__in { gap: 10px; }
  .topbar__call { padding: 0; width: 46px; min-height: 46px; height: 46px; }
  .topbar__call span { display: none; }
  .topbar__call svg { width: 22px; height: 22px; }
  .hero__fatti { grid-template-columns: minmax(0, 1fr); }
  .hero__fatti li, .hero__fatti li + li { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .hero__fatti b { flex: none; font-size: 1.06rem; }
  .hero__fatti span { margin: 0; }
  .hero__cta .btn { flex: 1 1 100%; }
  .hero__sub > span:not(.hero__sep) { display: block; }
  .hero__sep { display: none; }
  .head { margin-bottom: 32px; }
  .kicker { font-size: 1.6rem; }
  .firma__disco { width: min(300px, 82vw); }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .tiles { gap: 12px; }
  .tile { height: 176px; }
  .tile__txt { left: 14px; right: 12px; bottom: 12px; font-size: 1.12rem; }
  .tile__txt small { font-size: .78rem; margin-top: 2px; }
  .tile__bollino { width: 96px; margin-left: -48px; top: 14px; }
  .tile--disegno .tile__svg { width: 136px; height: 68px; margin-left: -68px; top: 16px; }
  .tile__bollino { top: 10px; }
  /* sotto i 760 px la riga delle schede scorre dentro lo schermo (mai a capo: allargherebbe la pagina) */
  .menu-tools { flex-direction: column; align-items: stretch; gap: 12px; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 4px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .tabs::-webkit-scrollbar { display: none; }
  .search { flex: none; width: 100%; }
  .menu-list { columns: 1; padding: 14px 18px; border-radius: 18px; }
  .formats { grid-template-columns: minmax(0, 1fr); }
  .about__img--piccola { right: 0; width: 56%; }
  .modo { padding: 26px 22px 24px; }
  .fab { display: inline-flex; }
  .footer { padding-bottom: 96px; }
  .footer__in { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (max-width: 400px) {
  .brand__luogo { letter-spacing: .1em; }
  .hero__fatti li, .hero__fatti li + li { flex-direction: column; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
  .card:hover, .btn:hover { transform: none; }
  .card:hover .disco, .tile:hover img, .tile:hover .tile__svg, .tile:hover .tile__bollino { transform: none; }
}