/* ===========================
   BOTÓN CERRAR
=========================== */

.bv-close{

    position:absolute;

    top:22px;

    right:22px;

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

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

    backdrop-filter:blur(12px);

    color:#fff;

    font-size:34px;

    font-weight:300;

    line-height:1;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s ease;

    z-index:100001;

}

.bv-close:hover{

    background:#fff;

    color:#081c72;

    transform:rotate(90deg) scale(1.08);

    box-shadow:
        0 12px 28px rgba(0,0,0,.25);

}

.bv-close:active{

    transform:scale(.95);

}
:root{

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

    --bv-banner-bg:#081c72;

    --bv-banner-title:#FFFFFF;

    --bv-banner-text:#FFFFFF;

    /* ===== TARJETAS ===== */

    --bv-card-title:#FFFFFF;

    --bv-card-height:420px;

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

    --bv-card-radius:28px;

    /* ===== BADGES ===== */

    --bv-badge-text:#FFFFFF;

    --bv-badge-bg:rgba(255,255,255,.15);

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

    --bv-btn-bg:#FFFFFF;

    --bv-btn-color:#081c72;

    --bv-btn-primary-bg:#A8D5A2;

    --bv-btn-primary-color:#081c72;

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

    --bv-banner-radius:36px;

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

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

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

    --bv-shadow-card:
    0 15px 40px rgba(0,0,0,.12);

    --bv-shadow-banner:
    0 40px 120px rgba(0,0,0,.35);

    /* ===== OVERLAY ===== */

    --bv-overlay:
    linear-gradient(
        to top,
        rgba(0,0,0,.78),
        rgba(0,0,0,.15)
    );

}
/* =====================================================
   CONTENEDOR GENERAL
===================================================== */

.bv-services{

    position:relative;

    display:grid;

    grid-template-columns:
    repeat(4,minmax(260px,1fr));

    gap:24px;

    max-width:1400px;

    margin:auto;

    overflow:visible;

}

/* =====================================================
   TARJETAS
===================================================== */

.bv-card{

    position:relative;

    height:420px;

    z-index:1;

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

}

.bv-card.active{

    z-index:99990;

}

/* =====================================================
   PREVIEW
===================================================== */

.bv-preview{

    position:relative;

    width:100%;

    height:100%;

    overflow:hidden;

    border-radius:28px;

    cursor:pointer;

    box-shadow:
    0 15px 40px rgba(0,0,0,.12);

    transition:
    transform .35s ease;

}

.bv-preview:hover{

    transform:
    translateY(-8px);

}

.bv-preview img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/* =====================================================
   OVERLAY
===================================================== */

.bv-dark{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(8,28,114,.88) 0%,
            rgba(8,28,114,.60) 35%,
            rgba(8,28,114,.30) 65%,
            rgba(8,28,114,.12) 100%
        );

    transition: .35s ease;
}

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

.bv-preview h3{

    position:absolute;

    left:22px;

    bottom:22px;

    z-index:5;

    color:white;

    font-size:30px;

    line-height:1.1;

    margin:0;

    text-shadow:
    0 4px 12px rgba(0,0,0,.3);

}

/* =====================================================
   BADGE
===================================================== */

.bv-badge{

    position:absolute;

    top:18px;

    left:18px;

    z-index:5;

    padding:8px 16px;

    border-radius:999px;

    color:white;

    font-size:13px;

    font-weight:700;

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

    backdrop-filter:blur(8px);

}

/* =====================================================
   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:.35s ease;

}

.bv-backdrop.active{

    opacity:1;

    visibility:visible;

}

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

.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;

}

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

.bv-banner-content{

    position:relative;

    z-index:100000;

    width:min(1200px,95vw);

    min-height:520px;

    max-height:85vh;

    overflow:hidden;

    display:flex;

    border-radius:36px;

    background:
    linear-gradient(
        145deg,
        #0a2b83,
        #081c72 45%,
        #06134d
    );

    box-shadow:
   0 30px 80px rgba(0,0,0,.35),
        inset 0 1px rgba(255,255,255,.12);

    animation:
    bvOpen .35s ease;
border:1px solid rgba(255,255,255,.08);
 backdrop-filter:blur(30px);


}

/* =====================================================
   ANIMACION
===================================================== */

@keyframes bvOpen{

    from{

        opacity:0;

        transform:
        scale(.92);

    }

    to{

        opacity:1;

        transform:
        scale(1);

    }

}

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

.bv-text{

    width:60%;

    padding:60px;

    color:white;

    overflow:auto;

}

.bv-text h2{

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

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

    line-height:1.1;

    margin-bottom:20px;

}

.bv-text p{

    font-size:18px;

    line-height:1.8;

}

.bv-text ul{

    margin-top:25px;

    margin-bottom:35px;

}

.bv-text li{

    margin-bottom:12px;

}

/* =====================================================
   TAG
===================================================== */

.bv-tag{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    margin-bottom:20px;

    font-size:14px;

    font-weight:700;

    color:#081c72;

}

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

.urgencias-tag{background:#A8D5A2;}
.farmavett-tag{background:#80DEEA;}
.vacunacion-tag{background:#FFF59D;}
.medicamentos-tag{background:#90CAF9;}
.hospitalizacion-tag{background:#B3E5FC;}
.cirugia-tag{background:#FFAB91;}
.consulta-tag{background:#A5D6A7;}
.especializada-tag{background:#CE93D8;}
.deportiva-tag{background:#FFCC80;}
.casa-tag{background:#81D4FA;}
.diagnostico-tag{background:#64B5F6;}
.bano-tag{background:#F8BBD0;}

/* =====================================================
   IMAGEN DERECHA
===================================================== */

.bv-image{

    flex:1;
position:relative;

    min-width:340px;

}

.bv-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}
.bv-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        to left,

        transparent,

        rgba(8,28,114,.65)

    );

}

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

/* =====================
   BOTONES MOBILE CENTRADOS
===================== */

.bv-buttons{

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:16px;

    margin-top:40px;

    width:100%;

}

.bv-buttons a{

    width:280px;

    height:56px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:16px;

    text-decoration:none;

    font-size:16px;
    font-weight:600;

    transition:.35s;

}

.bv-buttons a:hover{

    transform:

        translateY(-5px);

    background:

        rgba(255,255,255,.16);

    box-shadow:

        0 14px 35px rgba(0,0,0,.20);

}

.bv-buttons .primary{

    background:#A8D5A2;

    color:#081c72;

    box-shadow:

        0 12px 30px rgba(168,213,162,.35);

}
.bv-buttons .primary:hover{

    transform:translateY(-3px);

    box-shadow:

        0 18px 40px rgba(168,213,162,.45);

}
.bv-buttons .secondary{

    background:transparent;

    border:2px solid rgba(255,255,255,.35);

    color:white;

}
.bv-buttons .secondary:hover{

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

    border-color:white;

}
/* =====================================================
   TARJETAS DETRAS
===================================================== */

.move-left,
.move-right{

    opacity:.35;

    transform:
    scale(.95);

}

/* =====================================================
   MOBILE PREMIUM
===================================================== */

@media (max-width:768px){

    /* =====================
       GRID
    ===================== */

    .bv-services{

        grid-template-columns:1fr;

        gap:18px;

        padding:0 12px;

    }

    /* =====================
       TARJETAS
    ===================== */

    .bv-card{

        height:280px;

    }

    .bv-preview{

        border-radius:22px;

    }

    .bv-preview h3{

        left:18px;

        bottom:18px;

        font-size:22px;

        max-width:85%;

    }

    .bv-badge{

        top:14px;

        left:14px;

        padding:8px 14px;

        font-size:12px;

    }

    /* =====================
       MODAL
    ===================== */

    .bv-banner{

        padding:0;

        align-items:flex-end;

    }

    .bv-banner-content{

        width:100vw;

        max-width:100vw;

        max-height:95vh;

        min-height:auto;

        border-radius:28px 28px 0 0;

        display:flex;

        flex-direction:column;

        overflow-y:auto;

        animation:slideUpMobile .35s ease;

        box-shadow:
        0 -15px 50px rgba(0,0,0,.25);

        -webkit-overflow-scrolling:touch;

    }

    /* =====================
       IMAGEN SUPERIOR
    ===================== */

    .bv-image{

        order:-1;

        width:100%;

        min-width:unset;

        height:240px;

        flex:none;

        position:relative;

    }

    .bv-image::after{

        content:"";

        position:absolute;

        inset:0;

        background:
        linear-gradient(
            to top,
            rgba(8,28,114,.55),
            transparent
        );

        pointer-events:none;

    }

    .bv-image img{

        width:100%;

        height:100%;

        object-fit:cover;

        display:block;

    }

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

    .bv-text{

        width:100%;

        padding:28px;

        display:flex;

        flex-direction:column;

        gap:12px;

    }

    .bv-text h2{

        font-size:36px;

        font-weight:800;

        line-height:1.1;

        margin:0;

    }

    .bv-text p{

        font-size:15px;

        line-height:1.7;

        margin:0;

    }

    .bv-text ul{

        margin:8px 0 20px;

        padding-left:20px;

    }

    .bv-text li{

        font-size:14px;

        margin-bottom:10px;

    }

    /* =====================
       TAG
    ===================== */

    .bv-tag{

        width:max-content;

        background:white;

        color:#081c72;

        font-size:12px;

        font-weight:800;

        padding:10px 18px;

        border-radius:999px;

        box-shadow:
        0 6px 18px rgba(0,0,0,.15);

        margin-bottom:6px;

    }

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

    .bv-buttons{

        display:grid;

        grid-template-columns:1fr;

        gap:12px;

        margin-top:10px;

    }

    .bv-buttons a{

        width:100%;

        min-height:58px;

        display:flex;

        align-items:center;

        justify-content:center;

        text-align:center;

        text-decoration:none;

        border-radius:18px;

        font-size:16px;

        font-weight:700;

        background:#FFFFFF;

        color:#081c72;

        box-shadow:
        0 8px 20px rgba(0,0,0,.12);

        transition:.25s ease;

    }

    .bv-buttons a:active{

        transform:scale(.97);

    }

    .bv-buttons .primary{

        background:#A8D5A2;

        color:#081c72;

    }

}


/* =====================================================
   MOVILES MUY PEQUEÑOS
===================================================== */

@media (max-width:480px){

    .bv-card{

        height:250px;

    }

    .bv-preview h3{

        font-size:20px;

    }

    .bv-image{

        height:190px;

    }

    .bv-text{

        padding:22px;

    }

    .bv-text h2{

        font-size:30px;

    }

}


/* =====================================================
   ANIMACION MOBILE
===================================================== */

@keyframes slideUpMobile{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/* =====================================================
   NAVEGACIÓN ENTRE SERVICIOS
===================================================== */

.bv-nav{

    position:absolute;

    top:50%;

    width:56px;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:50%;

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

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    color:#FFFFFF;

    font-size:42px;

    font-weight:300;

    line-height:1;

    cursor:pointer;

    z-index:100002;

    transform:translateY(-50%);

    box-shadow:
        0 12px 30px rgba(0,0,0,.20),
        inset 0 1px rgba(255,255,255,.15);

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

}


/* =====================================================
   ANTERIOR
===================================================== */

.bv-nav-prev{

    left:18px;

}


/* =====================================================
   SIGUIENTE
===================================================== */

.bv-nav-next{

    right:18px;

}


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

.bv-nav:hover{

    background:#A8D5A2;

    color:#081c72;

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

    box-shadow:
        0 16px 38px rgba(0,0,0,.30);

}


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

.bv-nav:active{

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

}


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

.bv-nav:focus{

    outline:none;

}


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

@media (max-width:768px){

    .bv-nav{

        position:fixed;

        top:50%;

        width:44px;

        height:44px;

        font-size:34px;

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

        color:#081c72;

        z-index:100005;

        box-shadow:
            0 10px 28px rgba(0,0,0,.25);

    }


    .bv-nav-prev{

        left:8px;

    }


    .bv-nav-next{

        right:8px;

    }


    .bv-nav:hover{

        background:#A8D5A2;

        color:#081c72;

    }

}