/* ==========================================================================
   Configurações Globais e Variáveis de Cor
   ========================================================================== */
:root {
  --primary-blue: #00a9e0; --primary-blue-dark: #008fbf;
  --text-dark: #1f2937; --text-light: #6b7280;
  --background-light: #ffffff; --background-soft: #f8fcfd;
  --background-soft-green: #f0f9f8; --background-footer: #111827;
}
body { font-family: 'Inter', sans-serif; background-color: var(--background-soft); color: var(--text-dark); }

/* ==========================================================================
   Header
   ========================================================================== */
.custom-header-shape { position: sticky; top: 0; height: 150px; background-color: transparent; overflow: visible; z-index: 50; transition: box-shadow 0.4s ease-in-out; }
.custom-header-shape::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--background-light); clip-path: polygon(0 0, 100% 0, 100% 70%, 85% 100%, 0 100%); z-index: 1; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.header-content-wrapper { position: relative; height: 100%; z-index: 5; padding-left: 200px; padding-right: 1.5rem; }
.logo-3d-container { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); z-index: 20; width: 180px; height: 180px; }
#main-logo-3d { width: 90%; height: 90%; object-fit: contain; transition: transform 0.4s ease, filter 0.4s ease; transform: scale(1.1); filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.2)); margin-left: -50px; margin-top: -10px; }
#main-logo-3d:hover { transform: scale(1.15); filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.3)); }

/* ==========================================================================
   Navegação
   ========================================================================== */
.nav-link { font-weight: 500; color: var(--text-light); text-decoration: none; position: relative; padding: 0.5rem 0; transition: color 0.3s ease; }
.nav-link:hover { color: var(--primary-blue); }
.nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--primary-blue); transition: width 0.4s ease; }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-link.active { color: var(--primary-blue); font-weight: 600; }

/* ==========================================================================
   Animação
   ========================================================================== */
.animation-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.leaf { position: absolute; bottom: -100px; width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.15); border-radius: 50% 0; animation: float 25s linear infinite; }
@keyframes float { from { bottom: -100px; transform: translateX(0) rotate(0deg); } to { bottom: 100%; transform: translateX(var(--translateX)) rotate(720deg); } }
.leaf:nth-child(1) { left: 5%; animation-duration: 22s; animation-delay: 0s; --translateX: -20vw; }
.leaf:nth-child(2) { left: 15%; animation-duration: 28s; animation-delay: 2s; --translateX: 20vw; }
.leaf:nth-child(3) { left: 25%; animation-duration: 19s; animation-delay: 1s; --translateX: -25vw; }
.leaf:nth-child(4) { left: 35%; animation-duration: 30s; animation-delay: 5s; --translateX: 15vw; }
.leaf:nth-child(5) { left: 45%; animation-duration: 24s; animation-delay: 3s; --translateX: -10vw; }
.leaf:nth-child(6) { left: 55%; animation-duration: 26s; animation-delay: 7s; --translateX: 10vw; }
.leaf:nth-child(7) { left: 65%; animation-duration: 20s; animation-delay: 4s; --translateX: -15vw; }
.leaf:nth-child(8) { left: 75%; animation-duration: 32s; animation-delay: 6s; --translateX: 25vw; }
.leaf:nth-child(9) { left: 85%; animation-duration: 18s; animation-delay: 2s; --translateX: -20vw; }
.leaf:nth-child(10) { left: 95%; animation-duration: 29s; animation-delay: 0s; --translateX: 10vw; }

/* ==========================================================================
   Estilos Gerais e Seções
   ========================================================================== */
.section-padding { padding: 100px 0; }
#home p { color: rgba(255, 255, 255, 0.9); }
h1, h2, h3 { font-weight: 700; color: var(--text-dark); }
h1 { font-size: 3rem; } h2 { font-size: 2.5rem; } h3 { font-size: 1.5rem; }
p { color: var(--text-light); line-height: 1.7; }
.primary-blue-bg { background-color: var(--primary-blue); }
.secondary-green-bg { background-color: var(--background-soft-green); }
.soft-bg { background-color: var(--background-soft); }
.primary-blue-text { color: var(--primary-blue); }

/* ==========================================================================
   Pontos de Confiança (Seção Home)
   ========================================================================== */
.trust-points-container { display: flex; justify-content: center; gap: 2rem; margin-top: 3rem; flex-wrap: wrap; }
.trust-point { background-color: rgba(255, 255, 255, 0.1); padding: 0.5rem 1rem; border-radius: 99px; font-size: 0.875rem; font-weight: 500; backdrop-filter: blur(5px); }

/* ==========================================================================
   Botões e Cards
   ========================================================================== */
.btn-primary { display: inline-block; background-color: var(--primary-blue); color: white !important; padding: 1rem 2.5rem; border-radius: 0.5rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; }
.btn-primary:hover { background-color: var(--primary-blue-dark); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 169, 224, 0.25); }
#home .btn-primary { background-color: var(--primary-blue) !important; color: white !important; }
.card { border-radius: 1rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); background-color: var(--background-light); padding: 2rem; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; justify-content: space-between; }
.card:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); }
.card a.btn-primary { margin-top: auto; }
#servicos .card-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
#servicos .card { min-height: 280px; }

/* ==========================================================================
   Botão de Contato no Menu
   ========================================================================== */
.nav-button { background-color: var(--primary-blue); color: white; padding: 0.5rem 1.25rem; border-radius: 0.5rem; font-weight: 500; transition: all 0.3s ease; }
.nav-button:hover { background-color: var(--primary-blue-dark); color: white; transform: translateY(-2px); }

/* ==========================================================================
   Seção de Contato
   ========================================================================== */
#contato { position: relative; overflow: hidden; }
#contato h2, #contato h3 { color: white; }
#contato p { color: rgba(255, 255, 255, 0.8); }
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.contact-info { text-align: left; }
.contact-info .contact-link { color: white; text-decoration: underline; transition: color 0.3s ease; }
.contact-info .contact-link:hover { color: var(--primary-blue-dark); }

/* NOVO: Estilos para o Painel de Ação Rápida */
.contact-appeal {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 2.5rem;
  border-radius: 1rem;
  text-align: center;
}
.btn-contact {
  display: block;
  width: 100%;
  padding: 1rem;
  border-radius: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  text-align: center;
  transition: all 0.3s ease;
  margin-bottom: 1rem;
}
.btn-contact.whatsapp {
  background-color: #25D366;
  color: white;
}
.btn-contact.whatsapp:hover {
  background-color: #1DA851;
  transform: scale(1.02);
}
.btn-contact.phone {
  background-color: var(--background-light);
  color: var(--primary-blue);
}
.btn-contact.phone:hover {
  background-color: #eef;
  transform: scale(1.02);
}

/* ==========================================================================
   Rodapé e Ajustes Responsivos
   ========================================================================== */
footer { background-color: var(--background-footer); color: var(--text-light); padding: 2rem 0; }
@media (max-width: 992px) {
  #servicos .card { min-height: auto; }
  .contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  h1 { font-size: 2.25rem; } h2 { font-size: 2rem; }
  .section-padding { padding: 60px 0; }
  .custom-header-shape { height: 100px; }
  .custom-header-shape::before { clip-path: polygon(0 0, 100% 0, 100% 85%, 90% 100%, 0 100%); }
  .header-content-wrapper { padding-left: 120px; justify-content: flex-end; }
  .logo-3d-container { width: 120px; height: 120px; left: -10px; }
  #main-logo-3d { margin-left: 0; margin-top: 0; transform: scale(1); }
  .nav-links { display: none; }
  .contact-layout { text-align: center; }
  .contact-info { margin-bottom: 2rem; text-align: center; }
  .contact-appeal { padding: 1.5rem; }
}