/* ═══════════════════════════════════════════════════════════════════
   PASTICCERIA REX — Castrovillari, dal 1959
   Concept v2: «le sei del mattino, quando il banco si riempie».
   Fondo chiaro e caldo, angoli tondi, dieci video in loop,
   e lo zucchero a velo che scende su tutta la pagina.
   ═══════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Cormorant';src:url('/assets/fonts/cormorant-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant';src:url('/assets/fonts/cormorant-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant';src:url('/assets/fonts/cormorant-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Manrope';src:url('/assets/fonts/manrope-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('/assets/fonts/manrope-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('/assets/fonts/manrope-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Vibes';src:url('/assets/fonts/vibes-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --crema:#FBF6F0;   --panna:#F3E9DC;   --panna-2:#EDDFCC;
  --oro:#B98F32;     --oro-chiaro:#E3C275;
  --amarena:#8E2F3A; --amarena-viva:#A8404B;
  --pistacchio:#7E9440;
  --nero:#1C1613;    --nero-2:#251D18;
  --testo:#2A211C;   --tenue:#6E5F55;
  --r:20px; --r-s:12px; --pill:999px;
  --lato:clamp(1.15rem,4vw,4rem);   /* il margine laterale, uno solo per tutto */
  --titolo:'Cormorant',Georgia,'Times New Roman',serif;
  --corpo:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --script:'Vibes','Snell Roundhand',cursive;
  --e:cubic-bezier(.22,.68,.3,1); --e-foto:cubic-bezier(.16,.84,.28,1);
  --t-foto:.55s; --t-carta:.42s;
  --ombra:0 18px 50px -18px rgba(60,40,25,.28);
  --ombra-s:0 8px 24px -10px rgba(60,40,25,.2);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--crema);color:var(--testo);
  font:400 clamp(1rem,.95rem + .25vw,1.09rem)/1.66 var(--corpo);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  padding-bottom:calc(62px + env(safe-area-inset-bottom))}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0 0 .9em}
h1,h2,h3{font-family:var(--titolo);font-weight:600;line-height:1.05;margin:0;letter-spacing:-.012em}
h1{font-size:clamp(2.02rem,1.05rem + 4.5vw,5.4rem);font-weight:400;overflow-wrap:break-word}
h2{font-size:clamp(1.72rem,1.05rem + 3vw,3.7rem);font-weight:400;overflow-wrap:break-word}
h3{font-size:clamp(1.25rem,1.05rem + 1vw,1.7rem)}
h4{font-family:var(--corpo);font-size:.74rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 1rem;color:var(--amarena)}
em.corsivo{font-family:var(--script);font-style:normal;color:var(--amarena);
  font-size:1.3em;line-height:.85;display:inline-block;padding-right:.06em}
:focus-visible{outline:2px solid var(--amarena);outline-offset:3px;border-radius:6px}
.salta{position:absolute;left:-9999px;z-index:300;background:var(--amarena);color:#fff;
  padding:.8rem 1.2rem;border-radius:var(--pill);font-weight:600}
.salta:focus{left:1rem;top:1rem}
.ico{flex:0 0 auto}

/* ══ LO ZUCCHERO A VELO — la firma ══ */
#zucchero{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.9}
main,.piede,.barra{position:relative;z-index:1}

/* ══ I DECORI CHE SI SPOSTANO CON LO SCORRIMENTO ══ */
.sez,.hero{overflow:hidden}
.decoro{position:absolute;z-index:0;color:var(--oro);opacity:.32;pointer-events:none;
  max-width:34vw;will-change:transform;filter:drop-shadow(0 2px 10px rgba(185,143,50,.16))}
.decoro svg{width:100%;height:auto;display:block}
.panna .decoro{opacity:.3}
.scura .decoro{color:var(--oro-chiaro);opacity:.24}
.sez > .dentro,.hero > .dentro,.sez > .rullo,.sez > .piu{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.decoro{transform:none!important}}

/* ══ BARRA IN ALTO ══ */
.barra{position:fixed;inset:0 0 auto 0;z-index:120;display:flex;align-items:center;
  justify-content:space-between;gap:.8rem;padding:.7rem var(--lato);
  background:rgba(251,246,240,.88);border-bottom:1px solid rgba(185,143,50,.16);
  transition:background .3s var(--e),box-shadow .3s var(--e)}
.barra.giu{box-shadow:0 6px 30px -18px rgba(60,40,25,.55);background:rgba(251,246,240,.97)}
.segno{display:flex;align-items:center;gap:.65rem;text-decoration:none;min-width:0}
.segno-tondo{width:46px;height:46px;border-radius:50%;background:var(--nero);flex:0 0 auto;
  display:grid;place-items:center;box-shadow:0 4px 14px -6px rgba(28,22,19,.6);
  transition:transform .45s var(--e)}
.segno:hover .segno-tondo{transform:rotate(-9deg) scale(1.06)}
.segno-tondo img{width:70%;height:auto}
.segno-nome{font-family:var(--titolo);font-size:1.14rem;line-height:1.05;font-weight:600}
.segno-nome small{display:block;font-family:var(--corpo);font-size:.55rem;font-weight:700;
  letter-spacing:.2em;color:var(--oro);margin-top:.15rem}
.barra-dx{display:flex;align-items:center;gap:.5rem}
.tasto-menu{display:flex;align-items:center;gap:.55rem;background:none;border:0;cursor:pointer;
  font:700 .74rem/1 var(--corpo);letter-spacing:.13em;text-transform:uppercase;color:var(--testo);
  padding:.7rem .3rem}
.tasto-menu i{display:block;width:26px;height:11px;position:relative}
.tasto-menu i::before,.tasto-menu i::after{content:'';position:absolute;left:0;right:0;height:1.6px;
  background:var(--testo);transition:transform .38s var(--e),background .3s}
.tasto-menu i::before{top:0}.tasto-menu i::after{bottom:0}
body.menu-aperto .tasto-menu{color:var(--crema)}
body.menu-aperto .tasto-menu i::before{transform:translateY(4.7px) rotate(45deg);background:var(--crema)}
body.menu-aperto .tasto-menu i::after{transform:translateY(-4.7px) rotate(-45deg);background:var(--crema)}
.barra .solo-largo{display:none}

/* ══ MENU A TUTTO SCHERMO ══ */
.menu{position:fixed;inset:0;z-index:110;background:var(--nero);color:var(--crema);
  display:flex;flex-direction:column;padding:5.4rem var(--lato) 2rem;
  overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-14px);
  transition:opacity .4s var(--e),transform .4s var(--e),visibility .4s}
body.menu-aperto .menu{opacity:1;visibility:visible;transform:none}
body.menu-aperto{overflow:hidden}
.menu ol{display:grid;gap:.05rem;max-width:900px;width:100%;margin:auto 0}
.menu li{overflow:hidden}
.menu a{display:flex;align-items:baseline;gap:1rem;padding:.42rem 0;text-decoration:none;
  font-family:var(--titolo);font-size:clamp(1.75rem,1rem + 4.6vw,3.2rem);line-height:1.14;
  color:var(--crema);transform:translateY(105%);transition:color .25s var(--e)}
body.menu-aperto .menu a{animation:sale-voce .6s var(--e) forwards}
.menu li:nth-child(1) a{animation-delay:.05s}.menu li:nth-child(2) a{animation-delay:.09s}
.menu li:nth-child(3) a{animation-delay:.13s}.menu li:nth-child(4) a{animation-delay:.17s}
.menu li:nth-child(5) a{animation-delay:.21s}.menu li:nth-child(6) a{animation-delay:.25s}
.menu li:nth-child(7) a{animation-delay:.29s}.menu li:nth-child(8) a{animation-delay:.33s}
@keyframes sale-voce{to{transform:none}}
.menu a:hover{color:var(--oro-chiaro)}
.menu a b{font-family:var(--corpo);font-size:.64rem;font-weight:700;color:var(--oro);
  letter-spacing:.16em;flex:0 0 2rem}
.menu-pie{display:flex;flex-wrap:wrap;gap:.7rem 2rem;padding-top:1.8rem;margin-top:1.8rem;
  border-top:1px solid rgba(251,246,240,.16);font-size:.92rem;color:rgba(251,246,240,.7)}
.menu-pie a{text-decoration:none;color:var(--oro-chiaro);display:inline-flex;gap:.45rem;align-items:center}
.menu-pie svg{width:15px;height:15px}

/* ══ PILL, TASTI, ETICHETTE ══ */
.pill{display:inline-flex;align-items:center;gap:.5rem;border-radius:var(--pill);
  padding:.5rem 1rem;font:700 .67rem/1.35 var(--corpo);letter-spacing:.13em;text-transform:uppercase;
  border:1px solid rgba(185,143,50,.45);color:var(--tenue);background:rgba(255,255,255,.55)}
.pill svg{width:13px;height:13px}
.tasto{display:inline-flex;align-items:center;gap:.55rem;border-radius:var(--pill);
  padding:.95rem 1.6rem;font:700 .95rem/1 var(--corpo);text-decoration:none;border:1.5px solid transparent;
  cursor:pointer;transition:transform .25s var(--e),box-shadow .25s var(--e),background .25s,color .25s,border-color .25s}
.tasto svg{width:17px;height:17px}
.tasto:hover{transform:translateY(-3px)}
.t-amarena{background:var(--amarena);color:#fff;box-shadow:0 12px 26px -12px rgba(142,47,58,.75)}
.t-amarena:hover{background:var(--amarena-viva);box-shadow:0 18px 34px -12px rgba(142,47,58,.85)}
.t-vuoto{border-color:rgba(42,33,28,.24);color:var(--testo);background:rgba(255,255,255,.65)}
.t-vuoto:hover{border-color:var(--testo);background:#fff}
.t-oro{background:var(--oro);color:#231A08}
.t-oro:hover{background:var(--oro-chiaro)}
.tasti{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem}
.etichette{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.5rem}
.etichetta{display:inline-flex;align-items:center;gap:.4rem;border-radius:var(--pill);
  padding:.42rem .85rem;font-size:.8rem;background:var(--panna);color:var(--tenue);
  border:1px solid rgba(185,143,50,.22)}
.etichetta svg{width:13px;height:13px;color:var(--oro)}

/* ══ L'ORDINE DELLE FASCE — lo decide il pannello ══
   main a colonna: così ogni fascia può avere il suo `order` senza toccare l'HTML.
   Le fasce non hanno margini verticali, quindi il flex non cambia una virgola del rendering. */
main{display:flex;flex-direction:column}
/* i testi che convivono con un'icona sono avvolti in .mm perché il pannello possa
   cambiarli senza cancellare l'icona. display:contents = per il layout non esiste. */
.mm,.mm.mm{display:contents}
main > *{flex:0 0 auto}

/* ══ SEZIONI ══ */
.sez{padding:clamp(2.3rem,1.4rem + 3.6vw,4.2rem) var(--lato);position:relative}
.dentro{max-width:1320px;margin:0 auto}
.crema{background:var(--crema)}
.panna{background:var(--panna)}
.scura{background:var(--nero);color:var(--crema)}
.scura h4{color:var(--oro-chiaro)}
.scura .guida{color:rgba(251,246,240,.75)}
.scura .pill{border-color:rgba(227,194,117,.4);color:rgba(251,246,240,.82);background:rgba(255,255,255,.06)}
.testata{max-width:720px;margin-bottom:1.9rem}
.testata.centro{margin-inline:auto;text-align:center}
.guida{color:var(--tenue);font-size:1.05rem;margin-top:1.1rem;max-width:54ch}
.testata.centro .guida{margin-inline:auto}

/* ══ HERO ══ */
.hero{padding:6.4rem var(--lato) clamp(2rem,3vw,3rem);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-24%;right:-20%;width:80vw;height:80vw;
  max-width:920px;max-height:920px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(227,194,117,.32),rgba(227,194,117,0) 68%)}
.hero-griglia{display:grid;gap:1.7rem;align-items:center;position:relative}
.hero h1{margin-top:1.1rem}
.parola{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.parola > span{display:inline-block;transform:translateY(108%);opacity:0}
.js .hero.viva .parola > span{animation:sale-parola .8s var(--e) forwards}
@keyframes sale-parola{to{transform:none;opacity:1}}
.hero-sub{font-size:1.08rem;color:var(--tenue);max-width:46ch;margin-top:1.35rem}
.hero-sub b{color:var(--testo);font-weight:700}

/* i vassoi verticali */
.vassoi{position:relative;display:flex;justify-content:center;padding:.7rem 0 1.4rem}
.vassoio{position:relative;border-radius:26px;overflow:hidden;background:var(--panna-2);
  box-shadow:var(--ombra);border:5px solid #fff}
.vassoio video,.vassoio img{width:100%;height:100%;object-fit:cover;
  transform:translateZ(0);backface-visibility:hidden;image-rendering:auto}
.vassoio-1{width:min(74%,340px);aspect-ratio:9/16}
.vassoio-2{width:min(40%,196px);aspect-ratio:3/4;position:absolute;right:1%;bottom:-2%;
  border-radius:18px;z-index:2}
.vassoio-eti{position:absolute;inset:auto 0 0 0;z-index:3;padding:2.2rem .9rem .8rem;
  background:linear-gradient(180deg,rgba(28,22,19,0),rgba(28,22,19,.82));
  color:#fff;font:700 .62rem/1.35 var(--corpo);letter-spacing:.15em;text-transform:uppercase}
.gettone{position:absolute;z-index:4;background:#fff;border-radius:var(--r-s);
  padding:.5rem .75rem;box-shadow:var(--ombra-s);text-align:center;max-width:44%;
  animation:fluttua 5.6s ease-in-out infinite}
.gettone b{display:block;font-family:var(--titolo);font-size:1.2rem;line-height:1;color:var(--amarena)}
.gettone span{display:block;font-size:.52rem;font-weight:700;letter-spacing:.1em;line-height:1.3;
  text-transform:uppercase;color:var(--tenue);margin-top:.2rem}
.gettone-1{top:0;left:0}
.gettone-2{bottom:18%;left:0;animation-delay:-2.8s}
@keyframes fluttua{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ══ BANDE SCORREVOLI ══ */
.banda{overflow:hidden;padding:.85rem 0;border-block:1px solid rgba(185,143,50,.22)}
.banda-amarena{background:var(--amarena);color:#fff;border-color:rgba(255,255,255,.15)}
.banda-oro{background:var(--panna-2);color:var(--testo)}
.banda-pista{display:flex;align-items:center;gap:1.4rem;width:max-content;
  animation:scorri-sx 55s linear infinite}
.banda-oro .banda-pista{animation-name:scorri-dx;animation-duration:52s}
.banda-pista span{font-family:var(--titolo);font-size:clamp(1.05rem,.9rem + .6vw,1.5rem);white-space:nowrap}
.banda-pista i{font-style:normal;font-size:.58rem;opacity:.6}
@keyframes scorri-sx{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes scorri-dx{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}

/* ══ I NUMERI CHE SALGONO ══ */
.numeri{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.numero{background:#fff;color:var(--testo);border-radius:var(--r);padding:1.5rem 1rem;text-align:center;
  box-shadow:var(--ombra-s);border:1px solid rgba(185,143,50,.16);
  transition:transform .35s var(--e),box-shadow .35s var(--e)}
.numero:hover{transform:translateY(-7px);box-shadow:var(--ombra)}
.numero svg{width:26px;height:26px;color:var(--oro);margin:0 auto .7rem}
.numero b{display:block;font-family:var(--titolo);font-weight:600;
  font-size:clamp(2rem,1.3rem + 2.6vw,3.2rem);line-height:1;color:var(--amarena);
  font-variant-numeric:tabular-nums}
.numero span{display:block;font-size:.8rem;color:var(--tenue);margin-top:.45rem;line-height:1.35}

/* ══ CATEGORIE ══ */
.cat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.cat a{display:block;position:relative;border-radius:var(--r);overflow:hidden;text-decoration:none;
  background:var(--nero);box-shadow:var(--ombra-s);contain:paint;
  transition:transform var(--t-carta) var(--e-foto),box-shadow var(--t-carta) var(--e-foto)}
.cat a:hover{transform:translate3d(0,-6px,0);box-shadow:var(--ombra)}
.cat video,.cat img{width:100%;aspect-ratio:1;object-fit:cover;opacity:.94;
  transform:translateZ(0);backface-visibility:hidden;
  transition:transform var(--t-foto) var(--e-foto),opacity .3s linear}
.cat a:hover video,.cat a:hover img{transform:scale3d(1.06,1.06,1);opacity:1}
.cat-testo{position:absolute;inset:auto 0 0 0;z-index:2;padding:2.4rem .95rem 1rem;color:#fff;
  background:linear-gradient(180deg,rgba(28,22,19,0),rgba(28,22,19,.55) 42%,rgba(28,22,19,.94))}
.cat-testo svg{width:22px;height:22px;color:var(--oro-chiaro);margin-bottom:.5rem}
.cat-testo strong{display:block;font-family:var(--titolo);font-weight:600;
  font-size:clamp(1.05rem,.9rem + .5vw,1.35rem);line-height:1.14}
.cat-testo small{display:block;font-size:.66rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--oro-chiaro);margin-top:.35rem}

/* ══ SPLIT ══ */
.split{display:grid;gap:2.6rem;align-items:center}
.split-video{position:relative;justify-self:center;width:min(78%,330px)}
.split-video .vassoio{width:100%;aspect-ratio:9/16}

/* ══ PISTA DI FOTO ══ */
.rullo{overflow:hidden;margin-top:1.6rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rullo-pista{display:flex;gap:.85rem;width:max-content;will-change:transform;
  animation:rulla 46s linear infinite}
@keyframes rulla{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.rullo figure{margin:0;flex:0 0 auto;width:min(58vw,230px)}
.rullo .cornice{border-radius:var(--r);overflow:hidden;box-shadow:var(--ombra-s);cursor:zoom-in;
  contain:paint;transition:transform var(--t-carta) var(--e-foto),box-shadow var(--t-carta) var(--e-foto)}
.rullo figure:hover .cornice{transform:translate3d(0,-6px,0);box-shadow:var(--ombra)}
.rullo img{width:100%;aspect-ratio:3/4;object-fit:cover;transform:translateZ(0);
  backface-visibility:hidden;transition:transform var(--t-foto) var(--e-foto)}
.rullo figure:hover img{transform:scale3d(1.05,1.05,1)}
.rullo figcaption{margin-top:.55rem;font-size:.8rem;color:rgba(251,246,240,.7);display:flex;
  align-items:center;gap:.4rem}
.rullo figcaption svg{width:12px;height:12px;color:var(--oro)}

/* ══ GRIGLIE ══ */
.griglia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}
.griglia li{border-radius:var(--r-s);overflow:hidden;background:var(--panna-2);contain:paint;
  box-shadow:var(--ombra-s);transition:transform var(--t-carta) var(--e-foto),box-shadow var(--t-carta) var(--e-foto)}
.griglia li:hover{transform:translate3d(0,-6px,0);box-shadow:var(--ombra)}
.griglia img,.griglia video{width:100%;aspect-ratio:4/5;object-fit:cover;
  transform:translateZ(0);backface-visibility:hidden;transition:transform var(--t-foto) var(--e-foto)}
.griglia li:hover img{transform:scale3d(1.05,1.05,1)}
.griglia figcaption{padding:.55rem .7rem;font-size:.79rem;color:var(--tenue);background:#fff}
.scura .griglia figcaption{background:var(--nero-2);color:rgba(251,246,240,.72)}

/* ══ TORTE — testo da un lato, galleria filtrabile dall'altro ══ */
.torte-split{display:grid;gap:2.2rem;align-items:start}
.torte-testo{position:relative}
.filtri{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.filtro{display:inline-flex;align-items:center;gap:.45rem;border-radius:var(--pill);
  font:600 .88rem/1 var(--corpo);padding:.62rem .95rem;cursor:pointer;background:#fff;
  border:1.5px solid rgba(42,33,28,.14);color:var(--testo);
  transition:background .22s,border-color .22s,color .22s,transform .2s var(--e-foto)}
.filtro svg{width:14px;height:14px;color:var(--oro);transition:color .22s}
.filtro:hover{transform:translate3d(0,-2px,0);border-color:rgba(42,33,28,.42)}
.filtro.attivo{background:var(--amarena);border-color:var(--amarena);color:#fff}
.filtro.attivo svg{color:#fff}
.filtro b{font-weight:700;opacity:.55;font-size:.78em}
.torte-galleria{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.torte-galleria li{border-radius:var(--r-s);overflow:hidden;background:var(--panna-2);contain:paint;
  box-shadow:var(--ombra-s);cursor:zoom-in;
  transition:transform var(--t-carta) var(--e-foto),box-shadow var(--t-carta) var(--e-foto),
             opacity .32s var(--e-foto)}
.torte-galleria li:hover{transform:translate3d(0,-6px,0);box-shadow:var(--ombra)}
.torte-galleria img{width:100%;aspect-ratio:4/5;object-fit:cover;transform:translateZ(0);
  backface-visibility:hidden;transition:transform var(--t-foto) var(--e-foto)}
.torte-galleria li:hover img{transform:scale3d(1.05,1.05,1)}
.torte-galleria li.via{opacity:0;transform:scale(.94);pointer-events:none;
  position:absolute;visibility:hidden}
.conta-torte{font-size:.85rem;color:var(--tenue);margin-top:1rem;display:flex;align-items:center;gap:.45rem}
.conta-torte svg{width:14px;height:14px;color:var(--oro)}

/* ══ IL 48 ══ */
.blocco48{display:grid;gap:1.8rem;align-items:center}
.n48{font-family:var(--titolo);font-weight:600;line-height:.78;letter-spacing:-.04em;
  font-size:clamp(6rem,3rem + 20vw,13rem);color:transparent;
  -webkit-text-stroke:1.6px var(--oro-chiaro);font-variant-numeric:tabular-nums}
.spunte{display:grid;gap:.7rem;margin-top:1.5rem}
.spunte li{display:flex;gap:.75rem;align-items:flex-start;font-size:1rem}
.spunte svg{width:19px;height:19px;color:var(--pistacchio);flex:0 0 auto;margin-top:.2rem}

/* ══ ELENCHI DI DOLCI — gli storici, i gusti del panettone ══ */
.elenco-titolo{margin:1.6rem 0 .85rem;font:700 .74rem/1 var(--corpo);letter-spacing:.16em;
  text-transform:uppercase;color:var(--amarena)}
.scura .elenco-titolo{color:var(--oro-chiaro)}
.elenco{display:flex;flex-wrap:wrap;gap:.5rem}
.elenco li{display:inline-flex;align-items:center;gap:.5rem;border-radius:var(--pill);
  padding:.46rem .95rem;font-size:.86rem;line-height:1.25;background:#fff;color:var(--testo);
  border:1px solid rgba(185,143,50,.28)}
.elenco li::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--oro);flex:0 0 auto}
.scura .elenco li{background:rgba(255,255,255,.07);border-color:rgba(227,194,117,.32);
  color:rgba(251,246,240,.9)}
.scura .elenco li::before{background:var(--oro-chiaro)}
.elenco-coda{margin:.9rem 0 0;font-size:.86rem;color:var(--tenue)}
.scura .elenco-coda{color:rgba(251,246,240,.6)}
.testata .elenco{margin-top:1.1rem;justify-content:flex-start}

/* ══ MOSTRA DI PIÙ ══ */
.griglia li.celata{display:none}
.griglia.aperta li.celata{display:block;animation:spunta .45s var(--e-foto) both}
@keyframes spunta{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
.piu{display:flex;justify-content:center;margin-top:1.6rem}
.piu .tasto svg{transition:transform .3s var(--e-foto)}
.piu.aperto .tasto svg{transform:rotate(180deg)}

/* ══ CONFIGURATORE ══ */
.config{display:grid;gap:1.6rem}
.scelte{display:grid;gap:1.6rem}
.campo{border:0;margin:0;padding:0;min-width:0}
.campo legend{display:flex;align-items:center;gap:.5rem;font:700 .72rem/1 var(--corpo);
  letter-spacing:.15em;text-transform:uppercase;color:var(--amarena);padding:0;margin-bottom:.85rem}
.campo legend svg{width:15px;height:15px}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-flex;align-items:center;gap:.45rem;border-radius:var(--pill);
  font:600 .92rem/1 var(--corpo);padding:.72rem 1.05rem;cursor:pointer;background:#fff;
  border:1.5px solid rgba(42,33,28,.14);color:var(--testo);
  transition:background .25s,border-color .25s,color .25s,transform .22s var(--e)}
.chip svg{width:15px;height:15px;color:var(--oro);transition:color .25s}
.chip:hover{transform:translateY(-2px);border-color:rgba(42,33,28,.42)}
.chip.attivo{background:var(--amarena);border-color:var(--amarena);color:#fff}
.chip.attivo svg{color:#fff}
.chip[aria-pressed="true"]{background:var(--pistacchio);border-color:var(--pistacchio);color:#fff}
.chip[aria-pressed="true"] svg{color:#fff}
.cursore{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.cursore input[type=range]{flex:1 1 190px;min-width:0;accent-color:var(--amarena);height:26px}
.cursore output{font-family:var(--titolo);font-size:1.5rem;font-weight:600;white-space:nowrap;color:var(--amarena)}
.esito{background:var(--nero);color:var(--crema);border-radius:var(--r);padding:1.6rem 1.3rem;
  box-shadow:var(--ombra);border-top:3px solid var(--oro)}
.esito h4{color:var(--oro-chiaro);display:flex;align-items:center;gap:.5rem}
.esito h4 svg{width:16px;height:16px}
#esitoLista{display:grid;gap:.5rem;margin-bottom:1.2rem}
#esitoLista li{display:flex;gap:.75rem;align-items:baseline;font-size:1.02rem;
  padding-bottom:.55rem;border-bottom:1px solid rgba(251,246,240,.14);
  animation:entra-riga .42s var(--e) both}
#esitoLista li b{color:var(--oro-chiaro);font-weight:700;font-variant-numeric:tabular-nums;
  flex:0 0 auto;min-width:2.7rem}
#esitoLista li:nth-child(2){animation-delay:.06s}#esitoLista li:nth-child(3){animation-delay:.12s}
#esitoLista li:nth-child(4){animation-delay:.18s}#esitoLista li:nth-child(5){animation-delay:.24s}
@keyframes entra-riga{from{opacity:0;transform:translate3d(-12px,0,0)}to{opacity:1;transform:none}}
.preavviso{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;color:var(--oro-chiaro);
  background:rgba(185,143,50,.14);border-radius:var(--r-s);padding:.8rem .9rem;margin-bottom:1.2rem}
.preavviso svg{width:17px;height:17px;flex:0 0 auto;margin-top:.15rem}
.esito .tasto{width:100%;justify-content:center}
.esito-nota{color:rgba(251,246,240,.55);font-size:.83rem;margin:.85rem 0 0;text-align:center}

/* ══ PASSI ══ */
.passi{display:grid;gap:1.5rem}
.passo{background:#fff;color:var(--testo);border-radius:var(--r);padding:1.7rem 1.3rem 1.4rem;
  box-shadow:var(--ombra-s);border:1px solid rgba(185,143,50,.16);position:relative;
  transition:transform .4s var(--e),box-shadow .4s var(--e)}
.passo:hover{transform:translateY(-8px);box-shadow:var(--ombra)}
.passo-n{position:absolute;top:-15px;right:1.2rem;width:40px;height:40px;border-radius:50%;
  background:var(--amarena);color:#fff;display:grid;place-items:center;
  font-family:var(--titolo);font-size:1.24rem;font-weight:600}
.passo svg.ico{width:30px;height:30px;color:var(--oro);margin-bottom:.9rem}
.passo strong{display:block;font-family:var(--titolo);font-size:1.35rem;font-weight:600;margin-bottom:.4rem}
.passo p{margin:0;color:var(--tenue);font-size:.98rem}

.buffet-griglia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.buffet-griglia li{border-radius:var(--r-s);overflow:hidden;background:var(--panna-2);contain:paint;
  box-shadow:var(--ombra-s);cursor:zoom-in;
  transition:transform var(--t-carta) var(--e-foto),box-shadow var(--t-carta) var(--e-foto)}
.buffet-griglia li:hover{transform:translate3d(0,-6px,0);box-shadow:var(--ombra)}
.buffet-griglia img{width:100%;aspect-ratio:4/5;object-fit:cover;transform:translateZ(0);
  backface-visibility:hidden;transition:transform var(--t-foto) var(--e-foto)}
.buffet-griglia li:hover img{transform:scale3d(1.05,1.05,1)}

/* ══ STORIA ══ */
.targa{margin:1.8rem 0 0;padding:1.4rem 1.4rem 1.4rem 1.6rem;background:#fff;color:var(--testo);
  border-radius:var(--r);border-left:3px solid var(--oro);box-shadow:var(--ombra-s);
  transition:transform .4s var(--e)}
.targa:hover{transform:translateX(5px)}
.targa p{font-family:var(--titolo);font-style:italic;
  font-size:clamp(1.15rem,1rem + .95vw,1.6rem);line-height:1.3;margin:0 0 .8rem}
.targa cite{font-style:normal;font-size:.84rem;color:var(--tenue);display:flex;gap:.5rem;align-items:flex-start}
.targa cite svg{width:14px;height:14px;color:var(--oro);flex:0 0 auto;margin-top:.2rem}
/* La famiglia: niente riga che divide */
.ritaglio{display:grid;gap:1.8rem;margin-top:2.2rem;padding-top:0}
.ritaglio figure{margin:0;background:#fff;padding:.7rem;border-radius:6px;
  box-shadow:var(--ombra);transform:rotate(-1.1deg);transition:transform .5s var(--e)}
.ritaglio figure:hover{transform:rotate(0) scale(1.02)}
.ritaglio img{width:100%;border-radius:2px}
.ritaglio figcaption{font-size:.78rem;color:var(--tenue);padding:.6rem .2rem 0}

/* ══ FAQ ══ */
.faq{max-width:840px}
.faq details{background:#fff;color:var(--testo);border-radius:var(--r-s);margin-bottom:.6rem;
  border:1px solid rgba(185,143,50,.18);overflow:hidden;transition:box-shadow .3s var(--e)}
.faq details[open]{box-shadow:var(--ombra-s)}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 3rem 1.1rem 1.2rem;position:relative;
  font-family:var(--titolo);font-size:clamp(1.1rem,1rem + .4vw,1.32rem);font-weight:600;
  transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--amarena)}
.faq summary::after{content:'';position:absolute;right:1.2rem;top:50%;width:11px;height:11px;
  border-right:1.6px solid var(--oro);border-bottom:1.6px solid var(--oro);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--e)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{margin:0 1.2rem 1.2rem;color:var(--tenue);max-width:62ch;
  animation:scendi .32s var(--e) both}
@keyframes scendi{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}

/* ══ DOVE ══ */
.corso{border-radius:var(--r);overflow:hidden;box-shadow:var(--ombra);margin-bottom:2.6rem}
.corso img{width:100%;aspect-ratio:16/9;object-fit:cover}
.dove{display:grid;gap:2.4rem}
.orari{background:#fff;color:var(--testo);border-radius:var(--r);padding:1.5rem 1.3rem;box-shadow:var(--ombra-s);
  border:1px solid rgba(185,143,50,.16)}
.orari dl{margin:.6rem 0 0;display:grid}
.orari dl>div{display:flex;justify-content:space-between;gap:1rem;padding:.55rem .5rem;
  border-radius:8px;transition:background .25s var(--e)}
.orari dl>div:hover{background:var(--panna)}
.orari dt{color:var(--tenue)}
.orari dd{margin:0;font-variant-numeric:tabular-nums;font-weight:600;color:var(--amarena)}
.orari .oggi{background:var(--panna)}
.orari .oggi dt{color:var(--testo);font-weight:700}
.nap{display:grid;gap:.9rem;margin-top:1.6rem}
.nap a,.nap span{display:flex;align-items:flex-start;gap:.7rem;text-decoration:none;color:var(--testo)}
.nap svg{width:18px;height:18px;color:var(--oro);flex:0 0 auto;margin-top:.2rem}
.nap a:hover{color:var(--amarena)}

/* ══ PIEDE ══ */
.piede{background:var(--nero);color:rgba(251,246,240,.78);
  padding:clamp(2.4rem,1.8rem + 2.4vw,3.4rem) var(--lato) 1.5rem}
.piede-griglia{display:grid;gap:2.2rem;max-width:1320px;margin:0 auto}
.piede h4{color:var(--oro-chiaro)}
.piede a{color:rgba(251,246,240,.78);text-decoration:none;transition:color .22s}
.piede a:hover{color:var(--oro-chiaro)}
.piede-marchio{display:flex;align-items:center;gap:.8rem;margin-bottom:1.1rem}
.piede-marchio .segno-tondo{background:rgba(251,246,240,.08)}
.piede-marchio strong{font-family:var(--titolo);font-size:1.32rem;color:var(--crema);display:block}
.piede-marchio em{display:block;font-family:var(--script);font-size:1.05rem;color:var(--oro-chiaro);font-style:normal}
.piede li{padding:.3rem 0}
.piede-nap{display:grid;gap:.6rem}
.piede-nap a,.piede-nap span{display:flex;gap:.6rem;align-items:flex-start;font-size:.94rem}
.piede-nap svg{width:16px;height:16px;color:var(--oro);flex:0 0 auto;margin-top:.2rem}
.piede-barra{max-width:1320px;margin:2.8rem auto 0;padding-top:1.4rem;
  border-top:1px solid rgba(251,246,240,.13);display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;
  justify-content:space-between;font-size:.82rem;color:rgba(251,246,240,.55)}
.piede-barra p{margin:0}

/* ══ BARRA IN BASSO ══ */
.pollice{position:fixed;left:0;right:0;bottom:0;z-index:100;display:flex;gap:.5rem;
  padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(28,22,19,.95);border-top:1px solid rgba(227,194,117,.24)}
.pollice a{flex:1;justify-content:center;padding:.85rem .5rem;font-size:.92rem}
.pollice .t-vuoto{flex:0 0 40%;border-color:rgba(227,194,117,.5);color:var(--oro-chiaro);background:transparent}
.pollice .t-vuoto:hover{background:rgba(227,194,117,.12);border-color:var(--oro-chiaro)}

/* ══ COOKIE ══ */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:130;display:flex;align-items:center;gap:.8rem;
  background:rgba(28,22,19,.97);color:rgba(251,246,240,.86);font-size:.8rem;
  padding:.65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
  transform:translateY(100%);animation:su .45s var(--e) 1s forwards}
@keyframes su{to{transform:none}}
.cookie p{margin:0;flex:1}
.cookie a{color:var(--oro-chiaro)}
.cookie button{background:none;border:0;color:var(--oro-chiaro);font-size:1rem;cursor:pointer;
  padding:.4rem .6rem;transition:transform .22s var(--e)}
.cookie button:hover{transform:scale(1.2)}
body.cookie-visibile .pollice{bottom:42px}
body.cookie-visibile{padding-bottom:calc(104px + env(safe-area-inset-bottom))}

/* ══ REVEAL — si deve vedere ══ */
.su{opacity:0;transform:translate3d(0,42px,0);
  transition:opacity .8s var(--e),transform .8s var(--e)}
.su.ok{opacity:1;transform:none}
.r2{transition-delay:.1s}.r3{transition-delay:.2s}.r4{transition-delay:.3s}
.no-js .su{opacity:1;transform:none}
.no-js .parola > span{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  .su{opacity:1!important;transform:none!important;transition:none}
  .banda-pista,.gettone,#esitoLista li,.menu a,.faq details p{animation:none}
  .js .hero.viva .parola > span{animation:none;transform:none;opacity:1}
  #zucchero{display:none}
}

/* ══════════ TABLET ══════════ */
@media (min-width:680px){
  .numeri{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cat{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
  .griglia{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pista figure{flex:0 0 38%}
  .passi{grid-template-columns:repeat(3,minmax(0,1fr))}
  .split{grid-template-columns:1.05fr .95fr;gap:3rem}
  .split-video{width:min(100%,340px);justify-self:end}
  .split.rovescio .split-video{order:-1;justify-self:start}
  .config{grid-template-columns:1.2fr .95fr;gap:2.2rem;align-items:start}
  .dove{grid-template-columns:1.05fr .95fr;gap:3rem}
  .ritaglio{grid-template-columns:.85fr 1.15fr;align-items:center;gap:2.6rem}
  .blocco48{grid-template-columns:auto 1fr;gap:2.6rem}
  .piede-griglia{grid-template-columns:1.5fr 1fr 1.15fr .9fr;gap:2.4rem}
  .vassoio-1{width:min(70%,360px)}
  .vassoio-2{width:min(40%,200px)}
}

/* ══════════ COMPUTER ══════════ */
@media (min-width:1000px){
  body{padding-bottom:0}
  body.cookie-visibile{padding-bottom:0}
  .pollice{display:none}
  .barra .solo-largo{display:inline-flex}
  .hero{padding-top:9rem;min-height:100svh;display:flex;align-items:center}
  .hero-griglia{grid-template-columns:1.06fr .94fr;gap:4rem;width:100%}
  .griglia.quattro{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pista figure{flex:0 0 25%}
}
@media (min-width:1500px){
  .sez,.piede{padding-inline:max(4rem,calc((100vw - 1320px)/2))}
  .pista{padding-inline:max(4rem,calc((100vw - 1320px)/2));
    margin-inline:calc(-1 * max(4rem,calc((100vw - 1320px)/2)))}
}


/* ══ LA LENTE — ogni foto si apre e si ingrandisce ══ */
.zoomabile{cursor:zoom-in}
.lente{position:fixed;inset:0;z-index:200;display:none;background:rgba(18,13,10,.94);
  align-items:center;justify-content:center;overscroll-behavior:contain;touch-action:none}
.lente.viva{display:flex;animation:lente-entra .3s var(--e-foto)}
@keyframes lente-entra{from{opacity:0}to{opacity:1}}
.lente-scena{position:relative;width:100%;height:100%;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.lente-scena img{max-width:94vw;max-height:88svh;width:auto;height:auto;border-radius:10px;
  box-shadow:0 30px 90px -30px rgba(0,0,0,.9);transform-origin:center center;
  transition:transform .3s var(--e-foto);will-change:transform;user-select:none;-webkit-user-drag:none}
.lente-scena img.trascina{transition:none;cursor:grabbing}
.lente-scena img.ingrandita{cursor:grab}
.lente-barra{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;
  gap:.6rem;justify-content:center;padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent,rgba(18,13,10,.85))}
.lente-tondo{width:46px;height:46px;border-radius:50%;border:1px solid rgba(251,246,240,.28);
  background:rgba(251,246,240,.07);color:var(--crema);display:grid;place-items:center;cursor:pointer;
  transition:background .22s,transform .22s var(--e-foto),opacity .22s}
.lente-tondo:hover{background:rgba(251,246,240,.18);transform:scale(1.08)}
.lente-tondo:disabled{opacity:.3;cursor:default;transform:none}
.lente-tondo svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.lente-x{position:absolute;top:1rem;right:1rem;z-index:4}
.lente-did{position:absolute;top:1rem;left:1rem;right:5rem;z-index:4;color:rgba(251,246,240,.82);
  font-size:.86rem;line-height:1.4}
.lente-num{color:rgba(251,246,240,.6);font-size:.82rem;min-width:3.4rem;text-align:center;
  font-variant-numeric:tabular-nums}
@media (min-width:680px){
  .torte-split{grid-template-columns:.82fr 1.18fr;gap:3rem}
  .torte-testo{position:sticky;top:6.5rem}
  .torte-galleria{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rullo figure{width:250px}
}
@media (min-width:1000px){
  .torte-galleria{grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
}


/* ══ TORTE: le prime sei, poi tutte ══ */
.torte-galleria li.oltre{display:none}
.torte-galleria.aperta li.oltre:not(.via){display:block;animation:spunta .42s var(--e-foto) both}
.torte-colonna{min-width:0}
.piu-torte{justify-content:center;margin-top:1.3rem}
.piu-torte.nascosto{display:none}


/* ══ i video: resa fluida, niente scatti al ridimensionamento ══ */
.cat video,.split-video video,.vassoio video{
  transform:translateZ(0);backface-visibility:hidden;will-change:transform}
.torte-colonna{display:block}


/* ══════════ RIFINITURE DA CELLULARE ══════════ */
@media (max-width:679px){
  .segno-nome{font-size:1.02rem}
  .segno-nome small{font-size:.5rem;letter-spacing:.16em}
  .segno-tondo{width:40px;height:40px}
  .tasto-menu{font-size:.68rem;gap:.4rem;padding:.7rem 0}
  .tasto-menu i{width:23px}
  .hero{padding-top:5.6rem}
  .hero .pill{font-size:.62rem;letter-spacing:.1em;padding:.45rem .8rem}
  .hero-sub{font-size:1.02rem;margin-top:1.1rem}
  .tasti{margin-top:1.3rem;gap:.55rem}
  .tasti .tasto{flex:1 1 100%;justify-content:center}
  .etichette{margin-top:1.1rem;gap:.4rem}
  .etichetta{font-size:.75rem;padding:.38rem .7rem}
  .vassoio-1{width:min(80%,300px)}
  .vassoio{border-width:4px;border-radius:20px}
  .decoro{max-width:30vw;opacity:.26}
  .scura .decoro{opacity:.2}
  .testata{margin-bottom:1.5rem}
  .guida{font-size:1rem}
  .numeri{gap:.7rem}
  .numero{padding:1.2rem .8rem}
  .cat{gap:.7rem}
  .griglia,.torte-galleria,.buffet-griglia{gap:.65rem}
  .split{gap:1.8rem}
  .esito{padding:1.3rem 1.05rem}
  .passo{padding:1.5rem 1.15rem 1.2rem}
  .piede-griglia{gap:1.7rem}
}
@media (max-width:380px){
  .segno-nome small{display:none}
  .gettone{max-width:52%}
  .hero .pill{font-size:.58rem}
}