/* ==========================================================================
   JáTomei! — landing (jatomei.app)
   HTML + CSS puro. Sem framework, sem build, sem dependência externa.
   Abre com duplo clique no index.html.

   Tipografia: corpo 19px no padrão do navegador (mínimo pedido: 18px).
   Tudo em rem e em, então aumentar a fonte do sistema aumenta a página
   inteira. Testado mentalmente para 200% de zoom: nenhuma largura fixa
   acima de 16rem, nenhuma altura fixa em bloco de texto, e as grades
   usam minmax(0,1fr) para poder encolher.

   Contraste medido (WCAG, fundo x texto):
     verde #14453D sobre creme #F4F2EC ....... 9,6:1  AAA
     verde #14453D sobre tinta #EAE7DE ....... 8,7:1  AAA
     creme #F4F2EC sobre verde #14453D ....... 9,6:1  AAA
     verde-tinta #3A5A52 sobre creme ......... 6,8:1  AA  (só texto miúdo)
     verde-escuro #0E332D sobre âmbar ........ 6,4:1  AA  (só botão grande)
   ========================================================================== */

:root {
  --verde:        #14453D;
  --verde-escuro: #0E332D;
  --creme:        #F4F2EC;
  --tinta:        #EAE7DE;
  --ambar:        #E3A72F;
  --meta:         #3A5A52;
  --branco:       #FFFFFF;

  --faixa:  62rem;   /* largura máxima do conteúdo */
  --prosa:  38rem;   /* largura máxima de parágrafo, para leitura */
  --raio:   0.75rem;
}

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

/* Item de grade nasce com min-width:auto e NÃO encolhe abaixo do próprio
   min-content — a 200% de zoom isso fazia os cartões estourarem a tela
   (medido: 207px de borda direita num viewport de 165px). O min-width:0
   libera a trilha a encolher; o overflow-wrap do body quebra a palavra
   longa que sobra. */
.colunas > *,
.planos > *,
.provas > *,
.dupla > * { min-width: 0; }

html {
  font-size: 100%;              /* respeita o tamanho de fonte do usuário */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--verde);
  font-family: "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 1.1875rem;         /* 19px */
  line-height: 1.6;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  line-height: 1.2;
  margin: 0 0 0.6em;
  text-wrap: balance;
  /* A 200% de zoom o título não cabe e ALGO tem que ceder. Sem isto o
     navegador partia no meio da sílaba — medido: "O lembre / te do remédi / o".
     hyphens:auto pede ao navegador que parta na sílaba, com hífen, usando os
     padrões do lang="pt-BR" do <html>.
     ⚠️ NÃO MEDIDO: não confirmei que o Chrome de fato aplicou os padrões de
     pt-BR aqui. O que está medido é que o estouro horizontal é zero nas cinco
     larguras (ver RELATORIO.md §1) — isso vem do min-width:0, não daqui.
     Esta linha é melhoria de legibilidade não verificada. */
  hyphens: auto;
}

h1 { font-size: clamp(1.75rem, 7vw, 3.25rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 5vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 3.5vw, 1.6rem); }

p { margin: 0 0 1em; max-width: var(--prosa); }

/* Âncora do bloco do aplicativo Android. Até 16/09 era o alvo do botão "Quero
   o alarme no celular", que virou "Baixar no Android" e vai para a Play por
   /ir/play; o id fica para link de anúncio. Não há nada fixo no topo; sobra só
   uma folga para o bloco não colar na borda. */
#alarme-android { scroll-margin-top: 1rem; }

/* --- link de pular, só aparece no teclado ------------------------------- */
.pular {
  position: absolute;
  left: -9999px;
  background: var(--ambar);
  color: var(--verde-escuro);
  padding: 0.75rem 1rem;
  font-weight: 700;
  /* Nasceu 60 para ficar acima da faixa sticky de bloqueio (z-index 50), que
     saiu em 05/09. Fica: qualquer elemento fixo que entre no futuro precisa
     continuar ABAIXO deste, senão o usuário de teclado foca um link invisível
     (medido em 04/09). */
  z-index: 60;
}
.pular:focus { left: 0; top: 0; }

/* --- foco visível em tudo que é acionável ------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 3px;
}
.secao--escura a:focus-visible,
.secao--escura button:focus-visible,
.rodape a:focus-visible {
  outline-color: var(--ambar);
}

/* O main recebe foco pelo link de pular. Sem isto o navegador desenha um
   contorno em volta da página inteira. O foco vai para lá de qualquer
   jeito — só não fica visível, porque quem precisa ver é o conteúdo. */
main:focus { outline: none; }

/* --- estrutura ---------------------------------------------------------- */
.faixa {
  max-width: var(--faixa);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.secao { padding-block: clamp(2.5rem, 8vw, 5rem); }
.secao--escura { background: var(--verde); color: var(--creme); }
.secao--tinta  { background: var(--tinta); }

.topo {
  background: var(--verde);
  padding: 0.75rem 1.25rem 0.25rem;
}
.topo-marca { width: 9.5rem; max-width: 45vw; }

/* --- herói -------------------------------------------------------------- */
.heroi { padding-top: clamp(1rem, 4vw, 2.5rem); }
.heroi-sub {
  font-size: clamp(1.1875rem, 2.4vw, 1.4rem);
  max-width: 34rem;
  margin-bottom: 1.5rem;
}
/* A linha de honestidade de plataforma, aprovada em 04/09. Fica ACIMA DA
   DOBRA, logo abaixo dos botões. Corpo cheio (1.1875rem) e opacidade cheia:
   a regra é explícita — não é letra miúda nem cinza claro. */
.heroi-aviso {
  margin: 1.25rem 0 0;
  max-width: 34rem;
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--creme);
  background: rgba(244, 242, 236, 0.10);
  border-left: 6px solid var(--ambar);
  border-radius: 0 var(--raio) var(--raio) 0;
  padding: 0.875rem 1.125rem;
}

.heroi-nota {
  margin-top: 1.25rem;
  margin-bottom: 0;
  font-size: 1rem;
  color: var(--creme);
  opacity: 0.85;
}

/* --- botões ------------------------------------------------------------- */
.botoes {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  align-items: stretch;
  max-width: 30rem;
}
.botoes--centro { margin-inline: auto; }

.botao {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;                 /* 56px — mesma régua do aplicativo */
  padding: 0.75rem 1.5rem;
  border-radius: var(--raio);
  font-size: 1.1875rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 3px solid transparent;
}
.botao--principal {
  background: var(--ambar);
  color: var(--verde-escuro);
  border-color: var(--ambar);
}
.botao--principal:hover { background: #D2971F; border-color: #D2971F; }

.botao--secundario {
  background: transparent;
  color: var(--creme);
  border-color: var(--creme);
}
.botao--secundario:hover { background: rgba(244, 242, 236, 0.12); }

/* fora de seção escura, o secundário inverte */
.secao:not(.secao--escura) .botao--secundario {
  color: var(--verde);
  border-color: var(--verde);
}

@media (min-width: 34em) {
  .botoes { flex-direction: row; flex-wrap: wrap; }
  /* Escopado em .botoes de propósito: solto, o flex-basis alcança botão
     dentro de contêiner flex COLUMN, e ali a base de 13rem vira ALTURA.
     Medido no antigo formulário: botão de 180px de altura. */
  .botoes > .botao { flex: 1 1 13rem; }
}

/* --- a prova da seção do alarme ------------------------------------------
   Uma coluna no celular: captura, depois o aviso de plataforma. A partir de
   46em, duas colunas: a captura (15rem, mesma régua das capturas da seção 4)
   à esquerda e o aviso ao lado, centrado na altura da captura, como a `.dupla`
   da seção 4 (colado no topo, sobrava coluna vazia embaixo). O clipe do aparelho
   tocando é pendência aberta (RELATORIO.md, ADENDO 7); quando entrar, vira a
   segunda prova e o aviso volta para baixo da grade. Os placeholders
   vermelhos saíram em 05/09, na liberação para publicação. */
.provas {
  display: grid;
  gap: 1.5rem;
  margin: 2rem 0;
}
@media (min-width: 46em) {
  .provas { grid-template-columns: 15rem minmax(0, 1fr); align-items: center; }
}

/* A captura real da seção 2 (a tela de alarme). Reusa .tela (largura 100%,
   teto de 15rem, mesma moldura das capturas da seção 4); a legenda segue o
   corpo secundário de 16px do resto da página. */
.prova { margin: 0; }
.prova figcaption {
  font-size: 1rem;
  color: var(--meta);
  margin-top: 0.625rem;
  max-width: 15rem;
}

/* --- aviso honesto (Android) -------------------------------------------- */
.aviso {
  border-left: 6px solid var(--ambar);
  background: var(--tinta);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--raio) var(--raio) 0;
  max-width: var(--prosa);
  margin-bottom: 2.5rem;
}
/* Dentro da grade da prova o espaçamento é da grade, não do parágrafo. */
.provas .aviso { margin-bottom: 0; }
.secao--tinta .aviso { background: var(--creme); }

/* --- bloco do aplicativo Android (seção 2) ------------------------------ */
.captura {
  background: var(--verde);
  color: var(--creme);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border-radius: var(--raio);
}
.captura h3 { margin-top: 0; }

.miudo {
  font-size: 1rem;
  color: var(--meta);
  margin-top: 1rem;
  margin-bottom: 0;
}
.captura .miudo { color: var(--creme); opacity: 0.85; }

/* --- duas colunas: quem toma / quem acompanha ---------------------------- */
.destaque {
  font-size: clamp(1.1875rem, 2.4vw, 1.375rem);
  font-weight: 700;
  max-width: 34rem;
  margin-bottom: 2rem;
}

.colunas {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 46em) {
  .colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cartao {
  background: var(--creme);
  border: 2px solid rgba(20, 69, 61, 0.15);
  border-radius: var(--raio);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.cartao h3 { margin-top: 0; }

.lista { margin: 0; padding-left: 1.15rem; max-width: var(--prosa); }
.lista li { margin-bottom: 0.75rem; }
.lista li:last-child { margin-bottom: 0; }
.lista--clara { font-size: clamp(1.1875rem, 2.2vw, 1.3rem); }

/* --- capturas de tela integradas ---------------------------------------- */
.dupla {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 3rem;
}
.dupla:last-child { margin-bottom: 0; }
@media (min-width: 46em) {
  .dupla { grid-template-columns: 15rem minmax(0, 1fr); }
  .dupla--invertida .tela     { order: 2; }
  .dupla--invertida .dupla-txt { order: 1; }
  .dupla--invertida { grid-template-columns: minmax(0, 1fr) 15rem; }
}

.tela {
  width: 100%;
  max-width: 15rem;
  border-radius: var(--raio);
  border: 2px solid rgba(20, 69, 61, 0.15);
}
.dupla-txt h3 { margin-top: 0; }
.dupla-txt p:last-child { margin-bottom: 0; }

/* --- planos -------------------------------------------------------------- */
.planos {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 2rem;
}
@media (min-width: 52em) {
  .planos { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

.plano {
  background: var(--creme);
  border: 2px solid rgba(20, 69, 61, 0.15);
  border-radius: var(--raio);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.plano h3 { margin-top: 0; margin-bottom: 0.25rem; }
.plano-valor {
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 0.25rem;
}
.plano-equiv { font-size: 1rem; color: var(--meta); margin-bottom: 1rem; }

.plano--destaque { border: 3px solid var(--ambar); position: relative; }
.plano-selo {
  display: inline-block;
  background: var(--verde);
  color: var(--creme);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
  /* "MAIS ECONÔMICO" era a única coisa que ainda estourava a 150px de
     largura (celular a 200% de zoom). Medido antes de corrigir. */
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* --- o que o app não é --------------------------------------------------- */
.moldura {
  border: 3px solid var(--verde);
  border-radius: var(--raio);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
.moldura h2 { margin-top: 0; }
.moldura p:last-child { margin-bottom: 0; }

/* --- rodapé -------------------------------------------------------------- */
.rodape {
  background: var(--verde);
  color: var(--creme);
  padding-block: clamp(2rem, 6vw, 3rem);
}
.rodape-marca { width: 8rem; max-width: 40vw; margin-bottom: 1.25rem; }
.rodape-empresa { font-size: 1rem; margin-bottom: 1.25rem; }

.rodape-links { list-style: none; margin: 0; padding: 0; }
.rodape-links li { margin-bottom: 0.75rem; }
.rodape-links a {
  color: var(--creme);
  text-decoration: underline;
  text-underline-offset: 4px;
  /* Alvo de toque: 44px é o piso da WCAG 2.5.8. Com padding de 0.25rem o
     link media ~33,6px de altura — reprovava. flex + min-height é mais
     robusto que contar padding contra line-height. */
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}
.rodape-links a:hover { color: var(--ambar); }

/* --- aviso de cookies (LGPD) ---------------------------------------------
   Só aparece quando o META_PIXEL_ID do index.html estiver preenchido; sem
   ID o bloco nasce com [hidden] e o script devolve antes de mexer nele.

   Fundo verde sobre a página creme, encostado embaixo. NÃO usa position:
   fixed: numa viewport de 150px (200% de zoom, a régua do CLAUDE.md) uma
   barra fixa cobre o formulário e não tem como rolar para longe dela. No
   fim do fluxo ele empurra o rodapé e some da leitura depois de decidido.

   Os dois botões têm o MESMO peso visual e a mesma altura de 56px: pela
   LGPD recusar precisa ser tão fácil quanto aceitar, e no celular estreito
   eles empilham em vez de espremer. */
.cookies {
  background: var(--verde);
  color: var(--creme);
  padding-block: clamp(1.25rem, 5vw, 2rem);
  border-top: 4px solid var(--ambar);
}
.cookies-caixa {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.cookies-texto {
  margin: 0;
  max-width: var(--prosa);
}
.cookies-botoes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.cookies-botoes > * { min-width: 0; }

@media (min-width: 34em) {
  .cookies-botoes { flex-direction: row; }
  /* flex-basis com min-width:0 acima — sem ele o botão não encolhe abaixo
     do min-content e estoura, que é o mesmo defeito já documentado em
     .botoes mais acima neste arquivo. */
  .cookies-botoes > .botao { flex: 1 1 10rem; }
}

/* --- página /instalar ----------------------------------------------------
   Reaproveita .dupla (coluna de 15rem + texto), a mesma da seção 4. O vídeo
   entra na coluna estreita, com a mesma régua de .tela. */
.video {
  display: block;
  width: 100%;
  max-width: 15rem;
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: var(--raio);
  border: 2px solid rgba(20, 69, 61, 0.15);
  background: var(--verde);
}

/* Enquanto o arquivo não existe, o <video> fica fora da árvore de exibição
   (um src quebrado desenha um retângulo preto e um ícone de erro) e o aviso
   ocupa o lugar. Tirar a classe quando o mp4 entrar em site/materiais/. */
.video-caixa--pendente .video { display: none; }
.video-caixa .video-aviso { display: none; }
.video-caixa--pendente .video-aviso {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: 15rem;
  aspect-ratio: 9 / 16;
  margin: 0;
  padding: 1.25rem;
  border-radius: var(--raio);
  border: 2px dashed rgba(20, 69, 61, 0.35);
  color: var(--meta);
  font-size: 1.0625rem;
}
.secao--tinta .video-caixa--pendente .video-aviso { background: var(--creme); }

.passos {
  margin: 0;
  padding-left: 1.6rem;
  max-width: var(--prosa);
  font-size: clamp(1.1875rem, 2.2vw, 1.3rem);
}
.passos li { margin-bottom: 0.9rem; }
.passos li:last-child { margin-bottom: 0; }