/* =============================================
   Header Sticky con efecto fade - Liam Vercceli
   ============================================= */

.header-section {
    position: fixed !important;
    top: 36px; /* altura del topbar */
    left: 0;
    width: 100%;
    z-index: 9999;
    height: auto !important;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    box-shadow: none;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    transition:
        background 0.4s ease,
        backdrop-filter 0.4s ease,
        box-shadow 0.4s ease,
        padding 0.4s ease,
        top 0.3s ease;
}

/* Estado al hacer scroll: topbar se oculta, header sube */
.header-section.header-scrolled {
    top: 0;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.10);
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Ocultar topbar al hacer scroll */
.lv-topbar {
    transition: transform 0.35s ease, opacity 0.35s ease;
}
body.body-scrolled .lv-topbar {
    transform: translateY(-100%);
    opacity: 0;
}

/* Compensar espacio fijo: topbar(36) + header(~60) */
body {
    padding-top: 132px;
}

/* Neutralizar padding del inner-header para no acumular */
.header-section .inner-header {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Logo más pequeño al hacer scroll */
.header-section .lv-logo-link img,
.header-section .logo img {
    transition: max-height 0.3s ease;
    max-height: 52px;
}

.header-section.header-scrolled .lv-logo-link img,
.header-section.header-scrolled .logo img {
    max-height: 38px;
}

/* Links del menú */
.header-section .main-menu ul li a {
    transition: color 0.3s ease;
}

@media (max-width: 767px) {
    .header-section { top: 30px; }
    body { padding-top: 110px; }
}