/* KS — páginas públicas: os dois produtos, a Rede de Divulgação e os simuladores.
   Complementa site.css (mesmos tokens de base.css). */

/* ---------- herói da home com dois produtos ---------- */
.hero h1.duplo { max-width: 13ch; font-size: clamp(42px, 5.8vw, 78px); }
.btn-ghost-dark { background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24); }
.btn-ghost-dark:hover { box-shadow: inset 0 0 0 1px #fff; }
.demo-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); margin-bottom: 14px; position: relative; z-index: 2; }
.demo-tabs button { appearance: none; border: 0; background: none; color: #b8c4d6; font: 600 13.5px var(--body); padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: background-color 200ms ease, color 200ms ease; }
.demo-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); }
.demo-tabs button:focus-visible { outline: 2px solid var(--cyan-300); outline-offset: 2px; }
.msg.ad { padding: 0; overflow: hidden; }
.msg.ad .ad-rot { display: block; padding: 8px 12px 0; font-size: 12px; font-weight: 600; color: #1f5f8f; }
.msg.ad .ad-capa { margin: 8px 0 0; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #ff5e62, #ff9966); display: grid; place-items: center; color: #fff; font: 800 18px var(--display); letter-spacing: -0.01em; text-align: center; padding: 10px; }
.msg.ad .ad-txt { display: block; padding: 8px 12px 6px; }
.msg.ad time { padding: 0 12px 8px; }
.kb button.verde { background: #1fa463; color: #fff; }
.kb button.azul { background: #2f6ee0; color: #fff; }
.kb button.rodape { background: rgba(255, 255, 255, 0.6); color: #50677f; font-size: 12px; }
.msg.membro b { display: block; font-size: 12px; color: #c0612b; margin-bottom: 2px; }
.msg.membro:nth-of-type(3n) b { color: #2a7ab8; }
.receipt.alcance .receipt-head b { color: var(--signal); }

/* ---------- os dois produtos ---------- */
.produtos { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; margin-top: 48px; }
.produto { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 16px; padding: clamp(24px, 3vw, 40px); border-radius: 24px; background: var(--card); box-shadow: 0 0 0 1px var(--line), var(--shadow); overflow: hidden; isolation: isolate; text-decoration: none; color: inherit; }
.produto.escuro { background: var(--forest); color: #fff; box-shadow: var(--shadow-lg); }
.produto .etq { display: inline-flex; align-items: center; gap: 8px; font: 600 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--signal); }
.produto.escuro .etq { color: var(--cyan-300); }
.produto h3 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.03em; max-width: 14ch; }
.produto p { color: var(--ink-2); max-width: 46ch; }
.produto.escuro p { color: #b8c4d6; }
.produto ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; }
.produto li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15.5px; }
.produto li svg { width: 20px; height: 20px; color: var(--signal); margin-top: 2px; }
.produto.escuro li svg { color: var(--cyan-300); }
.produto .rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.produto.escuro .rodape { border-top-color: rgba(255, 255, 255, 0.1); }
.produto .preco { font-size: 14px; color: var(--ink-3); }
.produto .preco b { font: 600 18px var(--mono); color: var(--ink); letter-spacing: -0.02em; }
.produto.escuro .preco { color: #94a3b8; } .produto.escuro .preco b { color: #fff; }
.produto canvas { position: absolute; right: -20%; top: -18%; width: 78%; height: 78%; z-index: -1; opacity: 0.55; pointer-events: none; }
.monetiza-faixa { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; margin-top: 20px; padding: 20px 24px; border-radius: 20px; background: linear-gradient(120deg, #eef4ff, #e8fbfd); box-shadow: inset 0 0 0 1px rgba(30, 99, 255, 0.16); text-decoration: none; color: inherit; transition: box-shadow 200ms ease; }
.monetiza-faixa:hover { box-shadow: inset 0 0 0 1px var(--signal); }
.monetiza-faixa .big { font: 800 clamp(30px, 3.4vw, 44px)/1 var(--display); letter-spacing: -0.03em; color: var(--signal); white-space: nowrap; }
.monetiza-faixa strong { display: block; font: 700 19px/1.25 var(--display); letter-spacing: -0.015em; }
.monetiza-faixa .txt > span { display: block; color: var(--ink-2); font-size: 15px; margin-top: 4px; }
.monetiza-faixa .seta { width: 44px; height: 44px; border-radius: 50%; background: var(--signal); color: #fff; display: grid; place-items: center; }
.monetiza-faixa .seta svg { width: 20px; height: 20px; }
@media (max-width: 900px) { .produtos { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .monetiza-faixa { grid-template-columns: 1fr auto; } .monetiza-faixa .big { grid-column: 1 / -1; } }

/* ---------- seção escura da rede ---------- */
.rede-sec-escura { position: relative; overflow: hidden; background: var(--forest); color: #fff; padding: clamp(72px, 10vw, 128px) 0; }
.rede-sec-escura::before { content: ""; position: absolute; inset: auto -10% -40% 30%; height: 80%; background: radial-gradient(closest-side, rgba(30, 99, 255, 0.35), transparent); pointer-events: none; }
.rede-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.rede-sec-escura h2 { font-size: clamp(34px, 4.4vw, 58px); max-width: 15ch; }
.rede-sec-escura h2 em { font-style: normal; color: var(--cyan-300); }
.rede-sec-escura .lede { color: #b8c4d6; }
.rede-viz-box { position: relative; aspect-ratio: 1; width: 100%; max-width: 560px; justify-self: center; }
.rede-viz-box canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 900ms ease; }
.rede-viz-box canvas.pronto { opacity: 1; }
.rede-viz-box .etiqueta { position: absolute; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.92); color: var(--ink); font-size: 13px; box-shadow: var(--shadow-lg); line-height: 1.25; }
.rede-viz-box .etiqueta b { display: block; font: 600 15px var(--mono); letter-spacing: -0.02em; }
.rede-viz-box .e1 { left: 0; top: 16%; } .rede-viz-box .e2 { right: 0; bottom: 18%; }
.rede-passos-pub { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 18px; counter-reset: p; }
.rede-passos-pub li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; counter-increment: p; }
.rede-passos-pub li::before { content: counter(p); width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); color: var(--cyan-300); font: 600 15px var(--mono); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.rede-passos-pub strong { display: block; font-size: 17px; }
.rede-passos-pub span { color: #94a3b8; font-size: 15px; }
.rede-sec-escura .actions { margin-top: 32px; }
.rede-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.rede-numeros div { padding: 20px 16px 20px 0; }
.rede-numeros div + div { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, 0.12); }
.rede-numeros b { display: block; font: 500 clamp(20px, 2.1vw, 30px)/1.05 var(--mono); letter-spacing: -0.03em; color: #fff; white-space: nowrap; }
.rede-numeros span { font-size: 13.5px; color: #94a3b8; }
.rede-numeros.claro { border-color: var(--line-strong); }
.rede-numeros.claro div + div { border-left-color: var(--line-strong); }
.rede-numeros.claro b { color: var(--ink); } .rede-numeros.claro span { color: var(--ink-3); }
@media (max-width: 900px) { .rede-grid { grid-template-columns: 1fr; } .rede-viz-box { max-width: 420px; } }
@media (max-width: 640px) { .rede-numeros { grid-template-columns: 1fr 1fr; } .rede-numeros div:nth-child(3) { padding-left: 0; border-left: 0; } .rede-numeros div:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.12); } .rede-numeros.claro div:nth-child(n + 3) { border-top-color: var(--line-strong); } }

/* ---------- páginas de produto ---------- */
.lp-hero { position: relative; padding: clamp(40px, 6vw, 80px) 0 clamp(48px, 7vw, 96px); overflow: hidden; }
.lp-hero.escuro { background: var(--forest); color: #fff; }
.lp-hero .lp-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.lp-hero h1 { font-size: clamp(40px, 5.6vw, 74px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; max-width: 14ch; }
.lp-hero h1 em { font-style: normal; color: var(--cyan-300); }
.lp-hero .lede { color: inherit; opacity: 0.86; font-size: clamp(17px, 1.5vw, 19px); }
.lp-hero.escuro .crumbs, .lp-hero.escuro .crumbs a { color: #94a3b8; }
.lp-hero .actions { margin-top: 28px; }
.lp-hero .selos { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 24px; padding: 0; list-style: none; font-size: 14.5px; }
.lp-hero .selos li { display: inline-flex; align-items: center; gap: 8px; }
.lp-hero .selos svg { width: 18px; height: 18px; color: var(--cyan-300); }
@media (max-width: 900px) { .lp-hero .lp-grid { grid-template-columns: 1fr; } }

.recursos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 48px; border-top: 2px solid var(--ink); }
.recursos > div { padding: 28px 28px 28px 0; border-bottom: 1px solid var(--line-strong); }
.recursos > div:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--line-strong); }
.recursos h3 { font-size: 22px; letter-spacing: -0.02em; }
.recursos p { margin-top: 8px; color: var(--ink-2); font-size: 16px; max-width: 46ch; }
.recursos .ic { width: 40px; height: 40px; border-radius: 12px; background: #e6eeff; color: var(--signal); display: grid; place-items: center; margin-bottom: 14px; }
.recursos .ic svg { width: 20px; height: 20px; }
@media (max-width: 760px) { .recursos { grid-template-columns: 1fr; } .recursos > div:nth-child(even) { padding-left: 0; border-left: 0; } }

.anuncio-mock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .anuncio-mock { grid-template-columns: 1fr; } }
.tg-mock { border-radius: 28px; padding: 12px; background: var(--ink); box-shadow: var(--shadow-lg); max-width: 360px; justify-self: center; width: 100%; }
.tg-mock .tela { border-radius: 20px; overflow: hidden; background: #cfdbe6; }
.tg-mock .topo { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; }
.tg-mock .topo .av { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #f97316, #ef4444); color: #fff; display: grid; place-items: center; font: 700 14px var(--display); }
.tg-mock .topo strong { display: block; font-size: 14.5px; }
.tg-mock .topo small { color: var(--ink-3); font-size: 12px; }
.tg-mock .corpo { padding: 14px; display: grid; gap: 6px; }
.tg-mock .bolha { background: #fff; border-radius: 14px 14px 14px 4px; overflow: hidden; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); font-size: 14px; line-height: 1.45; }
.tg-mock .bolha .rot { display: block; padding: 8px 12px 0; font-size: 12px; font-weight: 600; color: #1f5f8f; }
.tg-mock .bolha .capa { aspect-ratio: 16 / 10; margin-top: 8px; display: grid; place-items: center; color: #fff; font: 800 22px/1.1 var(--display); text-align: center; padding: 16px; background: linear-gradient(135deg, #4855dc, #28a0e6); }
.tg-mock .bolha p { padding: 8px 12px 10px; }
.tg-mock .botoes { display: grid; gap: 4px; }
.tg-mock .botoes .lin { display: flex; gap: 4px; }
.tg-mock .botoes span { flex: 1; text-align: center; padding: 9px; border-radius: 10px; font-weight: 600; font-size: 13.5px; background: rgba(255, 255, 255, 0.78); color: #1f5f8f; }
.tg-mock .botoes span.verde { background: #1fa463; color: #fff; } .tg-mock .botoes span.azul { background: #2f6ee0; color: #fff; } .tg-mock .botoes span.vermelho { background: #d6455a; color: #fff; }
.tg-mock .botoes span.rodape { background: rgba(255, 255, 255, 0.55); color: #50677f; font-weight: 500; font-size: 12.5px; }

.simulador { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 0; border-radius: 24px; overflow: hidden; box-shadow: 0 0 0 1px var(--line), var(--shadow); background: var(--card); margin-top: 40px; }
.simulador .entra { padding: clamp(24px, 3vw, 40px); display: grid; gap: 22px; align-content: start; }
.simulador .sai { padding: clamp(24px, 3vw, 40px); background: var(--forest); color: #fff; display: grid; gap: 14px; align-content: center; }
.simulador label.campo { display: grid; gap: 10px; font-weight: 600; font-size: 15px; }
.simulador label.campo output { font: 500 22px var(--mono); letter-spacing: -0.02em; color: var(--signal); }
.simulador input[type="range"] { width: 100%; accent-color: var(--signal); height: 28px; }
.simulador .escala { display: flex; justify-content: space-between; font: 500 12px var(--mono); color: var(--ink-3); }
.simulador .sai .rot { font: 600 12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan-300); }
.simulador .sai .grande { font: 500 clamp(30px, 3.6vw, 46px)/1.05 var(--mono); letter-spacing: -0.03em; }
.simulador .sai p { color: #b8c4d6; font-size: 14.5px; }
.simulador .sai .linha2 { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 14.5px; color: #cbd5e1; }
.simulador .sai .linha2 b { font-family: var(--mono); color: #fff; font-weight: 500; }
@media (max-width: 860px) { .simulador { grid-template-columns: 1fr; } }

.faixas-pub { list-style: none; margin: 32px 0 0; padding: 0; display: grid; border-top: 2px solid var(--ink); }
.faixas-pub li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line-strong); }
.faixas-pub .em { font-size: 24px; }
.faixas-pub strong { font: 700 20px var(--display); letter-spacing: -0.02em; }
.faixas-pub .pts { color: var(--ink-3); font: 500 13px var(--mono); }
.faixas-pub b { font: 500 24px var(--mono); letter-spacing: -0.03em; color: var(--signal); min-width: 4ch; text-align: right; }

.protege { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 28px; }
.protege li { display: grid; gap: 8px; align-content: start; }
.protege svg { width: 26px; height: 26px; color: var(--signal); }
.protege strong { font-size: 18px; letter-spacing: -0.01em; }
.protege p { color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 900px) { .protege { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .protege { grid-template-columns: 1fr; } }

.cruzado { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 24px 28px; border-radius: 20px; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.cruzado h3 { font-size: 22px; letter-spacing: -0.02em; }
.cruzado p { color: var(--ink-2); margin-top: 6px; font-size: 15.5px; }
@media (max-width: 640px) { .cruzado { grid-template-columns: 1fr; } }
.lp-faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); }
.lp-faq dl { margin: 0; }
.lp-faq dt { font: 700 19px/1.3 var(--display); letter-spacing: -0.015em; padding-top: 20px; border-top: 1px solid var(--line-strong); }
.lp-faq dt:first-child { padding-top: 0; border-top: 0; }
.lp-faq dd { margin: 8px 0 20px; color: var(--ink-2); }
@media (max-width: 860px) { .lp-faq { grid-template-columns: 1fr; } }
.kb button.verde, .kb button.azul, .kb button.rodape { grid-column: 1 / -1; }
.hero-pill b { white-space: nowrap; flex: none; }