/* Site de lançamento do Teddy AI. Cores do Guia de Identidade Visual (brand-guide/), as mesmas do
   prototipo/estilos.css: azul-marinho domina, turquesa nos fundos de destaque, verde-limão só nos caracteres
   sobre fundo escuro. Formas chapadas, sem sombra nem degradê.
   Tipografia do guia: Gilroy nos títulos e no logotipo, Noto Sans no texto. A Gilroy entra só com os dois pesos
   que o autor distribui de graça, ExtraBold (800) e Light (300), pela licença em fontes/LICENCA-gilroy.pdf;
   todo uso dela fica num desses dois pesos, para o navegador não inventar um negrito. */
@font-face {
  font-family: "Gilroy";
  src: url("fontes/gilroy-extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("fontes/gilroy-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("fontes/noto-sans.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --marinho: #0A0046;
  --marinho-2: #1A1452;
  --branco: #FFFFFF;
  --turquesa: #4BDCD1;
  --turquesa-suave: #DBF7F5;
  --limao: #89FC00;
  --preto: #1E1E24;
  --cinza: #EEEEEE;
  --cinza-texto: #55555F;
  --borda: #DEDEE2;
  --lilas: #C9C6EA;
  --erro: #8A1C1C;
  --erro-fundo: #FDE4E4;
  --fonte-titulo: "Gilroy", "Segoe UI", system-ui, sans-serif;
  --fonte-texto: "Noto Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --largura: 1120px;
  --margem: 16px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--branco);
  color: var(--preto);
  font-family: var(--fonte-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 800; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--turquesa); outline-offset: 3px; border-radius: 4px; }
.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: var(--margem); top: -100px; z-index: 10;
  background: var(--turquesa); color: var(--marinho); padding: 10px 16px; border-radius: 10px;
  font-weight: 600; text-decoration: none;
}
.pular:focus { top: 12px; }
.conteudo { width: 100%; max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; padding: 0 var(--margem); }
@media (min-width: 720px) { :root { --margem: 32px; } }

/* Marca: símbolo do urso e logotipo teddy ai. Positiva no claro; negativa no azul-marinho, com o focinho na
   cor do fundo. */
.urso .urso-cor { fill: var(--urso-cor, var(--marinho)); }
.urso .urso-focinho { fill: var(--urso-focinho, var(--branco)); }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--marca-cor, var(--marinho)); }
.marca .urso { width: 34px; height: 34px; flex: none; }
.logotipo { font-family: var(--fonte-titulo); font-size: 1.6rem; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.logotipo-teddy { font-weight: 800; }
.logotipo-ai { font-weight: 300; }
.negativa { --urso-cor: var(--branco); --urso-focinho: var(--marinho); --marca-cor: var(--branco); color: var(--branco); }

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px; border: 0; border-radius: 12px;
  font-family: var(--fonte-texto); font-size: 1.0625rem; font-weight: 600; text-decoration: none;
  background: var(--turquesa); color: var(--marinho); cursor: pointer;
}
.botao:hover { background: #6FE5DC; }
.botao:active { transform: translateY(1px); }
.botao[disabled] { opacity: .7; cursor: progress; }
.botao-pequeno { min-height: 40px; padding: 8px 16px; font-size: 1rem; }
.link-forte { font-family: var(--fonte-texto); font-weight: 600; text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* Topo: cabeçalho e abertura no azul-marinho */
.topo { background: var(--marinho); color: var(--branco); position: relative; overflow: hidden; }
.caracteres-fundo {
  position: absolute; inset: 0; pointer-events: none;
  font-family: var(--fonte-titulo); font-weight: 800; color: var(--limao);
}
.caracteres-fundo span { position: absolute; font-size: 1.5rem; opacity: .9; }
.caracteres-fundo span:nth-child(1) { left: 4%; top: 22%; }
.caracteres-fundo span:nth-child(2) { left: 46%; top: 12%; }
.caracteres-fundo span:nth-child(3) { right: 5%; top: 9%; }
.caracteres-fundo span:nth-child(4) { left: 40%; bottom: 7%; }
.caracteres-fundo span:nth-child(5) { right: 3%; bottom: 14%; }
@media (max-width: 1099px) {
  .caracteres-fundo span:nth-child(1), .caracteres-fundo span:nth-child(2), .caracteres-fundo span:nth-child(4) { display: none; }
}
@media (max-width: 719px) {
  .caracteres-fundo { display: none; }
}
.cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 20px; position: relative; }
.cabecalho nav { display: flex; align-items: center; gap: 28px; }
.cabecalho nav a:not(.botao) { text-decoration: none; font-weight: 500; color: var(--lilas); }
.cabecalho nav a:not(.botao):hover { color: var(--branco); }
@media (max-width: 719px) {
  .cabecalho nav a:not(.botao) { display: none; }
  .marca .urso { width: 28px; height: 28px; }
  .marca .logotipo { font-size: 1.35rem; }
}

.abertura {
  position: relative;
  display: grid; gap: 48px; align-items: center;
  padding-top: 40px; padding-bottom: 72px;
}
@media (min-width: 960px) {
  .abertura { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; padding-top: 56px; padding-bottom: 104px; }
}
.abertura h1 {
  font-size: clamp(2.4rem, 6.4vw, 4.4rem);
  line-height: 1.04;
  font-weight: 800;
  max-width: 15ch;
}
.abertura .apoio { margin-top: 24px; font-size: 1.1875rem; line-height: 1.55; color: var(--lilas); max-width: 34em; }
.abertura .acoes { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.abertura .acoes .link-forte { color: var(--branco); }
.abertura .turma { margin-top: 28px; display: flex; align-items: center; gap: 10px; color: var(--branco); font-weight: 500; }
.abertura .turma::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--limao); flex: none; }

/* A conversa da abertura: as mensagens entram em sequência uma vez; com movimento reduzido, já aparecem. */
.janela {
  background: var(--branco); color: var(--preto); border-radius: 22px; overflow: hidden;
  width: 100%; max-width: 480px; justify-self: center;
}
.janela-topo { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--borda); }
.janela-topo .urso { width: 36px; height: 36px; }
.janela-topo strong { display: block; font-family: var(--fonte-titulo); font-weight: 800; color: var(--marinho); line-height: 1.2; }
.janela-topo span { font-size: .875rem; color: var(--cinza-texto); }
.mensagens { display: flex; flex-direction: column; gap: 12px; padding: 20px; font-size: .9375rem; line-height: 1.5; }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; }
.msg-pessoa { align-self: flex-end; background: var(--marinho); color: var(--branco); border-bottom-right-radius: 6px; }
.msg-teddy { align-self: flex-start; background: var(--cinza); border-bottom-left-radius: 6px; }
.fonte {
  display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px;
  background: var(--turquesa-suave); color: var(--marinho); font-size: .8125rem; font-weight: 600;
}
.rotulo-msg { font-family: var(--fonte-titulo); font-weight: 800; font-size: .8125rem; color: var(--marinho); }
.pendente {
  display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px;
  background: #FFF1D6; color: #6B4300; font-size: .8125rem; font-weight: 600;
}
.campo-falso {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 20px 20px; padding: 12px 16px; border: 1px solid var(--borda); border-radius: 12px;
  color: var(--cinza-texto); font-size: .9375rem;
}
.cursor { font-family: var(--fonte-titulo); font-weight: 800; color: var(--marinho); }
.selo-janela { padding: 0 20px 16px; }

@media (prefers-reduced-motion: no-preference) {
  .msg { opacity: 0; transform: translateY(8px); animation: entrar .45s ease-out forwards; }
  .msg:nth-child(1) { animation-delay: .4s; }
  .msg:nth-child(2) { animation-delay: 1.3s; }
  .msg:nth-child(3) { animation-delay: 2.6s; }
  .msg:nth-child(4) { animation-delay: 3.5s; }
  .cursor { animation: piscar 1.1s steps(1) infinite; }
}
@keyframes entrar { to { opacity: 1; transform: none; } }
@keyframes piscar { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Selo com tecnologia Teddy AI by vmbears */
.selo { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--cinza-texto); white-space: nowrap; }
.selo .urso { width: 16px; height: 16px; }
.selo .logotipo { font-size: .9375rem; color: var(--marinho); }
.selo-endosso { font-family: var(--fonte-titulo); font-weight: 800; color: var(--marinho); }

/* Seções */
.secao { padding: 80px 0; }
@media (min-width: 960px) { .secao { padding: 112px 0; } }
.secao h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.1; font-weight: 800; color: var(--marinho); max-width: 20ch; }
.secao .lead { margin-top: 16px; font-size: 1.1875rem; color: var(--cinza-texto); max-width: 36em; }

/* Propósito */
.proposito blockquote {
  margin: 0; font-family: var(--fonte-titulo); font-weight: 800; color: var(--marinho);
  font-size: clamp(1.9rem, 4.6vw, 3.25rem); line-height: 1.15; letter-spacing: -.01em; max-width: 22ch;
}
.faixa {
  background: linear-gradient(transparent 60%, var(--turquesa) 60%, var(--turquesa) 92%, transparent 92%);
  padding: 0 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.proposito .assina { margin-top: 20px; color: var(--cinza-texto); }
.dores { margin: 56px 0 0; padding: 0; list-style: none; display: grid; gap: 28px; }
@media (min-width: 760px) { .dores { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.dores li { border-top: 3px solid var(--marinho); padding-top: 16px; }
.dores strong { display: block; font-family: var(--fonte-titulo); font-size: 1.25rem; font-weight: 800; color: var(--marinho); }
.dores p { margin-top: 4px; color: var(--cinza-texto); }

/* Como funciona: três passos, em ordem */
.como { background: var(--cinza); }
.passos { margin: 48px 0 0; padding: 0; list-style: none; display: grid; gap: 20px; counter-reset: passo; }
@media (min-width: 900px) { .passos { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.passos li { background: var(--branco); border-radius: 18px; padding: 28px; counter-increment: passo; }
.passos li::before {
  content: counter(passo); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--marinho); color: var(--branco); font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.25rem;
}
.passos h3 { margin-top: 20px; font-size: 1.3125rem; font-weight: 800; color: var(--marinho); line-height: 1.25; }
.passos p { margin-top: 8px; color: var(--cinza-texto); }

/* Vídeo: aparece quando o arquivo existe (site.js) */
.video { background: var(--marinho); color: var(--branco); }
.video h2 { color: var(--branco); }
.video video { margin-top: 32px; width: 100%; border-radius: 18px; background: var(--marinho-2); aspect-ratio: 16 / 9; }

/* O que o Teddy faz */
.recursos { margin: 48px 0 0; padding: 0; list-style: none; display: grid; gap: 36px 48px; }
@media (min-width: 720px) { .recursos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .recursos { grid-template-columns: repeat(3, 1fr); } }
.recursos h3 { font-size: 1.3125rem; font-weight: 800; color: var(--marinho); display: flex; align-items: baseline; gap: 10px; }
.recursos h3::before { content: "_"; font-weight: 800; color: var(--turquesa); }
.recursos p { margin-top: 6px; color: var(--cinza-texto); }
.marca-cliente {
  margin-top: 64px; padding: 28px; border: 2px solid var(--marinho); border-radius: 18px;
  display: grid; gap: 16px; align-items: center;
}
@media (min-width: 860px) { .marca-cliente { grid-template-columns: 1fr auto; gap: 32px; } }
.marca-cliente p { color: var(--preto); max-width: 40em; }
.marca-cliente strong { font-family: var(--fonte-titulo); font-weight: 800; color: var(--marinho); }

/* Piloto: fundo turquesa, texto azul-marinho */
.piloto { background: var(--turquesa); color: var(--marinho); }
.piloto h2 { color: var(--marinho); }
.piloto .lead { color: var(--marinho); font-weight: 500; }
.piloto-grade { display: grid; gap: 48px; margin-top: 48px; }
@media (min-width: 900px) { .piloto-grade { grid-template-columns: 1.2fr 1fr; gap: 64px; } }
.piloto-itens { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.piloto-itens li { display: flex; gap: 12px; font-size: 1.0625rem; }
.piloto-itens li::before { content: "+"; font-family: var(--fonte-titulo); font-weight: 800; flex: none; }
.participar { background: var(--marinho); color: var(--branco); border-radius: 18px; padding: 28px; }
.participar h3 { font-size: 1.375rem; font-weight: 800; }
.participar ol { margin: 16px 0 0; padding-left: 1.25em; display: grid; gap: 10px; }
.participar ol li::marker { font-family: var(--fonte-titulo); font-weight: 800; color: var(--limao); }
.participar .nota { margin-top: 20px; color: var(--lilas); font-size: .9375rem; }
.participar .botao { margin-top: 24px; }

/* Cadastro */
.cadastro { background: var(--marinho); color: var(--branco); }
.cadastro h2 { color: var(--branco); }
.cadastro .lead { color: var(--lilas); }
.cadastro-grade { display: grid; gap: 40px; }
@media (min-width: 960px) { .cadastro-grade { grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; } }
.cartao { background: var(--branco); color: var(--preto); border-radius: 22px; padding: 28px 20px; }
@media (min-width: 720px) { .cartao { padding: 36px; } }
.campos { display: grid; gap: 20px; }
@media (min-width: 720px) { .campos { grid-template-columns: 1fr 1fr; } .campo-inteiro { grid-column: 1 / -1; } }
.campo label { display: block; font-weight: 600; color: var(--marinho); margin-bottom: 6px; font-size: 1rem; padding: 0; }
.campo .opcional { font-weight: 400; color: var(--cinza-texto); }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--preto);
  border: 1.5px solid var(--borda); border-radius: 10px; padding: 12px 14px; background: var(--branco);
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--marinho); box-shadow: 0 0 0 3px rgba(75, 220, 209, .6); }
.campo [aria-invalid="true"] { border-color: var(--erro); }
.consentimento input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--marinho); flex: none; }
.campo .consentimento { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: .9375rem; font-weight: 400; color: var(--preto); }
.consentimento a { color: var(--marinho); font-weight: 600; }
.erro-campo { margin-top: 6px; color: var(--erro); font-size: .875rem; }
.erro-campo:empty { display: none; }
.armadilha { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.enviar { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.aviso-envio { padding: 12px 16px; border-radius: 10px; background: var(--erro-fundo); color: var(--erro); font-size: .9375rem; }
.aviso-envio a { color: inherit; font-weight: 600; }
.sucesso h3 { font-size: 1.625rem; font-weight: 800; color: var(--marinho); }
.sucesso p { margin-top: 12px; color: var(--cinza-texto); }
.contato-direto { margin-top: 24px; color: var(--lilas); }
.contato-direto a { color: var(--branco); font-weight: 600; }

/* Rodapé */
.rodape { padding: 48px 0; border-top: 1px solid var(--borda); }
.rodape .conteudo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.assinatura { display: flex; align-items: center; gap: 12px; }
.assinatura .marca .urso { width: 28px; height: 28px; }
.assinatura .marca .logotipo { font-size: 1.35rem; }
.assinatura .endosso { font-family: var(--fonte-titulo); font-weight: 800; color: var(--marinho); }
.rodape nav { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: .9375rem; }
.rodape nav a { color: var(--cinza-texto); text-underline-offset: 4px; }
.rodape .direitos { width: 100%; font-size: .875rem; color: var(--cinza-texto); }

/* Páginas de texto: imprensa e privacidade */
.pagina-texto .topo .cabecalho { padding-bottom: 20px; }
.artigo { max-width: 46rem; padding-top: 56px; padding-bottom: 80px; }
.artigo h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; font-weight: 800; color: var(--marinho); }
.artigo h2 { margin-top: 40px; font-size: 1.5rem; font-weight: 800; color: var(--marinho); }
.artigo p, .artigo ul { margin-top: 16px; }
.artigo ul { padding-left: 1.25em; display: grid; gap: 8px; }
.artigo a { color: var(--marinho); font-weight: 600; text-underline-offset: 4px; }
.artigo .meta { margin-top: 12px; color: var(--cinza-texto); font-size: .9375rem; }
.artigo .chamada { margin-top: 20px; font-size: 1.1875rem; color: var(--preto); }
.artigo .voltar { margin-top: 48px; display: inline-block; }