/* =============================================================================
   VIVEIRO VILLA GARDEN - CORREÇÕES DE HOVER
   Desenvolvido por: Jay C Designer
   Website: jaycdesigner.com.br
   Copyright © 2025 Jay C Designer
   
   Correções específicas para efeitos de hover do catálogo e botões
============================================================================= */

/* CORREÇÃO 1: Botões - Garantindo que os efeitos de hover funcionem */
.btn {
    position: relative !important;
    overflow: visible !important;
    z-index: 1 !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
}

.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.2), transparent) !important;
    transition: left 0.5s ease !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

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

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    color: var(--white) !important;
    box-shadow: var(--shadow) !important;
}

.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lg) !important;
    background: linear-gradient(135deg, #9ac654, #3d5a0e) !important;
}

.btn-secondary {
    background: transparent !important;
    color: var(--primary-color) !important;
    border: 2px solid var(--primary-color) !important;
}

.btn-secondary:hover {
    background: var(--primary-color) !important;
    color: var(--white) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* CORREÇÃO ESPECÍFICA PARA BOTÕES DO HERO */
.hero .btn {
    position: relative !important;
    overflow: visible !important;
    z-index: 10 !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

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

.hero .btn-secondary:hover {
    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;
}

/* CORREÇÃO 2: Catálogo de Espécies - Cards principais */
.species-card {
    position: relative !important;
    overflow: visible !important;
    transition: all 0.3s ease !important;
    z-index: 1 !important;
}

.species-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: var(--shadow-lg) !important;
    z-index: 10 !important;
}

.species-image {
    position: relative !important;
    overflow: hidden !important;
}

.species-image img {
    transition: transform 0.5s ease !important;
}

.species-card:hover .species-image img {
    transform: scale(1.1) !important;
}

.species-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.species-card:hover .species-overlay {
    opacity: 0.9 !important;
}

.species-overlay i {
    font-size: 3rem !important;
    color: var(--white) !important;
    transform: scale(0) !important;
    transition: transform 0.3s ease 0.1s !important;
}

.species-card:hover .species-overlay i {
    transform: scale(1) !important;
}

/* CORREÇÃO 3: Catálogo de Espécies - Items do grid */
.species-item {
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    z-index: 1 !important;
    will-change: transform, box-shadow !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    isolation: isolate !important;
}

.species-item:hover {
    transform: translateY(-12px) scale(1.02) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2), 0 10px 30px rgba(140, 183, 63, 0.3) !important;
    z-index: 10 !important;
    border-color: rgba(140, 183, 63, 0.5) !important;
}

.species-icon {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    will-change: transform !important;
}

.species-item:hover .species-icon {
    transform: scale(1.15) rotate(5deg) !important;
    box-shadow: 0 15px 35px rgba(140, 183, 63, 0.4) !important;
}

.species-item:hover .species-icon i {
    transform: scale(1.1) !important;
    transition: transform 0.3s ease !important;
}

.species-item h3 {
    transition: color 0.3s ease !important;
}

.species-item:hover h3 {
    color: #8cb73f !important;
    transform: translateY(-2px) !important;
}

.species-item p {
    transition: color 0.3s ease !important;
}

.species-item:hover p {
    color: #555 !important;
}

.species-badge {
    transition: all 0.3s ease !important;
}

.species-item:hover .species-badge {
    transform: scale(1.05) !important;
    box-shadow: 0 5px 15px rgba(140, 183, 63, 0.4) !important;
}

/* CORREÇÃO 4: Botões de Filtro */
.filter-btn {
    position: relative !important;
    overflow: visible !important;
    transition: all 0.3s ease !important;
    z-index: 1 !important;
}

.filter-btn:hover,
.filter-btn.active {
    background: #8cb73f !important;
    border-color: #8cb73f !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(140, 183, 63, 0.3) !important;
}

/* CORREÇÃO 5: Botões "Solicite Informações" */
.contact-actions {
    overflow: visible !important;
    isolation: isolate !important;
}

.contact-actions .btn {
    position: relative !important;
    overflow: visible !important;
    z-index: 1 !important;
    transition: all 0.3s ease !important;
    transform: translateY(0) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

.contact-actions .btn-primary {
    background: #fff !important;
    color: #8cb73f !important;
    border: 2px solid #fff !important;
    font-weight: 600 !important;
}

.contact-actions .btn-primary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2) !important;
}

.contact-actions .btn-secondary {
    background: transparent !important;
    color: #fff !important;
    border: 2px solid #fff !important;
    font-weight: 600 !important;
}

.contact-actions .btn-secondary:hover {
    background: #fff !important;
    color: #8cb73f !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2) !important;
}

/* CORREÇÃO 5.1: Reset específico para estados ativos indesejados */
.contact-actions .btn:not(:hover):not(:focus):not(:active) {
    background: #fff !important;
    color: #8cb73f !important;
    transform: translateY(0) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

.contact-actions .btn-secondary:not(:hover):not(:focus):not(:active) {
    background: transparent !important;
    color: #fff !important;
}

/* CORREÇÃO 5.2: Desabilitar shimmer effect nos botões de contato */
.contact-actions .btn::before {
    display: none !important;
}

.contact-actions .btn:hover::before {
    display: none !important;
}

/* CORREÇÃO 5.3: Force reset para garantir estado inicial correto */
.contact-card .contact-actions .btn {
    animation: none !important;
    transition: all 0.3s ease !important;
}

.contact-card .contact-actions .btn-primary {
    background-color: #fff !important;
    background-image: none !important;
    background: #fff !important;
    color: #8cb73f !important;
    border-color: #fff !important;
}

.contact-card .contact-actions .btn-secondary {
    background-color: transparent !important;
    background-image: none !important;
    background: transparent !important;
    color: #fff !important;
    border-color: #fff !important;
}

/* CORREÇÃO 6: Lista de espécies no catálogo completo */
.species-list li {
    position: relative !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.species-list li:hover {
    color: #8cb73f !important;
    transform: translateX(5px) !important;
    font-weight: 600 !important;
}

/* CORREÇÃO 7: Garantia de funcionamento em todos os navegadores */
.btn, .species-card, .species-item, .filter-btn, .contact-actions .btn {
    -webkit-transition: all 0.3s ease !important;
    -moz-transition: all 0.3s ease !important;
    -ms-transition: all 0.3s ease !important;
    -o-transition: all 0.3s ease !important;
    transition: all 0.3s ease !important;
}

.btn:hover, .species-card:hover, .species-item:hover, .filter-btn:hover {
    -webkit-transform: translateY(-2px) !important;
    -moz-transform: translateY(-2px) !important;
    -ms-transform: translateY(-2px) !important;
    -o-transform: translateY(-2px) !important;
    transform: translateY(-2px) !important;
}

/* CORREÇÃO 8: Prevenção de conflitos com overflow */
.species, .catalog, .contact-card, .services {
    overflow: visible !important;
}

.species-grid, .catalog-grid, .contact-actions, .filter-buttons {
    overflow: visible !important;
}

/* CORREÇÃO 8.1: Contenção de efeitos visuais */
.catalog-grid .species-item {
    contain: layout style !important;
    overflow: hidden !important;
}

.catalog-grid .species-item * {
    contain: layout !important;
}

.catalog-grid .species-item:hover {
    contain: none !important;
}

/* CORREÇÃO 9: Z-index hierárquico para evitar sobreposições */
.catalog-grid {
    isolation: isolate !important;
    position: relative !important;
    z-index: 1 !important;
}

.species-item {
    isolation: isolate !important;
    position: relative !important;
    z-index: 2 !important;
}

.species-card:hover,
.species-item:hover {
    z-index: 100 !important;
    isolation: isolate !important;
}

.btn:hover {
    z-index: 50 !important;
}

.filter-btn:hover {
    z-index: 25 !important;
}

/* CORREÇÃO 10: Touch devices - garantir hover em dispositivos móveis */
@media (hover: hover) and (pointer: fine) {
    /* Efeitos de hover apenas para dispositivos com cursor */
    .species-item:hover {
        transform: translateY(-12px) scale(1.02) !important;
    }
}

@media (hover: none) and (pointer: coarse) {
    /* Adaptações para dispositivos touch */
    .species-item:active,
    .species-item:focus {
        transform: translateY(-8px) scale(1.01) !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 25px rgba(140, 183, 63, 0.25) !important;
        outline: 2px solid rgba(140, 183, 63, 0.3) !important;
        outline-offset: 2px !important;
    }
    
    .species-item:active .species-icon,
    .species-item:focus .species-icon {
        transform: scale(1.1) !important;
    }
    
    .filter-btn:active,
    .filter-btn:focus {
        background: #8cb73f !important;
        border-color: #8cb73f !important;
        color: #fff !important;
        transform: translateY(-1px) !important;
    }
}

/* CORREÇÃO 11: Melhoramento da performance */
.species-item,
.species-icon,
.species-badge {
    will-change: transform, box-shadow !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
}

/* CORREÇÃO 12: Garantia de acessibilidade */
.species-item:focus-visible {
    outline: 3px solid #8cb73f !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 5px rgba(140, 183, 63, 0.2) !important;
}

.species-item:focus-visible:not(:hover) {
    transform: translateY(-5px) !important;
    transition: all 0.2s ease !important;
}

/* CORREÇÃO 13: Smooth animations para reduzir jitter */
.catalog-grid {
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
}

.species-item * {
    pointer-events: none !important;
}

.species-item {
    pointer-events: all !important;
}
@media (hover: none) and (pointer: coarse) {
    .species-card:active,
    .species-item:active,
    .btn:active,
    .filter-btn:active {
        transform: translateY(-5px) !important;
        box-shadow: var(--shadow-lg) !important;
    }
    
    .species-card:active .species-overlay {
        opacity: 0.9 !important;
    }
    
    .species-card:active .species-overlay i {
        transform: scale(1) !important;
    }
}

/* CORREÇÃO 11: Animações suaves para todos os pseudo-elementos */
.btn::before {
    will-change: transform !important;
}

/* CORREÇÃO 12: Garantia de que as variáveis CSS estejam funcionando */
:root {
    --primary-color: #8cb73f;
    --secondary-color: #36520d;
    --white: #ffffff;
    --black: #000000;
    --gray-light: #f8f9fa;
    --gray: #6c757d;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
    --border-radius: 8px;
}