/* Atalho de Vendas: identidade (preto + amarelo placa de trânsito) e componentes da página de venda.
   Tokens do kit sobrescritos aqui. Fontes locais em /fonts. */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #0E0F12;
  --bg-2: #15171B;
  --card: #1A1C21;
  --line: rgba(255, 255, 255, .1);
  --text: #F7F4EE;
  --text-soft: rgba(247, 244, 238, .74);
  --accent: #FFC21A;
  --accent-2: #FFD34D;
  --on-accent: #15171B;
  --font-title: "Archivo", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 12px;
}

.h1, .h2, .btn, .card__n, .marca, .preco__valor, .tick { font-stretch: 76%; }
.h1 { font-weight: 900; line-height: .92; font-size: clamp(46px, 8.4vw, 104px); }
.h2 { font-weight: 850; line-height: .96; }
.h3 { font-family: var(--font-title); font-stretch: 88%; }
.btn { font-weight: 850; letter-spacing: .04em; }
.btn--lg { min-height: 62px; padding-inline: 32px; }

/* Topo */
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 800 17px/1 var(--font-title); letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.marca__sinal { width: 16px; height: 16px; background: var(--accent); transform: rotate(45deg); border-radius: 3px; flex: none; }
.topo.is-solid { background: rgba(14, 15, 18, .86); }
@media (max-width: 520px) { .marca { font-size: 14px; letter-spacing: .1em; } .topo .btn--sm { padding-inline: 14px; font-size: 13px; } }

/* Hero */
.hero2 { position: relative; padding: clamp(104px, 14vw, 150px) 0 clamp(48px, 7vw, 96px); overflow: hidden; }
.hero2::before { content: ""; position: absolute; width: 760px; height: 760px; right: -330px; top: -260px; background: var(--accent); opacity: .07; transform: rotate(45deg); border-radius: 60px; pointer-events: none; }
.hero2__in { display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) { .hero2__in { grid-template-columns: 1.15fr .85fr; gap: 56px; } }
.hero2 .lead { margin-top: 18px; }
.hero2 .lead b { color: var(--text); }
.cta-linha { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.selos { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; color: var(--text-soft); font-size: 14px; }
.selos span { display: inline-flex; align-items: center; gap: 8px; }
.selos svg { color: var(--accent); flex: none; }

/* Visual do hero: capa do kit + conversa */
.kitvis { position: relative; width: min(100%, 440px); margin-inline: auto; aspect-ratio: 440 / 520; }
.capa { position: absolute; left: 0; top: 0; width: 72%; aspect-ratio: 210 / 297; background: #15171B; border-radius: 6px 12px 12px 6px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.55), inset 6px 0 0 rgba(255,255,255,.04); transform: rotate(-4deg); border: 1px solid rgba(255,255,255,.08); }
.capa__placa { position: absolute; width: 74%; aspect-ratio: 1; right: -22%; top: 9%; background: var(--accent); transform: rotate(45deg); border-radius: 8%; box-shadow: 0 0 0 4px #15171B, 0 0 0 6px var(--accent); }
.capa__seta { position: absolute; width: 34%; right: 14%; top: 27%; }
.capa__marca { position: absolute; left: 8%; top: 7%; font: 800 9px/1 var(--font-title); letter-spacing: .2em; color: var(--accent); text-transform: uppercase; }
.capa__tit { position: absolute; left: 8%; bottom: 13%; font: 900 clamp(30px, 6.4vw, 44px)/.86 var(--font-title); font-stretch: 70%; text-transform: uppercase; color: #fff; }
.capa__tit small { display: block; font: 800 9px/1.2 var(--font-title); letter-spacing: .08em; color: var(--accent); margin-bottom: 8px; }
.capa__pe { position: absolute; left: 8%; bottom: 5%; font-size: 8px; color: #9C9A94; }
.zap { position: absolute; right: 0; bottom: 0; width: 70%; background: #ECE5DD; color: #111; border-radius: 18px; padding: 14px 12px 12px; box-shadow: 0 24px 50px rgba(0,0,0,.5); font-size: 13.5px; line-height: 1.35; }
.zap__topo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12px; color: #333; margin: 0 4px 10px; }
.zap__av { width: 22px; height: 22px; border-radius: 50%; background: #c9c3b8; }
.bolha { max-width: 88%; padding: 7px 10px; border-radius: 10px; margin-bottom: 6px; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.bolha--in { background: #fff; border-top-left-radius: 2px; }
.bolha--out { background: #D9FDD3; margin-left: auto; border-top-right-radius: 2px; }
.zap__tag { display: inline-block; margin: 2px 4px 0; font: 700 10px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; background: #15171B; color: var(--accent); padding: 5px 8px; border-radius: 6px; }

/* Faixa rolando */
.faixa { background: var(--accent); color: var(--on-accent); overflow: hidden; border-block: 1px solid rgba(0,0,0,.2); }
.faixa__trilho { display: flex; width: max-content; animation: rolar 38s linear infinite; }
.tick { display: inline-flex; align-items: center; gap: 22px; padding: 14px 22px 14px 0; font: 850 17px/1 var(--font-title); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.tick::after { content: ""; width: 8px; height: 8px; background: currentColor; transform: rotate(45deg); }
@keyframes rolar { to { transform: translateX(-50%); } }

/* Seções claras como respiro */
.sec--clara { background: #F7F4EE; color: #15171B; }
.sec--clara .lead, .sec--clara .card p { color: #4A4D54; }
.sec--clara .card { background: #fff; border-color: #E5E0D6; }
.sec--clara .card__n { color: rgba(21, 23, 27, .08); }
.sec--clara .eyebrow { color: #A97F00; }
.sec--clara .h2 em { color: #15171B; background: linear-gradient(transparent 58%, var(--accent) 58%); padding: 0 .06em; }
.sec--clara + .sec { padding-top: var(--sec-y); }
.sec + .sec--clara { margin-top: 0; }

/* Frases do público */
.frases { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.frases li { padding: 12px 16px; border-radius: 14px 14px 14px 3px; background: var(--card); border: 1px solid var(--line); font-weight: 600; }

/* Calculadora */
.calc { display: grid; gap: 18px; margin-top: 32px; padding: clamp(20px, 3vw, 32px); border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
@media (min-width: 900px) { .calc { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 36px; } }
.calc label { display: grid; gap: 8px; font-weight: 600; font-size: 15px; margin-bottom: 14px; }
.calc input { width: 100%; min-height: 52px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: #0E0F12; color: var(--text); font: 700 20px/1 var(--font-body); }
.calc input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.calc__res { padding: 24px; border-radius: 14px; background: var(--accent); color: var(--on-accent); }
.calc__res span { display: block; font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.calc__res strong { display: block; font: 900 clamp(44px, 6vw, 68px)/1 var(--font-title); font-stretch: 74%; margin: 8px 0 6px; }
.calc__res p { font-size: 15px; }
.calc__res .ano { font-weight: 700; }
.calc__aviso { font-size: 13px; color: var(--text-soft); margin-top: 12px; }

/* Por dentro: páginas */
.paginas { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 18px; margin-top: 28px; }
.paginas figure { flex: 0 0 min(62vw, 240px); scroll-snap-align: start; }
.paginas img { border-radius: 6px; box-shadow: 0 16px 34px rgba(0,0,0,.18); border: 1px solid #E5E0D6; background: #fff; }
.paginas figcaption { margin-top: 10px; font-weight: 700; font-size: 14px; }

/* Amostra de mensagem */
.amostras { display: grid; gap: 14px; margin-top: 28px; }
@media (min-width: 900px) { .amostras { grid-template-columns: 1fr 1fr; } }
.msg { border-radius: 12px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent); padding: 18px 20px; }
.msg__lbl { display: flex; justify-content: space-between; gap: 12px; font: 800 12px/1.2 var(--font-title); font-stretch: 88%; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 10px; }
.msg__lbl b { color: var(--accent); }
.msg p { white-space: pre-line; }
.ph { background: rgba(255, 194, 26, .16); color: var(--accent); border-radius: 4px; padding: 0 3px; font-weight: 600; }

/* Para quem é / não é */
.lado { display: grid; gap: 14px; margin-top: 28px; }
@media (min-width: 900px) { .lado { grid-template-columns: 1fr 1fr; } }
.lado .card h3 { display: flex; align-items: center; gap: 10px; }
.lado ul { display: grid; gap: 10px; margin-top: 14px; }
.lado li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.lado li svg { margin-top: 3px; }
.sim svg { color: #2FBF71; } .nao svg { color: #E5654B; }

/* Passos */
.passos3 { display: grid; gap: 14px; margin: 28px 0 32px; counter-reset: p; }
@media (min-width: 900px) { .passos3 { grid-template-columns: repeat(3, 1fr); } }
.passos3 li { counter-increment: p; position: relative; padding: 24px 24px 24px 76px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.passos3 li::before { content: counter(p); position: absolute; left: 22px; top: 22px; width: 38px; height: 38px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font: 900 20px/1 var(--font-title); border-radius: 8px; transform: rotate(45deg); }
.passos3 li::after { content: counter(p); position: absolute; left: 22px; top: 22px; width: 38px; height: 38px; display: grid; place-items: center; color: var(--on-accent); font: 900 20px/1 var(--font-title); }
.passos3 li::before { content: ""; }
.passos3 p { color: var(--text-soft); }

/* Quem criou */
.autor { display: grid; gap: 24px; align-items: center; margin-top: 28px; }
@media (min-width: 800px) { .autor { grid-template-columns: 240px 1fr; gap: 40px; } }
.autor img { width: 100%; max-width: 240px; border-radius: 16px; border: 3px solid var(--accent); }
.autor ul { display: grid; gap: 8px; margin-top: 16px; }
.autor li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.autor li::before { content: ""; width: 10px; height: 10px; margin-top: 8px; background: var(--accent); transform: rotate(45deg); }
.autor p + p { margin-top: 12px; }
.autor p { color: var(--text-soft); }

/* Oferta */
.oferta { max-width: 640px; margin: 32px auto 0; padding: clamp(24px, 4vw, 40px); border-radius: 18px; background: #15171B; border: 2px solid var(--accent); box-shadow: 0 30px 80px rgba(255, 194, 26, .08); }
.oferta__tit { font: 900 clamp(30px, 4vw, 44px)/.95 var(--font-title); font-stretch: 74%; text-transform: uppercase; }
.oferta ul { display: grid; gap: 10px; margin: 20px 0 24px; }
.oferta li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.oferta li svg { color: var(--accent); margin-top: 3px; }
.preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 6px; }
.preco__de { font-size: 15px; color: var(--text-soft); }
.preco__valor { font: 900 clamp(60px, 9vw, 84px)/1 var(--font-title); color: var(--accent); }
.preco__obs { color: var(--text-soft); font-size: 15px; margin-bottom: 22px; }
.oferta .btn { width: 100%; }
.garantia { display: grid; grid-template-columns: 54px 1fr; gap: 14px; align-items: center; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--text-soft); }
.garantia b { color: var(--text); }
.garantia__selo { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--accent); color: var(--accent); font: 900 20px/1 var(--font-title); }
.pagamento { margin-top: 14px; font-size: 13px; color: var(--text-soft); text-align: center; }

/* Barra fixa no celular */
.barra-fixa { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(14, 15, 18, .96); border-top: 1px solid var(--line); backdrop-filter: blur(10px); transform: translateY(110%); transition: transform .35s var(--ease); }
.barra-fixa.is-on { transform: none; }
.barra-fixa div { font-size: 13px; line-height: 1.25; color: var(--text-soft); }
.barra-fixa b { display: block; color: var(--text); font-size: 15px; }
.barra-fixa .btn { min-height: 48px; padding: 10px 18px; font-size: 14px; }
@media (min-width: 961px) { .barra-fixa { display: none; } }
@media (max-width: 960px) { .rodape { padding-bottom: 96px; } .cookies { bottom: 84px; } }

/* FAQ e CTA final */
.cta-final { text-align: center; }
.cta-final .lead { margin-inline: auto; }
.rodape small { display: block; margin-top: 10px; color: var(--text-soft); font-size: 12.5px; line-height: 1.5; }

/* Títulos sem hifenização automática */
.h1, .h2, .h3 { hyphens: manual; -webkit-hyphens: manual; }
@media (max-width: 400px) { .h1 { font-size: 44px; } }

/* Título do hero mais longo (frase que explica o produto): tamanho menor para caber e ler fácil */
.hero2 .h1 { font-size: clamp(38px, 5.4vw, 74px); line-height: .95; }
@media (max-width: 400px) { .hero2 .h1 { font-size: 38px; } }
.sec--curta { padding-top: clamp(16px, 3vw, 32px); }
/* Títulos de card mais longos não encostam no número grande do canto */
.card__n ~ .h3 { padding-right: 52px; }