/* ===========================================================================
   ORÁCULO VERTICAL · AS DUAS PALETAS
   Nascida em 16/09/2026, da bronca do Lucas olhando o hero e o convite:
   "muito sem graça, sem vida, essa cor também, sei lá."

   🔴 O QUE ELE ⛔ NÃO CRITICOU: o texto e a estrutura. O problema é COR e falta
   de vida visual. Então esta folha ⛔ não move nada de layout: ela reescreve os
   TOKENS de cor e acrescenta profundidade (vinheta, papel, luz no botão,
   filetes com brilho, números com presença).

   🔴 SÃO DUAS, para o Lucas apontar:
     A · FORJA        (padrão) — obsidiana quente, papel morno, cobre→âmbar.
     B · BRASA FRIA            — obsidiana azulada e profunda, papel neutro,
                                 brasa avermelhada, contraste mais duro.
   Troca por `?paleta=b` no endereço, ou por `paleta` em config/oraculo.config.json.

   ⚠️ ELA VEM DEPOIS de `estilo.css` e ANTES de `premium.css`: os tokens têm de
   sobrescrever os originais, e o acabamento premium tem de ver os tokens novos.
   ⛔ Nenhum roxo, ⛔ nenhum dourado espalhado, ⛔ nenhum gradiente de aplicativo.
   =========================================================================== */

/* ══════════════════ A · FORJA (padrão) ══════════════════════════════════════
   O preto deixa de ser chapado: ele tem um fundo quente por baixo, como metal
   ainda morno. O marfim ganha corpo e temperatura, ⛔ não é mais bege lavado. */
:root{
  --obsidiana:#0a0908;
  --obsidiana-2:#12100e;
  --obsidiana-3:#191613;

  --marfim:#ece2d1;              /* era #f2ece1, lavado: ganhou corpo */
  --marfim-2:#e2d5be;
  --marfim-tinta:#17140f;

  --cobre:#c07a34;               /* era #b1703c, apagado: subiu de saturação */
  --cobre-claro:#e3a85c;
  --cobre-fraco:rgba(192,122,52,.30);

  --linha-escura:rgba(236,226,209,.13);
  --linha-clara:rgba(23,20,15,.14);

  /* Os tokens NOVOS, que ⛔ não existiam: é neles que mora a "vida". */
  --luz-quente:rgba(196,116,46,.16);      /* a vinheta que acende o fundo */
  --luz-fria:rgba(60,80,120,.00);
  --titulo:#fbf7f0;                        /* título quase branco */
  --texto-forte:rgba(240,232,218,.94);     /* corpo em marfim forte */
  --texto-medio:rgba(240,232,218,.70);     /* apoio em tom médio */
  --texto-claro-forte:#231f18;             /* corpo sobre papel */
  --texto-claro-medio:#57503f;             /* apoio sobre papel */
  --papel:rgba(23,20,15,.045);             /* a textura do papel */
  --botao-de:#c98338;
  --botao-para:#e4ab55;
  --botao-tinta:#160f06;
  --brilho-botao:rgba(228,171,85,.42);
}

/* ══════════════════ B · BRASA FRIA ══════════════════════════════════════════
   O fundo puxa para o azul-noite, o que faz o cobre parecer MAIS quente sem
   precisar de mais saturação. O papel é mais neutro e o contraste é mais duro. */
:root[data-paleta="b"]{
  --obsidiana:#07080c;
  --obsidiana-2:#0d1016;
  --obsidiana-3:#141821;

  --marfim:#efe9dd;
  --marfim-2:#e0d6c5;
  --marfim-tinta:#12141a;

  --cobre:#b85f2c;
  --cobre-claro:#e08a44;
  --cobre-fraco:rgba(184,95,44,.32);

  --linha-escura:rgba(230,236,245,.14);
  --linha-clara:rgba(18,20,26,.15);

  --luz-quente:rgba(184,95,44,.20);
  --luz-fria:rgba(56,78,124,.16);
  --titulo:#ffffff;
  --texto-forte:rgba(236,240,247,.95);
  --texto-medio:rgba(236,240,247,.68);
  --texto-claro-forte:#191c23;
  --texto-claro-medio:#4e5462;
  --papel:rgba(18,20,26,.05);
  --botao-de:#b85f2c;
  --botao-para:#dd8a41;
  --botao-tinta:#1a0c04;
  --brilho-botao:rgba(221,138,65,.45);
}

/* ══════════════════ O QUE AS DUAS GANHAM ═══════════════════════════════════ */

/* ── Fundo com profundidade ────────────────────────────────────────────────
   ⚠️ `background-attachment:fixed` ⛔ NÃO entra aqui: em celular ele força
   repintura da tela inteira a cada quadro de rolagem, e esta página já tem uma
   cena pinada disputando quadro. A vinheta é pintada uma vez, no body. */
body{
  background-color:var(--obsidiana);
  background-image:
    radial-gradient(120% 80% at 78% -10%, var(--luz-quente), transparent 62%),
    radial-gradient(90% 60% at 8% 12%, var(--luz-fria), transparent 60%),
    radial-gradient(140% 100% at 50% 120%, rgba(0,0,0,.55), transparent 58%);
  background-repeat:no-repeat;
}

/* ── O papel da seção clara ────────────────────────────────────────────────
   Textura de fibra, feita com duas listras cruzadas quase invisíveis. ⛔ Sem
   imagem, ⛔ sem requisição: é cor, e custa zero. */
.clara,.convite,.modal-caixa{
  background-color:var(--marfim);
  background-image:
    repeating-linear-gradient(97deg, var(--papel) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(7deg, var(--papel) 0 1px, transparent 1px 4px),
    radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.55), transparent 60%);
}

/* ── Contraste de verdade ──────────────────────────────────────────────────
   🔴 "⛔ Nada de cinza fraco em fundo escuro nem cinza claro em fundo bege." */
h1,h2{color:var(--titulo);}
/* 🔴 ⛔ NÃO TIRE ESTA LINHA. O título "quase branco" que o Lucas pediu vale no
   FUNDO ESCURO; nas seções claras ele fica branco sobre marfim, ou seja
   INVISÍVEL. Foi exatamente o que aconteceu na primeira folha de comparação de
   16/09: o "Aplicar para um encontro com Jair" sumiu dentro do papel. */
.clara h1,.clara h2,.clara h3,
.convite h1,.convite h2,.convite h3,
.modal-aplicacao h1,.modal-aplicacao h2,.modal-aplicacao h3{color:var(--marfim-tinta);}
.corpo,.lista-situacao li{color:var(--texto-forte);}
.miudo,.hero-nota,.hero-fatos span{color:var(--texto-medio);}
.clara .corpo,.convite .corpo,.clara .lista-situacao li{color:var(--texto-claro-forte);}
.clara .miudo,.convite .miudo,.modal-aplicacao .miudo{color:var(--texto-claro-medio);}
.faq .resp{color:var(--texto-forte);}
.hero-apoio{color:var(--texto-forte);}

/* ── O botão caro ──────────────────────────────────────────────────────────
   🔴 "Bloco cobre chapado lê como botão de template."
   Três camadas, e cada uma faz uma coisa: o gradiente dá volume, a borda de luz
   por dentro dá a aresta polida, e a sombra profunda tira o botão do papel.
   ⚠️ A borda de luz é `inset` no box-shadow, ⛔ não um `border` a mais: borda de
   verdade mudaria o tamanho do botão e empurraria o layout. */
.botao{
  background-image:linear-gradient(160deg, var(--botao-para) 0%, var(--botao-de) 58%, var(--botao-de) 100%);
  background-color:var(--botao-de);
  border-color:var(--botao-de);
  color:var(--botao-tinta);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 10px 26px -10px rgba(0,0,0,.65);
  transition:background-position .28s ease, box-shadow .28s ease, transform .22s ease, filter .28s ease;
  background-size:140% 140%;
  background-position:0% 50%;
}
.botao:hover{
  background-position:100% 50%;
  filter:saturate(1.06) brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 14px 34px -10px rgba(0,0,0,.7),
    0 0 0 1px var(--brilho-botao),
    0 0 26px -6px var(--brilho-botao);
  transform:translateY(-1px);
}
.botao:active{transform:translateY(0);filter:none;}
.botao-grande{padding:24px 46px;}
/* ⚠️ No celular o botão volta ao aperto do estilo.css: com 46 px de cada lado o
   rótulo quebrava em DUAS linhas e o botão passava de 97 px de altura, o que
   sozinho tirava o convite da primeira tela. */
@media (max-width:640px){.botao-grande{padding:19px 20px;}}
@media (min-width:900px){.botao-grande{font-size:20px;padding:26px 52px;}}
/* O botão de contorno ⛔ não herda NADA do botão cheio: ele é o discreto da dupla.
   🔴 ⚠️ `background-color` PRECISA estar aqui, e ⛔ não só `background-image`.
   O `background:transparent` do estilo.css vem ANTES desta folha, então o
   `background-color` do `.botao` acima ganhava dele: "Voltar", "Voltar para a
   página" e "Pagar? não" apareciam como botão CHEIO de cobre, exatamente iguais
   ao botão principal. Achado olhando a captura em 16/09. */
.botao-vazio{
  background-image:none;background-color:transparent;box-shadow:none;
  color:var(--marfim);border-color:var(--linha-escura);
}
.clara .botao-vazio,.convite .botao-vazio,.modal-aplicacao .botao-vazio{
  color:var(--marfim-tinta);border-color:var(--linha-clara);
}
.botao-vazio:hover{
  box-shadow:none;filter:none;transform:none;
  background-color:rgba(192,122,52,.10);border-color:var(--cobre);
}
@media (prefers-reduced-motion:reduce){
  .botao{transition:none;}
  .botao:hover{transform:none;}
}

/* ── Acentos com vida ──────────────────────────────────────────────────────
   O número da seção deixa de ser um cinza qualquer: ele ganha a cor do cobre,
   corpo e um filete embaixo. É o "contador" da travessia, e ele pesa. */
.rotulo .num{
  color:var(--cobre-claro);font-weight:600;
  position:relative;padding-bottom:3px;
}
.rotulo .num::after{
  content:'';position:absolute;left:0;right:12px;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--cobre),transparent);
}
.clara .rotulo .num,.convite .rotulo .num{color:var(--cobre);}

/* O filete entre seções deixa de ser linha morta: ele acende no meio. */
.secao + .secao::before{
  background:linear-gradient(180deg,var(--cobre-claro),var(--cobre-fraco) 45%,transparent);
  box-shadow:0 0 12px -2px var(--cobre-fraco);
}

/* A citação ganha tratamento: aspas grandes em cobre e um fundo de papel. */
.citacao{
  position:relative;
  background:linear-gradient(90deg,rgba(192,122,52,.09),transparent 70%);
  padding:18px 22px 18px 26px!important;
  border-left-width:2px;
}
.citacao::before{
  content:'\201C';position:absolute;left:8px;top:-6px;
  font-family:var(--serif);font-size:44px;line-height:1;color:var(--cobre);opacity:.5;
}

/* Separadores que ⛔ não são uma linha cinza. */
.hero-fatos,.vitrine-topo,.horarios,.pagamento,.audio-campo,.faq{
  border-image:linear-gradient(90deg,var(--cobre-fraco),transparent 72%) 1;
}
.aviso-depo,.aviso-horario{
  border-left-color:var(--cobre-claro);
  box-shadow:-2px 0 14px -6px var(--cobre-fraco);
}

/* O selo do hero e o eixo de cobre ganham brilho, ⛔ sem virar néon. */
.hero-quem::before{box-shadow:0 0 10px 0 var(--cobre-fraco);}
.hero-marca{color:var(--cobre-claro);text-shadow:0 0 18px rgba(0,0,0,.6);}

/* Os cantos de cobre do convite ficam mais presentes. */
.convite-caixa::before,.convite-caixa::after{
  width:26px;height:26px;
  filter:drop-shadow(0 0 6px var(--cobre-fraco));
}

/* O véu do hero acompanha a paleta, em vez de ser preto fixo. */
.hero-veu{
  background:
    linear-gradient(90deg,var(--obsidiana) 4%,rgba(10,9,8,.86) 38%,rgba(10,9,8,.30) 72%,rgba(10,9,8,.60)),
    linear-gradient(0deg,var(--obsidiana) 2%,transparent 48%),
    radial-gradient(90% 70% at 74% 26%, var(--luz-quente), transparent 60%);
}
@media (max-width:640px){
  /* ⚠️ No celular o véu ⛔ NÃO cobre texto nenhum: desde 16/09 a foto é uma faixa
     no topo e o texto vive abaixo dela, em obsidiana limpa. O papel do véu aqui
     é só derreter o pé da foto no bloco escuro, então ele começa TRANSPARENTE
     em cima e ⛔ não escurece o rosto do Jair. */
  .hero-veu{
    background:
      linear-gradient(0deg,var(--obsidiana) 0%,rgba(10,9,8,.55) 26%,transparent 62%),
      radial-gradient(90% 45% at 50% 30%, var(--luz-quente), transparent 66%);
  }
}