/* Peonia · fiorista. Colore pieno che cambia tra le sezioni, Bricolage Grotesque + Instrument Sans. */
@font-face{font-family:'Bricolage Grotesque';src:url('../_font/bricolage-grotesque/bricolage-grotesque-var.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('../_font/instrument-sans/instrument-sans-var.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --p:#2e6a4c;  /* verde foglia */
  --s:#f4d7dc;  /* rosa peonia */
  --t:#26213a;  /* inchiostro viola */
  --a:#f5dc6b;  /* ranuncolo */
  --f-titoli:'Bricolage Grotesque', system-ui, sans-serif;
  --f-testo:'Instrument Sans', system-ui, sans-serif;

  --gut:clamp(18px, 4vw, 56px);
  --max:1360px;
  --r:26px;
  --ease:cubic-bezier(.34,1.2,.64,1);
  --liscio:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--s);color:var(--t);font-family:var(--f-testo);font-size:17px;line-height:1.55;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none !important}
h1,h2,h3,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul[role=list]{list-style:none;padding:0}
:focus-visible{outline:3px solid var(--t);outline-offset:3px}

/* colore delle sezioni: senza JS ogni sezione ha il suo fondo */
[data-fondo=s]{background:var(--s);color:var(--t)}
[data-fondo=a]{background:var(--a);color:var(--t)}
[data-fondo=p]{background:var(--p);color:var(--s)}
[data-fondo=t]{background:var(--t);color:var(--s)}
.fondo-vivo main [data-fondo]{background:transparent;color:inherit}

.titolo{font-family:var(--f-titoli);font-weight:800;font-size:clamp(2.5rem, 5.4vw, 5.2rem);line-height:.95;letter-spacing:-.04em}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;white-space:nowrap;transition:transform .5s var(--ease), background-color .4s var(--liscio), color .4s var(--liscio)}
.btn:hover{transform:translateY(-3px) rotate(-1.5deg)}
.btn:active{transform:scale(.97)}
.btn--pieno{background:var(--p);color:var(--s)}
.btn--linea{box-shadow:inset 0 0 0 2px currentColor}
.btn--chiaro{background:var(--t);color:var(--s)}
.btn--largo{width:100%}

/* isola di navigazione */
.isola{position:fixed;z-index:40;top:16px;left:50%;transform:translateX(-50%);width:min(1240px, calc(100% - 32px));display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:66px;padding:8px 10px 8px 22px;background:var(--s);color:var(--t);border-radius:999px;box-shadow:0 10px 40px color-mix(in oklab, var(--t) 16%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--t) 8%, transparent)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-titoli);font-weight:800;font-size:1.3rem;letter-spacing:-.03em;line-height:1.05;min-width:0}
.logo span{min-width:0;overflow-wrap:anywhere}
.logo__fiore{flex:none;color:var(--p);transition:transform 1.2s var(--ease)}
.logo:hover .logo__fiore{transform:rotate(72deg)}
.isola__nav{display:flex;gap:4px}
.isola__nav a{text-decoration:none;font-weight:600;font-size:15px;padding:10px 14px;border-radius:999px;transition:background-color .3s}
.isola__nav a:hover{background:color-mix(in oklab, var(--t) 8%, var(--s))}
.isola__azioni{display:flex;align-items:center;gap:8px}
.lingua{display:flex;gap:2px;border:0;background:color-mix(in oklab, var(--t) 7%, var(--s));border-radius:999px;padding:4px;min-height:44px;align-items:center}
.lingua span{font-size:13px;font-weight:700;padding:6px 10px;border-radius:999px}
.lingua .is-on{background:var(--t);color:var(--s)}
.cestino{position:relative;display:grid;place-items:center;width:50px;height:50px;border:0;border-radius:50%;background:var(--p);color:var(--s)}
.cestino__n{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:var(--a);color:var(--t);font-size:12px;font-weight:700;line-height:22px;text-align:center;box-shadow:0 0 0 2px var(--s)}
.menu-btn{display:none;width:50px;height:50px;border:0;border-radius:50%;background:var(--t);position:relative}
.menu-btn span{position:absolute;left:15px;right:15px;height:2px;border-radius:2px;background:var(--s);transition:transform .5s var(--ease), opacity .3s, top .5s var(--ease)}
.menu-btn span:nth-child(1){top:18px}
.menu-btn span:nth-child(2){top:24px}
.menu-btn span:nth-child(3){top:30px}
.menu-btn[aria-expanded=true] span:nth-child(1){top:24px;transform:rotate(45deg)}
.menu-btn[aria-expanded=true] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded=true] span:nth-child(3){top:24px;transform:rotate(-45deg)}
.menu-pannello{position:fixed;inset:0;z-index:35;background:var(--p);color:var(--s);display:flex;flex-direction:column;justify-content:center;gap:36px;padding:110px var(--gut) 40px}
.menu-pannello nav{display:flex;flex-direction:column;gap:2px}
.menu-pannello nav a{font-family:var(--f-titoli);font-weight:800;font-size:clamp(2.6rem, 12vw, 4.2rem);letter-spacing:-.04em;line-height:1.05;text-decoration:none}
.menu-pannello .btn{background:var(--s);color:var(--p);align-self:flex-start}

/* hero H5: sequenza a dissolvenza con zoom lento */
.hero{display:grid;grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);gap:clamp(28px, 5vw, 80px);align-items:center;min-height:min(100svh, 980px);max-width:1500px;margin:0 auto;padding:clamp(110px, 12vh, 130px) var(--gut) clamp(40px, 5vw, 60px)}
.hero__titolo{font-family:var(--f-titoli);font-weight:800;font-size:clamp(3.4rem, 7.8vw, 8.2rem);line-height:.9;letter-spacing:-.055em;max-width:7.2em}
.hero__sotto{margin-top:28px;max-width:28em;font-size:clamp(1.05rem, 1.35vw, 1.2rem)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero__quadro{position:relative;justify-self:end;width:100%;max-width:560px}
.diapo{position:relative;aspect-ratio:4/5;max-height:calc(min(100svh, 980px) - 170px);border-radius:var(--r);overflow:hidden;background:color-mix(in oklab, var(--t) 10%, var(--s));margin-left:auto}
.diapo__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.diapo__img.is-on{opacity:1}
.bollo{position:absolute;left:-64px;bottom:44px;width:156px;height:156px;overflow:visible}
.bollo text{font-family:var(--f-testo);font-size:13.2px;font-weight:700;letter-spacing:.14em;fill:var(--t)}
.diapo__punti{position:absolute;right:18px;bottom:18px;display:flex;gap:6px;list-style:none;padding:0}
.diapo__punti li{width:26px;height:4px;border-radius:4px;background:color-mix(in oklab, var(--s) 55%, transparent)}
.diapo__punti li.is-on{background:var(--s)}

/* mazzi: la sezione che vende */
.mazzi{max-width:var(--max);margin:0 auto;padding:clamp(80px, 9vw, 130px) var(--gut) clamp(90px, 10vw, 150px)}
.mazzi__testa{display:flex;flex-direction:column;gap:26px;margin-bottom:48px}
.occasioni{display:flex;flex-wrap:wrap;gap:10px}
.occ{border:0;min-height:48px;padding:0 22px;border-radius:999px;font-weight:600;font-size:16px;background:color-mix(in oklab, var(--t) 8%, var(--s));transition:background-color .35s var(--liscio), color .35s var(--liscio), transform .45s var(--ease)}
.occ:hover{transform:translateY(-2px)}
.occ.is-on{background:var(--t);color:var(--s)}
.vaso{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:clamp(20px, 2.6vw, 40px)}
.mazzo{transition:transform .6s var(--ease)}
.mazzo:nth-child(3n+1):hover{transform:rotate(-1.5deg) translateY(-6px)}
.mazzo:nth-child(3n+2):hover{transform:rotate(1.2deg) translateY(-6px)}
.mazzo:nth-child(3n):hover{transform:rotate(-1deg) translateY(-6px)}
.mazzo__foto{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:color-mix(in oklab, var(--t) 8%, var(--s))}
.mazzo__foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--liscio)}
.mazzo:hover .mazzo__foto img{transform:scale(1.06)}
.mazzo__testo{padding:18px 6px 0}
.mazzo h3{font-family:var(--f-titoli);font-weight:700;font-size:1.55rem;line-height:1.1;letter-spacing:-.025em}
.mazzo p{margin-top:6px;font-size:16px;color:color-mix(in oklab, var(--t) 72%, var(--s))}
.mazzo__piede{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.mazzo__piede strong{font-family:var(--f-titoli);font-size:1.7rem;font-weight:800;letter-spacing:-.03em}
.mazzo__add{border:0;min-height:48px;padding:0 22px;border-radius:999px;background:var(--p);color:var(--s);font-weight:600;font-size:15px;white-space:nowrap;transition:transform .5s var(--ease)}
.mazzo__add:hover{transform:scale(1.06) rotate(-2deg)}
.mazzo__add.fatto{background:var(--t)}
.mazzo__tel{min-height:48px;display:inline-flex;align-items:center;padding:0 18px;border-radius:999px;box-shadow:inset 0 0 0 2px var(--t);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap}
.mazzo__tel:hover{background:var(--t);color:var(--s)}
.mazzo.via{display:none}
.mazzi__lutto{margin-top:56px;font-size:16px}
.mazzi__lutto a{font-weight:600;text-underline-offset:4px}

/* consegna */
.consegna{display:grid;grid-template-columns:auto minmax(0, 1fr);gap:clamp(28px, 5vw, 90px);align-items:center;padding:clamp(90px, 10vw, 150px) var(--gut);max-width:1500px;margin:0 auto}
.consegna__ora{font-family:var(--f-titoli);font-weight:800;font-size:clamp(5rem, 17vw, 17rem);line-height:.8;letter-spacing:-.07em;font-variant-numeric:tabular-nums}
.consegna__testo > p{margin-top:20px;max-width:32em}
.consegna__punti{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:18px;margin-top:36px}
.consegna__punti li{background:color-mix(in oklab, currentColor 9%, transparent);border-radius:20px;padding:20px}
.consegna__punti strong{display:block;font-family:var(--f-titoli);font-weight:800;font-size:1.7rem;letter-spacing:-.03em}
.consegna__punti span{display:block;margin-top:4px;font-size:15px;line-height:1.4}
.consegna__extra{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.consegna__extra:not(:has(> li:not([hidden]))){display:none}
.consegna__extra li{padding:8px 16px;border-radius:999px;box-shadow:inset 0 0 0 1.5px currentColor;font-size:15px;font-weight:600}

/* abbonamento */
.abbonamento{padding:clamp(90px, 10vw, 150px) var(--gut);max-width:var(--max);margin:0 auto;display:grid;gap:48px}
.abbonamento__testo p{margin-top:18px;max-width:30em;font-size:1.1rem}
.piani{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:18px}
.piano{border-radius:var(--r);padding:28px;box-shadow:inset 0 0 0 2px color-mix(in oklab, currentColor 45%, transparent);transition:transform .6s var(--ease)}
.piano:hover{transform:translateY(-6px)}
.piano--in{background:var(--s);color:var(--p);box-shadow:none;transform:rotate(-1.5deg)}
.piano--in:hover{transform:rotate(-1.5deg) translateY(-6px)}
.piano__nome{font-weight:600;font-size:17px}
.piano__prezzo{margin-top:26px;font-size:16px}
.piano__prezzo strong{display:block;font-family:var(--f-titoli);font-weight:800;font-size:clamp(3rem, 5vw, 4.6rem);line-height:.9;letter-spacing:-.05em}
.piano__nota{margin-top:14px;font-size:15px;opacity:.85}
.abbonamento .btn{justify-self:start}

/* matrimoni */
.matrimoni{display:grid;grid-template-columns:1.25fr .75fr;grid-template-areas:"a b" "t b";gap:clamp(18px, 2.6vw, 36px);max-width:var(--max);margin:0 auto;padding:clamp(90px, 10vw, 150px) var(--gut)}
.matrimoni__foto{border-radius:var(--r);overflow:hidden}
.matrimoni__foto img{width:100%;height:100%;object-fit:cover}
.matrimoni__foto--a{grid-area:a;aspect-ratio:4/3}
.matrimoni__foto--b{grid-area:b;align-self:end}
.matrimoni__testo{grid-area:t;padding:18px 0 0}
.matrimoni__testo p{margin:18px 0 28px;max-width:32em}

/* recensioni: biglietti */
.parole{padding:clamp(90px, 10vw, 150px) var(--gut);max-width:var(--max);margin:0 auto}
.parole__titolo{font-family:var(--f-titoli);font-weight:800;font-size:clamp(1.6rem, 2.8vw, 2.6rem);letter-spacing:-.03em;text-align:center}
.parole__titolo span{color:var(--p);letter-spacing:.06em;margin-right:8px}
.parole__nuvola{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:clamp(18px, 3vw, 40px);margin-top:56px;align-items:start}
.nota{background:var(--t);color:var(--s);border-radius:18px;padding:28px 26px 24px;box-shadow:0 18px 40px color-mix(in oklab, var(--t) 14%, transparent)}
.nota--1{transform:rotate(-3deg)}
.nota--2{transform:rotate(2deg) translateY(36px)}
.nota--3{transform:rotate(-1.2deg)}
.nota--2{background:var(--p);color:var(--s)}
.nota p{font-family:var(--f-titoli);font-weight:600;font-size:1.35rem;line-height:1.25;letter-spacing:-.02em}
.nota footer{margin-top:16px;font-size:15px;font-weight:600;opacity:.8}

/* negozio */
.negozio{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px, 5vw, 80px);align-items:center;max-width:var(--max);margin:0 auto;padding:clamp(90px, 10vw, 150px) var(--gut)}
.negozio__foto{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.negozio__foto img{width:100%;height:100%;object-fit:cover}
.negozio__via{margin-top:16px;font-size:1.2rem;font-weight:600}
.orari{margin-top:22px;display:grid;gap:8px;max-width:420px}
.orari div{display:flex;justify-content:space-between;gap:18px;padding:12px 18px;border-radius:14px;background:color-mix(in oklab, var(--t) 6%, var(--s))}
.orari dt{font-weight:600}
.negozio__google{margin-top:10px;font-size:15px;opacity:.8}
.negozio__contatti{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:18px;font-weight:600}
.negozio__contatti a{text-underline-offset:4px}
.lettera{margin-top:36px;padding-top:26px;border-top:2px solid color-mix(in oklab, var(--t) 14%, var(--s))}
.lettera label{display:block;font-weight:600;margin-bottom:10px}
.lettera__riga{display:flex;gap:8px;max-width:520px}
.lettera__riga input{flex:1;min-width:0;min-height:54px;border:0;border-radius:999px;background:color-mix(in oklab, var(--t) 7%, var(--s));color:var(--t);padding:0 22px;font:inherit}
.lettera__riga input::placeholder{color:color-mix(in oklab, var(--t) 62%, var(--s))}

/* piede */
.piede{padding:clamp(70px, 8vw, 110px) var(--gut) 30px}
.piede__grande{font-family:var(--f-titoli);font-weight:800;font-size:clamp(3rem, 12vw, 12rem);line-height:.85;letter-spacing:-.06em;white-space:nowrap;overflow:hidden;padding-bottom:.08em;max-width:1500px;margin:0 auto}
.piede__righe{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 30px;margin:40px auto 0;max-width:1500px;padding-top:22px;border-top:1px solid color-mix(in oklab, var(--s) 25%, var(--t));font-size:15px;opacity:.9}

/* carrello */
.cassetto{position:fixed;inset:0;z-index:60}
.cassetto__velo{position:absolute;inset:0;background:color-mix(in oklab, var(--t) 40%, transparent)}
.cassetto__pannello{position:absolute;top:12px;right:12px;bottom:12px;width:min(420px, calc(100% - 24px));background:var(--s);color:var(--t);border-radius:var(--r);display:flex;flex-direction:column;padding:26px}
.cassetto__testa{display:flex;justify-content:space-between;align-items:center}
.cassetto__titolo{font-family:var(--f-titoli);font-weight:800;font-size:1.9rem;letter-spacing:-.04em}
.cassetto__x{width:48px;height:48px;border:0;border-radius:50%;background:color-mix(in oklab, var(--t) 8%, var(--s));display:grid;place-items:center}
.cassetto__lista{padding:18px 0;display:grid;gap:8px}
.cassetto__lista li{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:14px;background:color-mix(in oklab, var(--t) 6%, var(--s))}
.cassetto__vuoto{padding:18px 0}
.cassetto__piede{margin-top:auto;display:grid;gap:12px}
.cassetto__totale{display:flex;justify-content:space-between;font-size:20px;font-weight:600}
.cassetto__nota{font-size:15px;opacity:.8}

.brindisi{position:fixed;left:50%;bottom:26px;z-index:55;transform:translate(-50%, calc(100% + 60px));visibility:hidden;background:var(--t);color:var(--s);padding:14px 24px;border-radius:999px;font-weight:600;font-size:15px;transition:transform .6s var(--ease), visibility .6s;max-width:calc(100% - 40px);text-align:center}
.brindisi.su{transform:translate(-50%, 0);visibility:visible}

.wa{position:fixed;right:22px;bottom:22px;z-index:50;width:60px;height:60px;border-radius:50%;background:var(--p);color:var(--s);display:grid;place-items:center;box-shadow:0 12px 30px color-mix(in oklab, var(--t) 25%, transparent), 0 0 0 3px var(--s);transition:transform .5s var(--ease)}
.wa:hover{transform:scale(1.08) rotate(-8deg)}

.js:not(.pronto) .hero__titolo, .js:not(.pronto) .hero__sotto, .js:not(.pronto) .hero__cta, .js:not(.pronto) .hero__quadro{visibility:hidden}

/* responsive */
@media (min-width:1700px){ body{font-size:18px} }
@media (max-width:1180px){
  .isola__nav{display:none}
  .menu-btn{display:block}
  .vaso{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .consegna__punti{grid-template-columns:1fr}
}
@media (max-width:899px){
  .isola{top:10px;width:calc(100% - 20px);min-height:60px;padding:6px 6px 6px 16px}
  .logo{font-size:1.1rem}
  .lingua{display:none}
  .cestino, .menu-btn{width:46px;height:46px}
  .menu-btn span{left:13px;right:13px}
  .menu-btn span:nth-child(1){top:16px}
  .menu-btn span:nth-child(2){top:22px}
  .menu-btn span:nth-child(3){top:28px}
  .menu-btn[aria-expanded=true] span:nth-child(1), .menu-btn[aria-expanded=true] span:nth-child(3){top:22px}
  .hero{grid-template-columns:1fr;min-height:0;padding-top:104px;gap:36px}
  .hero__quadro{justify-self:stretch;max-width:none}
  .diapo{aspect-ratio:1/1;max-height:none}
  .bollo{left:auto;right:10px;bottom:auto;top:-40px;width:104px;height:104px}
  .consegna{grid-template-columns:1fr}
  .consegna__ora{font-size:clamp(5rem, 30vw, 9rem)}
  .piani{grid-template-columns:1fr}
  .piano--in, .piano--in:hover{transform:none}
  .matrimoni{grid-template-columns:1fr 1fr;grid-template-areas:"a a" "b t"}
  .matrimoni__foto--b{align-self:start}
  .parole__nuvola{grid-template-columns:1fr;gap:26px}
  .nota--2{transform:rotate(1.5deg)}
  .negozio{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .hero__titolo{font-size:clamp(3.1rem, 16vw, 4.4rem)}
  .hero__cta .btn{flex:1 1 100%}
  .vaso{gap:30px 14px}
  .mazzo h3{font-size:1.2rem}
  .mazzo p{font-size:14px}
  .mazzo__piede{flex-direction:column;align-items:stretch;gap:8px}
  .mazzo__piede strong{font-size:1.4rem}
  .mazzo__add, .mazzo__tel{justify-content:center;padding:0 10px;font-size:14px}
  .matrimoni{grid-template-columns:1fr;grid-template-areas:"a" "t"}
  .matrimoni__foto--b{display:none}
  .lettera__riga{flex-direction:column}
  .piede__righe{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation:none !important}
}

/* tasto WhatsApp: compare dopo il primo scorrimento (non copre niente nella prima schermata) */
.js .wa{opacity:0;visibility:hidden;translate:0 18px;transition:opacity .4s ease, visibility .4s, translate .5s ease}
.js .wa.vista{opacity:1;visibility:visible;translate:0 0}

/* apertura: un fiore sboccia e si apre fino a scoprire il sito */
.apertura{background:var(--p);color:var(--s)}
.apertura__centro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px, 3.5vh, 30px);padding:0 24px;text-align:center}
.apertura__fiore{width:clamp(150px, 22vw, 240px);height:auto;overflow:visible}
.apertura__petali ellipse{fill:var(--s)}
.apertura__cuore{fill:var(--a)}
.apertura__nome{font-family:var(--f-titoli);font-weight:800;font-size:clamp(2rem, 6vw, 4.6rem);line-height:1;letter-spacing:-.04em;max-width:12em}