:root {
     --primary: #0000FF;
     /* Azul forte dos banners */
     --secondary: #00a859;
     /* Verde */
     --accent: #ff6b00;
     /* Laranja */
     --terceary: #ff6b00;
     --light: #f5f9ff;
     --dark: #1a2a49;
     --gray: #6c757d;
     --light-gray: #e9ecef;
     --text-color: #2c3e50;
     --transition: all 0.3s ease;
     --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     --border-radius: 4px;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     line-height: 1.6;
     color: var(--text-color);
     background-color: #ffffff;
     overflow-x: hidden;
 }

 a {
     text-decoration: none;
     color: inherit;
     transition: var(--transition);
 }

 .container {
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
 }

 .btn {
     display: inline-block;
     padding: 12px 30px;
     background: var(--accent);
     color: white;
     border-radius: 5px;
     font-weight: 600;
     transition: var(--transition);
     border: none;
     cursor: pointer;
     box-shadow: var(--shadow);
     font-size: 1.1rem;
 }

 .btn:hover {
     background: #e55e00;
     transform: translateY(-3px);
     box-shadow: 0 6px 15px rgba(255, 107, 0, 0.3);
 }

 .btn-secondary {
     background: var(--primary);
 }

 .btn-secondary:hover {
     background: #0000cc;
 }

 /* Responsividade */
 @media (max-width: 992px) {

     .fgts-container,
     .benefits-container {
         grid-template-columns: 1fr;
     }

     .fgts-image,
     .benefits-image {
         height: 350px;
         order: -1;
     }

     .hero h1 {
         font-size: 2.8rem;
     }
 }

 @media (max-width: 768px) {
     .mobile-menu-btn {
         display: block;
     }

     nav ul {
         position: fixed;
         top: 80px;
         left: -100%;
         flex-direction: column;
         background: white;
         width: 100%;
         height: calc(100vh - 80px);
         padding: 50px 20px;
         gap: 30px;
         box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
         transition: var(--transition);
         z-index: 1000;
     }

     nav ul.active {
         left: 0;
     }

     .hero h1 {
         font-size: 2.2rem;
     }

     .hero p {
         font-size: 1.1rem;
     }

     .hero-buttons {
         flex-direction: column;
         align-items: center;
     }

     .fgts-content h2,
     .benefits-content h2 {
         font-size: 2.2rem;
     }

     .fgts-cta h3 {
         font-size: 1.8rem;
     }
 }

 /* <!-- Melhorar contraste de cores --> */
/* Ajuste para garantir mínimo 4.5:1 */
.hero p {
  color: rgba(255, 255, 255, 0.95); /* Aumentar contraste */
}

/* Estilos para o botão whatssap*/
.whatsapp-button {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  background-color: #25D366;
  color: white;
  text-decoration: none;
  font-weight: 600;
  border-radius: 8px;
  font-size: 16px;
  transition: background-color 0.3s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.whatsapp-button:hover {
  background-color: #1ebe5b;
}

.whatsapp-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}