/* =========================================================
   TEMA TEMPORÁRIO "UNDERGROUND" (período do WHOLE Festival Brasil)
   Escurece o site e troca a logo pela versão cromada.
   Para voltar ao visual normal: apague, em cada página, a linha
   <link rel="stylesheet" href="/tema-underground.css">
   (ou simplesmente apague este arquivo).
   ========================================================= */
:root {
  --cor-principal: #d9d9df;     /* cromo - títulos e detalhes */
  --cor-secundaria: #8e8e98;    /* cromo escuro */
  --cor-fundo: #0a0a0c;         /* preto */
  --cor-fundo-alt: #131317;     /* preto um pouco mais claro, para alternar seções */
  --cor-texto: #ececf0;
  --cor-texto-claro: #9c9ca7;
  /* --cor-destaque continua o magenta da Conexos: é a única cor do tema */

  --linha: rgba(255, 255, 255, 0.09);
  --cromo: linear-gradient(180deg, #ffffff 0%, #c8c8cf 38%, #6f6f78 52%, #e6e6ea 70%, #a9a9b2 100%);
  --cromo-texto: linear-gradient(180deg, #ffffff 0%, #d4d4da 45%, #a8a8b2 60%, #f2f2f4 100%);
  --sombra: 0 10px 30px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

/* ---------- Cabeçalho e logo cromada ---------- */
.header {
  background: rgba(10, 10, 12, 0.88);
  border-bottom-color: var(--linha);
}

.logo img { display: none; }

.logo::before {
  content: "";
  width: 74px;
  height: 38px;
  background: url("/assets/logo/logo-chrome-simbolo.png") center / contain no-repeat; /* PNG com fundo transparente */
}

.logo::after {
  content: "CONEXOS";
  margin-left: 10px;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.22em;
  background: var(--cromo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 768px) {
  .nav { background: #0f0f12; border-bottom: 1px solid var(--linha); }
}

/* ---------- Títulos em cromo ---------- */
.hero__title,
.article__titulo,
.blog-hero__title {
  background: var(--cromo-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Botões ---------- */
.btn,
.btn--small {
  background: var(--cromo);
  color: #0a0a0c;
}

.btn--primary {
  background: var(--cor-destaque);
  color: #fff;
}

.btn--ghost-light {
  border-color: rgba(255, 255, 255, 0.4);
}

/* ---------- Cartões ---------- */
.card,
.portfolio-card,
.projeto-card,
.blog-card {
  background: var(--cor-fundo-alt);
  border: 1px solid var(--linha);
}

.portfolio-card__media.placeholder,
.portfolio-card__media.placeholder::before {
  border-color: rgba(255, 255, 255, 0.14);
}

.projeto-card__insta-btn:hover,
.projeto-card__yt-btn:hover {
  background: #22222a;
}

/* ---------- Faixas de chamada ---------- */
.cta,
.article__cta,
.contato__item--destaque {
  background: #141418;
  border: 1px solid var(--linha);
  color: var(--cor-texto);
}

.contato__item--destaque .contato__value { color: var(--cor-texto); }
.contato__item--destaque .contato__label { color: var(--cor-texto-claro); }

.cta-strip,
.footer,
.article__faq-item {
  border-color: var(--linha);
}

.footer { border-top: 1px solid var(--linha); }

/* ---------- Página do WHOLE ---------- */
.whole__info { border: 1px solid var(--linha); }