/* C’è Pizza Per Te — facciata al crepuscolo */

@font-face { font-family: "Tilt Neon"; src: url("../assets/fonts/tilt-neon-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Big Shoulders Display"; src: url("../assets/fonts/big-shoulders-display-latin.woff2") format("woff2"); font-weight: 500 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../assets/fonts/atkinson-next-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../assets/fonts/atkinson-next-italic-latin.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }

@property --accensione { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --cta { syntax: "<number>"; inherits: false; initial-value: 1; }

:root {
  --dusk-950: #0b1629; --dusk-900: #0f1d36; --dusk-800: #16294a; --dusk-700: #1f365e; --dusk-600: #2b4775;
  --dusk-ink: #a9b8d4;
  --tube-white: #f4f1ec;
  --neon-red: #ff4436; --neon-red-core: #ffd6cf; --neon-red-glow: rgb(255 68 54 / .55);
  --neon-green: #35d27a; --neon-green-core: #d9ffe8; --neon-green-glow: rgb(53 210 122 / .5);
  --tube-off: #3a4258; --tube-off-red: #5b3743; --tube-off-green: #2e4b47;
  --amber: #ffc46b; --amber-core: #fff1d6; --amber-glow: rgb(255 196 107 / .45); --amber-deep: #e0892b;
  --interior-1: #2a1a10; --interior-2: #3b2414;
  --board-light: #eef3ef; --board-hot: #fbfdfb; --board-edge: #d5dfda;
  --board-ink: #13203a; --board-ink-soft: #46546a; --board-red: #c8281c;
  --board-groove: #c7d2cc; --board-groove-hi: #ffffff; --board-lit: #fff6e3;
  --alu-1: #d3d8df; --alu-2: #9aa2ae; --alu-3: #5d6573;
  --linea-piccanti: #c8281c; --linea-bianche: #f4f1ec; --linea-vegetariane: #1f8a4c;
  --linea-salsiccia: #8a3b24; --linea-burrata: #3b5687; --linea-porchetta: #d08a2e;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-io: cubic-bezier(.65, 0, .35, 1);
  --fascia-h: 64px;
  --m: clamp(16px, 4vw, 48px);

  --f-neon: "Tilt Neon", "Big Shoulders Display", sans-serif;
  --f-vinile: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-testo: "Atkinson Hyperlegible Next", system-ui, sans-serif;

  --fs-body: clamp(1.0625rem, .98rem + .3vw, 1.1875rem);
  --fs-small: .9375rem;
  --fs-h2: clamp(2.5rem, 1.6rem + 3.6vw, 4.75rem);
  --fs-hook: clamp(1.875rem, 1.2rem + 2.6vw, 3.5rem);
  --fs-row: clamp(1.5rem, 1.25rem + .9vw, 2rem);

  --rumore: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.5 0 0 0 .25 .5 0 0 0 .25 .5 0 0 0 .25 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --smalto: var(--rumore), linear-gradient(180deg, #101e38, #0e1b33);
  --metallo: linear-gradient(135deg, var(--alu-1), var(--alu-2) 45%, var(--alu-3));
}

*, *::before, *::after { box-sizing: border-box; }
html {
  color-scheme: dark; background: var(--dusk-950); -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--dusk-600) var(--dusk-950); accent-color: var(--amber);
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--dusk-900); color: var(--tube-white);
  font: 400 var(--fs-body)/1.55 var(--f-testo); overflow-x: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, figure, blockquote, address, ol, ul { margin: 0; }
address { font-style: normal; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: .08em; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea { caret-color: var(--amber); }
::selection { background: var(--amber); color: var(--dusk-950); }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.tabellone :focus-visible, .lista :focus-visible, .targa :focus-visible, .targa-strada :focus-visible { outline-color: var(--board-ink); }
.tabellone ::selection, .lista ::selection { background: var(--board-ink); color: var(--board-light); }
.tabellone input, .lista input { caret-color: var(--board-red); accent-color: var(--board-red); }
.contenitore { width: 100%; max-width: calc(1240px + 2 * var(--m)); margin-inline: auto; padding-inline: var(--m); }
.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg text { font-family: var(--f-neon); }

.skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--amber); color: var(--dusk-950); padding: 12px 18px; border-radius: 10px; font: 700 1rem var(--f-vinile); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; transition: top 160ms var(--ease-out); }
.skip:focus-visible { top: 12px; outline-color: var(--dusk-950); }

.solo-desktop { display: none; }

/* ---------- tubi al neon (colori) ---------- */
.tx-off-r { fill: var(--tube-off-red); stroke: var(--tube-off-red); }
.tx-off-g { fill: var(--tube-off-green); stroke: var(--tube-off-green); }
.tx-sat-r { fill: var(--neon-red); stroke: var(--neon-red); }
.tx-sat-g { fill: var(--neon-green); stroke: var(--neon-green); }
.tx-core-r { fill: var(--neon-red-core); stroke: none; }
.tx-core-g { fill: var(--neon-green-core); stroke: none; }
.tx-nulla { fill: none; stroke: none; }
.pa-off-r, .pa-off-g, .pa-sat-r, .pa-sat-g, .pa-core-r, .pa-core-g { fill: none; stroke-linecap: round; }
.pa-off-r { stroke: var(--tube-off-red); } .pa-off-g { stroke: var(--tube-off-green); }
.pa-sat-r { stroke: var(--neon-red); opacity: .9; } .pa-sat-g { stroke: var(--neon-green); opacity: .9; }
.pa-core-r { stroke: var(--neon-red-core); } .pa-core-g { stroke: var(--neon-green-core); }
.neon { overflow: visible; }
.neon .elettrodi rect { fill: #1a1f2b; }
.neon .ponticelli path { stroke: #141a26; stroke-width: 3.2; stroke-linecap: round; fill: none; }
.neon .catena { stroke: var(--dusk-ink); stroke-width: 2; stroke-dasharray: 4 4; }
.mini .pa-sat-g, .mini .pa-sat-r { opacity: 1; fill: none; }

@keyframes failsafe { to { opacity: 1; } }
.js .neon--logo :is(.arco, .lett) { opacity: 0; animation: failsafe 0s 3s forwards; transition: opacity 300ms; }
.js .neon--logo.is-lit :is(.arco, .lett) { opacity: 1; animation: none; }
.js .neon--frase .parola { opacity: 0; animation: failsafe 0s 6s forwards; transition: opacity 300ms; }
.js .neon--frase.is-lit .parola { opacity: 1; animation: none; }
.neon--aperto .acceso { opacity: 0; transition: opacity 300ms; }
html.is-aperto .neon--aperto .acceso { opacity: 1; }
.neon--aperto { width: 100%; }

/* ---------- fascia ---------- */
.fascia {
  position: sticky; top: 0; z-index: 50; height: var(--fascia-h); margin-bottom: calc(var(--fascia-h) * -1);
  transition: background-color 200ms, box-shadow 200ms, backdrop-filter 200ms;
}
.fascia.is-scrolled {
  background: linear-gradient(#0a1424, #0a1424) bottom / 100% 2px no-repeat, rgb(11 22 41 / .88);
  box-shadow: 0 1px 0 #213a63; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.fascia__in { height: 100%; display: flex; align-items: center; gap: 24px; width: 100%; max-width: calc(1240px + 2 * var(--m)); margin-inline: auto; padding-inline: var(--m); }
.fascia__marchio { display: flex; align-items: center; gap: 12px; margin-right: auto; text-decoration: none; min-height: 44px; }
.mini { width: 36px; height: 36px; }
.mini--grande { width: 64px; height: 64px; }
.fascia__indirizzo { display: none; font-size: var(--fs-small); color: var(--dusk-ink); }
.fascia__nav { display: flex; gap: 20px; }
.fascia__nav a, .fascia__nav a:visited {
  font: 700 1rem var(--f-vinile); text-transform: uppercase; letter-spacing: .08em; text-decoration: none;
  padding-block: 12px; background: linear-gradient(var(--amber), var(--amber)) left bottom 8px / 0 2px no-repeat; transition: background-size 180ms var(--ease-out);
}
.fascia__nav a:hover, .fascia__nav a:focus-visible { background-size: 100% 2px; }
.fascia__tel { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 44px; height: 44px; color: var(--amber); text-decoration: none; font-weight: 700; font-variant-numeric: tabular-nums; border: 1.5px solid var(--amber); border-radius: 12px; padding-inline: 10px; }
.fascia__tel:hover { background: rgb(255 196 107 / .12); }
.fascia__tel-num { display: none; font-size: 1.0625rem; }

/* ---------- hero ---------- */
.insegna { position: relative; padding-top: calc(var(--fascia-h) + 16px); overflow: hidden; }
.muro { position: relative; --accensione: 1; animation: accendi-muro 900ms var(--ease-out) 400ms backwards; }
@keyframes accendi-muro { from { --accensione: 0; } }
.luce { position: absolute; inset: -10% 0 0; pointer-events: none; opacity: var(--accensione); }
.luce--verde { background: radial-gradient(38% 55% at 32% 30%, rgb(53 210 122 / .13), transparent 72%); }
.luce--rosso { background: radial-gradient(38% 55% at 68% 70%, rgb(255 68 54 / .12), transparent 72%); }
.logo { position: relative; display: grid; justify-items: center; gap: 4px; padding-top: 20px; font-weight: inherit; }
.neon--logo { width: min(78vw, 300px); height: auto; }
.logo__sotto { font: 600 .95rem var(--f-vinile); text-transform: uppercase; letter-spacing: .3em; color: var(--dusk-ink); padding-left: .3em; text-align: center; margin-top: -6px; }

.vetrina { position: relative; display: block; margin-top: 24px; padding-block: 12px; padding-bottom: 12px; }
.vetrina::before { content: ""; position: absolute; inset: 0 var(--m); border-radius: 8px; background: var(--metallo); box-shadow: 0 24px 40px -18px rgb(0 0 0 / .7); }
.vetro { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--interior-2), var(--interior-1)); }
.vetro::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); pointer-events: none; z-index: 3; }
.vetro--largo { margin: 0 12px; border-radius: 3px; }
.vetro__fondo { position: absolute; inset: 0; overflow: hidden; }
.vetro__fondo img { width: 100%; height: 100%; object-fit: cover; filter: blur(16px) saturate(1.1) brightness(.7); transform: scale(1.12); }
.vetro__velo { position: absolute; inset: 0; background: rgb(11 22 41 / .55); }
.vetro__velo::after { content: ""; position: absolute; inset: 0; background: rgb(255 196 107 / .35); mix-blend-mode: soft-light; }
.vetro__riflesso { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .06) 38%, transparent 46%); z-index: 2; pointer-events: none; }
.vetro__testo { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 76px 20px 24px; min-height: 320px; justify-content: center; }
.gancio { font: 800 var(--fs-hook)/.95 var(--f-vinile); text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; text-shadow: 0 1px 0 rgb(0 0 0 / .35); }
.riga-vinile { max-width: 62ch; text-shadow: 0 1px 0 rgb(0 0 0 / .35); }
.stato { position: relative; display: block; font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgb(0 0 0 / .35); }
.stato::before { content: ""; display: inline-block; vertical-align: .06em; margin-right: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--tube-off); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }
html.is-aperto .stato::before { background: var(--neon-green-core); box-shadow: 0 0 0 2px var(--neon-green), 0 0 10px 2px var(--neon-green-glow); }
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; width: 100%; margin-top: 4px; }
.link-vinile { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; text-decoration: underline 2px var(--amber); text-underline-offset: 6px; text-shadow: 0 1px 0 rgb(0 0 0 / .35); }
.link-vinile:hover { color: var(--amber-core); }

.vetro--porta { position: absolute; top: 12px; right: calc(var(--m) + 12px); z-index: 4; width: 112px; background: none; overflow: visible; }
.vetro--porta::after { display: none; }
.porta__vetro, .maniglione, .porta__oggi, .porta__chiuso { display: none; }
.porta__insegnina { width: 100%; }
.montante { display: none; }

/* CTA neon */
.cta, .btn-neon-scuro {
  --cta: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 60px; padding: 0 28px; border-radius: 18px;
  color: var(--amber-core); text-decoration: none; border: 0;
  background: rgb(255 196 107 / .10);
  box-shadow: 0 0 0 2px var(--amber), 0 0 calc(14px * var(--cta)) calc(2px * var(--cta)) rgb(255 196 107 / calc(.45 * var(--cta))), inset 0 0 calc(14px * var(--cta)) rgb(255 196 107 / calc(.3 * var(--cta)));
  transition: --cta 180ms var(--ease-out), transform 100ms, background-color 180ms;
}
.cta:hover, .btn-neon-scuro:hover { --cta: 1.5; background-color: rgb(255 196 107 / .16); }
.cta:active, .btn-neon-scuro:active { transform: scale(.98); --cta: .55; transition-duration: 100ms; }
.cta__verbo { font: 800 1.5rem/1 var(--f-vinile); text-transform: uppercase; letter-spacing: .06em; color: var(--amber); }
.cta__num { white-space: nowrap; font: 700 1.25rem/1 var(--f-testo); color: var(--amber-core); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.ico--cta { color: var(--amber); width: 26px; height: 26px; }
.cta--hero { width: 100%; }
@keyframes cta-on { from { --cta: .4; } }
.js .cta--hero { animation: cta-on 400ms var(--ease-out) 1400ms backwards; }
.cta--compatta { height: 48px; padding: 0 18px; border-radius: 14px; }
.cta--compatta .cta__verbo { font-size: 1.25rem; }
.btn-neon-scuro { --cta: .6; height: 56px; font: 800 1.375rem/1 var(--f-vinile); text-transform: uppercase; letter-spacing: .06em; color: var(--amber); }
.cta--scura {
  background: var(--board-ink); box-shadow: 0 8px 14px -8px rgb(0 0 0 / .55); color: var(--amber); transition: filter 180ms, transform 100ms;
}
.cta--scura:hover { background: var(--board-ink); filter: brightness(1.25); }
.cta--scura:active { filter: brightness(.8); }
.cta--scura .cta__verbo { color: var(--amber); }
.btn-vinile { display: inline-flex; align-items: center; min-height: 56px; padding: 0 24px; border: 2px solid var(--tube-white); border-radius: 14px; font: 700 1.25rem var(--f-vinile); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; transition: background-color 180ms; }
.btn-vinile:hover { background: rgb(255 255 255 / .08); }
.btn-vinile:active { transform: scale(.98); }


/* ---------- facciata / sezioni ---------- */
main { background: var(--smalto); background-blend-mode: overlay; }
#vetrina.sez { padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.sez { position: relative; padding-block: clamp(5rem, 3rem + 8vw, 10rem); }
.giuntura { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(#0a1424 0 2px, #213a63 2px); }
.vite { position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--alu-1), var(--alu-3)); box-shadow: 0 1px 2px rgb(0 0 0 / .6); }
.vite::before, .vite::after { content: ""; position: absolute; left: 50%; top: 50%; background: #3b4250; }
.vite::before { width: 6px; height: 1px; transform: translate(-50%, -50%) rotate(30deg); }
.vite::after { width: 1px; height: 6px; transform: translate(-50%, -50%) rotate(30deg); }
.vite:first-child { left: var(--m); } .vite:last-child { right: var(--m); }
.titolo-vinile { font: 800 var(--fs-h2)/.92 var(--f-vinile); text-transform: uppercase; letter-spacing: .01em; text-shadow: 0 1px 0 rgb(0 0 0 / .35); text-wrap: balance; }
.titolo-vinile--medio { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); }
.intro-vetrina { display: grid; gap: 20px; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); max-width: 62ch; }
.intro-vetrina__testo { text-shadow: 0 1px 0 rgb(0 0 0 / .35); }

/* ---------- in vetrina ---------- */
.vetrata { position: relative; overflow: hidden; border: 12px solid; border-color: #dfe3e9 #b4bbc6 #7d8593 #b4bbc6; border-radius: 6px; background: radial-gradient(70% 45% at 50% 0%, rgb(255 196 107 / .2), transparent), linear-gradient(180deg, var(--interior-2), var(--interior-1)); box-shadow: 0 30px 60px -28px rgb(0 0 0 / .8); }
.vetrata__riflesso { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .06) 38%, transparent 46%); pointer-events: none; z-index: 2; }
.vetrofanie { position: relative; z-index: 1; list-style: none; padding: clamp(20px, 4vw, 56px); display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; align-items: start; }
.vf { --d: 0ms; justify-self: start; width: 100%; }
.vf--sofia { grid-column: 1 / -1; justify-self: center; }
.vf:nth-child(2n+3) { margin-top: 48px; }
.vetrofania { display: grid; gap: 12px; text-decoration: none; justify-items: start; }
.vetrofania img { width: min(100%, 170px); height: auto; transform: rotate(var(--r)); filter: drop-shadow(0 2px 2px rgb(0 0 0 / .35)); transition: transform 180ms var(--ease-out), filter 180ms var(--ease-out); }
.vf--sofia img { width: min(100%, 260px); }
.vetrofania:hover img, .vetrofania:focus-visible img { transform: translateY(-4px) rotate(0deg); filter: drop-shadow(0 12px 10px rgb(0 0 0 / .5)); }
.vf__etichetta { display: grid; gap: 2px; text-shadow: 0 1px 0 rgb(0 0 0 / .35); }
.vf__nome { font: 800 1.75rem/1 var(--f-vinile); text-transform: uppercase; letter-spacing: .02em; text-decoration: underline 2px transparent; text-underline-offset: .15em; transition: text-decoration-color 180ms; }
.vetrofania:hover .vf__nome, .vetrofania:focus-visible .vf__nome { text-decoration-color: var(--amber); }
.vf__prezzo { font: 700 1.25rem/1.2 var(--f-vinile); letter-spacing: .04em; color: var(--amber); font-variant-numeric: tabular-nums; }
.vf__ing { font-size: var(--fs-small); line-height: 1.4; color: #eee8de; max-width: 30ch; }
.vf.pronta img { clip-path: inset(0 100% 0 0 round 12px); transform: rotate(calc(var(--r) - 6deg)) scale(1.04); }
.vf.pronta .vf__etichetta { opacity: 0; }
.vf.pronta.applicata img { clip-path: inset(0 0 0 0 round 12px); transform: rotate(var(--r)) scale(1); transition: clip-path 520ms var(--ease-out) var(--d), transform 520ms var(--ease-out) var(--d); }
.vf.pronta.applicata .vf__etichetta { opacity: 1; transition: opacity 240ms ease-out calc(var(--d) + 380ms); }

/* ---------- tabellone ---------- */
.sez--tabellone { padding-top: clamp(4rem, 2rem + 6vw, 8rem); }
.tabellone {
  position: relative; overflow: hidden; color: var(--board-ink); transition: filter 120ms;
  border: 14px solid; border-color: #dfe3e9 #b4bbc6 #7d8593 #b4bbc6; border-radius: 10px;
  background: radial-gradient(120% 60% at 50% 0%, var(--board-hot), transparent 70%), radial-gradient(120% 40% at 50% 100%, var(--board-hot), transparent 70%), var(--board-light);
  box-shadow: inset 0 2px 6px rgb(0 0 0 / .18), 0 30px 60px -20px rgb(0 0 0 / .6), 0 0 90px 0 rgb(238 243 239 / .10);
}
.tabellone.is-calo { filter: brightness(.9); }
.tabellone__pannelli { display: grid; gap: 12px; background: linear-gradient(90deg, var(--alu-1), var(--alu-3)); }
.pannello { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--board-ink); }
.pannello img { width: 100%; height: 100%; object-fit: cover; }
.pannello--alto img { object-position: 50% 42%; }
.pannello__etichetta { position: absolute; left: 0; bottom: 16px; display: flex; align-items: baseline; gap: 14px; padding: 8px 18px 8px 16px; background: var(--board-red); color: #fff; font: 800 clamp(1.25rem, 1rem + 1.2vw, 1.75rem)/1 var(--f-vinile); text-transform: uppercase; letter-spacing: .04em; box-shadow: 0 6px 10px -4px rgb(0 0 0 / .45); border-radius: 0 6px 6px 0; }
.pannello__prezzo { font-variant-numeric: tabular-nums; }
.pannello__repertorio { position: absolute; right: 0; top: 0; padding: 6px 12px; background: rgb(11 22 41 / .72); color: rgb(244 241 236 / .88); font-size: var(--fs-small); }
.testata { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 8px clamp(16px, 3vw, 32px); background: var(--board-red); color: #fff; }
.testata__titolo { font: 900 clamp(2rem, 1.5rem + 2vw, 3.25rem)/1 var(--f-vinile); text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 1px 0 rgb(0 0 0 / .25); }
.testata__sigla { font-size: var(--fs-small); font-weight: 700; letter-spacing: .02em; display: none; }
.testata--sottile { min-height: 52px; margin-top: 28px; }
.testata--sottile .testata__titolo { font-size: clamp(1.5rem, 1.3rem + 1vw, 2.25rem); }

.comandi { display: grid; gap: 20px; padding: 24px clamp(16px, 3vw, 32px) 12px; }
.linee { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; margin-inline: calc(clamp(16px, 3vw, 32px) * -1); padding-inline: clamp(16px, 3vw, 32px); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); scrollbar-width: none; }
.linee::-webkit-scrollbar { display: none; }
.chip { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 1.5px solid var(--board-ink); border-radius: 6px; background: transparent; color: var(--board-ink); font: 700 1.0625rem var(--f-vinile); text-transform: uppercase; letter-spacing: .05em; transition: background-color 160ms, color 160ms, transform 100ms; }
.chip:hover { background: rgb(19 32 58 / .08); }
.chip:active { transform: scale(.97); }
.chip.is-attivo { background: var(--board-ink); color: var(--board-light); }
.chip__n { font-weight: 600; font-variant-numeric: tabular-nums; opacity: .8; }
.chip__n:not(:empty)::before { content: "("; } .chip__n:not(:empty)::after { content: ")"; }
.pallino { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--c, #888); box-shadow: inset 0 0 0 1.5px rgb(19 32 58 / .55); flex: none; }
.pallino--piccanti { --c: var(--linea-piccanti); } .pallino--bianche { --c: var(--linea-bianche); } .pallino--vegetariane { --c: var(--linea-vegetariane); }
.pallino--salsiccia { --c: var(--linea-salsiccia); } .pallino--burrata { --c: var(--linea-burrata); } .pallino--porchetta { --c: var(--linea-porchetta); }
.chip.is-attivo .pallino { box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .55); }
.ricerca { display: grid; gap: 4px; max-width: 440px; }
.ricerca__et { font: 700 .95rem var(--f-vinile); text-transform: uppercase; letter-spacing: .08em; }
.ricerca__campo { position: relative; display: flex; align-items: center; border-bottom: 2px solid var(--board-ink); }
.ricerca__campo > .ico { position: absolute; left: 0; width: 22px; height: 22px; pointer-events: none; }
.ricerca input { flex: 1; min-width: 0; height: 48px; padding: 0 48px 0 32px; border: 0; background: transparent; color: var(--board-ink); font: 400 1.125rem var(--f-testo); outline-offset: 2px; }
.ricerca input::placeholder { color: var(--board-ink-soft); opacity: 1; }
.ricerca input::-webkit-search-cancel-button { display: none; }
.ricerca__pulisci { position: absolute; right: -4px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: var(--board-ink); border-radius: 50%; }
.ricerca__pulisci:hover { background: rgb(19 32 58 / .08); }
.conteggio { font-weight: 700; color: var(--board-ink-soft); font-variant-numeric: tabular-nums; }

.listino-corpo { view-transition-name: righe; padding: 4px clamp(16px, 3vw, 32px) 8px; }
.listino { list-style: none; padding: 0; }
.riga {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 4.6em 44px; grid-template-areas: "testa prezzo agg" "ing ing agg";
  column-gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--board-groove); box-shadow: 0 1px 0 var(--board-groove-hi);
  break-inside: avoid; background-color: transparent; transition: background-color 220ms; scroll-margin-top: calc(var(--fascia-h) + 16px);
}
.riga__testa { grid-area: testa; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.riga__nome { font: 800 var(--fs-row)/1.05 var(--f-vinile); text-transform: uppercase; letter-spacing: .02em; color: var(--board-ink); text-shadow: 0 1px 0 rgb(255 255 255 / .7); outline-offset: 4px; }
.riga__linee { display: inline-flex; gap: 5px; }
.riga__ingredienti { grid-area: ing; color: var(--board-ink-soft); text-wrap: pretty; padding-top: 2px; }
.riga__prezzo { grid-area: prezzo; font: 800 var(--fs-row)/1 var(--f-vinile); font-variant-numeric: tabular-nums; text-align: right; color: var(--board-ink); text-shadow: 0 1px 0 rgb(255 255 255 / .7); }
.euro { font-size: .7em; color: var(--board-ink-soft); }
.riga__aggiungi { grid-area: agg; position: static; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1.5px solid var(--board-ink); background: transparent; color: var(--board-ink); transition: transform 100ms, background-color 160ms; }
.riga__aggiungi::after { content: ""; position: absolute; inset: 0; cursor: pointer; }
.riga__aggiungi:active { transform: scale(.92); }
.riga:hover { background-color: rgb(255 255 255 / .55); }
.riga__badge { display: none; font: 800 1.0625rem/1 var(--f-vinile); letter-spacing: .02em; }
.riga.is-in-lista { background-color: var(--board-lit); box-shadow: 0 1px 0 var(--board-groove-hi), inset 0 0 50px -10px rgb(255 196 107 / .5); }
.riga.is-in-lista .riga__aggiungi { background: var(--board-red); border-color: var(--board-red); color: #fff; }
.riga.is-in-lista .riga__aggiungi .ico { display: none; }
.riga.is-in-lista .riga__badge { display: block; }
.riga.is-pop .riga__badge { animation: badge 180ms var(--ease-out); }
@keyframes badge { from { transform: scale(.6); } }
.riga.is-lampo { animation: lampo 120ms ease-out; }
@keyframes lampo { 50% { filter: brightness(1.08); } }
.riga.is-flash { animation: flash 600ms ease-in-out 2; }
@keyframes flash { 0%, 100% { background-color: transparent; } 50% { background-color: var(--board-lit); box-shadow: 0 1px 0 var(--board-groove-hi), inset 0 0 60px -6px rgb(255 196 107 / .8); } }
.riga--mese { grid-template-columns: minmax(0, 1fr) auto auto; }
.riga__chiedi { grid-area: agg; justify-self: end; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; background: var(--board-ink); color: var(--amber); text-decoration: none; font: 700 1.0625rem var(--f-vinile); text-transform: uppercase; letter-spacing: .06em; }
.riga__chiedi:hover { filter: brightness(1.25); }
.focacce { margin-inline: calc(clamp(16px, 3vw, 32px) * -1); }
.focacce .listino { padding-inline: clamp(16px, 3vw, 32px); }
.vuoto { padding: 40px 0 32px; display: grid; gap: 12px; justify-items: start; }
.vuoto__titolo { font: 800 var(--fs-row)/1.1 var(--f-vinile); text-transform: uppercase; }
.vuoto__testo { color: var(--board-ink-soft); }
.btn-scuro { min-height: 44px; padding: 0 20px; border: 0; border-radius: 10px; background: var(--board-ink); color: var(--board-light); font: 700 1.0625rem var(--f-vinile); text-transform: uppercase; letter-spacing: .06em; transition: filter 160ms, transform 100ms; }
.btn-scuro:hover { filter: brightness(1.3); } .btn-scuro:active { transform: scale(.97); }
.tabellone__piede { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 16px clamp(16px, 3vw, 32px); margin-top: 8px; background: linear-gradient(var(--board-edge), var(--board-light)); font-size: var(--fs-small); color: var(--board-ink-soft); }
.html-no-js-nota { display: none; }
html:not(.js) .comandi, html:not(.js) .riga__aggiungi { display: none; }

::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(righe) { animation-duration: 120ms; }
::view-transition-new(righe) { animation-duration: 160ms; }

/* ---------- lista per la telefonata ---------- */
.lista { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; flex-direction: column; gap: 8px; color: var(--board-ink); animation: lista-in 280ms var(--ease-out); }
@keyframes lista-in { from { transform: translateY(100%); opacity: 0; } }
.lista__barra, .lista__pannello { background: var(--board-light); border: 6px solid; border-color: #dfe3e9 #b4bbc6 #7d8593 #b4bbc6; border-radius: 10px; box-shadow: 0 20px 40px -12px rgb(0 0 0 / .7), 0 0 40px 0 rgb(238 243 239 / .14); }
.lista__barra { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 10px; }
.lista__apri { flex: 1; min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 0; background: transparent; padding: 0 8px; text-align: left; border-radius: 8px; }
.lista__apri:hover { background: rgb(19 32 58 / .06); }
.lista__apri-testo { font-weight: 600; min-width: 0; }
.lista__apri-testo strong { font: 800 1.125rem var(--f-vinile); text-transform: uppercase; letter-spacing: .04em; }
.lista__sep { color: var(--board-ink-soft); }
.lista__tot { font-weight: 700; font-variant-numeric: tabular-nums; }
.lista__tot.tic { animation: tic 160ms ease-out; }
@keyframes tic { from { opacity: .35; } }
.lista__apri .ico { transition: transform 240ms var(--ease-out); }
.lista__apri[aria-expanded="true"] .ico { transform: rotate(180deg); }
.lista__pannello { max-height: 70vh; overflow: auto; padding: 18px 20px 20px; opacity: 0; transform: translateY(12px); transition: opacity 160ms ease-in, transform 160ms ease-in; }
.lista__pannello.is-aperta { opacity: 1; transform: none; transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
.lista__titolo { font: 800 1.75rem/1 var(--f-vinile); text-transform: uppercase; margin-bottom: 8px; }
.lista__righe { list-style: none; padding: 0; margin-bottom: 12px; }
.lr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 12px; padding: 4px 0; border-bottom: 1px solid var(--board-groove); box-shadow: 0 1px 0 var(--board-groove-hi); }
.lr__nome { font: 800 1.25rem/1.1 var(--f-vinile); text-transform: uppercase; letter-spacing: .02em; }
.lr__q { display: inline-flex; align-items: center; gap: 2px; }
.lr__q button { width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid var(--board-ink); border-radius: 50%; background: transparent; color: var(--board-ink); transition: transform 100ms; }
.lr__q button:active { transform: scale(.92); }
.lr__n { min-width: 2ch; text-align: center; font: 800 1.25rem var(--f-vinile); font-variant-numeric: tabular-nums; }
.lr__sub { min-width: 5.5ch; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.lista__totale { font-size: 1.1875rem; margin-top: 8px; }
.lista__totale strong { font: 800 1.5rem var(--f-vinile); font-variant-numeric: tabular-nums; }
.lista__nota { color: var(--board-ink-soft); margin-top: 4px; }
.lista__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 16px; }
.lista__svuota, .lista__conferma button { min-height: 44px; border: 0; background: transparent; color: var(--board-ink); text-decoration: underline; padding: 0 6px; }
.lista__conferma { color: var(--board-ink); font-weight: 600; }
.lista__conferma button { font-weight: 700; }

/* ---------- porta ---------- */
.porta-griglia { display: grid; gap: 48px; }
.porta { position: relative; display: flex; flex-direction: column; min-height: 640px; border: 12px solid; border-color: #dfe3e9 #b4bbc6 #7d8593 #b4bbc6; border-radius: 6px; background: var(--interior-1); overflow: hidden; box-shadow: 0 30px 60px -28px rgb(0 0 0 / .8); }
.porta__foto, .porta__velo, .porta__riflesso { position: absolute; inset: 0; }
.porta__riflesso { background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .06) 38%, transparent 46%); z-index: 2; pointer-events: none; }
.porta__maniglia { position: absolute; z-index: 3; top: 56px; left: 18px; right: 18px; height: 10px; border-radius: 5px; background: linear-gradient(180deg, var(--alu-1), var(--alu-3)); box-shadow: 0 6px 8px -3px rgb(0 0 0 / .6); }
.porta__satinata { position: relative; z-index: 1; margin-top: 190px; padding: 28px clamp(20px, 4vw, 36px); background: linear-gradient(rgb(15 29 54 / .58), rgb(15 29 54 / .58)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-block: 1px solid rgb(255 255 255 / .22); }
.orari { width: 100%; border-collapse: collapse; margin-top: 14px; }
.orari th, .orari td { padding: 7px 0; border-bottom: 1px solid rgb(255 255 255 / .14); }
.orari th { text-align: left; font: 700 1.25rem/1.1 var(--f-vinile); text-transform: uppercase; letter-spacing: .05em; position: relative; }
.orari td { text-align: right; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.orari tr:last-child th, .orari tr:last-child td { border-bottom: 0; }
.orari .is-oggi th, .orari .is-oggi td { color: var(--amber); font-weight: 700; }
.orari .is-oggi th::before { content: ""; position: absolute; left: -14px; top: 50%; width: 6px; height: 24px; margin-top: -12px; border-radius: 3px; background: var(--amber-core); box-shadow: 0 0 0 1px var(--amber), 0 0 12px 2px var(--amber-glow); }
.stato--porta { margin-top: 14px; }
.servizio { display: inline-flex; align-items: center; gap: 10px; font: 700 1.375rem var(--f-vinile); text-transform: uppercase; letter-spacing: .08em; text-shadow: 0 1px 0 rgb(0 0 0 / .35); }
.stelle { display: inline-flex; gap: 2px; }
.stella { width: 22px; height: 22px; color: var(--amber-deep); }
.stella--parziale { position: relative; display: block; }
.stella--vuota { color: #cfc8bb; }
.stella--piena { position: absolute; inset: 0; clip-path: inset(0 20% 0 0); }
.stella--90 .stella--piena { clip-path: inset(0 10% 0 0); }
.adesivi__nota { font-size: var(--fs-small); color: var(--dusk-ink); }
.citazione { display: grid; gap: 10px; max-width: 34ch; }
.citazione--2 { max-width: 40ch; margin-left: clamp(0px, 4vw, 56px); }
.citazione blockquote { font: italic 400 clamp(1.25rem, 1rem + 1vw, 1.75rem)/1.35 var(--f-testo); text-wrap: balance; }
.citazione figcaption { font-size: var(--fs-small); color: var(--dusk-ink); }

/* ---------- dove ---------- */
.dove-griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.dove-testo { display: grid; gap: 22px; justify-items: start; }
.civico { position: absolute; right: -16px; bottom: -22px; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 8px; background: var(--dusk-700); color: var(--tube-white); font: 800 1.875rem var(--f-vinile); box-shadow: inset 0 0 0 3px var(--dusk-700), inset 0 0 0 4px var(--tube-white), 0 8px 12px -6px rgb(0 0 0 / .6); transform: rotate(3deg); }
.indirizzo { font-size: 1.25rem; font-weight: 600; }
.azioni--dove { margin-top: 4px; }
.mappa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.mappa__cornice { border: 12px solid; border-color: #dfe3e9 #b4bbc6 #7d8593 #b4bbc6; border-radius: 10px; background: var(--dusk-950); box-shadow: 0 30px 50px -24px rgb(0 0 0 / .8); }
.mappa__riquadro { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--rumore), linear-gradient(160deg, var(--dusk-800), var(--dusk-950)); }
.mappa__riquadro iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: invert(.92) hue-rotate(180deg) saturate(.7) brightness(.95); }
.mappa__nota { font-size: var(--fs-small); color: var(--dusk-ink); }

/* ---------- chiusura / footer ---------- */
.chiusura { padding-block: clamp(5rem, 3rem + 8vw, 9rem); text-align: center; position: relative; }
.chiusura__in { display: grid; justify-items: center; gap: 36px; }
.chiusura__frase { width: min(100%, 680px); }
.neon--frase { width: 100%; height: auto; }
.cta--finale { width: min(100%, 380px); height: 64px; }
.piede { background: var(--dusk-950); padding-block: 56px calc(40px + env(safe-area-inset-bottom)); border-top: 2px solid #0a1424; box-shadow: inset 0 1px 0 #213a63; font-size: var(--fs-small); }
.piede__in { display: grid; gap: 32px; }
.piede p + p { margin-top: 4px; }
.piede__nome { font: 800 1.125rem var(--f-vinile); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.piede__col { color: var(--dusk-ink); }
.piede__col a { color: var(--tube-white); }
.piede__social { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; }
.piede__fine { display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between; color: var(--dusk-ink); padding-top: 24px; border-top: 1px solid var(--dusk-800); }

/* ---------- barra di chiamata (mobile) ---------- */
.barra-chiama { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(#0a1424, #0a1424) top / 100% 2px no-repeat, rgb(11 22 41 / .96); box-shadow: 0 -1px 0 #213a63; transform: translateY(100%); transition: transform 280ms var(--ease-out); }
.barra-chiama.is-visibile { transform: none; }
.barra-chiama__stato { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1rem; line-height: 1.25; min-width: 0; }
.tubo { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--tube-off); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }
html.is-aperto .tubo { background: var(--neon-green-core); box-shadow: 0 0 0 2px var(--neon-green), 0 0 10px 2px var(--neon-green-glow); }

@media (max-width: 767px) {
  :root { --fascia-h: 56px; }
  .neon--logo { width: min(74vw, 280px); }
  body { padding-bottom: 76px; }
  .barra-chiama { display: flex; }
  html.ha-lista .barra-chiama { display: none; }
  .lista { padding: 0; gap: 0; }
  .lista__barra { border-radius: 10px 10px 0 0; border-bottom: 0; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .lista__pannello { border-radius: 10px 10px 0 0; border-bottom: 0; }
  .lista__apri-testo strong { display: block; }
  .lista__apri-testo .lista__sep:first-of-type { display: none; }
  .linee { flex-wrap: nowrap; }
  .cta { padding: 0 18px; gap: 10px; }
  .cta__verbo { font-size: 1.375rem; }
}
@media (min-width: 640px) {
  .fascia__indirizzo { display: inline; }
}
@media (min-width: 768px) {
  .fascia__nav { gap: 28px; }
  .fascia__tel-num { display: inline; }
  .fascia__tel { border-color: transparent; padding-inline: 4px; }
  .fascia__tel:hover { background: none; text-decoration: underline; }
  .solo-desktop { display: inline; }
  .fascia__nav a.solo-desktop { display: inline-block; }
  .cta--hero { width: auto; }
  .lista { left: 50%; right: auto; bottom: 16px; width: min(640px, calc(100% - 32px)); transform: translateX(-50%); animation-name: lista-in-d; }
  @keyframes lista-in-d { from { transform: translate(-50%, 100%); opacity: 0; } }
  .linee { flex-wrap: wrap; overflow: visible; mask-image: none; -webkit-mask-image: none; margin-inline: 0; padding-inline: 0; }
  .tabellone__pannelli { grid-template-columns: 1fr 1fr; }
  .testata__sigla { display: block; }
  .vetrofanie { grid-template-columns: repeat(12, 1fr); gap: 32px 24px; align-items: start; }
  .vf--sofia { grid-column: 1 / span 5; grid-row: 1; justify-self: start; }
  .vf--robbe { grid-column: 6 / span 3; grid-row: 1; margin-top: 64px; }
  .vf--campana { grid-column: 9 / span 4; grid-row: 1; margin-top: 18px; }
  .vf--tropea { grid-column: 2 / span 3; grid-row: 2; margin-top: 20px; }
  .vf--lorenzo { grid-column: 5 / span 4; grid-row: 2; margin-top: 76px; }
  .vf--burrosa { grid-column: 9 / span 4; grid-row: 2; margin-top: 8px; }
  .vf:nth-child(2n+3) { margin-top: 0; }
  .vf--robbe { margin-top: 64px; } .vf--campana { margin-top: 18px; } .vf--tropea { margin-top: 20px; } .vf--lorenzo { margin-top: 76px; } .vf--burrosa { margin-top: 8px; }
  .vetrofania img { width: var(--w, 190px); }
  .vf--sofia { --w: 290px; } .vf--robbe { --w: 190px; } .vf--campana { --w: 230px; } .vf--tropea { --w: 180px; } .vf--lorenzo { --w: 240px; } .vf--burrosa { --w: 200px; }
  .porta__satinata { margin-top: 220px; }
  .piede__in { grid-template-columns: auto 1fr 1fr; align-items: start; }
  .piede__fine { grid-column: 1 / -1; }
  .mappa__riquadro { aspect-ratio: 16 / 10; }
  .dove-griglia { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
}
@media (min-width: 900px) {
  .neon--logo { width: clamp(280px, min(36vw, calc(100svh - 524px)), 520px); }
  .logo { padding-top: 12px; }
  .vetrina { display: grid; grid-template-columns: 1fr 12px 300px; margin-top: 20px; }
  .vetro--largo { margin: 0 0 0 12px; }
  .vetro__testo { padding: 24px 40px; min-height: 304px; }
  .montante { display: block; background: linear-gradient(90deg, var(--alu-1), var(--alu-3)); }
  .vetro--porta { position: relative; top: auto; right: auto; width: auto; margin: 0 12px 0 0; background: linear-gradient(180deg, var(--interior-2), var(--interior-1)); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 44px 24px 24px; min-height: 304px; z-index: 1; border-radius: 3px; }
  .vetro--porta::after { display: block; }
  .porta__vetro { display: block; position: absolute; inset: 0; background: radial-gradient(60% 40% at 30% 0%, rgb(255 196 107 / .28), transparent 70%), radial-gradient(50% 35% at 85% 30%, rgb(255 196 107 / .14), transparent 70%); }
  .porta__insegnina { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 190px; margin-left: -10px; }
  .maniglione { display: block; position: absolute; right: 16px; top: 50%; width: 10px; height: 160px; margin-top: -80px; border-radius: 5px; background: linear-gradient(90deg, var(--alu-1), var(--alu-3)); box-shadow: 4px 6px 8px -3px rgb(0 0 0 / .6); }
  .porta__oggi { display: grid; justify-items: center; position: relative; text-align: center; }
  .porta__chiuso { display: block; position: absolute; top: 96px; left: 50%; transform: translateX(-50%); margin-left: -10px; font: 700 1.5rem var(--f-vinile); text-transform: uppercase; letter-spacing: .2em; color: var(--dusk-ink); }
  .porta__oggi-et { font: 600 1rem var(--f-vinile); text-transform: uppercase; letter-spacing: .24em; color: var(--dusk-ink); }
  .porta__ore { font: 800 2.5rem/1 var(--f-vinile); letter-spacing: .02em; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgb(0 0 0 / .35); }
  .porta-griglia { grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
  .porta { grid-column: 1 / span 5; min-height: 780px; }
  .muro-porta { grid-column: 7 / span 6; padding-top: 12px; gap: 32px; }
  .porta__maniglia { top: 64px; }
  .porta__satinata { margin-top: 250px; }
  .tabellone__pannelli { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .comandi { grid-template-columns: 1fr 360px; align-items: end; row-gap: 12px; }
  .conteggio { grid-column: 1 / -1; }
  .listino--principale, .listino-corpo > .listino { columns: 2; column-gap: 64px; column-rule: 2px solid var(--board-groove); }
  .listino--focacce { columns: 2; column-gap: 64px; column-rule: 2px solid var(--board-groove); }
}

/* ---------- revisione: terreno, insegna, luce, vetrina, porta, mappa, tabellone ---------- */
.cifre { font-family: var(--f-vinile); font-weight: 700; font-size: 1.12em; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cta__num { font: 700 1.4rem/1 var(--f-vinile); letter-spacing: .03em; }
.fascia__tel-num { font-size: 1.25rem; letter-spacing: .03em; }

/* insegna: pannello posteriore trasparente e distanziali */
.backer__disc { fill: rgb(170 200 245 / .05); stroke: rgb(220 235 255 / .24); stroke-width: 1.5; }
.backer__bordo { fill: none; stroke: rgb(255 255 255 / .07); stroke-width: 1; }
.neon--logo .acceso { opacity: .86; }
.neon .ponticelli path { stroke: #0a1020; stroke-width: 3.6; }
.neon .elettrodi rect { fill: #1a1f2b; stroke: #4a5266; stroke-width: .9; }
.insegna { padding-top: 0; }
.logo { padding-top: 0; }
.logo__sotto { margin-top: 6px; }
.vetrina { margin-top: 10px; }
.vetro__testo { gap: 8px; }

/* CTA: tubo ambra acceso, la cosa piu luminosa della schermata */
.cta, .btn-neon-scuro {
  --cta: 1.5; position: relative; border: 2.5px solid var(--amber);
  background: radial-gradient(120% 140% at 50% 50%, rgb(255 205 130 / .46), rgb(255 196 107 / .24));
  box-shadow: 0 0 calc(22px * var(--cta)) calc(3px * var(--cta)) rgb(255 196 107 / calc(.5 * var(--cta))), inset 0 0 calc(16px * var(--cta)) rgb(255 196 107 / calc(.4 * var(--cta)));
}
.cta::after, .btn-neon-scuro::after { content: ""; position: absolute; inset: -2.5px; border: 1px solid var(--amber-core); border-radius: inherit; pointer-events: none; }
.cta:hover, .btn-neon-scuro:hover { --cta: 2; }
.cta:active, .btn-neon-scuro:active { --cta: .6; }
.btn-neon-scuro { --cta: .55; }
.cta--scura { border: 0; background: var(--board-ink); box-shadow: 0 8px 14px -8px rgb(0 0 0 / .55); }
.cta--scura::after { display: none; }
.cta--scura:hover { background: var(--board-ink); }
.cta--muro { justify-self: start; }

/* frase finale: tubi sottili, un gradino sotto */
.neon--frase { width: calc(clamp(2.5rem, 6vw, 4.5rem) * 5.93); max-width: 100%; }
.chiusura__frase { width: auto; }

/* ritmo */
.sez { padding-block: clamp(4rem, 2.5rem + 5vw, 7.5rem); }
.chiusura { padding-block: clamp(4rem, 2.5rem + 5vw, 7.5rem); }
.sez--tabellone { padding-top: clamp(3rem, 2rem + 4vw, 6rem); }
#vetrina.sez { padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); }

/* vetrina: vetro con foto sfocata, cielo e montante */
.vetrata { background: var(--interior-1); }
.vetrata__fondo { position: absolute; inset: 0; overflow: hidden; }
.vetrata__fondo img { width: 100%; height: 100%; object-fit: cover; filter: blur(16px) saturate(1.1) brightness(.72); transform: scale(1.12); }
.vetrata__velo { position: absolute; inset: 0; background: rgb(24 14 8 / .38); }
.vetrata__velo::after { content: ""; position: absolute; inset: 0; background: rgb(255 196 107 / .4); mix-blend-mode: soft-light; }
.vetrata__cielo { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(110 150 225 / .30), rgb(110 150 225 / .10) 16%, transparent 34%); pointer-events: none; z-index: 2; }
.vetrofanie::before { display: none; }
@media (min-width: 768px) {
  .vetrofanie { grid-template-columns: repeat(7, 1fr) 14px repeat(5, 1fr); column-gap: 18px; }
  .vetrofanie::before { display: block; content: ""; grid-column: 8; grid-row: 1 / span 2; align-self: stretch; margin-block: calc(clamp(20px, 4vw, 56px) * -1); background: linear-gradient(90deg, var(--alu-1), var(--alu-3)); box-shadow: 5px 0 12px -5px rgb(0 0 0 / .6); }
  .vf--sofia { grid-column: 1 / span 4; grid-row: 1; justify-self: start; margin-top: 0; }
  .vf--robbe { grid-column: 5 / span 3; grid-row: 1; margin-top: 70px; }
  .vf--campana { grid-column: 9 / span 5; grid-row: 1; margin-top: 18px; justify-self: center; }
  .vf--tropea { grid-column: 1 / span 3; grid-row: 2; margin-top: 10px; }
  .vf--lorenzo { grid-column: 4 / span 4; grid-row: 2; margin-top: 64px; justify-self: center; }
  .vf--burrosa { grid-column: 9 / span 5; grid-row: 2; margin-top: 30px; justify-self: center; }
  .vf--sofia { --w: 300px; } .vf--robbe { --w: 200px; } .vf--campana { --w: 260px; } .vf--tropea { --w: 190px; } .vf--lorenzo { --w: 250px; } .vf--burrosa { --w: 230px; }
}

/* porta: foto ritagliata sulla pizza, vetro, adesivi */
.porta { min-height: 0; }
.porta__foto { position: absolute; inset: 0 0 auto 0; height: 420px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.porta__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 44% 58%; filter: brightness(.72) sepia(.6) saturate(1.5) hue-rotate(-12deg); }
.porta__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(70 36 10 / .35), rgb(20 10 4 / .1) 40%, transparent); }
.porta__velo::after { content: ""; position: absolute; inset: 0; background: rgb(255 170 60 / .45); mix-blend-mode: soft-light; }
.porta__satinata { margin-top: 300px; }
.porta__basso { position: relative; z-index: 1; display: grid; gap: 12px; justify-items: start; padding: 28px clamp(20px, 4vw, 36px) 28px; }
.adesivi { display: grid; gap: 14px; justify-items: start; }
.adesivo { display: flex; align-items: center; gap: 14px; padding: 8px 22px 8px 16px; border-radius: 22px; background: var(--tube-white); color: var(--board-ink); text-decoration: none; box-shadow: 0 0 0 1px rgb(0 0 0 / .22), 0 0 0 3px rgb(244 241 236 / .35), 0 12px 16px -8px rgb(0 0 0 / .6); transform: rotate(-1.5deg); transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out); }
a.adesivo:hover { transform: translateY(-3px) rotate(0deg); }
.adesivo--b { transform: rotate(1.2deg); margin-left: 18px; }
.adesivo__voto { font: 900 3rem/1 var(--f-vinile); font-size: 3rem; }
.adesivo__dati { display: grid; gap: 2px; }
.adesivo__n { font-size: var(--fs-small); font-weight: 700; }
.adesivi__nota { font-size: var(--fs-small); text-shadow: 0 1px 0 rgb(0 0 0 / .4); }
.servizi { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 6px; }
.servizi__nota { text-shadow: 0 1px 0 rgb(0 0 0 / .35); }
.orari td { font: 700 1.375rem/1.1 var(--f-vinile); letter-spacing: .03em; }
.orari .is-oggi { background: linear-gradient(90deg, transparent, rgb(255 196 107 / .34) 6%, rgb(255 196 107 / .34) 94%, transparent); }
.orari .is-oggi th, .orari .is-oggi td { color: var(--amber-core); }
.orari .is-oggi th::before { display: none; }
.muro-porta { display: grid; align-content: start; gap: 32px; }
@media (min-width: 900px) { .muro-porta { align-self: center; } }
.citazione { max-width: 34ch; }

/* mappa: la facciata e la mappa */
.mappa__cornice { max-height: none; }
.mappa__riquadro { aspect-ratio: auto; min-height: 300px; background: var(--rumore), linear-gradient(180deg, #16294a, #12223f); background-blend-mode: overlay, normal; }
.mappa__muro { display: grid; justify-items: center; gap: 18px; padding: 28px 20px; text-align: center; }
.targa-strada { margin: 0 14px 0 0; padding: 14px clamp(60px, 14vw, 76px) 16px clamp(20px, 5vw, 40px); }
.mappa__nota { max-width: 36ch; }

/* tabellone: binari delle lettere e lettere montate a mano */
.riga { border-bottom: 1px solid #7d8f87; box-shadow: 0 1px 0 #aebcb5, 0 2px 0 var(--board-groove-hi), inset 0 -3px 4px -3px rgb(0 0 0 / .16); }
.riga.is-in-lista { box-shadow: 0 1px 0 #aebcb5, 0 2px 0 var(--board-groove-hi), inset 0 0 50px -10px rgb(255 196 107 / .5); }
@keyframes flash { 0%, 100% { background-color: transparent; } 50% { background-color: var(--board-lit); box-shadow: 0 1px 0 #aebcb5, 0 2px 0 var(--board-groove-hi), inset 0 0 60px -6px rgb(255 196 107 / .8); } }
.riga__prezzo { text-shadow: 0 1px 0 rgb(255 255 255 / .7); }
.t { display: inline-block; transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)); }
.lr__sub, .lr__n, .lista__tot, .lista__totale strong { font-family: var(--f-vinile); }

@media (min-width: 900px) {
  .neon--logo { width: clamp(280px, calc(100svh - 346px), 560px); }
  .logo__sotto { margin-top: 4px; }
  .vetro__testo { padding: 18px 40px; min-height: 276px; }
  .vetro--porta { min-height: 276px; }
  .porta__oggi { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 10px; }
  .porta__oggi-et { font: 500 1.25rem var(--f-vinile); letter-spacing: .02em; text-transform: none; color: var(--tube-white); }
  .porta__ore { font: 800 2.125rem/1 var(--f-vinile); }
  .porta__chiuso { top: 92px; }
  .muro-porta { padding-top: 24px; }
  .dove-griglia { align-items: center; }
  .mappa__riquadro { height: 340px; min-height: 0; }
}
@media (max-width: 899px) {
  .porta__foto { height: 340px; }
  .porta__satinata { margin-top: 240px; }
}

/* ---------- movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  .muro { animation-duration: 300ms; animation-delay: 0s; }
  .js .cta--hero { animation: none; }
  .vf.pronta img { clip-path: none; transform: rotate(var(--r)); }
  .vf.pronta { opacity: 0; }
  .vf.pronta.applicata { opacity: 1; transition: opacity 200ms; }
  .vf.pronta.applicata img { transition: none; }
  .vf.pronta.applicata .vf__etichetta { transition: none; }
  .vf.pronta .vf__etichetta { opacity: 1; }
  .tabellone { transition: none; }
  .tabellone.is-calo { filter: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .riga.is-lampo, .lista__tot.tic { animation: none; }
  .riga.is-flash { animation: none; background-color: var(--board-lit); }
  .lista { animation-duration: 1ms; }
  .lista__pannello, .lista__pannello.is-aperta { transition-duration: 1ms; transform: none; }
  .barra-chiama { transition-duration: 1ms; }
}

/* targa stradale dentro la facciata della mappa */
.targa-strada { position: relative; display: grid; border-radius: 10px; background: #f2f0ea; color: var(--board-ink); box-shadow: inset 0 0 0 4px #f2f0ea, inset 0 0 0 6px #b9b4a6, 0 16px 24px -10px rgb(0 0 0 / .6); max-width: 100%; }
/* a 768-899 la riga "dove" resta su una colonna: la targa non ha spazio per due */
@media (min-width: 768px) and (max-width: 899px) { .dove-griglia { grid-template-columns: minmax(0, 1fr); } }
/* aree toccabili >=44px (il layout non cambia: il margine negativo compensa il padding) */
.piede__col a:not(.piede__social) { display: inline-block; padding: 12px 2px; margin: -12px -2px; }
.piede__social { min-height: 44px; margin-block: -8px; }
.targa-strada__via { font: 800 clamp(2rem, 1rem + 3vw, 3.25rem)/1 var(--f-vinile); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; text-shadow: 0 1px 0 #fff, 0 -1px 0 rgb(0 0 0 / .22); }
#orari.sez { padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
#dove.sez { padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.vf--campana .vetrofania, .vf--burrosa .vetrofania { justify-items: center; text-align: center; }
@media (max-width: 899px) { .insegna { padding-top: var(--fascia-h); } }
.riga__nome .w { white-space: nowrap; }

/* ---------- ultimo giro: gerarchia della luce, porta, colonna ---------- */
:root { --neon-red-core: #ffc2b8; --neon-green-core: #b4f2cd; }

html.is-aperto .neon--aperto .acceso { opacity: .8; }

.cta, .btn-neon-scuro {
  background: rgb(255 196 107 / .2);
  box-shadow: 0 0 calc(16px * var(--cta)) calc(3px * var(--cta)) rgb(255 196 107 / calc(.6 * var(--cta))), 0 0 calc(44px * var(--cta)) calc(6px * var(--cta)) rgb(255 196 107 / calc(.3 * var(--cta))), inset 0 0 calc(22px * var(--cta)) rgb(255 196 107 / calc(.35 * var(--cta)));
}
.cta { --cta: 1; }
.btn-neon-scuro { --cta: .5; }
.cta:hover, .btn-neon-scuro:hover { --cta: 1.4; }
.cta:active, .btn-neon-scuro:active { --cta: .6; }
.cta__verbo, .cta__num { color: var(--amber-core); text-shadow: 0 0 8px rgb(255 196 107 / .8), 0 0 18px rgb(255 196 107 / .45); }
.ico--cta { filter: drop-shadow(0 0 4px rgb(255 196 107 / .8)); color: var(--amber-core); }
.btn-neon-scuro { text-shadow: 0 0 8px rgb(255 196 107 / .5); }
.cta--scura { background: var(--board-ink); box-shadow: 0 8px 14px -8px rgb(0 0 0 / .55); }
.cta--scura .cta__verbo, .cta--scura .cta__num { color: var(--amber); text-shadow: none; }
.cta--scura .ico--cta { filter: none; color: var(--amber); }
@media (min-width: 900px) {
  .porta__foto { height: 250px; }
  .porta__foto img { object-position: 44% 66%; }
  .porta__satinata { margin-top: 140px; padding-block: 22px; }
  .orari th, .orari td { padding-block: 5px; }
  .porta__basso { padding-block: 22px 24px; gap: 10px; }
  .porta-griglia { align-items: stretch; }
  .muro-porta { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; padding: 164px 0 36px; gap: 24px; }
  .cta--muro { align-self: flex-start; }
}
@media (min-width: 900px) { .citazione blockquote { font-size: clamp(1.5rem, 1rem + 1.2vw, 2rem); } .citazione figcaption { font-size: 1rem; } }
.neon--frase .tx-core-g { fill: #9fe6ba; } .neon--frase .tx-core-r { fill: #ffb3a7; }