@import url('hamburgers.min.css');

:root {
    --orange: #ff8f0f;
    --blue: #0071CF;
    --coolgray: #3e5f74;
    --silver: #9b9b9b;
    --lightblue: #d6eaf9;
    --lightorange: #ffe1be;
    --lightsilver: #d3d3d3;
    --color-primario: #005a4a; /* Verde esmeralda */
    --color-acento: #4DBA87; /* Verde menta/acento */
    --color-fondo: #F5F7F8; /* Gris claro neutro */
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    font-family: 'Kanit',sans-serif;
}

.container-hero {
    max-width: 1920px;
    margin: auto;
}

/*---------------------------Apectos generales-------------------*/

.tanto-btn {
    background: var(--blue);
    color: white;
    border-color: var(--orange);
    border-style: solid;
    border-width: 2px;
}

.tanto-btn2 {
    background: var(--orange);
    color: white;
    border-color: white;
    border-style: solid;
    border-width: 2px;
}


.tanto-btn:hover {
    background: var(--orange);
    color: white;
    border-color: var(--blue);
}

.tanto-btn2:hover {
    background: white;
    color: var(--blue);
    border-color: var(--blue);
}

.bg-orange {
    background: var(--orange);
}

.text-orange {
    color: var(--orange);
}

.bg-blue {
    background: var(--blue);
}

.text-blue {
    color: var(--blue);
}

.text-coolgray {
    color: var(--coolgray);
}


.opacity-0 {
    opacity: 0;
    transition: all ease 0.55s;
}

.opacity-100 {
    opacity: 1;
    transition: all ease 0.55s;
}

.section-title {
    font-size: 40px;
}

select.form-select {
    border-radius: 40px;
}

.btn-outline-primary:hover {
    color: #fff !important;
    background-color: var(--blue) !important;
    border-color: var(--blue) !important;
}

.btn-outline-primary {
    border-color: var(--blue) !important;
    color: var(--blue) !important;
}

.margintop-tv {
    margin-top: 55px;
}

@media only screen and (max-width:768px) {
    .section-title {
        font-size: 25px;
    }

    #HomeProductos .section-title span, #HomeServicios .section-title span {
        display: block;
    }

    #HomeCentros h3.section-title, #HomeFarmacias h3.section-title {
        text-align: center;
    }

    .fa-2x {
        font-size: 1.70em;
    }

    .margintop-tv {
        margin-top: 35px;
    }
}

.modal-backdrop {
    background-color: #0071cf !important;
}

/*---------------------------- Header ------------------------------*/

header#header-tv {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1051;
    width: 100%;
}

    header#header-tv nav {
        padding: 3px;
        border-color: var(--color-primario);
    }

.form-buscador button.tanto-btn {
    aspect-ratio: 1/1;
    height: auto;
    width: 45px;
    max-height: 45px;
    position: relative;
    left: -48px;
}

.form-buscador input {
    padding: 12px;
    border-radius: 45px;
}

#logo-tv {
    max-width: 175px;
    margin-right: 20px;
}

#lupa {
    display: none;
}

@media only screen and (max-width:768px) {
    #lupa {
        display: initial;
    }

    #header-tv .fa-cart-shopping {
        transform: translate(0, 10px);
    }

    #header-tv .cart-counter {
        transform: translate(15px, -20px) !important;
    }

    #HomeMedicos .form-buscador input {
        padding: 7px;
        padding-left: 20px;
    }

    #HomeMedicos .form-buscador {
        padding: 0 15px;
    }

    #logo-tv {
        max-width: 135px;
        margin-right: 10px;
    }

    .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
        width: 20px;
        height: 2.5px;
    }

        .hamburger-inner:before {
            top: -8px;
        }

        .hamburger-inner:after {
            bottom: -8px;
        }

    hamburger-box {
        width: 25px;
    }

    header#header-tv nav {
        padding: 5px 10px;
    }

    #header-search {
        text-align: right;
    }

        #header-search .form-buscador button.tanto-btn {
            position: absolute;
            left: initial;
            right: 0px;
            top: 0;
        }
}

/*--------- Este es el contenedor del banner principal del home --------*/
#hero-banner {
    position: relative;
    height: 78vh;
}

/*----------------  REA DE CONTENIDO - BANNER PPAL del HOME ------------------*/

div#hero-content {
    padding-top: 20vh;
}

    div#hero-content .form-buscador {
        padding: 10px;
        border-radius: 50px;
        border: 1.5px solid white;
        position: relative;
    }

        div#hero-content .form-buscador button.tanto-btn {
            position: absolute;
            right: 15px;
            left: initial;
        }

/*--------- Este es el contenedor del particle js --------*/
#hero-banner > div#hero-particles {
    position: absolute;
    z-index: 1;
    width: 100%;
    right: 0;
}

/*------------ Este controla el estilo del div donde esta el contenido ----------*/
#hero-banner > div:nth-of-type(2) {
    position: relative;
    z-index: 2;
}

#hero-banner #particles-js {
    height: 78vh;
}

/*
.bg {
    background-image: url("/images/HomeBackground.png");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px 0px 50% 50% / 0px 0px 30% 30%;
    box-shadow: 0 7px var(--orange);
    margin-bottom: 10px;
    overflow: hidden;
}
*/

.bg-tips {
    /* The image used */
    background-image: url("/images/tips.jpg");
    /* Full height */
    height: 100%;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px 0px 50% 50% / 0px 0px 30% 30%;
    box-shadow: 0 7px var(--color-acento);
    margin-bottom: 10px;
    overflow: hidden;
}


.bg-ofertas {
    /* The image used */
    background-image: url("/images/oferta-web.jpg");
    /* Full height */
    height: 100%;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px 0px 50% 50% / 0px 0px 30% 30%;
    box-shadow: 0 7px var(--color-fondo);
    margin-bottom: 10px;
    overflow: hidden;
}

.conte {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 2px;
    position: relative;
}


@media only screen and (max-width:768px) {
    #hero-banner {
        height: 90vh;
    }

    div#hero-content {
        padding-top: 17vh;
    }

    #logo-tv-hero {
        width: 80%;
        margin: auto;
    }

    /* .bg {
        /* The image used */
    /*     background-image: url("/images/background-mobile.png");
   /* }*/

    .bg-tips {
        /* The image used */
        background-image: url("/images/tips-responsive.jpg");
    }

    .bg-ofertas {
        /* The image used */
        background-image: url("/images/oferta-web-responsive.jpg");
    }


    div#hero-content h1.h3 {
        font-size: 16px;
    }

    #header-search-mobile .form-buscador button.tanto-btn {
        aspect-ratio: 1/1;
        height: auto;
        width: 38px;
        max-height: 40px;
        position: relative;
        left: -40px;
    }

    #header-search-mobile .form-buscador input {
        padding: 10px;
        border-radius: 45px;
    }

    @media only screen and (max-width:768px) {
        #busca-header {
            position: absolute;
            right: 100px;
        }
    }

    /*--------- Este es el contenedor del particle js --------*/
    #hero-banner > div:first-of-type {
        bottom: 0;
        width: 100%;
    }

    #hero-banner #particles-js {
        height: 90vh;
    }

    .contenedor {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .contenido {
        margin: 5px;
        flex: 1;
        min-width: 200px;
        background: #ddd;
        padding: 20px;
    }

    .conte {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 2px;
        position: relative;
    }
}


/* ----------- TRASLADAR NUMERITO DEL CARRITO -------------*/
.cart-counter {
    transform: translate(-30%,-65%) !important;
}

@media only screen and (max-width:362px) {
    #header-tv .fa-cart-shopping {
        transform: translate(-10px, 12px);
    }

    #header-tv .cart-counter {
        transform: translate(31%,-124%) !important;
    }
}

/*-------------------------CARRITO DE COMPRAS-------------------*/

#offcanvasRight {
    z-index: 2050;
}

.select-quantity-bar {
    border: 1px solid var(--color-acento);
    margin: 5px 3px 10px 3px;
    box-sizing: border-box;
    padding-bottom: 3px;
    border-radius: 20px;
}

.border-bottom-blue {
    border-bottom: 1px solid var(--color-primario);
}

.border-blue {
    border: 2px solid var(--color-primario);
}

.border-bottom-orange {
    border-bottom: 1px solid var(--color-acento);
}

#offcanvasRight .tanto-cart-input {
    max-width: 43px;
    text-align: center;
    padding-right: 0;
}

.tanto-cart-section {
    border-radius: 10px;
    border: 1px solid var(--color-acento);
    padding: 10px;
    margin-bottom: 25px;
}



/*------para crear secciones divisoras en las paginas, actualmente solo una blanca y otra azul, falta definir el margen */
.colour-divider {
    margin: 0px;
    background: #0071CF;
    padding: 7% 20% 10% 20%;
    color: #fff;
}

.white-divider {
    margin: 0px;
    background: #fff;
    padding: 7% 20% 10% 20%;
    color: #0071CF;
}

.white1-divider {
    margin: 0px;
    background: #fff;
    padding: 3% 10% 3% 10%;
    color: #000;
}

.orange-divider {
    margin: 0px;
    background: #ed9b2d;
    padding: 7% 20% 10% 20%;
    color: #0071CF;
}


/*-------------------------------- SLIDER CARDS -------------------------------------*/

.card {
    border-radius: 10px;
    transition: all 1s;
    cursor: pointer;
    height: 100%
}

    .card:hover {
        -webkit-box-shadow: 3px 5px 17px -4px var(--blue);
        box-shadow: 3px 5px 17px -4px var(--blue);
    }

.card-title {
    font-size: 15.6px;
    line-height: 1.5;
}

.card-body {
    flex: 1 1 auto;
    padding: 1rem 1rem;
    /*height: 130px;*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

div#swiperEspecialidades .card-body {
    font-size: 14.5px;
}

div#swiperEspecialidades .card-title {
    height: initial;
}

div#swiperEspecialidades .card:hover, #HomeMedicos .card:hover {
    box-shadow: 3px 5px 17px -4px var(--orange);
}

div#swiperFarmacias .card-body {
    height: initial;
}

.carousel-arrow-icon:hover {
    color: var(--orange);
}

div#swiperEspecialidades .swiper-slide {
    margin-right: 0 !important;
}

    div#swiperEspecialidades .swiper-slide:first-of-type {
        margin-right: 20px !important;
    }

    div#swiperEspecialidades .swiper-slide .card {
        transform: scale(0.92);
        height: 380px;
    }




    div#swiperEspecialidades .swiper-slide:first-of-type .card-title {
        font-size: 18px;
    }

    div#swiperEspecialidades .swiper-slide:first-of-type .card-text:nth-of-type(2) {
        font-size: 16px !important;
        font-weight: 600;
    }
/*----------------------------- CARRUSEL SWIPPER ---------------------------*/
div#swiperProductos {
    /*height: 340px;*/
    padding-bottom: 25px;
}

div#swiperEspecialidades {
    /*height: 320px;*/
    padding-bottom: 25px;
}

div#swiperFarmacias {
    /*height: 360px;*/
    padding-bottom: 25px;
}

div#swiperProductos .swiper-button-prev, div#swiperProductos .swiper-button-next {
    height: 120%;
    top: -69px;
    padding: 20px;
}

div#swiperEspecialidades .swiper-button-prev, div#swiperEspecialidades .swiper-button-next {
    height: 120%;
    top: -63px;
    padding: 20px;
}

div#swiperFarmacias .swiper-button-prev, div#swiperFarmacias .swiper-button-next {
    height: 120%;
    top: -63px;
    padding: 20px;
}

div#swiperProductos .swiper-button-prev, div#swiperEspecialidades .swiper-button-prev, div#swiperFarmacias .swiper-button-prev {
    left: 0px;
    right: auto;
    background: linear-gradient(to right, white 30%, transparent);
}

div#swiperProductos .swiper-button-next, div#swiperEspecialidades .swiper-button-next, div#swiperFarmacias .swiper-button-next {
    right: 0px;
    left: auto;
    background: linear-gradient(to left, white 30%, transparent);
}

    div#swiperProductos .swiper-button-prev:after, div#swiperProductos .swiper-button-next:after, div#swiperEspecialidades .swiper-button-prev:after, div#swiperEspecialidades .swiper-button-next:after, div#swiperFarmacias .swiper-button-prev:after, div#swiperFarmacias .swiper-button-next:after {
        font-size: 18px;
        padding: 7px;
        color: white;
        background: var(--blue);
        border-radius: 70px;
        position: absolute;
        top: 22.25%;
    }

.swiper .tanto-btn, #info-home .tanto-btn {
    border-width: 2px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 12px
}

#swiperFarmacias p.card-text {
    font-size: 13px;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: contain;
}

.tanto-next {
    position: relative;
    top: 73px;
    z-index: 100;
    right: 0;
}

.tanto-prev {
    position: relative;
    top: 73px;
    z-index: 100;
    left: 0;
}

#HomeFarmacias .tanto-next, #HomeFarmacias .tanto-prev {
    top: 0;
}

#HomeCentros .tanto-next, #HomeCentros .tanto-prev {
    top: 5px;
}

@media only screen and (max-width:768px) {
    .tanto-next {
        right: 10px;
    }

    .tanto-prev {
        left: 10px;
    }

        .tanto-next i.fa-2x, .tanto-prev i.fa-2x {
            font-size: 2em;
        }

    #swiperProductosFarmacias .row, #swiperServicios .row {
        gap: 20px 0;
    }
}

/* -------------------  ESTILOS PARA FONDOS DIVISORES ----------------------- */

.section-container-tv {
    position: relative;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    margin-top: 60px;
    padding-bottom: 50px;
}

.divider-bg-blue {
    position: absolute;
    top: 150px;
    /*left: -10%;*/
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, var(--lightblue), transparent 60%);
    /* border-radius: 50% 0 0 0 / 100% 0 0 0;
    transform: rotate(-3deg);*/
    z-index: -1;
    border-top: 2px solid var(--blue);
}

.divider-bg-orange {
    position: absolute;
    top: 150px;
    /*left: -10%;*/
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, var(--lightorange), transparent 60%);
    /*border-radius: 50% 0 0 0 / 100% 0 0 0;
    transform: rotate(-3deg);*/
    z-index: -1;
    border-top: 2px solid var(--orange);
}

.divider-bg-silver {
    position: absolute;
    top: 115px;
    left: -10%;
    width: 115%;
    height: 100%;
    background: linear-gradient(to bottom, var(--lightsilver), transparent 60%);
    border-radius: 50% 0 0 0 / 100% 0 0 0;
    transform: rotate(-3deg);
    z-index: -1;
    border-top: 2px solid var(--silver);
}

#HomeFarmacias .divider-bg-blue {
    top: -49px;
    background: linear-gradient(to top, var(--lightblue), transparent 60%);
    border-bottom: 2px solid var(--blue);
    border-top: 0;
}

#HomeProductos, #HomeFarmacias, #HomeServicios {
    margin-top: 20px;
}

#HomeCentros .divider-bg-orange {
    top: -49px;
    background: linear-gradient(to top, var(--lightorange), transparent 60%);
    border-bottom: 2px solid var(--orange);
    border-top: 0;
}

#HomeCentros .section-title, #HomeFarmacias .section-title {
    text-align: right;
}

#HomeServicios h4.card-title {
    font-size: 24px;
    color: var(--coolgray);
    margin-bottom: 30px;
}

@media only screen and (max-width:768px) {
    .section-container-tv {
        margin-top: 70px;
    }

    #HomeProductos .divider-bg-blue, #HomeServicios .divider-bg-orange {
        top: 180px;
    }

    #HomeCentros.section-container-tv {
        margin-top: 0;
    }

    #HomeMedicos.section-container-tv {
        margin-top: 25px;
    }

    #HomeServicios.section-container-tv {
        padding-bottom: 30px;
    }

    #HomeServicios h4.card-title {
        font-size: 20px;
        margin-bottom: 20px;
        line-height: 1.45;
    }
}



/*------------------------------------ INFO HOME (o noticias)-------------------------------*/

.info-home {
    border-radius: 20px;
    background-image: linear-gradient(to right, var(--blue), #005ba7), url('../images/whatsapp.jpg');
    background-blend-mode: hard-light;
    background-size: cover;
    padding: 20px;
    filter: saturate(0.7) contrast(1.2);
    display: flex;
    align-items: center;
    transition: all ease 0.3s;
}

    .info-home:hover {
        transform: scale(1.015);
        box-shadow: 3px 3px 5px rgb(4, 35, 122, 0.80);
    }

#prescription-card {
    background-image: linear-gradient(to right, var(--blue), #005ba7), url('../images/medical-prescription.jpg');
}

.info-home p {
    font-size: 18px;
    text-shadow: 3px 3px 5px rgb(4, 35, 122, 0.80);
}

.info-content h4 {
    font-size: 25px;
    text-shadow: 3px 3px 5px rgb(4, 35, 122, 0.80);
}

.info-icon {
    flex-basis: 25%;
}

    .info-icon img {
        flex-basis: 20%;
    }

.info-content {
    flex-basis: 75%;
}

#info-section {
    display: flex;
    align-items: center;
}

    #info-section > div {
        /* border-bottom: 1.5px solid #aeccdf; */
        padding: 0;
    }


@media only screen and (max-width:768px) {
    #info-section {
        height: initial;
        margin: auto;
        width: 95%;
    }

        #info-section > div {
            padding: 0 15px 40px 15px;
        }

    #info-home > div {
        border-right: 0px solid var(--orange);
        border-bottom: 1.5px solid var(--orange);
        padding-left: 0;
        padding-bottom: 20px;
        margin-bottom: 20px;
        text-align: center;
    }

        #info-home > div:last-of-type {
            border-bottom-width: 0;
            padding-bottom: 0;
            margin-bottom: 0;
        }

    .info-home {
        flex-basis: 100%;
        padding: 20px 10px;
        gap: 10px;
    }

        .info-home p {
            font-size: 14px;
            letter-spacing: 0.3px;
        }

    .info-content h4 {
        font-size: 19px;
    }

    .info-icon {
        flex-basis: 20%;
    }

    .info-content {
        flex-basis: 80%;
    }

    #info-section .d-flex {
        flex-wrap: wrap;
    }
}

/*------------------------ SECCI N M DICOS --------------------------*/
#users .form-buscador {
    padding: 7px;
    border: 2px solid var(--blue);
    border-radius: 50px;
}

#users .tanto-btn {
    letter-spacing: 0.6px;
    font-size: 12px;
}

#users h5 {
    font-size: 1.08rem;
}

.profesional-meta {
    border: 1px solid var(--blue);
    border-radius: 20px;
}

    .profesional-meta p {
        font-size: 14px;
        padding: 0 10px;
    }



.footer-profesional {
    border-top: 1px solid #e5e5e5;
}

.profile-img {
    border: 2px solid var(--blue);
    padding: 3px;
    height: 60px;
}

#MedicosList {
    height: 650px;
    padding-right: 20px;
    overflow: auto;
}

.medicos-centros {
    width: 100%;
    overflow: hidden;
    overflow-y: auto;
    font-size: 14px;
    /*list-style: none;*/
    padding: 5px 0 10px 14px;
    margin-bottom: 0;
}

    .medicos-centros ::marker {
        color: var(--blue);
        font-size: 0.6rem;
    }

#HomeMedicos .divider-bg-orange {
    top: 200px;
}

#HomeMedicos {
    padding-bottom: 0;
}

@media only screen and (max-width:768px) {
    #MedicosList {
        height: 68vh;
    }

    #users .form-buscador {
        padding: 10px;
        margin: 0 7px;
        border-radius: 30px;
    }
}

/*--------------------------FOOTER ------------------------*/

#footer-tv {
    background: linear-gradient(to right, var(--blue), #005ba7);
    padding-top: 40px;
    border-top: 3px solid var(--orange);
}

    #footer-tv a {
        color: rgba(255,255,255,0.7);
        text-decoration: none;
    }

        #footer-tv a:hover {
            color: rgba(255,255,255,1);
        }

    #footer-tv ul {
        font-size: 14px;
        line-height: 1.8;
        color: rgba(255,255,255,0.7);
    }

    #footer-tv div.row > div:last-of-type ul li {
        margin-bottom: 15px;
    }

@media only screen and (max-width:768px) {
    #footer-tv {
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 90px;
    }

        #footer-tv .row > div:first-of-type {
            text-align: center;
        }

            #footer-tv .row > div:first-of-type img {
                max-height: 25px !important;
            }

            #footer-tv .row > div:first-of-type br {
                display: none;
            }

        #footer-tv .row > div:nth-of-type(2) {
            text-align: center;
            margin-block-end: 10px;
        }

            #footer-tv .row > div:nth-of-type(2) ul {
                display: flex;
                justify-content: space-around;
            }

        #footer-tv .row > div:nth-of-type(3) li {
            margin-bottom: 10px;
        }
}

@media only screen and (min-width:1500px) {
    #footer-tv {
        border-radius: 0 20% 0 0 / 0 50% 0 0;
    }
}






/*------seccion que cae con sentido contrario al reloj */
.skew-cc {
    width: 100%;
    height: 100px;
    /*position: absolute;
    left: 0px;*/
    background: linear-gradient(to right bottom, #0071CF 49%, #fff 50%), linear-gradient(-50deg, #ffffff 16px, #000 0);
    padding: 0% 10% 0% 10%;
}

/*------seccion que cae con sentido contrario al reloj */
.skew-cccc {
    width: 100%;
    height: 100px;
    /*position: absolute;
    left: 0px;*/
    background: linear-gradient(to right bottom, #ed9b2d 49%, #fff 50%), linear-gradient(-50deg, #ffffff 16px, #000 0);
    padding: 0% 10% 0% 10%;
}

/*------seccion que cae con sentido contrario al reloj */
.skew-ccc {
    width: 100%;
    height: 100px;
    /*position: absolute;*/
    /* left: 0px;*/
    align-content: center;
    background: linear-gradient(to right bottom, #fff 49%, #0071CF 50%);
    padding: 0% 10% 0% 10%;
}

/*------seccion que cae con sentido al reloj */
.skew-c {
    width: 100%;
    height: 100px;
    position: absolute;
    left: 0px;
    background: linear-gradient(to left bottom, #fff 49%, #0071CF 50%);
}


/*------seccion que cae con sentido contrario al reloj naranja*/
.skew-o {
    width: 100%;
    height: 100px;
    position: absolute;
    left: 0px;
    background: linear-gradient(to right bottom, #fff 49%, #ed9b2d 50%);
    padding: 0% 10% 0% 10%;
}

/*------seccion que cae con sentido al reloj */
.skew-oo {
    width: 100%;
    height: 100px;
    /*  position: absolute;
    left: 0px;*/
    background: linear-gradient(to left bottom, #fff 49%, #ed9b2d 50%);
    padding: 0% 10% 0% 10%;
}

/*------seccion que cae con sentido al reloj */
.skew-ooo {
    width: 100%;
    height: 100px;
    /*position: absolute;
    left: 0px;*/
    background: linear-gradient(to left bottom, #ed9b2d 49%, #fff 50%), linear-gradient(-50deg, #ffffff 16px, #000 0);
    padding: 0% 10% 0% 10%;
}

.skew-z {
    width: 100%;
    height: 40px;
    border-top: 40px solid #ed9b2d;
    /*position: absolute;
    left: 0px;*/
    /* background-color: #ed9b2d;*/
    padding: 0% 10% 0% 10%;
}

.skew-zz {
    width: 100%;
    height: 20px;
    border-top: 20px solid #0071CF;
    /*position: absolute;
    left: 0px;*/
    /* background-color: #ed9b2d;*/
    padding: 0% 10% 0% 10%;
}

.skew-zzz {
    width: 100%;
    height: 40px;
    border-top: 20px solid #0071CF;
    /*position: absolute;
    left: 0px;*/
    /* background-color: #ed9b2d;*/
    padding: 0% 10% 0% 10%;
}

/* clase para poder desplegar el autocomplete de google places en una modal
   https://stackoverflow.com/questions/36110527/google-place-autocomplete-not-showing-in-bootstrap-modal por esto se coloca este estilo
   ya que si no, no se activa el autocomplete. Para usar el autocomple de google hay que crear una api key en la consola del usuario en google
   y se configura aqui https://console.cloud.google.com/apis/credentials?hl=es&project=tantovital-356319 
   agregar la UI de jquery despues del jquery
*/
.pac-container {
    z-index: 10000 !important;
}


/*-------------------------------------- ESTILOS Pagina Legend ---------------------------------------------*/

.text-gray {
    color: #939393;
}

.background-gray {
    background-color: #ebebeb;
}

.text-prom-size-2 {
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 500;
}

.text-prom-size-3 {
    font-size: 2rem;
    line-height: 2rem;
    font-weight: 500;
}

.text-prom-size-4 {
    font-size: 3rem;
    line-height: 3rem;
    font-weight: 500;
}

/*-------------------------------------- ESTILOS SCROLLBAR ---------------------------------------------*/

/* width */
::-webkit-scrollbar {
    width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--orange);
    border-radius: 10px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: var(--coolgray);
    }

/*---------------------------------------- FIN DE ESTILOS SCROLLBAR --------------------------------------*/


/*--------------------------- INICIALES DEL USUARIO EN LOGIN PARTINAL ------------------------------*/


#user-logged {
    text-transform: uppercase;
    font-size: 18px;
    width: 42px;
    height: 42px;
    background: var(--lightblue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-primario);
    color: var(--blue);
    line-height: 18px;
}

    #user-logged:after {
        display: none;
    }

@media only screen and (max-width:768px) {
    #user-logged {
        font-size: 15px;
        width: 36px;
        height: 36px;
    }
}


/*--------------------------- Boton de pulso ------------------------------*/

.pulse-primary {
    color: rgba(255, 255, 255, 0.8);
    box-shadow: 0px 0px 20px 5px rgba(0, 170, 255, .8);
    animation: pulse-primary 2s infinite;
}

    .pulse-primary:hover {
        color: rgba(255, 255, 255, 1) !important;
    }

@-webkit-keyframes pulse-primary {
    0% {
        -webkit-box-shadow: 0px 0px 20px 5px rgba(0, 170, 255, .8);
        color: rgba(255, 255, 255, 1);
    }

    70% {
        -webkit-box-shadow: 0px 0px 20px 5px rgba(0, 170, 255, 0);
    }

    100% {
        -webkit-box-shadow: 0px 0px 20px 5px rgba(0, 170, 255, .8);
        color: rgba(255, 255, 255, 1);
    }
}

@keyframes pulse-primary {
    0% {
        -moz-box-shadow: 0px 0px 20px 5px rgba(0, 170, 255, .8);
        box-shadow: 0px 0px 20px 5px rgba(0, 170, 255, .8);
        color: rgba(255, 255, 255, 1);
    }

    70% {
        -moz-box-shadow: 0px 0px 20px 5px rgba(0, 170, 255, 0);
        box-shadow: 0px 0px 20px 5px rgba(0, 170, 255, 0);
    }

    100% {
        -moz-box-shadow: 0px 0px 20px 5px rgba(0, 170, 255, .8);
        box-shadow: 0px 0px 20px 5px rgba(0, 170, 255, .8);
        color: rgba(255, 255, 255, 1);
    }
}

/*--------------------------- HIGHLIGHT MENU ---------------------------*/

#highlight-menu {
    display: flex;
    background: white;
    justify-content: space-between;
    border-bottom: 1px solid var(--lightsilver);
}

    #highlight-menu a {
        display: block;
        flex-basis: calc(100vw / 3);
        /*background: #e3e3e3;*/
        text-align: center;
        text-transform: uppercase;
        text-decoration: none;
        font-size: 13px;
        padding-block: 2px;
        color: var(--coolgray);
        border-inline: 1px solid var(--lightsilver);
        /*background: rgb(227,227,227);
    background: linear-gradient(0deg, rgba(227,227,227,1) 0%, rgba(227,227,227,1) 100%, rgba(0,113,207,1) 100%);
    transition: all ease-in-out 0.8s;*/
        --c: var(--blue);
        background: linear-gradient(90deg,#fff 50%,var(--c) 0) calc(100% - var(--_p,0%))/200% 100%, linear-gradient(var(--c) 0 0) 0% 100%/var(--_p,0%) 100% no-repeat;
        -webkit-background-clip: text,padding-box;
        background-clip: text,padding-box;
        transition: 0.5s;
    }



        #highlight-menu a:hover {
            /*background: rgb(227,227,227);
        background: linear-gradient(0deg, rgba(227,227,227,1) 0%, rgba(227,227,227,1) 0, rgba(0,113,207,1) 100%);*/
            color: white;
            --_p: 100%;
        }

@media only screen and (max-width:768px) {
    #highlight-menu {
        width: 100%;
    }

        #highlight-menu a {
            flex-basis: 25%;
            padding-inline: 0px;
            font-size: 9px;
            letter-spacing: 0.5px;
            font-weight: 500;
        }

            #highlight-menu a:nth-of-type(odd) {
                border-inline: 0px solid var(--lightsilver);
            }
}

/*--------------- NUEVO HOME HERO ------------------*/
#home-hero {
    width: 100%;
    height: 80vh;
    background: var(--blue);
    display: flex;
    margin-top: 22px;
    border-bottom: 5px solid var(--color-primario);
    overflow: hidden
}

#home-video {
    flex-basis: 45% /*calc((100vh / 6) * 5)*/;
}

    #home-video video {
        width: auto;
        background-color: var(--blue);
    }

#home-search {
    flex-basis: 55%; /*calc(100vw - ((100vh / 6) * 5));*/
    align-self: center;
}

    #home-search > .row {
        margin-block-start: 10vh;
        padding-inline-end: 50px;
        margin-block-end: 45px;
    }

    #home-search .swiper img {
        max-width: 150px;
        margin: 0 auto 15px auto;
    }

    #home-search .swiper .tanto-btn {
        margin: auto;
        max-width: 150px;
        background: #034ea9;
    }

    #home-search .swiper-container {
        max-width: 45vw;
    }

#home-hero #videoCorazon {
    height: 80vh;
    aspect-ratio: 5/6;
}

#home-form {
    grid-column: 3/13;
    grid-row: 6/10;
    border-radius: 300px;
    border: 2px solid white;
    padding: 10px 20px;
    z-index: 2;
}

    #home-form > div {
        background: white;
        height: 100%;
        border-radius: 300px;
        display: flex;
        align-items: center;
        padding-inline: 15px;
    }

    #home-form input.form-control {
        border-color: var(--color-primario);
        border-width: 2px;
    }

marquee {
    font-size: 21px;
    color: white;
    text-shadow: 3px 3px 3px var(--color-fondo);
    max-width: 90%;
    margin: auto;
    display: block;
}

    marquee span {
        padding-inline: 10px;
        border-right: 2px solid white;
    }

#slider1 {
    grid-column: 1/8;
    grid-row: 1/8;
    background: var(--blue);
}

#slider2 {
    grid-column: 8/15;
    grid-row: 1/8;
    background: var(--orange);
}

#slider3 {
    grid-column: 1/8;
    grid-row: 8/15;
    background: var(--orange);
}

#slider4 {
    grid-column: 8/15;
    grid-row: 8/15;
    background: var(--blue);
}



#home-hero .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#marquee-home {
    grid-column: 3/13;
    grid-row: 10/11;
    z-index: 1;
    padding-block: 5px;
}

@media only screen and (max-width:768px) {
    #home-hero {
        width: 100%;
        flex-wrap: wrap;
        align-items: flex-start;
        align-content: flex-start;
        background: #0b76ca;
        overflow: initial;
        margin-top: 10px;
        height: 80vh;
    }

    #home-video {
        flex-basis: 100%;
    }

    #home-hero #videoCorazon {
        height: initial;
        aspect-ratio: initial;
        width: 100%;
    }

    #home-search {
        flex-basis: 100%;
    }

        #home-search h1 {
            text-align: center;
            font-size: 20px;
            padding-block-start: 10px;
        }

        #home-search > .row {
            margin-block-start: 10vh;
            padding-inline: 25px;
            margin-block-end: 0;
        }

        #home-search .swiper-container {
            max-width: 90vw;
            margin: auto;
        }

        #home-search .swiper img {
            max-width: 85px;
            margin: 0 auto 5px auto;
        }

    #slider2, #slider4 {
        display: none;
    }

    #slider1 {
        grid-column: 1/13;
    }

    #slider3 {
        grid-column: 1/13;
    }

    #home-form {
        grid-column: 2/12;
    }

        #home-form > div {
            justify-content: center;
            flex-direction: column;
        }

        #home-form img {
            max-width: 240px;
        }

        #home-form > div > div:first-child {
            justify-content: center;
        }

    #marquee-home {
        grid-column: 2/12;
    }

        #marquee-home marquee {
            font-size: 15px;
            text-shadow: 2px 2px 2px var(--coolgray);
        }

    .form-buscador {
        position: relative;
        padding-bottom: 20px;
    }

    #header-tv .form-buscador {
        position: relative;
        padding-bottom: 2px;
    }

    .form-buscador button.tanto-btn {
        position: absolute;
        left: initial;
        right: 12px;
    }
}

#whatsapp-cta {
    background: #25d366;
    bottom: 0;
    width: 100%;
    position: fixed;
    z-index: 101;
    padding-block: 5px;
    box-shadow: 0 -3px 3px #ff8f0f7a;
    /* justify-content:center;*/
}

    #whatsapp-cta a {
        color: white;
        text-decoration: none;
        font-size: 16px;
        line-height: 1;
        display: block;
        padding-inline: 90px 0;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 1.7px;
        line-height: 1.15;
        padding-block: 4px;
    }

        #whatsapp-cta a span {
            font-size: 14px;
            text-transform: initial;
            font-weight: 400;
            letter-spacing: 0.4px;
        }

        #whatsapp-cta a i.fa {
            font-size: 60px;
            float: left;
            margin-inline: 0 20px;
            position: absolute;
            top: -25px;
            left: 15px;
            background: #25d366;
            border-radius: 50px 50px 0 0;
            padding: 3px 5px;
            box-shadow: 0 -3px 0.7px #ff8f0f7a;
        }


/*----------------------- PUBLICIDAD --------------------------*/

.banner-tv {
    background: #e1e1e1;
    aspect-ratio: 4/0.5;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #939393;
    letter-spacing: 10px;
}

.ads-advertencia {
    color: var(--lightsilver);
    font-size: 14px;
}

@media only screen and (max-width:768px) {
    .banner-tv {
        aspect-ratio: 4/2.5;
    }
}


/*--------------------------------- DESTACADO -------------------------*/
.claseDestacada .card {
    transform: scale(1) !important;
    box-shadow: 2px 2px 4px var(--orange);
    background: linear-gradient(0deg, rgb(255 204 229) 20%, white 50%);
    border: 3px solid var(--blue);
    border-radius: 10px;
}

    .claseDestacada .card h5 {
        font-size: 1.3rem;
        line-height: 1.1;
    }

    .claseDestacada .card small {
        font-size: 1rem;
        line-height: 1.3;
        padding-block: 5px;
        display: inline-block;
    }

    .claseDestacada .card .footer-profesional {
        border-top: 1px solid var(--coolgray);
    }

    .claseDestacada .card div.d-flex:nth-child(2) {
        display: initial !important;
    }

    .claseDestacada .card a.tanto-btn {
        display: block;
        border-color: white;
        border-width: 2.5px;
    }

    .claseDestacada .card .profesional-meta {
        border-color: var(--coolgray);
        border-width: 1.7px;
    }

    .claseDestacada .card .medicos-centros {
        display: block;
    }

.medicos-centros {
    display: none;
}
/*--FIN DESTACADO--*/