/* ============================================================
   Portal IBRFÉ — estilos do site público
   Depende de tokens.css (carregado antes).
   ============================================================ */

/* ── Reset enxuto ─────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compensa o cabeçalho fixo ao pular para uma âncora */
  scroll-padding-top: calc(var(--header-h) + var(--space-2));
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* rede de segurança contra estouro horizontal */
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  text-wrap: balance; /* evita órfã na última linha (ignorado onde não há suporte) */
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; }

p { margin: 0 0 var(--space-2); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; }

/* Foco visível e consistente. Nunca remover: é requisito de acessibilidade. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ── Acessibilidade ──────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: var(--z-modal);
  background: var(--accent);
  color: var(--on-accent);
  padding: var(--space-1) var(--space-3);
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 600;
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ── Layout ──────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-narrow { max-width: var(--container-narrow); }

.section {
  padding-block: var(--space-6);
}

.section--tight { padding-block: var(--space-5); }

/* Seções claras: usadas para leitura longa e formulários, onde texto
   escuro sobre fundo claro cansa menos a vista. */
.section--light {
  background: var(--bg-light);
  color: var(--fg-light);
}
/* Gradiente sutil + anéis decorativos nos cantos — referência:
   igrejared.com. Puramente decorativo (opacidade baixa, atrás do
   conteúdo): não muda o contraste do texto, que continua medido sobre
   --surface como cor de fundo efetiva. */
.section--surface {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-3) 160%);
}
.section--surface::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.10;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 90% 8%, transparent 0 56px, var(--accent) 57px, var(--accent) 58px, transparent 59px),
    radial-gradient(circle at 90% 8%, transparent 0 92px, var(--fg) 93px, var(--fg) 94px, transparent 95px),
    radial-gradient(circle at 4% 96%, transparent 0 38px, var(--fg) 39px, var(--fg) 40px, transparent 41px);
}
.section--surface > .container { position: relative; z-index: 1; }

/* ── Eyebrow e cabeçalho de seção ────────────────────────── */

.eyebrow {
  display: block;
  margin: 0 0 var(--space-2);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-soft);
}
.section--light .eyebrow { color: var(--accent-dim); }

.section-head { max-width: 44ch; margin-bottom: var(--space-4); }
.section-head--center { margin-inline: auto; text-align: center; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--fg-muted);
  margin-top: var(--space-2);
  max-width: 58ch;
}
.section--light .lead { color: var(--fg-light-muted); }
.section-head--center .lead { margin-inline: auto; }

/* ── Prosa ───────────────────────────────────────────────── */

.prose { max-width: var(--measure); }
.prose p { margin-bottom: var(--space-3); }
.prose p:last-child { margin-bottom: 0; }
.prose a {
  color: var(--accent-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.section--light .prose a { color: var(--accent-dim); }

.quote {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 400;
}

/* ── Botões ──────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  /* min-height 48px cobre o alvo de toque de 44px com folga */
  min-height: 48px;
  padding: 12px var(--space-3);
  border: 2px solid transparent;
  border-radius: var(--r-full);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-in-out),
              border-color var(--dur-fast) var(--ease-in-out),
              color var(--dur-fast) var(--ease-in-out),
              transform var(--dur-fast) var(--ease-out);
  touch-action: manipulation; /* remove o atraso de 300ms no toque */
}

.btn:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Botão de ação do YouTube: vermelho da marca, para o CTA "Assistir no
   YouTube" se destacar do acento dourado do resto do site. */
.btn-youtube {
  background: var(--youtube-red);
  color: #fff;
  border-color: var(--youtube-red);
}
.btn-youtube:hover { background: var(--youtube-red-hover); border-color: var(--youtube-red-hover); }

/* Secundário sobre fundo escuro */
.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: rgba(250, 250, 250, .35);
}
.btn-ghost:hover { border-color: var(--fg); background: rgba(250, 250, 250, .08); }

/* Secundário sobre fundo claro */
.btn-outline {
  background: transparent;
  color: var(--fg-light);
  border-color: rgba(47, 61, 77, .25);
}
.btn-outline:hover { border-color: var(--fg-light); background: rgba(47, 61, 77, .05); }

.btn-block { width: 100%; }

.btn[aria-disabled="true"], .btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* ── Cabeçalho ───────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg);
  border-bottom: 1px solid var(--border-dark);
}

/* Na home o cabeçalho flutua sobre o vídeo até o usuário rolar. */
.site-header--over-hero {
  position: fixed;
  left: 0; right: 0;
  background: transparent;
  border-bottom-color: transparent;
  transition: background-color var(--dur-mid) var(--ease-in-out),
              border-color var(--dur-mid) var(--ease-in-out);
}
.site-header--over-hero.is-scrolled {
  background: rgba(27, 35, 44, .92);
  border-bottom-color: var(--border-dark);
  backdrop-filter: blur(10px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px; /* alvo de toque mínimo */
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
  flex-shrink: 0;
}
.brand img { height: 40px; width: auto; }
.brand-text { display: flex; flex-direction: column; }
.brand-text small {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background: transparent;
  border: 1px solid var(--border-dark);
  border-radius: var(--r-md);
  cursor: pointer;
  touch-action: manipulation;
}
.site-header--over-hero .nav-toggle { border-color: rgba(250, 250, 250, .3); }
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
}

.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--fg);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.nav-list a:hover { color: var(--accent-soft); }

/* Página atual marcada por cor E sublinhado — cor sozinha não basta. */
.nav-list a[aria-current="page"] {
  color: var(--accent-soft);
  border-bottom-color: var(--accent);
}

/* Mobile: menu em painel deslizante */
@media (max-width: 1023px) {
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border-dark);
    padding: var(--space-2) var(--gutter) var(--space-3);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    /* visibility com duração 0 e DELAY igual à animação: ao fechar, o
       painel continua visível durante o fade; ao abrir (regra .is-open),
       o delay é zero e ele fica clicável imediatamente. Transicionar
       visibility com duração deixaria o menu inerte por 240ms. */
    transition: opacity var(--dur-mid) var(--ease-out),
                transform var(--dur-mid) var(--ease-out),
                visibility 0s linear var(--dur-mid);
  }
  .nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-mid) var(--ease-out),
                transform var(--dur-mid) var(--ease-out),
                visibility 0s;
  }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list a {
    min-height: 52px;
    padding-block: var(--space-1);
    border-bottom: 1px solid var(--border-dark);
    border-radius: 0;
  }
  .nav-list a[aria-current="page"] { border-bottom-color: var(--accent); }
  .nav .btn { margin-top: var(--space-2); }
}

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
}

/* ── Hero com vídeo ──────────────────────────────────────── */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* min-height com dvh: em mobile 100vh gera corte por causa da barra
     de endereço. Reserva também a altura do cabeçalho fixo. */
  min-height: 100dvh;
  padding-top: calc(var(--header-h) + var(--space-5));
  padding-bottom: var(--space-6);
  overflow: hidden;
  isolation: isolate;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Preto e branco — na classe compartilhada pelo <video> e pelo <img> de
     fallback/poster, então mobile (só vê o poster) e desktop (vê o vídeo)
     ficam visualmente consistentes, sem precisar gerar um poster à parte. */
  filter: grayscale(100%);
}

/* Fallback <img> dentro do <video>, para quando o MP4 não carrega */
.hero-bg-fallback { position: absolute; inset: 0; }

/* Overlay: garante contraste >= 4.5:1 do texto sobre QUALQUER quadro do
   vídeo. Gradiente para dar mais peso na base, onde fica a copy, e uma
   cor de base sólida para não depender do gradiente. */
/* Referência (igrejared.com): overlay preto sólido a 50% de opacidade,
   uniforme, sem degradê. O motivo do texto deles contrastar tanto mais é
   que o VÍDEO de origem já é escuro (iluminação de palco baixa) — o mesmo
   50% em cima do nosso vídeo (igreja bem iluminada) sobra muito mais
   detalhe visível atrás do texto. Compensamos subindo a opacidade de base
   e do topo do degradê, já que não dá pra escurecer a filmagem em si. */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(27, 35, 44, .70);
  background-image: linear-gradient(
    to top,
    rgba(27, 35, 44, .94) 0%,
    rgba(27, 35, 44, .80) 45%,
    rgba(27, 35, 44, .62) 100%
  );
}

.hero-inner { position: relative; }
.hero-copy { max-width: 46rem; }

.hero h1 {
  font-size: var(--fs-hero);
  letter-spacing: -0.035em;
  margin-bottom: var(--space-3);
  /* A medida fica no h1, não no .hero-copy: "ch" resolve contra o
     font-size do próprio elemento, então 16ch aqui vale ~16 caracteres
     do tamanho de display. No contêiner (fonte de corpo, 18px) daria uma
     coluna estreitíssima e o título quebraria a cada palavra. */
  max-width: 16ch;
}

.hero .lead { max-width: 46ch; color: #E4E4E7; }

/* Botão de pausa do vídeo — requisito de acessibilidade para movimento
   automático. Fica no canto, discreto, mas com alvo de toque completo. */
.hero-video-toggle {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: rgba(27, 35, 44, .65);
  border: 1px solid rgba(250, 250, 250, .3);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background-color var(--dur-fast);
}
.hero-video-toggle:hover { background: rgba(27, 35, 44, .85); }
.hero-video-toggle svg { width: 18px; height: 18px; }
.hero-video-toggle .icon-play { display: none; }
.hero-video-toggle[data-paused="true"] .icon-play { display: block; }
.hero-video-toggle[data-paused="true"] .icon-pause { display: none; }

/* Sem vídeo configurado, o botão não faz sentido */
.hero:not(:has(video)) .hero-video-toggle { display: none; }

/* Indicador de rolagem */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: var(--space-3);
  transform: translateX(-50%);
  color: var(--fg-muted);
}
@media (max-width: 767px) { .hero-scroll { display: none; } }

/* ── Hero interno (páginas que não são a home) ───────────── */

.page-hero {
  padding-top: calc(var(--space-6) + var(--space-2));
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-dark);
}
.page-hero h1 { font-size: var(--fs-display); max-width: 24ch; }
.page-hero .lead { margin-top: var(--space-3); }

/* ── Grids genéricos ─────────────────────────────────────── */

.grid {
  display: grid;
  gap: var(--space-3);
  list-style: none;
}
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid-2, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── Card ────────────────────────────────────────────────── */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.section--light .card {
  background: var(--surface-light);
  border-color: var(--border-light);
}

a.card:hover, .card--link:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  a.card:hover, .card--link:hover { transform: none; }
}

.card h3 { margin-bottom: var(--space-1); }
.card p {
  font-size: var(--fs-body-sm);
  color: var(--fg-muted);
  margin: 0;
}
.section--light .card p { color: var(--fg-light-muted); }

.card-media {
  margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) var(--space-2);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
}
.card-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.card-link-hint {
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--accent-soft);
}
.section--light .card-link-hint { color: var(--accent-dim); }

/* Cards de ministério: fonte mais discreta e sem "Conhecer →" — a foto
   inteira já é o link (referência: igrejared.com), o card não precisa
   gritar tanto quanto um card de conteúdo comum. Textos mais próximos
   entre si (menos respiro que um card de conteúdo comum): o .card h3 tem
   margin-bottom PRÓPRIO que soma com o gap do flex pai, dobrando o espaço
   entre título e resumo — aqui zeramos essa margem e reduzimos o gap.
   Foto também cola mais perto do texto (era --space-2, 16px). */
.card--ministry { gap: 2px; }
.card--ministry h3 { font-size: var(--fs-body); margin-bottom: 0; }
.card--ministry p { font-size: 0.875rem; }
.card--ministry .card-media { margin-bottom: var(--space-1); }
.card--ministry .ministry-leaders { margin-top: var(--space-1); padding-top: var(--space-1); }

/* ── Card de destaque: foto grande + legenda em bloco sólido ──
   Referência real do igrejared.com: nas fotos deles (ministérios,
   "Contribua financeiramente" etc.) o texto NUNCA fica sobre a foto — fica
   numa faixa sólida abaixo. O texto sobre gradiente translúcido só aparece
   nos painéis de cor da marca, sem foto por trás. Tentamos o texto
   sobreposto direto na foto antes; mesmo com overlay reforçado o resultado
   ficou pior visualmente que o padrão sólido, então voltamos a esse
   caminho — mais fiel à referência e com contraste trivialmente garantido
   (texto claro sobre --surface, não sobre pixel de foto nenhum). */
.card--feature {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-dark);
  transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.card--feature:hover, .card--feature:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .card--feature:hover, .card--feature:focus-visible { transform: none; }
}
.card--feature img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card--feature .card-feature-body { padding: var(--space-4); }
.card--feature h3 { font-size: var(--fs-h2); margin: var(--space-1) 0 var(--space-2); }
.card--feature p { color: var(--fg-muted); margin: 0 0 var(--space-3); }

/* Numeração dos passos da jornada de fé — número grande "de vitrine" no
   fundo do card (referência: igrejared.com), não mais um algarismo pequeno
   acima do título. Fica atrás do texto, em opacidade baixa, sem atrapalhar
   a leitura nem o contraste (é decorativo, aria-hidden). */
.card--step {
  position: relative;
  overflow: hidden;
  padding-top: var(--space-4);
}
.card--step .step-num {
  position: absolute;
  top: -0.2em;
  right: var(--space-2);
  font-size: 6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  opacity: 0.18;
  margin: 0;
}
.section--light .card--step .step-num { color: var(--accent-dim); opacity: 0.14; }

/* ── Horários dos cultos ─────────────────────────────────── */

.services {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .services { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

.service-day h3 {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--accent-soft);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--border-dark);
}
.section--light .service-day h3 {
  color: var(--accent-dim);
  border-bottom-color: var(--border-light);
}

.service-list { list-style: none; }
.service-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-1);
  font-size: var(--fs-body-sm);
}
.service-list .service-time {
  font-weight: 800;
  font-size: var(--fs-body);
  /* Números tabulares: mantém os horários alinhados na coluna */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Declarações de fé ───────────────────────────────────── */

.beliefs { list-style: none; display: grid; gap: var(--space-2); }

.belief {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.section--light .belief { background: var(--surface-light); }

.belief-mark { flex-shrink: 0; color: var(--accent); }
.belief-mark svg { width: 22px; height: 22px; }
.section--light .belief-mark { color: var(--accent-dim); }

.belief p { margin: 0; }
.belief cite {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-quote);
  font-style: italic;
  font-size: var(--fs-body-sm);
  color: var(--fg-muted);
}
.section--light .belief cite { color: var(--fg-light-muted); }

/* ── Liderança ───────────────────────────────────────────── */

.leader {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-lg);
}
.section--light .leader {
  background: var(--surface-light);
  border-color: var(--border-light);
}
.leader-role {
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-soft);
}
.section--light .leader-role { color: var(--accent-dim); }
.leader-name { font-size: var(--fs-body); font-weight: 600; }

/* Liderança de ministério (dentro do card) */
.ministry-leaders {
  list-style: none;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-dark);
  font-size: var(--fs-body-sm);
}
.section--light .ministry-leaders { border-top-color: var(--border-light); }
.ministry-leaders li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ministry-leaders dt, .ministry-leaders .role {
  font-weight: 600;
  color: var(--fg-muted);
}
.section--light .ministry-leaders .role { color: var(--fg-light-muted); }
.ministry-leaders a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Avatar de pessoa: foto redonda, ou as iniciais quando ainda não tem foto
   (ver author_avatar() em includes/helpers.php). Link pra página de resumo
   de qualificações (blog/autor.php), a mesma usada pros autores do blog. */
.avatar {
  border-radius: var(--r-full);
  object-fit: cover;
  flex-shrink: 0;
}
.avatar-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--fg-muted);
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.section--light .avatar-placeholder { background: #EDE7DF; color: var(--fg-light-muted); }

/* ── Compromissos da missão ──────────────────────────────── */

.commitments { list-style: none; display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .commitments { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .commitments { grid-template-columns: repeat(4, 1fr); } }

.commitment {
  padding-top: var(--space-2);
  border-top: 3px solid var(--accent);
}
.commitment h3 {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-1);
}
.commitment p { font-size: var(--fs-body-sm); color: var(--fg-muted); margin: 0; }
.section--light .commitment p { color: var(--fg-light-muted); }

/* ── Lista de checagem ("o que esperar") ─────────────────── */

.checklist { list-style: none; display: grid; gap: var(--space-2); }
.checklist li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: var(--fs-body-sm);
}
.checklist svg {
  flex-shrink: 0;
  width: 22px; height: 22px;
  margin-top: 2px;
  color: var(--accent);
}
.section--light .checklist svg { color: var(--accent-dim); }

/* ── Placeholder de imagem ───────────────────────────────── */

/* Reserva o espaço exato da imagem definitiva (aspect-ratio), então
   trocar o placeholder pela foto real não causa deslocamento (CLS). */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
  border: 1px dashed var(--border-dark);
  border-radius: var(--r-lg);
  color: var(--fg-muted);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--space-2);
}
.section--light .ph {
  background: #EDE7DF;
  border-color: var(--border-light);
  color: var(--fg-light-muted);
}
.ph--square  { aspect-ratio: 1 / 1; }
.ph--portrait{ aspect-ratio: 3 / 4; }
.ph--wide    { aspect-ratio: 21 / 9; }

/* ── Painel do logotipo do SETEM ─────────────────────────────
   Não há foto de turma no acervo (ver ASSETS.md); em vez de placeholder
   genérico, mostra a identidade visual real que a igreja enviou. */
.setem-logo-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  border-radius: var(--r-lg);
  padding: var(--space-5);
}
.setem-logo-panel img { width: 100%; max-width: 320px; height: auto; }

/* ── Player embutido do canal (Campus Online) ───────────────── */

.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Blocos de duas colunas ──────────────────────────────── */

.split {
  display: grid;
  gap: var(--space-4);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .split--media-first > *:first-child { order: 2; }
  .split--media-first > *:last-child { order: 1; }
}

/* ── Faixa de destaque ───────────────────────────────────── */

.band {
  background: var(--accent);
  color: var(--on-accent);
  padding-block: var(--space-5);
}
.band .eyebrow { color: rgba(26, 18, 6, .72); }
.band .lead { color: rgba(26, 18, 6, .82); }
.band .btn-primary {
  background: var(--on-accent);
  color: var(--accent);
  border-color: var(--on-accent);
}
.band .btn-primary:hover { background: #000; border-color: #000; }

/* ── Vídeo incorporado (YouTube) ─────────────────────────── */

.embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
}
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Formulários ─────────────────────────────────────────── */

.form { display: grid; gap: var(--space-3); }

.fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}
.fieldset > legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-dim);
}

.field { display: grid; gap: 6px; }

.field label {
  font-size: var(--fs-body-sm);
  font-weight: 600;
}

.field .req { color: var(--danger); }

.field .help {
  font-size: var(--fs-label);
  line-height: 1.5;
  color: var(--fg-light-muted);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field select,
.field textarea {
  width: 100%;
  /* 48px de altura atende o alvo de toque; 16px de fonte evita o
     zoom automático do Safari iOS ao focar o campo. */
  min-height: 48px;
  padding: 12px var(--space-2);
  font-family: inherit;
  font-size: var(--fs-body-sm);
  line-height: 1.4;
  color: var(--fg-light);
  background: var(--surface-light);
  border: 1px solid #C8C3BB;
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.field textarea { min-height: 132px; resize: vertical; }

.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent-dim);
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--danger);
  border-width: 2px;
}

/* Erro logo abaixo do campo, com ícone — cor sozinha não comunica. */
.field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.5;
  color: var(--danger-fg);
}
.field-error svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; }

/* Rádios e checkboxes */
.choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 48px;
  padding: 10px var(--space-2);
  background: var(--surface-light);
  border: 1px solid #C8C3BB;
  border-radius: var(--r-full);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.choice:hover { border-color: var(--accent-dim); }
.choice input { width: 20px; height: 20px; accent-color: var(--accent-dim); margin: 0; }
.choice:has(input:checked) {
  border-color: var(--accent-dim);
  border-width: 2px;
  background: #FBF2E6;
}

/* Honeypot: invisível para humanos, preenchido por bots.
   Fora da tela em vez de display:none, porque alguns bots ignoram
   campos com display:none. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ── Alertas ─────────────────────────────────────────────── */

.alert {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3);
  border-radius: var(--r-md);
  border-left: 4px solid;
  font-size: var(--fs-body-sm);
}
.alert svg { flex-shrink: 0; width: 22px; height: 22px; }
.alert h3 { font-size: var(--fs-body); margin-bottom: 4px; }
.alert p { margin: 0; }

.alert--success {
  background: var(--success-light);
  border-color: var(--success);
  color: var(--success-fg);
}
.alert--error {
  background: var(--danger-light);
  border-color: var(--danger);
  color: var(--danger-fg);
}

.error-summary { list-style: none; margin-top: var(--space-1); }
.error-summary a {
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

/* ── Rodapé ──────────────────────────────────────────────── */

.site-footer {
  background: #151C24;
  border-top: 1px solid var(--border-dark);
  padding-block: var(--space-5) var(--space-3);
  font-size: var(--fs-body-sm);
}

.footer-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-4);
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }

.footer-col h3 {
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-soft);
  margin-bottom: var(--space-2);
}

.footer-col ul { list-style: none; display: grid; gap: 2px; }
.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* alvo de toque mínimo */
  color: var(--fg-muted);
  transition: color var(--dur-fast);
}
.footer-col a:hover { color: var(--accent-soft); }

.footer-brand p { color: var(--fg-muted); max-width: 34ch; }

.socials { display: flex; gap: var(--space-1); margin-top: var(--space-2); }
.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--border-dark);
  border-radius: var(--r-full);
  color: var(--fg-muted);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.socials a:hover { color: var(--accent); border-color: var(--accent); }
.socials svg { width: 20px; height: 20px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-dark);
  color: var(--fg-muted);
  font-size: var(--fs-label);
}

.dev-credit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-muted);
  text-decoration: none;
  transition: opacity 160ms var(--ease-out);
}
.dev-credit:hover { opacity: .8; }
.dev-credit img { height: 20px; width: auto; }

/* ── Revelação ao rolar ──────────────────────────────────── */

/* Estado inicial aplicado só quando o JS está ativo, para que o conteúdo
   nunca fique invisível se o script falhar. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Utilitários ─────────────────────────────────────────── */

.text-center { text-align: center; }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.stack { display: grid; gap: var(--space-3); }
.stack-sm { display: grid; gap: var(--space-2); }

/* ── Impressão ───────────────────────────────────────────── */

@media print {
  .site-header, .site-footer, .hero-media, .hero-video-toggle,
  .nav-toggle, .cta-row, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .section { padding-block: var(--space-2); }
}