/* ================================================================
   Gestão Talentos · cores do software Talentos
   Carregado depois de main.css e fixes.css em todas as páginas.
   Layout e fontes do site continuam os mesmos; aqui mudam as cores.
   Rodapé, chamada final e faixa de clientes têm o estilo no próprio include.
   ================================================================ */
:root {
  --sb: #2C1921;          /* barra lateral do software: dobras escuras */
  --sb-2: #3E254B;        /* item ativo da barra lateral */
  --sb-line: #3A272F;
  --sb-text: #D4C7CE;
  --sb-muted: #A99AA2;
  --app-bg: #F3F3F7;      /* fundo claro do software */
  --app-text: #1A1824;
  --app-muted: #5F5C68;
  --app-line: #E5E4EC;
  --logo-green: #95BC6B;  /* verde da logo */
  --logo-green-h: #A8CA84;
  --green-ink: #3F6B1F;   /* verde para texto sobre fundo claro */
  --purple: #8B5CF2;
  --purple-ink: #6A3FD6;
  --purple-tint: #F1ECFE;
  --green-tint: #EBF3EE;

  /* variáveis que o site já usa */
  --talent-green: var(--logo-green);
  --talent-purple-primary: var(--purple);
  --talent-purple-light: var(--purple-tint);
  --talent-purple-dark: var(--sb-2);
  --talent-purple-deep: var(--sb);
  --talent-bg-light: var(--app-bg);
  --talent-bg-darker: #FFFFFF;
  --dark-color: var(--sb);
  --primary-color: var(--sb-2);
}

::selection { background: var(--logo-green); color: var(--sb); }
a:where(:not(footer *)) { color: var(--sb-2); }
a:where(:not(footer *)):hover { color: var(--purple-ink); }
.text-muted { color: var(--app-muted) !important; }
.card { border-color: var(--app-line); }

/* ---------- cabeçalho ---------- */
.navbar .nav-link:hover,
.navbar .nav-link.active { color: var(--sb-2) !important; }
.navbar .dropdown-menu { border: 1px solid var(--app-line); border-radius: 12px; box-shadow: 0 18px 40px -18px rgba(44, 25, 33, .35); }
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus { background: var(--app-bg); color: var(--sb-2); }
.navbar .btn-primary-talent { background: var(--logo-green) !important; border-color: var(--logo-green) !important; color: var(--sb) !important; font-weight: 600; }
.navbar .btn-primary-talent:hover { background: var(--logo-green-h) !important; }

/* ---------- primeira dobra (todas as páginas que usam hero.html) ----------
   Os estilos de hero.html ficam no <body> e vêm depois deste arquivo;
   por isso alguns seletores começam com "body" para ganhar a disputa. */
.hero-section,
.blog-hero-section,
.post-hero-banner,
.author-hero-banner,
.lp-hero-section {
  background: radial-gradient(55% 75% at 88% 18%, rgba(139, 92, 242, .22), transparent 62%), var(--sb) !important;
  color: #fff;
}
.hero-section .hero-title { color: #fff; font-size: clamp(2.4rem, 4.4vw, 3.7rem); line-height: 1.08; letter-spacing: -.01em; }
.hero-section .hero-subtitle { color: var(--sb-text); opacity: 1; }
.hero-badge { background: rgba(255, 255, 255, .07) !important; border: 1px solid rgba(255, 255, 255, .18) !important; color: var(--sb-text) !important; }
.hero-badge i { color: var(--logo-green); }

body .hero-section .btn.btn-hero-whatsapp-green,
body .hero-section .btn.btn-hero-whatsapp {
  display: inline-flex; align-items: center; gap: 10px;
  height: 50px; padding: 0 26px; max-width: none;
  font-family: Inter, sans-serif; font-size: .95rem; font-weight: 600; letter-spacing: 0;
  border-radius: 10px; background: var(--logo-green); color: var(--sb);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 8px 22px -12px rgba(149, 188, 107, .65);
  transition: background .2s, transform .2s, box-shadow .2s;
}
body .hero-section .btn.btn-hero-whatsapp-green .fab,
body .hero-section .btn.btn-hero-whatsapp .fab { font-size: 1.1rem; margin: 0 !important; }
body .hero-section .btn.btn-hero-whatsapp-green:hover,
body .hero-section .btn.btn-hero-whatsapp:hover {
  background: var(--logo-green-h); color: var(--sb); transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 12px 26px -12px rgba(149, 188, 107, .8);
}

/* "Agende uma call gratuita": botão contornado, discreto */
.hero-call {
  display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px; background: rgba(255, 255, 255, .03);
  color: #F1EAEE !important; font-size: .95rem; font-weight: 500; text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
}
.hero-call i { color: var(--logo-green); font-size: .9rem; }
.hero-call:hover { background: rgba(255, 255, 255, .07); border-color: rgba(149, 188, 107, .6); color: #fff !important; }

/* números */
.hero-section .stats-container { display: flex; flex-wrap: nowrap; gap: 0; margin-left: 0; margin-right: 0; border-top: 1px solid var(--sb-line); padding-top: 1.5rem; }
.hero-section .stats-container > .col-4 { flex: 1; padding: 0 18px; border-left: 1px solid var(--sb-line); }
.hero-section .stats-container > .col-4:first-child { padding-left: 0; border-left: 0; }
.hero-section .stat-icon { background: transparent !important; border: 1px solid rgba(149, 188, 107, .35); width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px !important; }
.hero-section .stat-icon i { color: var(--logo-green); }
.hero-section .stat-number { color: #fff !important; font-family: Poppins, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hero-section .stat-label { color: var(--sb-muted) !important; opacity: 1; }
.st-in { animation: stIn .8s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes stIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .st-in { animation: none; } }

/* quadro "Recrutamos para" (home): WhatsApp por segmento */
.hero-visual { position: relative; max-width: 520px; margin-left: auto; }
.aud {
  position: relative; max-width: 460px; margin-left: auto; padding: 28px 30px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6);
}
.aud::before { content: ""; position: absolute; left: 30px; right: 30px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(149, 188, 107, .7), transparent); }
.aud-eb { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--logo-green); margin-bottom: 8px; }
.aud-row {
  display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: center;
  padding: 18px 12px; margin: 0 -12px; border-radius: 12px;
  text-decoration: none; color: inherit; position: relative; transition: background .25s;
}
.aud-row + .aud-row::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: rgba(255, 255, 255, .08); }
.aud-row:hover { background: rgba(255, 255, 255, .05); color: inherit; }
.aud-row:hover + .aud-row::before,
.aud-row:hover::before { opacity: 0; }
.aud-ic { width: 40px; height: 40px; margin-top: 2px; border-radius: 10px; border: 1px solid rgba(149, 188, 107, .35); display: grid; place-items: center; color: var(--logo-green); font-size: .95rem; transition: background .25s, color .25s; }
.aud-row:hover .aud-ic { background: var(--logo-green); color: var(--sb); border-color: var(--logo-green); }
.aud-bd { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.aud-bd b { display: flex; align-items: center; gap: 8px; font-family: Poppins, sans-serif; font-weight: 600; font-size: 1.12rem; color: #fff; line-height: 1.25; }
.aud-bd small { display: block; font-size: .86rem; color: var(--sb-muted); line-height: 1.45; }
.aud-go { font-size: .9rem; color: var(--logo-green); opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .25s; }
.aud-row:hover .aud-go,
.aud-row:focus-visible .aud-go { opacity: 1; transform: none; }
.aud-foot { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .84rem; color: var(--sb-text); }
.aud-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--logo-green); box-shadow: 0 0 0 4px rgba(149, 188, 107, .18); }
@media (pointer: coarse) { .aud-go { opacity: 1; transform: none; } }

@media (max-width: 991.98px) {
  .aud { margin: 12px auto 8px; }
  .hero-visual { margin: 8px auto 0; }
}
@media (max-width: 767.98px) {
  .hero-section .stats-container .stat-label { font-size: .78rem; }
  .hero-section .stats-container .stat-number { font-size: 1.05rem !important; }
}
@media (max-width: 575.98px) {
  body .hero-section .btn.btn-hero-whatsapp-green,
  body .hero-section .btn.btn-hero-whatsapp,
  .hero-call { width: 100%; justify-content: center; }
  .hero-section .stats-container > .col-4 { padding: 0 8px; }
  .hero-section .stat-icon { display: none !important; }
  .aud { padding: 22px 20px; }
  .aud-bd b { font-size: 1.02rem; }
}

/* ---------- faixa "Mais Rápido...": mesma cor da primeira dobra ---------- */
.benefit-scroller-section { background: var(--sb) !important; padding: 1.35rem 0 !important; border-top: 1px solid rgba(255, 255, 255, .08); }
.benefit-scroller-section .scroller-item { opacity: 1; color: var(--sb-text) !important; font-family: Poppins, sans-serif; font-size: 1rem; font-weight: 500; letter-spacing: .01em; padding: 0 2.25rem; }
.benefit-scroller-section .scroller-item i { color: var(--logo-green) !important; opacity: 1; font-size: .9rem; margin-right: .65rem; }
/* faixa decorativa: sem seleção de texto nem toque (evita itens "marcados" ao clicar ou tocar na faixa em movimento) */
.benefit-scroller-section .scroller-container { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; pointer-events: none; }

/* ---------- dobras claras da home ---------- */
#about, #services, #success-cases { background: var(--app-bg) !important; }
#methodology { background: #fff !important; }
.badge-green { background: var(--green-tint) !important; color: #1A6B40 !important; border: 0; }
.about-tabs .nav-link { color: var(--app-muted); }
.about-tabs .nav-link.active,
.about-tabs .nav-link:hover { color: var(--sb-2) !important; border-color: var(--logo-green) !important; background: transparent; }
.timeline-icon { background: var(--logo-green) !important; color: var(--sb) !important; box-shadow: 0 0 0 6px rgba(149, 188, 107, .18) !important; }
.timeline::before,
.timeline::after { background: var(--app-line) !important; }
.timeline-content { border-color: var(--app-line) !important; }
.accordion-button:not(.collapsed) { background: var(--green-tint); color: var(--sb-2); }
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(149, 188, 107, .3); }
.accordion-item { border-color: var(--app-line); }
.tag-green { background: var(--green-tint) !important; color: #1A6B40 !important; }
.tag-purple { background: var(--purple-tint) !important; color: var(--purple-ink) !important; }

/* ---------- Software de RH: dobra escura ---------- */
#talent-management { background: var(--sb) !important; color: #fff; }
#talent-management h2,
#talent-management .h2,
#talent-management .display-5 { color: #fff !important; }
#talent-management p.lead,
#talent-management .text-muted,
#talent-management > .container > div > p { color: var(--sb-text) !important; }
#talent-management .badge-green { background: rgba(149, 188, 107, .16) !important; color: var(--logo-green) !important; }
#talent-management .card { background: #fff; color: var(--app-text); border: 0; }
#talent-management .card p { color: var(--app-muted); }
#talent-management .slider-arrow { background: #fff; color: var(--sb); border: 0; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); }
#talent-management .slider-arrow:hover { background: var(--logo-green); color: var(--sb); }

/* ---------- chamada final das páginas internas (cta_final.html, #demo-gratuita): clara, como na home ----------
   Os estilos de cta_final.html vêm depois deste arquivo; por isso o "body" e alguns !important. */
body #demo-gratuita { background: var(--app-bg) !important; background-image: none !important; padding: 72px 0 !important; }
body #demo-gratuita > .container > .row > [class*="col-"] {
  padding: 48px 32px; border-radius: 20px;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(149, 188, 107, .14), transparent 60%),
    radial-gradient(45% 70% at 0% 100%, rgba(139, 92, 242, .07), transparent 60%),
    #fff;
  border: 1px solid var(--app-line); box-shadow: 0 24px 60px -36px rgba(44, 25, 33, .35);
}
body #demo-gratuita h2.text-white,
body #demo-gratuita h4.text-white,
body #demo-gratuita h5.text-white { color: var(--app-text) !important; }
body #demo-gratuita p.text-white,
body #demo-gratuita .lead.text-white { color: var(--app-muted) !important; }
body #demo-gratuita .cta-step-card .stat-icon { background: var(--green-tint); color: var(--green-ink); border: 0; }
body #demo-gratuita .contact-card { padding: 32px !important; background: var(--app-bg); border: 1px solid var(--app-line); -webkit-backdrop-filter: none; backdrop-filter: none; }
body #demo-gratuita .btn-cta-light { background: var(--logo-green); color: var(--sb); border: 1px solid rgba(44, 25, 33, .08); }
body #demo-gratuita .btn-cta-light:hover { background: var(--logo-green-h); color: var(--sb); }
body #demo-gratuita .btn-cta-dark { background: #fff; color: var(--sb-2); border: 1px solid rgba(62, 37, 75, .22); }
body #demo-gratuita .btn-cta-dark:hover { background: var(--purple-tint); color: var(--sb-2); }
body #demo-gratuita .cta-alert-box { background: #FFF8E6; color: var(--app-text); }
@media (max-width: 575.98px) {
  body #demo-gratuita { padding: 40px 0 !important; }
  body #demo-gratuita > .container > .row > [class*="col-"] { padding: 32px 20px; border-radius: 16px; }
}

/* ---------- contraste: texto escuro sobre o verde da logo ----------
   Branco sobre #95BC6B fica abaixo do contraste mínimo de leitura; nos botões e selos verdes o texto passa a ser o vinho. */
body .btn-primary-talent,
body .btn-primary-talent:hover,
body .btn-primary-talent:focus,
body .btn-primary-talent i,
body .center-circle,
body .salary-sidebar-cta__btn,
body .salary-sidebar-cta__btn:hover,
body .tag-badge:hover,
body .blog-search__chip.is-active,
body .step-number,
body #services .btn.btn-sm:hover,
body .author-social .social-btn:hover,
body .slider-arrow:hover { color: var(--sb) !important; }