/* Talkster · site institucional.
   Cores, fontes e medidas seguem o manual de marca 1.0. As regras de cada seção estão em
   docs/desenho-do-site.html; os contrastes citados abaixo foram conferidos lá. */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/SpaceGroteskVariable.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/InstrumentSans-latin-wght.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/IBMPlexMono-latin-400.woff2') format('woff2');
}

:root {
  --noite: #111b28;
  --azul: #4c99f8;
  --azul-hover: #6aabfa;
  --azul-texto: #2272cd; /* só sobre branco: 4,8:1 */
  --claro: #f2f4f6;
  --branco: #ffffff;
  --filete: #d4d8dd;
  --texto-2: #3b434d;
  --apoio: #6c727a; /* só sobre branco: 4,9:1 */
  --apoio-escuro: #9aa1a9;
  --escuro: #101419;
  --borda-campo: #8a929b; /* 3,1:1 sobre branco */
  --erro: #b42318;
  --fonte-titulo: 'Space Grotesk', 'Instrument Sans', system-ui, sans-serif;
  --fonte-texto: 'Instrument Sans', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --fonte-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --raio-cartao: 12px;
  --raio-botao: 10px;
  --raio-tela: 16px;
  --altura-cabecalho: 72px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-cabecalho) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 26px;
  color: var(--noite);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }

h1, h2 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h3 { font-weight: 600; text-wrap: balance; }

:focus-visible { outline: 3px solid var(--azul-texto); outline-offset: 3px; border-radius: 4px; }
.escuro :focus-visible, .cabecalho :focus-visible, .rodape :focus-visible { outline-color: var(--azul); }
.escuro .cartao-form :focus-visible { outline-color: var(--azul-texto); }
main:focus { outline: none; }

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.conteiner { width: 100%; max-width: 1168px; margin-inline: auto; padding-inline: 24px; }

.pular {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 60;
  padding: 10px 16px;
  border-radius: var(--raio-botao);
  background: var(--azul);
  color: var(--noite);
  font-weight: 600;
  text-decoration: none;
}
.pular:focus { top: 16px; }

/* Botões */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1.5px solid transparent;
  border-radius: var(--raio-botao);
  font-family: var(--fonte-texto);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.botao-principal { background: var(--azul); color: var(--noite); }
.botao-principal:hover { background: var(--azul-hover); }
.botao-contorno { background: transparent; border-color: rgb(255 255 255 / 0.4); color: #fff; }
.botao-contorno:hover { border-color: #fff; background: rgb(255 255 255 / 0.06); }
.botao[disabled] { opacity: 0.7; cursor: progress; }

/* Etiqueta com o ponto azul */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fonte-mono);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.etiqueta::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--azul); }
.escuro .etiqueta { color: var(--azul); }

/* Títulos e textos */
.titulo-1 { font-size: 36px; line-height: 40px; }
.titulo-2 { font-size: 30px; line-height: 34px; }
.titulo-3 { font-size: 22px; line-height: 28px; }
.titulo-cartao { font-size: 18px; line-height: 26px; }
.abertura { font-size: 18px; line-height: 28px; color: var(--texto-2); }
.intro { font-size: 18px; line-height: 28px; color: var(--texto-2); }
.escuro .abertura, .escuro .intro { color: var(--apoio-escuro); }
.ponto { color: var(--azul); }

.cabeca-secao { display: grid; gap: 16px; max-width: 780px; margin-bottom: 48px; }

/* Seções */
.secao { padding-block: 72px; }
.fundo-claro { background: var(--claro); }
.fundo-branco { background: var(--branco); }
.escuro { background: var(--noite); color: #fff; }

/* Cabeçalho fixo */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--noite);
  color: #fff;
  transition: box-shadow 180ms ease;
}
.cabecalho.rolou { box-shadow: 0 1px 0 rgb(255 255 255 / 0.08), 0 8px 24px rgb(0 0 0 / 0.25); }
.cabecalho-linha { display: flex; align-items: center; gap: 16px; min-height: var(--altura-cabecalho); }
.marca { display: inline-flex; border-radius: 6px; }
.marca img { width: auto; height: 30px; }
.menu-desktop { display: none; }
.cabecalho-acoes { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.botao-cabecalho { min-height: 44px; padding: 0 18px; font-size: 15px; }
.rotulo-curto { display: none; }

.menu-celular { position: relative; }
.menu-celular summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgb(255 255 255 / 0.4);
  border-radius: var(--raio-botao);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.menu-celular summary::-webkit-details-marker { display: none; }
.menu-celular[open] summary { border-color: #fff; }
.menu-celular ul {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  min-width: 240px;
  padding: 8px;
  list-style: none;
  background: var(--noite);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--raio-cartao);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.4);
}
.menu-celular a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
}
.menu-celular a:hover { background: rgb(255 255 255 / 0.06); }

.menu-links { display: flex; align-items: center; gap: 2px; list-style: none; }
.menu-links a, .entrar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--apoio-escuro);
  font-weight: 500;
  text-decoration: none;
  transition: color 150ms ease;
}
.menu-links a:hover, .entrar:hover { color: #fff; }

/* Topo */
.topo { padding-block: 40px 64px; }
.topo-grade { display: grid; gap: 48px; align-items: center; }
.topo-texto { display: grid; gap: 20px; justify-items: start; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.garantias {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  list-style: none;
}
.garantias li { display: inline-flex; align-items: baseline; gap: 10px; font-weight: 500; }
.garantias li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--azul); transform: translateY(-2px); }

/* Moldura das telas do Talkster */
.tela {
  overflow: hidden;
  background: var(--branco);
  border: 1px solid var(--filete);
  border-radius: var(--raio-tela);
  box-shadow: 0 1px 2px rgb(17 27 40 / 0.06), 0 16px 40px rgb(17 27 40 / 0.12);
}
.escuro .tela { border-color: transparent; box-shadow: 0 24px 60px rgb(0 0 0 / 0.4); }
.tela-barra { display: flex; gap: 6px; padding: 10px 14px; background: var(--claro); border-bottom: 1px solid var(--filete); }
.tela-barra span { width: 9px; height: 9px; border-radius: 50%; background: var(--filete); }
.tela img { width: 100%; height: auto; }

/* Cartões */
.grade-cartoes { display: grid; gap: 20px; list-style: none; }
.cartao {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 28px;
  background: var(--branco);
  border: 1px solid var(--filete);
  border-radius: var(--raio-cartao);
}
.fundo-branco .cartao { background: var(--claro); border-color: var(--claro); }
.cartao p { color: var(--texto-2); }
.icone { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 12px; background: var(--noite); color: #fff; }
.icone svg { width: 22px; height: 22px; }

/* Sócios */
.socio { gap: 10px; }
.foto-socio { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; margin-bottom: 8px; border-radius: 12px; background: var(--filete); }
.cartao .papel { font-family: var(--fonte-mono); font-size: 12px; line-height: 18px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-2); }

/* Produto em ação */
.linhas-produto { display: grid; gap: 72px; }
.linha { display: grid; gap: 32px; align-items: center; }
.linha-texto { display: grid; gap: 16px; }
.linha-texto p { color: var(--texto-2); }
.itens { display: grid; gap: 10px; margin-top: 4px; list-style: none; }
.itens li { display: flex; align-items: baseline; gap: 12px; font-weight: 500; }
.itens li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--azul); transform: translateY(-2px); }
.produto-cartoes { margin-top: 72px; }

/* API oficial */
.tabela-rolagem { overflow-x: auto; border: 1px solid rgb(255 255 255 / 0.14); border-radius: var(--raio-cartao); }
.comparativo { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.comparativo th, .comparativo td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid rgb(255 255 255 / 0.12); }
.comparativo tbody tr:last-child th, .comparativo tbody tr:last-child td { border-bottom: 0; }
.comparativo thead th { font-weight: 600; color: #fff; }
.comparativo tbody th { font-weight: 500; color: #fff; }
.comparativo td { color: var(--apoio-escuro); }
.comparativo .talkster { background: rgb(76 153 248 / 0.12); color: #fff; font-weight: 600; }
.comparativo thead .talkster { color: var(--azul); }
.aviso-api {
  margin-top: 24px;
  padding: 20px 24px;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--raio-cartao);
  background: rgb(255 255 255 / 0.05);
  color: var(--apoio-escuro);
}

/* Passos numerados: implantação e contato */
.passos { display: grid; gap: 28px; list-style: none; counter-reset: passo; }
.passos li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; counter-increment: passo; }
.passos li::before {
  content: counter(passo);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--noite);
  color: #fff;
  font-family: var(--fonte-titulo);
  font-size: 16px;
  font-weight: 700;
}
.escuro .passos li::before { background: var(--azul); color: var(--noite); }
.passos div { display: grid; gap: 4px; padding-top: 5px; }
.passos h3 { font-size: 18px; line-height: 26px; }
.passos p { color: var(--texto-2); }
.escuro .passos p { color: var(--apoio-escuro); }

.implantacao-grade { display: grid; gap: 40px; }
.lateral { display: grid; gap: 20px; align-content: start; }
.chamada-meio { justify-items: start; }
.chamada-meio p { color: var(--noite); font-size: 18px; line-height: 28px; }

/* Custos */
.custos-grade { display: grid; gap: 20px; }
.custo { gap: 16px; padding: 32px; }
.link-externo { display: inline-flex; align-items: center; min-height: 44px; color: var(--noite); font-weight: 600; text-underline-offset: 3px; }
.chamada-custos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; }
.chamada-custos p { font-size: 18px; line-height: 28px; }

/* Para quem é */
.filtro { max-width: 780px; margin-top: 32px; font-size: 18px; line-height: 28px; }

/* Dúvidas */
.duvidas-lista { max-width: 880px; border-top: 1px solid var(--filete); }
.duvida { border-bottom: 1px solid var(--filete); }
.duvida summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
  padding-block: 16px;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  list-style: none;
  cursor: pointer;
}
.duvida summary::-webkit-details-marker { display: none; }
.duvida summary::after { content: "+"; flex: none; color: var(--azul-texto); font-size: 26px; font-weight: 400; line-height: 1; }
.duvida[open] summary::after { content: "−"; }
.duvida p { max-width: 760px; padding-bottom: 20px; color: var(--texto-2); }

/* Contato */
.contato-grade { display: grid; gap: 40px; grid-template-areas: "texto" "formulario" "passos"; }
.contato-texto { grid-area: texto; display: grid; gap: 16px; justify-items: start; }
.contato-passos { grid-area: passos; display: grid; gap: 24px; justify-items: start; }
.cartao-form {
  grid-area: formulario;
  padding: 28px 24px;
  border-radius: 18px;
  background: var(--branco);
  color: var(--noite);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.3);
}
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.campo label { font-size: 15px; font-weight: 600; line-height: 22px; }
.opcional { font-weight: 400; color: var(--apoio); }
.dica { margin-top: -2px; font-size: 14px; line-height: 20px; color: var(--apoio); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1.5px solid var(--borda-campo);
  border-radius: var(--raio-botao);
  background-color: #fff;
  color: var(--noite);
  font: inherit;
  font-size: 16px;
  transition: border-color 150ms ease;
}
.campo select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111b28' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}
.campo textarea { min-height: 112px; resize: vertical; }
.campo input::placeholder { color: var(--apoio); }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--texto-2); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  outline: 3px solid var(--azul-texto);
  outline-offset: 1px;
  border-color: var(--azul-texto);
  border-radius: var(--raio-botao);
}
.campo [aria-invalid="true"] { border-color: var(--erro); }
.erro { font-size: 14px; line-height: 20px; color: var(--erro); }
.campos-lado { display: grid; column-gap: 16px; }
.isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.botao-enviar { width: 100%; }
.privacidade { margin-top: 12px; font-size: 13px; line-height: 20px; color: var(--apoio); text-align: center; }
.privacidade a { display: inline-block; padding-block: 12px; margin-block: -12px; color: var(--noite); text-underline-offset: 2px; }
.depois-envio { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--texto-2); text-align: center; }
.aviso {
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1.5px solid #f2b8b0;
  border-radius: var(--raio-botao);
  background: #fdeceb;
  color: #7a1d12;
  font-size: 15px;
}
.aviso ul { margin: 6px 0 0; padding-left: 18px; }
.aviso a { color: inherit; font-weight: 600; }
.sucesso { padding: 28px 8px; text-align: center; }
.sucesso h3 { margin-bottom: 8px; font-family: var(--fonte-titulo); font-size: 22px; font-weight: 700; line-height: 28px; letter-spacing: -0.02em; }
.sucesso p { color: var(--texto-2); }

/* Rodapé */
.rodape { padding-block: 64px 40px; background: var(--escuro); color: var(--apoio-escuro); font-size: 15px; line-height: 24px; }
.rodape-grade { display: grid; gap: 32px; }
.rodape-marca { display: grid; gap: 16px; align-content: start; max-width: 340px; }
.rodape-marca img { width: auto; height: 28px; }
.rodape-titulo { margin-bottom: 4px; color: #fff; font-weight: 600; }
.rodape ul { display: grid; list-style: none; }
.rodape a { display: inline-flex; align-items: center; min-height: 44px; color: var(--apoio-escuro); text-decoration: none; }
.rodape a:hover { color: #fff; text-decoration: underline; }
.rodape-base { display: grid; gap: 4px; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / 0.12); font-size: 14px; line-height: 22px; }

/* Página 404: cabeçalho só com o botão de contato e a seção ocupando a altura da tela */
.pagina-erro { display: flex; flex-direction: column; min-height: 100vh; }
.pagina-erro main { display: flex; flex: 1; background: var(--noite); }
.pagina-erro main .secao { flex: 1; }
.pagina-erro .rodape { padding-block: 32px; }
.pagina-erro .rodape-base { margin-top: 0; padding-top: 0; border-top: 0; }
.pagina-erro .rodape a { min-height: 44px; }
.cabecalho-simples .cabecalho-acoes { margin-left: auto; }

/* A partir de 640 px */
@media (min-width: 640px) {
  .titulo-1 { font-size: 44px; line-height: 48px; }
  .grade-cartoes.quatro, .grade-cartoes.dois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campos-lado { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartao-form { padding: 36px; }
}

/* A partir de 768 px */
@media (min-width: 768px) {
  .grade-cartoes.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .custos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape-grade { grid-template-columns: 2fr 1fr 1fr 1.3fr; }
}

/* A partir de 960 px */
@media (min-width: 960px) {
  .secao { padding-block: 104px; }
  .topo { padding-block: 72px 96px; }
  .titulo-1 { font-size: 56px; line-height: 60px; }
  .titulo-2 { font-size: 40px; line-height: 44px; }
  .titulo-3 { font-size: 28px; line-height: 34px; }
  .abertura { font-size: 20px; line-height: 30px; }
  .topo-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
  .linhas-produto { gap: 104px; }
  .linha { grid-template-columns: 5fr 7fr; gap: 64px; }
  .linha.invertida { grid-template-columns: 7fr 5fr; }
  .linha.invertida .linha-texto { order: 2; }
  .implantacao-grade { grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; }
  .depois-envio { display: none; }
  .contato-grade {
    grid-template-columns: 5fr 6fr;
    grid-template-areas: "texto formulario" "passos formulario";
    grid-template-rows: auto 1fr;
    column-gap: 64px;
    align-items: start;
  }
}

/* A partir de 1024 px: menu completo */
@media (min-width: 1024px) {
  .grade-cartoes.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .menu-desktop { display: flex; align-items: center; gap: 2px; margin-left: auto; }
  .cabecalho-acoes { margin-left: 4px; }
  .menu-celular { display: none; }
}

/* Abaixo de 400 px */
@media (max-width: 399px) {
  .conteiner { padding-inline: 16px; }
  .cabecalho-linha { gap: 10px; }
  .cabecalho-acoes { gap: 8px; }
  .marca img { height: 26px; }
  .botao-cabecalho { padding: 0 14px; }
  .menu-celular summary { padding: 0 14px; }
  .cartao { padding: 22px; }
  .cartao-form { padding: 24px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* Abaixo de 360 px: rótulo curto no botão do cabeçalho */
@media (max-width: 359px) {
  .rotulo-longo { display: none; }
  .rotulo-curto { display: inline; }
}