/* Forjados · oração pelo Brasil. Cores, fontes e espaços só de sistema-visual/tokens.css e
   components/bundle.css, exceto o verde do botão (#176B45), pedido pelo Raphael e fora
   da paleta. Branco sobre esse verde: 6,5:1. Modo claro. */

:root { --verde-acao: #176B45; --verde-acao-hover: #125638; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: only light; }

.or {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--espaco-6);
  width: 100%; max-width: 720px; min-height: 100vh; min-height: 100svh; margin: 0 auto;
  padding: var(--espaco-8) max(var(--espaco-4), env(safe-area-inset-right)) max(var(--espaco-8), env(safe-area-inset-bottom)) max(var(--espaco-4), env(safe-area-inset-left));
}

/* Logo principal do sistema, em 32px de altura (mínimo 28px); o gap de 24px + 8px deixa a área de proteção livre */
.or-logo { height: 32px; width: auto; margin-bottom: var(--espaco-2); }

.or-titulo { font-family: var(--font-titulo); font-weight: 800; font-size: clamp(26px, 7.2vw, 40px); line-height: 1.15; text-align: center; text-wrap: balance; }

/* Vídeo: ocupa a largura da coluna e mantém a proporção. A altura desconta a
   --reserva da tela: 204px (logo, margens, espaços e botão) faz logo, vídeo e botão
   caberem juntos; no vertical, 299px inclui também a headline, para o botão aparecer sem rolar.
   Vídeo vertical (9:16): acrescente or-video--vertical. */
.or-video {
  --proporcao: 16 / 9; --reserva: 204px;
  position: relative;
  width: min(100%, max(180px, calc((100vh - var(--reserva)) * var(--proporcao))));
  aspect-ratio: var(--proporcao); overflow: hidden; border-radius: var(--canto-2); background: var(--carvao);
}
/* svh só onde existe: com var(), uma linha svh sem suporte zera a largura em vez de cair na de vh */
@supports (height: 100svh) {
  .or-video { width: min(100%, max(180px, calc((100svh - var(--reserva)) * var(--proporcao)))); }
}
.or-video--vertical { --proporcao: 9 / 16; --reserva: 299px; }
.or-video iframe, .or-video video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; object-fit: contain; background: var(--carvao); }

/* Botão: do tamanho do texto, igual no celular e no desktop; 48px de altura para o polegar */
.or-cta { max-width: 100%; min-height: 48px; padding: var(--espaco-3) var(--espaco-6); background: var(--verde-acao); color: #FFFFFF; white-space: normal; text-align: center; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.or-cta:hover { background: var(--verde-acao-hover); }