/* ============================================================
   D'PARTY — Atlanta Dessert Catering
   Stylesheet · organized by section · edit tokens below
   ============================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root{
  /* Brand palette */
  --cream:        #FBF5EE;   /* main warm background */
  --warm-white:   #FFFDFA;   /* card / surface */
  --blush:        #F5DBDF;   /* soft blush pink */
  --blush-soft:   #FBEBEC;   /* very light blush wash */
  --rose:         #C6868C;   /* dusty rose */
  --rose-deep:    #A9636B;   /* deeper rose (hover) */
  --burgundy:     #6E2733;   /* subtle burgundy detail / accent */
  --burgundy-ink: #521C26;   /* darker burgundy */
  --ink:          #3B2A2C;   /* body text (AA on cream) */
  --ink-soft:     #6B565A;   /* secondary text */
  --gold:         #C29A54;   /* refined accent (sparkle/rule) */
  --wa:           #25D366;   /* WhatsApp green */
  --wa-deep:      #128C7E;
  --line:         #E7D6D0;   /* hairline borders */

  /* Typography */
  --font-serif:  'Baloo 2', 'Georgia', sans-serif;
  --font-sans:   'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script: 'Parisienne', cursive;

  /* Spacing scale (8pt based) */
  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem;
  --sp-5:3rem;  --sp-6:4rem; --sp-7:6rem;  --sp-8:8rem;

  /* Radius & shadow */
  --r-sm:10px; --r-md:16px; --r-lg:26px; --r-pill:999px;
  --shadow-sm: 0 2px 12px rgba(110,39,51,.06);
  --shadow-md: 0 14px 40px -18px rgba(110,39,51,.28);
  --shadow-lg: 0 30px 70px -30px rgba(110,39,51,.35);

  --container: 1180px;
  --nav-h: 148px;
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:clamp(16px,1rem + .1vw,17px);
  line-height:1.65;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
h1,h2,h3{ margin:0; font-family:var(--font-serif); font-weight:600; line-height:1.16; letter-spacing:0; color:var(--burgundy-ink); }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

/* ---------- HELPERS ---------- */
.wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.15rem,4vw,2.5rem); }
.wrap--narrow{ max-width:820px; }
.section{ padding-block:clamp(3.5rem,8vw,7rem); }
.section--tint{ background:linear-gradient(180deg,var(--blush-soft),var(--cream)); }
.section--about{ background:var(--warm-white); }
.section--faq{ background:linear-gradient(180deg,var(--cream),var(--blush-soft)); position:relative; overflow:hidden; }
/* scattered confetti dots so the FAQ doesn't read as a plain white list */
.section--faq::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.7;
  background-image:
    radial-gradient(circle, #EC8AA6 44%, transparent 48%),
    radial-gradient(circle, #8FC0E0 44%, transparent 48%),
    radial-gradient(circle, #7FC9AD 44%, transparent 48%),
    radial-gradient(circle, #F2CE6B 44%, transparent 48%),
    radial-gradient(circle, #B79BDD 44%, transparent 48%),
    radial-gradient(circle, #F0A585 44%, transparent 48%),
    radial-gradient(circle, #7CC5C5 44%, transparent 48%),
    radial-gradient(circle, #E79BC7 44%, transparent 48%);
  background-repeat:no-repeat;
  background-size:14px 14px,10px 10px,16px 16px,9px 9px,12px 12px,11px 11px,13px 13px,8px 8px;
  background-position:5% 8%, 93% 12%, 8% 46%, 92% 50%, 4% 82%, 95% 78%, 15% 64%, 85% 30%; }
.section--faq .wrap{ position:relative; z-index:1; }

.script{ font-family:var(--font-script); color:var(--rose); font-weight:400; font-size:clamp(1.8rem,3.4vw,2.4rem); line-height:1.05; }
.script--lg{ font-size:clamp(2.4rem,6vw,3.8rem); color:var(--rose-deep); }

/* colourful script accents — a different candy colour per section (large text, ≥3:1) */
.hero .script--lg{ color:#D75C6E; }
#treats  .sec-head .script{ color:#D1548A; }  /* pink   */
#events  .sec-head .script{ color:#2A8686; }  /* teal   */
#how     .sec-head .script{ color:#7D55C2; }  /* purple */
#gallery .sec-head .script{ color:#3070AB; }  /* blue   */
#faq     .sec-head .script{ color:#C23E6A; }  /* berry  */
.about__copy .script{ color:#2E8F63; }        /* green  */
.inquiry__intro .script{ color:#C96A24; }     /* amber  */

.skip-link{ position:absolute; left:-999px; top:0; background:var(--burgundy); color:#fff;
  padding:.7rem 1.1rem; border-radius:0 0 var(--r-sm) 0; z-index:1000; }
.skip-link:focus{ left:0; }

/* Netlify Forms spam honeypot — kept off-screen, never shown to real visitors */
.hp-field{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* ---------- LANGUAGE GATE (first-visit welcome) ---------- */
body.is-locked{ overflow:hidden; }
.confetti-canvas{ position:fixed; inset:0; z-index:2500; pointer-events:none; }
.lang-gate{ position:fixed; inset:0; z-index:2000; display:flex; overflow-y:auto;
  padding:1.5rem;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--blush-soft), transparent 60%),
    linear-gradient(160deg, var(--cream), var(--blush) 120%);
  animation:gateIn .4s ease both; }
.lang-gate[hidden]{ display:none; }
.lang-gate.is-closing{ animation:gateOut .45s ease forwards; }
@keyframes gateIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes gateOut{ from{ opacity:1; } to{ opacity:0; visibility:hidden; } }

.lang-gate__card{ width:min(480px,100%); margin:auto; text-align:center;
  background:var(--warm-white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.4rem,3.5vw,2.2rem) clamp(1.5rem,4vw,2.6rem); box-shadow:var(--shadow-lg);
  animation:gateCard .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes gateCard{ from{ opacity:0; transform:translateY(18px) scale(.97); } to{ opacity:1; transform:none; } }
.lang-gate__logo{ width:clamp(250px,70vw,400px); height:auto; margin:0 auto .1rem;
  filter:drop-shadow(0 12px 26px rgba(110,39,51,.24)); }
.lang-gate__tag{ color:var(--rose); font-size:clamp(1.25rem,4vw,1.6rem); margin-bottom:.9rem; }
.lang-gate__title{ font-size:clamp(1.1rem,3.4vw,1.35rem); color:var(--burgundy-ink); line-height:1.3;
  display:flex; flex-direction:column; gap:.05rem; margin-bottom:1.2rem; font-weight:500; }
.lang-gate__title span:nth-child(2){ color:var(--rose-deep); }
.lang-gate__title span:nth-child(3){ color:var(--rose); }
.lang-gate__opts{ display:flex; flex-direction:column; gap:.7rem; }
.lang-gate__btn{ display:flex; align-items:center; gap:.9rem;
  padding:.85rem 1.1rem; font-size:1.1rem; font-weight:600; font-family:inherit; cursor:pointer;
  color:var(--burgundy-ink); background:var(--cream); border:1.5px solid var(--line);
  border-radius:var(--r-md); text-align:left;
  transition:transform .18s ease, border-color .2s ease, background .2s ease, box-shadow .25s ease; }
.lang-gate__btn:hover{ transform:translateY(-2px); border-color:var(--rose); background:var(--blush-soft);
  box-shadow:var(--shadow-md); }
.lang-gate__btn:focus-visible{ outline:3px solid var(--rose); outline-offset:2px; }
.lang-gate__flag{ display:block; width:40px; height:27px; flex-shrink:0; border-radius:6px;
  overflow:hidden; box-shadow:0 2px 6px -2px rgba(110,39,51,.35); border:1px solid rgba(0,0,0,.06); }
.lang-gate__flag svg{ display:block; width:100%; height:100%; }
.lang-gate__name{ flex:1; }
.lang-gate__go{ color:var(--rose); display:inline-flex; transform:translateX(-4px); opacity:0;
  transition:transform .22s ease, opacity .22s ease; }
.lang-gate__btn:hover .lang-gate__go,
.lang-gate__btn:focus-visible .lang-gate__go{ transform:translateX(0); opacity:1; }

/* Cute sweet doodles marking each section, sized to be adorable, not subtle */
.sec-doodle{ display:block; width:clamp(74px,12vw,112px); margin:0 auto .6rem; }
.sec-doodle svg{ display:block; width:100%; height:auto;
  filter:drop-shadow(0 6px 12px rgba(110,39,51,.18)); }
.js .sec-doodle{ animation:bobble 4s ease-in-out infinite; transform-origin:center bottom; }
@keyframes bobble{ 0%,100%{ transform:translateY(0) rotate(-4deg); } 50%{ transform:translateY(-7px) rotate(4deg); } }

/* Section headers */
.sec-head{ max-width:640px; margin:0 auto clamp(2rem,5vw,3.4rem); text-align:center; }
.sec-title{ font-size:clamp(2rem,4.6vw,3.1rem); margin-top:.35rem; }
.sec-title--left{ text-align:left; }
.sec-sub{ margin-top:1rem; color:var(--ink-soft); font-size:1.05rem; }
.sec-sub--left{ text-align:left; }

/* Decorative rule divider */
.rule{ display:flex; align-items:center; justify-content:center; gap:1rem; padding-block:2rem; color:var(--rose); }
.rule::before,.rule::after{ content:""; height:1px; width:min(120px,20vw); background:linear-gradient(90deg,transparent,var(--line)); }
.rule::after{ background:linear-gradient(90deg,var(--line),transparent); }
.rule__ico{ color:var(--rose); display:inline-flex; }
.rule__sweets{ display:inline-flex; align-items:center; gap:1rem; }
.rule__sweets svg{ width:clamp(30px,4vw,40px); height:auto; display:block; }
.rule__sweets .dot{ width:5px; height:5px; border-radius:50%; background:var(--rose); opacity:.5; }

/* ---------- BUTTONS ---------- */
.btn{ --pad:.85rem 1.5rem; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:var(--pad); border:none; cursor:pointer; border-radius:var(--r-pill); font-weight:600;
  font-size:.98rem; letter-spacing:.01em; transition:transform .18s ease, box-shadow .25s ease, background .2s ease, color .2s ease;
  will-change:transform; text-align:center; }
.btn:focus-visible{ outline:3px solid var(--rose); outline-offset:3px; }
.btn--lg{ --pad:1.05rem 2rem; font-size:1.05rem; }
.btn--primary{ background:var(--burgundy); color:#fff; box-shadow:var(--shadow-md); }
.btn--primary:hover{ background:var(--burgundy-ink); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn--ghost{ background:transparent; color:var(--burgundy); border:1.5px solid var(--rose); }
.btn--ghost:hover{ background:var(--burgundy); color:#fff; border-color:var(--burgundy); transform:translateY(-2px); }
.btn__ico{ flex-shrink:0; }

/* ---- CONTACT BUTTONS (channel + icon set by JS: SMS in EN, WhatsApp in ES/PT) ---- */
.contact-btn{ gap:.55rem; }
.contact-btn__ico{ display:inline-flex; }
.contact-btn__ico svg{ width:19px; height:19px; display:block; }
/* SMS look — festive champagne gold, distinct from the burgundy primary */
.contact-btn.is-sms{ background:var(--gold); color:#3b2a10; box-shadow:0 12px 30px -16px rgba(194,154,84,.7); }
.contact-btn.is-sms:hover{ background:#b98f45; transform:translateY(-2px); box-shadow:0 16px 36px -16px rgba(194,154,84,.75); }
/* WhatsApp look — the familiar green */
.contact-btn.is-wa{ background:var(--wa); color:#0b3b22; box-shadow:0 12px 30px -16px rgba(18,140,126,.6); }
.contact-btn.is-wa:hover{ background:#1fbe5b; transform:translateY(-2px); box-shadow:0 16px 36px -16px rgba(18,140,126,.7); }
/* On the dark final-CTA band, keep gold readable and give WA a light ring */
.contact-btn--onDark.is-sms{ color:#3b2a10; }
.contact-btn--onDark.is-wa{ box-shadow:0 12px 30px -14px rgba(0,0,0,.5); }

/* ============================================================
   1 · NAVIGATION
   ============================================================ */
.nav{ position:sticky; top:0; z-index:100; background:rgba(251,245,238,.82);
  backdrop-filter:saturate(140%) blur(10px); -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid transparent; transition:border-color .3s ease, box-shadow .3s ease, background .3s ease; }
.nav.is-scrolled{ border-bottom-color:var(--line); box-shadow:0 6px 24px -18px rgba(110,39,51,.4); }
.nav__inner{ max-width:var(--container); margin-inline:auto; height:var(--nav-h);
  padding-inline:clamp(1.15rem,4vw,2.5rem); display:flex; align-items:center; gap:1.2rem; }

.brand{ display:flex; align-items:center; gap:.7rem; margin-right:auto; color:var(--burgundy); }
.brand__mark{ display:grid; place-items:center; width:136px; height:136px; flex-shrink:0; }
.brand__mark img{ width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 3px 6px rgba(110,39,51,.18)); transition:transform .3s ease; }
.brand__type{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-family:var(--font-serif); font-weight:700; font-size:1.55rem; color:var(--burgundy-ink); letter-spacing:0; }
.brand__name--lg{ font-size:2rem; }
.brand__tag{ font-family:var(--font-script); font-size:.95rem; color:var(--rose); margin-top:.05rem; }

.nav__links{ display:flex; gap:1.5rem; }
.nav__links a{ font-size:.95rem; font-weight:500; color:var(--ink); position:relative; padding-block:.3rem; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--rose); transition:width .25s ease; border-radius:2px; }
.nav__links a:hover{ color:var(--burgundy); }
.nav__links a:hover::after,.nav__links a:focus-visible::after{ width:100%; }

.nav__actions{ display:flex; align-items:center; gap:.9rem; }
.lang{ display:inline-flex; align-items:center; gap:.35rem; font-weight:600; font-size:.9rem; }
.lang__globe{ display:inline-grid; place-items:center; width:34px; height:34px; margin-right:.15rem;
  background:none; border:none; cursor:pointer; color:var(--rose-deep); border-radius:var(--r-pill);
  transition:color .2s ease, background .2s ease, transform .3s ease; }
.lang__globe:hover{ color:var(--burgundy); background:var(--blush-soft); transform:rotate(25deg); }
.lang__globe:focus-visible{ outline:2px solid var(--rose); outline-offset:2px; }
.lang__btn{ background:none; border:none; cursor:pointer; color:var(--ink-soft); padding:.3rem .35rem;
  border-radius:var(--r-sm); letter-spacing:.03em; transition:color .2s ease; }
.lang__btn.is-active{ color:var(--burgundy); }
.lang__btn:hover{ color:var(--rose-deep); }
.lang__btn:focus-visible{ outline:2px solid var(--rose); outline-offset:2px; }
.lang__sep{ color:var(--line); }

.nav__toggle{ display:none; flex-direction:column; gap:6px; width:44px; height:44px; background:none;
  border:none; cursor:pointer; align-items:center; justify-content:center; }
.nav__toggle span{ width:28px; height:4px; border-radius:3px; transition:transform .3s ease, opacity .2s ease; }
/* three candy colours instead of a single plain bar */
.nav__toggle span:nth-child(1){ background:#E7708F; }
.nav__toggle span:nth-child(2){ background:#5FA6D6; }
.nav__toggle span:nth-child(3){ background:#59BE9B; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(10px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }

.nav__mobile{ display:none; flex-direction:column; gap:.2rem; padding:1rem clamp(1.15rem,4vw,2.5rem) 1.6rem;
  background:var(--cream); border-top:1px solid var(--line); }
.nav__mobile a{ padding:.75rem .25rem; font-size:1.05rem; font-weight:500; border-bottom:1px solid var(--line); }
.nav__mobile a:last-child{ border:none; margin-top:.6rem; }
.nav__mobile .btn{ width:100%; }

/* Language switcher lives inside the mobile menu (flags + label) */
.mobile-lang{ display:flex; flex-direction:column; gap:.5rem; padding-bottom:1rem; margin-bottom:.6rem;
  border-bottom:1px solid var(--line); }
.mobile-lang__btn{ display:flex; align-items:center; gap:.7rem; width:100%; text-align:left;
  padding:.65rem .8rem; border-radius:var(--r-md); border:1.5px solid var(--line);
  background:var(--warm-white); font-size:1rem; font-weight:600; color:var(--ink);
  transition:border-color .2s ease, background .2s ease; }
.mobile-lang__btn.is-active{ border-color:var(--rose); background:var(--blush-soft); color:var(--burgundy-ink); }
.mobile-lang__flag{ display:block; width:30px; height:20px; flex-shrink:0; border-radius:4px;
  overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.mobile-lang__flag svg{ display:block; width:100%; height:100%; }

/* ============================================================
   2 · HERO
   ============================================================ */
.hero{ position:relative; overflow:hidden;
  background:
    radial-gradient(120% 80% at 85% -10%, var(--blush-soft), transparent 60%),
    radial-gradient(90% 70% at -5% 110%, rgba(198,134,140,.16), transparent 55%),
    var(--cream);
  padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2rem,4vw,3rem); }
.hero__grid{ max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.15rem,4vw,2.5rem);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }

.hero__copy{ max-width:560px; }
.hero__title{ font-size:clamp(3rem,7.5vw,5.6rem); font-weight:700; letter-spacing:-.01em;
  color:var(--burgundy-ink); margin-top:-.2rem; }
.hero .script--lg{ display:block; margin-bottom:-.3rem; }
.hero__lead{ margin-top:1.4rem; font-size:clamp(1.05rem,1.6vw,1.18rem); color:var(--ink-soft); max-width:33ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.hero__loc{ display:flex; align-items:center; gap:.5rem; margin-top:1.7rem; font-size:.95rem;
  font-weight:600; color:var(--rose-deep); }

/* Hero media — framed placeholders */
.hero__media{ position:relative; min-height:clamp(360px,44vw,540px); }
.frame{ position:absolute; margin:0; border-radius:var(--r-md); overflow:hidden;
  background:var(--warm-white); border:6px solid var(--warm-white);
  box-shadow:var(--shadow-lg); }
.frame__ph{ display:block; width:100%; height:100%; min-height:120px; }
.frame img{ display:block; width:100%; height:100%; object-fit:cover; }
.frame--a{ width:56%; aspect-ratio:4/5; left:6%; top:2%; z-index:2; transform:rotate(-3deg); }
.frame--b{ width:40%; aspect-ratio:1/1; right:2%; top:12%; z-index:3; transform:rotate(4deg); }
.frame--c{ width:42%; aspect-ratio:5/4; right:8%; bottom:2%; z-index:1; transform:rotate(-2deg); }

/* Branded placeholder fill (used until real photos are dropped in) */
[data-ph]{ position:relative;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.6), transparent 40%),
    repeating-linear-gradient(135deg, rgba(198,134,140,.10) 0 14px, rgba(198,134,140,.16) 14px 28px),
    linear-gradient(160deg, var(--blush), var(--blush-soft)); }
[data-ph]::after{ content:attr(data-ph); position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-script); font-size:clamp(1.3rem,2.4vw,2rem); color:var(--rose-deep);
  text-align:center; padding:1rem; opacity:.9; }
[data-ph]::before{ content:"📷"; position:absolute; top:.7rem; left:.8rem; font-size:.9rem; opacity:.45; }

/* Sparkles */
.sparkle{ position:absolute; width:16px; height:16px; pointer-events:none;
  background:radial-gradient(circle,var(--gold) 0 2px, transparent 3px);
  filter:drop-shadow(0 0 4px rgba(194,154,84,.5)); }
.sparkle::before,.sparkle::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(var(--gold),var(--gold)) center/2px 100% no-repeat,
             linear-gradient(90deg,var(--gold),var(--gold)) center/100% 2px no-repeat; opacity:.8; }
.sparkle::after{ transform:rotate(45deg); opacity:.4; }
.sparkle--1{ top:6%; right:44%; animation:twinkle 3.2s ease-in-out infinite; }
.sparkle--2{ bottom:16%; left:2%; width:12px; height:12px; animation:twinkle 2.6s ease-in-out .6s infinite; }
.sparkle--3{ top:52%; right:0; width:20px; height:20px; animation:twinkle 3.8s ease-in-out 1.1s infinite; }

@keyframes twinkle{ 0%,100%{ transform:scale(.6) rotate(0); opacity:.35; } 50%{ transform:scale(1) rotate(45deg); opacity:1; } }

/* Petals (JS creates .petal children) */
.petals{ position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.petal{ position:absolute; top:-6%; width:14px; height:14px; opacity:.55;
  background:radial-gradient(circle at 50% 30%, var(--blush), var(--rose));
  border-radius:80% 0 55% 50% / 55% 0 80% 50%;
  animation:fall linear forwards; }
@keyframes fall{
  0%{ transform:translateY(-10%) translateX(0) rotate(0); opacity:0; }
  10%{ opacity:.55; }
  100%{ transform:translateY(115vh) translateX(40px) rotate(320deg); opacity:0; }
}

/* ============================================================
   3 · FEATURED TREATS
   ============================================================ */
.treats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.6rem); }
.card{ background:var(--warm-white); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .28s ease, box-shadow .3s ease;
  display:flex; flex-direction:column; }
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.card__media{ margin:0; width:100%; min-width:0; aspect-ratio:4/3; overflow:hidden; }
.card__ph{ display:block; width:100%; height:100%; }
.card__media img{ display:block; width:100%; height:100%; object-fit:cover; }
.card__body{ padding:1.3rem 1.3rem 1.5rem; display:flex; flex-direction:column; gap:.5rem; flex:1; text-align:center; }
.card__title{ font-size:1.35rem; }
.card__text{ color:var(--ink-soft); font-size:.96rem; flex:1; }
.card__cta{ margin-top:.6rem; align-self:center; }

/* ============================================================
   4 · EVENTS — colourful party stickers, scattered like a sheet
   ============================================================ */
#events{ position:relative; overflow:hidden; }
/* a few confetti dots floating in the section corners (festive, not busy) */
#events::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.55; z-index:0;
  background-image:
    radial-gradient(circle, #EC8AA6 42%, transparent 46%),
    radial-gradient(circle, #8FC0E0 42%, transparent 46%),
    radial-gradient(circle, #7FC9AD 42%, transparent 46%),
    radial-gradient(circle, #F2CE6B 42%, transparent 46%),
    radial-gradient(circle, #B79BDD 42%, transparent 46%),
    radial-gradient(circle, #F0A585 42%, transparent 46%);
  background-repeat:no-repeat;
  background-size:14px 14px,11px 11px,16px 16px,10px 10px,13px 13px,12px 12px;
  background-position:6% 16%, 92% 24%, 12% 84%, 88% 78%, 78% 10%, 20% 40%; }
#events .wrap{ position:relative; z-index:1; }

/* bunting garland above the heading */
.bunting{ display:block; width:min(340px,72%); margin:0 auto .8rem; }
.bunting svg{ display:block; width:100%; height:auto; }
.js .bunting{ animation:swayB 5s ease-in-out infinite; transform-origin:top center; }
@keyframes swayB{ 0%,100%{ transform:rotate(-1.2deg); } 50%{ transform:rotate(1.2deg); } }

.events{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:clamp(.7rem,1.6vw,1.1rem); max-width:900px; margin-inline:auto; }
.event{ display:inline-flex; align-items:center; gap:.65rem;
  padding:.6rem 1.35rem .6rem .6rem; border-radius:var(--r-pill);
  background:var(--evt-soft); border:2px solid var(--evt); color:var(--evt-ink);
  font-weight:700; font-size:clamp(.95rem,1.4vw,1.08rem); white-space:nowrap;
  box-shadow:0 9px 20px -12px rgba(110,39,51,.45);
  --evt:#C6868C; --evt-soft:#F3D5D8; --evt-ink:#a1545c;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; }
/* fun pastel rainbow — one candy colour per event */
.event:nth-child(8n+1){ --evt:#59BE9B; --evt-soft:#DAF0E7; --evt-ink:#256a50; }
.event:nth-child(8n+2){ --evt:#5FA6D6; --evt-soft:#D6E8F5; --evt-ink:#285f88; }
.event:nth-child(8n+3){ --evt:#E9BC44; --evt-soft:#FBEEC6; --evt-ink:#7c5a0f; }
.event:nth-child(8n+4){ --evt:#EC9068; --evt-soft:#FBDDCD; --evt-ink:#a24927; }
.event:nth-child(8n+5){ --evt:#A585D6; --evt-soft:#E7DBF6; --evt-ink:#584090; }
.event:nth-child(8n+6){ --evt:#E7708F; --evt-soft:#FBD8E2; --evt-ink:#a63152; }
.event:nth-child(8n+7){ --evt:#5FBEBE; --evt-soft:#D6EEEE; --evt-ink:#277070; }
.event:nth-child(8n+8){ --evt:#DE84B8; --evt-soft:#F6DCEC; --evt-ink:#94366e; }
/* slight hand-placed tilt so it reads like stickers, not a grid */
.event:nth-child(2n){ transform:rotate(-2.3deg); }
.event:nth-child(3n){ transform:rotate(2deg); }
.event:nth-child(4n){ transform:rotate(-1deg); }
.event:nth-child(5n){ transform:rotate(1.4deg); }
.event__ico{ display:grid; place-items:center; width:44px; height:44px; border-radius:var(--r-pill);
  background:#fff; color:var(--evt-ink); flex-shrink:0; box-shadow:inset 0 0 0 1.5px var(--evt-soft);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.event__ico svg{ width:26px; height:26px; }
.event:hover{ transform:rotate(0) translateY(-5px) scale(1.05); z-index:2;
  box-shadow:0 16px 30px -12px rgba(110,39,51,.5); }
.event:hover .event__ico{ transform:rotate(-10deg) scale(1.08); }

/* ============================================================
   6 · HOW IT WORKS
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,3vw,2.5rem);
  position:relative; }
.step{ position:relative; text-align:center; padding-top:1rem; }
/* each step gets its own candy colour + a playful sticker tilt, like the
   event pills and FAQ accents elsewhere on the page */
.step:nth-child(1){ --step:#E7708F; --step-soft:#FBD8E2; --step-tilt:-5deg; }
.step:nth-child(2){ --step:#5FA6D6; --step-soft:#D6E8F5; --step-tilt:4deg; }
.step:nth-child(3){ --step:#59BE9B; --step-soft:#DAF0E7; --step-tilt:-4deg; }
.step__num{ display:inline-grid; place-items:center; width:70px; height:70px; margin-bottom:1.2rem;
  font-family:var(--font-serif); font-size:1.9rem; font-weight:700; color:#fff;
  background:var(--step); border:3px solid #fff;
  box-shadow:0 0 0 3px var(--step-soft), 0 14px 28px -12px var(--step);
  border-radius:var(--r-pill); position:relative; z-index:2; }
/* dashed ring floating just outside the badge, like a little medal */
.step__num::after{ content:""; position:absolute; inset:-9px; border-radius:inherit;
  border:2px dashed var(--step-soft); opacity:.8; }
.js .step__num{ animation:stepBounce 3.6s ease-in-out infinite; }
.step:nth-child(2) .step__num{ animation-delay:.5s; }
.step:nth-child(3) .step__num{ animation-delay:1s; }
@keyframes stepBounce{
  0%,100%{ transform:rotate(var(--step-tilt)) translateY(0); }
  50%{ transform:rotate(var(--step-tilt)) translateY(-6px); }
}
.step h3{ font-size:1.28rem; margin-bottom:.5rem; }
.step p{ color:var(--ink-soft); max-width:32ch; margin-inline:auto; }
/* connecting line, strung between the three colourful badges */
.steps::before{ content:""; position:absolute; top:calc(1rem + 35px); left:16%; right:16%; height:2px;
  background:repeating-linear-gradient(90deg,var(--rose) 0 8px, transparent 8px 16px); opacity:.5; z-index:1; }

/* ============================================================
   7 · INSTAGRAM GALLERY
   ============================================================ */
.ig-handle{ color:var(--rose-deep); font-weight:700; }
.ig-handle:hover{ text-decoration:underline; }
.gallery__cta{ text-align:center; }

/* ============================================================
   8 · ABOUT
   ============================================================ */
.about{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.about__media{ position:relative; margin:0; width:100%; min-width:0; aspect-ratio:5/6; border-radius:var(--r-lg); overflow:hidden;
  border:8px solid var(--warm-white); box-shadow:var(--shadow-lg); }
.about__ph{ display:block; width:100%; height:100%; }
.about__media img{ display:block; width:100%; height:100%; object-fit:cover; }
.about__ribbon{ position:absolute; bottom:1rem; left:1rem; background:var(--burgundy); color:#fff;
  padding:.4rem 1.2rem; border-radius:var(--r-pill); font-size:1.3rem; box-shadow:var(--shadow-md); }
.about__copy p{ color:var(--ink-soft); margin-top:1.1rem; }
.about__copy p:first-of-type{ margin-top:1.4rem; }

/* ============================================================
   9 · INQUIRY FORM
   ============================================================ */
.inquiry{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.inquiry__intro{ position:sticky; top:calc(var(--nav-h) + 1.5rem); }
.inquiry__intro .btn{ margin-top:1.6rem; }

.form{ background:var(--warm-white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.4rem,3vw,2.4rem); box-shadow:var(--shadow-md); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; margin-bottom:1.1rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field--full{ margin-bottom:1.1rem; }
.field label,.field legend,.treats-pick legend{ font-size:.9rem; font-weight:600; color:var(--burgundy-ink); }
.field input,.field select,.field textarea{ font-family:inherit; font-size:1rem; color:var(--ink);
  padding:.8rem .9rem; border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--cream);
  transition:border-color .2s ease, box-shadow .2s ease; min-height:46px; }
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--rose);
  box-shadow:0 0 0 3px rgba(198,134,140,.22); background:#fff; }
.field input::placeholder,.field textarea::placeholder{ color:#b6a0a2; }
.field.is-invalid input,.field.is-invalid select{ border-color:#c0392b; box-shadow:0 0 0 3px rgba(192,57,43,.14); }
.err{ color:#c0392b; font-size:.82rem; min-height:0; }
.field.is-invalid .err{ min-height:1.1em; }

.treats-pick{ border:none; margin:0 0 1.1rem; padding:0; }
.chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.6rem; }
.chip{ display:inline-flex; align-items:center; gap:.45rem; padding:.55rem .95rem; border:1.5px solid var(--line);
  border-radius:var(--r-pill); cursor:pointer; font-size:.92rem; font-weight:500; background:var(--cream);
  transition:border-color .2s ease, background .2s ease, color .2s ease; }
.chip input{ accent-color:var(--burgundy); width:16px; height:16px; }
.chip:has(input:checked){ border-color:var(--rose); background:var(--blush-soft); color:var(--burgundy-ink); }

.form__submit{ display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; margin-top:.5rem; }
.form__submit .btn{ width:100%; }
.form__note{ font-size:.85rem; color:var(--ink-soft); }
.form__msg{ margin-top:1rem; padding:1rem 1.2rem; border-radius:var(--r-sm); font-weight:600; }
.form__msg.is-success{ background:#e8f6ec; color:#1c6b34; border:1px solid #b6e2c2; }
.form__msg.is-error{ background:#fdecea; color:#a5281b; border:1px solid #f3bcb4; }
.btn[aria-busy="true"]{ opacity:.7; pointer-events:none; }

/* ============================================================
   11 · FINAL CTA
   ============================================================ */
.finalcta{ position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(150deg,var(--burgundy),var(--burgundy-ink) 70%); }
/* colourful party glow */
.finalcta::before{ content:""; position:absolute; inset:0; opacity:.22; pointer-events:none;
  background:radial-gradient(circle at 16% 22%, #EC8AA6, transparent 34%),
             radial-gradient(circle at 84% 26%, #8FC0E0, transparent 34%),
             radial-gradient(circle at 78% 82%, #7FC9AD, transparent 36%),
             radial-gradient(circle at 22% 80%, #B79BDD, transparent 34%),
             radial-gradient(circle at 50% 50%, #F2CE6B, transparent 55%); }

/* festive decoration layer (bunting, floating sweets, confetti dots) */
.finalcta__decor{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }
.finalcta__decor::after{ content:""; position:absolute; inset:0; opacity:.9;
  background-image:
    radial-gradient(circle, #F2CE6B 45%, transparent 49%),
    radial-gradient(circle, #8FC0E0 45%, transparent 49%),
    radial-gradient(circle, #7FC9AD 45%, transparent 49%),
    radial-gradient(circle, #EC8AA6 45%, transparent 49%),
    radial-gradient(circle, #FBEBEC 45%, transparent 49%),
    radial-gradient(circle, #B79BDD 45%, transparent 49%),
    radial-gradient(circle, #F0A585 45%, transparent 49%),
    radial-gradient(circle, #FBEBEC 45%, transparent 49%);
  background-repeat:no-repeat;
  background-size:12px 12px,9px 9px,11px 11px,8px 8px,7px 7px,10px 10px,9px 9px,6px 6px;
  background-position:10% 30%, 90% 40%, 18% 62%, 82% 66%, 30% 20%, 70% 22%, 26% 82%, 76% 84%; }
.finalcta__bunting{ position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(440px,86%); }
.finalcta__bunting svg{ display:block; width:100%; height:auto; }
/* NOTE: this element is centered via translateX(-50%) — the sway animation must
   include that same translateX at every keyframe, or the animation's transform
   value replaces (not adds to) the centering transform and the bunting drifts
   off-centre the instant it starts animating. Do not reuse the plain `swayB`
   keyframe (used by `.bunting`, which centers via margin:auto instead) here. */
.js .finalcta__bunting{ animation:swayBCentered 5s ease-in-out infinite; transform-origin:top center; }
@keyframes swayBCentered{
  0%,100%{ transform:translateX(-50%) rotate(-1.2deg); }
  50%{ transform:translateX(-50%) rotate(1.2deg); }
}
.fc-sweet{ position:absolute; width:clamp(38px,5.5vw,58px); }
.fc-sweet svg{ display:block; width:100%; height:auto; filter:drop-shadow(0 5px 12px rgba(0,0,0,.35)); }
.fc-sweet--1{ top:24%; left:7%; }
.fc-sweet--2{ top:16%; right:9%; }
.fc-sweet--3{ top:60%; left:11%; }
.fc-sweet--4{ top:64%; right:10%; }
.fc-sweet--5{ bottom:12%; left:46%; }
.js .fc-sweet{ animation:fcFloat 6s ease-in-out infinite; }
.js .fc-sweet--2{ animation-duration:7s; animation-delay:.4s; }
.js .fc-sweet--3{ animation-duration:5.4s; animation-delay:.8s; }
.js .fc-sweet--4{ animation-duration:6.6s; animation-delay:.2s; }
.js .fc-sweet--5{ animation-duration:7.4s; animation-delay:1s; }
@keyframes fcFloat{ 0%,100%{ transform:translateY(0) rotate(-7deg); } 50%{ transform:translateY(-11px) rotate(7deg); } }

.finalcta__inner{ position:relative; z-index:2; max-width:760px; margin-inline:auto; text-align:center;
  padding:clamp(3.5rem,8vw,6rem) clamp(1.15rem,4vw,2.5rem); }
.finalcta .script--lg{ color:var(--blush); }
.finalcta__title{ color:#fff; font-size:clamp(2rem,4.6vw,3.2rem); margin-top:.4rem; }
.finalcta__sub{ margin-top:1.1rem; color:rgba(255,255,255,.85); font-size:1.08rem; }
.finalcta__cta{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin-top:2rem; }
.finalcta .btn--primary{ background:#fff; color:var(--burgundy-ink); }
.finalcta .btn--primary:hover{ background:var(--blush-soft); }
.sparkle--s1{ top:18%; left:12%; }
.sparkle--s2{ bottom:20%; right:14%; width:22px; height:22px; }

/* ============================================================
   12 · FOOTER
   ============================================================ */
.footer{ background:var(--burgundy-ink); color:rgba(255,255,255,.82); }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:2.5rem;
  padding-block:clamp(3rem,6vw,4.5rem); }
.footer__logo{ display:flex; align-items:center; gap:.7rem; }
.footer__logo img{ width:60px; height:60px; object-fit:contain; }
.footer__brand .brand__name{ color:#fff; }
.footer__tag{ color:var(--blush); font-size:1.5rem; margin:.4rem 0 .8rem; }
.footer__desc{ max-width:34ch; font-size:.95rem; }
.footer__col h3{ color:#fff; font-family:var(--font-sans); font-size:.85rem; letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:1rem; font-weight:700; }
.footer__col a{ display:flex; align-items:center; min-height:44px; padding:.35rem 0; color:rgba(255,255,255,.82); font-size:.96rem;
  transition:color .2s ease; }
.footer__col a:hover{ color:var(--blush); }
.footer__area{ margin-top:1rem; font-size:.88rem; color:rgba(255,255,255,.6); }
.footer__bar{ border-top:1px solid rgba(255,255,255,.14); }
.footer__bar{ max-width:var(--container); margin-inline:auto; padding:1.4rem clamp(1.15rem,4vw,2.5rem);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  font-size:.85rem; color:rgba(255,255,255,.6); }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ display:flex; flex-direction:column; gap:.8rem; }
.faq__item{ background:var(--warm-white); border:1px solid var(--line); border-radius:var(--r-md);
  padding:.3rem 1.3rem; transition:border-color .2s ease, box-shadow .25s ease;
  --faq:#E7708F; }
.faq__item:nth-child(7n+1){ --faq:#5FA6D6; }
.faq__item:nth-child(7n+2){ --faq:#59BE9B; }
.faq__item:nth-child(7n+3){ --faq:#E9BC44; }
.faq__item:nth-child(7n+4){ --faq:#A585D6; }
.faq__item:nth-child(7n+5){ --faq:#EC9068; }
.faq__item:nth-child(7n+6){ --faq:#5FBEBE; }
.faq__item[open]{ border-color:var(--faq); box-shadow:var(--shadow-sm); }
.faq__item summary{ cursor:pointer; list-style:none; font-family:var(--font-serif); font-weight:600;
  font-size:1.1rem; color:var(--burgundy-ink); padding:1.05rem 2rem 1.05rem 0; position:relative; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-size:1.5rem; color:var(--faq); transition:transform .25s ease; }
.faq__item[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq__item p{ color:var(--ink-soft); padding:0 0 1.1rem; }

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
.contact-float{ position:fixed; right:clamp(1rem,3vw,1.8rem); bottom:clamp(1rem,3vw,1.8rem); z-index:90;
  width:60px; height:60px; border-radius:var(--r-pill); color:#fff;
  display:grid; place-items:center; transition:transform .22s ease; }
.contact-float.is-wa{ background:var(--wa); box-shadow:0 14px 30px -8px rgba(18,140,126,.6); }
.contact-float.is-sms{ background:var(--gold); color:#3b2a10; box-shadow:0 14px 30px -8px rgba(194,154,84,.7); }
.contact-float:hover{ transform:scale(1.08); }
.contact-float:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
.contact-float__ico{ display:inline-flex; }
.contact-float__ico svg{ width:30px; height:30px; display:block; }
.contact-float__pulse{ position:absolute; inset:0; border-radius:inherit; background:currentColor; z-index:-1;
  opacity:.5; animation:pulse 2.4s ease-out infinite; }
.contact-float.is-sms .contact-float__pulse{ background:var(--gold); }
.contact-float.is-wa .contact-float__pulse{ background:var(--wa); }
@keyframes pulse{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(1.8); opacity:0; } }

/* ============================================================
   PLAYFUL MICRO-INTERACTIONS (subtle, on-brand)
   ============================================================ */
/* buttons gently press in on tap */
.btn:active{ transform:translateY(0) scale(.97); }
/* logo gives a little wink on hover */
.brand:hover .brand__mark img{ transform:rotate(-6deg) scale(1.06); }
/* product photos zoom softly inside their frame */
.card__media > *{ transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.card:hover .card__media > *{ transform:scale(1.06); }
/* hero frames drift ever so gently (kept small; disabled for reduced-motion) */
.frame--a{ animation:floatA 7s ease-in-out infinite; }
.frame--b{ animation:floatB 6s ease-in-out .5s infinite; }
.frame--c{ animation:floatC 8s ease-in-out .2s infinite; }
@keyframes floatA{ 0%,100%{ transform:rotate(-3deg) translateY(0); } 50%{ transform:rotate(-3deg) translateY(-7px); } }
@keyframes floatB{ 0%,100%{ transform:rotate(4deg) translateY(0); } 50%{ transform:rotate(4deg) translateY(6px); } }
@keyframes floatC{ 0%,100%{ transform:rotate(-2deg) translateY(0); } 50%{ transform:rotate(-2deg) translateY(-5px); } }
/* script accents get a whisper of tilt on section hover */
.card__cta:active{ transform:scale(.96); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
/* Progressive enhancement: hidden state only applies when JS is active,
   so content is always visible if JS/observer fails (see .js flag + failsafe). */
.js .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.js .reveal.is-visible{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .nav__links{ display:none; }
  .nav__toggle{ display:flex; }
  .nav__cta{ display:none; }

  /* Mobile header: big centered logo up top, hamburger menu right below it.
     Not sticky — a permanently-visible header this tall would eat too much
     screen space while scrolling; the floating contact button + in-page
     anchor links already cover quick access while scrolling. */
  .nav{ position:static; }
  .nav__inner{ height:auto; flex-direction:column; justify-content:center;
    padding-block:1.4rem 1.1rem; gap:.5rem; }
  .brand{ flex-direction:column; margin-right:0; gap:.4rem; text-align:center; }
  .brand__mark{ width:clamp(180px,52vw,240px); height:clamp(180px,52vw,240px); }
  .brand__type{ align-items:center; }
  .nav__actions{ width:100%; justify-content:center; }
  /* the EN/ES/PT text switcher + globe move into the hamburger menu on mobile
     (see .mobile-lang) so this cramped top row doesn't fight for space */
  .nav__actions .lang{ display:none; }

  .treats{ grid-template-columns:repeat(2,1fr); }
  .inquiry{ grid-template-columns:1fr; }
  .inquiry__intro{ position:static; }
}

@media (max-width:820px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__copy{ max-width:none; order:1; text-align:center; }
  .hero__lead{ max-width:52ch; margin-inline:auto; }
  .hero__cta{ justify-content:center; }
  .hero__loc{ justify-content:center; }
  .hero__media{ order:2; min-height:clamp(320px,60vw,420px); }
  .about{ grid-template-columns:1fr; }
  .about__media{ max-width:420px; margin-inline:auto; }
  .steps{ grid-template-columns:1fr; gap:1.6rem; }
  .steps::before{ display:none; }
}

@media (max-width:640px){
  .nav__mobile.is-open{ display:flex; }
  .treats{ grid-template-columns:1fr 1fr; }
  .form__row{ grid-template-columns:1fr; }
  .sec-head{ margin-bottom:2rem; }
  .footer__grid{ grid-template-columns:1fr; gap:2rem; }
  .hero__cta .btn,.finalcta__cta .btn{ flex:1 1 auto; }
  /* keep only the top-corner sweets on small screens so nothing overlaps the CTA */
  .fc-sweet--3,.fc-sweet--4,.fc-sweet--5{ display:none; }
  .fc-sweet--1{ top:15%; left:3%; }
  .fc-sweet--2{ top:11%; right:3%; }

  /* Event pills: exactly 2 per row, with a subtle idle wiggle so they feel
     alive even without a hover (mobile has no hover). The animation drives
     `transform` continuously, which is what gives each pill its tilt here —
     it replaces any static transform for as long as it runs, so no separate
     per-item rotate rule is needed (see the finalcta bunting comment above
     for why mixing a static transform with an animated one is a trap). */
  .events{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; max-width:none; }
  .event{ width:100%; white-space:normal; text-align:center; justify-content:center;
    font-size:.82rem; line-height:1.2; padding:.6rem .5rem .6rem .55rem; gap:.5rem; }
  .event__ico{ width:38px; height:38px; }
  .event__ico svg{ width:22px; height:22px; }
  .js .event{ animation:pillWiggle 3.4s ease-in-out infinite; }
  .event:nth-child(8n+2){ animation-delay:.45s; }
  .event:nth-child(8n+3){ animation-delay:.9s; }
  .event:nth-child(8n+4){ animation-delay:1.35s; }
  .event:nth-child(8n+5){ animation-delay:.2s; }
  .event:nth-child(8n+6){ animation-delay:1.6s; }
  .event:nth-child(8n+7){ animation-delay:.7s; }
  .event:nth-child(8n+8){ animation-delay:1.1s; }
}
@keyframes pillWiggle{
  0%,100%{ transform:rotate(-2.5deg) translateY(0); }
  50%{ transform:rotate(2.5deg) translateY(-3px); }
}

@media (max-width:400px){
  .treats{ grid-template-columns:1fr; }
  .card__media{ aspect-ratio:16/10; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .petals{ display:none; }
  .wa-float__pulse{ display:none; }
}