/* Harmonize Convites — identidade do sistema.
   Mesma paleta do convite: papel, dourado e tinta quente. */

:root{
  --papel:#fdfaf5;
  --creme:#f3e9dc;
  --dourado:#b08d57;
  --dourado-fraco:rgba(176,141,87,.35);

  /* ⚠️ TINTAS ESCURECIDAS EM 03/09/2026 — não é gosto, é medição.
     Os valores antigos (--tinta #5d4b3c, --tinta-fraca #8a7867) davam
     3,53:1 sobre o creme e 4,06:1 sobre o papel. O piso da WCAG AA para
     texto normal é 4,5:1. Nove de nove elementos da vitrine reprovavam,
     e é isso que produzia a sensação de "desbotado" que ninguém sabia
     nomear. Agora: 10,31:1 e 6,02:1 sobre o creme.
     Ao mexer aqui, MEÇA de novo — não estime. */
  --tinta:#3f3227;
  --tinta-fraca:#655444;

  /* ---- marca: MARSALA, a mesma do painel (sistema.css) ----
     A vitrine era dourada e o painel marsala: quem comprava via uma marca
     e entrava em outra. Os dois passam a ser a mesma casa.

     ⚠️ O DOURADO NÃO CARREGA TEXTO SOBRE FUNDO CLARO. Medido: #b08d57 dá
     2,58:1 no creme e 2,97:1 no papel — reprova em qualquer tamanho. Ele
     é acento: filete, borda, ícone, e texto SÓ sobre o escuro (5,57:1).
     Quem age é o marsala. Para texto dourado sobre papel existe
     --dourado-texto (#8a6a33, 4,81:1) e ele não vale sobre o creme. */
  --marca:#5a1a2a;
  --marca-clara:#7c2839;
  --dourado-texto:#8a6a33;

  /* ---- superfícies escuras (hero e faixa final) ---- */
  --escuro:#2a1518;
  --escuro-2:#351b20;
  --sobre-escuro:#f3e9dc;
  --sobre-escuro-fraco:#cbbcae;
  --dourado-claro:#d4af7a;
  --serif:"Cormorant Garamond","Playfair Display",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--creme);
  color:var(--tinta);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--marca)}

/* ---------------- topo ---------------- */
.topo{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 24px;
  background:var(--papel);
  border-bottom:1px solid var(--dourado-fraco);
}
.marca{
  font-family:var(--serif);
  font-size:22px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--tinta);
}
.marca span{color:var(--dourado-texto)}

.menu-topo{display:flex;align-items:center;gap:18px}
.menu-topo a{
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
}
.botao-topo{
  padding:9px 18px;border:1px solid var(--dourado-fraco);border-radius:999px;
  transition:background .25s,color .25s;
}
.botao-topo:hover{background:var(--marca);border-color:var(--marca);color:#fff}

/* ---------------- conteúdo ---------------- */
.conteudo{max-width:1000px;margin:0 auto;padding:44px 20px 60px}

.capa{text-align:center;padding:34px 0 46px}
.sobrenome{
  margin:0 0 10px;
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--marca);
}
.capa h1{
  margin:0 0 18px;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(32px,6vw,52px);line-height:1.15;
}
.chamada{
  max-width:560px;margin:0 auto 30px;
  color:var(--tinta-fraca);font-size:17px;
}

.acoes{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.botao{
  display:inline-block;padding:14px 30px;
  font-family:var(--serif);font-size:15px;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:#fff;background:var(--marca);
  border:1px solid var(--marca);border-radius:999px;
  transition:opacity .25s,transform .2s;
}
.botao:hover{opacity:.9;transform:translateY(-2px)}
.botao.vazado{background:transparent;color:var(--marca);border-color:var(--marca)}
.botao.vazado:hover{background:var(--marca);color:#fff}

/* ---------------- passos ---------------- */
.passos{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin:20px 0 50px;
}
.passos article{
  padding:26px 22px;text-align:center;
  background:var(--papel);
  border:1px solid var(--dourado-fraco);border-radius:4px;
}
/* ⚠️ Escopado em .passos de propósito.
   Enquanto foi `.numero` solto, esta regra vazava para a faixa de
   indicadores da tela de Presença (presenca_convidados.php), que também
   define `.numero` — como cartão, declarando só background/border/padding.
   Por não declarar display/width/height, ela NÃO desfazia estes três: o
   cartão ficava preso em 38x38 com o conteúdo (45x82) transbordando.
   Regra global com nome genérico vaza para quem nasceu depois. */
.passos .numero{
  display:inline-grid;place-items:center;
  width:38px;height:38px;margin-bottom:12px;
  font-family:var(--serif);font-size:17px;
  color:var(--marca);
  border:1px solid var(--dourado-fraco);border-radius:50%;
}
.passos h3{
  margin:0 0 6px;
  font-family:var(--serif);font-weight:400;font-size:20px;
}
.passos p{margin:0;color:var(--tinta-fraca);font-size:14.5px}

/* ---------------- planos ---------------- */
.planos{text-align:center}
.planos h2{
  font-family:var(--serif);font-weight:400;
  font-size:30px;letter-spacing:.16em;text-transform:uppercase;color:var(--marca);
}
.grade-planos{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin:24px 0 16px;
}
.plano{
  padding:26px 18px;
  background:var(--papel);
  border:1px solid var(--dourado-fraco);border-radius:4px;
}
.plano h3{
  margin:0 0 4px;
  font-family:var(--serif);font-weight:400;font-size:22px;
}
.plano .qtd{
  margin:0 0 12px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--marca);
}
.plano .preco{margin:0;font-family:var(--serif);font-size:27px;color:var(--tinta)}
.plano .preco .por{font-family:var(--sans);font-size:13px;color:var(--tinta-fraca)}
.plano .preco-anual{
  margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--tinta-fraca);
}
.plano .preco-anual strong{color:var(--tinta)}
.plano .preco-anual small{font-size:11.5px}
.selo-desconto{
  display:inline-block;padding:1px 8px;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--dourado-texto);border-radius:999px;vertical-align:middle;
}
.aviso{font-size:13px;color:var(--tinta-fraca)}

/* ---------------- páginas de aviso ---------------- */
.aviso-pagina{
  max-width:520px;margin:40px auto;padding:44px 30px;text-align:center;
  background:var(--papel);
  border:1px solid var(--dourado-fraco);border-radius:4px;
}
.aviso-pagina h1{
  margin:0 0 12px;
  font-family:var(--serif);font-weight:400;font-size:28px;color:var(--marca);
}
.aviso-pagina p{color:var(--tinta-fraca)}

/* ---------------- formulários ---------------- */
.cartao-form{
  max-width:430px;margin:20px auto;padding:40px 32px 32px;
  background:var(--papel);
  border:1px solid var(--dourado-fraco);border-radius:4px;
}
.cartao-form h1{
  margin:0 0 6px;text-align:center;
  font-family:var(--serif);font-weight:400;font-size:30px;
  letter-spacing:.1em;color:var(--marca);
}
.cartao-form .sub{margin:0 0 26px;text-align:center;font-size:14px;color:var(--tinta-fraca)}

/* `display` de classe vence o [hidden] do navegador: sem isto, campo marcado
   como hidden pelo editor continua aparecendo (ex.: "Endereço" num ponto de texto). */
[hidden]{display:none!important}

.campo{display:block;margin-bottom:16px}
.campo > span{
  display:block;margin-bottom:6px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--marca);
}
.campo > span small{letter-spacing:.06em;text-transform:none;color:var(--tinta-fraca)}
.campo input{
  width:100%;padding:12px 13px;
  font-family:var(--sans);font-size:15px;color:var(--tinta);
  background:#fff;
  border:1px solid rgba(176,141,87,.3);border-radius:3px;
  transition:border-color .2s,box-shadow .2s;
}
.campo input:focus{
  outline:none;border-color:var(--dourado);
  box-shadow:0 0 0 3px rgba(176,141,87,.13);
}
.campo em{
  display:block;margin-top:5px;
  font-style:normal;font-size:12.5px;color:#b4553f;
}
.campo .dica{display:block;margin-top:5px;font-size:12px;color:var(--tinta-fraca)}

.botao.largo{width:100%;text-align:center;border:0;cursor:pointer;margin-top:6px}
.botao.vazado.largo{border:1px solid var(--marca)}
.botao[disabled]{opacity:.5;cursor:default;transform:none}

.rodape-form{
  margin:22px 0 0;text-align:center;font-size:13.5px;color:var(--tinta-fraca);
}

/* ---------------- avisos ---------------- */
.flash{
  max-width:640px;margin:0 auto 22px;padding:14px 18px;
  font-size:14.5px;border-radius:3px;border:1px solid;
}
.flash-sucesso{background:#eef6ec;border-color:#bcd9b4;color:#3c6b33}
.flash-erro{background:#fbeeeb;border-color:#e3bdb2;color:#9c4630}
.flash-info{background:var(--papel);border-color:var(--dourado-fraco);color:var(--tinta)}

/* ---------------- painel ---------------- */
.painel-topo{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:26px;
}
.painel-topo h1{
  margin:0;font-family:var(--serif);font-weight:400;font-size:32px;
}
.contador{
  margin:0;padding:9px 18px;
  font-size:13px;color:var(--tinta-fraca);
  background:var(--papel);
  border:1px solid var(--dourado-fraco);border-radius:999px;
}
.contador strong{color:var(--marca);font-size:16px}

.caixa-aviso{
  padding:32px 28px;text-align:center;
  background:var(--papel);
  border:1px solid var(--dourado-fraco);border-radius:4px;
}
.caixa-aviso h2{
  margin:0 0 10px;
  font-family:var(--serif);font-weight:400;font-size:23px;color:var(--marca);
}
.caixa-aviso p{margin:0 0 16px;color:var(--tinta-fraca)}

.capa.curta{padding:10px 0 26px}
.capa.curta h1{font-size:clamp(26px,5vw,38px)}

/* ---------------- recursos e FAQ (home) ---------------- */
.recursos{text-align:center;margin:14px 0 50px}
.recursos h2,.faq h2,.cta-final h2{
  font-family:var(--serif);font-weight:400;
  font-size:28px;letter-spacing:.14em;text-transform:uppercase;color:var(--marca);
}
.grade-recursos{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  margin-top:20px;
}
.grade-recursos article{
  padding:22px 18px;
  background:var(--papel);
  border:1px solid var(--dourado-fraco);border-radius:4px;
}
.grade-recursos h3{
  margin:0 0 6px;
  font-family:var(--serif);font-weight:400;font-size:19px;color:var(--marca);
}
.grade-recursos p{margin:0;font-size:14px;color:var(--tinta-fraca)}

.sub-planos{max-width:520px;margin:6px auto 0;font-size:14.5px;color:var(--tinta-fraca)}

.faq{max-width:640px;margin:20px auto 50px;text-align:left}
.faq h2{text-align:center;margin-bottom:20px}
.faq details{
  margin-bottom:10px;padding:16px 20px;
  background:var(--papel);
  border:1px solid var(--dourado-fraco);border-radius:4px;
}
.faq summary{
  cursor:pointer;font-size:15.5px;font-weight:600;color:var(--tinta);
  list-style-position:outside;
}
.faq p{margin:12px 0 0;font-size:14.5px;color:var(--tinta-fraca)}

.cta-final{text-align:center;padding:20px 0 30px}
.cta-final h2{margin-bottom:20px}

/* checkout na vitrine */
.plano.atual{border-color:var(--dourado);position:relative}
.faixa-atual{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  padding:2px 14px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:var(--marca);border-radius:999px;white-space:nowrap;
}
.form-assinar{margin-top:14px;text-align:left}
.ciclo-opcao{
  display:flex;gap:8px;align-items:center;
  padding:9px 12px;margin-bottom:7px;
  font-size:13.5px;cursor:pointer;
  background:#fff;
  border:1px solid rgba(176,141,87,.3);border-radius:3px;
  transition:border-color .2s,background .2s;
}
.ciclo-opcao:has(input:checked){border-color:var(--dourado);background:rgba(176,141,87,.08)}
/* ⚠️ `width:auto` DECLARADO — e é a linha que faz esta opção funcionar.
   Dentro de `<div class="campo">`, a regra `.campo input{width:100%}` (escrita
   para caixas de texto) pega TAMBÉM o botão de rádio: ele ocupava a linha
   inteira, o texto ao lado sobrava com zero pixel e as letras desciam uma por
   linha. O sintoma parece defeito da fonte ou do flex; a causa é um seletor
   descendente escrito para outro tipo de campo.
   Declarar `flex` não bastava: o CSS cascateia por PROPRIEDADE, e `width`
   continuava vindo da outra regra. */
.ciclo-opcao input{accent-color:var(--dourado);flex:0 0 auto;width:auto;margin:0}

/* `text-align:left` e `flex:1` também DECLARADOS, não herdados: esta opção
   nasceu no cartão de plano, estreito e centralizado, e ao ser reaproveitada no
   cadastro trazia junto o `text-align:center` do `.cartao-form`.

   `min-width:0` impede a rolagem lateral no celular: `flex:1` é `flex:1 1 0%`,
   mas o mínimo de um item flex é `auto` — o min-content do conteúdo, que não
   encolhe e empurra a página (406px numa tela de 390). Mesma armadilha do `1fr`
   em grid, que é `minmax(auto,1fr)`. */
.ciclo-opcao > span{flex:1;min-width:0;text-align:left;display:block}
.ciclo-opcao strong{display:block;font-weight:600}

/* `color` redeclarado porque `.campo em{color:#b4553f}` é a cor de ERRO de
   campo — o descritivo de cada opção saía em vermelho de erro, num formulário
   sem erro nenhum. */
.ciclo-opcao em{
  display:block;font-style:normal;font-size:12.5px;
  color:var(--tinta-fraca);margin-top:1px;
}

/* ---------------- rodapé ---------------- */
.rodape{
  padding:26px 20px;text-align:center;
  border-top:1px solid var(--dourado-fraco);
}
.rodape p{margin:0;font-size:12.5px;color:var(--tinta-fraca)}

/* ---------------- vendo como cliente ----------------
   Não usa a cor da marca de propósito: a faixa só cumpre a função se for
   impossível de ignorar. Fica logo abaixo do topo, em toda tela.          */
.faixa-emprestimo{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px 16px;padding:10px 18px;
  font-size:13.5px;line-height:1.45;text-align:center;
  color:#5a3210;background:#fdf0d8;
  border-bottom:1px solid #e6c68a;
}
.faixa-emprestimo strong{font-weight:600}
.faixa-emprestimo form{margin:0}
.faixa-emprestimo button{
  padding:5px 13px;font:inherit;font-size:12.5px;cursor:pointer;
  color:#5a3210;background:#fff;
  border:1px solid #d8b06a;border-radius:999px;
  transition:background .2s;
}
.faixa-emprestimo button:hover{background:#f7e6c6}

/* ================= celular =================
   ⚠️ Até 02/09/2026 este arquivo não tinha NENHUMA media query — e ele
   desenha o cabeçalho de TODA tela do sistema. O `.menu-topo` é um flex de
   linha única: num aparelho de 390px ele ia até 534px, e "Planos", "Conta"
   e "Sair" ficavam fora da tela. Não dava erro nenhum; a página só passava
   a rolar de lado. Na prática, quem estava no celular não conseguia sair
   da conta — e o produto é usado no celular quase o tempo todo.
   Quem for mexer no cabeçalho: são até 6 links quando o usuário é admin.  */
@media (max-width:720px){
  .topo{
    flex-direction:column;align-items:stretch;
    gap:12px;padding:14px 16px;
  }
  .marca{font-size:18px;text-align:center;letter-spacing:.1em}
  .menu-topo{justify-content:center;flex-wrap:wrap;gap:9px 16px}
  .menu-topo a{font-size:12px}
  .botao-topo{padding:7px 15px}

  .conteudo{padding:28px 16px 46px}
  .capa{padding:22px 0 30px}
}

/* ---- rodapé com links (Termos, Privacidade, contato) ----
   As duas páginas existiam como rota reservada e davam 404; não havia contato
   em tela nenhuma, e a vitrine chegava a pedir "fale com a gente pelo WhatsApp"
   sem número. */
.rodape-links{
  display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;
  margin-top:10px;font-size:13px;
}
.rodape-links a{color:inherit;opacity:.85;text-decoration:none;border-bottom:1px solid transparent}
.rodape-links a:hover,.rodape-links a:focus-visible{opacity:1;border-bottom-color:currentColor}

/* ---- páginas de texto (Termos, Privacidade) ---- */
.texto-legal{max-width:68ch;margin:0 auto;padding:0 4px}
.texto-legal h1{margin-bottom:6px}
.texto-legal h2{
  font-family:var(--serif,Georgia,serif);font-size:19px;margin:30px 0 8px;
}
.texto-legal p,.texto-legal li{line-height:1.65}
.texto-legal ul{padding-left:20px;margin:0 0 14px}
.texto-legal li{margin-bottom:6px}
.texto-legal .sub{opacity:.75;margin-bottom:4px}

/* ============================================================
   VITRINE (landing) — reescrita em 03/09/2026
   ============================================================

   POR QUE UM PREFIXO `lp-` SÓ PARA ELA
   As classes curtas deste arquivo (`.capa`, `.passos`, `.numero`,
   `.plano`, `.recursos`) são usadas TAMBÉM pelo painel e pelo login, e
   já cobraram caro: `.numero` da vitrine prendeu os indicadores da tela
   de Presença num quadrado de 38px, porque o CSS cascateia por
   PROPRIEDADE e a redefinição não desfez `display/width/height`.
   Nome novo não tem passado — e não deixa passado para o próximo.

   O QUE MUDOU DE VERDADE
   A página não mostrava o produto. Um produto que É visual (convite em
   vídeo com botões clicáveis) vendia-se com 4.163px de texto no celular
   e nenhuma imagem. Agora o hero traz a arte REAL do convite modelo com
   os pontos clicáveis REAIS lidos do banco: se o modelo mudar, a vitrine
   muda junto — não há mockup para envelhecer.

   ⚠️ FULL-BLEED SEM 100vw
   As faixas escuras precisam sangrar até a borda, e o <main> é uma caixa
   de 1000px. A saída NÃO é `width:100vw`: a unidade inclui a barra de
   rolagem e a página passa a rolar de lado no Windows. Em vez disso,
   `.conteudo.solto` abre mão do próprio limite e cada faixa refaz o
   respiro com `.lp-wrap`.
   ============================================================ */

.conteudo.solto{max-width:none;padding:0}
.lp-wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------------- faixa escura ---------------- */
.lp-escuro{
  background:var(--escuro);
  color:var(--sobre-escuro);
}
.lp-escuro a{color:var(--dourado-claro)}
/* ⚠️ Sobre o escuro o dourado PODE carregar texto (5,57:1 no #b08d57,
   8,38:1 no --dourado-claro). Sobre o claro, não — ver o bloco de tokens. */
.lp-escuro .lp-olho{color:var(--dourado-claro)}
.lp-escuro p{color:var(--sobre-escuro-fraco)}

.lp-olho{
  margin:0 0 14px;
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--marca);
}

/* ---------------- hero ----------------
   Grade por ÁREA, não por ordem no HTML: no celular a arte precisa
   aparecer logo depois do título (é ela que vende), e no computador
   precisa ocupar a coluna inteira ao lado. Trocar a ordem no DOM
   resolveria um e quebraria o outro. */
.lp-hero{padding:56px 0 64px}
.lp-hero-grade{
  display:grid;gap:32px;
  grid-template-areas:"cabeca" "palco" "apoio";
}
.lp-hero-cabeca{grid-area:cabeca}
.lp-hero-palco{grid-area:palco}
.lp-hero-apoio{grid-area:apoio}

.lp-hero h1{
  margin:0;
  font-family:var(--serif);font-weight:400;
  /* Máximo 54px, não 60: a 60px a primeira linha media mais que a coluna
     (565px) e "Seu convite ganha vida" quebrava sozinha, jogando o H1
     para 3 linhas e desmanchando a frase que o <br> compõe. */
  font-size:clamp(34px,5.4vw,54px);line-height:1.08;letter-spacing:-.01em;
  color:var(--sobre-escuro);
}
.lp-hero h1 em{font-style:normal;color:var(--dourado-claro)}

.lp-chamada{
  max-width:52ch;margin:0 0 26px;
  font-size:17px;line-height:1.6;
}

.lp-acoes{display:flex;flex-wrap:wrap;gap:12px}

/* Botão sobre o escuro: o marsala some no fundo vinho, então quem age
   aqui é o dourado com tinta escura (5,57:1). É a única tela em que o
   dourado é cor de ação — e é porque o marsala não tem contraste contra
   o próprio fundo da casa. */
.lp-escuro .botao{background:var(--dourado);border-color:var(--dourado);color:var(--escuro)}
.lp-escuro .botao:hover{background:var(--dourado-claro);border-color:var(--dourado-claro)}
.lp-escuro .botao.vazado{
  background:transparent;color:var(--sobre-escuro);
  border-color:rgba(243,233,220,.45);
}
.lp-escuro .botao.vazado:hover{background:rgba(243,233,220,.10);color:var(--sobre-escuro)}

/* três garantias curtas — fato verificável, nunca número inventado */
.lp-garantias{
  display:flex;flex-wrap:wrap;gap:10px 22px;
  margin:26px 0 0;padding:0;list-style:none;
  font-size:13.5px;color:var(--sobre-escuro-fraco);
}
.lp-garantias li{display:flex;align-items:center;gap:8px}
.lp-garantias svg{flex:0 0 auto;width:16px;height:16px;color:var(--dourado-claro)}

/* ---------------- o aparelho com a arte real ---------------- */
.lp-aparelho{
  width:min(300px,78vw);margin:0 auto;
  padding:10px;
  background:linear-gradient(160deg,#4a2b31,#1d0e11);
  border:1px solid rgba(212,175,122,.32);
  border-radius:34px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.lp-tela{
  position:relative;overflow:hidden;
  aspect-ratio:9/16;
  background:#fff;border-radius:25px;
}
.lp-tela img{display:block;width:100%;height:100%;object-fit:cover}

/* Os alvos vêm do BANCO, em porcentagem do palco — as mesmas coordenadas
   que o convite de verdade usa. Mockup desenhado à mão envelheceria na
   primeira troca de arte do modelo. */
/* ⚠️ O MARCADOR NÃO PODE SER DOURADO.
   A primeira versão usava `var(--dourado)` — a cor de acento da casa — e
   sumiu por completo: os botões desenhados na arte do convite JÁ têm
   moldura dourada, e ouro sobre ouro não se vê. O print parecia não ter
   marcação nenhuma enquanto o DOM tinha os quatro alvos, com 2px de borda,
   nas coordenadas certas. Engana porque o defeito não é de posição nem de
   tamanho: é de contraste contra um fundo que muda a cada convite.
   Marsala com halo branco funciona sobre arte clara (10,8:1) e sobre arte
   escura o halo é que sustenta. O marcador precisa vencer QUALQUER arte,
   porque a arte é do cliente e não temos como escolhê-la. */
.lp-alvo{
  position:absolute;
  border:2px solid var(--marca);
  border-radius:6px;
  box-shadow:0 0 0 2px rgba(255,255,255,.92), 0 0 0 5px rgba(90,26,42,.28);
  animation:lp-pulso 2.6s ease-in-out infinite;
}
.lp-alvo.redondo{border-radius:50%}
.lp-alvo:nth-of-type(2){animation-delay:.35s}
.lp-alvo:nth-of-type(3){animation-delay:.7s}
.lp-alvo:nth-of-type(4){animation-delay:1.05s}
@keyframes lp-pulso{
  0%,100%{box-shadow:0 0 0 2px rgba(255,255,255,.92), 0 0 0 5px rgba(90,26,42,.28)}
  50%{box-shadow:0 0 0 2px rgba(255,255,255,.92), 0 0 0 11px rgba(90,26,42,0)}
}
/* Movimento é preferência de acessibilidade, não enfeite opcional. */
@media (prefers-reduced-motion:reduce){
  .lp-alvo{animation:none}
}

.lp-legenda-palco{
  margin:16px auto 0;max-width:30ch;
  text-align:center;font-size:13.5px;line-height:1.5;
}

/* ---------------- como funciona ---------------- */
.lp-como{background:var(--papel);padding:64px 0}
.lp-titulo{
  margin:0 0 8px;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(26px,4vw,36px);line-height:1.15;letter-spacing:-.01em;
  color:var(--marca);
}
.lp-subtitulo{margin:0 0 36px;max-width:56ch;color:var(--tinta-fraca)}

.lp-passos{
  display:grid;gap:28px;
  grid-template-columns:minmax(0,1fr);
  margin:0;padding:0;list-style:none;counter-reset:passo;
}
.lp-passos li{counter-increment:passo;position:relative;padding-left:60px}
.lp-passos li::before{
  content:counter(passo);
  position:absolute;left:0;top:-2px;
  display:grid;place-items:center;
  width:42px;height:42px;
  font-family:var(--serif);font-size:19px;
  color:var(--marca);background:var(--creme);
  border:1px solid var(--dourado-fraco);border-radius:50%;
}
.lp-passos h3{
  margin:0 0 4px;
  font-family:var(--serif);font-weight:400;font-size:21px;color:var(--tinta);
}
.lp-passos p{margin:0;color:var(--tinta-fraca);font-size:15px}

/* ---------------- o que cada botão faz ---------------- */
.lp-recursos{background:var(--creme);padding:64px 0}
.lp-grade-recursos{
  display:grid;gap:16px;
  grid-template-columns:minmax(0,1fr);
  margin-top:32px;
}
.lp-recurso{
  padding:24px 22px;
  background:var(--papel);
  border:1px solid var(--dourado-fraco);border-radius:6px;
}
.lp-recurso h3{
  display:flex;align-items:center;gap:10px;
  margin:0 0 8px;
  font-family:var(--serif);font-weight:400;font-size:20px;color:var(--marca);
}
.lp-recurso svg{flex:0 0 auto;width:20px;height:20px;color:var(--dourado-texto)}
.lp-recurso p{margin:0;color:var(--tinta-fraca);font-size:14.5px}

/* ---------------- planos ---------------- */
.lp-planos{background:var(--papel);padding:64px 0}
.lp-grade-planos{
  display:grid;gap:18px;
  grid-template-columns:minmax(0,1fr);
  margin-top:32px;align-items:start;
}
.lp-plano{
  position:relative;
  display:flex;flex-direction:column;
  padding:30px 24px 26px;
  background:var(--creme);
  border:1px solid var(--dourado-fraco);border-radius:6px;
}
/* Um plano recomendado, e a palavra é essa: "recomendado" é opinião da
   casa e é verdade. "O mais escolhido" seria afirmação sobre o
   comportamento de outros clientes — com três contas na base, seria
   invenção. Prova que não existe não se escreve. */
.lp-plano.destaque{
  background:var(--papel);
  border-color:var(--marca);border-width:2px;
  padding-top:36px;
}
.lp-selo-plano{
  position:absolute;top:-12px;left:24px;
  padding:4px 14px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--marca);border-radius:999px;
}
.lp-plano h3{
  margin:0 0 2px;
  font-family:var(--serif);font-weight:400;font-size:24px;color:var(--tinta);
}
.lp-plano-qtd{
  margin:0 0 18px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--marca);
}
.lp-preco{
  margin:0;
  font-family:var(--serif);font-size:38px;line-height:1;color:var(--tinta);
  font-variant-numeric:tabular-nums;
}
.lp-preco .por{font-family:var(--sans);font-size:14px;color:var(--tinta-fraca)}
.lp-preco-anual{margin:10px 0 0;font-size:13.5px;color:var(--tinta-fraca)}
.lp-preco-anual strong{color:var(--tinta)}
.lp-plano .botao{margin-top:22px;text-align:center}
.lp-plano-inclui{
  margin:20px 0 0;padding:18px 0 0;list-style:none;
  border-top:1px solid var(--dourado-fraco);
  font-size:14px;color:var(--tinta-fraca);
}
.lp-plano-inclui li{display:flex;gap:9px;align-items:flex-start;margin-bottom:8px}
.lp-plano-inclui svg{flex:0 0 auto;width:15px;height:15px;margin-top:4px;color:var(--dourado-texto)}
.lp-nota-planos{margin:26px 0 0;font-size:13.5px;color:var(--tinta-fraca)}

/* ---------------- FAQ ----------------
   <details> cru mostra o triangulinho do navegador, que muda de forma em
   cada sistema operacional e denuncia "página sem acabamento". O marcador
   é próprio; o `list-style:none` e o `::-webkit-details-marker` são os
   dois lados necessários para o Safari também obedecer. */
.lp-faq{background:var(--creme);padding:64px 0}
.lp-faq-lista{max-width:760px;margin:32px auto 0}
.lp-faq details{
  background:var(--papel);
  border:1px solid var(--dourado-fraco);border-radius:6px;
  margin-bottom:10px;
}
.lp-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;cursor:pointer;
  font-size:16px;font-weight:600;color:var(--tinta);
  list-style:none;
}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{
  content:"";flex:0 0 auto;
  width:11px;height:11px;
  border-right:2px solid var(--marca);border-bottom:2px solid var(--marca);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s ease-out;
}
.lp-faq details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.lp-faq summary:focus-visible{outline:2px solid var(--marca);outline-offset:-2px;border-radius:6px}
.lp-faq details p{margin:0;padding:0 22px 20px;color:var(--tinta-fraca);font-size:15px}

/* ---------------- chamada final ---------------- */
.lp-final{padding:64px 0;text-align:center}
.lp-final h2{
  margin:0 0 10px;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(26px,4.4vw,40px);line-height:1.15;
  color:var(--sobre-escuro);
}
.lp-final p{max-width:46ch;margin:0 auto 28px}

/* ================= a partir de 720px ================= */
@media (min-width:720px){
  .lp-grade-recursos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-passos{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .lp-grade-planos{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ================= a partir de 1000px ================= */
@media (min-width:1000px){
  .lp-hero{padding:80px 0 88px}
  .lp-hero-grade{
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    grid-template-areas:"cabeca palco" "apoio palco";
    align-content:center;gap:0 56px;
  }
  .lp-hero-cabeca{align-self:end;padding-bottom:22px}
  .lp-hero-apoio{align-self:start}
  .lp-aparelho{margin:0 0 0 auto;width:min(320px,100%)}
  .lp-grade-recursos{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lp-como,.lp-recursos,.lp-planos,.lp-faq{padding:80px 0}
}

/* O CTA final é a única faixa centralizada — a regra mora aqui, não
   num style= no HTML, que venceria qualquer media query. */
.lp-final .lp-acoes{justify-content:center}

/* ============================================================
   ENTRADA — split-screen (padrão obrigatório da casa)
   ============================================================
   Definido em `.claude/login-page-standard.md` e válido para todos os
   sistemas. Aqui vem sem Tailwind: este projeto não usa framework, então
   o layout é o mesmo e as ferramentas são as da casa.

   ⚠️ O painel de marca SOME abaixo de 900px, e não é preguiça: num
   aparelho de 375px ele empurraria o formulário inteiro para fora da
   primeira tela, e a tela de login existe para uma coisa só.
   ============================================================ */

.entrada{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  min-height:calc(100vh - 190px);
}

/* ---- painel do formulário ---- */
.entrada-form{
  display:grid;place-items:center;
  padding:48px 24px 56px;
  background:var(--papel);
}
.entrada-form-conteudo{width:100%;max-width:390px}

.entrada-form h1{
  margin:0 0 4px;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(28px,5vw,36px);line-height:1.15;color:var(--tinta);
}
.entrada-sub{margin:0 0 30px;color:var(--tinta-fraca);font-size:15px}

/* Campo com ícone dentro. O ícone é decoração: fica em `aria-hidden` e o
   rótulo de verdade continua sendo o <span> do .campo. */
.campo-icone .campo-caixa{position:relative;display:block}
.campo-icone .campo-glifo{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--tinta-fraca);pointer-events:none;
}
/* ⚠️ `padding` REDECLARADO por inteiro. `.campo input` já define
   `padding:12px 13px`, e o CSS cascateia por PROPRIEDADE: escrever só
   `padding-left` aqui funcionaria, mas a próxima pessoa que mexer no
   padding do campo comum quebra este sem perceber. */
.campo-icone input{padding:12px 44px 12px 42px}

.campo-olho{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;
  width:36px;height:36px;padding:0;
  color:var(--tinta-fraca);background:none;border:0;border-radius:50%;
  cursor:pointer;transition:color .2s,background .2s;
}
.campo-olho:hover{color:var(--marca);background:rgba(90,26,42,.07)}
.campo-olho:focus-visible{outline:2px solid var(--marca);outline-offset:1px}

.entrada-nota{
  margin:26px 0 0;text-align:center;
  font-size:12.5px;line-height:1.5;color:var(--tinta-fraca);
}

/* ---- painel de marca ----
   Escondido no HTML de origem só a partir do CSS: o conteúdo é decorativo
   e já está em `aria-hidden`, então some sem custo de acessibilidade. */
.entrada-marca{display:none}

/* ================= a partir de 900px ================= */
@media (min-width:900px){
  .entrada{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}

  .entrada-marca{
    position:relative;overflow:hidden;
    display:grid;align-items:center;
    padding:56px 56px 56px 6vw;
    background:linear-gradient(150deg,var(--marca-clara) 0%,var(--escuro) 62%);
    color:var(--sobre-escuro);
  }
  /* Anéis de baixa opacidade no canto — a decoração que o padrão pede.
     Em `::before`, então não entra no fluxo e não vira elemento vazio. */
  .entrada-marca::before{
    content:"";position:absolute;right:-140px;top:-120px;
    width:460px;height:460px;border-radius:50%;
    border:1px solid rgba(212,175,122,.20);
    box-shadow:0 0 0 60px rgba(212,175,122,.05), 0 0 0 130px rgba(212,175,122,.035);
  }
  .entrada-marca-conteudo{position:relative;max-width:440px}

  .entrada-logo{
    margin:0 0 40px;
    font-family:var(--serif);
    font-size:20px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--sobre-escuro);
  }
  .entrada-logo span{color:var(--dourado-claro)}

  .entrada-frase{
    margin:0;
    font-family:var(--serif);font-weight:400;
    font-size:clamp(30px,3.2vw,42px);line-height:1.15;letter-spacing:-.01em;
    color:var(--sobre-escuro);
  }
  .entrada-filete{
    display:block;width:64px;height:2px;margin:22px 0 20px;
    background:var(--dourado-claro);
  }
  .entrada-apoio{
    margin:0 0 34px;max-width:42ch;
    font-size:15.5px;line-height:1.6;color:var(--sobre-escuro-fraco);
  }

  .entrada-itens{
    margin:0;padding:0;list-style:none;
    display:grid;gap:16px;
    font-size:14.5px;color:var(--sobre-escuro);
  }
  .entrada-itens li{display:flex;align-items:center;gap:13px}
  .entrada-chip{
    flex:0 0 auto;
    display:grid;place-items:center;
    width:34px;height:34px;
    color:var(--dourado-claro);
    background:rgba(212,175,122,.12);
    border:1px solid rgba(212,175,122,.28);border-radius:50%;
  }
}

/* Aviso dentro do painel do formulário. O .flash comum é centralizado com
   max-width 640 — aqui ele precisa ocupar a coluna, então os dois valores
   são redeclarados (o CSS cascateia por propriedade). */
.entrada-avisos{margin:0 0 22px}
.entrada-avisos .flash{max-width:none;margin:0 0 10px}