/* LP Amostra Grátis Topway · tokens visuais (21/10/2026)
   Espelho do sistema da SuperCoffee (lp-sampling.css da Caffeine Army) traduzido para a marca Topway.
   Base: identidade das LPs de oferta (topway-ofertas/assets/css/lp.css). Acentos: embalagens dos sachês.
   Contraste conferido (WCAG 2.x) ao lado de cada par usado; ver design.md, seção "Tokens". */

@font-face{font-family:"Archivo";src:url(../fonts/archivo-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Montserrat";src:url(../fonts/montserrat-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
/* Archivo daqui só tem eixo de peso (sem largura): o "itálico" dos títulos é sintético (font-synthesis). */

:root{
  color-scheme:only light;

  /* ---------- Cor: base Topway ---------- */
  --ink:#221F1F;          /* tinta Topway: títulos e texto forte em fundo claro (16,4:1 no branco) */
  --ink-2:#4F534F;        /* texto corrido em fundo claro (6,9:1 no creme) */
  --mute:#62665F;         /* notas, legendas (5,9:1 no branco, 5,1:1 no creme, 4,6:1 no creme-2). Era #6B6F6A: 4,47:1 no creme, reprovava AA (QA 21/10). NÃO usar o #7C817B do lp.css */
  --line:#E3E7E1;         /* divisórias em fundo branco */
  --panel:#F5F7F4;        /* painel neutro Topway */
  --bg:#FFFFFF;

  /* ---------- Cor: compra (regra Topway: verde só no botão de compra) ---------- */
  --buy:#16A34A;          /* branco em cima = 3,3:1 -> só com rótulo "grande" (>= 19px peso 700+), ver --btn-fs */
  --buy-hover:#12873D;
  --buy-ink:#0F7A37;      /* texto verde em fundo claro, ex.: "Frete fixo" ok (5,4:1) */
  --buy-glow:rgba(22,163,74,.55);

  /* ---------- Cor: acentos das embalagens ---------- */
  /* Turbo: preto do sachê + amarelo da faixa lateral. Faz o papel do marrom #260F0F + dourado #F1D98A da SuperCoffee */
  --noite:#141414;        /* fundo do hero, faixa de preço, FAQ, barra fixa (branco 18,4:1) */
  --noite-2:#1E1C1B;      /* cartões/itens sobre --noite (FAQ fechado) */
  --noite-3:#2A2622;      /* FAQ aberto, linha de passos no celular */
  --noite-borda:#4A4540;  /* borda de item sobre --noite */
  --turbo:#E0A40C;        /* amarelo Turbo: R$ 0,00, tags, toggle do FAQ, estrelas. 8,3:1 no --noite; tinta sobre ele 7,4:1 */
  --turbo-soft:#FFF3D1;   /* fundo de tag/realce em seção clara (tinta em cima 14,8:1) */
  --turbo-ink:#7A5600;    /* amarelo escurecido para texto em fundo claro (5,8:1 no creme) */
  /* Whey: branco + marrom da etiqueta de sabor (Cookies / Coco com Baunilha) */
  --whey:#6B4A35;         /* marrom: eyebrow, ícone, borda ativa do seletor em fundo claro (6,9:1 no creme; branco em cima 7,9:1) */
  --whey-soft:#EFE3D6;    /* fundo do card de sabor do whey no seletor */
  /* Top Coffee: creme do sachê. Faz o papel do --lp-soft #F7EAE1 da SuperCoffee */
  --creme:#F6EFE4;        /* seções claras alternadas (ciência, momentos, fechamento) */
  --creme-2:#EFE3CF;      /* cartão sobre creme / fundo do sachê Top Coffee no seletor */
  --cajuba:#C8102E;       /* vermelho do selo Cajubá: só enfeite em ilustração, nunca em texto ou botão */

  /* Fundos do seletor "toque para conhecer" (um por sachê, como os pastéis da SuperCoffee) */
  --sabor-coffee:#F3EADB;
  --sabor-turbo:#1E1C1B;
  --sabor-turbo-fv:#2A1A1D;
  --sabor-whey-cookies:#EFE3D6;
  --sabor-whey-coco:#F1ECE4;

  /* Brilho/textura do hero (equivale ao .lp-hero__glow marrom da referência) */
  --glow:rgba(224,164,12,.16);
  --glow-2:rgba(255,255,255,.06);
  --overlay-banner:linear-gradient(90deg,rgba(20,20,20,.72) 0%,rgba(20,20,20,.35) 42%,rgba(20,20,20,0) 60%);
  --overlay-banner-m:linear-gradient(180deg,rgba(20,20,20,.62) 0%,rgba(20,20,20,0) 46%);
  --fecho-bg:linear-gradient(165deg,#141414 55%,#1F1A10 72%,#5A4106 100%); /* no lugar do degradê vermelho da Black */

  /* ---------- Tipografia ---------- */
  --f-title:"Archivo",system-ui,sans-serif;
  --f-body:"Montserrat",system-ui,sans-serif;
  /* Títulos: Archivo 900, itálico, caixa alta, entreletra negativa (a referência usa Acumin ExtraCondensed;
     Archivo é mais larga, então cada tamanho é ~70% do da referência para caber nas mesmas linhas) */
  --title-w:900;
  --title-ls:-.025em;
  --title-lh:1.02;
  --fs-hero:clamp(34px,4.4vw + 17px,60px);   /* ref 48 -> 72 */
  --fs-h2:clamp(28px,2.2vw + 19px,44px);     /* ref 36 -> 48 */
  --fs-h3:clamp(18px,.5vw + 16px,22px);      /* títulos de passo/cartão (Montserrat 700, sem itálico) */
  --fs-price:clamp(32px,2vw + 24px,48px);    /* caixa tracejada R$ 49,60 -> R$ 0,00 */
  --fs-banner:clamp(34px,4vw + 18px,72px);
  --fs-eyebrow:clamp(12px,.3vw + 11px,14px); /* Archivo 700, caixa alta, .14em */
  --fs-body:16px;                            /* ref 16 no celular, 18-20 no computador */
  --fs-lead:clamp(16px,.4vw + 14.5px,18px);
  --fs-small:14px;
  --fs-note:12.5px;
  --lh-body:1.55;

  /* ---------- Espaçamento (base 4) ---------- */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-10:40px;--s-12:48px;--s-16:64px;--s-22:88px;
  --gut:16px;                                 /* referência e regra do pedido: 16 px no celular */
  --gut-d:clamp(16px,6vw - 20px,56px);        /* respiro lateral no computador (ref 56) */
  --wrap:1200px;                              /* conteúdo; a referência vai a 1440 com 56 de padding */
  --wrap-texto:600px;                         /* FAQ, regras (ref 594) */
  --col-m:560px;                              /* coluna central no tablet (ref e topway-ofertas) */
  --sec:clamp(48px,3vw + 38px,88px);          /* respiro de seção: ref 32-64 no celular, 64-88 no computador */
  --h2-gap:clamp(20px,1vw + 16px,32px);
  --topo:90px;                                /* faixa 36 + cabeçalho 54 */
  --hero-k:428px;                             /* tudo que a 1ª dobra do celular mostra fora a foto do kit (ver design.md §2) */

  /* ---------- Raios (a referência é mais reta que a Topway: 4/8/12/16) ---------- */
  --r-xs:4px;     /* seletor de sabor, item do FAQ, tag */
  --r-sm:8px;     /* botões, fotos, cartões de depoimento */
  --r-md:12px;    /* caixa tracejada de preço */
  --r-lg:16px;    /* cartão "como funciona", banner, topo da barra fixa */
  --r-pill:999px; /* nota de avaliação, selo sobre o botão da barra */

  /* ---------- Sombras ---------- */
  --sh-1:0 1px 2px rgba(34,31,31,.06),0 8px 24px rgba(34,31,31,.06);
  --sh-card:0 4px 10px rgba(0,0,0,.18);                                       /* mão com sachê / sachê solto */
  --sh-bar:0 -1px 3px rgba(0,0,0,.05),0 -20px 25px -5px rgba(0,0,0,.18);      /* barra fixa */
  --sh-buy:0 10px 24px -10px var(--buy-glow);

  /* ---------- Botões ---------- */
  /* A referência usa botão de canto 8px, peso 500, sem caixa alta. Aqui: canto 8px igual, mas Archivo 800 e
     19px para o branco no verde passar como texto grande (AA 3:1). */
  --btn-h:56px;--btn-h-m:54px;--btn-h-bar:52px;
  --btn-px:32px;
  --btn-r:var(--r-sm);
  --btn-fs:19px;
  --btn-fw:800;
  --btn-ls:.01em;

  /* ---------- Movimento ---------- */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:.15s;--t:.25s;
}

/* Componentes-base que dependem só dos tokens (o index.html pode usar ou reescrever) */
.t-title{font:italic var(--title-w) var(--fs-h2)/var(--title-lh) var(--f-title);letter-spacing:var(--title-ls);text-transform:uppercase;color:var(--ink);text-wrap:balance;font-synthesis:style}
.t-eyebrow{font:700 var(--fs-eyebrow)/1.2 var(--f-title);letter-spacing:.14em;text-transform:uppercase;color:var(--whey)}
.t-eyebrow--inv{color:#fff}
.btn-buy{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--btn-h);padding:0 var(--btn-px);border:0;border-radius:var(--btn-r);
  background:var(--buy);color:#fff;font:var(--btn-fw) var(--btn-fs)/1 var(--f-title);letter-spacing:var(--btn-ls);white-space:nowrap;text-decoration:none;cursor:pointer;
  box-shadow:var(--sh-buy);transition:background var(--t-fast),transform var(--t-fast)}
.btn-buy:hover{background:var(--buy-hover);transform:translateY(-1px)}
.btn-buy:focus-visible{outline:3px solid var(--turbo);outline-offset:3px}
.cta-nota{font:600 var(--fs-note)/1.4 var(--f-body);letter-spacing:.04em;text-transform:uppercase;color:var(--mute);text-align:center}
.on-noite .cta-nota{color:#C9C3B8}  /* 10,5:1 no --noite */
.tag{display:inline-flex;align-items:center;padding:5px 10px;border-radius:var(--r-xs);background:var(--turbo);color:var(--ink);font:800 12px/1 var(--f-title);letter-spacing:.08em;text-transform:uppercase}
@media (max-width:959px){.btn-buy{height:var(--btn-h-m)}}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}