/* =========================================================
   RECREIO COOKIES — sistema visual derivado do cravburgers.shop
   Mesma malha (unidades vw), mesma escala tipográfica, mesmo
   text-stroke com paint-order, mesmas classes de heading.
   ========================================================= */

/* ---------- Fontes (mesmas do CRAV: Modak + Mouse Memoirs).
   Para trocar pelas fontes da marca (Chabplan / Compotes Citro),
   basta declarar os @font-face abaixo e apontar as variáveis. ---------- */
/*
@font-face{font-family:"Chabplan";src:url(assets/fonts/Chabplan.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Compotes Citro";src:url(assets/fonts/CompotesCitro.woff2) format("woff2");font-display:swap}
*/

:root{
  /* ---- paleta Recreio (extraída do brand board) mapeada na função de cada cor do CRAV ---- */
  --beige:#fbe8d7;          /* CRAV --beige  #f5e3cd  → creme Recreio           */
  --sand:#e2d3b4;           /* bege secundário                                 */
  --black:#37160d;          /* CRAV --black  → marrom principal (texto)        */
  --red:#37160d;            /* CRAV --red    → marrom (títulos gigantes)       */
  --red-soft:#543211;
  --mustard:#c0c45c;        /* CRAV --mustard      #ffd750 → lima              */
  --mustard-dark:#c89520;   /* CRAV --mustard-dark #f4a804 → dourado           */
  --lilac:#9b78a4;          /* cor do logo no board                            */
  --pink:#c88284;
  --terra:#b24c19;
  --white:#fff;
  --cream:#fff8f1;

  --font-display:"Modak","Modak Fallback",system-ui,sans-serif;     /* CRAV: --font-modak         */
  --font-body:"Mouse Memoirs","Mouse Memoirs Fallback",Impact,sans-serif; /* CRAV: --font-mouse-memoirs */

  --ease-pop:cubic-bezier(.45,.85,.34,1.12);
  --ease-out:cubic-bezier(0,0,.2,1);

  /* sticker peel (copiado do CRAV) */
  --sticker-rotate:30deg;--sticker-p:20%;--sticker-shadow-opacity:.6;--peel-direction:0deg;--peel-amount:1;
  --sticker-start:calc(-1 * var(--sticker-p));--sticker-end:calc(100% + var(--sticker-p));
}

@font-face{font-family:"Modak Fallback";src:local("Arial Black"),local("Impact");ascent-override:95.09%;descent-override:49.02%;line-gap-override:0%;size-adjust:104.49%}
@font-face{font-family:"Mouse Memoirs Fallback";src:local("Impact"),local("Arial Narrow");ascent-override:143.39%;descent-override:32.01%;line-gap-override:0%;size-adjust:65.28%}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
body{
  background:var(--beige);color:var(--black);font-family:var(--font-body);
  -webkit-user-select:none;user-select:none;overflow-x:hidden;line-height:1.2;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-weight:400}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--lilac);color:var(--beige)}
:focus-visible{outline:.25vw solid var(--mustard-dark);outline-offset:.3vw;border-radius:.4vw}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;top:-100%;left:1vw;z-index:2000;background:var(--black);color:var(--beige);padding:.6em 1em;border-radius:999px;text-transform:uppercase}
.skip:focus{top:1vw}

/* ---------- Escala tipográfica (idêntica ao CRAV) ---------- */
.text40{font-size:1.8vw}
.text60{font-size:2.8vw}
.heading180{text-transform:uppercase;font-size:9vw;font-family:var(--font-body)}
.heading300{font-size:15vw;font-family:var(--font-body)}
.heading600{font-family:var(--font-display);font-size:35vw}
.font-display{font-family:var(--font-display)}
.font-body{font-family:var(--font-body)}
.upper{text-transform:uppercase}

/* text-stroke com paint-order (assinatura visual do CRAV) */
.text-stroke{-webkit-text-stroke:2.5vw var(--beige);paint-order:stroke fill}
.text-stroke-180{-webkit-text-stroke:1vw var(--beige);paint-order:stroke fill}
.text-stroke-180-mustard{-webkit-text-stroke:1vw rgba(200,149,32,.3);paint-order:stroke fill}
.text-stroke-small{-webkit-text-stroke:5px var(--beige);paint-order:stroke fill}
.text-stroke-white{-webkit-text-stroke:1vw var(--white);paint-order:stroke fill}

/* cores utilitárias */
.c-red{color:var(--red)}.c-gold{color:var(--mustard-dark)}.c-beige{color:var(--beige)}.c-lilac{color:var(--lilac)}.c-white{color:var(--white)}.c-black{color:var(--black)}

/* split text */
[data-split] .w{display:inline-block;will-change:transform}
[data-split] .split-wrap{visibility:hidden}
[data-split].is-ready .split-wrap{visibility:visible}
.line-reveal{display:inline-block;opacity:0}
.line-reveal.is-ready{opacity:1}
.line-reveal .line{overflow:hidden}

/* ---------- Preloader ---------- */
#loader{position:fixed;inset:0;z-index:1500;background:var(--red);color:var(--beige);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
#loader .cookie{width:16vw;height:16vw;max-width:220px;max-height:220px}
#loader .phrase{position:absolute;bottom:8vh;left:0;right:0;text-align:center;text-transform:uppercase;font-size:2.4vw;letter-spacing:.02em;color:var(--beige)}
#loader .bar{position:absolute;bottom:0;left:0;height:1.2vh;width:100%;background:rgba(251,232,215,.18)}
#loader .bar i{display:block;height:100%;width:0;background:var(--mustard-dark)}
#loader .curtain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#loader .brand-flash{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;pointer-events:none;opacity:0;color:#4c1422}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;width:100%;z-index:999;display:flex;align-items:center;justify-content:space-between;padding:1vw 2.5vw;transition:color .3s}
.nav .logo{font-family:var(--font-display);color:var(--red);font-size:4vw;line-height:1;transition:transform .3s;display:inline-block}
.nav .logo:hover{transform:scale(1.05)}
.nav .right{display:flex;align-items:center;gap:1vw}
.pill{display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;letter-spacing:.025em;font-size:1.3vw;padding:.55vw 1.4vw;border-radius:999px;background:var(--red);color:var(--beige);transition:transform .3s;line-height:1}
.pill:hover{transform:scale(1.05)}
.menu-btn{display:flex;align-items:center;gap:.6vw;padding:.5vw 1.4vw;border-radius:999px;border:.15vw solid rgba(55,22,13,.2);text-transform:uppercase;font-size:1.3vw;letter-spacing:.025em;transition:transform .3s,border-color .4s,background .4s,color .3s;line-height:1;color:var(--black)}
.menu-btn:hover{transform:scale(1.05);border-color:var(--black)}
.menu-btn .lines{position:relative;width:1.2vw;height:1.2vw;flex-shrink:0}
.menu-btn .lines span{position:absolute;left:0;height:.15vw;border-radius:999px;background:currentColor;transform-origin:center}
.menu-btn .lines span:nth-child(1){top:0;width:100%}
.menu-btn .lines span:nth-child(2){top:50%;width:70%;transform:translateY(-50%)}
.menu-btn .lines span:nth-child(3){bottom:0;width:100%}
.nav.is-dark .menu-btn{color:var(--beige);border-color:rgba(251,232,215,.3)}
.nav.is-dark .pill{background:var(--beige);color:var(--red)}
.nav.is-dark .menu-btn:hover{border-color:var(--beige)}
.nav.is-open .menu-btn{background:var(--red);border-color:var(--red);color:var(--beige)}
.menu-panel{position:absolute;top:calc(100% + 1vw);right:2.5vw;width:18vw;background:var(--red);border-radius:1.2vw;padding:2vw;box-shadow:0 1vw 3vw rgba(27,27,27,.25);opacity:0;transform:scale(.3);transform-origin:top right;pointer-events:none}
.menu-panel ul{list-style:none;display:flex;flex-direction:column;gap:.6vw}
.menu-panel a{font-family:var(--font-display);font-size:2.4vw;color:var(--beige);line-height:1.1;text-transform:uppercase;display:inline-block;transition:transform .3s,color .3s}
.menu-panel a:hover{color:var(--mustard);transform:scale(1.05)}
.menu-panel .est{margin-top:1.5vw;font-size:.9vw;color:rgba(251,232,215,.85);text-transform:uppercase;letter-spacing:.2em}
.menu-backdrop{position:fixed;inset:0;z-index:998;background:rgba(55,22,13,.3);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;pointer-events:none}

/* flip-text hover (mesmo do CRAV) */
.flip{overflow:hidden;position:relative;display:inline-block}
.flip span{display:block;transition:transform .3s}
.flip span+span{position:absolute;inset:0;transform:translateY(100%)}
a:hover .flip span:first-child,button:hover .flip span:first-child{transform:translateY(-100%)}
a:hover .flip span+span,button:hover .flip span+span{transform:translateY(0)}

/* ---------- Hero ---------- */
#hero{min-height:100vh;width:100%;position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:8vw 0 2vw}
#hero .title-wrap{width:fit-content;position:relative}
#hero h1{font-size:30vw;line-height:.8;text-align:center;color:var(--red);font-family:var(--font-body);text-transform:uppercase}
#hero .tag{position:absolute;z-index:10;color:var(--mustard-dark);text-align:center;font-size:2.8vw;font-family:var(--font-display);line-height:.9!important;text-transform:uppercase}
#hero .tag.tl{top:10%;left:10%;transform:rotate(15deg)}
#hero .tag.br{bottom:10%;right:10%;transform:rotate(-15deg)}
#hero .mascot{width:34vw;height:34vw;z-index:20;position:absolute;top:22vw;left:50%;transform:translate(-50%,0)}
#hero .mascot>div{width:100%;height:100%;opacity:0}
#hero .mascot img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1.2vw 1.4vw rgba(55,22,13,.25))}
#hero .word{text-align:center;font-size:15vw;font-family:var(--font-display);text-transform:uppercase;margin-top:6vw;position:relative;z-index:20;color:var(--mustard-dark);line-height:.9}
#hero .bottom{width:100%;position:relative;z-index:30;margin-top:auto;display:flex;justify-content:space-between;padding:1vw 2.5vw 0}
#hero .bottom p{width:23vw;line-height:1}
#hero .bottom p+p{text-align:right}

/* ---------- Seções genéricas ---------- */
.label{color:var(--red);font-family:var(--font-display);font-size:2.8vw;text-transform:uppercase;line-height:.9!important;display:inline-block}
section{position:relative}
.self{isolation:isolate}

/* ---------- About ---------- */
#about{overflow:clip;position:relative;z-index:100;text-align:center;width:100%;padding:6vw 0;display:flex;flex-direction:column;gap:2vw;align-items:center}
#about .label{transform:rotate(-5deg);position:relative;top:-1vw}
#about h2{width:70%;margin:0 auto;line-height:.75!important;color:var(--red);text-transform:uppercase}
#about .lead{color:var(--black);width:45%;margin:2vw auto 0;line-height:1.1}
#about .photos{display:flex;justify-content:center;align-items:flex-start;gap:0;margin-top:3vw;width:100%;position:relative}
.polaroid{width:19vw;aspect-ratio:3/4;border-radius:1vw;overflow:hidden;background:var(--sand);position:relative;box-shadow:0 1vw 3vw rgba(55,22,13,.18);display:flex;align-items:center;justify-content:center}
.polaroid img{width:78%;height:78%;object-fit:contain}
.polaroid .cap{position:absolute;bottom:1vw;left:0;right:0;text-align:center;text-transform:uppercase;font-size:1.1vw;letter-spacing:.1em;color:var(--black);opacity:.7}
.polaroid.p1{transform:rotate(-8deg) translateY(2vw);background:#efd9c4}
.polaroid.p2{transform:rotate(2deg);z-index:2;background:var(--lilac)}
.polaroid.p3{transform:rotate(9deg) translateY(3vw);background:var(--mustard)}
.polaroid.p2 .cap{color:var(--beige)}

/* ---------- Stickers (peel) — CSS do CRAV ---------- */
.sticker-container{--sticker-peel-y:calc(var(--sticker-start) + var(--peel-amount) * (var(--sticker-end) - var(--sticker-start)));transform:rotate(var(--peel-direction));transform-origin:50%;position:relative;pointer-events:auto}
.sticker-container *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.sticker-main{clip-path:polygon(var(--sticker-start) var(--sticker-peel-y),var(--sticker-end) var(--sticker-peel-y),var(--sticker-end) var(--sticker-end),var(--sticker-start) var(--sticker-end));will-change:clip-path;filter:drop-shadow(2px 4px 6px rgba(0,0,0,calc(var(--sticker-shadow-opacity) * .5)))}
.sticker-image{transform:rotate(var(--sticker-rotate));width:var(--sticker-width,200px)}
.flap{width:100%;height:100%;clip-path:polygon(var(--sticker-start) var(--sticker-start),var(--sticker-end) var(--sticker-start),var(--sticker-end) var(--sticker-peel-y),var(--sticker-start) var(--sticker-peel-y));left:0;top:calc(-100% + 2 * var(--sticker-peel-y) - 1px);will-change:clip-path,top;position:absolute;transform:scaleY(-1);pointer-events:none}
.flap-image{transform:rotate(var(--sticker-rotate));width:var(--sticker-width,200px);filter:brightness(1.6) saturate(.35) contrast(.8)}
.sticker{position:absolute;z-index:50}
.sticker img{filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 .35vw #fff) drop-shadow(0 0 .12vw #fff)}

/* ---------- Jelly wave (divisor) ---------- */
.jelly-wrap{z-index:99;width:100%;position:absolute;left:0;right:0;overflow-x:clip;pointer-events:none}
.jelly-wrap.top{top:0}.jelly-wrap.bottom{bottom:-.5vw}
.jelly{display:block;width:100%;max-width:100vw;height:300px}

/* ---------- Feels (bloco escuro) ---------- */
#feels{margin-top:-15vw;position:relative;width:100%;background:var(--red);display:flex;align-items:center;justify-content:center;overflow:clip;padding-bottom:.5vw}
#feels .inner{position:relative;margin-top:15vw;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:translateY(10vw);z-index:10;width:100%;overflow:hidden;padding-bottom:5vw}
#feels .label{color:var(--mustard-dark);position:absolute;top:5vw;left:50%;transform:translateX(-50%) rotate(-8deg);z-index:30}
#feels h2{text-align:center;text-transform:uppercase;line-height:.75;width:100%;color:var(--beige);position:relative;z-index:20;margin-top:10vw}
#feels .row{display:flex;align-items:flex-end;justify-content:space-between;width:100%;padding:0 2.5vw;margin-top:-2vw}
#feels .stats{color:var(--beige);text-transform:uppercase;line-height:1.1;white-space:nowrap}
#feels .stats.r{text-align:right}
#feels .big{width:42vw;height:42vw;position:relative;flex-shrink:0}
#feels .big img{width:100%;height:100%;object-fit:contain;position:relative;z-index:10;filter:drop-shadow(0 1.5vw 2vw rgba(0,0,0,.35))}
#feels .big .tag{position:absolute;bottom:6vw;right:2vw;color:var(--mustard-dark);font-family:var(--font-display);font-size:2.8vw;line-height:.9!important;text-align:center;width:12vw;transform:rotate(15deg);z-index:30;text-transform:uppercase}

/* ---------- Marquee (substitui a foto full-bleed) ---------- */
#marquee{background:var(--lilac);color:var(--beige);overflow:hidden;padding:2.2vw 0;position:relative;z-index:5;margin-top:5vw}
#marquee .track{display:flex;white-space:nowrap;width:max-content;will-change:transform}
#marquee .track span{font-family:var(--font-display);font-size:6vw;text-transform:uppercase;padding:0 2vw;line-height:1}
#marquee .track img{width:5vw;height:5vw;object-fit:contain;align-self:center}

/* ---------- Ingredients → “cada sabor” ---------- */
#sabores{padding:8vw 2.5vw 10vw;width:100%;position:relative;text-align:center}
#sabores .label{transform:rotate(-7deg)}
#sabores .line{width:60vw;margin:0 auto;line-height:.75;text-transform:uppercase;color:var(--red);position:relative;z-index:2}
#sabores .label{position:relative;z-index:2}
#sabores .float{position:absolute;width:11vw;height:11vw;pointer-events:none;will-change:transform}
#sabores .float img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1vw 1.2vw rgba(55,22,13,.25))}
#sabores .peek-edge{position:absolute;left:0;top:38%;width:9vw;z-index:1;visibility:hidden;filter:drop-shadow(.6vw .6vw 0 rgba(55,22,13,.15))}
#sabores .f1{top:10vw;left:8vw}#sabores .f2{top:34vw;right:9vw}#sabores .f3{bottom:8vw;left:16vw}#sabores .f4{top:20vw;right:22vw;width:8vw;height:8vw}

/* ---------- Elenco (mapa com caminho tracejado) ---------- */
#elenco{width:100%;background:var(--mustard);position:relative;overflow:hidden}
#elenco .star{pointer-events:none;position:absolute;left:0;top:0;width:10vw;z-index:2;will-change:transform}
#elenco .stage{position:relative;height:210vw;width:100%}
#elenco .path{position:absolute;inset:0;width:100%;height:100%}
#elenco .head{position:relative;z-index:10;margin-top:20vw;padding:0 2.5vw;display:flex;flex-direction:column;gap:2vw}
#elenco .head .label{color:var(--mustard-dark);transform:rotate(-7deg) translateY(-6vw);margin-left:1vw}
#elenco .head h2{color:var(--white);width:80vw;line-height:.85;text-transform:uppercase}
#elenco .head p{width:30vw;margin-left:1vw;color:var(--black);line-height:1.1}
.card{position:absolute;z-index:200;display:flex;flex-direction:column;gap:1.2vw}
.card.r{align-items:flex-end}.card.l{align-items:flex-start}
.card .note{color:var(--red);text-transform:uppercase;font-family:var(--font-display);line-height:.9!important;font-size:1.8vw;-webkit-text-stroke:5px var(--beige);paint-order:stroke fill;opacity:0}
.card .frame{width:15vw;aspect-ratio:4/5;border-radius:1vw;overflow:hidden;background:var(--beige);display:flex;align-items:center;justify-content:center;box-shadow:0 1vw 3vw rgba(55,22,13,.2);opacity:0}
.card .frame img{width:80%;height:80%;object-fit:contain}
.card .frame.dark{background:var(--red)}.card .frame.lilac{background:var(--lilac)}.card .frame.pink{background:var(--pink)}.card .frame.terra{background:var(--terra)}.card .frame.sand{background:var(--sand)}
.card .tagline{width:15vw;color:var(--black);line-height:1.1;font-size:1.4vw;text-transform:uppercase;opacity:0}
.card.r .tagline{text-align:right}
.card .kind{font-size:.9vw;letter-spacing:.2em;text-transform:uppercase;color:var(--black);opacity:.65}

/* ---------- CTA ---------- */
#cta{width:100%;padding-top:18vw;overflow:clip;position:relative;background:var(--beige)}
#cta .grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:0 2.5vw 6vw;gap:2vw}
#cta .copy{display:flex;flex-direction:column;gap:1.5vw;align-items:flex-start}
#cta .label{transform:rotate(-7deg);margin-left:.5vw}
#cta h2{color:var(--red);line-height:.75;text-transform:uppercase}
#cta p{width:30vw;line-height:1.1}
#cta .visual{position:relative;height:40vw}
#cta .visual .photo{position:absolute;right:0;top:0;width:34vw;height:40vw;border-radius:1.5vw;overflow:hidden;background:linear-gradient(160deg,#4c1422,#37160d 60%,#543211);display:flex;align-items:flex-end;justify-content:center}
#cta .visual .photo img{width:85%;height:auto;transform:translateY(4%)}
#cta .visual .photo .cap{position:absolute;top:1.5vw;left:1.5vw;color:var(--beige);text-transform:uppercase;letter-spacing:.2em;font-size:.9vw;opacity:.8}

/* ---------- Blob button ---------- */
.blob-btn{position:relative;width:fit-content;display:block;border:0;background:transparent;padding:0;cursor:pointer;outline:none;user-select:none}
.blob-btn svg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
.blob-btn path{transition:fill .2s}
.blob-btn:hover path{fill:var(--terra)}
.blob-btn .txt{position:relative;z-index:10;color:var(--beige);font-weight:700;text-transform:uppercase;display:inline-block;padding:1.5vw 4vw}
.blob-btn:focus-visible{outline:.25vw solid var(--mustard-dark);border-radius:999px}

/* ---------- Footer ---------- */
footer{width:100%;overflow:hidden;position:relative;padding:6vw 2.5vw 0}
footer .top{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:30}
footer nav{display:flex;flex-wrap:wrap;align-items:center;gap:.6vw 2vw}
footer nav a{text-transform:uppercase;transition:color .3s}
footer nav a:hover{color:var(--lilac)}
footer .rule{height:2px;width:100%;background:rgba(55,22,13,.2);margin-top:1.5vw;transform:scaleX(0);transform-origin:left center;position:relative;z-index:30}
footer .tagl{padding-top:1vw;opacity:.8;text-transform:uppercase;position:relative;z-index:30}
footer .wa-link{text-decoration:underline;text-underline-offset:.3em;transition:color .3s}
footer .wa-link:hover{color:var(--terra)}
footer .brand{margin-top:4vw;position:relative}
footer .brand h2{font-family:var(--font-display);font-weight:400;line-height:1;text-align:center;color:var(--red);z-index:10;position:relative;font-size:22vw;text-transform:none;letter-spacing:0;-webkit-text-stroke:1.9vw var(--beige);paint-order:stroke fill;padding-top:1vw;margin-bottom:1vw}
footer .drops{pointer-events:none;position:absolute;inset:auto 0 0 0;height:0;z-index:20}
footer .drops img{position:absolute;bottom:0;opacity:0;will-change:transform,opacity;user-select:none}
footer .bottom{position:relative;z-index:30;padding:1vw 0 2vw;text-align:center;opacity:.8;text-transform:uppercase}

/* ---------- Cursor trail ---------- */
#cursor{position:fixed;inset:0;pointer-events:none;z-index:10000;opacity:0}
#cursor .knot{position:absolute;top:0;left:0;width:2.6vw;height:2.6vw;transform:translate(-50%,-50%);will-change:transform}
#cursor .knot img{width:100%;height:100%;object-fit:contain}
#cursor svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* ---------- Cookie banner (trocadilho obrigatório) ---------- */
.cookie-banner{position:fixed;left:50%;bottom:2vw;transform:translate(-50%,140%);width:32vw;z-index:1200;background:rgba(255,248,241,.92);backdrop-filter:blur(8px);border-radius:1vw;padding:1.2vw 1.4vw;box-shadow:0 1vw 3vw rgba(55,22,13,.2);transition:transform .6s var(--ease-pop)}
.cookie-banner.is-visible{transform:translate(-50%,0)}
.cookie-banner .peek{position:absolute;right:-4.6vw;top:-5.2vw;width:4.6vw;transform:translateX(-60%) scale(.6);opacity:0;transition:transform .5s var(--ease-pop) .45s,opacity .3s .45s}
.cookie-banner.is-visible .peek{transform:none;opacity:1}
.cookie-banner .hd{display:flex;align-items:center;gap:.8vw;font-size:.9vw;letter-spacing:.2em;text-transform:uppercase}
.cookie-banner .hd i{width:1.2vw;height:1.2vw;border-radius:50%;background:var(--mustard-dark);display:inline-block}
.cookie-banner .row{display:flex;align-items:center;justify-content:space-between;margin-top:1vw;gap:1vw}
.cookie-banner .row p{font-size:1.1vw}
.cookie-banner .btns{display:flex;gap:.6vw}
.cookie-banner .btns button{font-size:.9vw;text-transform:uppercase;padding:.5vw 1.1vw;border-radius:999px;border:.1vw solid rgba(55,22,13,.2)}
.cookie-banner .btns button.ok{background:var(--mustard-dark);border-color:var(--mustard-dark);color:var(--black)}

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* =========================================================
   MOBILE (max-md do CRAV = 767px)
   ========================================================= */
@media (max-width:767px){
  .text40{font-size:5vw}.text60{font-size:6.5vw}.heading180{font-size:14vw}.heading300{font-size:24vw}
  .nav{padding:4vw}
  .nav .logo{font-size:10vw}
  .nav .right{gap:3vw}
  .pill{font-size:4vw;padding:1.8vw 4vw}
  .menu-btn{font-size:4vw;padding:1.8vw 4vw;gap:2vw;border-width:.4vw}
  .menu-btn .lines{width:3.5vw;height:3.5vw}.menu-btn .lines span{height:.5vw}
  .menu-panel{width:91vw;right:4vw;border-radius:4vw;padding:6vw;margin-top:5vw}
  .menu-panel ul{gap:2vw}.menu-panel a{font-size:8vw}.menu-panel .est{font-size:3.5vw}
  #loader .phrase{font-size:5vw}#loader .cookie{width:40vw;height:40vw}

  #hero{min-height:200vw;padding:40vw 0 2vw}
  #hero h1{font-size:26vw;line-height:.85}
  #hero .tag{font-size:6vw;transform:none}
  #hero .tag.tl{top:2%;left:2%}#hero .tag.br{bottom:2%;right:2%}
  #hero .mascot{width:80vw;height:80vw;top:110vw;transform:translate(-50%,-50%)}
  #hero .word{font-size:20vw;margin-top:6vw;position:absolute;top:133vw;left:0;right:0;transform:translateY(-50%);z-index:20}
  #hero .bottom{flex-direction:column;gap:4vw;align-items:center;padding:0 5vw}
  #hero .bottom p,#hero .bottom p+p{width:100%;text-align:center}
  .label{font-size:8vw}
  #about{padding:14vw 0;gap:6vw}
  #about .label{transform:none;top:0}
  #about h2{width:100%}
  #about .lead{width:90%}
  #about .photos{flex-wrap:wrap;gap:4vw;padding:0 4vw}
  .polaroid{width:44vw}.polaroid .cap{font-size:3vw}
  .jelly{height:auto}
  #feels{margin-top:-10vw}#feels .inner{margin-top:10vw;transform:translateY(5vw);padding-bottom:15vw}
  #feels .label{top:6vw}
  #feels h2{font-size:14vw;margin-top:15vw}
  #feels .row{flex-direction:column;align-items:center;gap:4vw;padding:0 5vw;margin-top:6vw}
  #feels .big{width:80vw;height:80vw}
  #feels .big .tag{font-size:6vw;width:22vw;bottom:10vw;right:8vw}
  #feels .stats{font-size:6vw;text-align:center!important}
  #marquee .track span{font-size:12vw}#marquee .track img{width:10vw;height:10vw}
  #sabores{padding:14vw 4vw}
  #sabores .label{transform:none}
  #sabores .line{width:100%}
  #sabores .float{width:22vw;height:22vw;z-index:0;opacity:.9}
  #sabores .peek-edge{width:16vw;top:auto;bottom:38%}
  #sabores .f1{top:4vw;left:2vw}#sabores .f2{top:auto;bottom:30vw;right:2vw}#sabores .f3{bottom:4vw;left:4vw}#sabores .f4{top:30vw;right:4vw;width:12vw;height:12vw}
  #elenco .stage{height:auto;padding-bottom:20vw}
  #elenco .path{display:none}
  #elenco .star{display:none}
  #elenco .head{margin-top:16vw;text-align:center;align-items:center}
  #elenco .head .label{transform:none;margin:0}
  #elenco .head h2{width:100%}
  #elenco .head p{width:80%;margin:0}
  .card{position:static;align-items:center!important;margin:10vw auto 0;width:70vw;text-align:center;padding-left:0}
  .card .note{font-size:7vw}
  .card .frame{width:60vw}
  .card .tagline{width:70vw;font-size:5vw;text-align:center!important}
  .card .kind{font-size:3vw}
  #cta{padding-top:12vw}
  #cta .sticker{display:none}
  #cta .grid{grid-template-columns:1fr;gap:8vw;padding:0 5vw 10vw}
  #cta .copy{align-items:center;text-align:center}
  #cta .label{transform:none;margin:0}
  #cta h2{font-size:14vw;line-height:.85;text-align:center}
  #cta p{width:100%;font-size:4.5vw;text-align:center}
  #cta .visual{height:auto}
  #cta .visual .photo{position:relative;width:100%;height:90vw;margin:0 auto}
  .blob-btn .txt{padding:4vw 10vw}
  footer{padding:10vw 4vw 0}
  footer .top{flex-direction:column;align-items:flex-start;gap:3vw}
  footer nav{gap:2vw 5vw}
  footer .brand{margin-top:5vw}
  footer .brand h2{font-size:24vw;-webkit-text-stroke:2.1vw var(--beige)}
  footer .bottom{padding:4vw 0 6vw}
  .cookie-banner{width:92vw;bottom:4vw;padding:5vw;border-radius:4vw}
  .cookie-banner .peek{width:12vw;right:3vw;top:-13.5vw}
.cookie-banner .hd{font-size:3vw;gap:2vw}.cookie-banner .hd i{width:3vw;height:3vw}
  .cookie-banner .row{flex-direction:column;align-items:stretch;margin-top:3vw;gap:3vw}
  .cookie-banner .row p{font-size:4vw}
  .cookie-banner .btns{display:grid;grid-template-columns:1fr 1fr;gap:2vw}
  .cookie-banner .btns button{font-size:3.5vw;padding:2.5vw}
  #cursor{display:none}
}