/* Encabezado maestro:
   referencia visual de Nuestro Enfoque */

@keyframes fadeSlideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes pulseBlue {

    0% {
        box-shadow:
            0 0 0 0
            rgba(13,110,253,.35);
    }

    70% {
        box-shadow:
            0 0 0 12px
            rgba(13,110,253,0);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(13,110,253,0);
    }
}


.topbar {
    animation:
        fadeSlideDown
        .6s ease;

    font-size:
        .9rem;
}


.cta-location {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    background:
        #0d6efd;

    color:
        #fff !important;

    padding:
        6px 14px;

    border-radius:
        50px;

    font-size:
        .85rem;

    font-weight:
        500;

    text-decoration:
        none;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

    animation:
        pulseBlue
        3s infinite;
}


.cta-location:hover {

    transform:
        scale(1.05);

    color:
        #fff !important;

    text-decoration:
        none;
}


.nav-bar {

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

    backdrop-filter:
        blur(8px);

    box-shadow:
        0 4px 18px
        rgba(
            0,
            0,
            0,
            .06
        );

    animation:
        fadeSlideDown
        .7s ease;

    transition:
        all .35s ease;
}


.navbar-scrolled {

    box-shadow:
        0 6px 24px
        rgba(
            0,
            0,
            0,
            .1
        );

    padding-top:
        2px;

    padding-bottom:
        2px;
}


.navbar-brand img {

    transition:
        transform
        .35s ease;
}


.navbar-brand:hover img {

    transform:
        scale(1.06);
}


.navbar-nav .nav-link {

    font-weight:
        500;

    position:
        relative;

    padding:
        .6rem 1rem;

    transition:
        color .25s ease;
}


.navbar-nav .nav-link::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        0;

    width:
        0;

    height:
        2px;

    background:
        #0d6efd;

    transition:
        all .3s ease;

    transform:
        translateX(-50%);
}


.navbar-nav
.nav-link:hover::after,

.navbar-nav
.nav-link.active::after {

    width:
        70%;
}


.navbar-nav
.nav-link:hover {

    color:
        #0d6efd;
}


@media (
    max-width: 991px
) {

    .navbar-nav {

        padding-top:
            15px;
    }

    .navbar-nav
    .nav-link {

        padding:
            .7rem 0;
    }
}