/* ====================================
   HEADER YACHAY VERDE
==================================== */

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    padding:12px 8%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    z-index:1000;

    background:rgba(255,255,255,.88);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);

    transition:.4s ease;

}

/* Header al hacer scroll */

.header.scrolled{

    padding:8px 8%;

    background:rgba(255,255,255,.95);

    box-shadow:
    0 15px 35px rgba(0,0,0,.08);

}

/* ====================================
   LOGO
==================================== */

.logo{

    display:flex;

    align-items:center;

    gap:10px;

}

.logo img{

    height:48px;

    width:auto;

    transition:.4s ease;

}

.header.scrolled .logo img{

    height:42px;

}

/* ====================================
   NAVEGACIÓN
==================================== */

.navbar{

    display:flex;

    align-items:center;

    gap:25px;

}

.navbar a{

    position:relative;

    color:var(--oscuro);

    font-size:.90rem;

    font-weight:600;

    text-decoration:none;

    transition:.3s ease;

}

/* Línea animada */

.navbar a::after{

    content:''; 

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;
    height:3px;

    border-radius:20px;

    background:
    linear-gradient(
    90deg,
    var(--acento),
    var(--secundario)
    );

    transition:.35s ease;

}

.navbar a:hover{

    color:var(--secundario);

}

.navbar a:hover::after{

    width:100%;

}

/* ====================================
   BOTÓN HEADER
==================================== */

.btn-demo{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:10px 20px;

    border-radius:12px;

    color:white;

    font-size:.9rem;

    font-weight:600;

    background:
    linear-gradient(
    135deg,
    var(--acento),
    var(--secundario)
    );

    box-shadow:
    0 10px 25px rgba(34,197,94,.25);

    transition:.35s ease;

}

.btn-demo:hover{

    transform:
    translateY(-4px);

    box-shadow:
    0 18px 35px rgba(34,197,94,.35);

}

/* ====================================
   MENÚ MÓVIL
==================================== */

.menu-toggle{

    display:none;

    font-size:1.8rem;

    color:var(--oscuro);

    cursor:pointer;

}

/* ====================================
   EFECTO GLASS PREMIUM
==================================== */

.header::before{

    content:''; 

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    90deg,
    rgba(255,255,255,.05),
    rgba(255,255,255,.15),
    rgba(255,255,255,.05)
    );

    pointer-events:none;

}

/* ====================================
   ANIMACIÓN ENTRADA
==================================== */

.header{

    animation:
    headerFade .8s ease;

}

@keyframes headerFade{

    from{

        opacity:0;

        transform:
        translateY(-30px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}

/* ====================================
   HOVER LOGO
==================================== */

.logo img:hover{

    transform:
    scale(1.05);

    filter:
    drop-shadow(
    0 0 15px rgba(34,197,94,.35)
    );

}

/* ====================================
   BOTÓN FLOTANTE ACTIVO
==================================== */

.navbar a.active{

    color:var(--acento);

}

.navbar a.active::after{

    width:100%;

}

/* ====================================
   RESPONSIVE HEADER
==================================== */

@media(max-width:992px){

    .navbar{

        position:fixed;

        top:75px;

        right:-100%;

        width:280px;

        height:calc(100vh - 75px);

        background:white;

        flex-direction:column;

        align-items:flex-start;

        padding:40px 30px;

        gap:25px;

        transition:.4s ease;

        box-shadow:
        -10px 0 30px rgba(0,0,0,.08);

    }

    .navbar.active{

        right:0;

    }

    .menu-toggle{

        display:block;

    }

    /* Mantener btn-demo visible siempre */
    .btn-demo{
        display:flex;
    }

}

@media(max-width:768px){

    .header{

        padding:10px 5%;

    }

    .logo img{

        height:42px;

    }

}