/* =====================================================================
   La Dispensa di Arilyn — stile del sito.
   Idea: una dispensa calda di sera. Scaffale di barattoli, biglietti
   d'invito per gli eventi, archi come la porta del negozio.
   Tutti i colori e le misure sono in :root.
   ===================================================================== */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../font/fraunces-latin-full-normal.woff2") format("woff2-variations"), url("../font/fraunces-latin-full-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("../font/fraunces-latin-full-italic.woff2") format("woff2-variations"), url("../font/fraunces-latin-full-italic.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("../font/figtree-latin-wght-normal.woff2") format("woff2-variations"), url("../font/figtree-latin-wght-normal.woff2") format("woff2"); }

:root {
  /* colori: insegna e Instagram del negozio, scaldati */
  --latte:            #E6CAA6;   /* fondo: avena-caramello */
  --carta:            #F6E5CE;   /* schede: crema, mai bianco */
  --crema:            #E6CAA6;
  --crema-scura:      #DDBB98;
  --terracotta:       #A4532F;
  --terracotta-scura: #82401F;
  --pesca:            #E8B892;
  --salvia:           #8E9B7E;
  --salvia-chiara:    #D3D4BC;
  --salvia-scura:     #56634A;
  --miele:            #E39A4C;   /* luce di candela */
  --oro:              #AE8A6C;   /* colore dell'insegna */
  --cacao:            #3A2A20;   /* testo */
  --cacao-tenue:      #634A3A;
  --sera:             #2E211A;   /* sfondo serale degli eventi */
  --sera-chiara:      #43312A;
  --legno:            #A8754B;
  --bordo:            #D2B190;
  --errore:           #9B2C1F;
  --ok:               #3F6B3A;

  --titoli: "Fraunces", Georgia, "Times New Roman", serif;
  --testo:  "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;

  --larghezza: 1160px;
  --margine:   clamp(16px, 4vw, 40px);
  --raggio:    14px;
  --raggio-grande: 28px;
  --pulsante:  56px;
  --ombra:     0 2px 4px rgba(58,42,32,.06), 0 14px 34px -8px rgba(58,42,32,.22);
  --molla:     cubic-bezier(.34,1.56,.64,1);
  --morbido:   cubic-bezier(.22,.8,.26,1);

  --grana: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .16 0 0 0 0 .12 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--cacao);
  background: var(--grana), radial-gradient(120% 80% at 50% 0%, #F0D8B8 0%, rgba(240,216,184,0) 60%), radial-gradient(90% 60% at 50% 100%, rgba(196,128,78,.18), rgba(196,128,78,0) 70%), var(--latte);
  font-family: var(--testo); font-size: 18px; line-height: 1.6; font-weight: 420;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
svg { width: 1.2em; height: 1.2em; }
a { color: var(--terracotta-scura); text-underline-offset: 3px; }
a:hover { color: var(--terracotta); }
:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 {
  font-family: var(--titoli); font-weight: 380; line-height: 1.05; margin: 0;
  font-variation-settings: "SOFT" 100, "WONK" 0; letter-spacing: -.01em;
}
p { margin: 0 0 1em; }
.contenitore { max-width: var(--larghezza); margin: 0 auto; padding: 0 var(--margine); }
.nascosto { display: none !important; }
.solo-lettori { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.solo-lettori:focus { position: fixed; left: 12px; top: 12px; width: auto; height: auto; clip: auto; z-index: 99; background: var(--carta); padding: 10px 16px; border-radius: 999px; }

.titolo-sezione { font-size: clamp(40px, 6vw, 68px); margin-bottom: 18px; }
.introduzione { font-size: 20px; color: var(--cacao-tenue); max-width: 34em; }

/* ---------------- pulsanti ---------------- */
.pulsante {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--pulsante); padding: 0 28px; border-radius: 999px;
  font: 600 17px/1.2 var(--testo); text-decoration: none; cursor: pointer;
  border: 1.5px solid var(--terracotta); background: var(--terracotta); color: #fff;
  box-shadow: 0 6px 16px -6px rgba(164,83,47,.55);
  transition: transform .25s var(--molla), background .2s, box-shadow .25s, color .2s;
}
.pulsante:hover { background: var(--terracotta-scura); border-color: var(--terracotta-scura); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(164,83,47,.6); }
.pulsante:active { transform: translateY(0) scale(.98); }
.pulsante.chiaro { background: transparent; color: var(--terracotta-scura); box-shadow: none; }
.pulsante.chiaro:hover { background: var(--terracotta); color: #fff; }
.pulsante.su-scuro { background: var(--carta); border-color: var(--carta); color: var(--terracotta-scura); box-shadow: none; }
.pulsante.su-scuro:hover { background: #fff; color: var(--terracotta-scura); }
.pulsante.contorno-chiaro { background: transparent; border-color: rgba(251,246,238,.7); color: var(--carta); box-shadow: none; }
.pulsante.contorno-chiaro:hover { background: var(--carta); color: var(--terracotta-scura); }
.pulsante[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.pulsanti { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------- avviso in evidenza ---------------- */
.avviso { background: var(--salvia-scura); color: var(--carta); text-align: center; padding: 12px var(--margine); font-size: 17px; white-space: pre-line; }

/* ---------------- intestazione ---------------- */
.testata { position: sticky; top: 0; z-index: 20; background: rgba(232,203,166,.9); box-shadow: 0 1px 0 rgba(130,64,31,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.testata .contenitore { display: flex; align-items: center; gap: 24px; min-height: 70px; }
.marchio { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--oro); }
.marchio svg { width: 46px; height: 46px; stroke-width: 2.2; }
.marchio span { font-family: var(--titoli); font-size: 24px; font-weight: 400; color: var(--oro); line-height: 1; white-space: nowrap; font-variation-settings: "SOFT" 100; }
.menu { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.menu a { color: var(--cacao); text-decoration: none; font-size: 16px; font-weight: 500; }
.menu a:hover { color: var(--terracotta); }
.menu .pulsante { min-height: 46px; padding: 0 22px; font-size: 16px; color: #fff; }

/* =====================================================================
   APERTURA — il fiore sboccia e si accende la luce
   ===================================================================== */
.apertura { position: relative; overflow: hidden; text-align: center; padding: clamp(40px, 7vw, 84px) 0 clamp(70px, 9vw, 120px); isolation: isolate; }
.apertura .luce {
  position: absolute; z-index: -1; left: 50%; top: 34%; width: min(900px, 130vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(227,154,76,.55), rgba(232,184,146,.35) 45%, rgba(233,210,182,0) 72%);
  animation: accendi 2.4s .5s var(--morbido) both, respira 7s 3s ease-in-out infinite;
}
.fiore-apertura { width: clamp(150px, 19vw, 220px); height: auto; aspect-ratio: 1; margin: 0 auto 18px; color: var(--terracotta); overflow: visible; }
.fiore-apertura path, .fiore-apertura circle {
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: disegna 1.2s var(--morbido) forwards;
}
/* il fiore si disegna dal centro verso fuori, come il logo dell'insegna */
.fiore-apertura .t0 { animation-delay: 0s; }
.fiore-apertura .t1 { animation-delay: .15s; } .fiore-apertura .t2 { animation-delay: .3s; }
.fiore-apertura .t3 { animation-delay: .45s; } .fiore-apertura .t4 { animation-delay: .6s; }
.fiore-apertura .t5 { animation-delay: .75s; } .fiore-apertura .t6 { animation-delay: .9s; }
.fiore-apertura .t7 { animation-delay: 1.05s; }

.apertura h1 {
  font-size: clamp(58px, 11vw, 140px); font-weight: 340; line-height: .92; color: var(--cacao);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; letter-spacing: -.025em;
}
.apertura h1 .riga { display: block; animation: messa-a-fuoco 1.4s var(--morbido) both; }
.apertura h1 .riga:first-child { animation-delay: .7s; }
.apertura h1 .riga + .riga { animation-delay: .95s; color: var(--terracotta); font-style: italic; font-weight: 300; }
.apertura .sottotitolo { margin: 22px auto 10px; font-family: var(--titoli); font-style: italic; font-size: clamp(22px, 2.6vw, 28px); color: var(--oro); animation: compari 1s 1.4s ease both; }
.apertura .descrizione { font-size: 19px; color: var(--cacao-tenue); max-width: 30em; margin: 0 auto 30px; animation: compari 1s 1.55s ease both; }
.apertura .pulsanti { justify-content: center; animation: compari 1s 1.7s ease both; }
.apertura .indirizzo { margin: 26px auto 0; display: inline-flex; align-items: center; gap: 8px; font-size: 16px; color: var(--cacao-tenue); animation: compari 1s 1.85s ease both; }
.apertura .indirizzo svg { color: var(--terracotta); flex: none; }

@keyframes disegna { to { stroke-dashoffset: 0; } }
@keyframes accendi { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes respira { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }
@keyframes messa-a-fuoco { from { opacity: 0; filter: blur(14px); transform: translateY(12px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes compari { from { opacity: 0; } to { opacity: 1; } }

/* ---------------- per chi ---------------- */
.per-chi { padding: clamp(40px, 6vw, 72px) 0 clamp(64px, 9vw, 110px); background: radial-gradient(40% 70% at 22% 40%, rgba(227,154,76,.16), rgba(227,154,76,0) 70%); }
.per-chi .contenitore { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 48px); align-items: start; max-width: 980px; }
.per-chi .fiore-piccolo { width: 54px; height: 54px; color: var(--salvia); stroke-width: 2.2; margin-top: 10px; }
.per-chi p { font-family: var(--titoli); font-size: clamp(27px, 3.4vw, 40px); line-height: 1.22; font-weight: 340; font-variation-settings: "SOFT" 100, "opsz" 72; margin: 0; }
.per-chi p span { color: var(--cacao-tenue); }

/* =====================================================================
   COSA TROVI — lo scaffale dei barattoli
   ===================================================================== */
.scaffale-sezione { padding: clamp(64px, 9vw, 110px) 0;
  background: repeating-linear-gradient(90deg, rgba(255,240,220,.18) 0 2px, rgba(0,0,0,0) 2px 34px), linear-gradient(#D9B38C, #E2C3A0 60%, var(--latte)); border-radius: var(--raggio-grande) var(--raggio-grande) 0 0; }
.scaffale-sezione .introduzione { margin-bottom: 40px; }
.scaffale { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(10px, 2vw, 26px); align-items: end; padding: 0 clamp(8px, 2vw, 24px); position: relative; }
.scaffale::after { /* la mensola di legno */
  content: ""; grid-column: 1 / -1; height: 16px; margin: -2px calc(-1 * clamp(8px, 2vw, 24px)) 0; border-radius: 4px;
  background: linear-gradient(var(--legno), #8E6240); box-shadow: 0 14px 22px -10px rgba(58,42,32,.45);
}
.scaffale-sezione .contenitore > .smerlo { /* carta smerlata appesa alla mensola */
  height: 16px; margin: 0 clamp(0px, 0vw, 0px); position: relative; top: -1px;
  background: radial-gradient(circle at 12px 0, #F3DCC0 10.5px, rgba(0,0,0,0) 11.5px) 0 0 / 24px 16px repeat-x;
  filter: drop-shadow(0 3px 2px rgba(58,42,32,.18));
}
.barattolo {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  border: 0; background: none; padding: 0 0 2px; cursor: pointer; font: inherit; color: inherit;
  transition: transform .45s var(--molla);
}
.barattolo .coperchio { width: 64%; height: 18px; border-radius: 8px 8px 4px 4px; background: var(--c-coperchio, var(--oro)); position: relative; z-index: 1; box-shadow: inset 0 -4px 0 rgba(0,0,0,.12); }
.barattolo .vetro {
  width: 100%; aspect-ratio: 3 / 4; margin-top: -3px; border-radius: 22px 22px 18px 18px;
  background:
    linear-gradient(100deg, rgba(255,255,255,.55) 8%, rgba(255,255,255,0) 22%),
    linear-gradient(to top, var(--c-pieno) 0 var(--livello, 62%), rgba(250,236,218,.6) var(--livello, 62%));
  border: 2px solid rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(58,42,32,.08), 0 6px 14px -8px rgba(58,42,32,.4);
  display: flex; align-items: center; justify-content: center; padding: 10px;
}
.barattolo .etichetta {
  background: #FBF0E2; border-radius: 8px; padding: 10px 8px; width: 92%;
  font-family: var(--titoli); font-size: clamp(15px, 1.5vw, 19px); line-height: 1.1; font-weight: 450; color: var(--cacao);
  box-shadow: 0 2px 6px rgba(58,42,32,.15); transform: rotate(var(--storto, -2deg)); text-align: center;
}
.barattolo:hover { transform: translateY(-8px) rotate(-1.5deg); }
.barattolo[aria-pressed="true"] { transform: translateY(-16px); }
.barattolo[aria-pressed="true"] .etichetta { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.barattolo:focus-visible { outline: none; }
.barattolo:focus-visible .vetro { outline: 3px solid var(--terracotta); outline-offset: 4px; }
.barattolo.b1 { --c-pieno: #E7C48E; --livello: 70%; --c-coperchio: var(--terracotta); }
.barattolo.b2 { --c-pieno: #F3EEE3; --livello: 58%; --c-coperchio: var(--salvia); --storto: 2deg; }
.barattolo.b3 { --c-pieno: #B9C4A6; --livello: 66%; --c-coperchio: var(--oro); }
.barattolo.b4 { --c-pieno: #E2A97D; --livello: 52%; --c-coperchio: var(--salvia-scura); --storto: 3deg; }
.barattolo.b5 { --c-pieno: #EBC6A8; --livello: 74%; --c-coperchio: var(--terracotta-scura); --storto: -3deg; }
.barattolo.b6 { --c-pieno: #CDB59E; --livello: 60%; --c-coperchio: var(--legno); --storto: 1deg; }
.barattolo:nth-child(2n) .vetro { aspect-ratio: 3 / 3.6; }
.barattolo:nth-child(3n) .vetro { aspect-ratio: 3 / 4.3; }
.barattolo .dettaglio { display: none; }

.cartellino {
  margin: 34px auto 0; max-width: 640px; background: var(--carta); border-radius: var(--raggio-grande);
  padding: 26px 30px; box-shadow: var(--ombra); position: relative; text-align: center;
}
.cartellino::before { /* il filo del cartellino */
  content: ""; position: absolute; top: -12px; left: 50%; width: 14px; height: 14px; border-radius: 50%;
  transform: translateX(-50%); background: var(--latte); border: 2px solid var(--oro);
}
.cartellino h3 { font-size: 32px; margin-bottom: 6px; }
.cartellino p { color: var(--cacao-tenue); margin: 0; font-size: 18px; }
.cartellino a { display: inline-block; margin-top: 12px; font-weight: 600; }
.cartellino.cambia { animation: cartellino .5s var(--molla); }
@keyframes cartellino { from { opacity: .2; transform: translateY(8px) rotate(-1deg); } to { opacity: 1; transform: none; } }

/* =====================================================================
   CHI SIAMO — la vetrina ad arco
   ===================================================================== */
.storia { padding: clamp(64px, 9vw, 110px) 0; background: linear-gradient(var(--latte), #E4BE9C 22%, #E4BE9C 78%, var(--latte)); }
.storia .contenitore { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.vetrina {
  aspect-ratio: 4 / 5; border-radius: 999px 999px var(--raggio-grande) var(--raggio-grande);
  background: radial-gradient(circle at 50% 30%, rgba(224,164,88,.35), rgba(224,164,88,0) 60%), var(--salvia);
  display: grid; place-items: center; position: relative; overflow: hidden; box-shadow: var(--ombra);
}
.vetrina svg { width: 62%; height: auto; aspect-ratio: 1; color: var(--carta); stroke-width: 1.3; opacity: .9; }
.vetrina::after { /* riflesso sul vetro */
  content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.16) 48%, rgba(255,255,255,0) 58%);
}
.timbro {
  position: absolute; right: 8%; bottom: 7%; width: 132px; height: 132px; border-radius: 50%;
  background: var(--terracotta); color: var(--carta); display: grid; place-items: center; text-align: center;
  font-family: var(--titoli); font-size: 17px; line-height: 1.15; padding: 18px; transform: rotate(-9deg);
  box-shadow: 0 0 0 5px var(--terracotta), 0 0 0 6.5px rgba(251,246,238,.6), var(--ombra);
}
.timbro strong { display: block; font-size: 30px; font-weight: 400; }
.storia p { font-size: 19px; color: var(--cacao-tenue); max-width: 32em; }
.storia .firma { font-family: var(--titoli); font-style: italic; font-size: 26px; color: var(--terracotta); margin-top: 8px; }

/* =====================================================================
   EVENTI — sera alla Dispensa, biglietti d'invito
   ===================================================================== */
.sera {
  background: var(--sera); color: var(--carta); position: relative; overflow: hidden;
  border-radius: var(--raggio-grande); margin: 0 clamp(0px, 1.5vw, 18px);
  padding: clamp(64px, 9vw, 110px) 0;
}
.sera::before, .sera::after { /* luci di candela */
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(224,164,88,.30), rgba(224,164,88,0));
}
.sera::before { width: 640px; height: 640px; left: -200px; top: -220px; }
.sera::after  { width: 520px; height: 520px; right: -160px; bottom: -200px; }
.sera .contenitore { position: relative; z-index: 1; }
.sera .titolo-sezione { color: var(--carta); }
.sera .introduzione { color: #D9C6B4; }
.eventi { display: grid; gap: 22px; margin-top: 44px; }

.evento {
  --taglio: 14px;
  display: grid; grid-template-columns: 1fr 210px; color: var(--cacao);
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.35));
}
.evento .corpo, .evento .azione { background: var(--carta); }
.evento .corpo {
  padding: 28px 32px; border-radius: var(--raggio) 0 0 var(--raggio);
  -webkit-mask: radial-gradient(circle var(--taglio) at 100% 0, #0000 98%, #000) top/100% 51% no-repeat,
                radial-gradient(circle var(--taglio) at 100% 100%, #0000 98%, #000) bottom/100% 51% no-repeat;
          mask: radial-gradient(circle var(--taglio) at 100% 0, #0000 98%, #000) top/100% 51% no-repeat,
                radial-gradient(circle var(--taglio) at 100% 100%, #0000 98%, #000) bottom/100% 51% no-repeat;
}
.evento .azione {
  position: relative; padding: 24px 22px; border-radius: 0 var(--raggio) var(--raggio) 0; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: var(--pesca);
  -webkit-mask: radial-gradient(circle var(--taglio) at 0 0, #0000 98%, #000) top/100% 51% no-repeat,
                radial-gradient(circle var(--taglio) at 0 100%, #0000 98%, #000) bottom/100% 51% no-repeat;
          mask: radial-gradient(circle var(--taglio) at 0 0, #0000 98%, #000) top/100% 51% no-repeat,
                radial-gradient(circle var(--taglio) at 0 100%, #0000 98%, #000) bottom/100% 51% no-repeat;
}
.evento .azione::before { /* perforazione */
  content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; border-left: 2px dashed rgba(58,42,32,.25);
}
.evento:nth-child(3n+2) .azione { background: var(--salvia-chiara); }
.evento:nth-child(3n+3) .azione { background: #F0D9B5; }
.evento .quando { font-family: var(--titoli); font-style: italic; font-size: 21px; color: var(--terracotta); margin-bottom: 6px; }
.evento h3 { font-size: clamp(28px, 3vw, 36px); margin-bottom: 10px; }
.evento .dettagli { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--cacao-tenue); font-size: 16px; margin-bottom: 12px; }
.evento .dettagli span { display: inline-flex; align-items: center; gap: 7px; }
.evento .dettagli svg { color: var(--terracotta); }
.evento .descrizione { color: var(--cacao-tenue); white-space: pre-line; margin: 0; font-size: 17px; max-width: 38em; }
.evento .giorno { font-family: var(--titoli); line-height: 1; }
.evento .giorno .numero { display: block; font-size: 64px; font-weight: 360; font-variation-settings: "SOFT" 100, "opsz" 144; }
.evento .giorno .mese { display: block; font-size: 19px; font-style: italic; margin-top: 2px; }
.evento .azione .pulsante { width: 100%; padding: 0 14px; min-height: 52px; font-size: 16px; }
.evento .posti { font-size: 15px; color: var(--salvia-scura); font-weight: 600; }
.evento .posti.pochi { color: var(--terracotta-scura); }
.evento .esaurito { font-family: var(--titoli); font-size: 22px; color: var(--terracotta-scura); font-style: italic; }

.eventi-vuoto { margin-top: 40px; padding: 40px 28px; border-radius: var(--raggio-grande); border: 1.5px dashed rgba(224,164,88,.55); text-align: center; color: #D9C6B4; }
.eventi-vuoto h3 { font-size: 32px; color: var(--carta); margin-bottom: 8px; }
.eventi-vuoto .pulsante.chiaro { color: var(--carta); border-color: rgba(251,246,238,.6); margin-top: 8px; }
.eventi-vuoto .pulsante.chiaro:hover { background: var(--carta); color: var(--terracotta-scura); }

/* ---------------- consulenze ---------------- */
.consulenze { padding: clamp(64px, 9vw, 110px) 0 0; }
.consulenze .riquadro-arco {
  background: var(--terracotta); color: var(--carta); border-radius: 260px 260px var(--raggio-grande) var(--raggio-grande);
  padding: clamp(70px, 9vw, 110px) clamp(24px, 6vw, 80px) clamp(40px, 6vw, 64px); text-align: center; position: relative; overflow: hidden;
  max-width: 880px; margin: 0 auto;
}
.consulenze .fiore-sfondo { position: absolute; width: 360px; height: 360px; left: 50%; top: -150px; transform: translateX(-50%); color: #fff; opacity: .12; stroke-width: 1.1; }
.consulenze .titolo-sezione { color: #fff; position: relative; }
.consulenze p { font-size: 19px; color: #F6E4D6; max-width: 32em; margin: 0 auto 28px; position: relative; }
.consulenze .pulsanti { justify-content: center; position: relative; }

/* ---------------- dove siamo ---------------- */
.dove { padding: clamp(64px, 9vw, 110px) 0; }
.dove .contenitore { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.recapito { display: grid; gap: 22px; margin-top: 26px; }
.recapito .voce { display: flex; gap: 16px; }
.recapito .voce > svg { flex: none; width: 26px; height: 26px; color: var(--terracotta); margin-top: 3px; }
.recapito h3 { font-family: var(--testo); font-size: 15px; font-weight: 700; color: var(--oro); margin-bottom: 2px; letter-spacing: .01em; }
.recapito p { margin: 0; }
.orari { white-space: pre-line; }
.porta {
  background: radial-gradient(circle at 50% 35%, #FBEBD6, var(--carta) 70%); border-radius: 999px 999px var(--raggio-grande) var(--raggio-grande);
  padding: clamp(80px, 10vw, 120px) clamp(24px, 4vw, 44px) clamp(28px, 4vw, 40px);
  text-align: center; box-shadow: var(--ombra); position: relative; overflow: hidden;
  border: 10px solid var(--salvia);
}
.porta .fiore-sfondo { position: absolute; width: 200px; height: 200px; left: 50%; top: 18px; transform: translateX(-50%); color: var(--oro); opacity: .35; stroke-width: 1.4; }
.porta .civico { font-family: var(--titoli); font-size: clamp(72px, 9vw, 108px); line-height: 1; color: var(--terracotta); font-weight: 340; font-variation-settings: "SOFT" 100, "opsz" 144; position: relative; }
.porta h3 { font-size: clamp(26px, 3vw, 32px); margin: 8px 0 6px; position: relative; }
.porta p { color: var(--cacao-tenue); position: relative; }
.porta .pulsanti { justify-content: center; position: relative; }

/* ---------------- piè di pagina ---------------- */
.piede { background: var(--sera); color: #D9C6B4; padding: 48px 0 112px; font-size: 15px; }
.piede .contenitore { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.piede .marchio, .piede .marchio span { color: var(--pesca); }
.piede a { color: var(--carta); }
.piede .legale { white-space: pre-line; color: #B9A594; margin-top: 10px; }
.piede nav { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 861px) { .piede { padding-bottom: 48px; } }

/* ---------------- barra in basso sul telefono ---------------- */
.barra-telefono { display: none; }

/* =====================================================================
   FINESTRA DI PRENOTAZIONE
   ===================================================================== */
dialog.finestra {
  border: 0; padding: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  background: var(--carta); color: var(--cacao); border-radius: var(--raggio-grande); box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
dialog.finestra[open] { animation: finestra .45s var(--molla); }
dialog.finestra::backdrop { background: rgba(46,33,26,.6); backdrop-filter: blur(3px); }
@keyframes finestra { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
.finestra .testa { background: var(--sera); color: var(--carta); padding: 26px 64px 22px 28px; position: relative; overflow: hidden; }
.finestra .testa::before { content: ""; position: absolute; width: 300px; height: 300px; right: -120px; top: -150px; border-radius: 50%; background: radial-gradient(closest-side, rgba(224,164,88,.4), rgba(224,164,88,0)); }
.finestra .testa .piccola { font-family: var(--titoli); font-style: italic; color: var(--miele); font-size: 19px; margin-bottom: 4px; position: relative; }
.finestra .testa h2 { font-size: 32px; color: #fff; position: relative; }
.finestra .testa .quando { margin: 8px 0 0; font-size: 16px; color: #D9C6B4; position: relative; }
.finestra .chiudi { position: absolute; right: 12px; top: 12px; width: 48px; height: 48px; border: 0; background: transparent; color: #fff; cursor: pointer; border-radius: 50%; z-index: 1; }
.finestra .chiudi:hover { background: rgba(255,255,255,.12); }
.finestra .chiudi svg { width: 26px; height: 26px; margin: auto; }
.finestra form, .finestra .esito { padding: 24px 28px 28px; }
.campo { margin-bottom: 18px; }
.campo label, .campo .etichetta { display: block; font-weight: 600; font-size: 17px; margin-bottom: 6px; }
.campo .facoltativo { font-weight: 400; color: var(--cacao-tenue); }
.campo .aiuto { display: block; font-size: 15px; color: var(--cacao-tenue); margin-top: 4px; }
.campo input[type=text], .campo input[type=tel], .campo input[type=email], .campo textarea {
  width: 100%; min-height: 56px; padding: 12px 16px; font: 400 18px/1.4 var(--testo); color: var(--cacao);
  background: #FFF6EA; border: 1.5px solid var(--bordo); border-radius: var(--raggio); transition: border-color .2s, box-shadow .2s;
}
.campo textarea { min-height: 88px; resize: vertical; }
.campo input:focus, .campo textarea:focus { border-color: var(--terracotta); outline: none; box-shadow: 0 0 0 4px rgba(164,83,47,.15); }
.contatore { display: inline-flex; align-items: center; border: 1.5px solid var(--bordo); border-radius: 999px; background: #FFF6EA; }
.contatore button { width: 56px; height: 56px; border: 0; background: transparent; font-size: 28px; line-height: 1; color: var(--terracotta); cursor: pointer; border-radius: 50%; }
.contatore button:disabled { color: var(--bordo); cursor: default; }
.contatore output { min-width: 48px; text-align: center; font-size: 22px; font-weight: 600; }
.contatore output.salta { animation: salta .35s var(--molla); }
@keyframes salta { from { transform: scale(1.4); } to { transform: none; } }
.consenso { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--cacao-tenue); cursor: pointer; }
.consenso input { width: 26px; height: 26px; flex: none; margin: 0; accent-color: var(--terracotta); }
.trappola { position: absolute; left: -9999px; }
.messaggio-errore { background: #F7E3DE; color: var(--errore); border-radius: var(--raggio); padding: 12px 16px; margin-bottom: 18px; font-size: 17px; }
.finestra .pulsante { width: 100%; }
.esito { text-align: center; }
.esito .timbro-prenotato {
  display: inline-block; margin: 8px auto 18px; padding: 10px 26px; border: 3px solid var(--terracotta); border-radius: 12px;
  font-family: var(--titoli); font-size: 34px; color: var(--terracotta); transform: rotate(-6deg);
  animation: timbra .55s var(--molla) both;
}
@keyframes timbra { from { opacity: 0; transform: rotate(-14deg) scale(1.8); } to { opacity: 1; transform: rotate(-6deg) scale(1); } }
.esito h3 { font-size: 34px; margin-bottom: 10px; }
.esito p { color: var(--cacao-tenue); }
.esito .pulsanti { flex-direction: column; margin-top: 22px; }

/* =====================================================================
   Telefono e tablet
   ===================================================================== */
@media (max-width: 860px) {
  body { font-size: 17px; }
  .menu { display: none; }
  .testata .contenitore { min-height: 62px; justify-content: center; }
  .marchio svg { width: 36px; height: 36px; }
  .marchio span { font-size: 22px; }
  .apertura .pulsanti .pulsante { flex: 1 1 100%; }
  .per-chi .contenitore { grid-template-columns: 1fr; }
  .storia .contenitore, .dove .contenitore { grid-template-columns: 1fr; }
  .vetrina { max-width: 360px; width: 100%; margin: 0 auto; }

  /* lo scaffale scorre di lato */
  .scaffale { grid-template-columns: repeat(6, 132px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 26px 16px 0; margin: 0 calc(-1 * var(--margine)); gap: 18px; scrollbar-width: none; }
  .scaffale::-webkit-scrollbar { display: none; }
  .scaffale::after { grid-column: 1 / -1; margin: -2px 0 0; }
  .scaffale-sezione .contenitore > .smerlo { margin: 0 calc(-1 * var(--margine)); }
  .barattolo { scroll-snap-align: center; }
  .scaffale-sezione .aiuto-scorri { display: block; }

  .evento { grid-template-columns: 1fr; }
  .evento .corpo { border-radius: var(--raggio) var(--raggio) 0 0; padding: 22px 20px 18px;
    -webkit-mask: radial-gradient(circle var(--taglio) at 0 100%, #0000 98%, #000) left/51% 100% no-repeat,
                  radial-gradient(circle var(--taglio) at 100% 100%, #0000 98%, #000) right/51% 100% no-repeat;
            mask: radial-gradient(circle var(--taglio) at 0 100%, #0000 98%, #000) left/51% 100% no-repeat,
                  radial-gradient(circle var(--taglio) at 100% 100%, #0000 98%, #000) right/51% 100% no-repeat; }
  .evento .azione { border-radius: 0 0 var(--raggio) var(--raggio); flex-direction: row; flex-wrap: wrap; justify-content: space-between; text-align: left; padding: 20px;
    -webkit-mask: radial-gradient(circle var(--taglio) at 0 0, #0000 98%, #000) left/51% 100% no-repeat,
                  radial-gradient(circle var(--taglio) at 100% 0, #0000 98%, #000) right/51% 100% no-repeat;
            mask: radial-gradient(circle var(--taglio) at 0 0, #0000 98%, #000) left/51% 100% no-repeat,
                  radial-gradient(circle var(--taglio) at 100% 0, #0000 98%, #000) right/51% 100% no-repeat; }
  .evento .azione::before { left: 18px; right: 18px; top: 0; bottom: auto; border-left: 0; border-top: 2px dashed rgba(58,42,32,.25); }
  .evento .giorno { display: flex; align-items: baseline; gap: 8px; }
  .evento .giorno .numero { font-size: 48px; }
  .evento .azione .pulsante { flex: 1 1 100%; }
  .evento h3 { font-size: 28px; }
  .consulenze .riquadro-arco { border-radius: 160px 160px var(--raggio-grande) var(--raggio-grande); }
  .consulenze .pulsante { flex: 1 1 100%; }
  .porta .pulsante { flex: 1 1 100%; }

  .barra-telefono {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 30;
    background: rgba(247,233,215,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-radius: 22px; box-shadow: 0 12px 30px -8px rgba(58,42,32,.4); padding: 6px;
  }
  .barra-telefono a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; text-decoration: none; color: var(--cacao); font-size: 13px; font-weight: 600; border-radius: 16px; }
  .barra-telefono a svg { width: 24px; height: 24px; color: var(--terracotta); }
  .barra-telefono a.principale { background: var(--terracotta); color: #fff; }
  .barra-telefono a.principale svg { color: #fff; }
  dialog.finestra { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; }
}
.aiuto-scorri { display: none; font-size: 15px; color: var(--cacao-tenue); margin: -24px 0 10px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .fiore-apertura path, .fiore-apertura circle { stroke-dashoffset: 0; }
}

@media print {
  .testata, .barra-telefono, .avviso { display: none !important; }
}

/* =====================================================================
   GALLERIA — foto appese in bacheca, come polaroid con un pezzo di nastro
   ===================================================================== */
.galleria-sezione { padding: clamp(64px, 9vw, 110px) 0 clamp(48px, 7vw, 90px); }
.bacheca { columns: 3 260px; column-gap: clamp(18px, 3vw, 34px); margin-top: 40px; }
.polaroid {
  --r: -1.5deg;
  display: block; width: 100%; margin: 0 0 clamp(22px, 3vw, 34px); break-inside: avoid;
  border: 0; padding: 12px 12px 0; cursor: zoom-in; position: relative; text-align: center;
  background: #FBF1E3; color: var(--cacao); font: inherit;
  box-shadow: 0 2px 3px rgba(58,42,32,.12), 0 16px 28px -14px rgba(58,42,32,.45);
  transform: rotate(var(--r)); transition: transform .4s var(--molla), box-shadow .3s;
}
.polaroid:nth-child(6n+2) { --r: 1.4deg; }
.polaroid:nth-child(6n+3) { --r: -.6deg; }
.polaroid:nth-child(6n+4) { --r: 2deg; }
.polaroid:nth-child(6n+5) { --r: -2.2deg; }
.polaroid:nth-child(6n+6) { --r: .8deg; }
.polaroid::before { /* il nastro adesivo */
  content: ""; position: absolute; z-index: 1; top: -11px; left: 50%; width: 84px; height: 24px;
  transform: translateX(-50%) rotate(calc(var(--r) * -2.5));
  background: rgba(232,184,146,.72); box-shadow: 0 1px 2px rgba(58,42,32,.12);
  -webkit-mask: linear-gradient(90deg, #0000 0 3px, #000 3px calc(100% - 3px), #0000 0);
          mask: linear-gradient(90deg, #0000 0 3px, #000 3px calc(100% - 3px), #0000 0);
}
.polaroid:nth-child(3n+2)::before { background: rgba(167,178,154,.7); }
.polaroid:hover { transform: rotate(0deg) translateY(-6px) scale(1.02); box-shadow: 0 4px 6px rgba(58,42,32,.12), 0 26px 40px -16px rgba(58,42,32,.5); }
.polaroid:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 6px; border-radius: 2px; }
.polaroid .foto { position: relative; display: block; background: var(--crema-scura); overflow: hidden; }
.polaroid img { width: 100%; height: auto; display: block; }
.polaroid .video-senza-copertina { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--sera); color: var(--pesca); }
.polaroid .video-senza-copertina svg { width: 56px; height: 56px; }
.polaroid .play {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; border-radius: 50%; transform: translate(-50%, -50%);
  background: rgba(46,33,26,.6); color: #fff; display: grid; place-items: center; backdrop-filter: blur(4px);
  box-shadow: 0 0 0 2px rgba(251,241,227,.75);
}
.polaroid .play svg { width: 28px; height: 28px; margin-left: 4px; }
.polaroid .scritta {
  display: block; min-height: 46px; padding: 10px 6px 14px; font-family: var(--titoli); font-style: italic;
  font-size: 18px; line-height: 1.25; color: var(--cacao-tenue);
}
.altre { text-align: center; }

/* ---------------- visore ---------------- */
dialog.visore {
  border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh;
  background: rgba(36,26,20,.94); color: var(--carta); overflow: hidden;
}
dialog.visore::backdrop { background: rgba(36,26,20,.6); }
dialog.visore[open] { display: grid; grid-template-rows: 1fr auto auto; justify-items: center; align-items: center; animation: compari .25s ease; }
.visore-scena { width: 100%; height: 100%; min-height: 0; overflow: hidden; display: grid; place-items: center; padding: 64px 84px 8px; touch-action: pan-y; }
.visore-scena img, .visore-scena video {
  max-width: 100%; max-height: calc(100dvh - 190px); width: auto; height: auto; object-fit: contain; border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5); background: #000;
}
.visore-scena .entra { animation: entra .35s var(--morbido); }
@keyframes entra { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.visore-didascalia { margin: 14px 24px 0; max-width: 44em; text-align: center; font-family: var(--titoli); font-style: italic; font-size: 21px; min-height: 1.3em; }
.visore-conta { margin: 6px 0 18px; font-size: 15px; color: #CDB8A5; }
.visore-pulsante {
  position: absolute; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(251,246,238,.14); color: #fff; display: grid; place-items: center; transition: background .2s;
}
.visore-pulsante:hover { background: rgba(251,246,238,.28); }
.visore-pulsante svg { width: 28px; height: 28px; }
.visore-prima { left: 16px; top: 50%; transform: translateY(-50%); }
.visore-dopo  { right: 16px; top: 50%; transform: translateY(-50%); }
.visore-chiudi { right: 14px; top: 14px; }

@media (max-width: 600px) {
  .bacheca { columns: 2; column-gap: 14px; }
  .polaroid { padding: 8px 8px 0; }
  .polaroid::before { width: 58px; height: 18px; top: -8px; }
  .polaroid .scritta { font-size: 15px; min-height: 30px; padding: 6px 2px 10px; }
  .polaroid .play { width: 48px; height: 48px; }
  .visore-scena { padding: 64px 8px 8px; }
  .visore-prima, .visore-dopo { top: auto; bottom: 22px; transform: none; }
  .visore-conta { margin-bottom: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .polaroid, .polaroid:hover { transition: none; }
}