/*=====================================
    NOTO SANS
======================================*/

@font-face{
    font-family:'Noto Sans';
    src:url('../fonts/NotoSans-Medium.ttf') format('truetype');
    font-weight:500;
    font-style:normal;
}

@font-face{
    font-family:'Noto Sans';
    src:url('../fonts/NotoSans-Bold.ttf') format('truetype');
    font-weight:700;
    font-style:normal;
}

@font-face{
    font-family:'Noto Sans';
    src:url('../fonts/NotoSans-ExtraBold.ttf') format('truetype');
    font-weight:800;
    font-style:normal;
}

/*====================================================
    NEURONIC MEXICANA
=====================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Noto Sans', sans-serif;
    font-weight:500;

}
/****************************************************
                    NAVBAR
****************************************************/

.navbar{

    background:#fff !important;
    padding:12px 35px;
    border-bottom:none;
    min-height:82px;

}

.logo{

    width:170px;
    height:auto;
    transition:.3s;

}

.logo:hover{

    transform:scale(1.02);

}


.blue-line{

    width:100%;
    height:6px;
    background:#153D9B;

}


.navbar-nav{

    gap:12px;

}


/*.nav-link{*/

    /*color:#17397D !important;*/
    /*font-size:15px;*/
    /*font-weight:700;*/
    /*padding:7px 15px !important;*/
    /*border-radius:5px;*/
    /*transition:.30s;*/
    /*white-space:nowrap;*/

/*}*/

.nav-link{

    font-family:'Noto Sans', sans-serif;
    font-weight:700;
    font-size:15px;
    color:#17397D !important;

}

h1,h2,h3,h4,h5{

    font-family:'Noto Sans', sans-serif;
    font-weight:800;

}
.nav-link:hover{

    background:#153D9B;
    color:#fff !important;

}

p{

    font-family:'Noto Sans', sans-serif;
    font-weight:500;

}
.active-menu{

    background:#153D9B;
    color:#fff !important;

}


.navbar-toggler{

    border:none;
    box-shadow:none !important;

}


.navbar-toggler:focus{

    box-shadow:none;

}


/****************************************************
                    BANNER
****************************************************/

#banner{

    width:100%;
    position:relative;
    overflow:hidden;

}


.banner-img{

    width:100%;
    height:580px;
    object-fit:cover;
    object-position:center;

}


/****************************************************
            CONTROLES DEL CARRUSEL
****************************************************/

.carousel-control-prev{

    width:55px;

}

.carousel-control-next{

    width:55px;

}


.carousel-control-prev-icon,
.carousel-control-next-icon{

    width:55px;
    height:55px;

    border-radius:50%;
    background-color:rgba(0,0,0,.45);
    background-size:45%;

}


/****************************************************
            INDICADORES
****************************************************/

.carousel-indicators{

    margin-bottom:8px;

}

.carousel-indicators button{

    width:13px !important;
    height:13px !important;

    border-radius:50%;
    border:2px solid #153D9B !important;

    background:#ffffff !important;
    opacity:1;

}


.carousel-indicators .active{

    background:#ff6b00 !important;

}


/****************************************************
        DESKTOP GRANDE
****************************************************/

@media(min-width:1600px){

    .banner-img{

        height:720px;

    }

    .logo{

        width:190px;

    }

    .nav-link{

        font-size:16px;

    }

}


/****************************************************
                LAPTOP
****************************************************/

@media(max-width:1400px){

    .banner-img{

        height:520px;

    }

    .nav-link{

        font-size:14px;

        padding:7px 12px !important;

    }

    .logo{

        width:160px;

    }

}


/****************************************************
                TABLET
****************************************************/

@media(max-width:991px){

    .navbar{

        padding:12px 18px;

    }


    .navbar-collapse{

        margin-top:18px;

    }


    .navbar-nav{

        gap:5px;
        align-items:flex-start !important;

    }


    .nav-link{

        width:100%;
        padding:12px !important;

    }


    .banner-img{

        height:430px;

    }

    .carousel-control-prev,
    .carousel-control-next{

        display:none;

    }

}


/****************************************************
                CELULARES
****************************************************/

@media(max-width:768px){

    .logo{

        width:135px;

    }


    .banner-img{

        height:290px;

        object-position:center;

    }


    .blue-line{

        height:5px;

    }


    .carousel-indicators button{

        width:10px !important;
        height:10px !important;

    }


}


/****************************************************
            CELULARES PEQUEÑOS
****************************************************/

@media(max-width:480px){

    .navbar{

        padding:10px;

    }

    .logo{

        width:120px;

    }

    .banner-img{

        height:220px;

    }

}

.menu-inicio{
    display:block;
    height:30px;
    width:auto;
}

.active-menu{
    background:transparent !important;
    padding:0 !important;
}

.active-menu:hover{
    background:transparent !important;
}


/*=========================================
    DATOS GENERALES
=========================================*/

/*.datos-generales{*/

    /*position:relative;*/
    /*overflow:hidden;*/
    /*padding:70px 0 80px;*/
    /*background:#fff;*/

/*}*/
.datos-generales{

    position:relative;

    padding:70px 0 80px;

    background-color:#ffffff;

    background-image:url("../img/inicio/texturasuperior.png");

    background-repeat:no-repeat;

    background-position:top center;

    background-size:cover;

}

.bg-circulos{

    position:absolute;

    left:0;
    top:0;

    width:100%;
    opacity:.22;

    pointer-events:none;

}

.titulo-seccion{

    font-size:64px;
    font-weight:800;
    color:#17397D;

    margin-bottom:20px;

}

.empresa{

    color:#17397D;
    font-size:28px;
    font-weight:800;

    margin-bottom:20px;

}

/*.datos-generales p{*/

    /*color:#4d4d4d;*/

    /*font-size:30px;*/

    /*line-height:1.45;*/

    /*font-weight:500;*/

    /*margin-bottom:28px;*/

/*}*/

.datos-generales p{

    font-family:'Noto Sans', sans-serif;

    color:#575756;

    font-size:17px;

    font-weight:500;

    /*line-height:1.72;*/

    letter-spacing:.2px;

    margin-bottom:42px;

    text-align:justify;

}

.icono-personas{

    width:180px;

}

.titulo-secundario{

    display:inline-block;

    color:#17397D;

    font-size:34px;

    font-weight:800;

    margin-bottom:25px;

}

.bloque{

    display:flex;

    align-items:flex-start;

}

.cruz{

    color:#F48B35;

    font-size:28px;

    margin-right:18px;

    margin-top:6px;

}

.bloque h4{

    color:#17397D;

    font-size:30px;

    font-weight:800;

    margin-bottom:8px;

}

.icono-valores{

    width:250px;

}

/***************************
Responsive
****************************/

@media(max-width:991px){

    .titulo-seccion{

        font-size:46px;
        text-align:center;

    }

    .empresa{

        font-size:22px;

        font-weight:800;

        color:#17397D;

        margin-bottom:22px;

    }

    .icono-personas{

        width:150px;
        margin-bottom:30px;

    }

    .icono-valores{

        width:180px;
        margin-top:35px;

    }

    .titulo-secundario{

        text-align:center;
        width:100%;

    }

}

@media(max-width:768px){

    .titulo-seccion{

        font-size:36px;

    }

    .datos-generales p{

        font-size:17px;

    }

    .empresa{

        font-size:22px;

    }

    .bloque h4{

        font-size:22px;

    }

}
.texto-lateral{

    position:absolute;

    top:40px;

    right:-20px;

    writing-mode:vertical-rl;

    text-orientation:mixed;

    /* ELIMINA ESTA LÍNEA */
    /* transform:rotate(180deg); */

    font-family:'Noto Sans', sans-serif;

    font-size:82px;

    font-weight:800;

    letter-spacing:3px;

    color:rgba(220,220,220,.45);

    user-select:none;

    pointer-events:none;

    z-index:1;

}

@media(max-width:991px){

    .texto-lateral{

        display:none;

    }

}

.icono-personas{

    width:180px;

    margin-top:18px;

}


/**************************************
            SWIPER VALORES
**************************************/
/*==================================================
=                 SECCION VALORES
==================================================*/

/*.valores-section{*/
    /*position:relative;*/
    /*padding:70px 0;*/
    /*overflow:hidden;*/
    /*background:#fff;*/
/*}*/
.valores-section{
    position:relative;
    padding:70px 0;
    overflow:hidden;
    background:#fff;
    isolation:isolate;
}
/* Fondo */

.valores-bg{
    position:absolute;
    inset:0;
    background:url("../img/inicio/texturasuperior.png") center center no-repeat;
    background-size:cover;
    opacity:.25;
    pointer-events:none;
}
/* Textura inferior derecha */

.valores-section::after{

    content:"";

    position:absolute;

    right:0;
    bottom:0;

    width:830px;
    height:811px;

    background:url("../img/inicio/text_inferior.png") no-repeat right bottom;

    background-size:contain;

    pointer-events:none;

    opacity:.95;

    z-index:0;

}

.valores-section .container-fluid{

    position:relative;

    z-index:2;

}
/*------------------ TITULO ------------------*/

.valores-title{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin-bottom:45px;
    z-index:5;
}

.valores-title img{
    width:16px;
}

.valores-title h2{
    margin:0;
    color:#173A84;
    font-size:34px;
    font-weight:700;
}

/*------------------ CARRUSEL ------------------*/

.valores-carousel{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    z-index:5;
}

.valores-slider{
    overflow:hidden;
    width:1160px;
}

.valores-track{
    display:flex;
    gap:22px;
    transition:.45s ease;
}

/*------------------ TARJETAS ------------------*/
/*------------------ TARJETAS ------------------*/

.valor-card{

    flex:0 0 180px;
    width:180px;
    height:200px;

    /* Color gris como el diseño */
    background:#F5F5F5;

    border-radius:18px;

    /* Borde muy sutil */
    border:1px solid #ECECEC;

    /* Sombra suave */
    box-shadow:
    0 8px 20px rgba(0,0,0,.08);

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

    padding:18px;

    transition:.30s;

}

.valor-card:hover{

    transform:translateY(-6px);

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

}

/*------------------ ICONO ------------------*/

.valor-icono{

    width:90px;
    height:90px;

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

    margin-bottom:15px;

}

.valor-icono img{

    max-width:80px;
    max-height:80px;

    width:auto;
    height:auto;

    object-fit:contain;
    display:block;

}

/*------------------ TEXTO ------------------*/

.valor-texto{

    color:#173A84;

    font-size:17px;

    font-weight:700;

    line-height:1.2;

    text-align:center;

}

/*------------------ FLECHAS ------------------*/

.valores-arrow{

    width:50px;
    height:50px;

    border:none;
    background:none;

    cursor:pointer;

    transition:.30s;

}

.valores-arrow img{

    width:36px;
    display:block;

}

.valores-arrow:hover{

    transform:scale(1.12);

}

/*------------------ DOTS ------------------*/

.valores-dots{

    display:flex;
    justify-content:center;
    gap:8px;

    margin-top:28px;

}

.dot{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#9e9e9e;

    transition:.30s;

}

.dot.active{

    background:#F08A2A;

}

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

@media(max-width:1400px){

    .valores-slider{
        width:930px;
    }

}

@media(max-width:1200px){

    .valores-slider{
        width:720px;
    }

}

@media(max-width:991px){

    .valores-slider{
        width:470px;
    }

    .valor-card{

        flex:0 0 170px;
        width:170px;
        height:190px;

    }

    .valor-icono{

        width:80px;
        height:80px;

    }

    .valor-icono img{

        max-width:70px;
        max-height:70px;

    }

    .valor-texto{

        font-size:16px;

    }

}

@media(max-width:576px){

    .valores-slider{
        width:220px;
    }

    .valores-title h2{

        font-size:34px;

    }

    .valor-card{

        flex:0 0 200px;
        width:200px;
        height:190px;

    }

}

/*finde valores*/
/*==========================================
        FARMACOVIGILANCIA
==========================================*/

.farmacovigilancia{

    padding:70px 0;

    background:url("../img/inicio/texturasuperior.png") center center no-repeat;

    background-size:cover;

}

.farmaco-box{

    background:#233878;

    border-radius:0;

    display:flex;

    overflow:hidden;

    min-height:390px;

    position:relative;

}

/*=======================
Imagen
=======================*/

.farmaco-img{

    width:40%;

    position:relative;

}

.farmaco-img img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/* círculos */

.circulo-superior{

    position:absolute;

    width:120px;
    height:120px;

    border:10px solid #006DFF;

    border-radius:50%;

    top:-35px;
    right:-35px;

}

.circulo-inferior{

    position:absolute;

    width:120px;
    height:120px;

    border:10px solid #006DFF;

    border-radius:50%;

    left:-35px;
    bottom:-35px;

}

/*=======================
Información
=======================*/

.farmaco-info{

    width:60%;

    padding:35px 45px;

    color:#fff;

    position:relative;

    overflow:hidden;

}

/* marca de agua */

.farmaco-info::after{

    content:"NEURONIC";

    position:absolute;

    right:-40px;

    top:40px;

    writing-mode:vertical-rl;

    font-size:90px;

    font-weight:800;

    color:rgba(255,255,255,.05);

    pointer-events:none;

}

.farmaco-marca{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:12px;

    background:#314B9B;

}

.farmaco-info h2{

    font-size:54px;

    margin-bottom:20px;

    font-weight:700;

}

.farmaco-info p{

    font-size:17px;

    line-height:1.5;

    margin-bottom:18px;

}

.farmaco-info h4{

    font-size:22px;

    margin:25px 0 20px;

}

/*=======================
Contacto
=======================*/

.contacto{

    display:flex;

    align-items:flex-start;

    gap:22px;

}

.contacto-icono{

    width:90px;

    flex-shrink:0;

}

.contacto-icono img{

    width:100%;

}

.contacto-info strong{

    font-size:17px;

}

.contacto-info p{

    margin:4px 0;

}

/*=======================
Responsive
=======================*/

@media(max-width:991px){

    .farmaco-box{

        flex-direction:column;

    }

    .farmaco-img,
    .farmaco-info{

        width:100%;

    }

    .farmaco-img{

        height:320px;

    }

    .farmaco-info{

        padding:30px;

    }

    .farmaco-info h2{

        font-size:38px;

    }

}

/*end faramacovigilancia*/
/*==================================================
        CONTACTOS Y HORARIOS
==================================================*/
.contactos-section{

    position:relative;

    padding:80px 0 70px;

    overflow:hidden;

    background:#fff;

    isolation:isolate;

}
/*=========================================
TEXTURA SUPERIOR IZQUIERDA
=========================================*/

.contactos-section::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:900px;
    height:700px;

    background:url("../img/inicio/texturasuperior.png") no-repeat;

    background-size:contain;

    opacity:.28;

    z-index:0;

    pointer-events:none;

}

/*=========================================
TEXTURA INFERIOR DERECHA
=========================================*/

.contactos-section::after{

    content:"";

    position:absolute;

    right:0;
    bottom:0;

    width:900px;
    height:700px;

    background:url("../img/inicio/text_inferior.png") no-repeat right bottom;

    background-size:contain;

    opacity:.95;

    z-index:0;

    pointer-events:none;

}
/*=========================
TEXTURA SUPERIOR
=========================*/

.contactos-bg-top{

    position:absolute;

    top:0;
    left:0;

    width:55%;
    height:380px;

    background:url("../img/inicio/texturasuperior.png") no-repeat left top;

    background-size:cover;

    opacity:.28;

    pointer-events:none;

}

/*=========================
TEXTURA INFERIOR
=========================*/

.contactos-bg-bottom{

    position:absolute;

    left:0;
    bottom:0;

    width:55%;
    height:420px;

    background:url("../img/inicio/text_inferior.png") no-repeat left bottom;

    background-size:contain;

    opacity:.95;

    pointer-events:none;

}

.contactos-section .container-fluid{

    position:relative;

    z-index:5;

}
.contactos-section > .container{

    position:relative;

    z-index:2;

}
.contactos-carrusel{

    position:relative;

    z-index:5;

    background:transparent;

}
.contactos-box{

    position:relative;

    z-index:5;

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

.contactos-titulo{

    margin-bottom:35px;

    padding-left:18px;

}

.contactos-titulo h2{

    color:#173A84;

    font-size:44px;

    font-weight:700;

    margin:0;

}

/*=========================
CAJA PRINCIPAL
=========================*/

.contactos-box{

    background:#ffffff;

    border-radius:10px;

    padding:25px;

    box-shadow:

    0 8px 20px rgba(0,0,0,.08);

}

/*=========================
HORARIO
=========================*/

.horario-box{

    width:58%;

    margin:0 auto 18px;

    background:#F5F5F5;

    border-radius:10px;
    border-bottom: 2px solid #E4E4E4;
    border-right: 2px solid #E4E4E4;

    padding:16px 24px;

    display:flex;

    align-items:center;

    gap:18px;

    box-shadow:0 5px 12px rgba(0,0,0,.08);

}

.horario-icono{

    width:95px;

    flex-shrink:0;

}

.horario-icono img{

    width:100%;

}

.horario-info{

    color:#555;

}

.horario-info p{

    margin:4px 0;

    font-size:16px;

}

.horario-info strong{

    color:#555;

}

.horario-info a{

    color:#555;

    text-decoration:none;

}

.horario-info a:hover{

    color:#173A84;

}

/*=========================
NEGOCIOS
=========================*/

.negocios-box{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:0;

    margin-bottom:20px;

    background:#F6F6F6;
    border-bottom: 2px solid #E4E4E4;
    border-right: 2px solid #E4E4E4;

    border-radius:10px;

    overflow:hidden;

    box-shadow:

    0 5px 12px rgba(0,0,0,.08);

}

.negocio{

    padding:18px 24px;

}

.negocio:first-child{

    border-right:1px solid #CFCFCF;

}

.negocio h4{

    font-size:15px;

    margin-bottom:14px;

}

.dato{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-bottom:14px;

}

.dato img{

    width:16px;

}

.dato a{

    color:#666;
    font-size:15px;
    text-decoration:none;

    line-height:1.4;

}

.dato a:hover{

    color:#173A84;

}

/*=========================
FARMACOVIGILANCIA
=========================*/

/*.farmaco-contacto{*/

    /*background:#F6F6F6;*/

    /*border-radius:10px;*/

    /*padding:22px 25px;*/

    /*box-shadow:*/

    /*0 5px 12px rgba(0,0,0,.08);*/

/*}*/
.farmaco-contacto{

    /*padding:16px 24px;*/

    margin: 0 auto 18px;
    background: #F5F5F5;
    border-radius: 10px;
    border-bottom: 2px solid #E4E4E4;
    border-right: 2px solid #E4E4E4;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 5px 12px rgba(0, 0, 0, .08);

}
.farmaco-contacto h4{

    margin-bottom:18px;

    color:#555;

    font-size:18px;

    font-weight:700;

}

.farmaco-datos{

    display:flex;

    justify-content:space-between;

    gap:35px;

}

.farmaco-datos .dato{

    flex:1;

}

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

@media(max-width:991px){

    .contactos-titulo h2{

        font-size:38px;

    }

    .horario-box{

        width:100%;

    }

    .negocios-box{

        grid-template-columns:1fr;

    }

    .negocio:first-child{

        border-right:none;

        border-bottom:1px solid #DDDDDD;

    }

    .farmaco-datos{

        flex-direction:column;

        gap:15px;

    }

}

@media(max-width:576px){

    .horario-box{

        flex-direction:column;

        text-align:center;

    }

    .horario-icono{

        width:80px;

    }

}

/*==================================================
            CONTACTOS - CARRUSEL
==================================================*/

.contactos-carrusel-titulo{

    display:flex;
    align-items:center;
    gap:10px;

    margin:45px 0 25px;

}

.contactos-carrusel-titulo img{

    width:18px;

}

.contactos-carrusel-titulo h3{

    margin:0;

    color:#173A84;

    font-size:26px;

    font-weight:700;

    text-transform:uppercase;

}

/*====================================*/

.contactos-carrusel{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

}

/*====================================*/

.contactos-slider{

    width:1220px;

    overflow:hidden;

}

/*====================================*/

.contactos-track{
    display:flex;
    gap:25px;
    will-change:transform;
    transition:transform .45s ease;
}

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

.contacto-card{

    flex:0 0 calc(50% - 13px);

    background:#F7F7F7;

    border:1px solid #E4E4E4;

    border-radius:12px;

    padding:22px;

    display:flex;

    align-items:flex-start;

    gap:22px;

    box-shadow:

    0 8px 18px rgba(0,0,0,.08);

    transition:.30s;

}

.contacto-card:hover{

    transform:translateY(-4px);

    box-shadow:

    0 15px 28px rgba(0,0,0,.12);

}

/*====================================
ICONO PERSONA
====================================*/

.persona{

    width:80px;

    flex-shrink:0;

}

/*====================================
INFORMACIÓN
====================================*/

.persona-info{

    flex:1;

}

.persona-info h4{

    margin:0 0 4px;

    color:#173A84;

    font-size:20px;

    font-weight:700;

}

.persona-info span{

    display:block;

    margin-bottom:15px;

    color:#666;

    font-size:15px;

    font-weight:600;

}

.persona-info p{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin:8px 0;

    color:#666;

    font-size:15px;

    line-height:1.4;

}

.persona-info p img{

    width:18px;

    margin-top:2px;

}

.persona-info a{

    color:#666;

    text-decoration:none;

}

.persona-info a:hover{

    color:#173A84;

}

/*====================================
FLECHAS
====================================*/

.contacto-prev,
.contacto-next{

    width:52px;
    height:52px;

    border:none;

    background:transparent;

    cursor:pointer;

    transition:.30s;

}

.contacto-prev img,
.contacto-next img{

    width:42px;

    display:block;

}

.contacto-prev:hover,
.contacto-next:hover{

    transform:scale(1.12);

}

/*====================================
DOTS
====================================*/

.contactos-dots{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:25px;

}

.contactos-dots span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#A8A8A8;

    transition:.30s;

}

.contactos-dots span.active{

    background:#F08A2A;

}

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

@media(max-width:1200px){

    .contactos-slider{

        width:850px;

    }

}

@media(max-width:991px){

    .contactos-slider{

        width:100%;

    }

    .contacto-card{

        flex:0 0 100%;

    }

}

@media(max-width:768px){

    .contacto-card{

        flex-direction:column;

        text-align:center;

        align-items:center;

    }

    .persona{

        width:90px;

    }

    .persona-info p{

        justify-content:center;

    }

}

@media(max-width:576px){

    .contactos-carrusel{

        gap:8px;

    }

    .contacto-prev,
    .contacto-next{

        width:40px;
        height:40px;

    }

    .contacto-prev img,
    .contacto-next img{

        width:32px;

    }

    .contactos-carrusel-titulo h3{

        font-size:22px;

    }

}