

/* ==========================================================
   LOGO
   MISMO TAMAÑO VISUAL QUE EL ENCABEZADO NORMAL
   ========================================================== */

.je-shot-header .navbar-brand,
.je-shot-header .navbar-brand.p-0 {

    display: flex !important;

    align-items: center !important;

    min-width: 164px !important;
}


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

    width: 164px !important;

    height: 118px !important;

    min-width: 164px !important;

    max-width: 164px !important;

    min-height: 118px !important;

    max-height: 118px !important;

    object-fit: contain !important;

    object-position: center !important;

    transform-origin:
        center center !important;

    transition:
        transform .35s ease,
        filter .35s ease !important;
}


/* Evitar que el CSS anterior lo achique */

@media (max-width: 991.98px) {

    .je-shot-header .navbar-brand,
    .je-shot-header .navbar-brand.p-0 {

        min-width:
            164px !important;
    }


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

        width:
            164px !important;

        height:
            118px !important;

        min-width:
            164px !important;

        max-width:
            164px !important;

        min-height:
            118px !important;

        max-height:
            118px !important;
    }
}


/* Solo pantallas extremadamente pequeñas */

@media (max-width: 360px) {

    .je-shot-header .navbar-brand,
    .je-shot-header .navbar-brand.p-0 {

        min-width:
            146px !important;
    }


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

        width:
            146px !important;

        height:
            105px !important;

        min-width:
            146px !important;

        max-width:
            146px !important;

        min-height:
            105px !important;

        max-height:
            105px !important;
    }
}


/* Movimiento igual al resto */

.je-shot-header .navbar-brand:hover img,
.je-shot-header .navbar-brand:focus-visible img {

    transform:
        scale(1.06) !important;
}


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

    transform:
        scale(.98) !important;
}


/* ==========================================================
   ESPECIALIDADES
   TRANSICIÓN DE CADA ÁREA
   ========================================================== */

body.page-especialidades
.specialty-card {

    position:
        relative;

    overflow:
        hidden;

    transform:
        translateY(0)
        scale(1);

    transition:
        transform
        .30s
        cubic-bezier(.2,.8,.2,1),

        box-shadow
        .30s ease,

        border-color
        .30s ease
        !important;

    animation:
        jeSpecialtyReveal
        .55s
        ease
        both;
}


/* Entrada progresiva */

body.page-especialidades
.row > div:nth-child(1)
.specialty-card {

    animation-delay:
        .05s;
}


body.page-especialidades
.row > div:nth-child(2)
.specialty-card {

    animation-delay:
        .10s;
}


body.page-especialidades
.row > div:nth-child(3)
.specialty-card {

    animation-delay:
        .15s;
}


body.page-especialidades
.row > div:nth-child(4)
.specialty-card {

    animation-delay:
        .20s;
}


body.page-especialidades
.row > div:nth-child(5)
.specialty-card {

    animation-delay:
        .25s;
}


body.page-especialidades
.row > div:nth-child(6)
.specialty-card {

    animation-delay:
        .30s;
}


/* Mouse / teclado */

body.page-especialidades
.specialty-card:hover,

body.page-especialidades
.specialty-card:focus-within {

    transform:
        translateY(-6px)
        scale(1.015);

    border-color:
        rgba(13,110,253,.28);

    box-shadow:
        0 18px 38px
        rgba(1,21,71,.13);
}


/* Al tocar en móvil */

body.page-especialidades
.specialty-card:active {

    transform:
        translateY(-2px)
        scale(.985);
}


/* Icono */

body.page-especialidades
.specialty-icon {

    transition:
        transform
        .32s
        cubic-bezier(.2,.8,.2,1),

        background-color
        .32s ease,

        color
        .32s ease,

        box-shadow
        .32s ease
        !important;
}


body.page-especialidades
.specialty-card:hover
.specialty-icon,

body.page-especialidades
.specialty-card:focus-within
.specialty-icon {

    transform:
        translateY(-2px)
        scale(1.10)
        rotate(-3deg);

    background:
        #0d6efd;

    color:
        #ffffff;

    box-shadow:
        0 8px 18px
        rgba(13,110,253,.24);
}


/* Flecha */

body.page-especialidades
.specialty-card
a
.bi-arrow-right {

    display:
        inline-block;

    transition:
        transform
        .25s ease;
}


body.page-especialidades
.specialty-card:hover
a
.bi-arrow-right,

body.page-especialidades
.specialty-card:focus-within
a
.bi-arrow-right {

    transform:
        translateX(4px);
}


@keyframes jeSpecialtyReveal {

    from {

        opacity:
            0;

        transform:
            translateY(18px)
            scale(.985);
    }


    to {

        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* ==========================================================
   BIENESTAR CORPORATIVO
   TRANSICIÓN DE LA IMAGEN PRINCIPAL
   ========================================================== */

body.page-empresas
.hero-empresa::before {

    transform:
        scale(1.015);

    transform-origin:
        center center;

    transition:
        transform
        .85s
        cubic-bezier(.2,.8,.2,1),

        filter
        .45s ease
        !important;

    animation:
        jeCompanyImageIn
        .90s
        ease
        both;
}


/* Movimiento suave sobre la imagen */

body.page-empresas
.hero-empresa:hover::before,

body.page-empresas
.hero-empresa:focus-within::before {

    transform:
        scale(1.055);

    filter:
        saturate(1.06)
        contrast(1.02);
}


/* Respuesta al tocar */

body.page-empresas
.hero-empresa:active::before {

    transform:
        scale(1.03);
}


/* Contenido del hero */

body.page-empresas
.hero-empresa-content {

    animation:
        jeCompanyContentIn
        .65s
        ease
        .10s
        both;
}


/* Botones del área */

body.page-empresas
.hero-empresa-content a,

body.page-empresas
.hero-empresa-content .btn {

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background-color .25s ease,
        color .25s ease
        !important;
}


body.page-empresas
.hero-empresa-content a:hover,

body.page-empresas
.hero-empresa-content .btn:hover,

body.page-empresas
.hero-empresa-content a:focus-visible,

body.page-empresas
.hero-empresa-content .btn:focus-visible {

    transform:
        translateY(-3px);
}


body.page-empresas
.hero-empresa-content a:active,

body.page-empresas
.hero-empresa-content .btn:active {

    transform:
        translateY(0)
        scale(.98);
}


@keyframes jeCompanyImageIn {

    from {

        opacity:
            .70;

        transform:
            scale(1.08);
    }


    to {

        opacity:
            1;

        transform:
            scale(1.015);
    }
}


@keyframes jeCompanyContentIn {

    from {

        opacity:
            0;

        transform:
            translateY(18px);
    }


    to {

        opacity:
            1;

        transform:
            translateY(0);
    }
}


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

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

    body.page-especialidades
    .specialty-card,

    body.page-especialidades
    .specialty-icon,

    body.page-especialidades
    .specialty-card
    a
    .bi-arrow-right,

    body.page-empresas
    .hero-empresa::before,

    body.page-empresas
    .hero-empresa-content,

    body.page-empresas
    .hero-empresa-content a,

    body.page-empresas
    .hero-empresa-content .btn,

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

        animation:
            none !important;

        transition:
            none !important;
    }
}

