/* ═══════════════════════════════════════════════════════════════════════════
   LANDING — folha própria da página inicial

   POR QUE UM ARQUIVO SEPARADO, e não linhas novas em `estilo.css`: aquele
   arquivo é a base compartilhada de `sobre`, `ajuda` e `contato`, e carrega os
   tokens que a suíte `testar-espelho-design.js` confere contra o aplicativo.
   Mexer nele para acomodar uma página arriscaria as outras três e a guarda.
   Aqui só há o que é da inicial.

   TUDO USA OS TOKENS DE `estilo.css`. Nenhuma cor literal nova: a paleta é a
   mesma do aplicativo, e é isso que faz as duas superfícies parecerem a mesma
   empresa. A regra do acento único vale — Walnut aparece no botão, e o resto
   da página não o usa como enfeite.

   MOBILE-FIRST. As regras base servem o celular; os `@media (min-width:…)`
   acrescentam largura. Nenhuma regra assume o desktop primeiro.
   ═══════════════════════════════════════════════════════════════════════════ */

.lp {
  /* Largura do miolo. A especificação pediu 1.160–1.280px; 1.180 fica no meio
     e casa com o ritmo de 20px da goteira. */
  --lp-largura: 1180px;
  --lp-goteira: 20px;
  --lp-ar: clamp(56px, 9vw, 104px);      /* respiro vertical entre seções */
  --lp-gap: clamp(16px, 2.4vw, 28px);
  --lp-prosa: 62ch;                       /* medida de leitura confortável */
}
@media (min-width: 760px) { .lp { --lp-goteira: 32px } }

/* O corpo da inicial rola; as internas não precisavam disso. */
.lp .pagina { min-height: 100dvh }

/* ── PULAR PARA O CONTEÚDO ────────────────────────────────────────────────
   Primeiro item tabulável da página. Fica fora da tela até receber foco —
   `display:none` o tiraria da ordem de tabulação e o inutilizaria. */
.pular {
  position: absolute; left: 8px; top: -60px; z-index: 50;
  padding: 10px 16px; border-radius: var(--r-controle);
  background: var(--walnut); color: var(--paper);
  text-decoration: none; font-weight: 500;
  transition: top .18s var(--saida);
}
.pular:focus-visible { top: 8px }

/* ── BARRA DE LANÇAMENTO ──────────────────────────────────────────────────
   Olive sólido com Cream por cima: a mesma combinação do cabeçalho do
   aplicativo, medida em 8.6:1. Não é fixa — barra fixa mais cabeçalho fixo
   come um terço da tela do celular, que é o que a especificação pediu evitar. */
.lancamento {
  background: var(--olive-deep); color: var(--cream);
  padding: 10px var(--lp-goteira); text-align: center;
  font-size: .92rem; line-height: 1.5;
}
.lancamento p { max-width: var(--lp-largura); margin: 0 auto }
.lancamento strong { color: #fff; font-weight: 600 }
.lancamento a {
  color: var(--cream); text-decoration: underline;
  text-underline-offset: 3px; white-space: nowrap; margin-left: 6px;
}
.lancamento a:hover { color: #fff }

/* ── O BOTÃO NO TOPO ──────────────────────────────────────────────────────
   Some no celular: o cabeçalho já tem marca, cinco destinos e o sol/lua, e um
   sexto item empurraria a navegação para duas linhas. O mesmo destino está no
   primeiro botão do hero, a um rolar de distância. */
.acao-topo { display: none }
@media (min-width: 900px) {
  .acao-topo { display: inline-flex; padding: 9px 18px; font-size: .93rem }
}
/* A COR DO RÓTULO, e por que precisa desta especificidade: `.topo .paginas a`
   pinta todo link do cabeçalho com a cor do texto de navegação, e vence
   `.acao` por ser mais específica. Sem esta regra o botão nasce nogueira sobre
   nogueira — medido no render de 30/07/2026, texto invisível. */
.topo .paginas a.acao { color: var(--paper) }
.topo .paginas a.acao:hover { color: #fff }

/* ── A NAVEGAÇÃO QUEBRA LINHA NO ESTREITO ─────────────────────────────────
   `estilo.css` faz `.topo` quebrar abaixo de 720px, mas `.topo .paginas`
   continua `flex` SEM `wrap`. Com os quatro destinos das internas isso cabia;
   com os cinco desta página mais o sol/lua, a barra vira uma linha indivisível
   mais larga que a tela — e, sendo filha de uma grade, ela estica a PÁGINA
   inteira. Medido no render de 390px em 30/07/2026: todo o texto da página
   saía cortado à direita, e a causa não estava em nenhuma seção.

   Sem menu sanfona de propósito: ele custaria JavaScript para resolver o que
   duas linhas de navegação resolvem de graça. */
@media (max-width: 900px) {
  .lp .topo .paginas { flex-wrap: wrap; row-gap: 6px; column-gap: 16px }
}

/* ── MIOLO ────────────────────────────────────────────────────────────────── */
.lp main { display: block }
/* Rede contra transbordo horizontal: nenhum filho de grade ou flex deve poder
   empurrar a página além da tela. `min-width:0` é o que desliga o `auto` que o
   navegador usa por padrão e que é a causa da maioria destes casos. */
.lp .secao > *, .lp .hero > *, .lp .cartoes > *, .lp .passos > * { min-width: 0 }

.secao {
  padding: var(--lp-ar) var(--lp-goteira);
}
.secao > * { max-width: var(--lp-largura); margin-inline: auto }

/* As duas superfícies alternadas. Claro é o padrão (Paper); `secao-clara` é o
   degrau mais claro para separar blocos vizinhos sem linha; `secao-escura` é a
   inversão, e leva Cream por cima de Olive. */
.secao-clara { background: color-mix(in srgb, var(--paper) 55%, #fff) }
.secao-escura { background: var(--olive-deep); color: var(--cream) }
.secao-escura h2, .secao-escura h3 { color: #fff }
.secao-escura .secao-apoio { color: var(--cream) }
.secao-escura .kicker { color: var(--cream-fraco) }

/* `margin-inline: 0 auto` e não `auto`: a regra `.secao > *` acima centraliza
   tudo que é mais estreito que o contêiner, e a cabeça É mais estreita — daí
   ela nascia centralizada enquanto a grade de cartões ficava à esquerda. Duas
   margens diferentes na mesma seção leem como desalinhamento, não como ritmo. */
.secao-cabeca {
  margin-block: 0 clamp(28px, 4vw, 48px);
  margin-inline: 0 auto;
  max-width: var(--lp-prosa);
}
.secao-fecho .secao-cabeca { margin-inline: auto }
.secao-cabeca h2 {
  font-size: clamp(1.55rem, 3.6vw, 2.35rem);
  line-height: 1.18; letter-spacing: -.012em;
  margin: 8px 0 0; text-wrap: balance;
}
.secao-apoio {
  margin: 14px 0 0; font-size: clamp(1rem, 1.6vw, 1.09rem);
  line-height: 1.62; color: var(--olive);
}

/* ── HERO ─────────────────────────────────────────────────────────────────── */
.hero {
  display: grid; gap: clamp(32px, 5vw, 56px);
  padding: clamp(40px, 6vw, 76px) var(--lp-goteira) var(--lp-ar);
  max-width: var(--lp-largura); margin-inline: auto;
}
@media (min-width: 940px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); align-items: center }
}
.hero-fala { max-width: 34rem }
.hero h1 {
  font-size: clamp(2rem, 5.4vw, 3.15rem);
  line-height: 1.08; letter-spacing: -.022em;
  margin: 10px 0 0; text-wrap: balance;
}
.hero .apoio {
  margin: 18px 0 0; font-size: clamp(1.02rem, 1.8vw, 1.16rem);
  line-height: 1.6; color: var(--olive); max-width: 40ch;
}
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px }
.acoes-centro { justify-content: center }
.micro { margin: 14px 0 0; font-size: .88rem; color: var(--sage) }

/* ── A JANELA DO PRODUTO ──────────────────────────────────────────────────
   Representação em HTML, e não captura de tela: captura envelhece calada, e
   uma maquete desatualizada é pior que maquete nenhuma — foi por isso que a
   vitrine anterior saiu em 30/07/2026.
   A ESCALA é a do aplicativo (corpo pequeno, raio curto); a PALETA é a mesma
   dos dois. É a divergência decidida em direcao-visual.md: mesma paleta,
   gramática diferente. */
.hero-produto { margin: 0 }
.janela {
  background: var(--p-papel);
  border: 1px solid var(--p-linha);
  border-radius: var(--r-janela);
  box-shadow: 0 18px 44px -28px rgba(44, 46, 34, .42);
  overflow: hidden;
  font-family: var(--p-fonte);
}
.janela-topo {
  display: flex; align-items: center; gap: 8px;
  background: var(--p-cabecalho); color: var(--p-cream);
  padding: 9px 14px; font-size: .78rem; letter-spacing: .04em;
}
.janela-no { width: 16px; height: 16px; fill: none; stroke: var(--p-cream); stroke-width: 6 }
.janela-corpo { padding: 16px 14px; display: grid; gap: 10px }

.bolha {
  margin: 0; padding: 9px 12px; border-radius: 9px;
  font-size: .82rem; line-height: 1.5; max-width: 88%;
}
.bolha-eu { background: var(--p-sage-claro); color: var(--p-tinta); justify-self: end }
.bolha-otto { background: var(--p-branco); border: 1px solid var(--p-linha-fraca); color: var(--p-tinta) }

.pendencias { margin: 0; padding: 0 0 0 2px; list-style: none; display: grid; gap: 5px }
.pendencias li { font-size: .78rem; color: var(--p-mudo); display: flex; gap: 7px; align-items: baseline }
.marca-pend {
  flex: 0 0 auto; font-size: .64rem; text-transform: uppercase; letter-spacing: .07em;
  background: #F0EAE1; color: #6F4812; padding: 2px 6px; border-radius: 4px;
}

.entrega {
  margin-top: 3px; padding: 11px 12px;
  background: var(--p-branco); border: 1px solid var(--p-linha-fraca); border-radius: 8px;
}
.entrega-titulo { margin: 0; font-size: .84rem; font-weight: 600; color: var(--p-tinta) }
.ext { font-weight: 400; color: var(--p-mudo); font-size: .76rem }
.entrega-nota { margin: 6px 0 0; font-size: .74rem; line-height: 1.45; color: var(--p-mudo) }
.selo-ok {
  display: inline-block; margin-right: 5px;
  background: var(--p-selo-fundo); color: var(--p-selo);
  font-size: .64rem; text-transform: uppercase; letter-spacing: .07em;
  padding: 2px 6px; border-radius: 4px;
}
.hero-produto figcaption {
  margin-top: 12px; font-size: .8rem; line-height: 1.5;
  color: var(--sage); max-width: 46ch;
}

/* ── FAIXA DE CONFIANÇA ───────────────────────────────────────────────────── */
.faixa {
  border-block: 1px solid var(--taupe);
  background: color-mix(in srgb, var(--paper) 40%, #fff);
  padding: 20px var(--lp-goteira);
}
.faixa ul {
  max-width: var(--lp-largura); margin-inline: auto;
  list-style: none; padding: 0;
  display: grid; gap: 10px var(--lp-gap);
  font-size: .92rem; color: var(--olive);
}
@media (min-width: 700px) { .faixa ul { grid-template-columns: repeat(4, 1fr); text-align: center } }

/* ── LISTAS DE DORES / FUTURO ─────────────────────────────────────────────── */
.dores {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 12px var(--lp-gap);
}
@media (min-width: 640px) { .dores { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 980px) { .dores { grid-template-columns: repeat(3, 1fr) } }
.dores li {
  padding: 14px 16px; background: #fff;
  border: 1px solid var(--linha-fraca, #E4DACA); border-radius: 12px;
  font-size: .96rem; line-height: 1.5; color: var(--ink);
}
.dores-futuro li { background: transparent; border-style: dashed; color: var(--olive) }

/* ── PASSOS ───────────────────────────────────────────────────────────────── */
.passos {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--lp-gap); counter-reset: passo;
}
@media (min-width: 700px) { .passos { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 1040px) { .passos { grid-template-columns: repeat(5, 1fr) } }
.passos li { display: grid; gap: 8px; align-content: start }
.passo-n {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 999px; background: var(--olive); color: var(--cream);
  font-size: .92rem; font-weight: 600;
}
.passos h3 { margin: 4px 0 0; font-size: 1.04rem }
.passos p { margin: 0; font-size: .94rem; line-height: 1.55; color: var(--olive) }

/* ── CARTÕES ──────────────────────────────────────────────────────────────── */
.cartoes { display: grid; gap: var(--lp-gap) }
@media (min-width: 680px) { .cartoes { grid-template-columns: repeat(2, 1fr) } }
/* O número no nome é o número de COLUNAS no largo, e não o de cartões — três
   cartões numa grade de quatro deixavam um buraco à direita que lia como
   cartão faltando. */
@media (min-width: 1020px) {
  .cartoes-4 { grid-template-columns: repeat(4, 1fr) }
  .cartoes-3 { grid-template-columns: repeat(3, 1fr) }
  .cartoes-2 { grid-template-columns: repeat(2, 1fr) }
}
.cartao {
  padding: 20px; background: #fff;
  border: 1px solid var(--linha-fraca, #E4DACA);
  border-radius: 14px;
}
.cartao h3 { margin: 0; font-size: 1.03rem; line-height: 1.3 }
.cartao p { margin: 9px 0 0; font-size: .94rem; line-height: 1.56; color: var(--olive) }
.secao-escura .cartao {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(232, 220, 197, .2);
}
.secao-escura .cartao p { color: var(--cream) }
.cartao-uso h3 { color: var(--walnut) }

/* O limite dito de frente. Recuado e discreto de propósito: é ressalva, não
   destaque — mas fica na página, porque omiti-la é que seria a escolha. */
.limite {
  margin: clamp(24px, 3vw, 36px) 0 0; padding-left: 16px;
  border-left: 2px solid var(--taupe);
  font-size: .92rem; line-height: 1.62; max-width: var(--lp-prosa);
  color: var(--olive);
}
.secao-escura .limite { border-left-color: var(--walnut-claro); color: var(--cream) }
.secao-escura .limite strong { color: #fff }

/* ── PLANOS ───────────────────────────────────────────────────────────────── */
.cartao-plano { display: flex; flex-direction: column; gap: 14px; padding: 24px }
.plano-preco { margin: 0; font-size: 1.5rem; font-weight: 600; color: var(--ink); line-height: 1.2 }
.plano-preco span { display: block; font-size: .88rem; font-weight: 400; color: var(--sage); margin-top: 4px }
.plano-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; flex: 1 }
.plano-lista li {
  font-size: .94rem; line-height: 1.5; color: var(--olive);
  padding-left: 20px; position: relative;
}
.plano-lista li::before {
  content: ""; position: absolute; left: 2px; top: .52em;
  width: 8px; height: 8px; border-radius: 999px; background: var(--sage);
}
.cartao-plano .acao, .cartao-plano .acao-quieta { align-self: flex-start }
.plano-nota { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--sage) }

/* O rótulo de pendência. Existe para que conteúdo provisório seja VISIVELMENTE
   provisório — a especificação pediu isso, e é também o que impede a página de
   afirmar o que ainda não foi decidido. */
.pendente {
  display: inline-block;
  background: #F0EAE1; color: #6F4812;
  font-size: .74rem; font-weight: 600;
  padding: 2px 8px; border-radius: 5px; margin-right: 4px;
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq { display: grid; gap: 10px; max-width: 76ch }
.faq details {
  background: #fff; border: 1px solid var(--linha-fraca, #E4DACA);
  border-radius: 12px; overflow: hidden;
}
.faq summary {
  padding: 15px 18px; cursor: pointer; font-weight: 500;
  font-size: 1rem; line-height: 1.45; list-style: none;
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none }
.faq summary::after {
  content: "+"; flex: 0 0 auto; font-size: 1.2rem; color: var(--sage);
  transition: transform .2s var(--saida);
}
.faq details[open] summary::after { transform: rotate(45deg) }
.faq details p { margin: 0; padding: 0 18px 17px; font-size: .95rem; line-height: 1.62; color: var(--olive) }

/* ── FECHO ────────────────────────────────────────────────────────────────── */
.secao-fecho { text-align: center }
.secao-fecho .secao-cabeca { max-width: 46ch; margin-inline: auto }
.elos-legais {
  margin: clamp(22px, 3vw, 32px) 0 0; font-size: .9rem;
  line-height: 1.6; color: var(--cream);
}
.elos-legais a { color: var(--walnut-claro); text-decoration: underline; text-underline-offset: 3px }

/* ═══════════════════════════════════════════════════════════════════════════
   A MESMA PÁGINA, DE NOITE

   Os tokens NÃO invertem sozinhos — `estilo.css` inverte superfície por
   superfície, e esta folha precisa fazer o mesmo. Sem este bloco a página
   nascia com creme sobre papel claro em duas seções inteiras, ilegível.
   Achado no render de 30/07/2026, não na leitura do código.

   A REGRA QUE MAIS IMPORTA AQUI é a da nogueira: `--walnut` sobre `--ink` mede
   **1.63:1**, e o próprio `estilo.css` diz que isso "não é pouco contraste, é
   invisível". Todo texto que era Walnut vira `--walnut-claro` (5.51:1). Botão
   CHEIO continua Walnut puro, porque ali ele é fundo e leva Paper por cima.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-tema=escuro] .lp .secao-clara { background: rgba(255, 255, 255, .035) }
[data-tema=escuro] .lp .faixa {
  background: rgba(255, 255, 255, .022);
  border-block-color: rgba(232, 220, 197, .16);
}

/* Texto de apoio: onde era Olive (escuro sobre claro) passa a Cream Dim. */
[data-tema=escuro] .lp .secao-apoio,
[data-tema=escuro] .lp .hero .apoio,
[data-tema=escuro] .lp .faixa ul,
[data-tema=escuro] .lp .passos p,
[data-tema=escuro] .lp .cartao p,
[data-tema=escuro] .lp .plano-lista li,
[data-tema=escuro] .lp .faq details p,
[data-tema=escuro] .lp .limite { color: var(--cream-fraco) }

/* Os textos discretos usavam Sage, que sobre Ink fica no limite. Cream Dim
   resolve sem inventar cor nova. */
[data-tema=escuro] .lp .micro,
[data-tema=escuro] .lp .plano-nota,
[data-tema=escuro] .lp .hero-produto figcaption { color: var(--cream-fraco) }

/* Cartões e caixas: de papel branco para vidro sobre Ink. */
[data-tema=escuro] .lp .cartao,
[data-tema=escuro] .lp .dores li,
[data-tema=escuro] .lp .faq details {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(232, 220, 197, .2);
  color: var(--cream);
}
[data-tema=escuro] .lp .dores-futuro li { background: transparent; color: var(--cream-fraco) }
[data-tema=escuro] .lp .plano-preco { color: #fff }
[data-tema=escuro] .lp .plano-preco span { color: var(--cream-fraco) }
[data-tema=escuro] .lp .limite { border-left-color: var(--walnut-claro) }
[data-tema=escuro] .lp .limite strong { color: #fff }
[data-tema=escuro] .lp .faq summary::after { color: var(--cream-fraco) }
[data-tema=escuro] .lp .plano-lista li::before { background: var(--cream-fraco) }

/* A NOGUEIRA COMO TEXTO — o caso que o estilo.css chama de invisível. */
[data-tema=escuro] .lp .cartao-uso h3 { color: var(--walnut-claro) }
[data-tema=escuro] .lp .elos-legais a { color: var(--walnut-claro) }

/* A janela do produto NÃO inverte, de propósito: ela representa o aplicativo,
   e os tokens `--p-*` são os do modelo de cor claro dele. Invertê-la aqui a
   faria mostrar uma tela que o mockup não está declarando. */

/* ── ACESSIBILIDADE ───────────────────────────────────────────────────────── */
/* Foco visível em tudo que recebe foco. `:focus-visible` e não `:focus` para
   não desenhar anel em clique de mouse, que ninguém pediu. */
.lp a:focus-visible,
.lp button:focus-visible,
.lp summary:focus-visible {
  outline: 2px solid var(--walnut);
  outline-offset: 2px;
  border-radius: 4px;
}
.secao-escura a:focus-visible { outline-color: var(--cream) }

/* Área de toque confortável no celular, sem inflar o desktop. */
@media (max-width: 700px) {
  .acoes .acao, .acoes .acao-quieta { width: 100%; text-align: center; justify-content: center }
  .faq summary { padding-block: 17px }
}

/* Quem pede menos movimento recebe a página parada — não a página sem nada.
   Esconder em vez de parar tiraria informação de quem tem vertigem. */
@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}