/* =========================================================
   IBNB — Camada de cores (aplicada SOBRE a base preto/branco/cinza)

   Cores medidas nas artes oficiais (mediana dos pixels):
     laranja #EF7814 — Check-in      → acolhimento, ação
     salmão  #CF556A — Santa Ceia    → comunhão, amor
     azul    #01A1C1 — Batismo       → nova vida, Palavra

   Regras:
   1. A base continua P&B (identidade da IBNB). A cor é sotaque, não fundo.
   2. Cada página tem UMA cor dominante: <body data-cor="laranja|salmao|azul">.
   3. Cartões/seções que levam a outra área usam a cor daquela área: class="cor-azul" etc.
   4. Sobre fundo claro, textos e ícones usam a versão "-escuro" (contraste ≥ 4,5:1).
      Sobre fundo escuro, a cor viva. Texto sobre a cor viva é sempre preto.
   Sem este arquivo (ou com ?versao=pb na URL) o site volta à versão P&B.
   ========================================================= */

:root {
  --laranja: #ef7814; --laranja-escuro: #ad4f08; --laranja-claro: #fdeadb;
  --salmao: #cf556a;  --salmao-escuro: #b23f55;  --salmao-claro: #f9e2e6;
  --azul: #01a1c1;    --azul-escuro: #036f86;    --azul-claro: #dcf2f7;
  --sobre-cor: #0d0d0f;
}
body, .cor-laranja { --acento: var(--laranja); --acento-escuro: var(--laranja-escuro); --acento-claro: var(--laranja-claro); }
body[data-cor="salmao"], .cor-salmao { --acento: var(--salmao); --acento-escuro: var(--salmao-escuro); --acento-claro: var(--salmao-claro); }
body[data-cor="azul"], .cor-azul { --acento: var(--azul); --acento-escuro: var(--azul-escuro); --acento-claro: var(--azul-claro); }

::selection { background: var(--acento); color: var(--sobre-cor); }

/* ---------- Sobretítulo e ênfases ---------- */
.sobretitulo::before { background: var(--acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 26%, transparent); }
:is(.escuro, .capa, .heroi, .contribua-faixa, .menu-total, .bloco-caminho, .asa, .rodape, .nao-encontrado, .passo--foto, .passo--caminho) .sobretitulo::before { background: var(--acento); }

:is(.titulo-xxl, .titulo-xl, .titulo-l, .titulo-m) .serif { color: var(--acento-escuro); }
:is(.escuro, .capa, .heroi, .contribua-faixa, .bloco-caminho, .asa, .nao-encontrado) :is(.titulo-xxl, .titulo-xl, .titulo-l, .titulo-m) .serif { color: var(--acento); }

/* Páginas laranja: a palavra em destaque da capa vira "marca-texto", como na arte do Check-in */
body[data-cor="laranja"] .capa .titulo-xxl .serif {
  color: var(--sobre-cor); background: var(--acento);
  padding: .02em .16em .06em; margin-left: -.04em; line-height: 1.02;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.link-seta { color: var(--acento-escuro); }
:is(.escuro, .capa, .asa, .bloco-caminho, .passo--foto) .link-seta { color: var(--acento); }

/* ---------- Botões ---------- */
.botao--destaque, :is(.escuro, .capa, .heroi, .contribua-faixa, .menu-total, .bloco-caminho) .botao--destaque { --b-bg: var(--acento); --b-cor: var(--sobre-cor); }
.botao--destaque:hover, :is(.escuro, .capa, .heroi, .contribua-faixa, .menu-total, .bloco-caminho) .botao--destaque:hover { --b-bg: color-mix(in srgb, var(--acento) 82%, #fff); }
/* No cabeçalho o "Contribua" continua branco: navegação global fica estável */

.nav a[aria-current="page"] { background: color-mix(in srgb, var(--acento) 30%, transparent); }
.menu-total nav a span { color: var(--acento); }
.menu-total nav a[aria-current="page"] { color: var(--acento); text-decoration-color: var(--acento); }
.barra-app a[aria-current="page"] { background: var(--acento); color: var(--sobre-cor); }
.subnav a:hover, .subnav a.ativo { background: var(--acento); color: var(--sobre-cor); }

/* ---------- Faixa de palavras: as três cores juntas ---------- */
.faixa { border-top: 0; }
.faixa__trilho span:nth-child(3n+1)::after { background: var(--laranja); }
.faixa__trilho span:nth-child(3n+2)::after { background: var(--salmao); }
.faixa__trilho span:nth-child(3n)::after { background: var(--azul); }

/* ---------- Próximo culto e semana ---------- */
.ao-vivo-ponto { background: var(--acento); }
@keyframes pulsa-cor { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 70%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
.ao-vivo-ponto { animation-name: pulsa-cor; }
.cartao-culto__conta { color: var(--acento); }
.semana__hora { color: var(--acento-escuro); }
.escuro .semana__hora { color: var(--acento); }

/* ---------- Duas asas ---------- */
.asa__numero { color: var(--acento); }
.asa::after { background: linear-gradient(180deg, transparent 30%, rgba(13, 13, 15, .9)), linear-gradient(0deg, color-mix(in srgb, var(--acento) 38%, transparent), transparent 45%); }

/* ---------- Bento de próximos passos ---------- */
.passo[class*="cor-"] .passo__icone { background: var(--acento-claro); color: var(--acento-escuro); }
:is(.passo--foto, .passo--escuro, .passo--caminho)[class*="cor-"] .passo__icone { background: color-mix(in srgb, var(--acento) 24%, transparent); color: var(--acento); }
.passo:hover .passo__seta, :is(.passo--foto, .passo--escuro, .passo--caminho):hover .passo__seta { background: var(--acento); border-color: var(--acento); color: var(--sobre-cor); }
.passo--caminho[class*="cor-"] { background: linear-gradient(150deg, color-mix(in srgb, var(--acento) 30%, #17171a), #0d0d0f 78%); border-color: transparent; }
/* cartão cheio na cor (ex.: batismo em azul) */
.passo--cor { background: var(--acento); border-color: var(--acento); color: var(--sobre-cor); }
.passo--cor p { color: rgba(13, 13, 15, .74); }
.passo--cor .passo__icone, .passo--cor[class*="cor-"] .passo__icone { background: rgba(13, 13, 15, .1); color: var(--sobre-cor); }
.passo--cor .passo__seta { border-color: rgba(13, 13, 15, .25); }
.passo--cor:hover .passo__seta, .passo--cor[class*="cor-"]:hover .passo__seta { background: var(--sobre-cor); border-color: var(--sobre-cor); color: var(--acento); }

/* ---------- Cartões, trilhas, acordeão, listas ---------- */
.cartao__num, .trilha__item::before { color: var(--acento-escuro); }
.escuro .cartao__num, .escuro .trilha__item::before { color: var(--acento); }
.acordeao summary::after { color: var(--acento-escuro); }
.info-lista svg { color: var(--acento-escuro); }
.escuro .info-lista svg { color: var(--acento); }
.lista-check li::before { background-color: var(--acento-escuro); }
:is(.escuro, .capa, .bloco-caminho) .lista-check li::before { background-color: var(--acento); }
.citacao cite { color: var(--acento-escuro); }
.escuro .citacao cite { color: var(--acento); }
.versiculo cite { color: var(--acento); }

/* ---------- Eventos: as artes voltam a ter cor ---------- */
.evento__arte img { filter: none; }
.evento__arte--vazia { background: radial-gradient(120% 120% at 100% 0%, #a72545, transparent 60%), radial-gradient(100% 100% at 0% 100%, var(--laranja), transparent 65%), #2a0d18; }
.evento__data span { color: var(--acento-escuro); }
.selo-fonte::before { background: var(--acento); }

/* ---------- Ministérios ---------- */
.ministerio--sem-foto::after { background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--acento) 60%, transparent), transparent 65%); }
.trilho-h { scrollbar-color: var(--acento) transparent; }

/* ---------- Caminho App (azul) ---------- */
.bloco-caminho { background: radial-gradient(70% 90% at 85% 20%, color-mix(in srgb, var(--acento) 34%, transparent), transparent 60%), linear-gradient(160deg, #1b1d22, #0d0d0f 60%); }
.bloco-caminho .sobretitulo, .capa--caminho .sobretitulo { color: var(--acento); }
.capa--caminho { background: radial-gradient(60% 70% at 80% 30%, color-mix(in srgb, var(--acento) 32%, transparent), transparent 60%), linear-gradient(160deg, #1b1d22, #0d0d0f 65%); }
.celular__tela { background: radial-gradient(80% 50% at 50% 35%, color-mix(in srgb, var(--acento) 38%, transparent), transparent 70%), linear-gradient(180deg, #1d2226, #0f1113); }
.celular__chama { color: var(--acento); filter: drop-shadow(0 10px 30px color-mix(in srgb, var(--acento) 55%, transparent)); }
.celular__dia div::before { border-color: var(--acento); }
.celular__dia div.feito::before { background: var(--acento); }

/* ---------- Contribua (salmão): foto P&B + painel na cor, como a arte da Santa Ceia ---------- */
.contribua-faixa::after { background: linear-gradient(90deg, rgba(13, 13, 15, .95) 0%, rgba(13, 13, 15, .74) 48%, color-mix(in srgb, var(--acento) 80%, transparent) 100%); }
.tipo input:checked + label { border-color: var(--acento-escuro); background: var(--acento-claro); box-shadow: inset 0 0 0 1px var(--acento-escuro); }
.valor:focus-within { border-color: var(--acento-escuro); }
.atalhos button:hover { border-color: var(--acento-escuro); color: var(--acento-escuro); }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--acento-escuro); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 26%, transparent); }
.consentimento input { accent-color: var(--acento-escuro); }
.aviso svg { color: var(--acento-escuro); }

/* ---------- Vídeo ---------- */
.play { background: var(--acento); color: var(--sobre-cor); box-shadow: 0 0 0 12px color-mix(in srgb, var(--acento) 25%, transparent); }

/* ---------- Grafismos das artes ---------- */
.capa .envolve, .secao.escuro > .envolve { position: relative; z-index: 1; }

/* Azul: ondas listradas na base (arte do Batismo) */
body[data-cor="azul"] .capa:not(.capa--caminho) { padding-bottom: calc(clamp(56px, 7vw, 96px) + 64px); }
body[data-cor="azul"] .capa::before, .grafismo-ondas::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
  height: clamp(70px, 9vw, 120px); background: var(--acento); opacity: .95; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='120' viewBox='0 0 600 120'%3E%3Cg fill='none' stroke='%23000' stroke-width='8'%3E%3Cpath d='M0 14Q150 -4 300 14T600 14'/%3E%3Cpath d='M0 34Q150 16 300 34T600 34'/%3E%3Cpath d='M0 54Q150 36 300 54T600 54'/%3E%3Cpath d='M0 74Q150 56 300 74T600 74'/%3E%3Cpath d='M0 94Q150 76 300 94T600 94'/%3E%3Cpath d='M0 114Q150 96 300 114T600 114'/%3E%3C/g%3E%3C/svg%3E") left bottom / auto 100% repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='120' viewBox='0 0 600 120'%3E%3Cg fill='none' stroke='%23000' stroke-width='8'%3E%3Cpath d='M0 14Q150 -4 300 14T600 14'/%3E%3Cpath d='M0 34Q150 16 300 34T600 34'/%3E%3Cpath d='M0 54Q150 36 300 54T600 54'/%3E%3Cpath d='M0 74Q150 56 300 74T600 74'/%3E%3Cpath d='M0 94Q150 76 300 94T600 94'/%3E%3Cpath d='M0 114Q150 96 300 114T600 114'/%3E%3C/g%3E%3C/svg%3E") left bottom / auto 100% repeat-x;
}
.grafismo-ondas { position: relative; isolation: isolate; padding-bottom: calc(clamp(72px, 10vw, 140px) + 70px); }

/* Salmão: linhas de contorno à direita (arte da Santa Ceia) */
body[data-cor="salmao"] .capa::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -22%; top: -4%; width: min(80vw, 780px); aspect-ratio: 1;
  background: var(--acento); opacity: .45;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cellipse cx='250' cy='170' rx='26' ry='20'/%3E%3Cellipse cx='246' cy='174' rx='50' ry='40' transform='rotate(-14 246 174)'/%3E%3Cellipse cx='242' cy='178' rx='76' ry='60' transform='rotate(-14 242 178)'/%3E%3Cellipse cx='238' cy='182' rx='102' ry='82' transform='rotate(-12 238 182)'/%3E%3Cellipse cx='234' cy='186' rx='128' ry='104' transform='rotate(-10 234 186)'/%3E%3Cellipse cx='230' cy='190' rx='154' ry='126' transform='rotate(-8 230 190)'/%3E%3Cellipse cx='226' cy='194' rx='180' ry='148' transform='rotate(-6 226 194)'/%3E%3Cellipse cx='222' cy='198' rx='206' ry='170' transform='rotate(-4 222 198)'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cellipse cx='250' cy='170' rx='26' ry='20'/%3E%3Cellipse cx='246' cy='174' rx='50' ry='40' transform='rotate(-14 246 174)'/%3E%3Cellipse cx='242' cy='178' rx='76' ry='60' transform='rotate(-14 242 178)'/%3E%3Cellipse cx='238' cy='182' rx='102' ry='82' transform='rotate(-12 238 182)'/%3E%3Cellipse cx='234' cy='186' rx='128' ry='104' transform='rotate(-10 234 186)'/%3E%3Cellipse cx='230' cy='190' rx='154' ry='126' transform='rotate(-8 230 190)'/%3E%3Cellipse cx='226' cy='194' rx='180' ry='148' transform='rotate(-6 226 194)'/%3E%3Cellipse cx='222' cy='198' rx='206' ry='170' transform='rotate(-4 222 198)'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Rodapé: assinatura com as três cores ---------- */
.rodape { border-top: 0; }
.rodape::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--laranja), var(--salmao) 50%, var(--azul)); }
.rodape__grande .serif { background: linear-gradient(90deg, var(--laranja), var(--salmao) 55%, var(--azul)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.rodape a:hover { color: var(--acento); }
.redes a:hover { background: var(--acento); border-color: var(--acento); color: var(--sobre-cor); }