/* ==================== RESET & BASE ==================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { -webkit-font-smoothing: antialiased; }

/* ==================== SCROLLBAR ==================== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f5f5f5; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #18B800; }

/* ==================== NAVBAR ==================== */
#navbar {
    background: transparent;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Sobre el hero: links blancos, logo invertido, hamburguesa blanca */
#navbar .nav-link { color: #fff; }
#navbar .nav-link:hover { color: #8BEF4A; }
#navbar .logo-img { filter: brightness(0) invert(1); }
#navbar .hamburger-line { background: #fff; }

/* Al hacer scroll: fondo blanco, links oscuros, logo normal */
#navbar.scrolled {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.06);
}
#navbar.scrolled .nav-link { color: #525252; }
#navbar.scrolled .nav-link:hover { color: #0F8C00; }
#navbar.scrolled .logo-img { filter: none; }
#navbar.scrolled .hamburger-line { background: #1a1a1a; }

.hamburger-line { transform-origin: center; transition: all 0.3s; }
.menu-open .hamburger-line:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.menu-open .hamburger-line:nth-child(2) { opacity: 0; }
.menu-open .hamburger-line:nth-child(3) { width: 1.5rem; transform: translateY(-4px) rotate(-45deg); }

/* ==================== HERO ==================== */
.hero-bg {
    animation: heroZoom 25s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes heroZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
}

/* ==================== ANIMATIONS ==================== */
.animate-fade-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.8s ease forwards;
}
.delay-100 { animation-delay: 0.15s; }
.delay-200 { animation-delay: 0.3s; }
.delay-300 { animation-delay: 0.45s; }

@keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
}

.animate-pulse-slow { animation: pulseSlow 4s ease-in-out infinite; }
@keyframes pulseSlow {
    0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); }
}

.animate-bounce-slow { animation: bounceSlow 2s ease-in-out infinite; }
@keyframes bounceSlow {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

.animate-scroll-dot { animation: scrollDot 1.5s ease-in-out infinite; }
@keyframes scrollDot {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(8px); opacity: 0; }
}

/* ==================== REVEAL ANIMATIONS ==================== */
.reveal, .reveal-left, .reveal-right {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal { transform: translateY(40px); }
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }

.reveal.active, .reveal-left.active, .reveal-right.active {
    opacity: 1;
    transform: translate(0);
}

/* ==================== PRODUCT CARDS ==================== */
.product-card {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.product-card.visible {
    opacity: 1;
    transform: translateY(0);
}
.product-card.hiding {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
    pointer-events: none;
    position: absolute;
    visibility: hidden;
}

/* ==================== FILTER BUTTONS ==================== */
.filter-btn { cursor: pointer; transition: all 0.3s; }
.filter-btn.active {
    background: #18B800 !important;
    border-color: #18B800 !important;
    color: #000 !important;
}
.filter-btn.active span { color: #000 !important; font-weight: 600; }

/* ==================== WHATSAPP BUTTON ==================== */
.animate-wa-ping {
    animation: waPing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
    z-index: -1;
}
@keyframes waPing {
    0% { transform: scale(1); opacity: 0.5; }
    75%, 100% { transform: scale(1.6); opacity: 0; }
}

/* ==================== MODAL ==================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    pointer-events: none;
    visibility: hidden;
}
.modal-overlay.is-open {
    pointer-events: auto;
    visibility: visible;
}

.modal-backdrop-bg {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.modal-overlay.is-open .modal-backdrop-bg {
    opacity: 1;
}

.modal-content {
    position: relative;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 25px 60px rgba(0,0,0,0.2);
    max-width: 56rem;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(60px) scale(0.9);
    opacity: 0;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.4s ease;
}
.modal-overlay.is-open .modal-content {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.modal-content .modal-media {
    transform: translateX(-30px);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.12s,
                opacity 0.5s ease 0.12s;
}
.modal-overlay.is-open .modal-content .modal-media {
    transform: translateX(0);
    opacity: 1;
}

.modal-content .modal-info > * {
    transform: translateY(15px);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.4s ease;
}
.modal-overlay.is-open .modal-content .modal-info > *:nth-child(1) { transform: translateY(0); opacity: 1; transition-delay: 0.18s; }
.modal-overlay.is-open .modal-content .modal-info > *:nth-child(2) { transform: translateY(0); opacity: 1; transition-delay: 0.24s; }
.modal-overlay.is-open .modal-content .modal-info > *:nth-child(3) { transform: translateY(0); opacity: 1; transition-delay: 0.30s; }
.modal-overlay.is-open .modal-content .modal-info > *:nth-child(4) { transform: translateY(0); opacity: 1; transition-delay: 0.36s; }
.modal-overlay.is-open .modal-content .modal-info > *:nth-child(5) { transform: translateY(0); opacity: 1; transition-delay: 0.42s; }

/* Gallery slides */
.gallery-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.gallery-slide.active { opacity: 1; }
.gallery-slide img,
.gallery-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (min-width: 768px) {
    .gallery-slide img,
    .gallery-slide video {
        border-top-left-radius: 1rem;
        border-bottom-left-radius: 1rem;
    }
}
@media (max-width: 767px) {
    .gallery-slide img,
    .gallery-slide video {
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
    }
}

.gallery-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    padding: 0;
}
.gallery-dot.active {
    background: #fff;
    transform: scale(1.3);
}

/* ==================== FORM INPUTS ==================== */
input::placeholder, textarea::placeholder { color: #999; }
select option { background: #fff; color: #1a1a1a; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    .hero-bg { animation: none; }
    #whatsapp-float { bottom: 1rem; right: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; }
    .product-card { opacity: 1; transform: none; }
}