

.je-shot-header {
    position: relative;

    z-index: 1020;

    background: #ffffff;

    font-family:
        "DM Sans",
        Inter,
        Arial,
        sans-serif;
}


/* ==========================================================
   FRANJA CELESTE SUPERIOR
   ========================================================== */

.je-shot-header
.je-shot-topbar {

    background: #86cbe7;

    padding: 8px 0;
}


.je-shot-header
.je-location-pill {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    background: #0d6efd;

    color: #ffffff !important;

    padding:
        7px 14px;

    border-radius:
        999px;

    font-size:
        .85rem;

    font-weight:
        500;

    text-decoration:
        none;

    box-shadow:
        0 0 0 9px
        rgba(13,110,253,.06);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.je-shot-header
.je-location-pill:hover {

    color:
        #ffffff !important;

    transform:
        translateY(-1px);

    box-shadow:
        0 0 0 10px
        rgba(13,110,253,.09);
}


/* ==========================================================
   NAVBAR BLANCO
   ========================================================== */

.je-shot-header
.je-navbar-shell {

    background:
        #ffffff;

    border-bottom:
        1px solid
        rgba(5,31,79,.15);
}


.je-shot-header
.navbar {

    min-height:
        148px;

    padding:
        14px 0;
}


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

.je-shot-header
.navbar-brand img {

    width:
        164px;

    height:
        118px;

    object-fit:
        contain;

    display:
        block;
}


/* ==========================================================
   BOTÓN MÓVIL
   ========================================================== */

.je-shot-header
.navbar-toggler {

    border:
        1px solid
        rgba(13,110,253,.25);

    color:
        #0d6efd;

    box-shadow:
        none !important;
}


.je-shot-header
.navbar-toggler
.bi {

    font-size:
        1.7rem;
}


/* ==========================================================
   MENÚ ROSADO CENTRAL
   ========================================================== */

.je-shot-header
.je-menu-panel {

    background:
        #f6b2e8;

    border-radius:
        11px;

    padding:
        0 18px;

    align-items:
        center;

    white-space:
        nowrap;
}


.je-shot-header
.je-menu-panel
.nav-link {

    position:
        relative;

    color:
        #111111 !important;

    font-weight:
        700;

    padding:
        14px 12px !important;

    line-height:
        1.1;

    text-align:
        center;

    transition:
        color .2s ease;
}


/* Línea azul */

.je-shot-header
.je-menu-panel
.nav-link::after {

    content: "";

    position:
        absolute;

    left:
        50%;

    bottom:
        0;

    width:
        0;

    height:
        3px;

    background:
        #0d6efd;

    transform:
        translateX(-50%);

    transition:
        width .22s ease;

    border-radius:
        3px;
}


.je-shot-header
.je-menu-panel
.nav-link:hover,

.je-shot-header
.je-menu-panel
.nav-link.active {

    color:
        #0d6efd !important;
}


.je-shot-header
.je-menu-panel
.nav-link:hover::after,

.je-shot-header
.je-menu-panel
.nav-link.active::after {

    width:
        72%;
}


/* ==========================================================
   LLAMAR AHORA
   ========================================================== */

.je-shot-header
.je-call-btn {

    min-width:
        152px;

    min-height:
        66px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    background:
        #0d397d;

    color:
        #ffffff !important;

    border:
        0;

    border-radius:
        999px;

    padding:
        10px 24px;

    text-decoration:
        none;

    font-size:
        1rem;

    font-weight:
        500;

    line-height:
        1.25;

    box-shadow:
        0 8px 18px
        rgba(6,36,82,.35);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.je-shot-header
.je-call-btn:hover {

    color:
        #ffffff !important;

    background:
        #082f69;

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 22px
        rgba(6,36,82,.42);
}


.je-shot-header
.je-call-btn
.bi {

    font-size:
        1.15rem;
}


/* ==========================================================
   LAPTOPS MEDIANAS
   ========================================================== */

@media
(max-width: 1199.98px)
and
(min-width: 992px) {

    .je-shot-header
    .je-menu-panel {

        padding:
            0 8px;
    }


    .je-shot-header
    .je-menu-panel
    .nav-link {

        font-size:
            .9rem;

        padding:
            13px 8px !important;
    }


    .je-shot-header
    .je-call-btn {

        min-width:
            128px;

        padding:
            9px 16px;
    }


    .je-shot-header
    .navbar-brand img {

        width:
            145px;

        height:
            104px;
    }
}


/* ==========================================================
   TABLET / MÓVIL
   ========================================================== */

@media
(max-width: 991.98px) {

    .je-shot-header
    .navbar {

        min-height:
            auto;

        padding:
            10px 0;
    }


    .je-shot-header
    .navbar-brand img {

        width:
            130px;

        height:
            92px;
    }


    .je-shot-header
    .navbar-collapse {

        padding:
            12px 0 6px;
    }


    .je-shot-header
    .je-menu-panel {

        display:
            flex;

        align-items:
            stretch;

        padding:
            8px 14px;

        margin:
            4px 0 12px;
    }


    .je-shot-header
    .je-menu-panel
    .nav-link {

        text-align:
            left;

        padding:
            11px 8px !important;
    }


    .je-shot-header
    .je-menu-panel
    .nav-link::after {

        left:
            8px;

        transform:
            none;
    }


    .je-shot-header
    .je-menu-panel
    .nav-link:hover::after,

    .je-shot-header
    .je-menu-panel
    .nav-link.active::after {

        width:
            46px;
    }


    .je-shot-header
    .je-call-btn {

        min-width:
            0;

        min-height:
            52px;

        padding:
            8px 20px;

        margin-left:
            0 !important;
    }


    .je-shot-header
    .je-call-btn br {

        display:
            none;
    }
}


/* ==========================================================
   MÓVILES PEQUEÑOS
   ========================================================== */

@media
(max-width: 575.98px) {

    .je-shot-header
    .navbar-brand img {

        width:
            112px;

        height:
            80px;
    }


    .je-shot-header
    .je-menu-panel {

        border-radius:
            9px;
    }


    .je-shot-header
    .je-call-btn {

        width:
            100%;
    }
}




/* HEADER-ENTRY-ANIMATION:START */

@keyframes jeHeaderFadeSlideDown {

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

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


/* Franja celeste */

.je-shot-header .je-shot-topbar {

    animation:
        jeHeaderFadeSlideDown
        .6s
        ease
        both;
}


/* Barra blanca + menú */

.je-shot-header .je-navbar-shell {

    animation:
        jeHeaderFadeSlideDown
        .7s
        ease
        both;

    animation-delay:
        .06s;
}


/* Logo */

.je-shot-header .navbar-brand img {

    animation:
        jeHeaderLogoEnter
        .7s
        cubic-bezier(.2,.8,.2,1)
        both;

    animation-delay:
        .12s;
}


@keyframes jeHeaderLogoEnter {

    from {
        opacity: 0;
        transform:
            translateY(-8px)
            scale(.96);
    }

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


/* Menú central */

.je-shot-header .je-menu-panel {

    animation:
        jeHeaderMenuEnter
        .65s
        cubic-bezier(.2,.8,.2,1)
        both;

    animation-delay:
        .16s;
}


@keyframes jeHeaderMenuEnter {

    from {
        opacity: 0;
        transform:
            translateY(-7px);
    }

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


/* Botón llamar */

.je-shot-header .je-call-btn {

    animation:
        jeHeaderCallEnter
        .65s
        cubic-bezier(.2,.8,.2,1)
        both;

    animation-delay:
        .20s;
}


@keyframes jeHeaderCallEnter {

    from {
        opacity: 0;
        transform:
            translateX(12px)
            scale(.96);
    }

    to {
        opacity: 1;
        transform:
            translateX(0)
            scale(1);
    }
}


/* ==========================================================
   AL TOCAR / PASAR SOBRE LOS ENLACES
   ========================================================== */

.je-shot-header
.je-menu-panel
.nav-link {

    transition:
        color .22s ease,
        transform .22s ease !important;
}


.je-shot-header
.je-menu-panel
.nav-link:hover {

    transform:
        translateY(-2px);
}


.je-shot-header
.je-menu-panel
.nav-link:active {

    transform:
        translateY(1px)
        scale(.97);
}


/* La línea azul aparece suavemente */

.je-shot-header
.je-menu-panel
.nav-link::after {

    transition:
        width .30s
        cubic-bezier(.2,.8,.2,1)
        !important;
}


/* ==========================================================
   ACCESIBILIDAD
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .je-shot-header .je-shot-topbar,
    .je-shot-header .je-navbar-shell,
    .je-shot-header .navbar-brand img,
    .je-shot-header .je-menu-panel,
    .je-shot-header .je-call-btn {

        animation:
            none !important;
    }


    .je-shot-header
    .je-menu-panel
    .nav-link {

        transition:
            none !important;
    }
}

/* HEADER-ENTRY-ANIMATION:END */


