/* =====================================================================
   Tema Trader Invest Deaf  (carregado DEPOIS do theme.min.css)

   COMO TROCAR AS CORES
   1) Rápido: em app/Config/Site.php (ou no .env: site.tema = 'azul')
      escolha a paleta:  ouro | azul | claro
   2) Qualquer cor: edite as variáveis --t-* de cada paleta logo abaixo.
      Cores do logo: dourado #D7A62E / #FFD134 / #AB782D, azul #1C3D5B / #2E6CA6,
      preto #0B0A08, vermelho #E5322D, verde #17B64A.
   ===================================================================== */

/* ---------- Paleta 1: preto e dourado (do logo) ---------- */
:root,
[data-tema="ouro"] {
  --t-bg: #0B0A08;
  --t-bg-2: #14110C;
  --t-card: #1A160F;
  --t-borda: #3A2F18;

  --t-primary: #D7A62E;
  --t-primary-rgb: 215, 166, 46;
  --t-primary-claro: #FFD134;
  --t-primary-escuro: #AB782D;
  --t-primary-hover: #FFD134;   /* fundo do botão ao passar o mouse */
  --t-link: #D7A62E;            /* cor de TEXTO: links, botão vazado, preço, ícones */
  --t-link-hover: #FFD134;
  --t-on-primary: #17110A;

  --t-secondary: #1C3D5B;
  --t-secondary-claro: #2E6CA6;

  --t-texto: #EDE7D9;
  --t-texto-suave: #B8B0A0;
  --t-titulo: #FFFFFF;

  --t-rodape-bg: #0F2234;
  --t-rodape-texto: #E8EEF4;

  --t-brilho-1: #FFD134;
  --t-brilho-2: #D7A62E;
  --t-brilho-3: #AB782D;

  --t-sucesso: #17B64A;
  --t-perigo: #E5322D;
  --t-toggler-filter: none;
}

/* ---------- Paleta 2: azul ---------- */
[data-tema="azul"] {
  --t-bg: #07121D;
  --t-bg-2: #0C1B2B;
  --t-card: #10253A;
  --t-borda: #1F3E5C;

  --t-primary: #2E6CA6;
  --t-primary-rgb: 46, 108, 166;
  --t-primary-claro: #5B9BD5;
  --t-primary-escuro: #1C3D5B;
  --t-primary-hover: #245A8C;
  --t-link: #5B9BD5;
  --t-link-hover: #8CC1F0;
  --t-on-primary: #FFFFFF;

  --t-secondary: #D7A62E;
  --t-secondary-claro: #FFD134;

  --t-texto: #E6EEF7;
  --t-texto-suave: #9FB3C8;
  --t-titulo: #FFFFFF;

  --t-rodape-bg: #0A1F33;
  --t-rodape-texto: #E6EEF7;

  --t-brilho-1: #8CC1F0;
  --t-brilho-2: #5B9BD5;
  --t-brilho-3: #4A88C4;
}

/* ---------- Paleta 3: claro ---------- */
[data-tema="claro"] {
  --t-bg: #FAF7F0;
  --t-bg-2: #F1EBDD;
  --t-card: #FFFFFF;
  --t-borda: #E4D9BE;

  --t-primary: #D7A62E;
  --t-primary-rgb: 215, 166, 46;
  --t-primary-claro: #E9BC45;
  --t-primary-escuro: #AB782D;
  --t-primary-hover: #E9BC45;
  --t-link: #89611F;
  --t-link-hover: #6D4D18;
  --t-on-primary: #17110A;

  --t-secondary: #1C3D5B;
  --t-secondary-claro: #2E6CA6;

  --t-texto: #2B2417;
  --t-texto-suave: #6B6150;
  --t-titulo: #14110C;

  --t-rodape-bg: #14110C;
  --t-rodape-texto: #EDE7D9;

  --t-brilho-1: #89611F;
  --t-brilho-2: #78551B;
  --t-brilho-3: #6D4D18;

  --t-toggler-filter: invert(1);
}

/* =====================================================================
   Base
   ===================================================================== */
body { background-color: var(--t-bg); color: var(--t-texto); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--t-titulo); }
a { color: var(--t-link); }
a:hover { color: var(--t-link-hover); }
hr { color: var(--t-borda); }
code { color: var(--t-link-hover); }

.bg-600, .bg-light { background-color: var(--t-bg-2) !important; }
.bg-primary { background-color: var(--t-primary) !important; color: var(--t-on-primary); }
.bg-secondary { background-color: var(--t-secondary) !important; }
.text-primary { color: var(--t-link) !important; }
.text-secondary { color: var(--t-secondary-claro) !important; }
.text-muted { color: var(--t-texto-suave) !important; }
.text-900, .text-800, .text-700 { color: var(--t-texto) !important; }

/* Título com brilho (usa as cores da paleta) */
.titulo-ouro {
  background: linear-gradient(90deg, var(--t-brilho-1), var(--t-brilho-2) 55%, var(--t-brilho-3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}
.rotulo {
  display: inline-block;
  padding: .25rem .9rem;
  border: 1px solid var(--t-link);
  border-radius: 50rem;
  color: var(--t-link);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* =====================================================================
   Botões
   ===================================================================== */
.btn-primary,
.btn-primary:focus {
  background-color: var(--t-primary);
  border-color: var(--t-primary);
  color: var(--t-on-primary);
  font-weight: 600;
}
.btn-primary:hover,
.btn-primary:active {
  background-color: var(--t-primary-hover);
  border-color: var(--t-primary-hover);
  color: var(--t-on-primary);
}
.btn-outline-primary {
  border-color: var(--t-link);
  color: var(--t-link);
  font-weight: 600;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--t-primary);
  border-color: var(--t-primary);
  color: var(--t-on-primary);
}
.btn:focus { box-shadow: 0 0 0 .2rem rgba(var(--t-primary-rgb), .35); }

/* =====================================================================
   Faixa do topo, menu e rodapé
   ===================================================================== */
.faixa-topo,
.faixa-topo a,
.faixa-topo p,
.faixa-topo i { color: var(--t-on-primary) !important; }

.navbar {
  background-color: var(--t-bg) !important;
  border-bottom: 1px solid var(--t-borda);
}
.navbar .nav-link { color: var(--t-texto) !important; font-weight: 500; }
.navbar .nav-link:hover,
.navbar .nav-link.active { color: var(--t-link) !important; }
.navbar-toggler { border-color: var(--t-borda); }
.navbar-toggler-icon { filter: var(--t-toggler-filter); }

.rodape .bg-secondary { background-color: var(--t-rodape-bg) !important; }
.rodape .bg-primary { color: var(--t-on-primary); }
.rodape .bg-primary a { color: var(--t-on-primary); text-decoration: underline; }
.rodape .text-light, .rodape .text-200 { color: var(--t-rodape-texto) !important; }
.rodape a.text-light:hover, .rodape a.text-200:hover { color: var(--t-primary-claro) !important; }

/* =====================================================================
   Seções
   ===================================================================== */
.hero {
  background:
    radial-gradient(ellipse at 75% 30%, rgba(var(--t-primary-rgb), .16), transparent 60%),
    var(--t-bg);
}
.logo-hero {
  max-width: 420px;
  filter: drop-shadow(0 0 38px rgba(var(--t-primary-rgb), .35));
}
.cabecalho-pagina {
  padding: 5rem 0 3.5rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(var(--t-primary-rgb), .18), transparent 65%),
    var(--t-bg);
}
.chamada { background: var(--t-bg); border-top: 1px solid var(--t-borda); }

/* Cartões */
.card {
  background-color: var(--t-card);
  color: var(--t-texto);
  border: 1px solid var(--t-borda);
  border-radius: .9rem;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18);
}
.card-etapa .numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--t-primary);
  color: var(--t-on-primary);
  font-size: 1.4rem;
  font-weight: 700;
}
.card-plano { position: relative; transition: transform .2s ease, border-color .2s ease; }
.card-plano:hover { transform: translateY(-4px); border-color: var(--t-primary); }
.card-plano-destaque { border: 2px solid var(--t-primary); }
.card-plano .preco {
  color: var(--t-link);
  font-size: 2rem;
  font-weight: 700;
}
.faixa-destaque {
  position: absolute;
  top: -.85rem;
  left: 50%;
  transform: translateX(-50%);
  padding: .2rem 1rem;
  border-radius: 50rem;
  background: var(--t-primary);
  color: var(--t-on-primary);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.card-contato .icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: rgba(var(--t-primary-rgb), .15);
  color: var(--t-link);
  font-size: 1.6rem;
}

/* =====================================================================
   Seletor de cor (só aparece se Site::$seletorDeTema = true)
   ===================================================================== */
.seletor-tema {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 1050;
  display: flex;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--t-borda);
  border-radius: 50rem;
  background: var(--t-card);
  box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .35);
}
.seletor-tema button {
  width: 26px;
  height: 26px;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
}
.seletor-tema .tema-ouro  { background: linear-gradient(135deg, #0B0A08 50%, #D7A62E 50%); }
.seletor-tema .tema-azul  { background: linear-gradient(135deg, #07121D 50%, #2E6CA6 50%); }
.seletor-tema .tema-claro { background: linear-gradient(135deg, #FAF7F0 50%, #D7A62E 50%); }