/* ==========================================================================
   VARIÁVEIS GLOBAIS
   ========================================================================== */
   @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

   :root {
       --color-primary: #155fa8; /* Azul principal Kremoso */
       --color-secondary: #0d467f; /* Azul mais escuro */
       --color-accent: #ffb81a; /* Amarelo */
       
       --color-white: #ffffff;
       --color-bg: #f8fafd; /* Fundo levemente azulado/cinza para contraste dos cards */
       --color-dark: #1a202c;
       --color-gray: #4a5568;
       --color-gray-light: #e2e8f0;
   
       --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
       --shadow-md: 0 10px 30px rgba(21, 95, 168, 0.1);
       --shadow-lg: 0 20px 40px rgba(21, 95, 168, 0.15);
   
       --font-main: 'Outfit', sans-serif;
       --transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
   }
   
   /* ==========================================================================
      RESET
      ========================================================================== */
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
   
   html {
       scroll-behavior: smooth;
   }
   
   body {
       font-family: var(--font-main);
       color: var(--color-dark);
       background-color: var(--color-bg);
       line-height: 1.6;
       overflow-x: hidden;
   }
   
   a {
       text-decoration: none;
       color: inherit;
       transition: var(--transition);
   }
   
   ul { list-style: none; }
   img { max-width: 100%; display: block; }
   
   /* ==========================================================================
      TIPOGRAFIA E TÍTULOS
      ========================================================================== */
   .section-title {
       text-align: center;
       font-size: 2.5rem;
       font-weight: 800;
       color: var(--color-secondary);
       text-transform: uppercase;
       margin-bottom: 0.5rem;
       letter-spacing: -0.5px;
   }
   
   .section-subtitle {
       text-align: center;
       color: var(--color-gray);
       font-size: 1.1rem;
       margin-bottom: 3rem;
   }
   
   /* ==========================================================================
      BOTÕES
      ========================================================================== */
   .btn {
       display: inline-block;
       padding: 12px 30px;
       border-radius: 50px;
       font-weight: 600;
       font-size: 1rem;
       text-align: center;
       cursor: pointer;
       border: none;
       transition: var(--transition);
       text-transform: uppercase;
       letter-spacing: 0.5px;
   }
   
   .btn-primary {
       background-color: var(--color-primary);
       color: var(--color-white);
       box-shadow: 0 4px 15px rgba(21, 95, 168, 0.3);
   }
   
   .btn-primary:hover {
       background-color: var(--color-secondary);
       transform: translateY(-3px);
       box-shadow: 0 8px 25px rgba(21, 95, 168, 0.4);
   }
   
   .btn-white {
       background-color: var(--color-white);
       color: var(--color-primary);
       box-shadow: 0 4px 15px rgba(0,0,0,0.1);
   }
   
   .btn-white:hover {
       background-color: var(--color-gray-light);
       transform: translateY(-3px);
   }
   
   /* ==========================================================================
      HEADER (TOPO BRANCO) COM ONDA
      ========================================================================== */
   .header {
       background-color: var(--color-white);
       position: relative; /* Não sticky para não quebrar a onda ao rolar, ou fixo no topo */
       width: 100%;
       z-index: 1000;
   }
   
   .header-wave {
       position: absolute;
       top: 99%; /* Para evitar linha branca 1px */
       left: 0;
       width: 100%;
       line-height: 0;
       z-index: 999;
   }
   
   .header-wave svg {
       display: block;
       width: 100%;
       height: 100px; /* Altura da onda */
       filter: drop-shadow(0px 5px 10px rgba(0,0,0,0.05)); /* Sombra só na onda e header */
   }
   
   .nav-container {
       max-width: 1400px;
       margin: 0 auto;
       padding: 0 20px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       height: 85px;
       position: relative;
       z-index: 1001;
       background-color: var(--color-white);
   }
   
   /* Logo maior para se destacar */
   .logo-link img {
       max-height: 65px;
       transition: var(--transition);
   }
   
   .logo-link:hover img {
       transform: scale(1.05);
   }
   
   .nav-menu {
       display: flex;
       gap: 2.5rem;
       align-items: center;
   }
   
   .nav-link {
       font-weight: 700;
       font-size: 0.95rem;
       color: var(--color-gray);
       text-transform: uppercase;
       position: relative;
   }
   
   .nav-link:hover, .nav-link.active {
       color: var(--color-primary);
   }
   
   .social-header {
       display: flex;
       gap: 15px;
       margin-left: 20px;
       border-left: 2px solid var(--color-gray-light);
       padding-left: 20px;
   }
   
   .social-header a {
       color: var(--color-primary);
       font-size: 1.2rem;
   }
   
   .social-header a:hover {
       color: var(--color-secondary);
       transform: scale(1.1);
   }
   
   .mobile-toggle {
       display: none;
       font-size: 1.8rem;
       color: var(--color-primary);
       cursor: pointer;
   }
   
   /* ==========================================================================
      HERO (BANNER)
      ========================================================================== */
   .hero {
       position: relative;
       width: 100%;
       background-color: var(--color-bg);
       margin-top: -50px; /* Para subir embaixo da onda branca */
   }
   
   .hero-banner {
       width: 100%;
       height: auto;
       object-fit: cover;
       max-height: 700px;
       display: block;
   }
   
   /* Estilos do Slider */
   .slider-container {
       position: relative;
       width: 100%;
       max-width: 100vw;
       overflow: hidden;
   }
   
   .slider-wrapper {
       display: flex;
       transition: transform 0.5s ease-in-out;
       width: 100%;
   }
   
   .slide {
       min-width: 100%;
       flex-shrink: 0;
   }
   
   .slider-btn {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       background: rgba(255, 255, 255, 0.7);
       color: var(--color-primary);
       border: none;
       width: 50px;
       height: 50px;
       border-radius: 50%;
       font-size: 1.5rem;
       cursor: pointer;
       z-index: 10;
       transition: var(--transition);
       display: flex;
       align-items: center;
       justify-content: center;
   }
   
   .slider-btn:hover {
       background: var(--color-white);
       box-shadow: var(--shadow-md);
       transform: translateY(-50%) scale(1.1);
   }
   
   .prev-btn {
       left: 20px;
   }
   
   .next-btn {
       right: 20px;
   }
   
   .slider-dots {
       position: absolute;
       bottom: 30px;
       left: 50%;
       transform: translateX(-50%);
       display: flex;
       gap: 10px;
       z-index: 10;
   }
   
   .dot {
       width: 12px;
       height: 12px;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.5);
       cursor: pointer;
       transition: var(--transition);
   }
   
   .dot.active {
       background: var(--color-primary);
       transform: scale(1.3);
       border: 2px solid var(--color-white);
   }
   
   /* ==========================================================================
      PRODUTOS
      ========================================================================== */
   .products-section {
       padding: 5rem 20px;
       max-width: 1400px;
       margin: 0 auto;
   }
   
   .products-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 30px;
       margin-top: 3rem;
   }
   
   .product-card {
       background: var(--color-white);
       border-radius: 20px;
       padding: 30px 20px 20px;
       text-align: center;
       box-shadow: var(--shadow-sm);
       transition: var(--transition);
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       position: relative;
       border: 1px solid rgba(0,0,0,0.02);
   }
   
   .product-card:hover {
       transform: translateY(-10px);
       box-shadow: var(--shadow-lg);
   }
   
   .product-card img {
       width: 100%;
       max-width: 200px;
       margin: 0 auto 20px;
       transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
   }
   
   .product-card:hover img {
       transform: scale(1.1) rotate(2deg);
   }
   
   .product-card .btn {
       width: 100%;
       padding: 12px 0;
       border-radius: 12px;
       font-size: 0.9rem;
   }
   
   /* ==========================================================================
      SPLIT SECTION (LEVANDO SABOR)
      ========================================================================== */
   .about-split {
       display: flex;
       width: 100%;
       background: var(--color-primary);
       color: var(--color-white);
       align-items: stretch;
   }
   
   .about-text-col {
       flex: 1;
       padding: 6rem 10%;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: flex-start;
   }
   
   .about-text-col h2 {
       font-size: 3rem;
       font-weight: 800;
       line-height: 1.1;
       margin-bottom: 1.5rem;
       text-transform: uppercase;
   }
   
   .about-text-col p {
       font-size: 1.1rem;
       line-height: 1.8;
       margin-bottom: 2.5rem;
       color: rgba(255, 255, 255, 0.9);
   }
   
   .about-img-col {
       flex: 1;
       background-image: url('../img/Imagem-do-WhatsApp-de-2025-06-04-as-10.44.41_ecd0c0de.jpg');
       background-size: cover;
       background-position: center;
       min-height: 500px;
   }
   
   /* ==========================================================================
      FOOTER E DISTRIBUIDOR
      ========================================================================== */
   .distribuidor-bar {
       background-color: var(--color-secondary);
       color: var(--color-white);
       text-align: center;
       padding: 2rem 20px;
       font-size: 1.5rem;
       font-weight: 800;
       letter-spacing: 1px;
       position: relative;
       z-index: 10;
   }
   
   .footer {
       background-color: var(--color-primary);
       color: var(--color-white);
       padding: 5rem 20px 2rem;
   }
   
   .footer-grid {
       max-width: 1400px;
       margin: 0 auto;
       display: grid;
       grid-template-columns: 1fr 1.5fr 1.5fr;
       gap: 4rem;
   }
   
   .footer-logo img {
       max-width: 200px;
       
       margin-bottom: 1.5rem;
   }
   
   .footer-social {
       display: flex;
       gap: 15px;
   }
   
   .footer-social a {
       background: rgba(255,255,255,0.1);
       width: 40px;
       height: 40px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.2rem;
   }
   
   .footer-social a:hover {
       background: var(--color-white);
       color: var(--color-primary);
       transform: translateY(-3px);
   }
   
   .footer-contact h4 {
       font-size: 1.2rem;
       margin-bottom: 1.5rem;
       font-weight: 700;
   }
   
   .footer-contact ul li {
       display: flex;
       align-items: center;
       gap: 10px;
       margin-bottom: 1rem;
       font-size: 1rem;
       color: rgba(255,255,255,0.8);
   }
   
   .footer-form {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 15px;
   }
   
   .footer-form input,
   .footer-form textarea {
       width: 100%;
       padding: 12px 15px;
       border-radius: 8px;
       border: none;
       background: rgba(255,255,255,0.95);
       font-family: var(--font-main);
       font-size: 0.95rem;
   }
   
   .footer-form textarea {
       grid-column: 1 / -1;
       resize: none;
       height: 80px;
   }
   
   .footer-form button {
       grid-column: 1 / -1;
       background: var(--color-accent);
       color: var(--color-dark);
       font-weight: 700;
       border-radius: 8px;
       padding: 12px;
   }
   
   .footer-form button:hover {
       background: #e6a617;
   }
   
   .footer-bottom {
       text-align: center;
       margin-top: 4rem;
       padding-top: 2rem;
       border-top: 1px solid rgba(255,255,255,0.1);
       font-size: 0.9rem;
       color: rgba(255,255,255,0.6);
   }
   
   /* ==========================================================================
      RESPONSIVO
      ========================================================================== */
   @media (max-width: 1024px) {
       .products-grid { grid-template-columns: repeat(3, 1fr); }
       .about-split { flex-direction: column; }
       .about-text-col { padding: 4rem 20px; text-align: center; align-items: center; }
       .about-img-col { min-height: 400px; }
       .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; }
       .footer-social { justify-content: center; }
       .footer-logo img { margin: 0 auto 1.5rem; }
       .footer-contact ul li { justify-content: center; }
   }
   
   @media (max-width: 768px) {
       .nav-menu {
           position: fixed;
           top: 80px;
           left: -100%;
           width: 100%;
           height: calc(100vh - 80px);
           background: var(--color-white);
           flex-direction: column;
           justify-content: flex-start;
           padding-top: 2rem;
           transition: var(--transition);
           box-shadow: var(--shadow-md);
       }
       .nav-menu.active { left: 0; }
       .mobile-toggle { display: block; }
       .social-header { margin: 20px 0 0 0; padding: 0; border: none; }
       .products-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
       .about-text-col h2 { font-size: 2rem; }
       .footer-form { grid-template-columns: 1fr; }
   }
   
   @media (max-width: 480px) {
       .products-grid { grid-template-columns: 1fr; }
   }
   
   /* Utilitários de Animação */
   .fade-up {
       opacity: 0;
       transform: translateY(30px);
       transition: opacity 0.8s ease-out, transform 0.8s ease-out;
   }
   
   .fade-up.visible {
       opacity: 1;
       transform: translateY(0);
   }