/* Jlu's Brunch & Coffee · «Una vetrina da sfogliare»
   Mobile first · breakpoint 768 e 1024 · senza JS e con reduced-motion tutto è visibile e al suo posto. */

@font-face { font-family: 'Bagel Fat One'; src: url('../fonts/BagelFatOne.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/Figtree.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }

:root {
  --rosa: #F3AFC0; --zucchero: #FCE4EA; --azzurro: #C4E3ED; --salvia: #D2E2C2; --porcellana: #FFF8F6;
  --inchiostro: #3B1A2A; --inchiostro-2: #6B3A50; --lampone: #B8235A; --lampone-hover: #A3164E; --su-lampone: #FFF3F6;
  --prugna: #3A1226; --acqua: #9FD0CF; --salvia-scura: #A7BB98; --oro: #C9A54C; --verde-aperto: #1F6B45;
  --display: 'Bagel Fat One', 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif;
  --text: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: 16px; --nav: 64px; --wrap: 1240px; --sec: clamp(56px, 8vw, 104px);
  --ombra: 0 22px 40px -18px rgba(59, 26, 42, .42), 0 4px 10px -4px rgba(59, 26, 42, .18);
  --ombra-soft: 0 22px 44px -26px rgba(59, 26, 42, .45); /* = color-mix(in oklab, inchiostro 45%, transparent) */
  --stk-o: var(--porcellana); --stk-c: var(--porcellana);
  --ease: cubic-bezier(.34, 1.56, .64, 1);
}
@media (min-width: 768px) { :root { --gutter: 32px; --nav: 76px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
html:not(.js) { scroll-behavior: smooth; }
body {
  margin: 0; overflow-x: clip; background: var(--rosa); color: var(--inchiostro);
  font: 400 1.0625rem/1.55 var(--text); font-feature-settings: 'ss01';
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--lampone); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--inchiostro); color: var(--porcellana); padding: 10px 16px; border-radius: 99px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
/* Lenis 1.3.26 · lenis.css, inline per non bloccare il primo paint con un altro dominio */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch], .lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Tipografia ---------- */
.display { font-family: var(--display); font-weight: 400; line-height: .92; letter-spacing: -.01em; }
.h2 { font-size: clamp(2.6rem, 10.5vw, 5.6rem); text-wrap: balance; }
.lead { font-size: clamp(1.125rem, 2.4vw, 1.375rem); line-height: 1.45; font-weight: 500; max-width: 38ch; }
.price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.link { font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.link:hover { color: var(--lampone); }

/* ---------- Fondo che cambia colore: senza JS ogni sezione ha il suo; con JS il colore passa al body ---------- */
[data-bg="rosa"] { background: var(--rosa); }
[data-bg="zucchero"] { background: var(--zucchero); }
[data-bg="azzurro"] { background: var(--azzurro); }
[data-bg="salvia"] { background: var(--salvia); }
[data-bg="prugna"] { background: var(--prugna); color: var(--zucchero); }
.js:not(.reduce) [data-bg] { background: transparent; }
.js:not(.reduce) [data-bg="prugna"] { background: var(--prugna); } /* il viola arriva come un sipario: il testo scuro sopra non resta mai sul fondo scuro */

/* ---------- Bottoni ---------- */
.btn {
  --b: var(--inchiostro); display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .8em 1.4em; border-radius: 99px; border: 2px solid var(--b);
  font-weight: 700; font-size: 1rem; line-height: 1.1; text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s;
}
.btn--primary { background: var(--lampone); border-color: var(--lampone); color: var(--su-lampone); box-shadow: 0 3px 0 var(--inchiostro); }
.btn--primary:hover { background: var(--lampone-hover); border-color: var(--lampone-hover); }
.btn--primary:active { box-shadow: 0 1px 0 var(--inchiostro); }
.btn--ghost { background: var(--porcellana); color: var(--inchiostro); }
.btn--ghost:hover { background: var(--inchiostro); color: var(--porcellana); }
.btn--sm { min-height: 40px; padding: .55em 1.1em; font-size: .9375rem; box-shadow: 0 2px 0 var(--inchiostro); }
.btn--lg { min-height: 56px; font-size: 1.0625rem; padding-inline: 1.8em; }
.btn--xl { min-height: 60px; font-size: 1.125rem; padding: .9em 1.8em; border-color: transparent; color: var(--inchiostro); }
.btn--rosa { background: var(--rosa); }
.btn--acqua { background: var(--acqua); }
.btn--zucchero { background: var(--zucchero); }
.btn--xl:hover { background: var(--porcellana); }

/* ---------- Cartolina con bordo a pizzo (mask: cerchi in fila sul bordo + rettangolo interno) ---------- */
.card { position: relative; isolation: isolate; }
.card::before { content: ''; position: absolute; inset: 7%; z-index: -1; border-radius: 12px; box-shadow: var(--ombra); }
.pz {
  --r: 8px; padding: calc(var(--r) * 1.55); background: var(--porcellana);
  -webkit-mask: linear-gradient(#000 0 0) center / calc(100% - 1.1 * var(--r)) calc(100% - 1.1 * var(--r)) no-repeat,
                radial-gradient(closest-side, #000 96%, #0000) 0 0 / calc(2 * var(--r)) calc(2 * var(--r)) round;
          mask: linear-gradient(#000 0 0) center / calc(100% - 1.1 * var(--r)) calc(100% - 1.1 * var(--r)) no-repeat,
                radial-gradient(closest-side, #000 96%, #0000) 0 0 / calc(2 * var(--r)) calc(2 * var(--r)) round;
}
.pz img { width: 100%; background: var(--zucchero); }
@media (min-width: 768px) { .pz { --r: 10px; } }

/* ---------- Adesivi SVG ---------- */
.o { fill: var(--stk-o); stroke: var(--stk-o); stroke-width: 9; stroke-linejoin: round; }
.f { fill: currentColor; }
.c { fill: var(--stk-c); }
.ro { fill: none; stroke: var(--stk-o); stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
.rf { fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.dots { fill: currentColor; stroke: var(--stk-o); stroke-width: 3; }
.stk { position: absolute; z-index: 3; pointer-events: none; }
.stk svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 8px rgba(59, 26, 42, .2)); }
.smerlo { fill: var(--acqua); stroke: var(--porcellana); stroke-width: 3; }
.giro { font: 700 8.6px var(--text); letter-spacing: .02em; fill: var(--inchiostro); text-transform: uppercase; }
.fiore-mini { color: var(--rosa); --stk-c: var(--lampone); }
.badge-rot { animation: gira 22s linear infinite; }
@keyframes gira { to { rotate: 360deg; } }
.reduce .badge-rot { animation: none; }

/* ---------- Badge aperto/chiuso ---------- */
.badge-open { display: inline-flex; align-items: center; gap: .5em; padding: .4em .9em; border-radius: 99px; background: var(--porcellana); font-weight: 600; font-size: .875rem; line-height: 1.2; white-space: nowrap; }
.badge-open .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--inchiostro-2); flex: none; }
.is-open .dot { background: var(--verde-aperto); animation: none; box-shadow: none; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav); display: flex; align-items: center; gap: 12px;
  padding: 0 var(--gutter); transition: transform .45s cubic-bezier(.2, .8, .2, 1), background-color .3s, box-shadow .3s;
}
html:not(.js) .nav, .nav.is-solid { background: rgba(255, 248, 246, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(59, 26, 42, .08); }
.nav.is-hidden { transform: translateY(-110%); }
.nav__brand { flex: none; display: block; }
.nav__brand img { width: 66px; }
.nav__links { display: none; }
.nav__status { display: none; }
.nav__call { margin-left: auto; }
@media (max-width: 767px) { .nav__call { display: none; } }
@media (min-width: 768px) {
  .nav__brand img { width: 80px; }
  .nav__links { display: none; gap: 6px; margin-left: 12px; }
  .nav__links a { padding: .45em .9em; border-radius: 99px; font-weight: 600; text-decoration: none; transition: background-color .2s; }
  .nav__links a:hover { background: rgba(255, 248, 246, .8); }
  .nav.is-solid .nav__links a:hover { background: var(--zucchero); }
  .nav__status { display: inline-flex; margin-left: auto; }
  .nav__call { margin-left: 0; }
}
@media (min-width: 1024px) { .nav__links { display: flex; } }

/* ---------- 1 · Hero ---------- */
.hero { position: relative; z-index: 0; isolation: isolate; min-height: 100svh; padding: calc(var(--nav) + 18px) 0 56px; display: flex; flex-direction: column; align-items: center; text-align: center; overflow: clip; }
.hero__top { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-inline: var(--gutter); }
.hero__addr { font-weight: 600; font-size: .9375rem; color: var(--inchiostro-2); }
.hero__copy { display: flex; flex-direction: column; align-items: center; padding-inline: var(--gutter); margin-top: 18px; }
.hero__title { font-size: clamp(3.3rem, 14.5vw, 7.4rem); max-width: 11ch; text-wrap: balance; animation: posa-t .8s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes posa-t { from { opacity: 0; translate: 0 .4em; } }
.reduce .hero__title { animation: none; }
.hero__sub { margin-top: 18px; max-width: 30ch; font-size: clamp(1.0625rem, 2.2vw, 1.25rem); line-height: 1.45; font-weight: 500; text-wrap: balance; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }

.fan { --cw: 44vw; --spread: 25vw; --tilt: 9deg; --drop: 16px; position: relative; width: 100%; height: calc(var(--cw) * 1.25 + 3 * var(--drop) + 40px); margin-top: 34px; }
.fan__card {
  position: absolute; left: 50%; top: 0; width: var(--cw); margin-left: calc(var(--cw) / -2); z-index: calc(10 - var(--a));
  translate: calc(var(--i) * var(--spread)) calc(var(--a) * var(--drop)); rotate: calc(var(--i) * var(--tilt));
}
.fan__card:nth-child(1), .fan__card:nth-child(5) { display: none; }
@media (max-width: 767px) {
  /* cartoline grandi in fondo allo schermo, tagliate dal bordo basso; testo centrato nello spazio che resta */
  .hero { padding-bottom: 0; }
  .hero__copy { margin-top: auto; }
  .fan { --cw: 54vw; --spread: 31vw; --drop: 22px; margin-top: auto; height: calc(var(--cw) * 1.05); }
}
.js:not(.reduce) .fan__card { translate: none; rotate: none; opacity: 0; }
.js:not(.reduce) .fan__card:nth-child(3) { opacity: 1; } /* la cartolina dell'LCP resta visibile: si apre solo il ventaglio */
.fan .card { will-change: transform; }
@media (min-width: 768px) {
  .fan { --cw: clamp(190px, 19vw, 262px); --spread: min(210px, 15vw); --tilt: 8deg; --drop: 26px; margin-top: 40px; }
  .hero__top .badge-open { display: none; }
  .fan__card:nth-child(1), .fan__card:nth-child(5) { display: block; }
}

.hero .stk { z-index: 12; }
.stk--badge { width: 104px; right: 6%; top: calc(var(--nav) + 6px); }
.stk--ricciolo { width: 92px; left: 4%; bottom: 30%; color: var(--lampone); }
.stk--fiore { width: 64px; right: 7%; bottom: 25%; color: var(--acqua); --stk-c: var(--oro); }
@media (max-width: 767px) {
  .stk--badge { width: 86px; right: 2%; top: auto; bottom: calc(54vw * 1.05 - 22px); z-index: 12; }
  .stk--ricciolo { bottom: calc(54vw * 1.05 - 8px); left: 2%; width: 72px; }
  .stk--fiore { bottom: auto; top: calc(var(--nav) + 120px); right: 4%; width: 52px; }
}
@media (min-width: 1024px) {
  .stk--badge { width: 150px; right: 9%; top: calc(var(--nav) + 40px); }
  .stk--ricciolo { width: 132px; left: 8%; top: 38%; bottom: auto; }
  .stk--fiore { width: 84px; right: 11%; top: 46%; bottom: auto; }
}

/* ---------- 2 · Nastro ---------- */
.nastro { position: relative; z-index: 4; margin: -64px -6vw 0; background: var(--lampone); color: var(--su-lampone); rotate: -2.2deg; overflow: hidden; box-shadow: 0 10px 24px -14px rgba(59, 26, 42, .6); }
.nastro__track { display: flex; width: max-content; animation: nastro 38s linear infinite; }
.js:not(.reduce) .nastro__track { animation: none; }
.reduce .nastro__track { animation: none; }
@keyframes nastro { to { transform: translateX(-50%); } }
@media (min-width: 768px) { .nastro { margin-top: -90px; } }
.nastro__row { flex: none; display: flex; align-items: center; gap: .55em; padding: .42em .275em; font: 400 clamp(1.6rem, 5.4vw, 3rem)/1 var(--display); white-space: nowrap; }
.nastro__row i { width: .62em; height: .62em; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cg fill='%23F3AFC0'%3E%3Ccircle cy='-24' r='20'/%3E%3Ccircle cy='-24' r='20' transform='rotate(72)'/%3E%3Ccircle cy='-24' r='20' transform='rotate(144)'/%3E%3Ccircle cy='-24' r='20' transform='rotate(216)'/%3E%3Ccircle cy='-24' r='20' transform='rotate(288)'/%3E%3C/g%3E%3Ccircle r='13' fill='%23FFF8F6'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- 3 · Il locale ---------- */
.locale { position: relative; padding: var(--sec) 0 calc(var(--sec) * .8); }
.locale__head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.manifesto { font-size: clamp(2.2rem, 8.6vw, 5.2rem); max-width: 15ch; text-wrap: balance; }
.locale__intro { margin-top: 22px; max-width: 46ch; font-size: 1.125rem; font-weight: 500; color: var(--inchiostro-2); text-wrap: pretty; }

.tavolo { position: relative; margin-top: 40px; display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 26px var(--gutter) 34px; scrollbar-width: none; overscroll-behavior-x: contain; }
.tavolo::-webkit-scrollbar { display: none; }
.tavolo__hint { position: absolute; top: 0; left: 50%; translate: -50% 0; font-weight: 700; font-size: .8125rem; letter-spacing: .02em; color: var(--inchiostro-2); white-space: nowrap; }
.tavolo__hint--touch::after { content: ' →'; }
.tavolo__hint--mouse { display: none; }
.cartolina { flex: none; width: min(70vw, 300px); scroll-snap-align: center; rotate: calc(var(--r) * .45); }
.cartolina:first-of-type { margin-left: calc(50% - min(35vw, 150px) - var(--gutter)); }
.cartolina:last-of-type { margin-right: calc(50% - min(35vw, 150px) - var(--gutter)); }
.cartolina .card::after { content: ''; position: absolute; top: -12px; left: 50%; width: 74px; height: 24px; margin-left: -37px; background: rgba(159, 208, 207, .78); rotate: -4deg; clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 50%); }
.cartolina:nth-of-type(even) .card::after { background: rgba(243, 175, 192, .85); rotate: 5deg; }
.nastrino { position: relative; display: table; margin: -14px auto 0; max-width: 92%; padding: .45em 1.1em; background: var(--lampone); color: var(--su-lampone); font-weight: 700; font-size: .875rem; line-height: 1.25; text-align: center; rotate: -1.5deg; clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%); z-index: 2; }
.cartolina:nth-of-type(3n+2) .nastrino { background: var(--inchiostro); }
.cartolina:nth-of-type(3n) .nastrino { background: var(--porcellana); color: var(--inchiostro); }
.stk--tavolo { display: none; }
@media (min-width: 1024px) {
  .tavolo { display: block; overflow: visible; max-width: 1240px; height: 860px; margin: 64px auto 0; padding: 0; }
  .tavolo__hint { top: -36px; }
  .tavolo__hint--touch { display: none; }
  .js:not(.reduce) .tavolo__hint--mouse { display: block; font-size: 1rem; font-weight: 700; color: var(--lampone); }
  .cartolina { position: absolute; left: var(--x); top: var(--y); width: var(--w); margin: 0 !important; rotate: var(--r); }
  .js:not(.reduce) .cartolina { rotate: none; cursor: grab; touch-action: pan-y; }
  .js:not(.reduce) .cartolina.is-drag { cursor: grabbing; }
  /* didascalia sopra la foto: le cartoline sovrapposte coprono solo bordi di foto, mai le scritte */
  .cartolina { display: flex; flex-direction: column-reverse; }
  .nastrino { margin: 0 auto -14px; z-index: 2; }
  .cartolina .card::after { top: auto; bottom: -12px; }
  .stk--tavolo { display: block; width: 90px; left: 93%; top: 700px; color: var(--rosa); --stk-c: var(--lampone); }
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  /* senza JS: la cartolina al centro si raddrizza, quelle ai lati si inclinano mentre scorri */
  @supports (animation-timeline: view()) {
    .cartolina { animation: raddrizza linear both; animation-timeline: view(inline); animation-range: cover 0% cover 100%; }
  }
}
@keyframes raddrizza { 0% { rotate: 9deg; scale: .9; } 50% { rotate: 0deg; scale: 1; } 100% { rotate: -9deg; scale: .9; } }
.reduce .cartolina { animation: none; }
.drag-cur { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; padding: .55em 1em; border-radius: 99px; background: var(--inchiostro); color: var(--porcellana); font-weight: 700; font-size: .875rem; opacity: 0; scale: .6; translate: -50% -140%; transition: opacity .25s, scale .35s var(--ease); }
.drag-cur.is-on { opacity: 1; scale: 1; }

/* ---------- 4 · Menù ---------- */
.menu { position: relative; padding: var(--sec) 0 calc(var(--sec) * .8); }
.menu__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.menu__lead { max-width: 40ch; font-weight: 500; font-size: 1.125rem; }
.tabs { display: none; }
.js .tabs {
  position: relative; display: flex; gap: 4px; margin: 34px auto 0; padding: 6px; width: max-content; max-width: 100%;
  overflow-x: auto; scrollbar-width: none; background: var(--porcellana); border-radius: 99px; box-shadow: var(--ombra-soft);
}
.tabs::-webkit-scrollbar { display: none; }
@media (max-width: 767px) {
  /* le schede restano in alto mentre scorri un pannello lungo (Pancake è alto 1000 px) */
  .js .tabs { position: sticky; top: calc(var(--nav) + 6px); z-index: 20; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; width: auto;
    border-radius: 99px; scroll-snap-type: x proximity; transition: top .45s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 14px 30px -16px rgba(59, 26, 42, .5); }
  .js.nav-off .tabs { top: 8px; }
  .tabs .tab { padding: .6em .95em; scroll-snap-align: start; }
}
.tabs__pill { position: absolute; left: 0; top: 0; height: 0; width: 0; border-radius: 99px; background: var(--lampone); z-index: 0; }
.tab { position: relative; z-index: 1; flex: none; border: 0; background: none; padding: .7em 1.1em; border-radius: 99px; font-weight: 700; font-size: .9375rem; cursor: pointer; white-space: nowrap; transition: color .3s; }
.tab[aria-selected="true"] { color: var(--porcellana); }
.reduce .tab[aria-selected="true"], .tabs:not(.is-ready) .tab[aria-selected="true"] { background: var(--lampone); }
.board { margin-top: 28px; display: grid; gap: 22px; }
.js .board { display: block; position: relative; }
.panel { position: relative; background: var(--porcellana); border-radius: 30px; padding: 26px 20px 28px; box-shadow: var(--ombra-soft); }
.js .panel[hidden] { display: none; }
.panel:focus-visible { outline-offset: 6px; }
.panel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.panel__title { font-size: clamp(2rem, 7vw, 3.4rem); }
.panel__note { margin-top: 8px; font-weight: 600; color: var(--inchiostro-2); font-size: .9375rem; }
.panel__photo { flex: none; width: 32vw; max-width: 200px; margin: -6px -4px 0 0; rotate: 4deg; }
.panel__photo .pz { --r: 6px; }
.panel__stk svg, .regole__list svg { height: auto; }
.panel__stk { flex: none; width: 70px; color: var(--rosa); --stk-o: var(--zucchero); --stk-c: var(--lampone); rotate: 12deg; }
.panel__stk--acqua { color: var(--acqua); --stk-c: var(--oro); }
.items { display: grid; gap: 0; }
.item { position: relative; padding: .62em 0 .62em 1.6em; border-top: 2px dotted rgba(59, 26, 42, .2); font-weight: 600; }
.tag { display: inline-block; margin-left: .35em; padding: .12em .6em .16em; border-radius: 99px; background: var(--salvia); font-size: .75rem; font-weight: 700; line-height: 1.3; vertical-align: .12em; white-space: nowrap; }
.item::before { content: ''; position: absolute; left: 0; top: 1em; width: .78em; height: .78em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cg fill='%23F3AFC0'%3E%3Ccircle cy='-24' r='20'/%3E%3Ccircle cy='-24' r='20' transform='rotate(72)'/%3E%3Ccircle cy='-24' r='20' transform='rotate(144)'/%3E%3Ccircle cy='-24' r='20' transform='rotate(216)'/%3E%3Ccircle cy='-24' r='20' transform='rotate(288)'/%3E%3C/g%3E%3Ccircle r='13' fill='%23B8235A'/%3E%3C/svg%3E") center / contain no-repeat; }
.items--prices .item { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.items--paesi b { display: inline-block; min-width: 5.4em; font-weight: 800; color: var(--lampone); }
.group + .group { margin-top: 24px; }
.group__title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; font: 400 1.5rem/1 var(--display); }
.group__title .price { font-family: var(--text); font-size: 1.0625rem; }
.group__title .price, .items--prices .price { color: var(--lampone); font-weight: 700; }
.group--valigia { margin-top: 26px; padding: 18px 16px 8px; border-radius: 22px; background: var(--azzurro); }
.panel__foot { margin-top: 18px; font-size: .9375rem; font-style: normal; font-weight: 600; color: var(--inchiostro-2); }
@media (min-width: 768px) {
  .panel { padding: 40px 44px 44px; max-width: 980px; margin-inline: auto; }
  .board { gap: 28px; }
  .panel__photo { width: 210px; margin: -64px -10px 0 0; }
  .panel__stk { width: 96px; }
  .items { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .group .items--prices, .items--prices { grid-template-columns: 1fr 1fr; }
  .panel__head { margin-bottom: 26px; }
  .item { font-size: 1.125rem; }
}
@media (min-width: 1024px) {
  /* la foto diventa la colonna di sinistra, grande, e resta in vista mentre leggi */
  .panel--foto { display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 48px; align-items: start; }
  .panel--foto > *, .panel--foto .panel__head > div { grid-column: 2; }
  .panel--foto .panel__head { display: contents; }
  .panel--foto .panel__head > div { margin-bottom: 22px; }
  .panel--foto .panel__photo { grid-column: 1; grid-row: 1 / span 8; width: 300px; max-width: none; margin: 0; rotate: -3deg; position: sticky; top: calc(var(--nav) + 40px); }
  .panel--foto .panel__photo .pz { --r: 9px; }
  .panel--foto .items { grid-template-columns: 1fr; }
  .panel--foto .items--paesi { grid-template-columns: 1fr 1fr; }
}

/* ---------- 5 · Torte ---------- */
.torte { position: relative; padding: var(--sec) 0 calc(var(--sec) * .8); }
.torte__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.torte__head .lead { max-width: 44ch; }
.pila { margin-top: 44px; display: grid; gap: 26px; }
.torta { position: relative; border-radius: 32px; padding: 18px 18px 24px; box-shadow: var(--ombra-soft); display: grid; gap: 18px; }
.torta--rosa { background: var(--rosa); }
.torta--porcellana { background: var(--porcellana); }
.torta--acqua { background: var(--acqua); }
.torta__main { rotate: -1.5deg; }
.torta__main .pz { --r: 9px; }
.torta--porcellana .torta__main .pz { background: var(--zucchero); }
.torta__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.torta__thumbs img { width: 100%; border-radius: 14px; border: 4px solid var(--porcellana); box-shadow: 0 8px 16px -10px rgba(59, 26, 42, .5); }
.torta--porcellana .torta__thumbs img { border-color: var(--zucchero); }
.torta__thumbs li:nth-child(1) { rotate: -3deg; } .torta__thumbs li:nth-child(2) { rotate: 2deg; } .torta__thumbs li:nth-child(3) { rotate: -1deg; }
.torta__title { font-size: clamp(2.4rem, 9vw, 4.6rem); }
.torta__body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 0 4px; }
.torta__body p { max-width: 42ch; font-size: 1.0625rem; font-weight: 500; }
.torta__shade { position: absolute; inset: 0; border-radius: inherit; background: var(--inchiostro); opacity: 0; pointer-events: none; z-index: 5; }
.stk--fiocco { width: 92px; right: -6px; top: -26px; color: var(--rosa); --stk-o: var(--porcellana); rotate: 10deg; }
.pila__hint { display: none; }
@media (max-width: 767px) {
  /* telefono: le tre torte diventano un mazzo da sfogliare di lato */
  .pila { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 4px; padding: 34px var(--gutter) 24px;
    scrollbar-width: none; overscroll-behavior-x: contain; }
  .pila::-webkit-scrollbar { display: none; }
  .torta { flex: 0 0 84vw; scroll-snap-align: center; align-content: start; }
  .torta__main img { aspect-ratio: 4 / 3; object-fit: cover; }
  .torta__thumbs { grid-template-columns: repeat(3, 56px); gap: 8px; order: -1; }
  .torta__thumbs img { border-width: 3px; border-radius: 10px; }
  .torta__title { font-size: clamp(2.2rem, 9vw, 3rem); }
  .torta__body { gap: 12px; }
  .torta__body p { font-size: 1rem; }
  .pila__hint { display: block; margin-top: 26px; text-align: center; font-weight: 700; font-size: .8125rem; letter-spacing: .02em; color: var(--inchiostro-2); }
  .pila__hint::after { content: ' →'; }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .torta { animation: posa linear both; animation-timeline: view(inline); animation-range: cover 0% cover 50%; }
  }
}
@keyframes posa { from { rotate: 5deg; scale: .92; } }
.reduce .torta { animation: none; }
@media (min-width: 768px) {
  .torta { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 40px; padding: 34px 40px; }
  .torta__media { order: 0; }
  .torta__thumbs { max-width: 380px; margin-top: 4px; }
  .torta__title { font-size: clamp(2.2rem, 4.6vw, 4.2rem); }
  .stk--fiocco { width: 130px; right: 30px; top: -50px; }
}
@media (min-width: 1024px) and (min-height: 720px) {
  .pila { gap: 0; }
  .torta { position: sticky; top: calc(var(--nav) + 12px + var(--i) * 22px); margin-bottom: 9vh; max-width: 1060px; width: 100%; margin-inline: auto; grid-template-columns: 440px minmax(0, 1fr); }
  .torta:last-child { margin-bottom: 0; }
  .torta__main { width: 440px; }
  .torta__media { display: block; }
}
@media (min-width: 1024px) and (min-height: 720px) and (max-height: 860px) {
  .torta__main { width: 360px; } .torta { grid-template-columns: 360px minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  /* la colonna del testo si riempie: titolo e testo più grandi, le miniature sotto il bottone */
  .torta__body p { font-size: 1.25rem; max-width: 34ch; }
  .torta__title { font-size: clamp(3rem, 5vw, 5rem); }
  .torta__thumbs { grid-template-columns: repeat(3, 120px); gap: 14px; max-width: none; margin-top: 8px; }
  .torta__thumbs li:nth-child(2) { rotate: 3deg; } .torta__thumbs li:nth-child(3) { rotate: -2deg; }
}

.regole { margin-top: 56px; }
.regole__title { font-size: clamp(2rem, 7vw, 3.4rem); text-align: center; }
.regole__list { margin-top: 26px; display: grid; gap: 12px; }
.regole__list li { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 22px; background: var(--porcellana); font-weight: 600; }
.regole__list svg { width: 40px; flex: none; color: var(--rosa); --stk-o: var(--zucchero); --stk-c: var(--lampone); }
.regole__list li:nth-child(2n) svg { color: var(--acqua); --stk-c: var(--oro); }
@media (min-width: 768px) {
  .regole__list { grid-template-columns: 1fr 1fr; gap: 16px; max-width: 980px; margin-inline: auto; }
  .regole__list li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
}

.preventivo { margin-top: 64px; display: grid; gap: 30px; scroll-margin-top: calc(var(--nav) + 10px); }
.preventivo__intro { display: flex; flex-direction: column; gap: 16px; }
.preventivo__intro p:last-child { max-width: 44ch; color: var(--inchiostro-2); font-weight: 500; }
.form { background: var(--porcellana); border-radius: 30px; padding: 22px 18px 24px; box-shadow: var(--ombra-soft); display: grid; gap: 16px; }
.chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend, .field > span { display: block; margin-bottom: 8px; font-weight: 700; font-size: .9375rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: .5em 1.1em; border-radius: 99px; border: 2px solid var(--inchiostro); font-weight: 700; transition: background-color .25s, color .25s, transform .3s var(--ease); }
.chip input:checked + span { background: var(--inchiostro); color: var(--porcellana); }
.chip input:focus-visible + span { outline: 3px solid var(--lampone); outline-offset: 3px; }
.form__row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; }
.field { display: block; min-width: 0; }
.field input, .field textarea { display: block; width: 100%; min-height: 50px; padding: .7em .9em; border-radius: 16px; border: 1.5px solid var(--inchiostro-2); background: var(--porcellana); font-size: 1rem; transition: border-color .2s; }
.field input::placeholder, .field textarea::placeholder { color: var(--inchiostro-2); opacity: .75; }
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field textarea:focus { outline: 3px solid var(--lampone); outline-offset: 3px; border-color: var(--lampone); border-radius: 16px; }
.bubble { position: relative; margin: 6px 0 4px 10px; padding: 14px 16px; border-radius: 20px 20px 20px 4px; background: var(--azzurro); }
.bubble::before { content: ''; position: absolute; left: -10px; bottom: 0; width: 18px; height: 16px; background: var(--azzurro); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.bubble__label { font-size: .75rem; font-weight: 800; letter-spacing: .04em; color: var(--inchiostro-2); margin-bottom: 4px; }
.bubble__text { font-weight: 500; white-space: pre-line; word-break: break-word; }
.form__actions { display: flex; flex-direction: column; gap: 10px; }
.form__toast { min-height: 1.4em; font-weight: 700; font-size: .9375rem; color: var(--verde-aperto); }
@media (min-width: 768px) {
  .form { padding: 34px; }
  .form__actions { flex-direction: row; flex-wrap: wrap; }
}
@media (min-width: 1024px) {
  .preventivo { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; margin-top: 96px; }
  .preventivo__intro { position: sticky; top: calc(var(--nav) + 40px); }
}

/* ---------- 6 · Recensioni ---------- */
.recensioni { position: relative; padding: var(--sec) 0 calc(var(--sec) * .8); }
.rec { position: relative; display: grid; gap: 40px; }
.rec__score { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.stars { display: flex; gap: 6px; }
.star { width: 38px; height: 38px; fill: var(--lampone); }
.star--part { position: relative; display: block; }
.star__bg { width: 38px; fill: rgba(59, 26, 42, .16); }
.star__fill { position: absolute; inset: 0; width: 38px; fill: var(--lampone); clip-path: inset(0 30% 0 0); }
.rec__count { font-weight: 700; }
.rec__actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 6px; }
.rec__list { display: grid; gap: 22px; }
.nuvola { position: relative; padding: 22px 22px 18px; border-radius: 28px 28px 28px 6px; background: var(--porcellana); box-shadow: var(--ombra-soft); rotate: var(--r); }
.nuvola:nth-child(2) { border-radius: 28px 28px 6px 28px; background: var(--azzurro); }
.nuvola blockquote { font-size: 1.1875rem; line-height: 1.42; font-weight: 600; text-wrap: pretty; }
.nuvola__by { margin-top: 12px; font-size: .875rem; font-weight: 600; color: var(--inchiostro-2); }
.mini-stars { color: var(--lampone); letter-spacing: .1em; margin-right: 6px; }
.stk--rec { width: 86px; right: 4%; top: -40px; color: var(--acqua); }
@media (max-width: 767px) { .stk--rec { top: -78px; right: 3%; width: 66px; } }
@media (min-width: 1024px) {
  .rec { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 70px; }
  .rec__list .nuvola:nth-child(2) { margin-left: 70px; }
  .rec__list .nuvola:nth-child(3) { margin-left: 24px; }
  .stk--rec { width: 120px; right: auto; left: 30%; top: -30px; }
}

/* ---------- 7 · Dove e quando ---------- */
.dove { position: relative; padding: var(--sec) 0 calc(var(--sec) * .8); }
.dove__grid { display: grid; gap: 40px; }
.dove__info { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.ora { display: flex; align-items: center; gap: 16px; }
.ring { width: 88px; height: 88px; flex: none; rotate: -90deg; }
.ring circle { fill: none; stroke-width: 12; }
.ring__track { stroke: rgba(59, 26, 42, .14); }
.ora__fiore { display: none; width: 88px; flex: none; color: var(--rosa); --stk-o: var(--porcellana); --stk-c: var(--lampone); rotate: -12deg; overflow: visible; filter: drop-shadow(0 6px 8px rgba(59, 26, 42, .2)); }
.ora:not(.is-open) .ring { display: none; }
.ora:not(.is-open) .ora__fiore { display: block; }
.ring__bar { stroke: var(--inchiostro-2); stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: 326.73; }
.is-open .ring__bar { stroke: var(--verde-aperto); }
.ora__state { font-size: clamp(1.7rem, 6vw, 2.4rem); }
.is-open .ora__state { color: var(--verde-aperto); }
.ora__detail { font-weight: 700; margin-top: 6px; }
.ora__kitchen { font-weight: 500; color: var(--inchiostro-2); font-size: .9375rem; }
.tel { font-size: clamp(2.2rem, 9vw, 3.6rem); text-decoration: none; color: var(--lampone); }
.tel:hover { color: var(--lampone-hover); }
.addr { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; font-weight: 600; font-size: 1.125rem; text-decoration: none; line-height: 1.35; }
.addr__go { font-weight: 800; color: var(--lampone); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.week { width: 100%; max-width: 420px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.week th, .week td { padding: .5em .8em; text-align: left; font-weight: 500; }
.week td { text-align: right; font-weight: 700; }
.week tr + tr th, .week tr + tr td { border-top: 2px dotted rgba(59, 26, 42, .18); }
.week tr.is-today th, .week tr.is-today td { background: var(--porcellana); }
.week tr.is-today th { border-radius: 14px 0 0 14px; font-weight: 800; }
.week tr.is-today td { border-radius: 0 14px 14px 0; }
.week tr.is-today + tr th, .week tr.is-today + tr td { border-top-color: transparent; }
.week__note { font-size: .9375rem; font-weight: 500; color: var(--inchiostro-2); max-width: 40ch; }
.mappa { rotate: 1.5deg; }
.mappa .pz { --r: 10px; }
.mappa__box { position: relative; aspect-ratio: 640 / 560; overflow: hidden; background: var(--zucchero); }
.mappa__box img { width: 100%; height: 100%; object-fit: cover; }
.pin { position: absolute; left: 50%; top: 53.6%; width: 54px; margin: -27px 0 0 -27px; color: var(--lampone); --stk-c: var(--porcellana); filter: drop-shadow(0 6px 6px rgba(59, 26, 42, .35)); }
.pin svg { width: 100%; }
.map__load { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; min-height: 46px; padding: .7em 1.3em; border: 2px solid var(--inchiostro); border-radius: 99px; background: var(--porcellana); font-weight: 700; cursor: pointer; white-space: nowrap; box-shadow: var(--ombra-soft); }
.map__load:hover { background: var(--inchiostro); color: var(--porcellana); }
.map__frame { display: block; width: 100%; height: 100%; border: 0; }
.mappa figcaption { margin-top: 8px; text-align: right; font-size: .75rem; color: var(--inchiostro-2); }
@media (min-width: 1024px) {
  .dove__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 70px; align-items: center; }
  .ring, .ora__fiore { width: 104px; height: 104px; }
}

/* ---------- 8 · Finale + footer ---------- */
.finale { position: relative; padding: 110px 0 120px; overflow: clip; color: var(--zucchero); }
.finale__in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.finale__title { font-size: clamp(3rem, 13.5vw, 8.4rem); color: var(--rosa); max-width: 11ch; text-wrap: balance; }
.finale__lead { max-width: 44ch; font-size: 1.125rem; font-weight: 500; }
.finale__btns { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 360px; margin-top: 10px; }
@media (min-width: 768px) { .finale__btns { flex-direction: row; max-width: none; width: auto; flex-wrap: wrap; justify-content: center; } .finale { padding: 150px 0 170px; } }
.finale .stk { --stk-o: var(--prugna); }
.stk--f1 { width: 70px; left: 6%; top: 8%; color: var(--rosa); --stk-c: var(--oro); }
.stk--f2 { width: 96px; right: 5%; bottom: 7%; color: var(--acqua); }
.stk--f3 { width: 84px; right: 8%; top: 7%; color: var(--zucchero); }
@media (max-width: 767px) { .stk--f1 { width: 50px; top: 34px; left: 5%; } .stk--f3 { width: 62px; top: 30px; right: 6%; } .stk--f2 { width: 76px; bottom: 30px; } }
@media (min-width: 1024px) { .stk--f1 { width: 110px; left: 9%; top: 18%; } .stk--f2 { width: 150px; right: 10%; bottom: 14%; } .stk--f3 { width: 120px; right: 12%; top: 12%; } }
.finale .stk svg { filter: none; }

.footer { color: var(--zucchero); padding: 0 0 calc(40px + env(safe-area-inset-bottom)); }
.footer__in { display: grid; gap: 26px; justify-items: center; text-align: center; border-top: 2px dotted rgba(252, 228, 234, .25); padding-top: 40px; }
.footer__logo { width: 150px; padding: 22px; background: var(--porcellana); border-radius: 50%; aspect-ratio: 1; display: grid; place-items: center; }
.footer__logo img { width: 100%; }
.footer__cols { display: grid; gap: 18px; font-size: .9375rem; }
.footer a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.footer a:hover { color: var(--rosa); }
@media (min-width: 768px) { .footer__in { grid-template-columns: auto 1fr; justify-items: start; text-align: left; align-items: center; gap: 48px; } .footer__cols { grid-template-columns: repeat(3, auto); gap: 48px; } }

/* ---------- Action bar mobile ---------- */
.actionbar { position: fixed; z-index: 45; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px; border-radius: 24px; background: rgba(255, 248, 246, .96); box-shadow: 0 16px 30px -12px rgba(59, 26, 42, .45), 0 0 0 1px rgba(59, 26, 42, .07); transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.actionbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 6px; border-radius: 18px; font-size: .75rem; font-weight: 700; text-decoration: none; }
.actionbar a:first-child { background: var(--lampone); color: var(--su-lampone); }
.actionbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.actionbar.is-away, .js .actionbar:not(.is-live) { transform: translateY(140%); opacity: 0; }
@media (min-width: 768px) { .actionbar { display: none; } }
/* senza JS la barra resta sempre: il footer le lascia spazio */
@media (max-width: 767px) { html:not(.js) .footer { padding-bottom: calc(100px + env(safe-area-inset-bottom)); } }

/* ---------- Stati iniziali solo quando il motion parte (GSAP li porta a 1) ---------- */
.js:not(.reduce) [data-intro] { opacity: 0; }
.js:not(.reduce) [data-chars], .js:not(.reduce) [data-mask] { opacity: 0; }
.mw-mask { padding: .14em .08em .16em; margin: -.14em -.08em -.16em; }
.js:not(.reduce) .stk[data-stk] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print { .nav, .actionbar, .stk, .nastro { display: none; } }