/* ============================================================
   base.css · FUNDAÇÃO global da página (versão D)
   Só a unidade Fundação edita este arquivo. Regras de seção vivem
   em sections/*.css (inclusive as media queries). Ver CONVENCOES.md.
   ============================================================ */

/* ---------- fontes (self-hosted, variáveis, OFL) ---------- */
@font-face{font-family:'Syne';font-style:normal;font-weight:400 800;font-display:swap;src:url(assets/fonts/syne-var.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(assets/fonts/manrope-var.woff2) format('woff2')}
/* fallback com métricas aproximadas do Syne: a troca não mexe na altura das linhas */
@font-face{font-family:'Syne Fallback';src:local('Arial Bold'),local('Helvetica Neue Bold'),local('Arial');size-adjust:104%;ascent-override:95%;descent-override:26%;line-gap-override:0%}

/* ---------- tokens ---------- */
:root{
  color-scheme:dark;
  --bg:#0d0706;--bg2:#140b09;--card:#1a0f0c;--card2:#201310;
  --line:rgba(255,255,255,.08);--line2:rgba(255,170,130,.22);
  --tx:#fff4ee;--mut:#c4a79c;--mut2:#98776c;
  --v1:#ffb088;--v2:#ff6a2b;--v3:#e8321f;--glow:rgba(255,90,40,.45);
  --ok:#5ee0a0;--warn:#ff7a8a;--amber:#ffd84d;
  --lav:#fdf1ea;--lav2:#f8e0d3;--ink:#1f110d;
  --fh:'Syne','Syne Fallback',system-ui,sans-serif;--fb:'Manrope',system-ui,sans-serif;
  --r:22px;
  /* easing */
  --e-out:cubic-bezier(.2,.8,.2,1);      /* hover, lift, UI */
  --e-inout:cubic-bezier(.45,0,.2,1);    /* deslocamentos */
  --e-spring:cubic-bezier(.3,1.5,.5,1);  /* pops, encaixes */
  --e-reveal:cubic-bezier(.2,.7,.2,1);   /* reveal ao rolar */
  /* duração */
  --d-fast:.18s;--d-ui:.32s;--d-slow:.6s;
  /* gutter do wrap (muda por breakpoint) */
  --gutter:80px;
}

/* ---------- reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:24px;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{background:radial-gradient(ellipse 70% 700px at 88% 270px,rgba(232,50,31,.16),transparent 90%),var(--bg);color:var(--tx);font-family:var(--fb);font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased}
img,video,canvas,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
a,button,summary{-webkit-tap-highlight-color:transparent}
:where(a,button,summary,[tabindex]):focus-visible{outline:3px solid var(--v1);outline-offset:5px;border-radius:inherit}
em{font-style:normal;color:var(--v1)}
section{position:relative}
[hidden]{display:none!important}

/* ---------- tipografia ---------- */
h1,h2,h3,h4{font-family:var(--fh);font-weight:700;line-height:1.12;letter-spacing:-.045em;text-wrap:balance}
h1{letter-spacing:-.055em}
h2{font-size:clamp(32px,3.8vw,52px);letter-spacing:-.05em}
h3{font-size:21px;line-height:1.35;letter-spacing:-.035em}
h2 em,h3 em{color:var(--v1)}
p{color:inherit}
.sub{color:var(--mut);font-size:17px;line-height:1.6;max-width:520px}
.sub b{color:var(--tx)}
.eyebrow{font-size:10px;letter-spacing:.15em;font-weight:700;color:var(--v1);text-transform:uppercase;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.center .eyebrow{justify-content:center}
.pill{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.14em;font-weight:700;padding:9px 16px;border:1px solid var(--line2);border-radius:99px;background:rgba(255,106,43,.08);color:#ffe2d2;margin-bottom:24px}
.note{font-size:13px;color:var(--mut2);margin-top:14px;line-height:1.6}
.num{font-family:var(--fh);font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- layout ---------- */
.wrap{width:min(1200px,calc(100% - var(--gutter)));margin-inline:auto}
.wrap-n{width:min(820px,calc(100% - var(--gutter)));margin-inline:auto}
.center{text-align:center}.mt{margin-top:56px}
.sec-head{margin-bottom:56px}
.sec-head.center .sub{margin:22px auto 0}
.sec-head.split{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:end}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:99;background:#fff;color:#000;padding:8px 12px;border-radius:8px}

/* ---------- ponto vivo ---------- */
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--v1);box-shadow:0 0 0 0 var(--glow);animation:g-pulse 1.8s infinite}
@keyframes g-pulse{0%{box-shadow:0 0 0 0 rgba(255,176,136,.7)}100%{box-shadow:0 0 0 12px rgba(255,176,136,0)}}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:19px 26px;border-radius:16px;font:700 16px/1.3 var(--fb);letter-spacing:-.005em;white-space:nowrap;min-width:300px;position:relative;isolation:isolate;overflow:hidden;color:#fff;
  background:linear-gradient(120deg,#ff9a55 0%,#ff6a2b 45%,#d92a17 100%);
  box-shadow:0 18px 44px -14px rgba(255,106,43,.8),0 0 0 1px rgba(255,205,180,.28),inset 0 1px 0 rgba(255,255,255,.42),inset 0 -2px 0 rgba(0,0,0,.2);
  transition:transform .25s var(--e-out),box-shadow .25s var(--e-out),background .25s}
.btn:hover{background:linear-gradient(120deg,#ffab6e 0%,#ff7a40 45%,#e6331f 100%);box-shadow:0 22px 54px -14px rgba(255,106,43,.95),0 0 0 1px rgba(255,220,200,.4),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,0,.2);transform:translateY(-3px)}
.btn:active{transform:translateY(-1px) scale(.985);transition-duration:.08s}
.btn .arrow{font-size:22px;line-height:1}
.btn.wide{width:100%;max-width:520px}
/* brilho varrendo: SÓ em botões com .btn-shine (caixa da oferta). Roda só com .on (core.js põe quando está na tela) */
.btn-shine::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28) 50%,transparent);transform:translateX(-120%) skewX(-18deg);animation:g-sweep 3.8s ease-in-out infinite;animation-play-state:paused}
.btn-shine.on::after{animation-play-state:running}
@keyframes g-sweep{0%{transform:translateX(-120%) skewX(-18deg)}55%,100%{transform:translateX(330%) skewX(-18deg)}}
/* link discreto ao lado ou abaixo de um botão: <a class="mais-link" href="#proxima">ver o que vem <span aria-hidden="true">↓</span></a> */
.mais-link{display:inline-block;padding:8px 2px;font:500 13px/1.4 var(--fb);letter-spacing:0;color:var(--mut);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(255,170,130,.35);transition:color var(--d-ui) var(--e-out),text-decoration-color var(--d-ui) var(--e-out)}
.mais-link span{display:inline-block;margin-left:3px;color:var(--v1);transition:transform var(--d-ui) var(--e-out)}
.mais-link:hover{color:var(--tx);text-decoration-color:var(--v1)}
.mais-link:hover span{transform:translateY(3px)}
.mais-link:focus-visible{outline-offset:3px;border-radius:6px}
.btn + .mais-link{margin-left:22px}
.round{width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:rgba(255,255,255,.03);display:inline-grid;place-items:center;font-size:18px;transition:background var(--d-ui) var(--e-out),transform var(--d-ui) var(--e-out)}
.round:hover{background:rgba(255,106,43,.18)}
.round.big{width:56px;height:56px;background:linear-gradient(180deg,#ff8a3d,#e0401f);border:0;font-size:14px;box-shadow:0 10px 30px -8px var(--glow)}

/* ---------- reveal ao rolar ---------- */
/* uso: class="reveal" + style="--i:2" para escalonar (delay = i × 90ms). Nunca em h1. */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .9s var(--e-reveal);transition-delay:calc(var(--i,0)*90ms)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- header ---------- */
.top{position:relative;z-index:5;border-bottom:1px solid rgba(255,255,255,.05)}
.top-in{width:min(1360px,100%);margin-inline:auto;padding:28px 40px;display:flex;align-items:center;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-logo{display:block;height:46px;width:auto;margin:-6px 0 -6px -6px}
.brand-logo.sm{height:40px}
.brand-mark{width:38px;height:38px;display:block}.brand-mark svg{width:100%;height:100%}
.brand-mark.lg{width:64px;height:64px}
.brand-word{font-family:var(--fh);font-weight:800;font-size:21px;letter-spacing:-.01em}
.brand-word b{color:var(--v1)}
.brand-word i{font-style:normal;font-size:.62em;padding:3px 7px;border-radius:6px;background:var(--v3);vertical-align:.35em;margin-left:2px}

/* ---------- barra fixa de compra (só celular) ---------- */
.mbar{display:none}

/* ---------- só no computador / só no celular ---------- */
@media (min-width:761px){.so-celular{display:none!important}}
@media (max-width:760px){.so-desktop{display:none!important}}

/* ---------- helpers compartilhados ---------- */
.cam-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ========== RESPONSIVO GLOBAL (só regras globais; cada seção tem as suas no fim do próprio css) ========== */
@media (min-width:1600px){
  .wrap{width:min(1260px,calc(100% - var(--gutter)))}
}
@media (max-width:1050px){
  :root{--gutter:56px}
  body{font-size:14px}
  .top-in{padding:22px 28px}
  .sec-head.split{grid-template-columns:1fr;gap:18px}
}
@media (max-width:760px){
  :root{--gutter:36px}
  h2{font-size:34px;letter-spacing:-.045em;line-height:1.17}
  .sub{font-size:16px}
  .sec-head{margin-bottom:34px}
  .top-in{padding:12px 18px;justify-content:center}
  .brand-mark{width:32px;height:32px}
  .brand-word{font-size:18px}
  .btn{min-width:0;width:100%;gap:12px;padding:17px 20px;font-size:15px}
  .mbar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:50;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px 10px 16px;border-radius:16px;background:rgba(26,15,12,.96);border:1px solid var(--line2);box-shadow:0 12px 40px rgba(0,0,0,.5);opacity:0;transform:translateY(140%);transition:transform .4s var(--e-out),opacity .3s;pointer-events:none}
  .mbar.show{opacity:1;transform:none;pointer-events:auto}
  .mbar-tx{display:grid;gap:3px;min-width:0;line-height:1.2}
  .mbar small{font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--mut2)}
  .mbar b{font:700 14px/1.2 var(--fh);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--tx)}
  .mbar i{flex:none;font-style:normal;font-weight:800;font-size:14px;line-height:1.2;padding:13px 15px;border-radius:12px;color:#fff;background:linear-gradient(120deg,#ff9a55,#ff6a2b 45%,#d92a17);white-space:nowrap}
  .mbar i span{display:inline-block;margin-left:2px}
  .btn + .mais-link{margin-left:0}
  .mais-link{padding:12px 4px}
  .mbar:focus-visible{outline-offset:3px}
}
@media (max-width:380px){
  :root{--gutter:28px}
  .mbar{left:8px;right:8px;padding:8px 8px 8px 12px;gap:8px}
  .mbar b{font-size:12.5px}
  .mbar i{font-size:13px;padding:12px 11px}
}

/* ========== MOVIMENTO REDUZIDO (só o global; cada seção desenha o próprio quadro estático) ========== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .btn-shine::after{display:none}
  .btn:hover,.btn:active{transform:none}
  .live-dot{animation:none}
  .mbar{transition:none}
  .mais-link,.mais-link span{transition:none}
  .mais-link:hover span{transform:none}
}

/* logo oficial (imagem) */
@media (max-width:1050px){.brand-logo{height:42px}}
@media (max-width:760px){.brand-logo{height:38px;margin:-4px 0}.brand-logo.sm{height:36px}}