/* ==========================================================================
   NAVBAR.CSS — Constructora Almonacid
   Transparente sobre hero → negro difuminado al hacer scroll.
   Letras blancas siempre. Hamburguesa derecha en mobile.
   ========================================================================== */


/* ----------------------------------------------------------------
   1. CONTENEDOR PRINCIPAL
   ---------------------------------------------------------------- */
.navbar-ca {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1050;
    background-color: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

/* Al salir del hero, JS agrega .scrolled */
.navbar-ca.scrolled {
    background-color: rgb(27, 26, 26);
    border-bottom: 1px solid rgba(255, 255, 255, 0.091);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Contenedor interno */
.navbar-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    min-height: var(--navbar-h);
}


/* ----------------------------------------------------------------
   2. BRAND — Nombre de la empresa
   ---------------------------------------------------------------- */
.navbar-brand-ca {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    flex-shrink: 0;
    color: #ffffff;
}

.navbar-nombre {
    font-family: var(--fuente-titulo);
    font-size: 1.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ffffff;
}

.navbar-logo-img {
    height: 28px;
    width: auto;
}


/* ----------------------------------------------------------------
   3. BOTÓN HAMBURGUESA — Solo mobile, lado derecho
      Sin animación a X: se cierra haciendo clic afuera o con scroll.
   ---------------------------------------------------------------- */
.navbar-toggler {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: background-color var(--trans-rapida);
}

.navbar-toggler:hover,
.navbar-toggler:focus-visible {
    background-color: rgba(255, 255, 255, 0.1);
    outline: none;
}

.toggler-bar {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #ffffff;
    border-radius: 2px;
}


/* ----------------------------------------------------------------
   4. MENÚ MOBILE — Panel lateral derecho, 49vw del ancho de pantalla
   [CORREGIDO] Comentario decía "< 35%" pero el valor real es 49vw.
   [CORREGIDO] Eliminada la línea min-width comentada que era ruido muerto.
   ---------------------------------------------------------------- */
.navbar-menu {
    display: none;
    position: fixed;
    top: var(--navbar-h);
    right: 0;
    width: 49vw;
    max-width: 220px;
    background-color: rgb(61, 58, 67); 
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 0.6rem 0.6rem 0.9rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.1rem;
    list-style: none;
    margin: 0;
    border-left: 1px solid rgba(34, 28, 28, 0.092);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0 0 0 10px;
    z-index: 1049;
}

.navbar-menu.open {
    display: flex;
}


/* ----------------------------------------------------------------
   5. ENLACES — Blancos sobre fondo negro
   ---------------------------------------------------------------- */
.nav-link-ca {
    display: block;
    font-family: var(--fuente-cuerpo);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.65rem 0.85rem;
    color: #ffffff;
    border-radius: 7px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color var(--trans-rapida);
}

.nav-link-ca:hover,
.nav-link-ca:focus {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
    outline: none;
}

/*
    Activo: píldora blanca con texto negro (mobile).
    [CORREGIDO] Selector ampliado a .navbar-menu .nav-link-ca.active
    para subir especificidad (0,3,0) y eliminar los !important.
    El resultado visual es idéntico.
*/
.navbar-menu .nav-link-ca.active {
    color: #000000;
    background-color: #ffffff;
    font-weight: 700;
}


/* ----------------------------------------------------------------
   6. DESKTOP (≥ 992px) — Menú horizontal siempre visible
   ---------------------------------------------------------------- */
@media (min-width: 992px) {

    /* Contenedor principal de la barra */
    .navbar-inner {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        /*
            [CORREGIDO] Eliminado gap: 3rem.
            Con margin-left: auto en .navbar-menu, el gap del contenedor
            queda ignorado — el auto consume todo el espacio libre primero.
            Un solo mecanismo de separación es más claro y predecible.
        */
        padding: 0;
        min-height: var(--navbar-h-desk);
        width: 100%;
    }

    /* Ocultar hamburguesa */
    .navbar-toggler {
        display: none;
    }

    /*
        Menú horizontal — siempre visible.
        [CORREGIDO] Selector ampliado a .navbar-ca .navbar-menu (especificidad 0,2,0)
        para superar el display: none base (0,1,0) sin necesitar !important.
        Supera también a .navbar-menu.open (0,2,0) por orden de cascada,
        garantizando que el menú nunca quede oculto en desktop aunque el JS
        haya tocado la clase .open.
    */
    .navbar-ca .navbar-menu {
        display: flex;
        position: static;
        background-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 0;
        flex-direction: row;
        align-items: center;
        gap: 0.25rem;
        border: none;
        border-radius: 0;
        box-shadow: none;
        width: auto;
        min-width: unset;
        margin-left: auto;
        max-width: 600px;
        justify-content: flex-end;
    }

    /* Nombre de la empresa */
    .navbar-nombre {
        font-size: 1.9rem;
        flex-shrink: 0;
    }

    /* Botones del menú */
    .nav-link-ca {
        font-size: 0.85rem;
        padding: 0.4rem 1rem;
        white-space: nowrap;
    }

    .nav-link-ca:hover,
    .nav-link-ca:focus {
        background-color: rgba(255, 255, 255, 0.1);
    }

    /*
        Activo en desktop: píldora oscura con texto blanco.
        [CORREGIDO] Mismo selector extendido que la regla base.
        Al tener especificidad (0,3,0) igual a la regla mobile
        pero aparecer después en el archivo, esta gana por cascada.
        Sin !important.
    */
    .navbar-menu .nav-link-ca.active {
        color: #ffffff;
        background-color: #302d2dc5;
    }
}