/* Nova paleta de cores para Onconefro Brasil
 * Cores principais:
 * - Laranja: #ed9134
 * - Cinza escuro: #4b4b4a
 */

:root {
  /* Substituição das cores principais */
  --primary-color: #ed9134;
  --secondary-color: #4b4b4a;

  /* Cores derivadas - mais claras e escuras */
  --primary-color-dark: #d27c28;
  --primary-color-light: #f5ac65;
  --primary-color-lightest: #fceadb;

  --secondary-color-dark: #333332;
  --secondary-color-light: #777776;
  --secondary-color-lightest: #e5e5e4;

  /* Substitui a cor de destaque (accent) */
  --accent-color: #ed9134;
  --light-accent-color: #f5ac65;

  /* Mantém o gradiente mas com as novas cores */
  --gradient: linear-gradient(
    135deg,
    var(--secondary-color),
    var(--secondary-color-dark)
  );
}

/* Ajustes específicos para botões */
.btn-primary,
.btn-join {
  background: var(--primary-color);
  color: white;
  box-shadow: 0 5px 15px rgba(237, 145, 52, 0.2);
}

.btn-primary:hover,
.btn-join:hover {
  background: var(--primary-color-dark);
  box-shadow: 0 8px 20px rgba(237, 145, 52, 0.3);
}

/* Links e destaques de texto */
a:hover,
.benefit-highlight {
  color: var(--primary-color);
}

/* Elementos de destaque na navegação */
.nav-list a::after,
.section-title::after,
.footer-column h4::after,
.step-content h3::after,
.feature h3::after {
  background-color: var(--primary-color);
}

/* Ícones e elementos visuais */
.social-icon:hover,
.feature ul li::before,
.specialist-cv-list li::before,
.modal-content li::before,
.step-highlight i {
  color: var(--primary-color);
}

/* Bordas e elementos decorativos */
.specialist-card,
.content-card:hover {
  border-color: var(--primary-color);
}

/* Botões secundários */
.btn-specialist-cv {
  border: 2px solid var(--primary-color);
  color: white;
}

.btn-specialist-cv:hover {
  background-color: var(--primary-color);
  color: white;
}

/* Botões e elementos de ação */
.btn-saiba-mais {
  background-color: var(--primary-color);
}

.btn-saiba-mais:hover {
  background-color: var(--primary-color-dark);
}

/* Áreas de fundo */
.footer {
  background: linear-gradient(
    to right,
    var(--secondary-color),
    var(--secondary-color-dark)
  );
}

/* Números e elementos de destaque */
.step-number {
  background-color: var(--primary-color);
  box-shadow: 0 5px 15px rgba(237, 145, 52, 0.3);
}

/* Ícones nos benefícios */
.benefit-icon {
  background-color: rgba(237, 145, 52, 0.1);
  color: var(--primary-color);
}

.benefit-icon i {
  color: var(--primary-color);
}

/* Elementos de hover e interação */
.audience-item:hover {
  border-bottom-color: var(--primary-color);
}

.audience-icon {
  background-color: rgba(237, 145, 52, 0.1);
}

.audience-icon i {
  color: var(--primary-color);
}

.audience-item:hover .audience-icon {
  background-color: var(--primary-color);
}

/* FAQs e textos destacados */
.faq-question::after {
  color: var(--primary-color);
}

.step-highlight {
  background-color: rgba(237, 145, 52, 0.1);
  border-left: 3px solid var(--primary-color);
}

/* Rodapé e elementos de contato */
.footer-copyright a:hover {
  color: var(--primary-color-light);
}

.footer-copyright a:after {
  background-color: var(--primary-color);
}

.footer-social .social-icon:hover {
  background-color: var(--primary-color);
}

/* Textos */
.specialist-title,
.modal-title {
  color: var(--primary-color);
}

/* Para títulos principais */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: white;
}

/* Seção Hero com overlay */

/* Botões de contato específicos */
.contact-method.whatsapp {
  border: 2px solid #25d366;
}

.contact-method.instagram {
  border: 2px solid var(--primary-color);
  text-decoration: none;
}

/* Estilização específica para hero e seções importantes */
.section-title {
  color: var(--secondary-color);
}

/* Para os cards na seção de conteúdo */
.content-card:hover {
  border-color: var(--primary-color);
  box-shadow: 0 15px 30px rgba(237, 145, 52, 0.15);
}

/* Seção de benefícios */
.benefit-item {
  transition: all 0.3s ease;
}

.benefit-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(237, 145, 52, 0.15);
  border-bottom: 3px solid var(--primary-color);
}

/* Menu de navegação */
.nav-list li a:hover {
  color: var(--primary-color);
}

.menu-toggle .bar {
  background-color: var(--secondary-color);
}

/* Feature cards */
.feature {
  border-left: 4px solid var(--primary-color);
}

/* Pontos e elementos decorativos */
.feature li::before,
.specialist-cv-list li::before {
  background-color: var(--primary-color);
}

/* WhatsApp button hover effect */
#robbu-whatsapp-button:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Modal close buttons */
.modal-close:hover,
.specialist-cv-close:hover {
  color: var(--primary-color);
}

/* Specialist Card Hover Effect */
.specialist-card:hover .specialist-img img {
  border-color: var(--primary-color);
}

/* Color for specialist titles */
.specialist-registration {
  color: var(--primary-color);
}

/* Header when scrolled */
.header.scrolled {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Ajustes específicos para o Instagram na seção de contato */
.contact-method.instagram i {
  background: linear-gradient(
    45deg,
    #f09433,
    #e6683c,
    #dc2743,
    #cc2366,
    #bc1888
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Seção Como Funciona */
.how-it-works {
  position: relative;
}

.how-it-works .steps-container::before {
  background: linear-gradient(
    to bottom,
    transparent,
    var(--primary-color),
    transparent
  );
}

.join-step-number {
  border-color: var(--primary-color);
  color: var(--secondary-color);
}

.join-step:hover .join-step-number {
  background-color: var(--primary-color);
  color: white;
  box-shadow: 0 5px 15px rgba(237, 145, 52, 0.3);
}

/* Seção Para Quem É */
.for-who {
  position: relative;
}

.for-who::before {
  opacity: 0.05;
}

.for-who h2.section-title {
  color: white;
}

/* Contato e Call-to-Action */
.contact-methods {
  margin-top: 2rem;
}

.contact-method {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  border: 1px solid var(--secondary-color-lightest);
  background-color: white;
}

.contact-method span {
  color: white;
}

.contact-method:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* Botão "Quero fazer parte" */
.how-to-join a.btn-join {
  background-color: var(--primary-color);
  color: white;
  text-decoration: none;
}

.how-to-join a.btn-join:hover {
  background-color: var(--primary-color-dark);
}

/* Estilo para os textos secundários */
.for-who .section-intro p,
.how-it-works .section-intro p,
.how-to-join .section-intro p,
.about-text p,
.step-content p,
.modal-content p,
.contact-info p {
  color: var(--secondary-color-light);
}

/* Card de conteúdo */
.content-info h3 {
  color: var(--secondary-color);
}

/* Bordas e detalhes de hover para seções específicas */
.join-faq .faq-item {
  border-bottom-color: var(--secondary-color-lightest);
}

.join-faq .faq-item.active .faq-question {
  color: var(--primary-color);
}

.how-to-join-content {
  background-color: #f8f8f7;
  border-radius: 12px;
}

.how-to-join-steps::before {
  background: linear-gradient(
    to right,
    transparent,
    var(--primary-color),
    transparent
  );
}

/* Cartões de especialistas */
.specialist-card {
  border-bottom-color: var(--primary-color);
}

.specialist-card h3 {
  color: var(--secondary-color-dark);
}

.specialist-title {
  color: var(--primary-color);
}

.specialist-description {
  color: var(--secondary-color-light);
}

.specialist-social {
  color: var(--secondary-color-light);
}

.specialist-social:hover {
  color: var(--primary-color);
}

/* Modais */
.specialist-cv-header h3,
.modal-title {
  color: var(--secondary-color);
}

.specialist-cv-header h3::after,
.modal-title::after {
  background-color: var(--primary-color);
}

.specialist-registration {
  color: var(--primary-color);
}

.specialist-cv-list li {
  color: var(--secondary-color-light);
}

.specialist-cv-list li:before {
  background-color: var(--primary-color);
}

.para_quem {
  color: white !important;
}

/* Estilo para os itens de currículo dos especialistas - transformando em bolinhas */
.specialist-cv-list li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 8px;
  list-style-type: none;
}

.specialist-cv-list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background-color: var(--primary-color);
  border-radius: 50%;
}

/* Remover a barra lateral laranja que existia anteriormente */
.specialist-cv-list {
  border-left: none;
  padding-left: 0;
}

/* Correção do espaçamento para cards da seção "Como funciona" em dispositivos móveis */
@media (max-width: 768px) {
  .step-item {
    padding: 1.5rem !important;
  }

  .step-content {
    padding: 1rem 0.5rem;
  }

  .step-number {
    margin: 0 auto 1rem;
  }

  .step-highlight {
    margin-left: 0;
    margin-right: 0;
    padding: 1rem;
  }

  .step-content h3 {
    text-align: center;
  }

  .step-content p {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .step-item {
    padding: 1.25rem !important;
  }

  .step-content {
    padding: 0.75rem 0.5rem;
  }
}