/* /conheca — direção de arte (ver FICHA.md): "a mensagem que não fica esperando".
   Escuro e sério; o limão só no que importa. A base (estudio/base.css) cuida do resto.
   17/10: cores alinhadas às outras páginas do site (index.html, planos.html) — o dono achou o
   verde forte demais: limão #aef85c, botão em degradê limão→verde e brilho de fundo bem leve. */

:root {
  --cor-superficie: rgb(255 255 255 / 0.045);
  --cor-borda: rgb(183 220 199 / 0.18);
  --cor-borda-verde: #2aa165;
  --cor-verde-claro: #3ade85;
  --cor-chat: #0b1a13;
}

body {
  background:
    radial-gradient(1200px 620px at 50% -8%, rgb(23 202 140 / 0.14), transparent 62%),
    radial-gradient(900px 500px at 100% 12%, rgb(174 248 92 / 0.07), transparent 55%),
    var(--cor-fundo);
  background-attachment: fixed;
}

/* botões iguais aos do site */
.botao {
  background: linear-gradient(90deg, var(--cor-destaque), var(--cor-verde-claro));
  color: var(--cor-sobre-primaria);
  box-shadow: 0 10px 30px rgb(76 208 125 / 0.25);
}
.botao:hover { box-shadow: 0 16px 40px rgb(76 208 125 / 0.4); }
.botao.secundario { background: rgb(255 255 255 / 0.05); color: var(--cor-texto); box-shadow: none; border: 1px solid var(--cor-borda-verde); }

a { color: var(--cor-texto); }

/* ---------------------------------------------------------------- topo */
.topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; }
.marca { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; font-weight: 800; font-size: 1.1rem; text-decoration: none; letter-spacing: -0.01em; }
.topo-planos { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .9rem; border: 1px solid var(--cor-borda); border-radius: 999px; text-decoration: none; font-weight: 700; font-size: var(--t-pequeno); color: var(--cor-texto-suave); }

/* ---------------------------------------------------------------- herói */
.heroi { padding-top: clamp(1.5rem, 1rem + 3vw, 4rem); }
.heroi-grade { display: grid; gap: calc(var(--vao) * 2); align-items: center; }
@media (min-width: 960px) { .heroi-grade { grid-template-columns: 1.15fr 0.85fr; } }
.heroi h1 { font-size: var(--t-h1); font-weight: 800; letter-spacing: -0.035em; }
.marcado { color: var(--cor-destaque); }
.heroi-sub { font-size: var(--t-destaque); color: var(--cor-texto-suave); max-width: 38ch; }
.acoes { display: flex; flex-wrap: wrap; gap: .75rem; }
.nota { font-size: var(--t-pequeno); color: var(--cor-texto-suave); }
.nota a { color: var(--cor-destaque); font-weight: 700; }

/* a conversa — o momento marcante */
.conversa {
  background: var(--cor-chat); border: 1px solid var(--cor-borda); border-radius: 24px;
  padding: 1.1rem; box-shadow: 0 30px 70px -30px rgb(0 0 0 / .6);
  display: flex; flex-direction: column; gap: .7rem; max-width: 440px; width: 100%; margin-inline: auto;
}
.conversa-topo { display: flex; align-items: center; gap: .5rem; font-size: var(--t-pequeno); font-weight: 700; color: var(--cor-texto-suave); padding-bottom: .6rem; border-bottom: 1px solid var(--cor-borda); }
.ponto { width: .6rem; height: .6rem; border-radius: 50%; background: var(--cor-verde-claro); }
.balao { max-width: 85%; padding: .7rem .9rem; border-radius: 16px; font-size: var(--t-pequeno); line-height: 1.45; }
.balao time { display: block; margin-top: .25rem; font-size: .82rem; opacity: .75; text-align: right; }
.balao.cliente { align-self: flex-start; background: #163a2b; border-top-left-radius: 4px; animation: entra .5s ease .3s both; }
.balao.ia { align-self: flex-end; background: #0f5e43; color: var(--cor-texto); border-top-right-radius: 4px; animation: entra .5s ease 1.2s both; }
.selo { align-self: flex-end; font-size: .85rem; font-weight: 800; color: var(--cor-sobre-primaria); background: var(--cor-destaque); padding: .25rem .7rem; border-radius: 999px; animation: entra .4s ease 1.8s both; }
.cartao-funil { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .82rem; margin-top: .3rem; animation: entra .4s ease 2.2s both; }
.cartao-funil span { padding: .3rem .65rem; border-radius: 8px; border: 1px solid var(--cor-borda); color: var(--cor-texto-suave); }
.cartao-funil .seta { border: 0; padding: 0; }
.cartao-funil .ativo { border-color: var(--cor-verde-claro); color: var(--cor-texto); }
.conversa figcaption { font-size: .85rem; color: var(--cor-texto-suave); opacity: .8; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- faixas e textos */
.faixa { background: var(--cor-fundo-2); }
h2 { font-size: var(--t-h2); font-weight: 800; letter-spacing: -0.03em; }
.sobretitulo { color: var(--cor-destaque); }
.dois p { color: var(--cor-texto-suave); }
.alinhado-topo { align-items: start; }

.dores { list-style: none; padding: 0; display: grid; gap: .6rem; counter-reset: dor; }
.dores li { counter-increment: dor; display: grid; grid-template-columns: 2.2rem 1fr; gap: .6rem; align-items: baseline; font-size: var(--t-destaque); font-weight: 600; color: var(--cor-texto); }
.dores li::before { content: counter(dor, decimal-leading-zero); font-weight: 800; color: var(--cor-destaque); font-size: var(--t-pequeno); }

.video.vertical { max-width: 360px; }

/* ---------------------------------------------------------------- como funciona */
.grade.tres { grid-template-columns: 1fr; }
@media (min-width: 900px) { .grade.tres { grid-template-columns: repeat(3, 1fr); } }
.item { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 1.4rem; }
.item h3 { font-size: var(--t-h3); margin-bottom: .5rem; }
.item p { color: var(--cor-texto-suave); }
.extras p { font-weight: 700; margin-bottom: .6rem; }
.extras ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.extras li { padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--cor-borda); font-size: var(--t-pequeno); color: var(--cor-texto-suave); }

/* ---------------------------------------------------------------- para quem é */
.caixa-honesta { border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 1.4rem; }
.caixa-honesta h3 { font-size: var(--t-h3); }

/* ---------------------------------------------------------------- planos */
/* 19/10/2026 — o preço de entrada logo abaixo do título, e a chave Com IA / Sem IA maior e com a explicação de cada lado. */
.a-partir { font-size: var(--t-destaque); color: var(--cor-texto-suave); }
.a-partir strong { color: var(--cor-destaque); font-weight: 800; white-space: nowrap; }
.escolha-ia { display: grid; gap: .6rem; }
.escolha-titulo { font-weight: 700; font-size: var(--t-pequeno); color: var(--cor-texto-suave); }
.chave { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; padding: .35rem; border-radius: 20px; background: var(--cor-superficie); border: 1px solid var(--cor-borda); width: 100%; max-width: 480px; }
.chave button { display: grid; gap: .1rem; justify-items: center; min-height: 56px; padding: .55rem .8rem; border: 1px solid transparent; border-radius: 15px; background: transparent; color: var(--cor-texto-suave); cursor: pointer; }
.chave-nome { font-weight: 800; font-size: var(--t-destaque); line-height: 1.2; }
.chave-sub { font-size: .85rem; line-height: 1.25; opacity: .85; }
.chave button[aria-pressed="true"] { background: var(--cor-destaque); color: var(--cor-sobre-primaria); }
.chave button[aria-pressed="true"] .chave-nome::before { content: "✓ "; }
.chave button:not([aria-pressed="true"]):hover { border-color: var(--cor-borda-verde); color: var(--cor-texto); }
/* Sem JavaScript a chave não faz nada: some, e a página mostra os cartões já escritos no HTML (Com IA) mais o resumo Sem IA. */
html:not(.js) .chave, html:not(.js) .escolha-titulo { display: none; }
.recado { color: var(--cor-texto-suave); }
.planos { display: grid; gap: var(--vao); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); align-items: stretch; }
.plano { position: relative; display: flex; flex-direction: column; gap: .6rem; background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 1.5rem 1.3rem; }
.plano.destaque { border: 2px solid var(--cor-destaque); background: rgb(174 248 92 / 0.05); }
.fita { position: absolute; top: -0.8rem; left: 1.2rem; background: var(--cor-destaque); color: var(--cor-sobre-primaria); font-size: .85rem; font-weight: 800; padding: .2rem .7rem; border-radius: 999px; }
/* Título menor que o h3 padrão: "Atendimento + IA" quebrava em duas linhas e empurrava o preço desse cartão para baixo dos outros. */
.plano h3 { font-size: clamp(1.25rem, 1.1rem + 0.35vw, 1.5rem); line-height: 1.2; }
.pra-quem { color: var(--cor-texto-suave); font-size: var(--t-pequeno); min-height: 3em; }
.preco { display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap; }
.preco .cifrao { font-weight: 700; color: var(--cor-texto-suave); }
.preco .num { font-size: clamp(2.2rem, 1.8rem + 1.5vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; }
.preco .mes { font-size: var(--t-pequeno); color: var(--cor-texto-suave); }
.tamanho { font-weight: 700; font-size: var(--t-pequeno); }
/* Números de WhatsApp e pessoas: as duas coisas que a pessoa compara entre os planos, sempre na mesma ordem. */
.porte { list-style: none; padding: .6rem 0; margin: 0; display: grid; gap: .25rem; border-block: 1px solid var(--cor-borda); font-size: var(--t-corpo); color: var(--cor-texto-suave); }
.porte b { color: var(--cor-texto); font-weight: 800; }
.plano .recursos { list-style: none; padding: 0; display: grid; gap: .4rem; font-size: var(--t-pequeno); margin-bottom: .6rem; }
.plano .recursos li { padding-left: 1.5rem; position: relative; }
.plano .recursos li::before { content: "✓"; position: absolute; left: 0; color: var(--cor-verde-claro); font-weight: 800; }
.plano .recursos li.nao { color: #93b8a5; text-decoration: line-through; }
.plano .recursos li.nao::before { content: "–"; color: #93b8a5; }
.plano .botao { margin-top: auto; width: 100%; font-size: var(--t-corpo); }
/* "Precisa de mais?" (02/11/2026) */
.complementos { margin-top: clamp(2.4rem, 1.6rem + 2vw, 3.4rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.compl-titulo { text-align: center; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.6rem); }
.compl-grade { max-width: 52rem; margin-inline: auto; width: 100%; }
.preco-sec { color: var(--cor-texto-suave); font-size: var(--t-pequeno); }
.plano.compl .botao + .botao { margin-top: .5rem; }
.centro { text-align: center; }

/* ---------------------------------------------------------------- perguntas */
details { border-bottom: 1px solid var(--cor-borda); padding-block: 1rem; }
summary { cursor: pointer; font-weight: 700; font-size: var(--t-destaque); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--cor-destaque); font-weight: 800; }
details[open] summary::after { content: "–"; }
details p { margin-top: .6rem; color: var(--cor-texto-suave); }

/* ---------------------------------------------------------------- final e rodapé */
.final { background: radial-gradient(circle at 50% 100%, rgb(26 191 135 / 0.24), transparent 60%); }
.final h2 { max-width: 22ch; }
.final .acoes { justify-content: center; }
.rodape { padding-block: 2rem 6rem; font-size: var(--t-mini); color: var(--cor-texto-suave); display: grid; gap: .3rem; border-top: 1px solid var(--cor-borda); }

/* o play do vídeo no mesmo degradê dos botões */
.video button span { background: linear-gradient(135deg, var(--cor-destaque), var(--cor-verde-claro)); color: var(--cor-sobre-primaria); box-shadow: 0 0 0 10px rgb(174 248 92 / 0.18); }

/* ---------------------------------------------------------------- aviso de cookies (Etapa 6) */
.aviso-cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; gap: .8rem; padding: 1rem 16px calc(1rem + env(safe-area-inset-bottom, 0px)); background: var(--cor-fundo-2); border-top: 1px solid var(--cor-borda-verde); box-shadow: 0 -12px 40px -12px rgb(0 0 0 / .6); }
.aviso-cookies-texto { font-size: var(--t-pequeno); color: var(--cor-texto); max-width: 70ch; margin: 0; }
.aviso-cookies-acoes { display: flex; flex-wrap: wrap; gap: .6rem; }
.aviso-cookies-acoes .botao { flex: 1 1 140px; min-height: 48px; font-size: var(--t-corpo); }
@media (min-width: 900px) { .aviso-cookies { grid-template-columns: 1fr auto; align-items: center; padding-inline: max(16px, calc((100vw - 1200px) / 2)); } .aviso-cookies-acoes .botao { flex: 0 0 auto; min-width: 150px; } }
/* o botão flutuante do WhatsApp sobe enquanto o aviso estiver aberto, para não ficar escondido atrás dele */
body.com-aviso-cookies .whats-flutuante { bottom: calc(var(--altura-aviso-cookies, 0px) + 16px); }
body.com-aviso-cookies .rodape { padding-bottom: calc(6rem + var(--altura-aviso-cookies, 0px)); }
.link-cookies { background: none; border: 0; padding: .6rem 0; min-height: 44px; color: var(--cor-texto-suave); font: inherit; font-size: var(--t-mini); text-decoration: underline; cursor: pointer; }
.link-cookies[hidden] { display: none; }
.aviso-cookies-texto a { color: var(--cor-destaque); font-weight: 700; }

/* 🖤 Black (22/10/2026): a faixa da oferta acompanha o alinhamento à esquerda desta página e respira embaixo do título. */
#oferta-faixa.oferta-faixa { align-items: flex-start; text-align: left; margin: .5rem 0 1rem; max-width: 46rem; }