/* Caravanas da Fé — base do site.
   Duas decisões guiam este CSS e não devem ser desfeitas sem motivo:

   1) O público é majoritariamente 60+. Por isso o corpo de texto começa em 19px
      (não 16), a altura de linha é generosa e todo alvo de toque tem no mínimo
      48px. Nada de texto cinza-claro sobre fundo claro.
   2) O conteúdo não pode depender de JavaScript. A queixa da cliente sobre o
      site antigo foi exatamente essa (buscadores e IAs não liam a página), então
      tudo aqui é HTML servido pronto; o CSS só enfeita.

   Paleta: azul e amarelo são as cores com que ela já trabalha ("eu trabalho
   muito com azul, com amarelo"). O azul profundo puxa o manto de Nossa Senhora
   e o amarelo é a chama da vela — a estrutura das seções veio da referência
   que ela aprovou (orbisviagens.com.br), só que na cor da casa. */

:root {
  --azul: #143c7b;
  --azul-escuro: #0e2a57;
  --azul-claro: #2059a8;
  --creme: #f7f1e4;
  --creme-fundo: #fdfaf3;
  --amarelo: #f2b705;
  --amarelo-claro: #ffe08a;
  --verde-zap: #25d366;
  --verde-zap-escuro: #128c3e;
  --tinta: #1c2333;
  --tinta-suave: #4d576b;
  --branco: #ffffff;
  --borda: #e2dcc9;

  --fonte-titulo: "Georgia", "Times New Roman", serif;
  --fonte-texto: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --largura: 1120px;
  --raio: 16px;
  --sombra: 0 4px 16px rgba(14, 42, 87, 0.08);
  --sombra-forte: 0 10px 30px rgba(14, 42, 87, 0.16);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--creme-fundo);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: 19px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  color: var(--azul);
  line-height: 1.2;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.5rem); }

p { margin: 0 0 1.1em; }

a { color: var(--azul); }

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

.container {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 20px;
}

.secao { padding: clamp(48px, 8vw, 88px) 0; }
.secao--creme { background: var(--creme); }
.secao--azul { background: var(--azul); color: var(--branco); }
.secao--azul h2, .secao--azul h3 { color: var(--branco); }

.chapeu {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--azul-claro);
  margin-bottom: 12px;
}
.secao--azul .chapeu { color: var(--amarelo-claro); }

/* Botões — mínimo 48px de altura porque o dedo do público não é preciso. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 28px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sombra-forte); }

/* Verde é exclusivo do WhatsApp. Se um botão é verde, ele abre conversa —
   nunca rola a página. O público 60+ aprende esse código em uma visita. */
.btn--zap { background: var(--verde-zap); color: #06331a; }
.btn--zap:hover { background: #1fbb59; }

.btn--amarelo { background: var(--amarelo); color: #12203d; }
.btn--amarelo:hover { background: #ffc82e; }
.btn--azul { background: var(--azul); color: var(--branco); }
.btn--azul:hover { background: var(--azul-claro); }
/* Contorno herda a cor do texto, então precisa virar branco em todo fundo
   escuro — se esquecer de um, o botão some no fundo. */
.btn--contorno { border-color: currentColor; color: var(--azul); background: transparent; }
.secao--azul .btn--contorno,
.capa .btn--contorno,
.roteiro-capa .btn--contorno,
.capela-capa .btn--contorno { color: var(--branco); }

.cartao {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.grade {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Barra fixa de WhatsApp no rodapé do celular: o site inteiro converte por ali,
   então ela nunca sai da tela. No desktop vira botão flutuante. */
.zap-fixo {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(253, 250, 243, 0.95);
  border-top: 1px solid var(--borda);
  backdrop-filter: blur(6px);
}
.zap-fixo .btn { width: 100%; }

@media (min-width: 768px) {
  .zap-fixo {
    left: auto; right: 24px; bottom: 24px;
    padding: 0; background: none; border: none; backdrop-filter: none;
  }
  .zap-fixo .btn { width: auto; box-shadow: var(--sombra-forte); }
}

/* O rodapé precisa de folga no celular por causa da barra fixa. */
body { padding-bottom: 88px; }
@media (min-width: 768px) { body { padding-bottom: 0; } }

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
}
.pular-para-conteudo:focus {
  left: 16px; top: 16px;
  z-index: 100;
  background: var(--branco);
  padding: 12px 20px;
  border-radius: 8px;
}