@font-face {
    font-family: 'kenyan';
    src: url('fuentes/kenyan.ttf');
}
@font-face {
    font-family: 'roboto';
    src: url('fuentes/Roboto-Light.ttf');
}

:root {
   --main-base-clara:  #f3f3f3 ;
   --main-base-media:  #fbdd04;
   --main-gris-base:  #51527b   ;
   --main-base-oscura:  #1c5b6c   ;
   --main-azul-claro:  #3481c4   ;
   --main-azul-oscuro: #2c4394    ;

}
/** efecto entrada **/
  .entrada{
    opacity: 0;
    max-height: auto;
    overflow: hidden;
    animation-name:animacion;
    animation-duration:1s;
    opacity: 1;}
    
@keyframes animacion {
    0% {opacity: 0;}
    20% {opacity: 0.2;}
    40% {opacity: 0.4;}
    60% {opacity: 0.6;}
    80% {opacity: 0.8;}
    100% {opacity: 1;}
}
/** fin de entrada **/
.oculto{display: none;} 
.vacio{border: 1px solid red;}
.cabecera{
    background: var(--main-base-media);
    vertical-align: middle; !important
}
.img_trabajador{
    background-position: center center;
    width: 75px;
    height: 75px;
    object-fit: contain;
}
.img_trabajador:hover{
    cursor: pointer;
}
.span_rojo{
    font-weight: bold;
    color: red;
}
.caja-consutas{
    border: 2px solid var(--main-azul-oscuro);
    background: var(--main-base-media);
    color: var(--main-azul-oscuro);
    font-size: 16px;
    padding-bottom: 30px;
    padding-top: 10px;
    border-radius: 20px 20px;
}
a .fa{
    color: var(--main-base-oscura);
}
h1{
    color: var(--main-azul-oscuro);
    font-weight: bold;
}
body{
    position: relative;
    min-height: 100vh;
    padding-bottom: 98px;
}
.raya{
    background: var(--main-azul-oscuro);
    height: 1px;
}
.caja-superior{
     background: var(--main-azul-claro);
}
.text_cabecera{
    margin-left: 30px;
    padding-top: 12px;
    font-size: 15px;
    color: var(--main-base-clara);
}
.link_sup_redes{
     padding-top: 15px;
    font-size: 17px;
    color: var(--main-base-clara);
}
.link_sup_redes:hover{
    color: var(--main-azul-oscuro);
}
.nav-link2{
    color: white;
    font-weight: normal;
    font-size: 20px;
}
.nav-link2:hover{
    color: var(--main-azul-claro);
    text-decoration: none;
}
.w-100{
    
    background: var(--main-base-oscura);
    object-fit: cover;
    height: 500px;
    object-position: center;
}
.titulo_slider{
    font-family: 'roboto';
    font-size: 60px;
    font-weight: bold;
}
.subtitulo_slider{
    font-family: 'roboto';
    font-size: 30px;
    font-weight: normal;
}
.caja-izq{
    background: var(--main-azul-oscuro);
    color: white;
}
.text_izq{
    font-size: 50px;
    font-weight: bold;
     font-family: 'kenyan';
}
.caja-icono{
    background: var(--main-base-media);
}
.icono-seccion{
    color: var(--main-base-oscura);
    font-size: 60px;
}
.label-numero{
    color: var(--main-azul-claro);
    font-size: 30px;
    font-weight: normal;
       font-family: 'kenyan';
}
.label-descrip{
    color: var(--main-base-oscura);
    font-size: 15px;
    font-weight: normal;
      font-family: 'roboto';
}
.texto-descrip{
    font-size: 25px;
    color: var(--main-base-oscura);
    font-family: 'roboto';
}
.img_portada{
    object-fit: cover;
    height: 600px;
    object-position: top;
    width: 100%;
}

.text_dere{
    font-size: 60px;
    font-weight: bold;
     font-family: 'kenyan';
     color: var(--main-azul-claro);
}
.subtitulo_caja_dere{
      font-family: 'roboto';
    font-size: 30px;
    font-weight: normal;
    color: var(--main-base-oscura);
    font-weight: bold;
}
.btn-contactanos{
    background: var(--main-azul-oscuro);
    color: var(--main-base-media);
    height: 40px;
    border-radius: 22px 22px;
    border: 2px solid  var(--main-azul-oscuro);
    font-size: 18px;
    padding: 5px 15px;
}
.btn-contactanos:hover{
    background: var(--main-base-media);
    color: var(--main-azul-oscuro);
}
.parrafo_bottom{
    color: var(--main-base-oscura);
    font-size: 16px;
}
.link_bottom_redes{
     padding-top: 15px;
     font-size: 30px;
     color: var(--main-base-oscura);
}
.link_bottom_redes:hover{
    color: var(--main-azul-claro);
}
.link_bottom{
     color: var(--main-azul-claro);
}
.link_bottom:hover{
     color: var(--main-base-clara);
     text-decoration: none;
}
.caja_menu_sup{
    position: fixed;
    z-index: 1000;
    top: 0px;
    width: 100vw;
}
.relleno{
    height: 122.5px;
}
.footer{
    position: absolute;
    bottom: 0px;
    background: var(--main-azul-oscuro);
}
.caja-formu{
    background: var(--main-base-media);
    border-radius: 15px 15px;
}
.input-form{
    outline: none;
    height: 40px;
    border-radius: 8px 8px;
    border: 1px solid var(--main-azul-claro);
    color: var(--main-azul-oscuro);
    background: white;
}
.input-form2{
    outline: none;
     border-radius: 10px 10px;
    border: 1px solid var(--main-base-oscura);
    color: var(--main-base-oscura);
    background: var(--main-base-clara);
}
label{
    font-size: 16px;
    font-family: 'roboto';
    color: var(--main-azul-claro) ;
}
.caja-producto{
    border-radius: 10px 10px;
    border: 1px solid var(--main-azul-oscuro); 
}
.caja-producto:hover{
        border: 1px solid var(--main-azul-claro);
        cursor: pointer;
}
.img-prod{
    object-fit: cover;
    height: 300px;
    object-position: center center;
    width: 100%;
}
@media (max-width: 992px) {
.nav-item{
    border-bottom: 1px solid var(--main-base-oscura);
}
.w-100{
    background: var(--main-base-oscura);
    object-fit: cover;
    height: 250px;
    object-position: center;
}
.label-numero{
    font-size: 20px;
}
.label-descrip{
    font-size: 16px;
}
.text_izq {
    font-size: 35px;
}
}

@media (max-width: 650px) {
 .img-prod{
    object-fit: cover;
    height: 200px;
    object-position: center center;
    width: 100%;
}
.label-numero{
    font-size: 18px;
}
.label-descrip{
    font-size: 14px;
}
.text_izq {
    font-size: 30px;
}
.w-100{
    margin-top: 35px;
    background: var(--main-base-oscura);
    object-fit: cover;
    height:173px;
    object-position: center;
}
}
@media (max-width: 600px) {
body{
    padding-bottom: 142px;
}}
@media (max-width: 490px) {
 .img-prod{
    object-fit: cover;
    height: 160px;
    object-position: center center;
    width: 100%;
}
}

//----------------------------PANEL--------------------------------------------------------
.text-principal{
    color: var(--main-azul-claro);
        font-size: 80px;
    font-weight: bold;
     font-family: 'kenyan';
}
.caja_text_principal{
    padding-top: 30vh;
}

.barra-lateral{

    min-height: 100vh;
    background: white;
    box-shadow: 0px 0px 25px -10px var(--main-azul-claro) ;
}
.card{
    color: black;
    border-top-width: 0px;
    border-bottom-width: 0px;
   font-family: 'roboto';
}
.items h5 {
    color: var(--main-azul-claro);
    cursor: pointer;
}
.titulo-sub-items{
    color: var(--main-base-oscura);
}

.titulo-sub-items:hover, .titulo-sub-items-activo{
    color: var(--main-base-media);
    cursor: pointer;
}
.barra_superior{
    height: 70px;
    padding-top: 16px;
    background: var(--main-azul-oscuro);
    color: white;
    font-size: 20px;
    
}

.label_superior{
    color: var(--main-base-media);
}
.label_superior:hover{
    text-decoration: none;
    color: white;
    cursor: pointer;
}
.caja-opcion{
    background: var(--main-base-media);
    border: 3px solid var(--main-base-media);
    border-radius: 20px 20px;
    height: 150px;

    object-fit: cover;
     background-position: center center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 0px;
}

.caja-opcion:hover{
    background: var(--main-base-media) ;
    object-fit: cover;
     background-position: center center;
    border: 3px solid var(--main-azul-oscuro);
    border-radius: 20px 20px;
    cursor: pointer;
}
.img-opc{
    height: 180px;
      object-fit: cover;
      object-position: center;
}
.div_supe{
 height: 70px;
background: var(--main-base-media);
padding-bottom: 10px;
}
.title_entrada{
    font-size: 45px;
     font-family: 'kenyan';
     color: var(--main-azul-claro);
}
.img_galeria{
      height: 155px;
      width: 130px;
      object-fit: cover;
      object-position: center;
      margin-left: 10px;
      margin-right: 10px;


}
.img_tabla{
    height: 55px;
      width: 50px;
      object-fit: cover;
      object-position: center; 
      border: 1px solid var(--main-azul-oscuro);
      border-radius: 10px 10px;
}
//--------------------------- FIN PANEL ---------------------------------------------------