/* MeuSantoApp — landing.
 *
 * As cores são as MESMAS do app (meusanto-app/lib/design/msa_tokens.dart).
 * Quem chega aqui e depois abre o app precisa reconhecer a mesma coisa; uma
 * paleta inventada só para a página quebraria isso no primeiro contato.
 */

:root {
  /* marinho — a cor institucional, dos títulos e do rodapé */
  --marinho-50:  #EEF1F7;
  --marinho-300: #8598BA;
  --marinho-600: #253C64;
  --marinho-800: #14203A;
  --marinho-900: #101A2C;

  /* creme — o fundo. O app não usa branco puro, e aqui também não. */
  --creme-50:  #FCFAF5;
  --creme-100: #F7F2E8;
  --creme-200: #EFE7D6;
  --creme-300: #E0D7C4;

  /* dourado — o acento, usado com parcimônia */
  --dourado-500: #B08D4B;
  --dourado-700: #6E5629;

  --pedra-100: #EDEBE5;

  /* AS FONTES, e a decisão que está por trás delas.
   *
   * O app usa EB Garamond nos títulos e Inter no texto, em TTF. Converter
   * para woff2 derrubaria os 850 KB de cada uma para umas poucas dezenas,
   * mas esta máquina não tem `pip` nem `fonttools`, então a conversão não
   * foi possível aqui. Servir o TTF cru custaria 1,7 MB a quem abre a
   * página no 3G — e o público deste app está no Brasil, muitas vezes com
   * dado limitado.
   *
   * Então a página usa a pilha do SISTEMA: zero byte, texto na tela no
   * primeiro quadro, nada de salto de fonte. Georgia é o serifado mais
   * próximo do Garamond que já está em quase todo aparelho.
   *
   * Para trocar depois, mexa SÓ nestas duas linhas — o resto do arquivo as
   * referencia. Dois caminhos: (a) converter as TTF do app para woff2 e
   * servir de /fontes/, que mantém tudo no nosso domínio; (b) Google Fonts,
   * que é uma linha mas manda o IP de cada visitante para o Google.
   */
  --fonte-titulo: Georgia, 'Times New Roman', 'Liberation Serif', serif;
  --fonte-texto: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --largura: 62rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--creme-50);
  color: var(--marinho-900);
  font-family: var(--fonte-texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* A faixa é a única medida de largura da página. Tudo se alinha por ela. */
.faixa {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ───────────────────────────── topo ───────────────────────────── */

/* O TOPO é FIXO, como o do Hallow — conferi no navegador: lá é
 * `position: fixed; top: 0; z-index: 9999`. (Uma leitura só do HTML me
 * disse que não era; ela não avalia CSS, e o navegador avalia.)
 *
 * O fundo precisa ser opaco: com o creme translúcido, o texto da página
 * passaria por baixo e as duas camadas se misturariam na rolagem.
 */
.topo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0.9rem 0;
  background: var(--creme-50);
  border-bottom: 1px solid var(--creme-200);
}

/* O corpo compensa a altura do topo fixo. Sem isto, o herói nasce embaixo
 * dele e as primeiras linhas ficam escondidas. */
body { padding-top: 4.25rem; }

.marca, .marca-rodape {
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--marinho-800);
}

.marca-leve { color: var(--dourado-500); }

/* ───────────────────────────── herói ──────────────────────────── */

.heroi { padding: 3.5rem 0 3rem; }

h1 {
  font-family: var(--fonte-titulo);
  font-size: clamp(2.6rem, 7.2vw, 4.6rem);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
  color: var(--marinho-800);
}

.chamada {
  /* Na COR PRINCIPAL, não num azul lavado. O marinho-600 que estava aqui
   * tinha contraste suficiente para passar em auditoria e ainda assim fazia
   * o texto parecer secundário ao lado do título. */
  font-size: 1.25rem;
  line-height: 1.6;
  max-width: 38rem;
  margin: 0 0 2.5rem;
  color: var(--marinho-900);
}

/* ─────────────────────────── os selos ─────────────────────────── */

.lojas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
}

/* APAGADOS de propósito: o app ainda não está em loja nenhuma.
 * `cursor: default` e a opacidade dizem, sem texto, que não há o que clicar.
 * Quando houver, troque o <span> por <a href> e tire a classe de apagado. */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--creme-300);
  border-radius: 0.65rem;
  background: var(--creme-100);
  color: var(--marinho-300);
  cursor: default;
  user-select: none;
}

.selo svg { width: 1.6rem; height: 1.6rem; fill: currentColor; flex: none; }

.selo-txt { display: flex; flex-direction: column; line-height: 1.15; }
.selo-txt small { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.selo-txt strong { font-size: 1.02rem; font-weight: 600; }

.nota {
  margin: 1rem 0 0;
  font-size: 0.92rem;
  color: var(--marinho-300);
}

/* ───────────────────────────── blocos ─────────────────────────── */

.bloco { padding: 2.75rem 0; border-top: 1px solid var(--creme-200); }

.bloco-escuro {
  background: var(--marinho-800);
  color: var(--creme-100);
  border-top: none;
}

h2 {
  font-family: var(--fonte-titulo);
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  line-height: 1.15;
  font-weight: 600;
  margin: 0 0 1rem;
  color: var(--marinho-800);
}

.bloco-escuro h2 { color: var(--creme-100); }

.prosa {
  max-width: 40rem;
  margin: 0 0 2.25rem;
  color: var(--marinho-900);
}

.bloco-escuro .prosa { color: var(--creme-300); }

/* ───────────────────────────── cartões ────────────────────────── */

.cartoes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
  /* 20rem e não 16.5: com 16.5 cabiam TRÊS por linha e os quatro cartões
   * caíam em 3+1, com um órfão sozinho embaixo. Em 20rem cabem dois, e a
   * grade fecha 2x2. Em tela estreita vira uma coluna sozinha. */
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.cartoes li {
  background: #fff;
  border: 1px solid var(--creme-200);
  border-radius: 0.8rem;
  padding: 1.4rem 1.5rem;
}

.cartoes h3 {
  font-family: var(--fonte-titulo);
  font-size: 1.18rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--marinho-800);
}

.cartoes p { margin: 0; font-size: 1rem; color: var(--marinho-900); }

/* ──────────────────────────── critérios ───────────────────────── */

/* NÃO é grid, e isso é conserto de um erro que só a tela mostrou: com
 * `display: grid` e um `gap`, o dt e o seu PRÓPRIO dd viram itens irmãos e
 * recebem o mesmo espaço que separa um critério do outro — o título fica
 * solto, longe do texto que ele intitula. Com margem explícita, o par anda
 * junto e o respiro fica ENTRE os pares, que é onde deve estar. */
.criterios { margin: 0; max-width: 44rem; }

.criterios dt {
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.35rem;
}

.criterios dd { margin: 0 0 1.4rem; color: var(--creme-300); }
.criterios dd:last-child { margin-bottom: 0; }
.criterios dd strong { color: var(--dourado-500); font-weight: 600; }

/* ───────────────────────────── rodapé ─────────────────────────── */

.rodape {
  padding: 2.75rem 0 3.5rem;
  background: var(--marinho-900);
  color: var(--marinho-300);
  font-size: 0.93rem;
}

.rodape p { margin: 0 0 0.35rem; }
.marca-rodape { color: var(--creme-100); margin-bottom: 0.75rem !important; }
.rodape a { color: var(--creme-200); }
.rodape a:hover { color: #fff; }

/* ────────────────────── respeito ao aparelho ──────────────────── */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Telas estreitas: a faixa já é fluida; só o herói precisa respirar menos. */
@media (max-width: 30rem) {
  .heroi { padding: 3rem 0 2.5rem; }
  .bloco { padding: 2.75rem 0; }
  .chamada { font-size: 1.1rem; }
}


/* ══════════════════════ a marca ══════════════════════ */

/* O MANTO é a marca de verdade do app (meusanto-app/assets/marca). A
 * primeira versão desta página usava uma cruz que eu desenhei, e não era a
 * marca de nada — o Willy apontou. Os SVG vieram de lá com ~7 KB de
 * metadado C2PA cada, retirado na cópia: não serve para nada no navegador e
 * é mais pesado que o desenho. */
.topo-linha { display: flex; align-items: center; gap: 0.7rem; }
.manto { display: block; height: 2.1rem; width: auto; }

/* ══════════════════ as telas do app ═══════════════════ */

.bloco-telas { background: var(--creme-100); }

/* O CARROSSEL das telas.
 *
 * Era uma grade de três colunas, e empilhava em coluna única no celular —
 * três aparelhos inteiros, um embaixo do outro, que é metade do comprimento
 * da página. Em carrossel, as três ocupam a altura de UMA.
 *
 * Feito com scroll-snap e NADA de JavaScript para a rolagem em si: no
 * celular é o dedo, no laptop é o trackpad, e funciona com o JS desligado.
 * As setas são acréscimo — o `hidden` sai no script, então quem não tem JS
 * não vê botão que não funciona.
 */
.carrossel { position: relative; }

.telas {
  list-style: none;
  margin: 0;
  padding: 0 0 0.75rem;
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* A barra de rolagem fica, e de propósito: ela é a única pista visual de
   * que há mais coisa à direita para quem usa mouse. */
  scrollbar-width: thin;
  scrollbar-color: var(--creme-300) transparent;
}

.telas li {
  flex: 0 0 auto;
  /* 18.5rem para que as TRÊS caibam inteiras na faixa de 62rem do desktop:
   * 3 x 296 + 2 x 24 de gap = 936, contra 944 de área visível. Com a medida
   * anterior sobravam 52 px e a terceira tela ficava cortada por um fio —
   * o que parece defeito, não carrossel. No celular, 78vw deixa a próxima
   * espiando na borda, que é a pista de que dá para arrastar. */
  width: min(18.5rem, 78vw);
  scroll-snap-align: start;
}

.telas img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 1.1rem;
  /* A moldura do aparelho já está DENTRO do PNG, com sombra e cantos — ela
   * foi composta no navegador a partir do print cru, e é também lá que o
   * cabeçalho da conta de teste foi cortado. Nada de borda aqui, senão
   * viram duas. */
}

.telas h3 {
  font-family: var(--fonte-titulo);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
  color: var(--marinho-800);
}

.telas p { margin: 0; font-size: 1rem; color: var(--marinho-900); max-width: 24rem; }

/* As setas. Só aparecem com JavaScript ligado (ver o fim do index.html). */
.seta {
  position: absolute;
  top: 7.5rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--creme-300);
  background: #fff;
  color: var(--marinho-800);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(16, 26, 44, 0.1);
  display: grid;
  place-items: center;
}
.seta:hover { background: var(--creme-50); }
.seta[disabled] { opacity: 0.35; cursor: default; }
.seta-esq { left: -1.1rem; }
.seta-dir { right: -1.1rem; }

/* Em tela estreita a seta cobriria a imagem; lá o dedo já resolve. */
@media (max-width: 52rem) {
  .seta { display: none; }
}

/* ════════════════════ os números ══════════════════════ */

/* Lidos da API de produção, não estimados. Um número que se pode conferir
 * vale mais que um adjetivo que não se pode. */
.numeros {
  margin: 2.25rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2.75rem;
  border-top: 1px solid var(--creme-300);
  padding-top: 2rem;
}

.numeros div { display: flex; flex-direction: column; }

.numeros dt {
  font-family: var(--fonte-titulo);
  font-size: 2.6rem;
  line-height: 1;
  font-weight: 600;
  color: var(--dourado-500);
}

.numeros dd {
  margin: 0.4rem 0 0;
  font-size: 1rem;
  color: var(--marinho-900);
}

/* ═════════════════════ rodapé ═════════════════════════ */

.manto-rodape { height: 2.1rem; margin-bottom: 0.9rem; opacity: 0.9; }