/* ===========================================================================
   Ramalhete de Orações — landing page de venda
   ---------------------------------------------------------------------------
   A regra-mãe do PRD é que esta página seja visualmente indistinguível do
   aplicativo. Por isso os tokens abaixo NÃO foram recriados: são cópia literal
   do src/app/globals.css do projeto ramalhete-de-oracoes, comentários
   inclusive. Quando o app mudar a paleta, é este bloco que se atualiza.
   =========================================================================== */

:root {
  --cor-pergaminho: #fbf5e8;
  --cor-carmesim: #6e1414;
  --cor-carmesim-titulo: #8a1f1f;
  --cor-dourado: #b4894a;
  --cor-texto: #4a3b32;
  --cor-borda: #e8dec9;
  --cor-cartao: #ffffff;

  /* Tons para uso SOBRE o carmesim. O pergaminho e o dourado normais são
     pensados para fundo claro: sobre o vinho profundo, o dourado escurece
     demais e o texto perde contraste. */
  --cor-creme: #f9f1e0; /* texto claro sobre o carmesim (10,5:1) */
  --cor-dourado-claro: #d9b47c; /* dourado que se lê sobre o carmesim (6:1) */
  --cor-dourado-suave: #f5ead1; /* fundo levemente dourado dos blocos de oração */

  /* Fontes do app. Lá elas entram por next/font; aqui, por Google Fonts com
     display=swap. As famílias e os pesos são os mesmos. */
  --font-titulo: "Cormorant Garamond";
  --font-corpo: "Crimson Pro";

  /* Peças que só existem na landing. */
  --cor-whatsapp: #25d366;
  --cor-dourado-hover: #e6c48f;
  --altura-cabecalho: 4rem;
  --largura-pagina: 68rem;
  --largura-texto: 44rem;

  /* Identidade FIXA e sempre clara: não há modo escuro. Declarar o esquema
     evita que o navegador force cores próprias em barras de rolagem. */
  color-scheme: light;
}

@media (min-width: 60rem) {
  :root {
    --altura-cabecalho: 4.75rem;
  }
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* O cabeçalho é fixo: sem esta margem a âncora para na seção e o título
     fica escondido atrás dele. */
  scroll-padding-top: calc(var(--altura-cabecalho) + 1rem);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--cor-pergaminho);
  color: var(--cor-texto);
  font-family: var(--font-corpo), Georgia, "Times New Roman", serif;
  /* Público em parte idoso: corpo de texto confortável, nunca miúdo. */
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-titulo), Georgia, "Times New Roman", serif;
  color: var(--cor-carmesim-titulo);
  font-weight: 600;
  line-height: 1.2;
}

p {
  margin: 0 0 1.1rem;
}

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

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

a {
  color: var(--cor-carmesim);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--cor-carmesim-titulo);
}

:focus-visible {
  outline: 2px solid var(--cor-dourado);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Salto para o conteúdo: só aparece para quem navega por teclado. */
.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--cor-carmesim);
  color: var(--cor-creme);
  text-decoration: none;
}

.pular-para-conteudo:focus {
  left: 1rem;
  top: 1rem;
}

/* ---------------------------------------------------------------------------
   Estruturas de página
   --------------------------------------------------------------------------- */

.pagina {
  width: min(100% - 2.5rem, var(--largura-pagina));
  margin-inline: auto;
}

.secao {
  padding-block: clamp(3rem, 8vw, 5.5rem);
}

/* Alternância suave de fundo, para separar as seções sem linhas duras. */
.secao--realce {
  background: linear-gradient(180deg, #fdfaf3 0%, var(--cor-pergaminho) 100%);
  border-block: 1px solid var(--cor-borda);
}

.secao__cabecalho {
  max-width: var(--largura-texto);
  margin-inline: auto;
  margin-bottom: 2.5rem;
  text-align: center;
}

.secao__titulo {
  font-size: clamp(1.75rem, 4.4vw, 2.5rem);
  text-wrap: balance;
}

.prosa {
  max-width: var(--largura-texto);
  margin-inline: auto;
  font-size: 1.09rem;
}

.prosa--centrada {
  text-align: center;
}

/* Ornamento devocional dourado, no espírito da classe .ornamento do app. */
.ornamento {
  color: var(--cor-dourado);
  letter-spacing: 0.5em;
  font-size: 1rem;
  text-align: center;
}

.ornamento--claro {
  color: var(--cor-dourado-claro);
}

.ornamento--secao {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
}

/* Nas seções em duas colunas o texto é alinhado à esquerda no desktop e
   centralizado no celular: o ornamento acompanha, em vez de fixar o centro. */
.ornamento--herda {
  text-align: inherit;
}

/* Coluna de texto ao lado de uma imagem. Aqui não existe .secao__cabecalho
   para dar o ar entre o título e o primeiro parágrafo. */
.coluna-texto > h2 + p {
  margin-top: 1.25rem;
}

.coluna-texto .destaque-devocional {
  margin-top: 1.75rem;
}

/* ---------------------------------------------------------------------------
   Botões
   --------------------------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* Alvo de toque confortável no celular: 48px de altura mínima. */
  min-height: 3rem;
  padding: 0.85rem 1.9rem;
  border: none;
  border-radius: 8px;
  font-family: var(--font-titulo), Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease,
    box-shadow 150ms ease;
}

.botao:active {
  transform: translateY(1px);
}

/* Primário do app: carmesim cheio, texto creme. */
.botao--primario,
a.botao--primario {
  background: var(--cor-carmesim);
  color: var(--cor-creme);
  box-shadow: 0 2px 8px rgb(74 59 50 / 16%);
}

.botao--primario:hover,
a.botao--primario:hover {
  background: var(--cor-carmesim-titulo);
  color: var(--cor-creme);
}

/* Botão do hero. Carmesim sobre carmesim desapareceria, e o dourado normal
   (#b4894a) com texto escuro dá 3,8:1, que reprova em AA. O dourado-claro do
   app é justamente o tom feito para ser lido sobre o vinho: 6,1:1. */
.botao--dourado,
a.botao--dourado {
  background: var(--cor-dourado-claro);
  color: var(--cor-carmesim);
  box-shadow: 0 4px 18px rgb(0 0 0 / 28%);
}

.botao--dourado:hover,
a.botao--dourado:hover {
  background: var(--cor-dourado-hover);
  color: var(--cor-carmesim);
}

.botao--grande {
  padding: 1.1rem 2.4rem;
  font-size: 1.3rem;
}

/* No celular o botão ocupa a linha inteira: alvo maior e nada de texto de
   duas palavras espremido no meio da tela. */
.botao--largo {
  width: 100%;
}

@media (min-width: 30rem) {
  .botao--largo {
    width: auto;
  }
}

/* Microcopy sob o botão: as garantias curtas. */
.apoio-botao {
  margin: 0.9rem 0 0;
  color: var(--cor-texto);
  font-size: 0.93rem;
}

.apoio-botao--claro {
  color: var(--cor-dourado-claro);
}

.bloco-acao {
  margin-top: 2.75rem;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Cabeçalho fixo
   --------------------------------------------------------------------------- */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(251 245 232 / 96%);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cor-borda);
}

.cabecalho__conteudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--altura-cabecalho);
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--cor-carmesim);
  text-decoration: none;
  flex-shrink: 0;
}

.marca img {
  width: 2.5rem;
  height: 2.5rem;
}

.marca__nome {
  font-family: var(--font-titulo), Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}

/* Abaixo de 600px não cabem, na mesma linha, o nome por extenso, o botão de
   compra e o hambúrguer. Quem sai é o nome: a logomarca continua identificando
   a página, e o que não pode encolher nem quebrar é o botão de compra. */
@media (max-width: 37.499rem) {
  .marca__nome {
    display: none;
  }
}

@media (min-width: 60rem) {
  .marca img {
    width: 2.9rem;
    height: 2.9rem;
  }

  .marca__nome {
    font-size: 1.4rem;
  }
}

.cabecalho__acoes {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.menu__lista {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__lista a {
  color: var(--cor-texto);
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}

.menu__lista a:hover {
  color: var(--cor-carmesim);
  border-bottom-color: var(--cor-dourado);
}

/* O botão de compra do cabeçalho é menor que os da página: ele acompanha o
   scroll, não abre seção. O nowrap é o que impede que "Ativar na minha
   paróquia" vire três linhas na tela estreita e estufe a barra inteira. */
.cabecalho .botao {
  min-height: 2.75rem;
  padding: 0.6rem 1.15rem;
  font-size: 1rem;
  white-space: nowrap;
}

.botao-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  color: var(--cor-carmesim);
  cursor: pointer;
}

.botao-menu svg {
  width: 1.35rem;
  height: 1.35rem;
}

/* Até 60rem o menu vira gaveta; o botão de compra continua visível ao lado do
   hambúrguer, como manda a Seção 5.1 do PRD. */
@media (max-width: 59.999rem) {
  .menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--cor-pergaminho);
    border-bottom: 1px solid var(--cor-borda);
    box-shadow: 0 8px 20px rgb(74 59 50 / 10%);
  }

  .menu__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0;
  }

  .menu__lista a {
    display: block;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--cor-borda);
  }

  .menu__lista li:last-child a {
    border-bottom: none;
  }

  /* No celular tudo o que se toca tem 48px, inclusive na barra estreita. */
  .cabecalho .botao {
    min-height: 3rem;
    padding: 0.6rem 0.9rem;
    font-size: 0.92rem;
  }

  .botao-menu {
    width: 3rem;
    height: 3rem;
  }
}

/* No desktop o menu está sempre aberto: o atributo [hidden] que o JavaScript
   deixa no elemento vale só enquanto ele é gaveta. */
@media (min-width: 60rem) {
  .botao-menu {
    display: none;
  }

  .menu[hidden] {
    display: block;
  }
}

/* ---------------------------------------------------------------------------
   Hero: a exceção proposital da página (PRD 3.2).
   Fundo no tom mais profundo da paleta do app, texto creme, ornamentos e botão
   em dourado. Da segunda dobra em diante a página volta ao pergaminho claro.
   --------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 7vw, 5rem);
  background: var(--cor-carmesim);
  /* Vinheta: escurece as bordas e faz a luz nascer no alto, como numa estampa
     devocional antiga. */
  background-image: radial-gradient(
    120% 90% at 50% 12%,
    #8a1f1f 0%,
    #6e1414 45%,
    #500d0d 100%
  );
  color: var(--cor-creme);
  border-bottom: 1px solid rgb(217 180 124 / 45%);
}

.hero__conteudo {
  position: relative;
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

@media (min-width: 60rem) {
  .hero__conteudo {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.hero__texto {
  text-align: center;
}

@media (min-width: 60rem) {
  .hero__texto {
    text-align: left;
  }
}

.hero__titulo {
  margin: 0 0 1.1rem;
  color: var(--cor-creme);
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 600;
  line-height: 1.12;
  text-wrap: balance;
}

/* As palavras que carregam a promessa, em dourado sobre o vinho. */
.hero__titulo .realce {
  color: var(--cor-dourado-claro);
}

.hero__subtitulo {
  max-width: 34rem;
  margin: 0 auto 1.9rem;
  color: #f2e6d2;
  font-size: clamp(1.05rem, 2.4vw, 1.2rem);
  line-height: 1.62;
}

@media (min-width: 60rem) {
  .hero__subtitulo {
    margin-inline: 0;
  }
}

/* A imagem devocional, emoldurada como uma estampa. */
.hero__imagem {
  position: relative;
  max-width: 20rem;
  margin: 0;
  padding: 0.55rem;
  justify-self: center;
  background: rgb(0 0 0 / 12%);
  border: 1px solid rgb(217 180 124 / 55%);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgb(0 0 0 / 32%);
}

.hero__imagem img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

@media (min-width: 60rem) {
  .hero__imagem {
    max-width: 23rem;
  }
}

/* ---------------------------------------------------------------------------
   Os quatro motivos (seção "Por que fortalece o Apostolado")
   --------------------------------------------------------------------------- */

.motivos {
  display: grid;
  gap: 1.25rem;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .motivos {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

.motivo {
  display: flex;
  gap: 1rem;
  padding: 1.5rem 1.4rem;
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgb(74 59 50 / 6%);
}

.motivo__marca {
  flex: none;
  color: var(--cor-dourado);
  font-size: 1.4rem;
  line-height: 1.35;
}

.motivo p {
  margin: 0;
}

.motivo strong {
  color: var(--cor-carmesim-titulo);
  font-weight: 600;
}

/* Frase de destaque devocional: o bloco creme do app (.jaculatoria). */
.destaque-devocional {
  max-width: var(--largura-texto);
  margin: 2.75rem auto 0;
  padding: 1.6rem 1.5rem;
  background: var(--cor-dourado-suave);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  text-align: center;
}

.destaque-devocional p {
  margin: 0;
  font-family: var(--font-titulo), Georgia, serif;
  font-style: italic;
  font-size: clamp(1.2rem, 3vw, 1.45rem);
  line-height: 1.4;
  color: var(--cor-carmesim);
}

/* ---------------------------------------------------------------------------
   Vídeo
   --------------------------------------------------------------------------- */

.moldura-video {
  max-width: 52rem;
  margin: 0 auto;
  padding: 0.55rem;
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgb(74 59 50 / 8%);
}

.video-responsivo {
  position: relative;
  /* 16:9 reservado antes de o iframe carregar: nada salta quando ele chega. */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #2b1010;
}

.video-responsivo iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------------------------------------------------------------------------
   Passo a passo
   --------------------------------------------------------------------------- */

.passos {
  counter-reset: passo;
  display: grid;
  gap: 1.25rem;
  max-width: 52rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .passos {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

.passo {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.5rem 1.4rem;
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgb(74 59 50 / 6%);
}

.passo::before {
  counter-increment: passo;
  content: counter(passo);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  background: var(--cor-dourado-suave);
  border: 1px solid var(--cor-dourado);
  border-radius: 999px;
  color: var(--cor-carmesim);
  font-family: var(--font-titulo), Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
}

.passo p {
  margin: 0;
}

.passo strong {
  color: var(--cor-carmesim-titulo);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Cartões do "o que a paróquia recebe"
   --------------------------------------------------------------------------- */

.cartoes {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 44rem) {
  .cartoes {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 66rem) {
  .cartoes {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

/* Mesma superfície branca sobre pergaminho da classe .cartao do app. */
.cartao {
  padding: 1.75rem 1.5rem;
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgb(74 59 50 / 6%);
}

.cartao__ornamento {
  display: block;
  margin-bottom: 0.7rem;
  color: var(--cor-dourado);
  font-size: 1.5rem;
  line-height: 1;
}

.cartao__titulo {
  margin: 0 0 0.6rem;
  font-size: 1.3rem;
}

.cartao p {
  margin: 0;
}

/* ---------------------------------------------------------------------------
   As flores espirituais: imagem ao lado das três categorias
   --------------------------------------------------------------------------- */

.flores {
  display: grid;
  gap: clamp(2rem, 5vw, 3.25rem);
  align-items: center;
}

@media (min-width: 58rem) {
  .flores {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

.flores__imagem {
  max-width: 26rem;
  margin: 0;
  padding: 0.5rem;
  justify-self: center;
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgb(74 59 50 / 10%);
}

.flores__imagem img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.categorias-flores {
  display: grid;
  gap: 1rem;
  margin: 1.75rem 0 1.5rem;
  padding: 0;
  list-style: none;
}

.categoria-flor {
  padding: 1.1rem 1.25rem;
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-left: 3px solid var(--cor-dourado);
  border-radius: 10px;
}

.categoria-flor strong {
  color: var(--cor-carmesim-titulo);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   A tradição
   --------------------------------------------------------------------------- */

.tradicao {
  display: grid;
  gap: 2rem;
  align-items: center;
  justify-items: center;
  text-align: center;
}

@media (min-width: 52rem) {
  .tradicao {
    grid-template-columns: auto 1fr;
    gap: 3rem;
    text-align: left;
  }
}

.tradicao img {
  width: 9.5rem;
  height: 9.5rem;
}

/* Sem teto, a coluna de texto passaria de 90 caracteres por linha no desktop,
   e a linha longa é justamente o que cansa o leitor mais velho. */
.tradicao .coluna-texto {
  max-width: 46rem;
}

/* ---------------------------------------------------------------------------
   A licença
   --------------------------------------------------------------------------- */

.licenca {
  display: grid;
  gap: 1.5rem;
  max-width: 56rem;
  margin: 0 auto;
}

@media (min-width: 52rem) {
  .licenca {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
  }
}

/* O preço é o único bloco carmesim cheio fora do hero, no mesmo espírito do
   contador-herói do app: o número não é um dado numa ficha. */
.bloco-preco {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.25rem 1.75rem;
  background: var(--cor-carmesim);
  background-image: radial-gradient(
    120% 100% at 50% 0%,
    #8a1f1f 0%,
    #6e1414 60%,
    #5c1010 100%
  );
  border-radius: 14px;
  color: var(--cor-creme);
  text-align: center;
  box-shadow: 0 4px 18px rgb(74 59 50 / 18%);
}

.bloco-preco__rotulo {
  margin: 0;
  color: var(--cor-dourado-claro);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* O número grande é o da PARCELA, não o do total. Para o coordenador que
   decide pela paróquia, "12x de R$ 64,17" é a informação que faz a conta
   fechar; o total à vista fica logo abaixo, menor, mas nunca ausente. */
.bloco-preco__parcela {
  margin: 0.85rem 0 0.3rem;
}

.bloco-preco__vezes {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--cor-dourado-claro);
  font-family: var(--font-titulo), Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.bloco-preco__valor {
  display: block;
  font-family: var(--font-titulo), Georgia, serif;
  font-size: clamp(2.8rem, 9.5vw, 3.8rem);
  font-weight: 600;
  line-height: 1;
  color: var(--cor-creme);
  font-variant-numeric: tabular-nums;
}

.bloco-preco__moeda {
  font-size: 0.42em;
  letter-spacing: 0.02em;
}

.bloco-preco__sem-juros {
  margin: 0 0 1.3rem;
  color: var(--cor-dourado-claro);
  font-size: 1.02rem;
}

.bloco-preco__condicoes {
  padding-top: 1.15rem;
  border-top: 1px solid rgb(217 180 124 / 35%);
  color: #f2e6d2;
  font-size: 0.98rem;
}

.bloco-preco__condicoes p {
  margin: 0 0 0.5rem;
}

/* O total à vista: corpo pequeno, mas em creme cheio para não virar letra
   miúda escondida. Ele é a informação que fecha o preço. */
.bloco-preco__condicoes strong {
  color: var(--cor-creme);
  font-weight: 600;
}

.incluido {
  padding: 1.9rem 1.6rem;
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgb(74 59 50 / 6%);
}

/* Rótulo dourado em caixa alta, como o .rotulo do app. */
.incluido__titulo {
  margin: 0 0 1rem;
  font-family: var(--font-corpo), Georgia, serif;
  color: var(--cor-dourado);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.incluido ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.incluido li {
  display: flex;
  gap: 0.7rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--cor-borda);
}

.incluido li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.incluido li::before {
  content: "✦";
  flex: none;
  color: var(--cor-dourado);
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   FAQ: <details> nativo, sem uma linha de JavaScript. Abre pelo teclado de
   graça e é o mesmo padrão do histórico de ramalhetes do app.
   --------------------------------------------------------------------------- */

.faq {
  max-width: 50rem;
  margin: 0 auto;
}

.faq__item {
  margin-bottom: 0.85rem;
  overflow: hidden;
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgb(74 59 50 / 6%);
}

.faq__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  cursor: pointer;
  list-style: none;
}

/* Some com o triângulo cru do navegador: o indicador é o nosso losango
   dourado. O ::-webkit-details-marker cuida do Safari. */
.faq__pergunta::-webkit-details-marker {
  display: none;
}

.faq__pergunta:hover {
  background: #fdfaf3;
}

.faq__pergunta:focus-visible {
  outline: 2px solid var(--cor-dourado);
  outline-offset: -2px;
}

.faq__titulo {
  margin: 0;
  font-size: 1.18rem;
  color: var(--cor-carmesim-titulo);
}

.faq__seta {
  flex: none;
  color: var(--cor-dourado);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 150ms ease;
}

.faq__item[open] .faq__seta {
  transform: rotate(180deg);
}

.faq__resposta {
  padding: 0 1.35rem 1.3rem;
}

.faq__resposta p {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--cor-borda);
}

/* ---------------------------------------------------------------------------
   Fechamento: bloco carmesim sobre o pergaminho, como o contador-herói do app.
   O FUNDO da página segue pergaminho da segunda dobra em diante (PRD 3.2);
   quem é carmesim aqui é o cartão, não a seção.
   --------------------------------------------------------------------------- */

.fechamento {
  max-width: 52rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 3.75rem) clamp(1.5rem, 5vw, 3rem);
  background: var(--cor-carmesim);
  background-image: radial-gradient(
    110% 100% at 50% 0%,
    #8a1f1f 0%,
    #6e1414 55%,
    #560f0f 100%
  );
  border-radius: 16px;
  color: var(--cor-creme);
  text-align: center;
  box-shadow: 0 6px 26px rgb(74 59 50 / 22%);
}

.fechamento h2 {
  color: var(--cor-creme);
  font-size: clamp(1.75rem, 4.6vw, 2.5rem);
  text-wrap: balance;
}

.fechamento h2 + p {
  margin-top: 1.1rem;
}

.fechamento p {
  max-width: 36rem;
  margin-inline: auto;
  color: #f2e6d2;
  font-size: 1.09rem;
}

.fechamento__acao {
  margin-top: 2rem;
}

.fechamento__alternativa {
  display: inline-block;
  margin-top: 1.4rem;
  color: var(--cor-dourado-claro);
  font-size: 1rem;
}

.fechamento__alternativa:hover {
  color: var(--cor-creme);
}

/* ---------------------------------------------------------------------------
   Rodapé
   --------------------------------------------------------------------------- */

.rodape {
  padding-block: 3rem 1.75rem;
  background: #f6efe0;
  border-top: 1px solid var(--cor-borda);
}

.rodape__colunas {
  display: grid;
  gap: 2.25rem;
}

@media (min-width: 40rem) {
  .rodape__colunas {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 62rem) {
  .rodape__colunas {
    grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr;
    gap: 2.5rem;
  }
}

.rodape__titulo {
  margin: 0 0 0.9rem;
  font-family: var(--font-corpo), Georgia, serif;
  color: var(--cor-dourado);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.rodape__marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.rodape__marca img {
  width: 2.5rem;
  height: 2.5rem;
}

.rodape__marca span {
  font-family: var(--font-titulo), Georgia, serif;
  color: var(--cor-carmesim);
  font-size: 1.25rem;
  font-weight: 600;
}

.rodape p {
  margin: 0 0 0.6rem;
  font-size: 0.98rem;
}

.rodape ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rodape li {
  margin-bottom: 0.55rem;
  font-size: 0.98rem;
}

.rodape a {
  color: var(--cor-texto);
  text-decoration: none;
}

.rodape a:hover {
  color: var(--cor-carmesim);
  text-decoration: underline;
}

.rodape__acesso a {
  color: var(--cor-carmesim);
  font-weight: 600;
}

.rodape__base {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cor-borda);
  text-align: center;
}

.rodape__base p {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
}

.rodape__assinatura {
  color: var(--cor-dourado);
  font-style: italic;
}

/* ---------------------------------------------------------------------------
   Botão flutuante de WhatsApp (suporte, não a conversão principal)
   --------------------------------------------------------------------------- */

.whatsapp-flutuante {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 56px: alvo de toque bem acima dos 48px mínimos. */
  width: 3.5rem;
  height: 3.5rem;
  background: var(--cor-whatsapp);
  border-radius: 999px;
  color: #fff;
  box-shadow: 0 4px 14px rgb(0 0 0 / 26%);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.whatsapp-flutuante:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgb(0 0 0 / 32%);
}

.whatsapp-flutuante svg {
  width: 1.85rem;
  height: 1.85rem;
  fill: currentColor;
}

@media (min-width: 40rem) {
  .whatsapp-flutuante {
    right: 1.5rem;
    bottom: 1.5rem;
    width: 3.75rem;
    height: 3.75rem;
  }
}