/* Interações e estados – Comando 4.1 e 4.2
   Cards: transição, elevação (translateY), sombra mais intensa, borda dourada opcional
   Botões: primário e secundário com hovers e hierarquia visual clara */

/* Transições suaves para elementos interativos */
.service-card,
.product-card,
.card,
.feature-card,
.process-step {
  transition: all 0.3s ease-in-out;
  will-change: transform, box-shadow, border-color;
}

/* Hover dos cards: elevação e sombra mais pronunciada; borda dourada opcional */
.service-card:hover,
.product-card:hover,
.card:hover,
.feature-card:hover,
.process-step:hover {
  transform: translateY(-5px);
  /* Tópico 18.2: brilho sutil dourado ao redor do card */
  box-shadow: 0px 0px 20px rgba(192, 160, 98, 0.15);
  border-color: var(--primary-color);
}

/* Botão primário: fundo dourado + texto preto suave */
.btn-primary,
button.btn-primary,
.hero .btn-primary,
.cta .btn-primary {
  background: var(--primary-color) !important;
  color: #121212 !important; /* identidade oficial: texto escuro no botão dourado */
  border: 1px solid var(--primary-color) !important;
  transition: all 0.25s ease-in-out;
}
.btn-primary:hover,
button.btn-primary:hover,
.hero .btn-primary:hover,
.cta .btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.12);
}

/* Botão secundário: borda e texto dourados; no hover vira preenchido */
.btn-secondary,
button.btn-secondary,
.hero .btn-secondary,
.cta .btn-secondary {
  background: transparent;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  transition: all 0.25s ease-in-out;
}
.btn-secondary:hover,
button.btn-secondary:hover,
.hero .btn-secondary:hover,
.cta .btn-secondary:hover {
  background: var(--primary-color);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.12);
}

/* Tópico 37.2 — CTA Primário na Hero com gradiente dourado e pulso */
.page-hero .cta-button,
.video-hero .cta-button,
.hero .btn.btn-primary {
  background: linear-gradient(90deg, #D4AF37 0%, #C0A062 100%) !important;
  color: #121212 !important;
  border: 1px solid #C9A533 !important;
  border-radius: 999px !important; /* formato pill */
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.28), 0 0 12px rgba(212, 175, 55, 0.28) !important;
  animation: pulse 2s ease-in-out infinite !important;
}
.page-hero .cta-button:hover,
.video-hero .cta-button:hover,
.hero .btn.btn-primary:hover {
  filter: brightness(1.08) !important; /* hover nítido */
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(212, 175, 55, 0.42), 0 0 22px rgba(212, 175, 55, 0.42) !important;
}
.page-hero .cta-button.cta--lg { padding: 16px 24px !important; font-size: 1.2rem !important; }
.page-hero .cta-button:active,
.video-hero .cta-button:active,
.hero .btn.btn-primary:active {
  transform: translateY(0) !important;
  filter: brightness(0.98) !important;
}

/* Tópico 38.2 — Hover de cards do Processo */
.process-section .process-step:hover {
  transform: translateY(-5px) !important;
  border-color: #C0A062 !important;
  box-shadow: 0px 12px 40px rgba(0, 0, 0, 0.12) !important;
}

/* Tópico 39 — Hover equivalente para MVV na Sobre Nós */
.about-section .process-step:hover {
  transform: translateY(-5px) !important;
  border-color: #C0A062 !important;
  box-shadow: 0px 12px 40px rgba(0, 0, 0, 0.12) !important;
}

/* Header hover gold glow */
.header .logo #site-title,
.header .main-nav a,
.header .header-socials a,
.header .nav-toggle i {
  color: #1A1A1A;
  transition: color .18s ease, text-shadow .18s ease;
}
/* Replicar estilo dos ícones sociais do header na seção de contato */
.contact-form-section .header-socials { display: flex; align-items: center; gap: 12px; }
.contact-form-section .header-socials a {
  color: #C0A062 !important;
  font-size: 1.15rem;
  padding: 6px;
  transition: color .18s ease, text-shadow .18s ease;
}
.header .logo #site-title:hover,
.header .main-nav a:hover,
.header .main-nav a:focus,
.header .main-nav a:active,
.header .header-socials a:hover,
.header .nav-toggle:hover i,
.header .nav-toggle:focus i,
.contact-form-section .header-socials a:hover {
  color: #C0A062 !important;
  text-shadow: 0 0 6px rgba(192,160,98,.6), 0 0 12px rgba(192,160,98,.35);
  background: transparent !important;
  border-color: transparent !important;
  text-decoration: none !important;
}
/* Estado ativo com brilho, sem fundo */
.header .main-nav a.active,
.header .main-nav a[aria-current="page"] {
  color: #C0A062 !important;
  text-shadow: 0 0 6px rgba(192,160,98,.5);
  background: transparent !important;
  border: none !important;
}
/* Remover “modais”/fundos no hover dos menus do header */
.header .main-nav a:hover,
.header .main-nav a:focus,
.header .main-nav a:active {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
/* Remover sublinhado global na navegação ao interagir */
nav a:hover,
nav a:active,
nav a:focus-visible,
.header .main-nav a:hover,
.header .main-nav a:active,
.header .main-nav a:focus-visible {
  text-decoration: none !important;
  border-bottom: none !important;
}
/* Ocultar separador/bolinha acima da hero */
.section-divider { display: none !important; }
/* WhatsApp FAB: texto aparece ao hover + brilho dourado */
.whatsapp-fab .wa-label {
  opacity: 0;
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  transition: max-width .22s ease, opacity .22s ease, margin .22s ease;
}
.whatsapp-fab:hover .wa-label {
  opacity: 1;
  max-width: 240px;
  margin-left: 8px;
}
.whatsapp-fab:hover {
  box-shadow: 0 12px 24px rgba(212,175,55,.45), 0 0 18px rgba(212,175,55,.35) !important;
}

/* WhatsApp flutuante — tamanho maior e contorno dourado apenas no hover */
.floating-whatsapp {
  width: 72px !important;
  height: 72px !important;
  font-size: 34px !important; /* ícone maior */
}
.floating-whatsapp:hover {
  background: #25D366 !important; /* mantém verde */
  color: #ffffff !important;
  border: 2px solid #D4AF37 !important; /* contorno dourado */
  box-shadow: 0 0 0 4px rgba(212,175,55,.25), 0 12px 28px rgba(0,0,0,.18) !important; /* anel dourado + sombra */
}
/* Label exibido ao passar o mouse – posição dinâmica ao lado esquerdo */
.floating-whatsapp::after {
   content: "fale com um especialista";
   position: absolute;
   right: calc(100% + 12px);
   top: 50%;
   transform: translateY(-50%);
   background: #111111;
   color: #ffffff;
   border-radius: 10px;
   padding: 8px 12px;
   font-size: 0.9rem;
   line-height: 1;
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
   box-shadow: 0 8px 20px rgba(0,0,0,.20);
   transition: all .18s ease-in-out;
 }
.floating-whatsapp:hover::after {
  opacity: 1;
  background: #D4AF37;
  color: #111111;
  box-shadow: 0 10px 24px rgba(212,175,55,.40);
}

/* Remover o círculo/brilho branco acima da hero nas páginas em geral */
.page-hero::before,
#hero::after,
.hero::after,
.page-hero.video-hero::after,
.video-hero::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
.floating-decor,
.floating-decor .decor { content: none !important; display: none !important; background: none !important; }
/* Overlays específicos da home (gradientes superior e inferior) */
#home.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  display: block !important;
  /* Gradiente superior: cinza/ branco/ dourado, descendo para transparente */
  background: linear-gradient(180deg,
    rgba(255,255,255,0.88) 0%,
    rgba(212,175,55,0.14) 24%,
    rgba(245,245,245,0.06) 48%,
    rgba(255,255,255,0.00) 64%
  );
  z-index: 1;
  pointer-events: none;
}
#home.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  display: block !important;
  /* Gradiente inferior: cinza/ branco/ dourado, subindo para transparente */
  background: linear-gradient(0deg,
    rgba(255,255,255,0.92) 0%,
    rgba(212,175,55,0.18) 24%,
    rgba(245,245,245,0.06) 48%,
    rgba(255,255,255,0.00) 64%
  );
  z-index: 1;
  pointer-events: none;
}
#home.page-hero .content { position: relative; z-index: 2; }
#home.page-hero h1 {
  color: #FFFFFF !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
}
#home.page-hero p {
  color: rgba(255,255,255,0.85) !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6) !important;
}
#home.page-hero h1 em, #home.page-hero h1 strong { color: #D4AF37 !important; }
#home.page-hero .btn { color: #FFFFFF; border: 2px solid #D4AF37; background-color: rgba(212,175,55,0.18); box-shadow: 0 8px 24px rgba(0,0,0,0.30); }
#home.page-hero .btn:hover { background-color: rgba(212,175,55,0.28); box-shadow: 0 10px 28px rgba(212,175,55,0.30); }

/* Sobre Nós — Botões interativos + Tooltip + Modal */
.about-section .about-btn { 
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 20px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, #D4AF37 0%, #C0A062 100%);
  color: #FFFFFF; border: 1px solid rgba(201,165,51,0.65);
  box-shadow: 0 6px 18px rgba(212,175,55,0.22), 0 2px 10px rgba(212,175,55,0.18);
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
  font-weight: 600; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.about-section .about-btn:hover { 
  filter: brightness(1.05); transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(212,175,55,0.32), 0 0 18px rgba(212,175,55,0.28);
}

/* Tooltip com prévia */
.about-tooltip { 
  position: absolute; z-index: 1500; opacity: 0; transform: translateY(-2px);
  background: #111111; color: #ffffff; border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25); max-width: 320px;
  transition: opacity .18s ease, transform .18s ease;
}
.about-tooltip.visible { opacity: 1; transform: translateY(0); }
.about-tooltip .tip-title { font-weight: 600; margin-bottom: 4px; color: #FFD966; }
.about-tooltip .tip-preview { font-size: .92rem; opacity: .95; }

/* Modal genérico da seção Sobre Nós */
.about-modal { position: fixed; inset: 0; z-index: 1600; display: none; }
.about-modal.open { display: block; }
.about-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.60); }
.about-modal-content { 
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(720px, 92vw); max-height: 80vh; overflow: auto;
  background: #FFFFFF; border-radius: 16px; padding: 20px 22px;
  box-shadow: 0 20px 48px rgba(0,0,0,0.32), 0 0 24px rgba(212,175,55,0.35);
  border: 1px solid rgba(212,175,55,0.35);
}
.about-modal-title { margin: 0 0 10px; color: var(--secondary-color); }
.about-modal-body p { margin: 0 0 12px; opacity: 0.92; }
.about-modal-close { 
  position: absolute; top: 10px; right: 12px; background: transparent; border: none;
  font-size: 22px; line-height: 1; cursor: pointer; color: #333;
}

/* Evita scroll do corpo enquanto modal aberto */
body.no-scroll { overflow: hidden; }

/* Container de ações da seção Sobre Nós */
.about-section .about-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: center;
  justify-items: stretch;
  margin: 16px 0; /* espaçamento igual acima e abaixo dos botões */
}

/* Botões ocupam toda a coluna do grid */
.about-section .about-actions .about-btn {
  width: 100%;
  min-width: 0;
}

/* Tamanho maior e micro-interação de pulso suavemente visível */
.about-section .about-btn.about-btn--xl {
  padding: 18px 28px;
  font-size: 1.15rem;
  animation: aboutPulse 3.2s ease-in-out infinite;
}

/* Pulso sutil no brilho e box-shadow para aumentar descoberta */
@keyframes aboutPulse {
  0% {
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.26), 0 0 14px rgba(212, 175, 55, 0.24);
    filter: drop-shadow(0 0 0 rgba(255, 205, 112, 0.0));
  }
  50% {
    box-shadow: 0 14px 36px rgba(212, 175, 55, 0.38), 0 0 22px rgba(212, 175, 55, 0.32);
    filter: drop-shadow(0 0 8px rgba(255, 205, 112, 0.25));
  }
  100% {
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.26), 0 0 14px rgba(212, 175, 55, 0.24);
    filter: drop-shadow(0 0 0 rgba(255, 205, 112, 0.0));
  }
}

/* Hover: expandir suavemente para destacar a ação */
.about-section .about-btn.about-btn--xl:hover,
.about-section .about-btn.about-btn--xl:focus-visible {
  box-shadow: 0 18px 42px rgba(212, 175, 55, 0.48), 0 0 28px rgba(212, 175, 55, 0.46);
}

/* Responsividade para telas menores */
@media (max-width: 768px) {
  .about-section .about-actions {
    gap: 18px;
  }
  .about-section .about-actions .about-btn {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* Contact section – Social icons gold styling (Topic 44.2) */
.contact-section .header-socials { display: flex; align-items: center; gap: 12px; }
.contact-section .header-socials a { color: #C0A062 !important; font-size: 1.25rem; padding: 6px; }
.contact-section .header-socials a:hover { color: #d6b879 !important; }
/* Ensure FA brand icons render correctly in contact section */
.contact-section .header-socials i {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
  font-style: normal !important;
  display: inline-block !important;
}