﻿.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    z-index: 1000;
    display: flex;
    align-items: center;
    background-color: transparent;
    transition: background-color var(--trans-media), height var(--trans-media), box-shadow var(--trans-media);
}

    .header.header-scrolled {
        height: var(--header-height-scroll);
        background-color: rgba(250, 247, 240, 0.92);
        backdrop-filter: blur(10px);
        box-shadow: var(--sombra-suave);
    }

    .header .contenedor {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

.header-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-titulos);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--color-verde-oscuro);
}

.header.header-scrolled .header-logo,
.header:not(.header-scrolled) .header-logo {
    color: var(--color-verde-oscuro);
}

.header-nav {
    display: flex;
    align-items: center;
    gap: var(--espacio-md);
}

    .header-nav a {
        position: relative;
        font-weight: 500;
        font-size: 0.95rem;
        color: var(--color-verde-oscuro);
        padding: 0.4rem 0;
    }

        .header-nav a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 0%;
            height: 2px;
            background-color: var(--color-dorado);
            transition: width var(--trans-media);
        }

        .header-nav a:hover::after,
        .header-nav a.activo::after {
            width: 100%;
        }

.header-cta {
    display: flex;
    align-items: center;
    gap: var(--espacio-sm);
}

/* Menú hamburguesa (móvil) */
.header-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

    .header-toggle span {
        width: 24px;
        height: 2px;
        background-color: var(--color-verde-oscuro);
        transition: transform var(--trans-rapida), opacity var(--trans-rapida);
    }

@media (max-width: 900px) {
    .header-nav {
        position: fixed;
        top: var(--header-height-scroll);
        left: 0;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background-color: var(--color-crema);
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--trans-media);
        box-shadow: var(--sombra-suave);
    }

        .header-nav.abierto {
            max-height: 400px;
        }

        .header-nav a {
            width: 100%;
            padding: var(--espacio-sm) var(--espacio-md);
            border-bottom: 1px solid var(--color-borde);
        }

    .header-toggle {
        display: flex;
    }

    .header-cta .btn-outline {
        display: none;
    }
}
