/*==================================================
01. VARIABLES
==================================================*/

:root{

    /*==============================
    COLORES
    ==============================*/

    --bv-color-primary:#081c72;
    --bv-color-secondary:#0A3875;

    --bv-color-white:#FFFFFF;

    --bv-color-card:#F2EEE3;

    --bv-color-text:#FFFFFF;

    --bv-color-title:#FFFFFF;

    --bv-color-card-title:#0A3875;

    /*==============================
    TARJETA
    ==============================*/

    --bv-card-width:100%;

    --bv-card-height:420px;

    --bv-card-radius:28px;

    --bv-card-padding:0;

    /*==============================
    IMAGEN TARJETA
    ==============================*/

    --bv-card-image-width:70%;

    --bv-card-image-max:220px;

    /*==============================
    TITULO TARJETA
    ==============================*/

    --bv-card-title-size:32px;

    --bv-card-title-weight:800;

    /*==============================
    BANNER
    ==============================*/

    --bv-banner-width:1200px;

    --bv-banner-height:520px;

    --bv-banner-radius:36px;

    --bv-banner-padding:30px;

    /*==============================
    TITULO BANNER
    ==============================*/

    --bv-banner-title-size:54px;

    --bv-banner-title-weight:800;

    /*==============================
    TEXTO
    ==============================*/

    --bv-banner-text-size:18px;

    --bv-banner-text-line:1.8;

    /*==============================
    BOTONES
    ==============================*/

    --bv-button-radius:999px;

    --bv-button-height:54px;

    --bv-button-padding:14px 26px;

    /*==============================
    ESPECIALISTAS
    ==============================*/

    --bv-doctor-width:110px;

    --bv-doctor-radius:18px;

    /*==============================
    SOMBRAS
    ==============================*/

    --bv-shadow-card:

        0 15px 40px rgba(0,0,0,.10);

    --bv-shadow-banner:

        0 40px 120px rgba(0,0,0,.35);

    /*==============================
    TRANSICIONES
    ==============================*/

    --bv-transition:.35s ease;

}
/*==================================================
02. CONTENEDOR GENERAL
==================================================*/

.bv-services{

    position:relative;

    width:100%;

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:

        repeat(4,minmax(260px,1fr));

    gap:24px;

    overflow:visible;

}
/*==================================================
03. TARJETA
==================================================*/

.bv-card{

    position:relative;

    width:var(--bv-card-width);

    height:var(--bv-card-height);

    z-index:1;

    transition:

        transform var(--bv-transition),

        opacity var(--bv-transition);

}

.bv-card.active{

    z-index:99990;

}
/*==================================================
04. PREVIEW TARJETA
==================================================*/

.bv-preview{

    position:relative;

    width:100%;

    height:100%;

    overflow:hidden;

    cursor:pointer;

    background:var(--bv-color-card);

    border-radius:var(--bv-card-radius);

    box-shadow:var(--bv-shadow-card);

    transition:

        transform var(--bv-transition),

        box-shadow var(--bv-transition);

}

.bv-preview:hover{

    transform:translateY(-8px);

}
/*==================================================
05. IMAGEN TARJETA
==================================================*/

.bv-preview img{

    position:absolute;

    left:50%;

    top:50%;

    width:var(--bv-card-image-width);

    max-width:var(--bv-card-image-max);

    height:auto;

    object-fit:contain;

    transform:

        translate(-50%,-60%);

    transition:

        transform var(--bv-transition);

}

.bv-preview:hover img{

    transform:

        translate(-50%,-60%)

        scale(1.03);

}
/*==================================================
06. TITULO TARJETA
==================================================*/

.bv-preview h3{

    position:absolute;

    left:50%;

    bottom:40px;

    width:90%;

    margin:0;

    text-align:center;

    transform:translateX(-50%);

    color:var(--bv-color-card-title);

    font-size:var(--bv-card-title-size);

    font-weight:var(--bv-card-title-weight);

    line-height:1.1;

}
/*==================================================
07. BACKDROP
==================================================*/

.bv-backdrop{

    position:fixed;

    inset:0;

    z-index:99980;

    opacity:0;

    visibility:hidden;

    background:rgba(0,0,0,.20);

    backdrop-filter:blur(10px);

    transition:opacity .35s ease,
               visibility .35s ease;

}

.bv-backdrop.active{

    opacity:1;

    visibility:visible;

}
/*==================================================
08. CONTENEDOR DEL BANNER
==================================================*/

.bv-banner{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px;

    z-index:99999;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}

.bv-card.active .bv-banner{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}
/*==================================================
09. BANNER PRINCIPAL
==================================================*/

.bv-banner-content{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:min(1200px,95vw);

    min-height:520px;

    max-height:85vh;

    overflow:hidden;

    border-radius:36px;

    background:#FBF5E8;

    box-shadow:

        0 40px 120px rgba(0,0,0,.35);

    animation:bvOpen .35s ease;

}
/*==================================================
10. IMAGEN DEL BANNER
==================================================*/

.bv-image{

    width:42%;

    display:flex;

    justify-content:center;

    align-items:center;

    align-self:stretch;

}

.bv-image img{

    width:100%;

    max-width:500px;

    height:auto;

    object-fit:contain;

    display:block;

}
/*==================================================
11. CONTENIDO DEL BANNER
==================================================*/

.bv-text{

    width:58%;

    padding:

        40px
        45px
        45px
        45px;

    color:#002A6C;

    overflow:auto;

}
/*==================================================
12. TITULO DEL BANNER
==================================================*/

.bv-text h2{

    margin:

        0
        0
        18px;

    color:#002A6C;

    font-size:54px;

    font-weight:800;

    line-height:1.05;

}
/*==================================================
13. TEXTO DEL BANNER
==================================================*/

.bv-text p{

    margin:0;

    color:#002A6C;

    font-size:18px;

    line-height:1.8;

}
/*==================================================
14. TITULO ESPECIALISTAS
==================================================*/

.bv-especialistas-title{

    margin:

        34px
        0
        18px;

    color:#002A6C;

    font-size:20px;

    font-weight:700;

}
/*==================================================
15. CONTENEDOR ESPECIALISTAS
==================================================*/

.bv-especialistas{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

    margin-bottom:30px;

}
/*==================================================
16. TARJETA ESPECIALISTA
==================================================*/

.bv-doctor{

    width:110px;

    text-align:center;

}

.bv-doctor img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    border-radius:18px;

    border:

        2px solid rgba(255,255,255,.18);

    margin-bottom:8px;

}

.bv-doctor span{

    display:block;

    color:#002A6C;

    font-size:12px;

    line-height:1.35;

}
/*==================================================
17. BOTONES
==================================================*/

.bv-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:20px;

}

.bv-buttons a{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:14px 26px;

    min-height:54px;

    border-radius:999px;

    background:#89B690;

    color:#FBF5E8;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    transition:.25s ease;

}

.bv-buttons a:hover{

    transform:translateY(-3px);

}

.bv-buttons .primary{

    background:#A8D5A2;

}
/*==================================================
18. BOTON CERRAR
==================================================*/

.bv-close{

    position:absolute;

    top:22px;

    right:22px;

    width:48px;

    height:48px;

    display:flex;

    justify-content:center;

    align-items:center;

    border:none;

    border-radius:50%;

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

    color:#002A6C;

    font-size:24px;

    font-weight:300;

    cursor:pointer;

    z-index:1000;

    backdrop-filter:blur(12px);

    transition:
        background .30s ease,
        color .30s ease,
        transform .30s ease;

}

.bv-close:hover{

    background:#89B690;

    color:#FBF5E8;

    transform:rotate(90deg);

}

.bv-close:active{

    transform:
        rotate(90deg)
        scale(.92);

}

.bv-close:focus{

    outline:none;

}
/*==================================================
19. ANIMACIONES
==================================================*/

/*----------------------------------
APERTURA DEL BANNER
----------------------------------*/

@keyframes bvOpen{

    0%{

        opacity:0;

        transform:
            scale(.92)
            translateY(20px);

    }

    100%{

        opacity:1;

        transform:
            scale(1)
            translateY(0);

    }

}

/*----------------------------------
CIERRE TARJETAS LATERALES
----------------------------------*/

.move-left,
.move-right{

    opacity:.35;

    transform:scale(.95);

    transition:

        opacity .35s ease,

        transform .35s ease;

}

/*----------------------------------
HOVER TARJETA
----------------------------------*/

.bv-preview{

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.bv-preview:hover{

    transform:translateY(-8px);

}

/*----------------------------------
HOVER IMAGEN
----------------------------------*/

.bv-preview img{

    transition:

        transform .35s ease;

}

.bv-preview:hover img{

    transform:

        translate(-50%,-60%)

        scale(1.03);

}

/*----------------------------------
BOTONES
----------------------------------*/

.bv-buttons a{

    transition:

        background .25s ease,

        color .25s ease,

        transform .25s ease,

        box-shadow .25s ease;

}

.bv-buttons a:hover{

    transform:translateY(-3px);

    box-shadow:

        0 10px 24px rgba(0,0,0,.18);

}

/*----------------------------------
ESPECIALISTAS
----------------------------------*/

.bv-doctor img{

    transition:

        transform .30s ease,

        border-color .30s ease;

}

.bv-doctor:hover img{

    transform:scale(1.05);

    border-color:rgba(255,255,255,.5);

}
/*==================================================
20. IMAGEN DEL BANNER
==================================================*/

/*----------------------------------
CONTENEDOR
----------------------------------*/

.bv-image{

    position:relative;

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    align-self:stretch;

    overflow:hidden;

    padding:30px;

}

/*----------------------------------
IMAGEN
----------------------------------*/

.bv-image img{

    display:block;

    width:100%;

    max-width:480px;

    height:auto;

    object-fit:contain;

    transition:

        transform .40s ease,

        opacity .40s ease;

}

/*----------------------------------
EFECTO AL ABRIR
----------------------------------*/

.bv-card.active .bv-image img{

    transform:scale(1);

    opacity:1;

}

/*----------------------------------
ESTADO INICIAL
----------------------------------*/

.bv-image img{

    transform:scale(.95);

    opacity:.95;

}
/*----------------------------------
responsive
----------------------------------*/
/*=========================================
RESPONSIVE MOBILE
=========================================*/

@media (max-width:768px){

    /* Tarjetas */

    .bv-services{

        grid-template-columns:1fr;

        gap:20px;

        padding:0 16px;

    }

    .bv-card{

        height:320px;

    }

    .bv-preview h3{

        font-size:24px;

        bottom:30px;

    }

    /* Modal */

    .bv-banner{

        padding:12px;

        align-items:flex-start;

        overflow-y:auto;

    }

    .bv-banner-content{

        width:100%;

        min-height:auto;

        max-height:none;

        display:flex;

        flex-direction:column;

        border-radius:24px;

        overflow:hidden;

    }

    /* Imagen */

    .bv-image{

        order:-1;

        width:100%;

        padding:25px;

    }

    .bv-image img{

        max-width:240px;

        margin:auto;

    }

    /* Texto */

    .bv-text{

        width:100%;

        padding:25px;

    }

    .bv-text h2{

        font-size:34px;

    }

    .bv-text p{

        font-size:16px;

        line-height:1.6;

    }

    /* Especialistas */

    .bv-especialistas{

        justify-content:center;

    }

    .bv-doctor{

        width:90px;

    }

    /* Botones */

    .bv-buttons{

        flex-direction:column;

    }

    .bv-buttons a{

        width:100%;

    }

    /* Botón cerrar */

    .bv-close{

        top:12px;

        right:12px;

        width:42px;

        height:42px;

        font-size:22px;

    }

}
/*==================================================
21. NAVEGACIÓN ENTRE ESPECIALIDADES
==================================================*/

.bv-nav{

    position:absolute;

    top:50%;

    width:56px;

    height:56px;

    display:flex;

    justify-content:center;

    align-items:center;

    border:none;

    border-radius:50%;

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

    color:#002A6C;

    font-size:42px;

    font-weight:300;

    line-height:1;

    cursor:pointer;

    z-index:1200;

    transform:translateY(-50%);

    box-shadow:
        0 10px 30px rgba(0,0,0,.18);

    backdrop-filter:blur(12px);

    transition:
        background .30s ease,
        color .30s ease,
        transform .30s ease,
        box-shadow .30s ease;

}


/*==================================================
BOTÓN ANTERIOR
==================================================*/

.bv-nav-prev{

    left:18px;

}


/*==================================================
BOTÓN SIGUIENTE
==================================================*/

.bv-nav-next{

    right:18px;

}


/*==================================================
HOVER
==================================================*/

.bv-nav:hover{

    background:#89B690;

    color:#FBF5E8;

    transform:
        translateY(-50%)
        scale(1.08);

    box-shadow:
        0 14px 35px rgba(0,0,0,.25);

}


/*==================================================
ACTIVE
==================================================*/

.bv-nav:active{

    transform:
        translateY(-50%)
        scale(.94);

}


/*==================================================
FOCUS
==================================================*/

.bv-nav:focus{

    outline:none;

}


/*==================================================
RESPONSIVE MOBILE
==================================================*/

@media (max-width:768px){

    .bv-nav{

        position:fixed;

        top:50%;

        width:44px;

        height:44px;

        font-size:34px;

        z-index:100001;

    }


    .bv-nav-prev{

        left:8px;

    }


    .bv-nav-next{

        right:8px;

    }

}