/* ══════════════════════════════════════════════════════════════════════════
   BLOCO DE OFERTAS — folha própria (05/08/2026)

   Por que não ficou dentro do site.css: os raio-x NÃO carregam o site.css.
   Eles inlineiam o que precisam e vivem numa paleta própria (teal sobre
   claro), enquanto o site institucional é navy sobre branco com âmbar.
   Um bloco que precisa aparecer nos dois não pode depender de nenhum dos
   dois.

   Como resolve: o bloco declara as próprias variáveis com cadeia de
   fallback. Onde existe `--gold` (site), usa o âmbar; onde existe
   `--color-accent` (blog), usa o teal; onde não existe nada, usa o valor
   literal. Variável CSS herda, então cada página resolve a sua sem que
   ninguém precise reescrever componente.

   O BOTÃO é próprio de propósito. Antes ele usava `.btn.btn-gold`, que só
   existe no site.css — nos raio-x sairia um link sem estilo nenhum, e o
   card mais importante da página ficaria parecendo texto solto.
   ══════════════════════════════════════════════════════════════════════════ */

.ofertas {
  --of-texto:  var(--ink,      var(--color-text,        #17202E));
  --of-suave:  var(--muted,    var(--color-text-muted,  #55627A));
  --of-linha:  var(--line,     var(--color-border,      #E3E8F0));
  --of-fundo:  var(--bg,       var(--color-bg-panel,    #FFFFFF));
  --of-realce: var(--gold,     var(--color-accent,      #C9971F));
  --of-forte:  var(--navy,     var(--color-text,        #16233F));
  --of-raio:   var(--radius,   var(--radius-md,         6px));
  --of-titulo: var(--font-display, 'Oswald', sans-serif);

  margin: 2.5rem 0;
}

.ofertas-head { text-align: center; max-width: 60ch; margin: 0 auto 1.8rem; }
.ofertas-head h2 {
  font-family: var(--of-titulo);
  font-size: 1.7rem;
  line-height: 1.15;
  color: var(--of-forte);
  margin-bottom: 0.5rem;
}
.ofertas-head p { color: var(--of-suave); }

.ofertas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  align-items: stretch;
}

.oferta-card {
  display: flex;
  flex-direction: column;
  background: var(--of-fundo);
  border: 1px solid var(--of-linha);
  border-radius: var(--of-raio);
  padding: 1.5rem 1.35rem;
  text-align: left;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.oferta-card:hover { transform: translateY(-2px); }
/* O destaque é o único sinal visual de hierarquia. Qual card recebe é
   decidido em ofertas.js: normalmente o vitalício, mas passa pra mentoria
   quando o concurso está em reta final. */
.oferta-card.destaque {
  border-color: var(--of-realce);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--of-realce) 22%, transparent);
}

.oferta-kicker {
  font-family: var(--of-titulo);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--of-realce);
  margin-bottom: 0.4rem;
}
.oferta-card h3 {
  font-family: var(--of-titulo);
  font-size: 1.12rem;
  line-height: 1.2;
  color: var(--of-forte);
  margin-bottom: 0.7rem;
}
.oferta-selo {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--of-titulo);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--of-realce);
  background: color-mix(in srgb, var(--of-realce) 14%, transparent);
  border-radius: 3px;
  padding: 0.15rem 0.55rem;
  margin-bottom: 0.8rem;
}

.oferta-itens { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.oferta-itens li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0.5rem;
  color: var(--of-texto);
}
.oferta-itens li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 8px; height: 2px;
  background: var(--of-realce);
}

.oferta-preco { margin-top: auto; margin-bottom: 0.9rem; }
.oferta-preco b {
  font-family: var(--of-titulo);
  font-size: 1.6rem;
  color: var(--of-forte);
  margin-right: 0.35rem;
}
.oferta-preco span { color: var(--of-suave); font-size: 0.9rem; }

/* Botão próprio: não herda .btn de lugar nenhum. */
.oferta-btn {
  display: block;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: var(--of-raio);
  background: var(--of-realce);
  color: #FFFFFF;
  font-family: var(--of-titulo);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.oferta-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.oferta-btn:focus-visible { outline: 3px solid var(--of-forte); outline-offset: 2px; }

.ofertas-nota {
  max-width: 62ch;
  margin: 1.4rem auto 0;
  text-align: center;
  font-size: 0.92rem;
  color: var(--of-suave);
  line-height: 1.6;
}
.ofertas-nota b { color: var(--of-forte); }

/* O antigo `.ofertas-duvida` (link "me chama no WhatsApp" no rodapé do
   bloco) saiu em 06/08. Palavras dele: "não acho necessário, já que se a
   pessoa realmente tiver interesse ela vai clicar passo a passo, preencher
   e depois fala comigo". Quem quer falar continua tendo caminho — pela
   ficha, que é onde o contato fica registrado. */

/* ── Seletor de concurso (/cursos/) ── */
.oferta-chips {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  justify-content: center; margin-bottom: 1.2rem;
}
.oferta-chip {
  font-family: var(--of-titulo);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--of-forte);
  background: var(--of-fundo);
  border: 1px solid var(--of-linha);
  border-radius: var(--of-raio);
  padding: 0.6rem 1rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.oferta-chip small {
  display: block;
  font-family: inherit;
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--of-suave);
}
.oferta-chip:hover,
.oferta-chip.ativo {
  border-color: var(--of-realce);
  background: color-mix(in srgb, var(--of-realce) 10%, transparent);
}
.oferta-outro { display: none; max-width: 34rem; margin: 0 auto 1.4rem; }
.oferta-outro.show { display: block; }
.oferta-outro label {
  display: block;
  font-family: var(--of-titulo);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--of-suave);
  margin-bottom: 0.35rem;
}
.oferta-outro input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--of-linha);
  border-radius: var(--of-raio);
  background: var(--of-fundo);
  color: var(--of-texto);
  font-size: 1.0625rem;
  margin-bottom: 0.7rem;
}
.oferta-outro input:focus { outline: none; border-color: var(--of-realce); }
.oferta-outro .oferta-btn { width: auto; padding-left: 1.6rem; padding-right: 1.6rem; }

.ofertas-resultado { display: none; }
.ofertas-resultado.show { display: block; }
.ofertas-resultado .ofertas-head h2 { font-size: 1.35rem; }

/* ══════════════════════════════════════════════════════════════════════════
   ÁRVORE GUIADA (/cursos/) — estado → carreira → cargo
   Escolha dele em 06/08: só a árvore, sem atalho. Todo mundo passa pelos
   mesmos passos, e cada passo grava intenção.
   ══════════════════════════════════════════════════════════════════════════ */
.oferta-arvore {
  background: var(--of-fundo);
  border: 1px solid var(--of-linha);
  border-radius: var(--of-raio);
  padding: 1.8rem;
  max-width: 62rem;
  margin: 0 auto;
}
.oferta-trilha { min-height: 1.4rem; font-size: 0.9rem; color: var(--of-suave); margin-bottom: 0.4rem; }
.oferta-trilha b { color: var(--of-forte); font-weight: 700; }

.oferta-passo { display: none; }
.oferta-passo.show { display: block; }
.oferta-passo h3 {
  font-family: var(--of-titulo);
  font-size: 1.15rem;
  color: var(--of-forte);
  margin-bottom: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.oferta-passo h3 > span:first-child {
  flex: none;
  width: 1.65rem; height: 1.65rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--of-realce);
  color: #fff;
  font-size: 0.9rem;
}

.oferta-ufs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.oferta-uf {
  font-family: var(--of-titulo);
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--of-forte);
  background: var(--of-fundo);
  border: 1px solid var(--of-linha);
  border-radius: var(--of-raio);
  padding: 0.75rem 0.6rem;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.oferta-uf:hover { border-color: var(--of-realce); transform: translateY(-1px); }
.oferta-uf.ativo { border-color: var(--of-realce); background: color-mix(in srgb, var(--of-realce) 12%, transparent); }
.oferta-uf .tag {
  font-family: inherit;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--of-realce);
}

.oferta-arvore .oferta-chips { justify-content: flex-start; margin-bottom: 0; }
.oferta-chip.ativo { border-color: var(--of-realce); }

.oferta-voltar {
  background: none; border: 0;
  color: var(--of-suave);
  font-size: 0.86rem;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 1rem;
  padding: 0;
}
.oferta-voltar:hover { color: var(--of-realce); }

/* ══════════════════════════════════════════════════════════════════════════
   FICHA ANTES DO WHATSAPP
   Produto sem página de venda não despeja mais no wa.me direto: passa por
   aqui, o lead cai na planilha, e só então o WhatsApp abre com o pedido
   escrito. Pedido dele em 06/08 — "não só curiosidade".
   ══════════════════════════════════════════════════════════════════════════ */
.oferta-ficha { display: none; position: fixed; inset: 0; z-index: 9999; }
.oferta-ficha.show { display: block; }
.oferta-ficha-fundo {
  position: absolute; inset: 0;
  background: rgba(11, 18, 32, 0.72);
  backdrop-filter: blur(2px);
}
.oferta-ficha-caixa {
  position: relative;
  z-index: 1;
  width: min(30rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  margin: max(1rem, 50vh - 19rem) auto 1rem;
  background: var(--bg, #fff);
  border-radius: 10px;
  padding: 1.9rem 1.7rem 1.5rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  /* A ficha vive no <body>, fora de qualquer `.ofertas` — por isso repete
     a cadeia de variáveis em vez de herdar. */
  --of-texto:  var(--ink,   var(--color-text,       #17202E));
  --of-suave:  var(--muted, var(--color-text-muted, #55627A));
  --of-linha:  var(--line,  var(--color-border,     #E3E8F0));
  --of-fundo:  var(--bg,    var(--color-bg-panel,   #FFFFFF));
  --of-realce: var(--gold,  var(--color-accent,     #C9971F));
  --of-forte:  var(--navy,  var(--color-text,       #16233F));
  --of-raio:   var(--radius, var(--radius-md,       6px));
  --of-titulo: var(--font-display, 'Oswald', sans-serif);
}
.oferta-ficha-x {
  position: absolute; top: 0.6rem; right: 0.8rem;
  background: none; border: 0;
  font-size: 1.7rem; line-height: 1;
  color: var(--of-suave); cursor: pointer;
}
.oferta-ficha-x:hover { color: var(--of-forte); }
.oferta-ficha-kicker {
  font-family: var(--of-titulo);
  font-size: 0.76rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--of-realce);
  margin-bottom: 0.25rem;
}
.oferta-ficha-caixa h3 {
  font-family: var(--of-titulo);
  font-size: 1.3rem; line-height: 1.2;
  color: var(--of-forte);
  margin-bottom: 0.6rem;
}
.oferta-ficha-sub { font-size: 0.94rem; color: var(--of-suave); line-height: 1.55; margin-bottom: 1.2rem; }
.oferta-ficha-form { display: grid; gap: 0.85rem; }
.oferta-ficha-form label {
  display: grid; gap: 0.3rem;
  font-family: var(--of-titulo);
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--of-suave);
}
.oferta-ficha-form input {
  font-family: inherit; font-size: 1.0625rem;
  padding: 0.72rem 0.9rem;
  border: 1px solid var(--of-linha);
  border-radius: var(--of-raio);
  background: var(--of-fundo);
  color: var(--of-texto);
  text-transform: none; letter-spacing: 0;
}
.oferta-ficha-form input:focus { outline: none; border-color: var(--of-realce); }
.oferta-ficha-erro { color: #A3342C; font-size: 0.9rem; font-weight: 600; }
.oferta-ficha-nota { font-size: 0.82rem; color: var(--of-suave); text-align: center; }

@media (max-width: 900px) {
  .ofertas-grid { grid-template-columns: 1fr; }
  .oferta-preco { margin-top: 0.4rem; }
  .ofertas-head h2 { font-size: 1.4rem; }
  .oferta-ufs { grid-template-columns: repeat(2, 1fr); }
  .oferta-arvore { padding: 1.2rem; }
  .oferta-ficha-caixa { margin-top: 1rem; padding: 1.6rem 1.2rem 1.2rem; }
}