/* Grão / Gole — cafés especiais */
:root{
  --creme:#EFE5D8;
  --areia:#E3D3BD;
  --pessego:#EBCDB2;
  --terracota:#C1683F;
  --terracota-claro:#D98C63;
  --cafe:#3A2318;
  --espresso:#1D100A;
  --leite:#FAF4EC;
  --ink:var(--cafe);
  --display:"Fraunces", Georgia, serif;
  --sans:"DM Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --gutter:clamp(16px, 4vw, 56px);
  --vh:100svh;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--creme);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--cafe);color:var(--creme);padding:10px 16px;border-radius:99px}
.skip:focus{top:16px}
:focus-visible{outline:2px solid var(--terracota);outline-offset:3px}

/* ---------- type ---------- */
.display, .hero-title, .title-xl, .giant, .find, .club h2, .card h3, .logo{
  font-family:var(--display);
  font-variation-settings:"SOFT" 100, "WONK" 1;
}
.kicker{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--terracota)}
.kicker-light{color:var(--pessego)}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px var(--gutter);
  transition:color .4s, background-color .4s, backdrop-filter .4s, padding .4s;
}
.nav.scrolled{background:rgba(239,229,216,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-top:12px;padding-bottom:12px}
body.is-dark .nav{color:var(--creme)}
body.is-dark .nav.scrolled{background:rgba(29,16,10,.45)}
.logo{font-weight:700;font-size:1.15rem;letter-spacing:.02em;font-family:var(--sans)}
.logo span{font-weight:300;opacity:.7;margin:0 .1em}
.nav-links{display:flex;gap:28px;font-size:.92rem}
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-actions{display:flex;align-items:center;gap:10px}
.nav-login{font-size:.9rem;margin-right:6px}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;position:relative;transition:background-color .3s}
.icon-btn:hover{background:rgba(58,35,24,.08)}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cart-count{position:absolute;top:2px;right:0;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--terracota);color:var(--leite);font-size:.66rem;font-weight:700;display:grid;place-items:center;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.cart-count.on{transform:scale(1)}
.cart.bump{animation:bump .5s}
@keyframes bump{30%{transform:scale(1.25) rotate(-8deg)}60%{transform:scale(.95) rotate(4deg)}}
.menu-btn{display:none}

.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:9px 18px;font-size:.88rem;font-weight:600;transition:transform .25s, background-color .25s, color .25s}
.pill:hover{transform:translateY(-2px)}
.pill-dark{background:var(--cafe);color:var(--creme)}
.pill-dark:hover{background:var(--espresso)}
body.is-dark .nav .pill-dark{background:var(--creme);color:var(--cafe)}
.pill-light{background:var(--creme);color:var(--cafe)}
.pill-lg{padding:14px 28px;font-size:.95rem}
.circle-btn{width:50px;height:50px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;transition:transform .3s, background-color .3s, color .3s}
.circle-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.circle-btn:hover{background:var(--cafe);color:var(--creme);transform:rotate(-45deg)}

/* ---------- chapters ---------- */
.chapters{position:fixed;left:var(--gutter);top:50%;transform:translateY(-50%);z-index:40;list-style:none;display:flex;flex-direction:column;gap:12px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;transition:opacity .4s,color .4s}
.chapters li{opacity:.35;display:flex;gap:8px;align-items:center;transition:opacity .3s, transform .3s}
.chapters li span{font-variant-numeric:tabular-nums;font-weight:700}
.chapters li.active{opacity:1;transform:translateX(6px)}
.chapters li.active::before{content:"";width:18px;height:1px;background:currentColor}
body.is-dark .chapters{color:var(--creme)}
body.at-start .chapters, body.after-scenes .chapters{opacity:0}

/* ---------- scenes ---------- */
.scene{position:relative}
.scene-moa{height:420vh}
.scene-coe{height:300vh}
.scene-prove{height:260vh;background:var(--espresso)}
.stage{position:sticky;top:0;height:var(--vh);overflow:hidden;isolation:isolate}
.vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:0}
.scene-moa .vid-scrub{opacity:0}
.veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg, rgba(239,229,216,.55) 0%, rgba(239,229,216,0) 42%, rgba(239,229,216,0) 70%, rgba(239,229,216,.25) 100%)}
.veil-warm{background:linear-gradient(90deg, rgba(230,200,170,.5) 0%, rgba(230,200,170,0) 45%)}
.veil-dark{background:linear-gradient(180deg, rgba(29,16,10,0) 35%, rgba(29,16,10,.75) 100%), linear-gradient(90deg, rgba(29,16,10,.45), rgba(29,16,10,0) 55%)}

/* giant multiply words sit "behind" dark objects */
.giant{position:absolute;z-index:2;pointer-events:none;mix-blend-mode:multiply;line-height:.78;white-space:nowrap;font-weight:900;letter-spacing:-.045em}
.giant-ritual{left:50%;bottom:-.08em;transform:translateX(-50%);font-size:clamp(7rem, 27vw, 30rem);color:var(--terracota-claro);display:flex}
.giant-ritual span{display:inline-block;opacity:0;transform:translateY(40%)}
.giant-devagar{left:-.04em;bottom:.02em;font-size:clamp(6rem, 25vw, 28rem);color:var(--terracota-claro);font-style:italic;font-weight:800;opacity:.9}

/* hero */
.hero-copy{position:absolute;z-index:3;inset:0;padding:0 var(--gutter);pointer-events:none}
.hero-copy > *{pointer-events:auto}
.crumb{position:absolute;left:calc(var(--gutter) + 4px);top:27vh;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.crumb span{margin:0 .5em;opacity:.5}
.hero-title{position:absolute;left:0;right:0;top:31vh;display:flex;justify-content:space-between;padding:0 var(--gutter);font-weight:900;line-height:.82;letter-spacing:-.04em;font-size:clamp(4.2rem, 13vw, 13rem);mix-blend-mode:multiply;pointer-events:none}
.w{display:inline-block}
.w-dark{color:var(--cafe)}
.w-accent{color:var(--terracota);margin-top:-.42em;font-style:italic}
.lede{position:absolute;left:calc(var(--gutter) + 4px);top:calc(31vh + clamp(4.2rem, 13vw, 13rem) * .9);max-width:30ch;font-size:clamp(.95rem, 1.15vw, 1.1rem);color:var(--cafe)}
.cta-row{position:absolute;left:calc(var(--gutter) + 4px);bottom:12vh;display:flex;gap:14px;align-items:center}
.side-note{position:absolute;z-index:3;right:var(--gutter);top:56vh;display:flex;flex-direction:column;align-items:flex-end;gap:10px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.swoosh{width:150px;height:20px;fill:none;stroke:var(--cafe);stroke-width:1.4;stroke-linecap:round}

.ritual-copy{position:absolute;z-index:3;right:var(--gutter);top:24vh;width:min(360px, 34vw);opacity:0;transform:translateY(30px)}
.ritual-copy h2{font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:800;font-size:clamp(1.8rem, 3vw, 2.8rem);line-height:1.02;margin:.35em 0 .5em;letter-spacing:-.02em}
.ritual-copy p:last-child{font-size:1rem;opacity:.85}

/* coe */
.coe-copy{position:absolute;z-index:3;left:calc(var(--gutter) + 110px);top:18vh;max-width:min(420px, 40vw)}
.title-xl{font-weight:900;font-size:clamp(4rem, 12vw, 11rem);line-height:.82;letter-spacing:-.045em;color:var(--cafe);margin-top:.12em}
.title-light{color:var(--creme)}
.arrow-draw{width:200px;height:40px;margin:.6em 0 1em;fill:none;stroke:var(--cafe);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.arrow-draw path{stroke-dasharray:260;stroke-dashoffset:260}
.body{font-size:1.02rem;max-width:32ch;color:var(--cafe)}
.body-light{color:var(--creme);opacity:.9}
.recipe{position:absolute;z-index:3;right:var(--gutter);bottom:9vh;display:flex;gap:10px;list-style:none}
.recipe li{background:rgba(250,244,236,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:16px;padding:12px 16px;min-width:96px;opacity:0;transform:translateY(20px)}
.recipe b{display:block;font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;font-size:1.5rem;line-height:1;font-weight:800}
.recipe span{font-size:.75rem;opacity:.7}

/* prove */
.prove-copy{position:absolute;z-index:3;left:calc(var(--gutter) + 110px);bottom:12vh;max-width:min(460px, 46vw)}
.stats{position:absolute;z-index:3;right:var(--gutter);bottom:12vh;display:flex;gap:clamp(18px, 3vw, 44px);list-style:none;color:var(--creme)}
.stats li{opacity:0;transform:translateY(24px)}
.stats b{display:block;font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:900;font-size:clamp(2.4rem, 4.5vw, 4.2rem);line-height:1;color:var(--pessego)}
.stats span{font-size:.78rem;opacity:.75;display:block;max-width:14ch;margin-top:6px}

/* ---------- shop ---------- */
.shop{position:relative;min-height:max(var(--vh), 860px);padding:calc(80px + 4vh) var(--gutter) 6vh;overflow:hidden;background:#EBE0CF}
.shop-bg{position:absolute;inset:0;z-index:0}
.shop-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.shop-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 45% at 50% 18%, rgba(239,229,216,.85), rgba(239,229,216,0) 70%)}
.shop-head{position:relative;z-index:2;max-width:760px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.find{position:relative;font-weight:900;text-transform:uppercase;line-height:.84;letter-spacing:-.03em;color:var(--cafe);display:flex;flex-direction:column;align-items:center}
.find-line{display:block;font-size:clamp(2.8rem, 6.4vw, 6rem)}
.find-big{font-size:clamp(3.6rem, 9vw, 8.4rem);color:var(--terracota);font-style:italic;text-transform:lowercase}
.spark{position:absolute;width:30px;height:30px;fill:var(--cafe)}
.spark.s1{left:-34px;top:-14px;width:22px}
.spark.s2{right:-40px;bottom:22%}
.shop-sub{margin-top:18px;max-width:44ch;font-size:1.02rem}
.shop-cta{margin-top:18px}
.cards{position:relative;z-index:2;max-width:1320px;margin:clamp(-60px, -4vh, -20px) auto 0;height:clamp(470px, 56vh, 540px)}
.card:nth-child(1){position:absolute;left:0;top:0;rotate:-3deg}
.card:nth-child(2){position:absolute;left:clamp(150px, 15vw, 230px);top:90px;rotate:2deg;z-index:2}
.card:nth-child(3){position:absolute;right:0;top:40px;rotate:3deg}
.card{width:clamp(220px, 18vw, 250px);background:rgba(250,244,236,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:24px;padding:16px 16px 18px;box-shadow:0 30px 60px -30px rgba(58,35,24,.45), 0 1px 0 rgba(255,255,255,.6) inset;transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s}
.card:hover{transform:translateY(-10px) rotate(-1deg);box-shadow:0 40px 70px -30px rgba(58,35,24,.55)}
.card header{display:flex;justify-content:space-between;align-items:center}
.tag{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.fav{width:32px;height:32px;display:grid;place-items:center;border-radius:50%}
.fav svg{width:18px;height:18px;fill:none;stroke:var(--cafe);stroke-width:1.6;transition:fill .25s, transform .25s}
.fav[aria-pressed="true"] svg{fill:var(--terracota);stroke:var(--terracota);transform:scale(1.15)}
.card img{width:100%;height:190px;object-fit:contain;margin:6px 0 10px;filter:drop-shadow(0 14px 14px rgba(58,35,24,.2));transition:transform .5s}
.card:hover img{transform:translateY(-6px) scale(1.04)}
.card h3{font-size:1.45rem;font-weight:800;letter-spacing:-.02em;line-height:1.05}
.notes{font-size:.8rem;opacity:.7;margin:4px 0 12px}
.buy{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.buy select{appearance:none;-webkit-appearance:none;background:rgba(58,35,24,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A2318' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center/14px;border:0;border-radius:99px;padding:7px 28px 7px 12px;font-size:.78rem}
.price{font-weight:700;font-size:1rem}
.card .add{width:100%;padding:11px}
.card .add.done{background:var(--terracota)}

/* ---------- marquee ---------- */
.marquee{background:var(--terracota);color:var(--leite);overflow:hidden;padding:18px 0;border-block:1px solid rgba(58,35,24,.2)}
.marquee-track{display:flex;gap:28px;width:max-content;animation:marq 26s linear infinite;align-items:center}
.marquee span{font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;font-style:italic;font-weight:700;font-size:clamp(1.4rem, 2.6vw, 2.2rem);white-space:nowrap}
.marquee i{font-style:normal;opacity:.7}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- club ---------- */
.club{background:var(--espresso);color:var(--creme);padding:clamp(80px, 14vh, 140px) var(--gutter)}
.club-inner{max-width:760px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.club h2{font-weight:800;font-size:clamp(2.4rem, 6vw, 5rem);line-height:.95;letter-spacing:-.03em}
.club h2 em{color:var(--terracota-claro)}
.club-inner > p{max-width:52ch;opacity:.8}
.club-form{display:flex;gap:10px;margin-top:10px;width:min(480px,100%)}
.club-form input{flex:1;min-width:0;background:rgba(239,229,216,.08);border:1px solid rgba(239,229,216,.25);border-radius:99px;padding:13px 18px;color:var(--creme)}
.club-form input::placeholder{color:rgba(239,229,216,.5)}
.form-msg{min-height:1.4em;font-size:.9rem;color:var(--pessego)}

.foot{background:var(--espresso);color:var(--creme);border-top:1px solid rgba(239,229,216,.12);padding:36px var(--gutter) 48px;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;font-size:.85rem}
.foot .small{opacity:.5;font-size:.75rem;width:100%}

/* ---------- badge ---------- */
.badge{position:fixed;right:var(--gutter);bottom:26px;z-index:45;width:92px;height:92px;color:var(--cafe);transition:color .4s, opacity .4s}
.badge svg{width:100%;height:100%;fill:currentColor;font-size:8.2px;letter-spacing:0;text-transform:uppercase;font-weight:700;font-family:var(--sans)}
.badge-bean{position:absolute;left:50%;top:50%;width:18px;height:26px;margin:-13px 0 0 -9px;border-radius:50%;background:radial-gradient(ellipse at 35% 30%, #7a4a30, #3A2318 70%);transform:rotate(25deg)}
.badge-bean::after{content:"";position:absolute;left:50%;top:10%;bottom:10%;width:2px;margin-left:-1px;border-radius:2px;background:#1D100A;transform:skewY(10deg)}
body.is-dark .badge{color:var(--creme)}
body.past-end .badge, body.after-scenes .badge{opacity:0;pointer-events:none}
.logo{white-space:nowrap}
.pill{white-space:nowrap}

.toast{position:fixed;left:50%;bottom:28px;z-index:60;transform:translate(-50%, 120px);background:var(--cafe);color:var(--creme);padding:12px 20px;border-radius:99px;font-size:.9rem;box-shadow:0 20px 40px -18px rgba(0,0,0,.5);transition:transform .45s cubic-bezier(.2,1.3,.4,1)}
.toast.show{transform:translate(-50%, 0)}

/* ---------- intro state (before JS) ---------- */
.js .hero-title .w, .js .crumb, .js .lede, .js .cta-row, .js .side-note-hero{opacity:0}

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .nav-links,.nav-login{display:none}
  .menu-btn{display:grid}
  .nav.open .nav-links{display:flex;flex-direction:column;gap:0;position:absolute;top:calc(100% + 6px);right:var(--gutter);background:var(--leite);color:var(--cafe);border-radius:18px;padding:8px;box-shadow:0 24px 48px -20px rgba(58,35,24,.45);min-width:200px}
  .nav.open .nav-links a{padding:12px 16px;border-radius:12px}
  .nav.open .nav-links a:hover{background:rgba(58,35,24,.06)}
  .nav.open .nav-links a::after{display:none}
  .chapters{display:none}
  .coe-copy,.prove-copy{left:var(--gutter)}
}
@media (max-width: 760px){
  .nav{gap:8px;padding-top:14px;padding-bottom:14px}
  .nav .pill-dark,.nav .icon-btn[aria-label="Buscar"]{display:none}
  .nav-actions{gap:2px}
  .crumb{display:none}
  .badge{display:none}
  .hero-title{top:16vh;font-size:clamp(3.6rem, 22vw, 7rem)}
  .w-accent{margin-top:.95em}
  .lede{top:auto;bottom:calc(12vh + 70px);right:var(--gutter);max-width:none;background:rgba(239,229,216,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:12px 14px;border-radius:14px}
  .cta-row{bottom:max(6vh, 30px)}
  .side-note-hero{display:none}
  .ritual-copy{left:var(--gutter);right:var(--gutter);top:auto;bottom:6vh;width:auto;background:rgba(239,229,216,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:16px 18px;border-radius:18px}
  .giant-ritual{font-size:30vw;bottom:auto;top:12vh}
  .coe-copy{top:12vh;max-width:none;right:var(--gutter)}
  .coe-copy .body{background:rgba(239,229,216,.6);padding:10px 12px;border-radius:12px;backdrop-filter:blur(6px)}
  .giant-devagar{font-size:30vw;bottom:22vh}
  .recipe{left:var(--gutter);right:var(--gutter);bottom:4vh;justify-content:space-between}
  .recipe li{min-width:0;flex:1;padding:10px 12px}
  .recipe b{font-size:1.2rem}
  .prove-copy{top:auto;bottom:calc(6vh + 104px);max-width:none;right:var(--gutter)}
  .veil-dark{background:linear-gradient(180deg, rgba(29,16,10,0) 25%, rgba(29,16,10,.85) 100%)}
  .stats{left:var(--gutter);right:var(--gutter);bottom:5vh;justify-content:space-between}
  .stats b{font-size:2.2rem}
  .shop{padding-top:104px;min-height:0}
  .shop-bg img{object-position:50% 100%;height:auto;aspect-ratio:1600/914;top:auto;bottom:0;position:absolute;width:180%;left:-40%;max-width:none}
  .shop-bg::after{background:linear-gradient(180deg, rgba(235,224,207,1) 45%, rgba(235,224,207,0) 75%)}
  .spark.s1{left:-10px}
  .spark.s2{right:-6px}
  .cards{display:flex;height:auto;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:28px calc(var(--gutter) * -1) 0;padding:20px var(--gutter) 30vw;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .cards::-webkit-scrollbar{display:none}
  .card:nth-child(n){position:relative;left:auto;right:auto;top:auto;rotate:0deg}
  .card{flex:0 0 72vw;scroll-snap-align:center}
  .club-form{flex-direction:column}
}

@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none}
  .scene-moa,.scene-coe,.scene-prove{height:auto}
  .stage{position:relative}
  .js .hero-title .w, .js .crumb, .js .lede, .js .cta-row, .js .side-note-hero,
  .ritual-copy,.recipe li,.stats li,.giant-ritual span{opacity:1 !important;transform:none !important}
  .arrow-draw path{stroke-dashoffset:0}
  .badge{display:none}
}