/* ==========================================
           3. SEÇÃO PRODUTO (Banner e Descrição)
           ========================================== */
           .product-hero { background-color: var(--primary); padding: 50px 0; text-align: center; }

           .btn-cta-product {
               border: 2px solid #e1ec2a; background: transparent; color: var(--primary);
               font-family: var(--font-monda); font-weight: 600; border-radius: 12px;
               padding: 12px 30px; display: inline-flex; align-items: center; gap: 10px;
               transition: .3s; text-decoration: none;
           }
           .btn-cta-product:hover { background-color: #f9ffd6; transform: scale(1.05); color: var(--primary); }
   
           /* ==========================================
              4. GALERIA COM MODAL (image_cb33ab.jpg)
              ========================================== */
           .gallery-item {
               position: relative; overflow: hidden; border-radius: 12px;
               cursor: pointer; aspect-ratio: 16/9; box-shadow: 0 4px 15px rgba(0,0,0,0.1);
           }
           .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
           .gallery-overlay {
               position: absolute; top: 0; left: 0; width: 100%; height: 100%;
               background: rgba(41, 81, 153, 0.7); display: flex; align-items: center;
               justify-content: center; opacity: 0; transition: 0.4s;
           }
           .gallery-overlay i { color: #fff; font-size: 2rem; }
           .gallery-item:hover img { transform: scale(1.1); }
           .gallery-item:hover .gallery-overlay { opacity: 1; }
   
           /* ==========================================
              5. CARDS DE VERSÕES (image_cb2bae.jpg)
              ========================================== */
           .version-card {
               background: #fff; border-radius: 8px; border: none; overflow: hidden;
               transition: .3s; height: 100%; box-shadow: 0 4px 12px rgba(0,0,0,0.08);
           }
           .version-card img { width: 100%; height: 220px; object-fit: cover; }
           .version-card .card-body { padding: 20px; text-align: center; }
           .version-card h4 { color: var(--primary); font-family: var(--font-monda); font-size: 20px; }
   
           /* ==========================================
              6. RODAPÉ & WHATSAPP
              ========================================== */
           .social-inst { color: var(--color-instagram) !important; }
           .social-face { color: var(--color-facebook) !important; }
           .social-yt   { color: var(--color-youtube) !important; }
           .footer-link { color: var(--secondary); text-decoration: none; }
           .whatsapp-float {
               position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px;
               background-color: #25d366; color: #fff; border-radius: 50%; display: flex;
               align-items: center; justify-content: center; font-size: 30px; z-index: 1000;
           }

           /* ==========================================
   7. AJUSTES DO MODAL DE GALERIA - ATUALIZADO
   ========================================== */
.modal-img-fixa {
    width: 100%;
    /* No desktop, a altura máxima será 80vh (80% da tela) */
    height: 80vh; 
    object-fit: cover; /* ALTERADO DE 'contain' PARA 'cover' PARA PREENCHER O ESPAÇO */
    background-color: #000; /* Mantemos o fundo preto para cobrir qualquer espaço restante ou durante o carregamento */
}

/* Ajustes para telas menores (Tablets e Celulares) */
@media (max-width: 991px) {
    .modal-img-fixa {
        height: 60vh; 
    }
}

@media (max-width: 576px) {
    .modal-img-fixa {
        height: 50vh; 
        object-fit: cover; /* Mantemos como cover para preencher a tela do celular */
    }
}