/* =========================================================
   BrewGo® — Coffee Engineering
   Design system + landing page styles
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* cores base */
  --ink:        #0d0d0f;   /* matte black */
  --ink-2:      #16161a;   /* charcoal */
  --ink-3:      #1f1f24;
  --paper:      #f6f4f0;   /* warm white */
  --paper-2:    #efece5;
  --line:       #e4e0d8;   /* divisórias claras */
  --line-dark:  rgba(255,255,255,.10);

  /* café */
  --espresso:   #2a1c14;
  --coffee:     #5e4130;
  --crema:      #c9a47a;
  --crema-soft: #e7d3b8;

  /* metal */
  --steel:      #b9bdc2;
  --steel-2:    #8d9298;
  --steel-hi:   #eef0f2;

  /* acento (cobre) */
  --accent:     #c2703d;
  --accent-2:   #d98b4f;
  --accent-ink: #fff;

  /* texto */
  --text:       #16161a;
  --text-soft:  #5b5852;
  --text-mut:   #8a857c;
  --text-light: #f4f2ee;
  --text-light-soft: rgba(244,242,238,.66);

  /* tipografia */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* layout */
  --container: 1200px;
  --header-h: 73px;
  --gutter: clamp(20px, 5vw, 56px);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;

  /* sombras */
  --shadow-sm: 0 1px 2px rgba(13,13,15,.06), 0 4px 14px rgba(13,13,15,.05);
  --shadow:    0 10px 30px rgba(13,13,15,.10);
  --shadow-lg: 0 24px 60px rgba(13,13,15,.18);

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--text);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
[hidden]{ display:none !important; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:700; line-height:1.06; letter-spacing:-.02em; }
p{ margin:0; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* ---------- Helpers ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.ico{ width:1.25em; height:1.25em; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.section{ padding-block:clamp(64px, 9vw, 120px); }
.section--soft{ background:var(--paper-2); }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--coffee); font-weight:700; margin-bottom:18px;
}
.eyebrow--light{ color:var(--crema); }
.eyebrow__dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(194,112,61,.18); }

.section-title{ font-size:clamp(28px, 4.2vw, 50px); }
.section-sub{ color:var(--text-soft); font-size:clamp(15px,1.6vw,18px); max-width:54ch; margin-top:16px; }

.section-head{ max-width:720px; margin-bottom:clamp(36px,5vw,60px); }
.section-head--row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; max-width:none; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-display); font-weight:600; font-size:15px;
  padding:13px 22px; border-radius:999px; letter-spacing:-.01em;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
.btn .ico{ width:18px; height:18px; transition:transform .3s var(--ease); }
.btn:hover .ico{ transform:translateX(3px); }
.btn--lg{ padding:16px 28px; font-size:16px; }
.btn--block{ width:100%; }

.btn--primary{ background:var(--accent); color:var(--accent-ink); box-shadow:0 8px 22px rgba(194,112,61,.32); }
.btn--primary:hover{ background:var(--accent-2); transform:translateY(-2px); box-shadow:0 12px 28px rgba(194,112,61,.42); }

.btn--dark{ background:var(--ink); color:var(--text-light); }
.btn--dark:hover{ background:var(--ink-2); transform:translateY(-2px); }

.btn--ghost{ border:1.5px solid var(--line); color:var(--text); background:transparent; }
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }

.btn--ghost-light{ border:1.5px solid rgba(255,255,255,.28); color:var(--text-light); background:rgba(255,255,255,.04); }
.btn--ghost-light:hover{ border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.1); transform:translateY(-2px); }

.icon-btn{
  display:inline-grid; place-items:center; width:42px; height:42px; border-radius:50%;
  color:inherit; position:relative; transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.icon-btn .ico{ width:21px; height:21px; }
.icon-btn:hover{ background:rgba(255,255,255,.1); }
.icon-btn--ghost{ border:1.5px solid var(--line-dark); }
.icon-btn--ghost:hover{ background:var(--accent); border-color:var(--accent); transform:translateY(-2px); }

/* =========================================================
   ANNOUNCEMENT BAR
   ========================================================= */
.announce{ background:var(--ink); color:var(--crema-soft); overflow:hidden; border-bottom:1px solid var(--line-dark); }
.announce__track{
  display:flex; align-items:center; gap:14px; white-space:nowrap;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em;
  padding-block:9px; width:max-content;
  animation:marquee 38s linear infinite;
}
.announce__item{ display:inline-flex; align-items:center; gap:7px; }
.announce__item .ico{ width:14px; height:14px; color:var(--accent-2); }
.announce__dot{ color:var(--steel-2); }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:sticky; top:0; z-index:60;
  background:transparent;
  border-bottom:1px solid transparent;
  color:var(--text-light);
  transition:background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
}
.header.scrolled{
  background:rgba(13,13,15,.92);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:var(--line-dark);
  box-shadow:0 8px 30px rgba(0,0,0,.3);
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:24px; }

.brand{ display:inline-flex; align-items:center; gap:11px; }
.brand__mark{
  display:grid; place-items:center; width:40px; height:40px; border-radius:11px;
  background:#fff; border:1px solid rgba(255,255,255,.35);
  box-shadow:0 4px 14px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.6); overflow:hidden;
}
.brand__mark img{ width:30px; height:30px; object-fit:contain; }
.brand__mark .ico{ width:22px; height:22px; stroke-width:1.4; }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-family:var(--font-display); font-weight:700; font-size:21px; letter-spacing:-.02em; }
.brand__name sup{ font-size:.5em; top:-.7em; }
.brand__sub{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--crema); margin-top:3px; white-space:nowrap; }

.nav{ display:flex; align-items:center; gap:6px; }
.nav__link{ position:relative; padding:8px 14px; font-size:14.5px; font-weight:500; color:var(--text-light-soft); border-radius:8px; transition:color .2s; }
.nav__link::after{ content:""; position:absolute; left:14px; right:14px; bottom:4px; height:1.5px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease); }
.nav__link:hover{ color:var(--text-light); }
.nav__link:hover::after{ transform:scaleX(1); }
.nav__link--hot{ color:var(--accent-2); font-weight:600; }
.nav__link--hot::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-right:6px; vertical-align:middle; }

.header__actions{ display:flex; align-items:center; gap:4px; }
.cart-btn .cart-count{
  position:absolute; top:2px; right:0; min-width:18px; height:18px; padding:0 4px;
  display:grid; place-items:center; background:var(--accent); color:#fff;
  font-family:var(--font-mono); font-size:10px; font-weight:700; border-radius:999px;
  transform:scale(0); transition:transform .25s var(--ease);
}
.cart-btn .cart-count[data-count]:not([data-count="0"]){ transform:scale(1); }
.nav-toggle{ display:none; }

/* mobile nav */
.mobile-nav{
  position:fixed; inset:0 0 0 auto; width:min(86vw,360px); z-index:80;
  background:var(--ink); color:var(--text-light);
  transform:translateX(100%); transition:transform .4s var(--ease);
  padding:88px 28px 28px; overflow-y:auto;
}
.mobile-nav.open{ transform:translateX(0); box-shadow:var(--shadow-lg); }
.mobile-nav__inner{ display:flex; flex-direction:column; gap:6px; }
.mobile-nav__link{ padding:14px 4px; font-family:var(--font-display); font-size:20px; font-weight:600; border-bottom:1px solid var(--line-dark); }
.mobile-nav__cta{ margin-top:20px; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; color:var(--text-light); overflow:hidden;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(194,112,61,.22), transparent 55%),
    radial-gradient(80% 70% at 10% 110%, rgba(201,164,122,.12), transparent 60%),
    linear-gradient(160deg,#17120e 0%, #0d0d0f 55%, #0b0b0d 100%);
}
.hero__grain{ position:absolute; inset:0; opacity:.4; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.hero__inner{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
  padding-block:clamp(56px,8vw,104px); }
.hero__copy{ max-width:600px; }
.hero__title{ font-size:clamp(34px, 8vw, 76px); line-height:1.02; margin-bottom:22px; }
.hero__title-accent{ color:transparent; background:linear-gradient(100deg,var(--accent-2),var(--crema)); -webkit-background-clip:text; background-clip:text; }
.hero__lead{ font-size:clamp(16px,1.9vw,19px); color:var(--text-light-soft); max-width:50ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero__badges{ display:flex; flex-wrap:wrap; gap:20px 26px; margin-top:38px; padding-top:28px; border-top:1px solid var(--line-dark); }
.hero__badges li{ display:inline-flex; align-items:center; gap:9px; font-size:13.5px; color:var(--text-light-soft); }
.hero__badges .ico{ width:18px; height:18px; color:var(--crema); }

/* hero stage / product render */
.hero__stage{ position:relative; display:grid; place-items:center; min-height:380px; }
.render{
  position:relative; display:grid; place-items:center; overflow:hidden;
  border-radius:var(--radius-lg); isolation:isolate;
}
.render__icon{ width:46%; height:46%; max-width:230px; color:rgba(255,255,255,.9); stroke:currentColor; fill:none; stroke-width:1; opacity:.92;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.4)); }
.render__code{ position:absolute; top:18px; left:20px; font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; color:rgba(255,255,255,.55); z-index:2; }
.render__sheen{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.14) 47%, transparent 60%); }

.render--hero{
  width:min(100%,460px); aspect-ratio:1/1.05;
  background:
    radial-gradient(90% 70% at 50% 18%, rgba(201,164,122,.30), transparent 60%),
    conic-gradient(from 220deg at 60% 40%, #3a3a40, #1a1a1f, #2c2c32, #131316, #3a3a40),
    linear-gradient(160deg,#2a2a30,#101013);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.1);
}
.render--hero .render__icon{ width:58%; max-width:280px; }

.hero__chip{
  position:absolute; background:rgba(20,20,24,.78); backdrop-filter:blur(8px);
  border:1px solid var(--line-dark); border-radius:14px; padding:11px 15px;
  display:flex; flex-direction:column; line-height:1.1; box-shadow:var(--shadow);
  animation:float 5s ease-in-out infinite;
}
.hero__chip strong{ font-family:var(--font-display); font-size:17px; }
.hero__chip span{ font-size:11px; color:var(--text-light-soft); margin-top:3px; }
.hero__chip--1{ top:12%; left:-4%; }
.hero__chip--2{ bottom:20%; right:-2%; animation-delay:-2.5s; }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }

.hero__pricetag{
  position:absolute; bottom:6%; left:50%; transform:translateX(-50%);
  display:flex; align-items:baseline; gap:10px;
  background:var(--accent); color:#fff; padding:10px 18px; border-radius:999px;
  box-shadow:0 12px 30px rgba(194,112,61,.45);
}
.hero__pricetag-from{ font-family:var(--font-mono); font-size:12px; text-decoration:line-through; opacity:.7; }
.hero__pricetag-now{ font-family:var(--font-display); font-weight:700; font-size:19px; }

/* =========================================================
   TERMBAR (marquee)
   ========================================================= */
.termbar{ background:var(--ink); color:var(--crema); overflow:hidden; border-block:1px solid var(--line-dark); padding-block:18px; }
.termbar__track{ display:flex; align-items:center; gap:36px; width:max-content; animation:marquee 30s linear infinite; }
.termbar__track span{ font-family:var(--font-display); font-weight:600; font-size:clamp(20px,3vw,34px); letter-spacing:-.02em; opacity:.85; }
.termbar__track .ico{ width:18px; height:18px; color:var(--accent-2); }

/* =========================================================
   VALUES
   ========================================================= */
.values__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.value{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.value:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.value__icon{ display:grid; place-items:center; width:52px; height:52px; border-radius:14px;
  background:linear-gradient(150deg,var(--espresso),var(--ink)); color:var(--crema); margin-bottom:20px; }
.value__icon .ico{ width:26px; height:26px; }
.value h3{ font-size:19px; margin-bottom:8px; }
.value p{ font-size:14.5px; color:var(--text-soft); }

/* card de destaque — café + creatina */
.value--feature{
  position:relative; color:var(--text-light);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(194,112,61,.32), transparent 55%),
    linear-gradient(155deg, #2a1c14, #0d0d0f 70%);
  border-color:rgba(201,164,122,.32);
  box-shadow:0 14px 34px rgba(42,28,20,.4);
}
.value--feature h3{ color:#fff; }
.value--feature p{ color:var(--text-light-soft); }
.value--feature p strong{ color:var(--crema); font-weight:700; }
.value--feature .value__icon{ background:var(--accent); color:#fff; box-shadow:0 8px 20px rgba(194,112,61,.4); }
.value__tag{
  position:absolute; top:18px; right:18px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-2); border:1px solid rgba(217,139,79,.45); padding:5px 10px; border-radius:999px;
}

/* =========================================================
   CATEGORIAS
   ========================================================= */
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:18px; }
.cat{ position:relative; display:flex; flex-direction:column; border-radius:var(--radius); overflow:hidden;
  background:var(--ink); color:var(--text-light); box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease); min-height:230px; }
.cat:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.cat--lg{ grid-row:span 2; }
.cat--wide{ grid-column:span 2; }
.cat__media{ position:relative; flex:1; display:grid; place-items:center; overflow:hidden; min-height:150px; }
.cat__media .render__icon{ width:40%; max-width:120px; height:auto; transition:transform .5s var(--ease); }
.cat:hover .cat__media .render__icon{ transform:scale(1.08) rotate(-2deg); }
.cat--lg .cat__media .render__icon{ max-width:200px; }
.cat__body{ position:relative; padding:20px 22px 22px; background:linear-gradient(0deg,rgba(13,13,15,.5),transparent); }
.cat__count{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; color:var(--crema); text-transform:uppercase; }
.cat__body h3{ font-size:20px; margin:6px 0 12px; }
.cat--lg .cat__body h3{ font-size:26px; }
.cat__link{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--text-light-soft); transition:gap .25s var(--ease), color .2s; }
.cat__link .ico{ width:16px; height:16px; }
.cat:hover .cat__link{ color:#fff; gap:11px; }

/* tons por categoria */
.cat[data-tone="espresso"] .cat__media{ background:radial-gradient(80% 80% at 50% 30%,#3b2a20,#161210),conic-gradient(from 200deg at 60% 40%,#33312f,#161210,#2a2622,#1b1715); }
.cat[data-tone="portable"] .cat__media{ background:radial-gradient(80% 80% at 50% 30%,#2e2c33,#121216),linear-gradient(150deg,#34323a,#101013); }
.cat[data-tone="drip"]     .cat__media{ background:radial-gradient(80% 80% at 50% 30%,#4a3526,#15100c),linear-gradient(150deg,#3a2a1e,#120d0a); }
.cat[data-tone="cup"]      .cat__media{ background:radial-gradient(80% 80% at 50% 30%,#3c3833,#16140f),linear-gradient(150deg,#403a32,#14110d); }
.cat[data-tone="tamper"]   .cat__media{ background:radial-gradient(80% 80% at 50% 30%,#2c2d31,#121214),conic-gradient(from 160deg at 50% 40%,#3a3b40,#15151a,#2b2c31); }
.cat[data-tone="gift"]     .cat__media{ background:radial-gradient(80% 80% at 50% 30%,#5e4130,#1a120d),linear-gradient(150deg,#4a3324,#15100b); }

/* =========================================================
   PRODUTOS
   ========================================================= */
.prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.collection-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.card__media{ position:relative; aspect-ratio:1/1; display:grid; place-items:center; overflow:hidden; }
.card__media .render__icon{ width:46%; max-width:130px; height:auto; transition:transform .5s var(--ease); filter:drop-shadow(0 14px 22px rgba(0,0,0,.35)); }
.card:hover .card__media .render__icon{ transform:scale(1.07) translateY(-4px); }
.card__media .render__code{ color:rgba(255,255,255,.5); }
.card__badge{ position:absolute; top:14px; right:14px; z-index:2; background:var(--accent); color:#fff;
  font-family:var(--font-mono); font-size:11px; font-weight:700; padding:5px 9px; border-radius:8px; }
.card__fab{ position:absolute; bottom:14px; right:14px; z-index:2; width:44px; height:44px; border-radius:50%;
  background:#fff; color:var(--ink); display:grid; place-items:center; box-shadow:var(--shadow);
  transform:translateY(10px) scale(.85); opacity:0; transition:transform .3s var(--ease), opacity .3s var(--ease), background .2s, color .2s; }
.card:hover .card__fab{ transform:translateY(0) scale(1); opacity:1; }
.card__fab:hover{ background:var(--accent); color:#fff; }
.card__fab .ico{ width:22px; height:22px; }

.card__body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card__cat{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mut); }
.card__name{ font-family:var(--font-display); font-weight:600; font-size:17px; letter-spacing:-.01em; }
.card__rating{ display:flex; align-items:center; gap:4px; font-size:12.5px; color:var(--text-mut); }
.card__rating .stars{ display:inline-flex; color:var(--accent); }
.card__rating .ico--star{ width:14px; height:14px; }
.card__price{ display:flex; align-items:baseline; gap:9px; margin-top:auto; padding-top:8px; }
.card__price-now{ font-family:var(--font-display); font-weight:700; font-size:21px; }
.card__price-from{ font-family:var(--font-mono); font-size:13px; color:var(--text-mut); text-decoration:line-through; }
.card__factory{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--coffee); font-weight:600; }
.card__factory .ico{ width:14px; height:14px; }
.card__note{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; margin-top:2px;
  font-size:11.5px; font-weight:600; color:var(--coffee);
  background:rgba(194,112,61,.10); border:1px solid rgba(194,112,61,.24); border-radius:999px; padding:4px 10px; }
.card__note .ico{ width:14px; height:14px; color:var(--accent); }
.card__colors{ display:flex; gap:8px; margin-top:4px; }
.card__swatch{ width:22px; height:22px; border-radius:50%; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); transition:transform .15s var(--ease); }
.card__swatch:hover{ transform:scale(1.12); }
.card__swatch.is-active{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.18), 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.card__add{ margin-top:12px; }

.ico--star{ fill:currentColor; stroke:none; }

/* =========================================================
   MANIFESTO
   ========================================================= */
.manifesto{ position:relative; background:linear-gradient(165deg,#1a140f,#0d0d0f 60%); color:var(--text-light); overflow:hidden; }
.manifesto__grain{ position:absolute; inset:0; opacity:.35; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); mix-blend-mode:overlay; }
.manifesto__inner{ position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.manifesto__title{ font-size:clamp(28px,4.4vw,52px); margin-bottom:24px; }
.manifesto__lead{ color:var(--text-light-soft); font-size:clamp(15px,1.7vw,18px); max-width:52ch; margin-bottom:18px; }
.manifesto__lead strong{ color:var(--crema); font-weight:600; }
.manifesto__stats{ display:flex; flex-wrap:wrap; gap:14px 40px; margin:34px 0; padding-block:26px; border-block:1px solid var(--line-dark); }
.stat strong{ display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(28px,4vw,40px); line-height:1; color:var(--crema); letter-spacing:-.03em; }
.stat span{ font-size:13px; color:var(--text-light-soft); margin-top:6px; display:block; }
.manifesto__pillars{ display:flex; flex-wrap:wrap; gap:10px; margin:30px 0 34px; }
.manifesto__pillars span{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--crema); border:1px solid rgba(201,164,122,.32); border-radius:999px; padding:9px 15px; }

.manifesto__visual{ position:relative; }
.render--manifesto{ width:100%; aspect-ratio:4/5;
  background:radial-gradient(80% 60% at 50% 25%,rgba(201,164,122,.25),transparent 60%),
    conic-gradient(from 210deg at 55% 45%,#34302c,#15110d,#2a2522,#100c09,#34302c),linear-gradient(160deg,#2c2620,#100c0a);
  border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow-lg); }
.render--manifesto .render__icon{ width:50%; }
.manifesto__tape{ position:absolute; bottom:-14px; left:-8px; right:-8px; overflow:hidden; white-space:nowrap;
  background:var(--accent); color:#fff; font-family:var(--font-mono); font-size:11px; letter-spacing:.18em;
  padding:9px 0; transform:rotate(-2deg); box-shadow:var(--shadow); }

/* =========================================================
   LIFESTYLE
   ========================================================= */
.lifestyle__inner{ display:grid; grid-template-columns:.95fr 1.05fr; gap:56px; align-items:center; }
.render--life{ width:100%; aspect-ratio:1/1;
  background:radial-gradient(80% 70% at 35% 30%,var(--crema-soft),#e3d4bf 40%,#cdb38e 100%);
  border:1px solid var(--line); box-shadow:var(--shadow); }
.render--life .render__icon{ color:var(--espresso); opacity:.55; filter:none; width:42%; }
.render--life .render__sheen{ background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 62%); }
.checklist{ display:flex; flex-direction:column; gap:13px; margin:26px 0 30px; }
.checklist li{ display:flex; align-items:center; gap:12px; font-size:15.5px; color:var(--text-soft); }
.checklist .ico{ width:22px; height:22px; padding:0; color:var(--accent); flex:none; }

/* =========================================================
   REVIEWS
   ========================================================= */
.reviews__score{ display:flex; align-items:center; gap:10px; margin-top:18px; font-size:14px; color:var(--text-soft); }
.reviews__stars{ display:inline-flex; color:var(--accent); }
.reviews__stars .ico--star{ width:18px; height:18px; }
.reviews__score strong{ font-family:var(--font-display); font-size:18px; color:var(--text); }
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.review{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:16px; }
.review__stars{ display:inline-flex; gap:2px; color:var(--accent); }
.review__stars .ico--star{ width:16px; height:16px; }
.review p{ font-size:16px; line-height:1.55; color:var(--text); }
.review footer{ display:flex; align-items:center; gap:12px; font-size:13px; color:var(--text-soft); margin-top:auto; }
.review footer strong{ color:var(--text); }
.review__avatar{ display:grid; place-items:center; width:42px; height:42px; border-radius:50%; flex:none;
  background:linear-gradient(150deg,var(--coffee),var(--espresso)); color:var(--crema); font-family:var(--font-display); font-weight:700; }
.reviews__note{ margin-top:24px; font-size:12px; color:var(--text-mut); font-style:italic; }

/* =========================================================
   NEWSLETTER
   ========================================================= */
.newsletter{ position:relative; background:
  radial-gradient(100% 120% at 80% 0%,rgba(194,112,61,.25),transparent 55%),
  linear-gradient(160deg,#17120e,#0d0d0f); color:var(--text-light); overflow:hidden; text-align:center; }
.newsletter__grain{ position:absolute; inset:0; opacity:.35; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); mix-blend-mode:overlay; }
.newsletter__inner{ position:relative; max-width:620px; margin-inline:auto; }

/* vídeo de fundo de seção (reutilizável) */
.section-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.newsletter--video .newsletter__overlay{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(110% 130% at 82% -10%, rgba(194,112,61,.28), transparent 55%),
    radial-gradient(95% 95% at 50% 50%, rgba(11,11,13,.60), rgba(11,11,13,.85)); }
.newsletter--video .newsletter__grain{ z-index:2; }
.newsletter--video .newsletter__inner{ z-index:3; }
.newsletter--video .newsletter__title,
.newsletter--video .newsletter__sub{ text-shadow:0 2px 22px rgba(0,0,0,.5); }
.newsletter .eyebrow{ justify-content:center; }
.newsletter__title{ font-size:clamp(30px,5vw,54px); margin-bottom:16px; }
.newsletter__sub{ color:var(--text-light-soft); font-size:clamp(15px,1.8vw,18px); max-width:46ch; margin-inline:auto; }
.newsletter__form{ margin-top:34px; }
.field{ display:flex; gap:10px; background:rgba(255,255,255,.06); border:1px solid var(--line-dark); border-radius:999px; padding:7px 7px 7px 8px; max-width:480px; margin-inline:auto; }
.field input{ flex:1; background:transparent; border:0; color:#fff; font-size:16px; font-family:var(--font-body); padding:10px 16px; min-width:0; }
.field input::placeholder{ color:var(--text-light-soft); }
.field input:focus{ outline:none; }
.field .btn{ flex:none; }
.newsletter__msg{ min-height:22px; margin-top:14px; font-size:14px; font-weight:600; color:var(--crema); }
.newsletter__msg.error{ color:#ff9d7a; }
.newsletter__fine{ margin-top:18px; font-size:12.5px; color:var(--text-light-soft); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--ink); color:var(--text-light-soft); padding-top:clamp(56px,7vw,84px); }
.footer__inner{ display:grid; grid-template-columns:1.3fr 2fr; gap:48px; padding-bottom:48px; border-bottom:1px solid var(--line-dark); }
.brand--footer .brand__name{ font-size:24px; }
.footer__tag{ margin:20px 0 22px; font-size:14px; max-width:34ch; line-height:1.55; }
.footer__social{ display:flex; gap:10px; }
.footer__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.footer__col h4{ font-family:var(--font-display); font-size:13px; letter-spacing:.04em; color:#fff; margin-bottom:16px; text-transform:uppercase; }
.footer__col a{ display:block; font-size:14px; padding:6px 0; color:var(--text-light-soft); transition:color .2s, padding-left .2s; }
.footer__col a:hover{ color:#fff; padding-left:5px; }
.footer__bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding-block:26px; font-size:12.5px; }
.footer__pay{ display:flex; gap:8px; }
.pay{ font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--steel);
  border:1px solid var(--line-dark); border-radius:6px; padding:5px 9px; }

/* =========================================================
   CART DRAWER + OVERLAY + TOAST
   ========================================================= */
.overlay{ position:fixed; inset:0; background:rgba(8,8,10,.55); backdrop-filter:blur(2px); z-index:90; opacity:0; transition:opacity .35s var(--ease); }
.overlay.show{ opacity:1; }
.cart{ position:fixed; top:0; right:0; bottom:0; width:min(92vw,420px); z-index:100;
  background:var(--paper); color:var(--text); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .4s var(--ease); box-shadow:var(--shadow-lg); }
.cart.open{ transform:translateX(0); }
.cart__head{ display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line); }
.cart__head h3{ font-size:19px; }
.cart__head span{ color:var(--text-mut); font-weight:400; }
.cart__items{ flex:1; overflow-y:auto; padding:14px 24px; }
.cart__empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; height:100%; text-align:center; color:var(--text-mut); }
.cart__empty .ico{ width:46px; height:46px; opacity:.4; }
.cart-line{ display:grid; grid-template-columns:64px 1fr auto; gap:14px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); }
.cart-line__thumb{ width:64px; height:64px; border-radius:12px; display:grid; place-items:center; overflow:hidden; }
.cart-line__thumb .render__icon{ width:50%; filter:none; }
.cart-line__info{ display:flex; flex-direction:column; gap:4px; }
.cart-line__name{ font-family:var(--font-display); font-weight:600; font-size:15px; }
.cart-line__price{ font-size:13px; color:var(--text-soft); }
.cart-line__qty{ display:inline-flex; align-items:center; gap:10px; margin-top:4px; }
.cart-line__qty button{ width:26px; height:26px; border:1px solid var(--line); border-radius:7px; display:grid; place-items:center; color:var(--text); transition:background .2s,border-color .2s; }
.cart-line__qty button:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.cart-line__qty .ico{ width:14px; height:14px; }
.cart-line__qty span{ font-family:var(--font-mono); font-size:14px; min-width:18px; text-align:center; }
.cart-line__remove{ font-size:11.5px; color:var(--text-mut); text-decoration:underline; align-self:flex-start; }
.cart-line__remove:hover{ color:var(--accent); }
.cart__foot{ padding:20px 24px calc(20px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:#fff; }
.cart__subtotal{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; }
.cart__subtotal strong{ font-family:var(--font-display); font-size:24px; }
.cart__note{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--coffee); margin-bottom:16px; }
.cart__note .ico{ width:16px; height:16px; }

.toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); z-index:120;
  display:flex; align-items:center; gap:10px; background:var(--ink); color:#fff;
  padding:13px 20px; border-radius:999px; box-shadow:var(--shadow-lg); font-size:14px; font-weight:500;
  opacity:0; transition:opacity .3s var(--ease), transform .3s var(--ease); }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast .ico{ width:18px; height:18px; color:var(--accent-2); }

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }

/* =========================================================
   REAL ASSETS (fotos + vídeo)
   ========================================================= */
/* hero — foto do produto */
.hero__photo{
  position:relative; width:min(100%,520px); border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid rgba(255,255,255,.1); box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.08);
}
.hero__photo img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.hero__photo .render__code{ z-index:2; }

/* cards com foto real */
.card__media--photo{ background:linear-gradient(180deg,#ffffff,#f1eee8); }
.card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.card:hover .card__img{ transform:scale(1.05); }
.card__media--photo .render__code{ color:var(--ink); background:rgba(255,255,255,.78); padding:3px 8px; border-radius:6px; backdrop-filter:blur(4px); }

/* manifesto — foto da fábrica */
.manifesto__photo{
  position:relative; width:100%; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow-lg);
}
.manifesto__photo img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; }
.manifesto__photo .render__code{ z-index:2; background:rgba(13,13,15,.55); padding:4px 9px; border-radius:6px; backdrop-filter:blur(4px); }

/* player de vídeo vertical */
.video-frame{
  position:relative; width:min(100%,340px); margin-inline:auto; aspect-ratio:9/16;
  border-radius:var(--radius-lg); overflow:hidden; background:#0a0a0c;
  border:1px solid var(--line); box-shadow:var(--shadow-lg);
}
.video-frame video{ width:100%; height:100%; object-fit:cover; display:block; }
.video-frame__tag{
  position:absolute; bottom:14px; left:14px; display:inline-flex; align-items:center; gap:8px;
  background:rgba(13,13,15,.7); backdrop-filter:blur(8px); color:#fff;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; padding:7px 12px; border-radius:999px;
}
.video-frame__live{ width:7px; height:7px; border-radius:50%; background:#ff5a4d; animation:pulse 1.8s ease-out infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,90,77,.55);} 70%{ box-shadow:0 0 0 8px rgba(255,90,77,0);} 100%{ box-shadow:0 0 0 0 rgba(255,90,77,0);} }

/* cart thumb com foto */
.cart-line__thumb{ background:#f1eee8; }
.cart-line__thumb img{ width:100%; height:100%; object-fit:cover; }

/* hero com vídeo de fundo */
.hero--video{ display:grid; align-items:center; min-height:clamp(600px, 90vh, 900px); margin-top:calc(-1 * var(--header-h)); }
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero__overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 92% 2%, rgba(194,112,61,.28), transparent 50%),
    linear-gradient(105deg, rgba(11,11,13,.90) 0%, rgba(11,11,13,.60) 45%, rgba(11,11,13,.32) 72%, rgba(11,11,13,.52) 100%),
    linear-gradient(180deg, rgba(11,11,13,.42) 0%, transparent 26%, transparent 50%, rgba(11,11,13,.82) 100%);
}
.hero--video .hero__grain{ z-index:2; }
.hero--video .hero__inner{ z-index:3; grid-template-columns:1fr; }
.hero--video .hero__copy{ max-width:640px; }
.hero--video .hero__title,
.hero--video .hero__lead{ text-shadow:0 2px 24px rgba(0,0,0,.45); }

/* =========================================================
   CREATINA — banner herói
   ========================================================= */
.creatina-hero{
  position:relative; overflow:hidden; color:var(--text-light);
  padding-block:clamp(56px,8vw,104px);
  background:
    radial-gradient(100% 90% at 88% 8%, rgba(194,112,61,.30), transparent 55%),
    linear-gradient(160deg, #1d130c 0%, #0b0b0d 65%);
}
.creatina-hero__grain{ position:absolute; inset:0; opacity:.32; pointer-events:none; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.creatina-hero__inner{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; }
.creatina-hero__title{ font-size:clamp(34px,5.2vw,62px); line-height:1.02; margin-bottom:20px; }
.creatina-hero__lead{ color:var(--text-light-soft); font-size:clamp(15px,1.7vw,18px); max-width:46ch; margin-bottom:30px; }
.creatina-hero__lead strong{ color:var(--crema); font-weight:700; }
.creatina-hero__row{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; margin-bottom:32px; }
.creatina-hero__stat{ display:flex; align-items:baseline; gap:12px; }
.creatina-hero__stat strong{ font-family:var(--font-display); font-weight:700; font-size:clamp(46px,7vw,66px); line-height:.85; color:var(--crema); letter-spacing:-.04em; }
.creatina-hero__stat span{ font-size:12.5px; color:var(--text-light-soft); }
.creatina-hero__price{ display:flex; flex-direction:column; padding-left:28px; border-left:1px solid var(--line-dark); }
.creatina-hero__from{ font-family:var(--font-mono); font-size:13px; color:var(--text-mut); text-decoration:line-through; }
.creatina-hero__now{ font-family:var(--font-display); font-weight:700; font-size:27px; }
.creatina-hero__visual{ position:relative; }
.creatina-hero__photo{ width:100%; border-radius:var(--radius-lg); overflow:hidden; border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow-lg); }
.creatina-hero__photo img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.creatina-hero__photo--pack{ background:linear-gradient(180deg,#fff,#f3f0ea); border-color:rgba(255,255,255,.18); }
.creatina-hero__photo--pack img{ object-fit:contain; padding:6%; }
.creatina-hero__badge{ position:absolute; bottom:-16px; left:24px; display:inline-flex; align-items:baseline; gap:6px;
  background:var(--accent); color:#fff; font-family:var(--font-mono); font-size:12px; letter-spacing:.04em;
  padding:11px 18px; border-radius:999px; box-shadow:0 14px 32px rgba(194,112,61,.5); }
.creatina-hero__badge strong{ font-family:var(--font-display); font-size:18px; }

/* =========================================================
   COMO FUNCIONA — café + creatina
   ========================================================= */
.howto__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.step{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:34px 28px; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.step:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.step__num{ position:absolute; top:24px; right:26px; font-family:var(--font-mono); font-size:13px; letter-spacing:.1em; color:var(--text-mut); }
.step__icon{ display:grid; place-items:center; width:54px; height:54px; border-radius:15px;
  background:linear-gradient(150deg,var(--espresso),var(--ink)); color:var(--crema); margin-bottom:22px; }
.step__icon .ico{ width:27px; height:27px; }
.step:last-child .step__icon{ background:var(--accent); color:#fff; box-shadow:0 8px 20px rgba(194,112,61,.35); }
.step h3{ font-size:19px; margin-bottom:8px; }
.step p{ font-size:14.5px; color:var(--text-soft); }
.howto__note{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:38px;
  font-size:15px; color:var(--coffee); text-align:center; }
.howto__note .ico{ width:20px; height:20px; color:var(--accent); flex:none; }

/* =========================================================
   CART — linha PIX
   ========================================================= */
.cart__pix{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; font-size:13.5px; color:var(--coffee); }
.cart__pix span{ display:inline-flex; align-items:center; gap:7px; }
.cart__pix .ico{ width:15px; height:15px; color:var(--accent); }
.cart__pix strong{ font-family:var(--font-display); font-size:16px; color:var(--ink); }

/* =========================================================
   PDP — página de produto
   ========================================================= */
.page-product{ background:var(--paper); }
.pdp{ padding-block:clamp(26px,3.5vw,44px) clamp(52px,7vw,84px); }
.breadcrumb{ font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--text-mut); margin-bottom:clamp(20px,3vw,32px); }
.breadcrumb a{ color:var(--text-soft); } .breadcrumb a:hover{ color:var(--accent); }
.breadcrumb span{ margin:0 6px; color:var(--steel-2); }

.pdp__grid{ display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(28px,4vw,56px); align-items:start; }

.pdp__gallery{ position:sticky; top:88px; }
.pdp__stage{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:1/1;
  background:linear-gradient(180deg,#ffffff,#f1eee8); border:1px solid var(--line); box-shadow:var(--shadow-sm); display:grid; place-items:center; }
.pdp__img{ width:100%; height:100%; object-fit:cover; display:block; }
.pdp__render{ position:relative; width:100%; height:100%; display:grid; place-items:center; overflow:hidden; }
.pdp__render .render__icon{ width:46%; color:rgba(255,255,255,.9); filter:drop-shadow(0 18px 30px rgba(0,0,0,.4)); }
.pdp__stage .card__badge{ top:16px; right:16px; }
.pdp__thumbs{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.pdp__thumb{ width:72px; height:72px; border-radius:12px; overflow:hidden; border:1.5px solid var(--line); background:#fff; padding:0; transition:border-color .2s; }
.pdp__thumb img{ width:100%; height:100%; object-fit:cover; }
.pdp__thumb.is-active{ border-color:var(--ink); }

.pdp__info .eyebrow{ margin-bottom:10px; }
.pdp__title{ font-family:var(--font-display); font-weight:700; font-size:clamp(28px,4vw,42px); letter-spacing:-.02em; line-height:1.05; margin-bottom:14px; }
.pdp__rate{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text-soft); margin-bottom:22px; }
.pdp__rate .stars{ display:inline-flex; color:var(--accent); }
.pdp__rate .stars .ico--star{ width:16px; height:16px; }
.pdp__rate strong{ color:var(--text); }
.pdp__rate a{ color:var(--text-mut); text-decoration:underline; }

.pdp__pricebox{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow-sm); margin-bottom:24px; }
.pdp__priceline{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.pdp__from{ font-family:var(--font-mono); font-size:15px; color:var(--text-mut); text-decoration:line-through; }
.pdp__now{ font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3.4vw,36px); letter-spacing:-.02em; }
.pdp__off{ background:var(--accent); color:#fff; font-family:var(--font-mono); font-weight:700; font-size:13px; padding:4px 9px; border-radius:8px; }
.pdp__pix{ display:flex; align-items:center; gap:9px; margin-top:14px; font-size:14.5px; color:var(--coffee);
  background:rgba(194,112,61,.10); border:1px solid rgba(194,112,61,.22); border-radius:11px; padding:11px 14px; }
.pdp__pix .ico{ width:18px; height:18px; color:var(--accent); flex:none; }
.pdp__pix strong{ font-family:var(--font-display); font-size:20px; color:var(--ink); }
.pdp__pix em{ font-style:normal; color:var(--accent); font-weight:700; font-size:12px; }
.pdp__install{ font-size:13.5px; color:var(--text-soft); margin-top:10px; }
.pdp__install strong{ color:var(--text); font-weight:600; }

.pdp__desc{ color:var(--text-soft); font-size:16px; line-height:1.6; margin-bottom:20px; }
.pdp__bullets{ display:flex; flex-direction:column; gap:11px; margin-bottom:24px; }
.pdp__bullets li{ display:flex; align-items:center; gap:11px; font-size:14.5px; color:var(--text); }
.pdp__bullets .ico{ width:20px; height:20px; color:var(--accent); flex:none; }

.pdp__variants{ margin-bottom:24px; }
.pdp__variants-label{ display:block; font-size:13px; font-weight:600; color:var(--text-soft); margin-bottom:9px; }
.pdp__swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.pdp__swatch{ display:inline-flex; align-items:center; gap:9px; border:1.5px solid var(--line); border-radius:999px; padding:7px 15px 7px 8px; font-size:13.5px; font-weight:500; transition:border-color .2s, transform .2s; }
.pdp__swatch:hover{ transform:translateY(-1px); }
.pdp__swatch span{ width:18px; height:18px; border-radius:50%; border:1px solid rgba(0,0,0,.18); }
.pdp__swatch.is-active{ border-color:var(--ink); }

.pdp__urgency{ display:flex; flex-direction:column; gap:13px; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-bottom:22px; }
.pdp__timer{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--text-soft); }
.pdp__timer .ico{ width:18px; height:18px; color:var(--accent); flex:none; }
.pdp__timer strong{ font-family:var(--font-mono); font-size:16px; color:var(--ink); letter-spacing:.02em; }
.pdp__stock-bar{ height:6px; border-radius:999px; background:var(--line); overflow:hidden; margin-bottom:7px; }
.pdp__stock-bar i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.pdp__stock span{ font-size:12.5px; color:var(--text-mut); }

.pdp__buy{ display:flex; gap:12px; margin-bottom:12px; }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; padding:4px; flex:none; background:#fff; }
.qty button{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:var(--ink); transition:background .2s; }
.qty button:hover{ background:var(--paper-2); }
.qty button .ico{ width:18px; height:18px; }
.qty span{ min-width:36px; text-align:center; font-family:var(--font-mono); font-size:15px; }
.pdp__buy .btn{ flex:1; }
.pdp__buynow{ margin-bottom:24px; }

.pdp__trust{ display:grid; grid-template-columns:1fr 1fr; gap:13px; border-top:1px solid var(--line); padding-top:20px; }
.pdp__trust li{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-soft); }
.pdp__trust .ico{ width:18px; height:18px; color:var(--coffee); flex:none; }

.pdp-about__grid{ display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(32px,4vw,56px); align-items:start; }
.pdp__bullets--about{ margin-top:24px; margin-bottom:0; }
.pdp-specs{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px; box-shadow:var(--shadow-sm); }
.pdp-specs h3{ font-family:var(--font-display); font-size:16px; margin-bottom:14px; }
.spec{ display:flex; justify-content:space-between; gap:18px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px; }
.spec:last-child{ border-bottom:0; }
.spec span{ color:var(--text-mut); flex:none; }
.spec strong{ text-align:right; font-weight:600; }

.pdp-related .prod-grid{ grid-template-columns:repeat(4,1fr); }

/* sticky buy bar (mobile) */
.pdp-sticky{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:rgba(13,13,15,.96); backdrop-filter:blur(10px); border-top:1px solid var(--line-dark);
  transform:translateY(110%); transition:transform .3s var(--ease); padding:11px 0 calc(11px + env(safe-area-inset-bottom)); }
.pdp-sticky.show{ transform:none; }
.pdp-sticky__inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.pdp-sticky__info strong{ display:block; color:#fff; font-family:var(--font-display); font-size:18px; line-height:1.1; }
.pdp-sticky__info span{ color:var(--text-light-soft); font-size:11.5px; }
.pdp-sticky .btn{ flex:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .values__grid{ grid-template-columns:repeat(2,1fr); }
  .prod-grid{ grid-template-columns:repeat(2,1fr); }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .cat--lg{ grid-row:span 1; }
  .cat--wide{ grid-column:span 2; }
  .review-grid{ grid-template-columns:1fr; max-width:620px; }
  .hero__inner{ grid-template-columns:1fr; gap:40px; }
  .hero__stage{ order:-1; min-height:auto; }
  .manifesto__inner,.lifestyle__inner{ grid-template-columns:1fr; gap:40px; }
  .lifestyle .video-frame{ order:2; }
  .creatina-hero__inner{ grid-template-columns:1fr; gap:46px; }
  .creatina-hero__visual{ order:-1; max-width:540px; }
  .footer__inner{ grid-template-columns:1fr; gap:36px; }
  .pdp__grid{ grid-template-columns:1fr; gap:32px; }
  .pdp__gallery{ position:static; }
  .pdp__stage{ max-width:460px; }
  .pdp-about__grid{ grid-template-columns:1fr; gap:32px; }
  .pdp-related .prod-grid{ grid-template-columns:repeat(2,1fr); }
  .pdp-sticky{ display:block; }
}
@media (max-width:760px){
  .nav{ display:none; }
  .nav-toggle{ display:inline-grid; }
  :root{ --header-h:65px; }
  .header__inner{ height:64px; }
  .section-head--row{ flex-direction:column; align-items:flex-start; }
  .hero__chip--1{ left:0; }
  .hero__chip--2{ right:0; }
  .footer__cols{ grid-template-columns:repeat(2,1fr); }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
  .howto__grid{ grid-template-columns:1fr; }
  .collection-grid{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  :root{ --gutter:18px; }
  .brand__sub{ display:none; }
  .brand__name{ font-size:19px; }
  .creatina-hero__price{ border-left:0; padding-left:0; }
  .values__grid,.prod-grid,.cat-grid{ grid-template-columns:1fr; }
  .pdp-related .prod-grid{ grid-template-columns:1fr; }
  .pdp__trust{ grid-template-columns:1fr; }
  .cat--wide{ grid-column:span 1; }
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .btn{ width:100%; }
  .field{ flex-direction:column; border-radius:18px; background:transparent; border:0; padding:0; gap:12px; }
  .field input{ background:rgba(255,255,255,.06); border:1px solid var(--line-dark); border-radius:14px; }
  .field .btn{ width:100%; }
  .footer__cols{ grid-template-columns:1fr; }
}

/* hero mobile — declutter dos elementos flutuantes */
@media (max-width:640px){
  .eyebrow{ font-size:10.5px; letter-spacing:.12em; flex-wrap:wrap; }
  .hero__photo{ width:100%; }
  .hero__chip{ display:none; }
  .hero__photo .render__code{ display:none; }
  .hero__pricetag{ left:auto; right:12px; transform:none; bottom:12px; padding:8px 15px; gap:8px; white-space:nowrap; }
  .hero__pricetag-now{ font-size:17px; }
  .hero__pricetag-from{ font-size:11px; }
  .hero__badges{ gap:14px 20px; }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1; transform:none; }
}