@import url('https://fonts.googleapis.com/css2?family=Changa:wght@400;500;600;700&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=PT+Serif&family=Poppins:wght@900&family=Roboto&display=swap');

  body{
    background-color: #ECF6FE;;
}
body, h1, h2, h3, h4, h5{
    font-family: 'Changa';
    color:#777777;
}

h1{font-size: 30px; color: #008FFF; font-weight: 600;}
h2{font-size: 24px; font-weight: 600;}
h3{font-size: 22px;}
h4{font-size:18px;}
h5{font-size:16px;}
p {
    font-size:16px;
    color: #777777;
}
.menu-link {
    font-size: 20px;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.bg-primary{
    background-color: #008FFF!important;
}

.color-white a{
    color:#ffffff;
}

.color-white a:hover{
    color:white;
}
.white{
    color:white;
}

.menu{
    height: 83px;
}
.menu li > a::after {
    content: "";
    display: block;
    margin: auto;
    height: 3px;
    width: 0;
    top: 5px;
    background: transparent;
    transition: all 0.3s;

}

.menu li > a:hover::after, li > a.active-nav::after {
    width: 100%;
    background: #FCB036;

}

.menu .btn-primary{
    background-color:#FCB036;
    border-radius: 30px;
    padding: 5px 10px;
    color: white;
    width: 153px;
    height: 36px;
    box-shadow:  0px 3px 6px #00000029, 0px 3px 6px #00000029;
    text-align: center;
    margin-left: 30px;
    text-transform: uppercase;


}

.btn-primary{
    background-color:#FCB036;
    border-radius: 30px;
    padding: 5px 20px;
    color: white;
    box-shadow:  0px 3px 6px #00000029, 0px 3px 6px #00000029;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;

}



.navbar-expand-lg .navbar-nav .nav-link{
    padding-left: 40px;
    padding-right: 40px;
}

/*
.bg-banner{
    background-image: url('/img/banner-entel.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size:contain;
    height: 650px;
    background-color: #FDBD1A;
}
*/


  .bg-banner {
      position: relative;
      background-color: #FDBD1A;
      height: 510px;
      overflow: hidden;
  }

  .video-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
  }

  .bg-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }


@media (max-width: 991px) {
    .bg-banner{
        /*background-image: url('/img/banner-mobile.jpg');*/
        background-size:cover;
        height: 600px!important;
        display: none; /* Oculta el video en dispositivos móviles */

    }

    .video-container {
        display: none; /* Oculta el video en dispositivos móviles */
    }


    .rectangulo {
        position: relative;
        top: 112px!important;
        left: 5px!important;
        width: 347px!important;
        height: 437px!important;
  }

}

.bg-banner .container{
    height: 650px;
}

.bg-banner p{
    margin-bottom:20px;
}


.rectangulo{
    position:relative;
    top: 182px;
    left: 0px;
    width: 437px;
    height: 357px;
    /* UI Properties */
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 18px;
    opacity: 0.92;
    padding:48px;
}

.franja{
    background-color: #B0D6F4;
    height: 40px;
}

.box-beneficios{
    height: 302px;
    background: #D8EBFA;
    border-radius: 14px;
}

.box-beneficios h3{
    margin-top:40px;
    margin-bottom:60px;
}

.btn-salud, .btn-servicios, .btn-educacion, .btn-convenios{
    box-shadow:  0px 1px 1px #00000029, 0px 3px 6px #00000029!important;
    border-radius: 18px;
    display: block;
    text-decoration: none;
    padding: 5px 20px;
    color:white;
    max-width: max-content;
    margin:auto;
    margin-top:-20px;
}
.btn-salud:hover, .btn-servicios:hover, .btn-educacion:hover, .btn-convenios:hover{
    color:white;
}
.btn-salud{
    background: #fc9b00!important;
}

.btn-educacion{
    background-color: #00A89C!important;
}

.btn-convenios{
    background-color: #008FFF!important;
}

.btn-servicios{
    background-color: #92278E!important;
}

/*Acordeon*/
.accordion-flush .accordion-item .accordion-button{
    background-color: #D4E6F4;
    color:#008FFF;
}

.accordion-button:not(.collapsed){
    color: white!important;
    background-color: #008FFF!important;
}

.accordion-flush .accordion-collapse{
    box-shadow: 0px 3px 6px #00000029!important;
    border-radius: 0px 0px 9px 9px;
}

.accordion-item{
    margin-bottom: 15px;
}

footer textarea.form-control{
    height: 90px!important;
    min-height: 90px!important;
}

/*TAB - ACORDEON*/

.nav-tabs, .accordion-item{
    border-bottom:0px;
}
.nav-tabs .nav-link{
    background-color: #D4E6F4;
    color: #008FFF;
    width: 100%;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
    background-color: #008FFF!important;
    color:white!important;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active, .accordion-item{
    border:0px;
}

.nav-tabs .nav-link{
    border:0px;
    border-radius: 0px;
}

.tab-porque.nav-item{
    width:33.333%;
}

.accordion-body{
    padding: 40px;
}
@media (max-width: 991px) {
    .tab-content>.tab-pane {
      display: block;
      opacity: 1;
    }
  }
  /*FIN TAB - ACORDEON*/


.nombre-equipo{
    color:#777777;
    font-size:16px;
    font-weight: 400;
    margin-top:10px;
    margin-bottom:0px;
}

.cargo-equipo{
    margin-top:0;
}

.modal-equipo{
    background-color: transparent;
    border:none;
}

.modal.modal-equipo .modal-body, .modal.modal-equipo .modal-header{
    background-color: #E0F1FC;
}

.modal-header{
    border-bottom: 0px;
}

.modal-dialog{
    max-width: 1120px;
}

.modal-body{
    padding:40px;
}

.modal-salud{
    width: 100%;
    border:0px;
    background-color: transparent;
}

#salud .modal-body, #salud .modal-header{
    background-color: #fff4d3;
}

#salud .accordion-flush .accordion-item .accordion-button{
    background-color: #fc9b00;
    color: #ffffff;
    width: 100%;
}

#salud .accordion-button:not(.collapsed){
    color: #777777!important;
    background-color: #FCB036!important;
}

#salud .accordion-flush .accordion-collapse{
    box-shadow: none!important;
    border-radius: 0px;
    background-color: #fff4d3;
}

#salud .modal-body{
    padding: 40px 0px;
}
#salud .modal-body h2.titulo-modal{
    padding-left: 20px;
}

#educacion .modal-body, #educacion .modal-header{
    background-color: #B8F7F2;
}

#educacion .accordion-flush .accordion-item .accordion-button{
    background-color: #00A89C;
    color: #ffffff;
    width: 100%;
}

#educacion .accordion-button:not(.collapsed){
    color: #ffffff!important;
    background-color: #00A89C!important;
}

#educacion .accordion-flush .accordion-collapse{
    box-shadow: none!important;
    border-radius: 0px;
    background-color: #B8F7F2;
}

#educacion .modal-body{
    padding: 40px 0px;
}
#educacion .modal-body h2.titulo-modal{
    padding-left: 20px;
}

#servicios .modal-body, #servicios .modal-header{
    background-color: #FFF2FF;
}

#servicios .accordion-flush .accordion-item .accordion-button{
    background-color: #92278E;
    color: #ffffff;
    width: 100%;
}

#servicios .accordion-button:not(.collapsed){
    color: #ffffff!important;
    background-color: #92278E!important;
}

#servicios .accordion-flush .accordion-collapse{
    box-shadow: none!important;
    border-radius: 0px;
    background-color: #FFF2FF;
}

#servicios .modal-body{
    padding: 40px 0px;
}
#servicios .modal-body h2.titulo-modal{
    padding-left: 20px;
}

#beneficiosModal {
    color: #ffffff;
}


#convenios .modal-body, #convenios .modal-header{
    background-color: #D8EBFA;
}

#convenios .accordion-flush .accordion-item .accordion-button{
    background-color: #008FFF;
    color: #ffffff;
    width: 100%;
}

#convenios .accordion-button:not(.collapsed){
    color: #ffffff!important;
    background-color: #008FFF!important;
}

#convenios .accordion-flush .accordion-collapse{
    box-shadow: none!important;
    border-radius: 0px;
    background-color: #D8EBFA;
}

#convenios .modal-body{
    padding: 40px 0px;
}
#convenios .modal-body h2.titulo-modal{
    padding-left: 20px;
}



@media (max-width: 991px) {
    .navbar .container{
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .navbar-brand{
        padding-left: 15px;
    }

    .navbar-toggler{
        margin-right: 15px!important;
    }
    .navbar-toggler-icon::after{
        content: url('img/menu.svg');

    }

    .box-beneficios {
        height: 292px;
    }
    .btn-salud, .btn-servicios, .btn-educacion, .btn-convenios{
        margin-top:-50px;
    }

    .cargo-responsive{
        display: block;
    }

    .cargo-equipo{
        color:#008FFF;
    }

    .nombre-equipo{
        font-size:20px;
    }
    .navbar-nav{
        background-color: #008FFF;
        padding: 50px 40px;
        text-align: center;
    }
    .navbar-expand-lg .navbar-nav .nav-link{
        margin:auto;
    }

}

.accordion-button::after{
    background-image: url("img/flecha-abajo.png");
}

.accordion-button:not(.collapsed)::after{
    background-image: url("img/flecha-arriba.png");
}

#salud .accordion-button::after, #educacion .accordion-button::after, #servicios .accordion-button::after, #convenios .accordion-button::after{
    background-image: url("img/flecha-abajo2.png");
}

.intranet-button {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.intranet-button:hover {
    color: #007bff !important; /* Letras azules */
    background-color: #fff; /* Fondo blanco */
    border-color: #007bff;
}

.intranet-button:focus, .intranet-button.focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.intranet-button.disabled, .intranet-button:disabled {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.intranet-button:not(:disabled):not(.disabled):active, .intranet-button:not(:disabled):not(.disabled).active,
.show > .intranet-button.dropdown-toggle {
    color: #fff;
    background-color: #0062cc;
    border-color: #0056b3;
}

.intranet-button:not(:disabled):not(.disabled):active:focus, .intranet-button:not(:disabled):not(.disabled).active:focus,
.show > .intranet-button.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}