/* =========================================================
   NAVBAR — Alisios Van
   ---------------------------------------------------------
   - Transparente sobre el hero, opaca al hacer scroll
   - Logo con alturas controladas (móvil/desktop/sticky)
   - Menú móvil por encima del hero con fondo y sombra
   - Tipografías y colores legibles en todas las vistas
   ========================================================= */

/* 1) Variables (ajusta a tu gusto) */
:root{
    --header-bg-rgb: 15,98,119;   /* color “mar” (R,G,B) para el header */
    --nav-logo-h-mobile: 28px;    /* altura del logo en móvil */
    --nav-logo-h-desktop: 64px;   /* altura del logo en desktop */
    --nav-logo-h-sticky: 56px;    /* altura del logo al hacer scroll (desktop) */
}

/* 2) Base del navbar: fijo y transparente sobre el hero */
.navbar{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1100;                             /* por encima del hero */
    background: rgba(var(--header-bg-rgb), 0); /* transparente inicial */
    transition: background .25s ease, box-shadow .25s ease;
}

/* 3) Estado sticky: fondo opaco y ligera sombra */
.navbar.is-sticky{
    background: rgb(var(--header-bg-rgb));
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

/* 4) Colores de marca/enlaces (blanco para buen contraste) */
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .instagram-link{
    color: #fff !important;
}
.navbar .nav-link{ font-size: 1rem; }        /* tamaño de enlace más razonable */
.navbar .nav-link:hover,
.navbar .instagram-link:hover{
    color:#fff !important;
    text-decoration: none;
}

/* 5) Logo: caja contenedora con altura controlada y el img ajustado */
.brand-logo-box{
    height: var(--nav-logo-h-mobile);
    display: inline-block;
}
@media (min-width: 992px){
    .brand-logo-box{ height: var(--nav-logo-h-desktop); }
    .navbar.is-sticky .brand-logo-box{ height: var(--nav-logo-h-sticky); }
}
.brand-logo{
    display: block;
    height: 100%;
    width: auto;
    object-fit: contain; /* mantiene proporción del logo */
}

/* 6) Botón hamburguesa (blanco siempre) */
.navbar-toggler{ border: 0; }
.navbar-toggler-icon{
    background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* 7) Menú móvil: que no quede debajo del hero (fondo + sombra al abrir) */
@media (max-width: 991.98px){
    .navbar .navbar-collapse.collapse.show{
        background: rgb(var(--header-bg-rgb));
        box-shadow: 0 12px 24px rgba(0,0,0,.18);
        padding: .75rem 1rem;
    }
    .navbar .nav-link{
        padding: .5rem .25rem;
    }
}

/* 8)Ajuste del brand para alinear verticalmente el logo */
.navbar .navbar-brand{
    display: flex;
    align-items: center;
    padding: .25rem 0; /* reduce aire vertical del brand */
}

/* El fondo azul también cuando el menú está abriéndose (.collapsing)
   y cuando está abierto (.show). Además, si el nav tiene .menu-open,
   forzamos el mismo estilo que sticky para evitar parpadeos. */
.navbar.is-sticky,
.navbar.menu-open{
    background: rgb(var(--header-bg-rgb));
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

/* Móvil: el panel del menú debe tener fondo azul desde el primer frame */
@media (max-width: 991.98px){
    .navbar .navbar-collapse.collapsing,
    .navbar .navbar-collapse.collapse.show{
        background: rgb(var(--header-bg-rgb));
        box-shadow: 0 12px 24px rgba(0,0,0,.18);
        padding: .75rem 1rem;
    }
}

/* Si quieres que NO haya transición al abrir el menú (sin fade),
   puedes anular la transición del nav solo cuando el menú está abierto. */
.navbar.menu-open{
    transition: box-shadow .25s ease; /* sin transición de background */
}

button:hover, .btn:hover {
    background-color: unset;
}

/* ============================
   Nav links: hover + activo
   ============================ */

/* Base */
.navbar .nav-link{
    position: relative;
    color: #fff !important;           /* ya lo tienes así */
    font-weight: 500;
    padding: .5rem .75rem;            /* algo más de aire para el hover */
    border-radius: 999px;             /* para el “pill” sutil */
    transition: background .2s ease, color .2s ease;
}

/* Subrayado animado desde el centro */
.navbar .nav-link::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -.2rem;                   /* ajusta según tu línea base */
    width: 0;
    height: 2px;
    background: currentColor;         /* usa el color del texto (blanco ahora) */
    transform: translateX(-50%);
    opacity: .8;
    transition: width .25s ease, opacity .2s ease;
}

/* Hover/focus: subrayado + pill sutil */
.navbar .nav-link:hover,
.navbar .nav-link:focus-visible{
    background: rgba(255,255,255,.12); /* “pill” suave */
    text-decoration: none;
}
.navbar .nav-link:hover::after,
.navbar .nav-link:focus-visible::after{
    width: 100%;
    opacity: 1;
}

/* Activo (la página actual): más peso y subrayado fijo */
.navbar .nav-link.active{
    font-weight: 700;
    background: rgba(255,255,255,.16); /* un pelín más marcado que el hover */
}
.navbar .nav-link.active::after{
    width: 100%;
    opacity: 1;
}

/* En móvil el fondo azul del collapse ya existe; mantenemos el pill */
@media (max-width: 991.98px){
    .navbar .nav-link{ padding: .6rem .75rem; }
}