@font-face{font-family:Agbalumo;src:url(fonts/agbalumo-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Agbalumo;src:url(fonts/agbalumo-latin-ext-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Funnel Sans";src:url(fonts/funnel-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Funnel Sans";src:url(fonts/funnel-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Funnel Sans";src:url(fonts/funnel-sans-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Funnel Display";src:url(fonts/funnel-display-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --blu:#1D2B5F;--notte:#11183A;--pois:#D42A3A;--pois-scuro:#A81E2C;--foulard:#F2B533;
  --sedia:#5E8455;--tovaglia:#FBF3F5;--inchiostro:#1D2B5F;--led:#E0359A;--bianco:#fff;
  --ombra:0 10px 30px rgb(17 24 58 / .18);
  --ease:cubic-bezier(.2,.8,.2,1);
  --disp:Agbalumo,"Trebuchet MS",cursive;
  --sans:"Funnel Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --num:"Funnel Display","Funnel Sans",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.55;color:var(--inchiostro);background:var(--tovaglia);padding-bottom:72px;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:.2em}
h1,h2,h3,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--foulard);color:var(--notte)}
:focus-visible{outline:3px solid var(--foulard);outline-offset:3px}
.tovaglia :focus-visible,.pranzo :focus-visible,.feste :focus-visible{outline-color:var(--pois)}
.wrap{width:100%;max-width:1160px;margin-inline:auto;padding-inline:16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.ic{width:22px;height:22px;flex:none}

h1,h2{font-family:var(--disp);font-weight:400;text-wrap:balance}
h1{font-size:clamp(2rem,8.5vw,4.6rem);line-height:1.05}
h2{font-size:clamp(1.9rem,6vw,3rem);line-height:1.1}
.etichetta{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.etichetta-g{color:var(--foulard)}

/* bottoni */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.7rem 1.4rem;border-radius:999px;border:2px solid transparent;font:700 1rem/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:background .2s,color .2s,transform .2s var(--ease)}
.btn .ic{transition:transform .2s var(--ease)}
.btn:hover .ic{transform:translateX(3px)}
.btn-giallo{background:var(--foulard);color:var(--notte)}
.btn-giallo:hover{background:#dc9f1f}
.btn-contorno{border-color:#fff;color:#fff;background:transparent}
.btn-contorno:hover{background:rgb(255 255 255 / .15)}
.btn-pois{background:var(--pois);color:#fff}
.btn-pois:hover{background:var(--pois-scuro)}

/* header */
.top{position:sticky;top:0;z-index:20;background:var(--blu);color:#fff;height:60px;box-shadow:0 2px 12px rgb(17 24 58 / .3)}
.top-in{display:flex;align-items:center;justify-content:space-between;height:100%;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--disp);font-size:1.4rem}
.brand img{height:44px;width:auto}
.nav{display:none}
.top-cta{padding:0;width:44px;min-height:44px;height:44px}
.top-cta-t{display:none}

/* hero */
.hero{background:var(--blu);color:#fff;position:relative;overflow:clip;padding-top:28px}
.hero-in{display:grid;gap:28px;padding-bottom:44px}
.hero-txt{display:grid;gap:16px;align-content:center;justify-items:start}
.hero-riga{font-size:1.1rem;max-width:34ch}
.hero-riga strong{color:var(--foulard);font-family:var(--disp);font-weight:400;font-size:1.3em}
.hero-btns{display:grid;gap:12px;width:100%}
.hero-sotto{font-size:.95rem;opacity:.9}
.hero-foto{position:relative}
.hero-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;box-shadow:var(--ombra)}
.cerchio-logo{position:absolute;top:-14px;right:10px;width:96px;aspect-ratio:1;border-radius:50%;background:#fff;border:6px solid var(--pois);display:grid;place-items:center;overflow:hidden}
.cerchio-logo img{width:70%;height:auto}
.orlo{height:18px;background:radial-gradient(circle,#fff 0 22%,transparent 23%) 0 0/22px 22px,var(--pois)}
.hl{color:var(--foulard)}
/* karaoke */
.js .w{display:inline-block;color:transparent;background:linear-gradient(90deg,var(--foulard) 50%,rgb(255 255 255 / .35) 50%) 100% 0/200% 100%;-webkit-background-clip:text;background-clip:text;animation:kar .26s var(--ease) forwards;animation-delay:calc(var(--i) * 180ms + 250ms)}
@keyframes kar{to{background-position:0 0}}
.js .kfin .w{animation:none;background:none;color:#fff;transition:color .5s}
.js .kfin .w.hl-w{color:var(--foulard)}

/* pranzo */
.pranzo{padding:56px 0 64px;background:var(--tovaglia)}
.pranzo-in{display:grid;gap:32px;align-items:center}
.pranzo-txt{display:grid;gap:18px;justify-items:start}
.pranzo-txt>p{max-width:46ch}
.prezzo-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.prezzo{width:150px;aspect-ratio:1;border-radius:50%;padding:9px;background:radial-gradient(circle,#fff 0 22%,transparent 23%) 0 0/16px 16px,var(--pois);transform:rotate(-4deg);flex:none}
.prezzo-in{width:100%;height:100%;border-radius:50%;background:var(--pois);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.prezzo-in b{font:400 2.8rem/1 var(--disp)}
.prezzo-in span{font-size:.9rem;font-weight:700;margin-top:4px}
blockquote{position:relative;padding-top:34px;max-width:46ch}
blockquote::before{content:"“";position:absolute;top:-14px;left:-4px;font:400 5rem/1 var(--disp);color:var(--foulard);text-shadow:0 1px 0 var(--blu)}
blockquote p{font-size:1.15rem;font-weight:600}
blockquote footer{margin-top:6px;font-size:.95rem;opacity:.8}
.pranzo-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;box-shadow:var(--ombra)}

/* sabato */
.sabato{background:var(--notte);color:#fff;padding:64px 0}
.sabato .wrap{display:grid;gap:28px}
.sab-head{display:flex;align-items:center;gap:16px}
.oro{width:84px;height:84px;border-radius:50%;flex:none}
.sab-lead{font-size:1.15rem;max-width:44ch}
.eq{display:inline-flex;align-items:flex-end;gap:4px;height:22px;margin-left:8px;vertical-align:baseline}
.eq i{display:block;width:4px;height:18px;background:var(--foulard);border-radius:2px;transform-origin:bottom;animation:eq 900ms ease-in-out infinite alternate}
.eq i:nth-child(2){animation-delay:-300ms}.eq i:nth-child(3){animation-delay:-600ms}
@keyframes eq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.biglietti{display:grid;gap:16px}
.biglietto{position:relative;border:2px dashed var(--foulard);border-radius:14px;padding:20px 24px;text-align:center;display:grid;gap:2px}
.biglietto::before,.biglietto::after{content:"";position:absolute;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--notte);border:2px dashed var(--foulard)}
.biglietto::before{left:-12px;clip-path:inset(0 0 0 50%)}
.biglietto::after{right:-12px;clip-path:inset(0 50% 0 0)}
.biglietto h3{font:700 1rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--foulard)}
.bp{font:400 3rem/1.1 var(--disp)}
.bs{font-size:.95rem;opacity:.9}
.scaletta{background:rgb(255 255 255 / .06);border-radius:18px;padding:20px 16px;box-shadow:0 0 0 1px rgb(224 53 154 / .45),0 0 28px rgb(224 53 154 / .25)}
.scaletta h3{font:700 .8rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--foulard);margin-bottom:12px}
.scaletta li{position:relative;display:grid;grid-template-columns:auto 1fr;gap:14px;padding:14px 0 14px 16px;border-top:1px solid rgb(255 255 255 / .12)}
.scaletta li::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:2px;background:var(--led)}
.scaletta .n{font:700 1.4rem/1.2 var(--num);color:var(--foulard)}
.scaletta .data{font:700 1.05rem/1.3 var(--num);color:var(--foulard)}
.scaletta .ev{font-weight:700;font-size:1.15rem}
.scaletta .dett{opacity:.92;margin-top:2px}
.fb-nota,.nessuno{margin-top:12px;font-size:1rem}
.fb-nota a,.nessuno a{color:var(--foulard)}
.successo{font-size:1rem;opacity:.92;max-width:62ch}
.galleria{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;-webkit-overflow-scrolling:touch;scrollbar-color:var(--foulard) transparent}
.galleria figure{flex:none;scroll-snap-align:start;border-radius:18px;overflow:hidden;position:relative;width:62%;aspect-ratio:3/4}
.galleria .g-large{width:86%;aspect-ratio:3/2}
.galleria img{width:100%;height:100%;object-fit:cover}
.g-large::after{content:"";position:absolute;inset:0;background:rgb(29 43 95 / .35)}
.sab-cta{display:flex}

/* feste */
.feste{background:var(--tovaglia);padding:64px 0}
.feste-in{display:grid;gap:32px}
.feste-txt{display:grid;gap:18px;justify-items:start}
.feste-txt>p{max-width:48ch}
.pastiglie{display:flex;flex-wrap:wrap;gap:10px}
.pastiglie li{padding:8px 18px;border-radius:999px;color:#fff;font-weight:700;background:radial-gradient(circle,rgb(255 255 255 / .28) 0 20%,transparent 22%) 0 0/14px 14px,var(--pois-scuro)}
.feste-btns{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.link-mail{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;overflow-wrap:anywhere}
.feste-foto{display:grid;grid-template-columns:1fr 2fr;gap:12px;align-items:stretch}
.feste-foto img{width:100%;height:100%;object-fit:cover;border-radius:18px;box-shadow:var(--ombra)}
.f1{aspect-ratio:3/4}.f2{aspect-ratio:4/3}

/* dove */
.dove{background:var(--blu);color:#fff;padding:64px 0}
.dove-in{display:grid;gap:32px}
.dove-txt{display:grid;gap:20px;justify-items:start}
address{font-style:normal;display:grid;gap:2px}
address a,.foot a,.fb-nota a{text-decoration-thickness:1px}
address p{min-height:30px}
.orari{border-collapse:collapse;width:100%;max-width:380px}
.orari th,.orari td{padding:8px 0;border-bottom:1px solid rgb(255 255 255 / .2);text-align:left}
.orari td{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.badge-acc{display:flex;flex-wrap:wrap;gap:10px}
.badge-acc li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgb(94 132 85 / .28);border:1.5px solid var(--sedia);font-weight:600;font-size:.95rem}
.badge-acc .ic{width:18px;height:18px;color:#a9d49b}
.acc-nota{font-size:.95rem;opacity:.85;margin-top:-8px}
.mappa{display:grid;gap:14px;align-content:start}
.mappa-box{min-height:300px;border-radius:18px;background:linear-gradient(135deg,#2a3b7a,var(--notte));display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;padding:20px;overflow:hidden}
.mappa-box iframe{width:100%;height:100%;min-height:340px;border:0;border-radius:18px}
.mappa-box.on{padding:0;display:block}
.mappa .btn{justify-self:start}

.foot{background:var(--notte);color:#fff;padding:36px 0}
.foot-in{display:grid;gap:12px;justify-items:start}
.foot img{width:60px;height:auto;background:#fff;border-radius:50%;padding:8px}
.foot p{max-width:60ch;overflow-wrap:anywhere}

/* barra mobile */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--blu);box-shadow:0 -4px 18px rgb(17 24 58 / .35)}
.barra a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:12px;color:#fff;text-decoration:none;font-weight:700;font-size:.95rem;background:rgb(255 255 255 / .1)}
.barra a:first-child{background:var(--foulard);color:var(--notte)}

/* reveal */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .prezzo{opacity:0}
.js .prezzo.in{animation:timbro .38s var(--ease) forwards}
@keyframes timbro{from{opacity:0;transform:scale(.8) rotate(-8deg)}to{opacity:1;transform:scale(1) rotate(-4deg)}}
.js .scaletta li{opacity:.4}
.js .scaletta li::before{transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
.js .scaletta li{transition:opacity .5s}
.js .scaletta.in li{opacity:1}
.js .scaletta.in li::before{transform:none}
.js .scaletta.in li:nth-child(2){transition-delay:.12s}.js .scaletta.in li:nth-child(2)::before{transition-delay:.12s}

@media (min-width:480px){.hero-btns{display:flex;flex-wrap:wrap}.biglietti{grid-template-columns:1fr 1fr}.top-cta{width:auto;padding:.5rem 1.2rem}.top-cta-t{display:inline}}
@media (min-width:768px){
  body{padding-bottom:0}.barra{display:none}
  .oro{width:120px;height:120px}.prezzo{width:180px}.cerchio-logo{width:96px}
}
@media (min-width:900px){
  .nav{display:flex;gap:28px;font-weight:600}
  .nav a{text-decoration:none;padding:10px 4px}.nav a:hover{color:var(--foulard)}
  .hero{padding-top:56px}
  .hero-in{grid-template-columns:1fr 1fr;gap:56px;padding-bottom:72px;align-items:center}
  .hero-img{aspect-ratio:5/4;transform:rotate(-2deg)}
  .cerchio-logo{top:auto;right:auto;bottom:-40px;left:-40px;width:150px;border-width:8px}
  .pranzo-in{grid-template-columns:1.05fr 1fr;gap:64px}
  .pranzo-foto img{aspect-ratio:1/1}
  .galleria{display:grid;grid-template-columns:3fr 1fr 1fr;overflow:visible;gap:16px}
  .galleria figure,.galleria .g-large{width:auto;aspect-ratio:auto;height:420px}
  .feste-in{grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .dove-in{grid-template-columns:1fr 1fr;gap:64px}
}
@media (max-width:380px){
  h1{font-size:2.05rem}
  .prezzo{width:150px}
  .top-in{gap:8px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js .prezzo{opacity:1;transform:none}
  .prezzo{transform:rotate(-4deg)!important}
  .js .scaletta li{opacity:1}.js .scaletta li::before{transform:none}
  .js .w{background:none;color:#fff}.js .w.hl-w{color:var(--foulard)}
}
address a,.foot-in a,.fb-nota a{display:inline-flex;align-items:center;min-height:44px}
.fb-nota{display:block}
.fb-nota a{display:inline;min-height:0;padding-block:12px}