/* PLUMBING_V 1 — reset tecnico canonico (Toolkit/boilerplate/plumbing.css) */
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ══════════ PANIFICIO PASTICCERIA ZILIO — Via Privata Montecassino 19, Ponte Lambro ══════════
   «Firmato Zilio»: il loro bollino ovale d'oro in corsivo bianco è il titolo della pagina (e la chiude); le feste hanno per titolo
   una placca bianca dal bordo a zigzag scritta «col cioccolato», come quelle che posano sui dolci; la firma è la campana di
   cioccolato di Pasqua (_zil_firma.mjs). Mea Culpa per il bollino, Bona Nova per il testo (cifre allineate: mai la scorciatoia
   «font:», che le azzera), Playpen Sans 600 per la scritta di cioccolato (tratto uniforme e punte tonde, come dalla tasca). */
:root {
  --panna: #FBF5E9;
  --carta: #F3E8D2;
  --fondente: #2E1A12;
  --fondente-2: #3F261A;
  --latte: #7B4B2F;
  --oro: #A38325;
  --oro-chiaro: #D9B94A;
  --bianco: #FFFFFF;
  --inchiostro: #2B1A10;
  --grigio: #5F5246;
  --filo: #D8C7A2;
  --ribes: #A61E2B;
  --aperto: #2E7D4F;
  --f-corsivo: 'Mea Culpa', 'Times New Roman', serif;
  --f-testo: 'Bona Nova', Georgia, 'Times New Roman', serif;
  --f-cioccolato: 'Playpen Sans', 'Trebuchet MS', Verdana, sans-serif;
  --gutter: 16px;
  --testata-h: 64px;
}
@media (min-width: 760px) { :root { --gutter: 28px; } }

*, *::before, *::after { box-sizing: border-box; font-variant-numeric: lining-nums; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--inchiostro); font-family: var(--f-testo); font-size: 1.12rem; line-height: 1.6; font-weight: 400; background: var(--panna); }
a { color: #7A2E12; }
b, strong { font-weight: 700; }
figure { margin: 0; }
.salta { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: #fff; color: #111; text-decoration: none; }
.salta:focus { top: 10px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
section[id] { scroll-margin-top: calc(var(--testata-h) + 14px); }
.intero { white-space: nowrap; }
:focus-visible { outline: 3px solid #7A2E12; outline-offset: 3px; }
.testata :focus-visible, .capitolo--fondente :focus-visible, .piede :focus-visible, .parole :focus-visible, .menu-mobile :focus-visible, .action-bar :focus-visible, .orario :focus-visible { outline-color: var(--oro-chiaro); }
/* finché i caratteri non arrivano il ripiego è più largo: una parola lunga va a capo invece di uscire (riserva-check, #233) */
h1, h2, h3 { overflow-wrap: anywhere; }

/* ── l'occhiello: maiuscoletto largo fra due trattini d'oro ── */
.occhio { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 1rem; line-height: 1.3; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--latte); }
.occhio::before, .occhio::after { content: ''; flex: none; width: 22px; height: 2px; background: var(--oro); }
.occhio--oro { color: var(--oro-chiaro); }
.occhio--oro::before, .occhio--oro::after { background: var(--oro-chiaro); }

/* ── il bollino: l'ovale d'oro in corsivo bianco che mettono sulle confezioni ── */
.bollino { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; border-radius: 50%; background-color: var(--oro); background-image: linear-gradient(118deg, rgba(255, 255, 255, 0) 30%, rgba(255, 244, 200, .2) 46%, rgba(255, 255, 255, 0) 62%); color: #FFFFFF; font-family: var(--f-corsivo); font-weight: 400; text-align: center; text-shadow: 0 1px 1px rgba(74, 54, 6, .55); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28), 0 2px 0 #7E6519, 0 14px 26px rgba(46, 26, 18, .22); }
.bollino > span { display: block; }
/* le cifre del bollino non in corsivo inglese: lì lo zero è alto due terzi di una maiuscola e si legge «o» (zero-check) */
.bollino__cifre { font-family: var(--f-testo); font-style: italic; font-size: .74em; letter-spacing: .03em; }
.bollino__sopra { font-size: clamp(1.55rem, 1rem + 2.6vw, 2.4rem); line-height: 1.15; }
.bollino__nome { font-size: clamp(4.6rem, 2.4rem + 10vw, 8rem); line-height: .95; }
.bollino__riga { font-size: clamp(1.3rem, .86rem + 2vw, 1.95rem); line-height: 1.3; text-wrap: balance; }
.bollino__citta { font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.6rem); line-height: 1.15; }
.bollino--grande { width: min(100%, 640px); margin: 6px auto 30px; padding: clamp(30px, 6vw, 46px) clamp(18px, 5vw, 60px) clamp(34px, 6.4vw, 50px); }
.bollino--medio { width: min(100%, 340px); margin: 0 auto 26px; padding: 26px 20px 30px; }
.bollino--medio .bollino__sopra { font-size: 1.5rem; }
.bollino--medio .bollino__nome { font-size: 4.2rem; }
.bollino--medio .bollino__citta { font-size: 1.7rem; }
.bollino--piccolo { width: 104px; height: 50px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.bollino--piccolo .bollino__nome { font-size: 2.3rem; line-height: 1; padding-top: 2px; }

/* ── la testata: una fascia di cioccolato ── */
.testata { position: sticky; top: 0; z-index: 50; background: var(--fondente); border-bottom: 3px solid var(--oro); }
.testata__dentro { display: flex; align-items: center; gap: 10px; max-width: 1240px; margin: 0 auto; padding: 5px var(--gutter); min-height: 61px; }
.marchio { display: inline-flex; text-decoration: none; }
.voci { display: none; }
.testata__azioni { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.lingue { display: flex; }
.lingue button { min-width: 38px; min-height: 40px; padding: 0 6px; border: 1px solid #8F7A5C; background: transparent; color: #FFFFFF; font-family: var(--f-testo); font-size: 1rem; font-weight: 700; cursor: pointer; }
.lingue button + button { border-left: 0; }
.lingue button.is-on { background: var(--panna); color: var(--fondente); }
.chiama { display: none; align-items: center; min-height: 42px; padding: 0 20px; border-radius: 999px; background: var(--oro-chiaro); color: var(--fondente); font-size: 1.05rem; font-weight: 700; text-decoration: none; }
.chiama:hover { background: #E6CB6A; }
.burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; border: 1px solid #8F7A5C; background: transparent; cursor: pointer; }
.burger span { display: block; height: 2px; background: #FFFFFF; transition: transform .2s, opacity .2s; }
.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); }
.menu-mobile { position: fixed; top: var(--testata-h); left: 0; right: 0; z-index: 49; max-height: calc(100vh - var(--testata-h)); overflow-y: auto; padding: 8px var(--gutter) 22px; background: var(--fondente); box-shadow: 0 12px 24px rgba(0, 0, 0, .35); }
.menu-mobile a { display: block; padding: 13px 2px 11px; border-bottom: 1px solid #5A4233; color: #FFFFFF; font-size: 1.3rem; line-height: 1.2; text-decoration: none; }
.menu-mobile__tel { display: flex !important; justify-content: center; gap: 8px; margin-top: 16px; border: 0 !important; border-radius: 999px; background: var(--oro-chiaro); color: var(--fondente) !important; font-weight: 700; padding: 13px 8px !important; }

/* ── l'apertura: tutto al centro, il bollino è il titolo; sotto, la foto della confezione a tutta larghezza ── */
.apertura { padding: 30px var(--gutter) 0; background: var(--panna); text-align: center; }
.apertura__dentro { max-width: 760px; margin: 0 auto; }
.apertura__frase { max-width: 30em; margin: 0 auto 20px; font-size: 1.22rem; line-height: 1.5; }
/* stato e voto su righe loro: lo stato scritto dal JS è più lungo di quello statico (firma-posto) */
.apertura__riga { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.voto { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 10px; margin: 0; }
.voto__n { font-size: 2.2rem; line-height: 1; font-weight: 700; color: var(--latte); }
.stato { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 1.08rem; line-height: 1.4; font-weight: 700; }
.stato::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: .45; flex: none; }
.stato.is-aperto::before { opacity: 1; background: var(--aperto); box-shadow: 0 0 0 3px rgba(46, 125, 79, .25); }
.apertura__azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.bottone { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; max-width: 100%; min-height: 52px; padding: 0 26px; border: 2px solid var(--fondente); border-radius: 999px; background: transparent; color: var(--fondente); font-size: 1.12rem; line-height: 1.2; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; transition: background .15s, color .15s; }
.bottone--pieno { background: var(--fondente); color: #FFFFFF; }
.bottone--pieno:hover { background: var(--latte); border-color: var(--latte); }
.bottone--vuoto:hover { background: var(--fondente); color: #FFFFFF; }
.apertura__foto { max-width: 1180px; margin: 38px auto 0; }
figcaption { margin-top: 10px; font-size: 1rem; line-height: 1.45; font-style: italic; color: var(--grigio); }
.apertura__foto figcaption { padding-bottom: 34px; }
.foto { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.foto img { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px var(--filo), 0 14px 28px rgba(46, 26, 18, .16); }

/* ── le parole di un cliente ── */
.parole { padding: 46px var(--gutter) 44px; background: var(--fondente); color: var(--panna); text-align: center; }
.parole__frase { max-width: 20em; margin: 0 auto; font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.7rem); line-height: 1.24; font-style: italic; text-wrap: balance; }
.parole__chi { margin: 16px 0 0; font-size: 1.05rem; color: #E4D6BC; }
.parole__chi b { color: var(--oro-chiaro); }

/* ── i capitoli ── */
.capitolo { padding: 62px max(var(--gutter), calc((100% - 1180px) / 2)) 64px; }
.capitolo--panna { background: var(--panna); }
.capitolo--carta { background: var(--carta); }
.capitolo--fondente { background: var(--fondente); color: #EFE4CF; }
.capitolo__titolo { max-width: 18em; margin: 0 0 18px; font-size: clamp(2.2rem, 1.5rem + 3vw, 3.7rem); line-height: 1.18; font-weight: 400; color: var(--fondente); text-wrap: balance; }
.capitolo--fondente .capitolo__titolo { color: #FFFFFF; }
.capitolo__intro { max-width: 40em; margin: 0 0 30px; font-size: 1.16rem; }

/* tutti i giorni: un riquadro col filo d'oro, il testo in basso e la foto a destra */
.cornice { display: grid; gap: 26px; padding: 22px 18px; border: 1px solid var(--oro); background: var(--panna); }
.cornice__testo { align-self: end; }
.banco { margin: 0; }
.banco div { padding: 12px 0 11px; border-top: 1px solid var(--filo); }
.banco dt { font-size: 1.5rem; line-height: 1.2; font-weight: 700; color: var(--latte); }
.banco dd { margin: 3px 0 0; }
.cornice__foto--alta { max-width: 460px; width: 100%; justify-self: center; }
.coppia { display: grid; gap: 24px; margin-top: 26px; }

/* le feste: la foto grande e la placca bianca che le sale sopra, a sinistra e a destra a turno */
.festa { display: grid; gap: 0; margin: 0 0 54px; }
.festa:last-child { margin-bottom: 0; }
.festa__foto { display: grid; gap: 12px; }
.festa--stretta .festa__foto { max-width: 520px; }
.festa__testo { position: relative; z-index: 1; margin-top: -26px; padding: 0 6px; }
.festa__testo p { max-width: 30em; margin: 14px 0 0; }
.placca { display: inline-block; max-width: 100%; margin: 0; filter: drop-shadow(0 6px 10px rgba(46, 26, 18, .28)); }
.placca span { display: block; padding: 20px 34px 18px; background-color: #FFFFFF; color: var(--fondente); font-family: var(--f-cioccolato); font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); line-height: 1.15; font-weight: 600; text-align: center; clip-path: polygon(2.2% 8%, 4.37% 0%, 6.55% 8%, 8.72% 0%, 10.89% 8%, 13.06% 0%, 15.24% 8%, 17.41% 0%, 19.58% 8%, 21.75% 0%, 23.93% 8%, 26.1% 0%, 28.27% 8%, 30.45% 0%, 32.62% 8%, 34.79% 0%, 36.96% 8%, 39.14% 0%, 41.31% 8%, 43.48% 0%, 45.65% 8%, 47.83% 0%, 50% 8%, 52.17% 0%, 54.35% 8%, 56.52% 0%, 58.69% 8%, 60.86% 0%, 63.04% 8%, 65.21% 0%, 67.38% 8%, 69.55% 0%, 71.73% 8%, 73.9% 0%, 76.07% 8%, 78.25% 0%, 80.42% 8%, 82.59% 0%, 84.76% 8%, 86.94% 0%, 89.11% 8%, 91.28% 0%, 93.45% 8%, 95.63% 0%, 97.8% 8%, 100% 15%, 97.8% 22%, 100% 29%, 97.8% 36%, 100% 43%, 97.8% 50%, 100% 57%, 97.8% 64%, 100% 71%, 97.8% 78%, 100% 85%, 97.8% 92%, 95.63% 100%, 93.45% 92%, 91.28% 100%, 89.11% 92%, 86.94% 100%, 84.76% 92%, 82.59% 100%, 80.42% 92%, 78.25% 100%, 76.07% 92%, 73.9% 100%, 71.73% 92%, 69.55% 100%, 67.38% 92%, 65.21% 100%, 63.04% 92%, 60.86% 100%, 58.69% 92%, 56.52% 100%, 54.35% 92%, 52.17% 100%, 50% 92%, 47.83% 100%, 45.65% 92%, 43.48% 100%, 41.31% 92%, 39.14% 100%, 36.96% 92%, 34.79% 100%, 32.62% 92%, 30.45% 100%, 28.27% 92%, 26.1% 100%, 23.93% 92%, 21.75% 100%, 19.58% 92%, 17.41% 100%, 15.24% 92%, 13.06% 100%, 10.89% 92%, 8.72% 100%, 6.55% 92%, 4.37% 100%, 2.2% 92%, 0% 85%, 2.2% 78%, 0% 71%, 2.2% 64%, 0% 57%, 2.2% 50%, 0% 43%, 2.2% 36%, 0% 29%, 2.2% 22%, 0% 15%); }

/* la campana */
.campana { display: grid; gap: 28px; align-items: center; }
.campana-fig { margin: 0; -webkit-user-select: none; user-select: none; }
.campana-fig > svg { max-width: 560px; margin: 0 auto; border: 1px solid var(--oro-chiaro); border-radius: 3px; }
.campana__didascalia { max-width: 32em; min-height: 3em; margin: 16px auto 0; font-size: 1.05rem; line-height: 1.5; text-align: center; color: #E4D6BC; }
.campana__d { display: none; }
.campana-fig[data-modo="0"] .campana__d[data-m="0"], .campana-fig[data-modo="1"] .campana__d[data-m="1"] { display: inline; }
.campana__modi { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.campana__modi button { min-height: 46px; padding: 0 26px; border: 2px solid var(--oro-chiaro); border-radius: 999px; background: transparent; color: var(--oro-chiaro); font-family: var(--f-testo); font-size: 1.1rem; line-height: 1.2; font-weight: 700; cursor: pointer; }
.campana__modi button:hover { background: rgba(217, 185, 74, .16); }
.campana__modi button[aria-pressed="true"] { background: var(--oro-chiaro); color: var(--fondente); }
/* senza JS il modo non cambia: i bottoni restano nascosti col loro posto (#240) */
.no-js .campana__modi { visibility: hidden; }

/* recensioni */
.voto--sezione { justify-content: flex-start; margin: 0 0 26px; }
.recensioni { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.recensione { margin: 0; padding: 20px 22px 16px; background: #FFFFFF; color: var(--inchiostro); border-top: 4px solid var(--oro); box-shadow: 0 8px 18px rgba(46, 26, 18, .08); }
.recensione__testo { margin: 0; font-size: 1.1rem; line-height: 1.6; overflow-wrap: anywhere; }
.recensione__chi { margin: 12px 0 0; font-size: 1rem; line-height: 1.4; color: var(--grigio); }
.recensione__chi b { display: block; font-size: 1.16rem; color: var(--latte); }
.recensioni__nota { max-width: 48em; margin: 22px 0 0; font-size: 1rem; color: var(--grigio); }

/* orari e strada */
.orari-riga { display: grid; gap: 30px; align-items: start; }
.orario { max-width: 480px; padding: 20px 22px 20px; background: var(--fondente); color: #EFE4CF; border-top: 4px solid var(--oro-chiaro); }
.orario__titolo { margin: 0 0 8px; font-size: 1.7rem; line-height: 1.1; font-weight: 700; color: var(--oro-chiaro); }
.giorno { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 8px 8px 7px; border-bottom: 1px solid #5A4233; }
.giorno:last-child { border-bottom: 0; }
.giorno__ore { margin-left: auto; white-space: nowrap; font-weight: 700; }
.giorno.is-today { background: rgba(217, 185, 74, .2); }
.orario .stato { margin-top: 14px; }
.orari__nota { margin: 10px 0 0; font-size: 1rem; color: #D9C9AB; }
.indirizzo { margin: 0 0 20px; }
.indirizzo div { display: grid; grid-template-columns: 8.4em minmax(0, 1fr); gap: 10px; padding: 10px 0 9px; border-bottom: 1px solid var(--filo); }
.indirizzo dt { font-weight: 700; color: var(--latte); }
.indirizzo dd { margin: 0; overflow-wrap: anywhere; }
.dove__azioni { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.cartina { margin-top: 34px; overflow: hidden; background: #FFFFFF; color: var(--inchiostro); border: 1px solid var(--oro); }
.cartina a { color: var(--inchiostro); }
.cartina iframe { display: block; width: 100%; height: 380px; border: 0; }
/* la nota della mappa a 16 px: sotto i 15 px gli accenti piccoli si perdono (accenti-check, #306) */
.cartina .mappa-clic__nota { font-size: 1rem; }

/* le domande */
.domande { max-width: 800px; border-top: 2px solid var(--oro); }
.domanda { border-bottom: 1px solid var(--filo); }
.domanda summary { position: relative; padding: 15px 36px 13px 2px; font-size: 1.3rem; line-height: 1.25; font-weight: 700; color: var(--fondente); cursor: pointer; list-style: none; }
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary::after { content: '+'; position: absolute; right: 6px; top: 12px; font-family: Arial, sans-serif; font-size: 1.6rem; line-height: 1; font-weight: 400; color: var(--oro); }
.domanda[open] summary::after { content: '−'; }
.domanda p { max-width: 40em; margin: 0 0 16px; }

/* ── la chiusura: di nuovo il bollino ── */
.piede { background: var(--fondente); color: #E4D6BC; border-top: 3px solid var(--oro); }
.piede__dentro { max-width: 900px; margin: 0 auto; padding: 48px var(--gutter) 100px; text-align: center; }
.piede__dove, .piede__orario { margin: 0 0 8px; overflow-wrap: anywhere; }
.piede a { color: #FFFFFF; }
.piede__cred { max-width: 52em; margin: 18px auto 10px; font-size: 1rem; }
.freccia { font-family: Arial, sans-serif; }

/* ── reveal (plumbing) ── */
.js .reveal { opacity: 0; }
.js .reveal.in-view { opacity: 1; }
html:not(.js) .reveal { opacity: 1; }
.reduced-motion .reveal { opacity: 1 !important; }

/* ── la barra e la lightbox ── */
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--fondente); box-shadow: 0 -3px 0 var(--oro); transform: translateY(110%); transition: transform .25s; }
.action-bar.is-visible { transform: translateY(0); }
.action-bar a { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 54px; padding: 0 4px; overflow-wrap: anywhere; text-align: center; color: #FFFFFF; font-size: 1.08rem; font-weight: 700; text-decoration: none; }
.action-bar a:first-child { background: var(--oro-chiaro); color: var(--fondente); }
#lightbox { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(24, 14, 9, .95); }
#lightbox[hidden] { display: none !important; }
#lightbox img { width: auto; max-width: min(1100px, 100%); max-height: 88vh; }
#lightboxClose { position: absolute; top: 14px; right: 16px; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 50%; background: transparent; color: #fff; font-size: 32px; line-height: 1; cursor: pointer; }

/* ── le larghezze ── */
@media (max-width: 379px) {
  .testata__dentro { gap: 6px; }
  .bottone { padding: 0 18px; }
  .placca span { padding: 18px 24px 16px; }
}
/* sul telefono l'etichetta sopra il valore: su due colonne la riga degli autobus andava su 7 righe strette */
@media (max-width: 599px) {
  .indirizzo div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (min-width: 560px) {
  .chiama { display: inline-flex; }
  /* la festa su una riga sola («Valentine’s Day» andava a capo e la placca raddoppiava) */
  .placca span { white-space: nowrap; }
  .festa__foto--due { grid-template-columns: 1.86fr 1.77fr; }
  .festa__foto--tre { grid-template-columns: 1.447fr .79fr; }
  .festa__foto--tre figure:last-child { grid-column: 1 / -1; }
}
@media (min-width: 760px) {
  .action-bar { display: none; }
  .piede__dentro { padding-bottom: 54px; }
  .apertura { padding-top: 44px; }
  .cornice { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 30px; padding: 30px 30px; }
  .coppia { grid-template-columns: 2.16fr 2.58fr; }
  .recensioni { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .recensione--larga { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .cornice { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 36px; padding: 34px 36px; }
  .orari-riga { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 44px; }
  /* la placca sale sopra la foto di lato, come un cartoncino posato */
  .festa { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: center; margin-bottom: 72px; }
  .festa__testo { margin-top: 0; padding: 0 0 0 30px; }
  /* la placca può essere larga quanto la colonna più il pezzo che sale sulla foto (troncati-check: «San Valentino» usciva di 16 px) */
  .festa__testo .placca { max-width: calc(100% + 110px); margin-left: -110px; transform: rotate(-2deg); }
  .festa--dx { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
  .festa--dx .festa__foto { order: 2; }
  .festa--dx .festa__testo { padding: 0 30px 0 0; text-align: right; }
  .festa--dx .festa__testo p { margin-left: auto; text-align: left; }
  .festa--dx .festa__testo .placca { margin-left: 0; margin-right: -110px; transform: rotate(2deg); }
  .festa--stretta { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); }
  .campana { grid-template-columns: minmax(0, .85fr) minmax(0, 560px); gap: 56px; }
  .recensioni { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .testata__dentro { gap: 16px; }
  .voci { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-left: 28px; }
  .voci a { padding: 4px 1px 2px; color: #FFFFFF; font-size: 1.08rem; text-decoration: none; }
  .voci a:hover, .voci a[aria-current="true"] { color: var(--oro-chiaro); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
  .burger { display: none; }
}

/*CAMPANA*/
/* la campana — generato da _zil_firma.mjs: non modificare a mano */
.campana__svg { display: block; width: 100%; height: auto; overflow: hidden; }
.cp-fondo { fill: #F3E8D2; }
.cp-ripiano { fill: #E4D3B0; }
.cp-vetro { fill: none; stroke: #2F7D6B; stroke-width: 7; }
.cp-cartone { fill: #D9B94A; }
.cp-festoni { fill: none; stroke: #B8962E; stroke-width: 11; stroke-linecap: round; stroke-dasharray: .1 17; }
.cp-ombra { fill: rgba(46, 26, 18, .32); }
.cp-corpo { stroke-width: 4; stroke-linejoin: round; }
.cp-corpo--fondente { fill: #3A2218; stroke: #1F110B; }
.cp-corpo--latte { fill: #8A5A3A; stroke: #5B3823; }
.cp-riga { fill: none; stroke-width: 5; stroke-linecap: round; }
.cp-riga--fondente { stroke: #1F110B; }
.cp-riga--latte { stroke: #5B3823; }
.cp-spalla { stroke-width: 3; opacity: .7; }
.cp-lume { fill: none; stroke: rgba(255, 255, 255, .13); stroke-width: 16; stroke-linecap: round; }
.cp-bianco { fill: #FFFDF6; stroke: #D9CDB4; stroke-width: 1.5; stroke-linejoin: round; }
.cp-piega { fill: none; stroke: #D9CDB4; stroke-width: 2; stroke-linecap: round; }
.cp-onda { fill: none; stroke: #A38325; stroke-width: 6; stroke-linecap: round; }
.campana-fig[data-modo="0"] .modo:not([data-m="0"]) { display: none; }
.campana-fig[data-modo="1"] .modo:not([data-m="1"]) { display: none; }
.firma-attesa .cp-decoro { opacity: 0; }
/*/CAMPANA*/

/*MAPPACLIC*/
/* la mappa Google si carica solo al clic (giro privacy 1/10/2026) */
.mappa-clic { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: var(--mappa-h, 320px); box-sizing: border-box; padding: 24px; text-align: center; background: repeating-linear-gradient(0deg, rgba(127, 127, 127, 0.14) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(127, 127, 127, 0.14) 0 1px, transparent 1px 28px); }
.mappa-clic__velo { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 32em; }
.mappa-clic__btn { display: inline-block; padding: 0.75em 1.4em; border: 2px solid currentColor; border-radius: 999px; color: inherit; font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; background: transparent; cursor: pointer; }
.mappa-clic__btn:hover, .mappa-clic__btn:focus-visible { text-decoration: underline; }
.mappa-clic__nota { margin: 0; font-size: 0.85em; line-height: 1.45; }
/*/MAPPACLIC*/