/* Camada final de ajustes de paleta para Nutri360
 * Cores definidas em css/global.css (:root):
 * - Verde profundo (primary): #03362f
 * - Verde-azulado (secondary): #587975
 * - Dourado (accent): #d4a65b
 */

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

.btn-primary:hover,
.btn-join:hover {
  background: var(--primary-color-dark);
  box-shadow: 0 8px 20px rgba(212, 166, 91, 0.35);
}

/* Elemento decorativo (sem efeito visual, mantém apenas a cor base) */
.modal-content li::before {
  color: var(--primary-color);
}

/* Bordas e elementos decorativos */
.content-card:hover {
  border-color: var(--primary-color);
  box-shadow: 0 15px 30px rgba(3, 54, 47, 0.15);
}

/* Números e elementos de destaque */
.step-number {
  box-shadow: 0 5px 15px rgba(212, 166, 91, 0.35);
}

/* Ícones nos benefícios */
.benefit-icon {
  background-color: rgba(212, 166, 91, 0.12);
  color: var(--accent-color-dark);
}

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

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

.audience-icon {
  background-color: rgba(212, 166, 91, 0.12);
}

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

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

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

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

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

.modal-title::after {
  background-color: var(--accent-color);
}

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

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

.contact-method.instagram {
  border: 2px solid white;
  text-decoration: none;
}

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

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

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

.menu-toggle .bar {
  background-color: white;
}

/* Números e ícones da seção Sobre Nós */
.about-pillar-number {
  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(--accent-color-dark);
}

/* Color for specialist registration text */
.specialist-registration {
  color: var(--accent-color-dark);
}

/* 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(--accent-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(212, 166, 91, 0.35);
}

/* 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 (contraste garantido em fundo claro) */
.how-it-works .section-intro p,
.how-to-join .section-intro p,
.about-intro p,
.step-content p,
.modal-content p,
.contact-info p {
  color: var(--dark-gray);
}

/* 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(--accent-color-dark);
}

.how-to-join-content {
  background-color: var(--light-gray);
  border-radius: 12px;
}

/* Perfil da Mentora */
.mentor-name {
  color: var(--secondary-color-dark);
}

.mentor-bio {
  color: var(--secondary-color-light);
}

.mentor-highlights li {
  color: var(--secondary-color-light);
}

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

.mentor-social:hover {
  color: var(--accent-color-dark);
}

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

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

.para_quem {
  color: white !important;
}

/* 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;
  }
}

/* Tamanho de fonte de títulos e subtítulos, apenas em dispositivos mobile */
@media (max-width: 768px) {
  .section-title {
    font-size: 35px;
  }

  .section-intro p,
  .for-who .section-intro p {
    font-size: 20px;
  }
}