/* Estilo das PAGINAS DE VENDA. UM arquivo para os dois mercados publicados (PT e ES).
   ⛔ NAO COPIAR ESTE ARQUIVO por idioma — mesma regra de produto/html/_estilo.css.
   Cada mercado tem PALETA PROPRIA e ela vive num bloco html[lang^=...] aqui dentro.
   A intencao de cada token esta em mercados/<mercado>/identidade/paleta.md. Mudou la, muda aqui.

   ⚠️ ESTE ARQUIVO NAO HERDA NADA DE produto/html/_estilo.css.
   Aquele e' de impressao: pensa em mm, em folha e em @page. Colar aquilo numa pagina web
   produz uma coluna de 210mm que estoura no celular. Os TOKENS sao os mesmos; o layout, nao. */

/* ---------- Sentinela ----------
   Mesma trava do livro: sem lang reconhecido, TUDO fica magenta e o defeito aparece,
   em vez de a pagina renderizar calada com a paleta do pais errado. */
:root {
  --tinta: #ff00ff; --suave: #ff00ff; --papel: #ff00ff;
  --destaque: #ff00ff; --linha: #ff00ff; --alerta: #ff00ff;
  --acento-good: #ff00ff; --acento-better: #ff00ff;
  --acento-best: #ff00ff; --acento-bump: #ff00ff;
}

/* 🇧🇷 CASA COM CACHORRO — terracota de barro sobre papel morno. */
html[lang^="pt"] {
  --tinta:   #241c17;
  --suave:   #6b5d52;
  --papel:   #fbf7f2;
  --destaque:#a8562c;
  --linha:   #e3d9cd;
  --alerta:  #8c2f1d;
  --acento-good:   #c9b79a;
  --acento-better: #e08a4f;
  --acento-best:   #d9a441;
  --acento-bump:   #a3b18a;
}

/* 🇲🇽 AQUI VIVE UN PERRO — azul talavera e cempasuchil. ⛔ Nao e' a paleta PT em espanhol. */
html[lang^="es"] {
  --tinta:   #1f2733;
  --suave:   #5d6b78;
  --papel:   #faf6ee;
  --destaque:#1d6a8c;
  --linha:   #dde2dc;
  --alerta:  #a33417;
  --acento-good:   #cfd8c4;
  --acento-better: #e8a33d;
  --acento-best:   #e0805f;
  --acento-bump:   #7fb0a3;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ⚠️ `clip`, NUNCA `hidden`. `overflow-x: hidden` na raiz mata o position:sticky e o
   scroll-behavior de qualquer descendente. Vale nos DOIS elementos. */
html, body { overflow-x: clip; }

html { scroll-behavior: smooth; color-scheme: light; }

body {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--tinta);
  background: var(--papel);          /* explicito: fundo transparente pegaria o do navegador */
  line-height: 1.6;
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
}

/* Titulo longo em tela de 320px quebra DENTRO da palavra em vez de estourar a lateral. */
h1, h2, h3 { overflow-wrap: anywhere; min-width: 0; }
/* Sem viuva no titulo; onde o navegador nao suporta, nao faz nada. */
h1, h2 { text-wrap: balance; }

/* `height: auto` porque as <img> agora declaram width/height intrinsecos (anti-CLS):
   sem isso, o atributo height venceria o width fluido do CSS e esticaria a foto. */
img { max-width: 100%; display: block; height: auto; }

/* Verdana nos utilitarios, igual ao livro: kicker, preco, botao, rotulo, nota. */
.kicker, .selo, .preco, .cta, .cta-nota, .rotulo, .credito, .nota, .metrica b {
  font-family: Verdana, Geneva, sans-serif;
}

/* ---------- Estrutura ---------- */
.faixa { padding: 4.5rem 1.25rem; }
/* Chegada por ancora (#oferta) nao cola no topo da tela. */
.faixa[id] { scroll-margin-top: 1.25rem; }
.faixa--escura { background: var(--tinta); color: var(--papel); }

/* ⚠️ A CORRECAO QUE O GATE DE CONTRASTE OBRIGOU (medido, nao a olho).
   `--suave` e' um tom MEDIO, desenhado para viver sobre `--papel`. Sobre `--tinta` ele
   mede 2,64:1 no PT e 2,75:1 no ES — abaixo do piso de 4,5:1, ou seja, texto que existe
   no DOM e some na tela. Eram 14 trechos por pagina: kicker do hero, descricao dos itens,
   rotulo das metricas e as notas.
   Em vez de caçar seletor por seletor, o token e' REDEFINIDO dentro do escopo escuro —
   um lugar so', e tudo que herda `--suave` ali passa a herdar a versao clara.
   `--acento-good` sobre `--tinta` mede 8,7:1 no PT. */
.hero, .faixa--escura { --suave: var(--acento-good); }
.faixa--linha  { border-top: 1px solid var(--linha); }
.centro { max-width: 62rem; margin: 0 auto; }
.centro--estreito { max-width: 40rem; }   /* medida de leitura: texto corrido nunca passa daqui */

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--destaque); margin-bottom: 1.5rem; }
.faixa--escura h2 { color: var(--acento-better); }
h3 { font-size: 1.15rem; margin-bottom: .4rem; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* ⚠️ ACHADO PARA A PALETA, medido em 2026-08-12 e nao inventado aqui:
   `--suave` sobre `--papel` mede 3,31:1 no PT e 3,84:1 no ES — ABAIXO do setpoint de
   4,5:1 que o proprio mercados/<mercado>/identidade/paleta.md declara. No livro isso
   passa porque o corpo e' 11.5pt impresso; na web, em rotulo de 12px, o texto fica
   ilegivel para quem enxerga pouco.
   ⛔ Nao invento cor nova (identidade visual e' decisao do dono). Derivo do proprio par
   de tokens: `--suave` escurecido em direcao a `--tinta`, o que sobe o contraste sem
   introduzir nenhum hex que nao exista na paleta registrada. */
:root, html[lang^="pt"], html[lang^="es"] {
  --suave-legivel: color-mix(in srgb, var(--suave) 62%, var(--tinta));
}

.kicker {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--suave-legivel); margin-bottom: 1rem;
}
.hero .kicker, .faixa--escura .kicker { color: var(--acento-good); }
.faixa--escura .kicker { color: var(--acento-good); }

.sub { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--suave); font-style: italic; }
.faixa--escura .sub { color: var(--linha); }

/* ---------- Hero ---------- */
.hero { padding: 3.5rem 1.25rem 3rem; background: var(--tinta); color: var(--papel); }
/* O `.sub` do hero pede um tom ainda mais claro que o `--suave` redefinido acima:
   e' a linha que sustenta a promessa e concorre com o h1. */
.hero .sub { color: var(--linha); }
.hero .centro { display: grid; gap: 2.5rem; align-items: center; }
.hero h1 { margin-bottom: 1.25rem; }
.hero .sub { margin-bottom: 2rem; }
@media (min-width: 62rem) {
  .hero .centro { grid-template-columns: 1.15fr .85fr; gap: 3.5rem; }
}

/* ---------- A oferta antes do primeiro scroll ----------
   Existe porque 60% nao passam da primeira dobra. Nao e' enfeite: e' preco, formato e
   numero de receitas na primeira tela do celular. */
.oferta-rapida {
  font-family: Verdana, Geneva, sans-serif;
  font-size: .88rem;
  line-height: 1.7;
  border-top: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
  padding: .85rem 0;
  margin-bottom: 1.5rem;
  color: var(--linha);
}
.oferta-rapida strong { color: var(--acento-better); }
.ver-opcoes { color: var(--acento-good); text-decoration: underline; }
.faixa--escura .ver-opcoes, .hero .ver-opcoes { color: var(--acento-good); }

/* ---------- Mockup de capa: o desenho real da capa, sem inventar arte ---------- */
.mock {
  background: var(--tinta);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
  padding: 0 0 1.75rem;
  text-align: center;
  border-radius: 2px;
  overflow: hidden;
}
.mock img { width: 100%; height: 190px; object-fit: cover; filter: saturate(.92); }
.mock .marca { font-size: 1.5rem; color: var(--papel); margin: 1.4rem 1rem .35rem; line-height: 1.1; }
.mock .tier  { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: .7rem;
               font-family: Verdana, Geneva, sans-serif; }
.mock .linha-sub { font-size: .9rem; color: #c9bcae; font-style: italic; margin: 0 1.25rem; }
.mock[data-tier="good"]   .tier { color: var(--acento-good); }
.mock[data-tier="better"] .tier { color: var(--acento-better); }
.mock[data-tier="best"]   .tier { color: var(--acento-best); }
.mock[data-tier="bump"]   .tier { color: var(--acento-bump); }
.credito { font-size: .62rem; color: var(--suave-legivel); margin-top: .6rem; }
.hero .credito, .faixa--escura .credito { color: var(--acento-good); }

/* ---------- O que tem dentro ---------- */
/* ⚠️ minmax(0, 1fr), nunca `1fr` puro: uma faixa de grade com imagem dentro usa
   `min-width: auto` por padrao e se recusa a encolher abaixo da largura da imagem —
   e a pagina passa a rolar de lado no celular. */
.grade { display: grid; gap: 1.5rem; }
@media (min-width: 46rem) { .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.item { border-left: 3px solid var(--destaque); padding-left: 1.1rem; }
.item p { color: var(--suave); font-size: .95rem; margin: 0; }

.metricas { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 2.5rem; }
.metrica b { display: block; font-size: 2.1rem; color: var(--destaque); line-height: 1; }
.metrica span { font-size: .82rem; color: var(--suave); }

/* ---------- A OFERTA — uma so' ----------
   ⚠️ Aqui morreu a escada de tres cards (13/08/2026). Nao foi capricho: em produto de
   compra por impulso, tres opcoes viram fadiga de decisao, e quem hesita nao compra.
   A escada Good-Better-Best tinha vindo de uma referencia de SaaS/B2B — contexto em que
   o comprador COMPARA planos com calma. Nao e' este.
   Um card. Um preco. Um botao. O extra pago vive no checkout, nao aqui. */
.oferta {
  max-width: 34rem; margin: 0 auto;
  background: var(--papel);
  border: 2px solid var(--destaque);
  border-top: 6px solid var(--acento-better);
  box-shadow: 0 12px 34px rgba(36,28,23,.10);
  padding: 2rem 1.75rem 1.75rem;
  display: flex; flex-direction: column;
}
.oferta h3 { font-size: 1.45rem; margin: .35rem 0 .3rem; }
.oferta .modulos { font-size: .85rem; color: var(--suave-legivel); margin-bottom: 1.2rem; }

.selo {
  display: inline-block; align-self: flex-start;
  background: var(--acento-better); color: var(--tinta);
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .3rem .6rem; margin-bottom: .9rem;
}
.rotulo { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--suave-legivel); }

/* Os bonus inclusos. Nao sao opcao de compra — sao o que ja vem junto. */
.bonus { border-top: 1px solid var(--linha); margin-top: 1.2rem; padding-top: 1.1rem; }
.bonus p { font-size: .95rem; margin-bottom: .7rem; }
.bonus .rotulo { display: block; margin-bottom: .8rem; }
.bonus strong { color: var(--destaque); }

.preco { font-size: 2.5rem; color: var(--destaque); line-height: 1; margin-bottom: .2rem; }
/* Texto pequeno no card claro: `--suave-legivel` pelo mesmo motivo do FAQ. */
.preco small { font-size: .95rem; color: var(--suave-legivel); }
.parcela { font-size: .85rem; color: var(--suave-legivel); margin-bottom: 1.2rem; }

/* Posicao serial: a 1a linha e a ULTIMA sao as que ficam. O miolo e' buraco negro. */
.lista { list-style: none; margin: 0 0 1.4rem; flex-grow: 1; }
.lista li { padding: .5rem 0 .5rem 1.4rem; position: relative; font-size: .95rem; border-bottom: 1px solid var(--linha); }
.lista li:last-child { border-bottom: 0; }
.lista li::before { content: "·"; position: absolute; left: .35rem; color: var(--destaque); font-weight: bold; }
.lista .gancho { font-weight: bold; }
.lista .fecho  { color: var(--suave-legivel); font-style: italic; }

/* ---------- Quem fala com voce ----------
   ⚠️ E' a camada de confianca que substitui o depoimento que este projeto nao pode ter.
   Das quatro camadas de confianca do acervo, esta e' "um rosto humano real" — a unica
   que faltava, porque as outras tres (oferta que encaixa na dor declarada, mecanismo
   coerente com a promessa, prova verificavel sobre o conteudo) a pagina ja cumpria.

   ⛔ O QUE NUNCA ENTRA NESTE BLOCO, por LIXO_PROIBIDO A.16 e A.17:
     jaleco · estetoscopio · consultorio · qualquer titulo ("especialista", "tecnico")
     · biografia inventada · "ha 15 anos com caes" · numero de anos de nada.
   O rosto e' a voz da marca, nunca uma autoridade sobre saude. Sem historia inventada
   nao existe historia a desmentir. */
.autor { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 46rem) { .autor { grid-template-columns: 230px minmax(0, 1fr); gap: 2.5rem; } }
.autor img {
  width: 100%; max-width: 230px; border-radius: 2px;
  border: 1px solid var(--linha);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.faixa--escura .autor img { border-color: rgba(255,255,255,.16); }
.autor .nome { font-size: 1.15rem; font-family: Verdana, Geneva, sans-serif; margin-bottom: .1rem; }
.autor .papel { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
                color: var(--suave); margin-bottom: 1rem; font-family: Verdana, Geneva, sans-serif; }

/* ---------- A pilha de bonus ----------
   ⛔ Sem preco riscado e sem "valor R$ 97". Nao existe preco anterior destes itens,
   e numero inventado ao lado de "bonus" e' a mentira mais comum de pagina de
   infoproduto — a que o comprador ja aprendeu a reconhecer. */
.bonus-item { display: grid; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--linha); }
.bonus-item:last-of-type { border-bottom: 0; }
@media (min-width: 40rem) { .bonus-item { grid-template-columns: 78px minmax(0, 1fr); align-items: start; } }
.bonus-item .selo-bonus {
  font-family: Verdana, Geneva, sans-serif; font-size: .6rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta); background: var(--acento-bump);
  padding: .3rem .45rem; align-self: start; justify-self: start; white-space: nowrap;
}
.bonus-item h4 { font-size: 1.05rem; margin-bottom: .25rem; }
.bonus-item p { font-size: .93rem; color: var(--suave-legivel); margin: 0; }

/* ---------- Checklist de autodiagnostico ----------
   Substitui a prova social que este projeto nao pode ter. E' texto, nao formulario:
   coletar resposta sobre o cao construiria prontuario (LIXO_PROIBIDO_PET E.4). */
.check { list-style: none; margin: 0 0 1.25rem; }
.check li {
  padding: .7rem 0 .7rem 2.1rem; position: relative;
  border-bottom: 1px solid var(--linha); font-size: 1rem;
}
.check li:last-child { border-bottom: 0; }
.check li::before {
  content: ""; position: absolute; left: .1rem; top: .95rem;
  width: 1.05rem; height: 1.05rem;
  border: 2px solid var(--destaque); border-radius: 2px;
}

/* ---------- Aviso legal: ACIMA do botao, nunca rodape (LIXO_PROIBIDO Grupo C) ---------- */
.aviso {
  border-left: 3px solid var(--alerta);
  background: rgba(0,0,0,.03);
  padding: .85rem 1rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--tinta);
  margin-bottom: 1rem;
}
.faixa--escura .aviso { background: rgba(255,255,255,.06); color: var(--papel); }
/* Acima da grade, cobre os tres botoes de uma vez. Largura de leitura, nao de secao. */
.aviso--grade { max-width: 46rem; margin: 0 auto 2rem; }

/* ---------- Andaime de producao ----------
   ⛔ NUNCA chega ao comprador. Marca o que ainda nao foi decidido (preco de parcela,
   prazo de garantia, termos). Mesma cor do .buraco do livro, de proposito: quem ja
   viu no PDF reconhece na hora. Texto plausivel no lugar disto seria pior, porque
   ninguem revisa o que parece pronto. */
.buraco {
  background: #fff4d6;
  border-bottom: 2px solid #c9992a;
  color: #241c17;
  font-family: Verdana, Geneva, sans-serif;
  font-size: .82em;
  padding: 0 .25em;
}

/* ---------- CTA ---------- */
.cta {
  display: block; width: 100%; text-align: center;
  background: var(--destaque); color: var(--papel);
  padding: 1.05rem 1rem; font-size: 1rem; font-weight: bold;
  border: 0; border-radius: 2px; cursor: pointer; text-decoration: none;
  line-height: 1.35;
  /* Feedback ao toque: transicao curta ease-out e encolhimento no :active.
     ⛔ Nunca `transition: all` — so' as propriedades que mudam de verdade. */
  transition: background-color 160ms ease-out, transform 120ms ease-out;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.cta:hover, .cta:focus-visible { background: var(--tinta); }
.cta:focus-visible { outline: 3px solid var(--acento-better); outline-offset: 2px; }
.cta:active { transform: scale(0.97); }
.cta--secundaria { background: transparent; color: var(--destaque); border: 1px solid var(--destaque); }
.cta--secundaria:hover, .cta--secundaria:focus-visible { background: var(--destaque); color: var(--papel); }
.cta-nota { display: block; text-align: center; font-size: .74rem; color: var(--suave-legivel); margin-top: .6rem; }
.hero .cta-nota, .faixa--escura .cta-nota { color: var(--acento-good); }

/* ---------- Bump e audio ---------- */
.faixa-destacada {
  border: 1px dashed var(--acento-bump);
  background: rgba(0,0,0,.02);
  padding: 1.75rem 1.5rem;
  display: grid; gap: 1.5rem;
}
@media (min-width: 52rem) { .faixa-destacada { grid-template-columns: 200px minmax(0, 1fr); align-items: center; } }
.faixa--escura .faixa-destacada { background: rgba(255,255,255,.05); }

/* ---------- FAQ ---------- */
.faq details { border-bottom: 1px solid var(--linha); padding: 1.1rem 0; }
.faq summary {
  cursor: pointer; font-size: 1.05rem; font-weight: bold; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.faq summary:hover { color: var(--destaque); }
.faq summary:focus-visible { outline: 3px solid var(--acento-better); outline-offset: 2px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--destaque); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
/* ⚠️ `--suave-legivel`, nao `--suave`: o FAQ vive em faixa CLARA e texto de .95rem
   em `--suave` sobre `--papel` mede 3,31:1 (PT) — mesmo achado ja documentado no topo. */
.faq details p { margin-top: .8rem; color: var(--suave-legivel); font-size: .95rem; }

/* ---------- Rodape ---------- */
.rodape { padding: 2.5rem 1.25rem; border-top: 1px solid var(--linha); font-size: .78rem; color: var(--suave-legivel); }
.rodape p { margin-bottom: .6rem; }

.nota { font-size: .74rem; color: var(--suave-legivel); }

/* ---------- Telas de 320px ----------
   ⚠️ Botao NUNCA quebra em duas linhas. Texto clicavel em duas linhas dobra a area de
   toque de um jeito que o dedo erra, e le como defeito. Em 320px (iPhone SE e os
   Android pequenos) o CTA nao cabia numa linha; a saida e' apertar o tipo e a caixa
   NESSA faixa, nao encurtar a copy — o botao precisa continuar dizendo o que acontece
   e quanto custa. */
@media (max-width: 24rem) {
  .faixa, .hero { padding-left: 1rem; padding-right: 1rem; }
  .oferta { padding-left: 1.1rem; padding-right: 1.1rem; }
  .cta { font-size: .9rem; padding-left: .5rem; padding-right: .5rem; }
  .preco { font-size: 2.2rem; }
}

/* Acessibilidade: quem pediu menos movimento nao recebe o deslocamento do card alvo,
   nem a transicao e o encolhimento do botao. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card--alvo { transform: none; }
  .cta { transition: none; }
  .cta:active { transform: none; }
}