/* ============================================================
   Beni — micro design system
   Tokens extraídos 1:1 do jota.ai/pix-whatsapp (tipografia, espaçamento,
   raio, borda, sombra), com o AMARELO substituído por um acento único (--accent).
   Fonte-alvo deles: Aeonik (paga). Usamos General Sans (Fontshare, grátis),
   o lookalike mais próximo. Licenciou Aeonik? Troque só o --font.
   ============================================================ */

@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');

:root{
  /* fonte */
  --font:"General Sans","Aeonik","Helvetica Neue",Arial,sans-serif;

  /* superfícies */
  --bg:#FFFFFF;
  --card:#FFFFFF;
  --warm:#F5F3EF;      /* off-white quente p/ seções alternadas */
  --warm-2:#EFE9DA;

  /* tinta (texto) */
  --ink:#17150F;       /* títulos / texto forte */
  --ink-soft:#57523F;  /* corpo */
  --ink-faint:#8A8470; /* legendas */

  /* linhas / bordas (sempre rgba da tinta, bem sutil) */
  --line:rgba(23,21,15,.12);
  --line-soft:rgba(23,21,15,.07);

  /* ACENTO — no espírito do amarelo VIVO do Jota, mas quente/brasileiro.
     Truque do Jota: texto ESCURO sobre o acento (não branco). Mantém vivo sem berrar.
     Troque AQUI pra mudar a marca. Alternativas quentes (nada de cor fria):
       coral:      --accent:#F5531E; --accent-deep:#DB4614; --accent-ink:#B83808;
       vermelhão:  --accent:#E5482B; --accent-deep:#C93A20; --accent-ink:#A82F18;
       verde-vivo: --accent:#00A868; --accent-deep:#008D57; --accent-ink:#00744A; (curinga) */
  --accent:#FAA352;       /* laranja suave (cor da logo) */
  --accent-deep:#E98B34;  /* variação mais funda */
  --accent-ink:#B96716;   /* acento em TEXTO sobre fundo claro (passa contraste) */
  --on-accent:#17150F;    /* texto sobre o acento: escuro, estilo Jota */

  /* layout */
  --maxw:1126px;
  --gutter:clamp(20px,4.5vw,40px);
  --sec-pad:clamp(72px,9vw,120px);
  --gap-grid:clamp(16px,2.8vw,40px);
  --head-gap:clamp(36px,5vw,56px);
  --nav-h:80px;

  /* raio */
  --r:28px;            /* cards / blocos */
  --r-sm:16px;         /* itens menores */
  --r-pill:999px;      /* botões / tags */

  /* tipografia (fluida, escala do Jota) */
  --t-display-1:clamp(44px,6.2vw,88px);
  --t-display-2:clamp(36px,4.6vw,60px);
  --t-display-3:clamp(28px,3.4vw,44px);
  --t-heading:clamp(20px,1.9vw,24px);
  --t-body-lg:clamp(17px,1.4vw,20px);
  --t-body:16px;
  --t-label:14px;
  --t-caption:12px;

  /* sombra (discreta, quente, em camadas — uso raro) */
  --shadow-soft:0 8px 24px rgba(23,21,15,.18);
  --shadow-lift:0 28px 64px -28px rgba(23,21,15,.4),0 2px 8px rgba(23,21,15,.05);
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  font-family:var(--font);
  font-size:var(--t-body);
  line-height:1.55;
  color:var(--ink-soft);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* container */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- nav (barra full-width; conteúdo alinhado ao container) ---------- */
.nav{border-bottom:1px solid var(--line-soft)}   /* a barra/linha atravessa a tela inteira */
.nav-inner{
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
}
.nav .brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);font-size:var(--t-heading);letter-spacing:-.01em;text-decoration:none}
.nav .brand-mark{width:30px;height:30px;display:block}

/* ---------- tipografia ---------- */
h1,h2,h3{color:var(--ink);font-weight:600;line-height:1.05;letter-spacing:-.02em}
.display-1{font-size:var(--t-display-1);font-weight:700}
.display-2{font-size:var(--t-display-2)}
.display-3{font-size:var(--t-display-3)}
.heading{font-size:var(--t-heading);letter-spacing:-.01em;line-height:1.2}
.lead{font-size:var(--t-body-lg);color:var(--ink-soft);line-height:1.5}
.label{font-size:var(--t-label);font-weight:500}
.caption{font-size:var(--t-caption);color:var(--ink-faint)}
.eyebrow{
  font-size:var(--t-label);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);   /* label em cinza quente, como o Jota — acento NÃO vai em texto de label */
}
strong{color:var(--ink);font-weight:600}
.strike{color:var(--ink-faint);text-decoration:line-through;text-decoration-thickness:1px}

/* ---------- seções ---------- */
section{padding-block:var(--sec-pad)}
.alt{background:var(--warm)}
.center{text-align:center}
.measure{max-width:62ch}      /* medida de leitura, ancorada à esquerda (padrão Jota) */
.measure-sm{max-width:48ch}
.sec-head{margin-bottom:var(--head-gap)}
.stack>*+*{margin-top:1.1rem}

/* ---------- hero (alinhado à ESQUERDA, como o Jota) ---------- */
.hero{padding-block:clamp(56px,8vw,112px)}
.hero .display-1{max-width:15ch}
.hero .lead{margin:1.4rem 0 2.2rem;max-width:44ch;font-size:clamp(16px,1.2vw,18px)}

/* ---------- botões (pílula; sem borda, exceto o ghost) ---------- */
.btn{
  display:inline-block;font-family:inherit;font-weight:600;font-size:var(--t-label);
  padding:14px 26px;border-radius:var(--r-pill);border:0;cursor:pointer;
  text-decoration:none;transition:background .15s,transform .05s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);color:#fff}   /* botão PRETO, como o Jota — acento nunca vai em botão */
.btn-primary:hover{background:#000}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-row{display:flex;gap:12px;justify-content:flex-start;flex-wrap:wrap}
.hero .btn-row{justify-content:flex-start}

/* ---------- cards (borda sutil; SEM sombra por padrão) ---------- */
.grid{display:grid;gap:var(--gap-grid);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(24px,3vw,36px);
}
.card .heading{margin-bottom:.6rem}
/* card em destaque (o ÚNICO com sombra — preço/fundador) */
.card-hi{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(28px,3.4vw,44px);
  box-shadow:var(--shadow-lift);
  text-align:left;
}

/* tag / pílula de destaque */
.tag{
  display:inline-block;font-size:var(--t-caption);font-weight:600;letter-spacing:.04em;
  padding:6px 12px;border-radius:var(--r-pill);
  background:var(--warm-2);color:var(--ink-soft);
}
.tag-accent{background:var(--accent);color:var(--on-accent)}

/* preço */
.price{display:flex;align-items:baseline;gap:12px;justify-content:flex-start;margin:.6rem 0 1.4rem}
.price .now{font-size:var(--t-display-2);font-weight:700;color:var(--ink)}
.price .per{font-size:var(--t-body);color:var(--ink-faint)}

/* listas de benefícios (marcador com o acento, sem bullets) */
.benefits{list-style:none}
.benefits li{position:relative;padding-left:28px;margin-top:.7rem;color:var(--ink-soft)}
.benefits li::before{
  content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;
  border-radius:var(--r-pill);background:var(--accent);
}
.soon li::before{background:var(--line)}

/* faixa de destaque de texto (a "verdade") */
.quoteblock .display-3{max-width:20ch}

/* form / CTA final */
.cta-final{text-align:left}
.field{
  display:block;width:min(420px,100%);margin:10px 0;
  padding:14px 18px;font-family:inherit;font-size:var(--t-body);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink);
}
.microcopy{color:var(--ink-faint);font-size:var(--t-caption);margin-top:.8rem}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line-soft);padding-block:40px;text-align:left}
footer .caption{color:var(--ink-faint)}

/* divisor sutil entre seções de mesmo fundo */
.rule{height:1px;background:var(--line-soft);border:0;margin:0}