/* =============================================================================
   VIVEIRO VILLA GARDEN - CORREÇÃO ESPECÍFICA PARA LAYOUT HERO MOBILE
   Desenvolvido por: Jay C Designer
   Website: jaycdesigner.com.br
   Copyright © 2025 Jay C Designer
   
   Força o layout em coluna única para a seção hero em dispositivos móveis
============================================================================= */

/* Força layout desktop para telas grandes */
@media (min-width: 901px) {
    .hero .container {
        grid-template-columns: 1fr 1fr !important;
        text-align: left !important;
    }
    
    .hero-content {
        order: unset !important;
    }
    
    .hero-image {
        order: unset !important;
    }
}

/* Força layout mobile para tablets */
@media (max-width: 900px) and (min-width: 769px) {
    .hero .container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 50px !important;
        text-align: center !important;
        align-items: center !important;
    }
    
    .hero-content {
        order: 1 !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    
    .hero-image {
        order: 2 !important;
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
}

/* Força layout mobile para smartphones */
@media (max-width: 768px) {
    .hero .container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 40px !important;
        text-align: center !important;
        align-items: center !important;
    }
    
    .hero-content {
        order: 1 !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    
    .hero-image {
        order: 2 !important;
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
    
    .hero-buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
    }
    
    .hero-buttons .btn {
        width: 100% !important;
        max-width: 280px !important;
    }
}

/* Força layout para telas muito pequenas */
@media (max-width: 480px) {
    .hero .container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 30px !important;
        text-align: center !important;
        align-items: center !important;
    }
    
    .hero-content {
        order: 1 !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    
    .hero-image {
        order: 2 !important;
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
    
    .hero-buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }
    
    .hero-buttons .btn {
        width: 100% !important;
        max-width: 260px !important;
    }
    
    .floating-img {
        max-width: 280px !important;
    }
    
    /* Corrige corte das bordas da imagem */
    .hero-image {
        padding: 15px !important;
    }
}

/* =============================================================================
   CORREÇÃO FINAL PARA HOVER DOS BOTÕES DO HERO
============================================================================= */

/* Garante que os hovers funcionem em todas as resoluções */
.hero-buttons .btn {
    position: relative !important;
    overflow: visible !important;
    z-index: 10 !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Força o hover para todos os estados */
.hero-buttons .btn:hover,
.hero-buttons .btn:active,
.hero-buttons .btn:focus {
    outline: none !important;
}

.hero-buttons .btn-primary:hover,
.hero-buttons .btn-primary:active,
.hero-buttons .btn-primary:focus {
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 35px rgba(140, 183, 63, 0.4) !important;
    background: linear-gradient(135deg, #9ac654, #3d5a0e) !important;
    outline: none !important;
}

.hero-buttons .btn-secondary:hover,
.hero-buttons .btn-secondary:active,
.hero-buttons .btn-secondary:focus {
    background: var(--primary-color) !important;
    color: var(--white) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 35px rgba(140, 183, 63, 0.3) !important;
    border-color: var(--primary-color) !important;
    outline: none !important;
}

/* Efeito de brilho nos botões */
.hero-buttons .btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
    transition: left 0.6s ease !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

.hero-buttons .btn:hover::before {
    left: 100% !important;
}

/* Correção para touch devices */
@media (hover: hover) {
    .hero-buttons .btn:hover {
        animation: buttonHover 0.3s ease forwards !important;
    }
}

/* Garante que funcione em dispositivos touch também */
@media (hover: none) {
    .hero-buttons .btn:active {
        transform: translateY(-2px) !important;
        box-shadow: 0 10px 25px rgba(140, 183, 63, 0.3) !important;
    }
    
    .hero-buttons .btn-primary:active {
        background: linear-gradient(135deg, #9ac654, #3d5a0e) !important;
    }
    
    .hero-buttons .btn-secondary:active {
        background: var(--primary-color) !important;
        color: var(--white) !important;
        border-color: var(--primary-color) !important;
    }
}

@keyframes buttonHover {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-3px);
    }
}