/* ═══════════════════════════════════════════════════════════
   REE COOKIES — Sugar Rush Pop
   Sticker-book daylight + studio-dark flavor theater
   ═══════════════════════════════════════════════════════════ */

:root{
  /* brand */
  --navy:#0d1c2f;
  --navy-soft:#233144;
  --pink:#f472b6;
  --pink-deep:#a43073;
  --yellow:#fcdf46;
  --sky:#a9c6e0;          /* matches the baked-in sticker background */
  --sky-pale:#d5e3fd;
  --surface:#f8f9ff;
  --white:#ffffff;
  --ink-dim:#544249;
  --dark:#07060b;         /* flavor-theater canvas */

  /* type */
  --display:"Bricolage Grotesque",sans-serif;
  --body:"Be Vietnam Pro",sans-serif;

  /* shape & depth */
  --r-lg:2rem;
  --r-xl:3rem;
  --border:2.5px solid var(--navy);
  --pop:5px 5px 0 var(--navy);
  --pop-sm:3px 3px 0 var(--navy);

  --container:1200px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:96px}
body{
  font-family:var(--body);
  color:var(--navy);
  background:var(--surface);
  line-height:1.6;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}

.container{max-width:var(--container);margin-inline:auto;padding-inline:clamp(16px,4vw,64px)}

h1,h2,h3{font-family:var(--display);line-height:1.08;letter-spacing:-.02em}
h2{font-size:clamp(30px,4.6vw,52px);font-weight:800}
h2 em,h1 em{font-style:normal;position:relative;white-space:nowrap;z-index:0}
h2 em::after,h1 em::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:.04em;height:.32em;
  background:var(--yellow);z-index:-1;border-radius:99px;transform:rotate(-1.2deg);
}

/* ── eyebrow & chips ─────────────────────────── */
.eyebrow{
  display:inline-block;font-weight:700;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;background:var(--white);border:var(--border);
  border-radius:999px;padding:6px 16px;box-shadow:var(--pop-sm);margin-bottom:18px;
}
.eyebrow--dark{background:var(--yellow)}
.chip{
  display:inline-block;font-size:13.5px;font-weight:700;padding:6px 14px;
  border-radius:999px;border:2px solid var(--navy);background:var(--white);
}
.chip--yellow{background:var(--yellow)}
.chip--blue{background:var(--sky-pale)}

/* ── buttons ─────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--display);font-weight:700;font-size:16px;
  padding:13px 28px;border-radius:999px;border:var(--border);
  background:var(--pink);color:var(--navy);cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease;
  box-shadow:0 0 0 var(--navy);
}
.btn:hover{transform:translate(-3px,-3px);box-shadow:var(--pop)}
.btn:active{transform:translate(0,0);box-shadow:0 0 0 var(--navy)}
.btn--outline{background:var(--white)}
.btn--lg{font-size:18px;padding:16px 34px}
.btn--nav{padding:10px 22px;font-size:15px}
.btn--mini{padding:7px 18px;font-size:14px;background:var(--accent,var(--pink));border-width:2px;box-shadow:none}
.btn--wsp{background:#25d366;color:#fff;gap:9px}
.btn--pya{background:#fa0050;color:var(--white)}
.btn__ico{width:20px;height:20px;flex:none}
.btn__pya{height:17px;width:auto;display:block}
.btn--cta{
  font-size:clamp(20px,3vw,26px);padding:20px 52px;background:var(--yellow);
  border-width:3px;box-shadow:var(--pop);
}
.btn--cta:hover{transform:translate(-3px,-3px) rotate(-1.5deg);box-shadow:8px 8px 0 var(--navy)}

/* ── nav ─────────────────────────────────────── */
.nav-wrap{position:sticky;top:14px;z-index:100;padding-inline:clamp(12px,3vw,32px)}
.nav{
  max-width:var(--container);margin-inline:auto;
  display:flex;align-items:center;gap:22px;
  background:var(--white);border:var(--border);border-radius:999px;
  padding:9px 12px 9px 14px;box-shadow:var(--pop);
}
.nav__brand{display:flex;align-items:center;flex:none;margin-left:14px}
.nav__wordmark{height:40px;width:auto;display:block}
@media(max-width:420px){.nav__wordmark{height:32px}}
.nav__links{display:flex;gap:4px;margin-left:auto}
.nav__links a{
  font-weight:600;font-size:15px;padding:8px 14px;border-radius:999px;
  transition:background .15s ease;
}
.nav__links a:hover{background:var(--sky-pale)}
@media(max-width:760px){.nav__links{display:none}.nav{gap:10px}.nav .btn--nav{margin-left:auto}}

/* ── hero ────────────────────────────────────── */
.hero{
  position:relative;
  background:
    radial-gradient(ellipse 60% 50% at 85% 15%,rgba(244,114,182,.35),transparent 70%),
    radial-gradient(ellipse 50% 60% at 10% 90%,rgba(252,223,70,.3),transparent 70%),
    var(--sky);
  padding:clamp(60px,9vw,120px) 0 clamp(90px,11vw,150px);
  overflow:hidden;
}
.hero::before{ /* dotted confetti texture */
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(13,28,47,.14) 1.5px,transparent 1.5px);
  background-size:26px 26px;pointer-events:none;
}
.hero__inner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,60px);align-items:center}
.hero__title{
  font-size:clamp(44px,7vw,86px);font-weight:800;margin-bottom:22px;
}
.hero__title em::after{background:var(--pink);height:.3em}
.hero__sub{font-size:clamp(16px,1.6vw,19px);color:var(--navy-soft);max-width:46ch;margin-bottom:30px}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.hero__chips{display:flex;gap:10px;flex-wrap:wrap}

.hero__stage{position:relative;min-height:560px}
.medallion{
  border-radius:50%;overflow:hidden;border:3px solid var(--navy);
  box-shadow:6px 6px 0 rgba(13,28,47,.9);background:#000;
}
.medallion img{width:100%;height:100%;object-fit:cover}
/* floating cutout cookies (Cookie Co-style vertical stack) */
.cookie-float{
  position:absolute;height:auto;
  filter:drop-shadow(0 18px 22px rgba(13,28,47,.35));
}
.cookie-float--1{width:min(240px,44%);top:0;right:26%;rotate:-7deg;z-index:1}
.cookie-float--2{width:min(280px,52%);top:29%;right:8%;rotate:4deg;z-index:2}
.cookie-float--3{width:min(235px,44%);bottom:0;right:32%;rotate:-5deg;z-index:1}
.badge-price{
  position:absolute;top:6%;left:10%;rotate:-9deg;z-index:3;
  font-family:var(--display);font-weight:800;font-size:22px;
  background:var(--yellow);border:var(--border);border-radius:999px;
  padding:10px 20px;box-shadow:var(--pop-sm);
}
.spark{position:absolute;font-size:30px;color:var(--pink-deep)}
.spark--1{top:38%;left:2%}
.spark--2{bottom:0;right:26%;font-size:20px;color:var(--navy)}
.spark--a1{top:-8px;right:8%;font-size:26px;color:var(--pink-deep)}

.float{animation:float 5.5s ease-in-out var(--fd,0s) infinite}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -14px}}

.hero__wave,.show__wave{position:absolute;left:0;right:0;bottom:-1px;line-height:0}
.hero__wave svg,.show__wave svg{width:100%;height:clamp(30px,5vw,70px);display:block}

@media(max-width:880px){
  .hero__inner{grid-template-columns:1fr}
  .hero__stage{min-height:460px;margin-top:10px}
}

/* ── marquee ─────────────────────────────────── */
.marquee{
  background:var(--dark);color:var(--yellow);overflow:hidden;
  padding:13px 0;border-block:2.5px solid var(--navy);position:relative;z-index:2;
}
.marquee__track{display:flex;white-space:nowrap;animation:marquee 26s linear infinite;font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.04em}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ── flavor theater (dark) ───────────────────── */
.show{position:relative;background:var(--dark);color:var(--surface);padding-bottom:clamp(120px,14vw,190px)}

/* scroll-scrub hero */
.scrub{height:280vh;position:relative}
.scrub__sticky{
  position:sticky;top:0;height:100vh;height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  overflow:hidden;
}
.scrub__stage{position:relative;width:min(62vh,86vw);aspect-ratio:1045/1400;max-height:66vh}
.scrub__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  /* vignette mask blends the pure-black photo edges into the canvas */
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 55%,transparent 78%);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 55%,transparent 78%);
}
.scrub__img--still{opacity:calc(1 - var(--p,0));transform:scale(calc(.92 + .08*(1 - var(--p,0))))}
.scrub__img--boom{opacity:var(--p,0);transform:scale(calc(.82 + .28*var(--p,0)))}
.scrub__caption{
  position:relative;height:56px;width:100%;text-align:center;
  font-family:var(--display);font-weight:800;font-size:clamp(26px,4vw,44px);
}
.scrub__label{position:absolute;inset:0;transition:none}
.scrub__label--still{
  opacity:clamp(0,1 - var(--p,0)*2,1);color:var(--sky-pale);
  transform:translateY(calc(var(--p,0)*-16px));
}
.scrub__label--boom{
  opacity:clamp(0,var(--p,0)*2 - 1,1);color:var(--yellow);
  transform:translateY(calc((1 - var(--p,0))*16px));
}
.scrub__hint{
  color:rgba(248,249,255,.45);font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  opacity:calc(1 - var(--p,0)*2);
}

.show__head{text-align:center;margin-bottom:clamp(36px,5vw,64px)}
.show__title{color:var(--surface)}
.show__title em::after{background:var(--pink-deep)}
.show__sub{color:rgba(248,249,255,.62);max-width:52ch;margin-inline:auto;margin-top:14px}

/* flavor cards */
.flavors{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,30px)}
@media(max-width:980px){.flavors{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.flavors{grid-template-columns:1fr;max-width:420px}}

.fcard{
  background:#0e0d14;border:2.5px solid rgba(248,249,255,.14);border-radius:var(--r-lg);
  overflow:hidden;outline:none;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),border-color .28s ease,box-shadow .28s ease;
}
.fcard:hover,.fcard:focus-visible,.fcard.is-boom{
  transform:translateY(-6px);
  border-color:var(--accent);
  box-shadow:0 18px 50px -18px color-mix(in srgb,var(--accent) 55%,transparent);
}
.fcard__img{position:relative;aspect-ratio:1;background:#000;overflow:hidden}
.fcard__img img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .55s ease,transform .55s cubic-bezier(.34,1.56,.64,1);
}
.fcard__still{opacity:1;transform:scale(1.02)}
.fcard__boom{opacity:0;transform:scale(.85)}
.fcard:hover .fcard__still,.fcard:focus-visible .fcard__still,.fcard.is-boom .fcard__still{opacity:0;transform:scale(1.14)}
.fcard:hover .fcard__boom,.fcard:focus-visible .fcard__boom,.fcard.is-boom .fcard__boom{opacity:1;transform:scale(1.04)}
.fcard__img::after{ /* accent glow floor */
  content:"";position:absolute;inset:auto 0 0 0;height:45%;
  background:linear-gradient(to top,color-mix(in srgb,var(--accent) 28%,transparent),transparent);
  opacity:0;transition:opacity .5s ease;pointer-events:none;
}
.fcard:hover .fcard__img::after,.fcard:focus-visible .fcard__img::after,.fcard.is-boom .fcard__img::after{opacity:1}
.fcard__info{padding:20px 22px 22px}
.fcard__info h3{font-size:22px;font-weight:700;color:var(--surface);margin-bottom:6px}
.fcard__info h3::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--accent);margin-right:9px}
.fcard__info p{font-size:14.5px;color:rgba(248,249,255,.58);margin-bottom:16px;min-height:44px}
.fcard__row{display:flex;align-items:center;justify-content:space-between}
.fcard__price{font-family:var(--display);font-weight:800;font-size:20px;color:var(--yellow)}
.show__wave{bottom:-1px}

/* ── about ───────────────────────────────────── */
.about{background:var(--surface);padding:clamp(70px,9vw,130px) 0}
.about__inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,80px);align-items:center}
.about__visual{position:relative;display:flex;justify-content:center}
.medallion--about{width:min(340px,80%);aspect-ratio:1;rotate:-4deg;background:var(--sky)}
/* la cookie corazón mira hacia el otro lado */
.medallion--about img,.medallion--cta-heart img{transform:scaleX(-1)}
.badge-tilt{
  position:absolute;bottom:6%;right:10%;rotate:8deg;text-align:center;
  font-family:var(--display);font-weight:800;font-size:17px;line-height:1.15;
  background:var(--pink);border:var(--border);border-radius:999px;
  padding:16px 18px;box-shadow:var(--pop-sm);
}
.about__copy h2{margin-bottom:20px}
.about__copy p{color:var(--ink-dim);margin-bottom:16px;max-width:56ch}
.about__values{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
@media(max-width:880px){.about__inner{grid-template-columns:1fr}.about__visual{order:2;margin-top:16px}}

/* ── where ───────────────────────────────────── */
.where{
  background:
    radial-gradient(ellipse 50% 60% at 92% 10%,rgba(244,114,182,.25),transparent 70%),
    var(--sky-pale);
  padding:clamp(70px,9vw,130px) 0;
  border-top:2.5px solid var(--navy);
}
.where__head{text-align:center;margin-bottom:clamp(36px,5vw,60px)}
.where__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,28px)}
@media(max-width:900px){.where__grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}
.wcard{
  background:var(--white);border:var(--border);border-radius:var(--r-lg);
  padding:30px 28px;box-shadow:var(--pop);
  transition:transform .2s ease,box-shadow .2s ease;
}
.wcard:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--navy)}
.wcard__icon{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  font-size:26px;background:var(--sky-pale);border:2px solid var(--navy);
  margin-bottom:18px;overflow:hidden;
}
.wcard__icon img{width:135%;height:135%;object-fit:cover;margin:-17%}
.wcard h3{font-size:21px;margin-bottom:8px}
.wcard p{color:var(--ink-dim);font-size:15px;margin-bottom:14px}
.wcard__link{font-weight:700;font-size:15px;border-bottom:2px solid var(--pink)}
.wcard__link:hover{background:var(--yellow)}
.wcard--order{background:var(--navy);color:var(--surface)}
.wcard--order h3{color:var(--white)}
.wcard--order p{color:rgba(248,249,255,.7)}
.wcard--order .wcard__icon{background:var(--sky)}
.wcard__btns{display:flex;gap:10px;flex-wrap:wrap}
.wcard__btns .btn{font-size:14.5px;padding:10px 20px;border-color:var(--white);box-shadow:none}
.wcard__btns .btn:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 rgba(255,255,255,.85)}

/* ── cta ─────────────────────────────────────── */
.cta{
  position:relative;background:var(--pink);border-top:2.5px solid var(--navy);
  padding:clamp(80px,10vw,140px) 0;overflow:hidden;text-align:center;
}
.cta::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(13,28,47,.16) 1.5px,transparent 1.5px);
  background-size:24px 24px;
}
.cta__inner{position:relative}
.cta h2{font-size:clamp(34px,5.4vw,62px);margin-bottom:12px}
.cta p{font-size:clamp(16px,1.8vw,20px);color:var(--navy-soft);margin-bottom:34px}
.cta__stickers{position:absolute;inset:0;pointer-events:none}
.medallion--cta{position:absolute;width:110px;aspect-ratio:1;top:-40px;right:2%;rotate:10deg;background:var(--sky)}
.medallion--cta-heart{position:absolute;width:130px;aspect-ratio:1;bottom:-46px;left:3%;rotate:-9deg;background:var(--sky)}
@media(max-width:1080px){.medallion--cta,.medallion--cta-heart{display:none}}

/* ── footer ──────────────────────────────────── */
.footer{background:var(--navy);color:var(--surface);padding:60px 0 26px}
.footer__inner{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between;margin-bottom:40px}
.footer__name{font-family:var(--display);font-weight:800;font-size:26px}
.footer__brand p{color:rgba(248,249,255,.6);font-size:14.5px;margin-top:8px}
.footer__nav,.footer__social{display:flex;flex-direction:column;gap:10px;font-size:15px}
.footer__nav a:hover,.footer__social a:hover{color:var(--yellow)}
.footer__fine{text-align:center;font-size:13px;color:rgba(248,249,255,.45);border-top:1px solid rgba(248,249,255,.14);padding-top:22px;margin-inline:clamp(16px,4vw,64px)}

/* ── scroll reveal ───────────────────────────── */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .65s ease var(--d,0s),transform .65s cubic-bezier(.22,1,.36,1) var(--d,0s)}
.reveal.in-view{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}