@import url("https://fonts.cdnfonts.com/css/poppins");
@import url("https://fonts.cdnfonts.com/css/raleway-5");
@import url("https://fonts.cdnfonts.com/css/lobster-2");

:root {
  --rojo: #fa0007;
  --blanco: #ffffff;
  --negro: #000000;
  --gris: #6a6969;
}
html {
  min-height: 100%;
  position: relative;
}
body {
  padding: 0;
  margin: 0;
  font-family: "Raleway";
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-bottom: 40px;

  /*probando*/
  display: flex;
  flex-direction: column;
  min-height: 100vh;

}
h3 {
  font-family: 'raleway' !important;
  font-weight: 700 !important;
}
.contenedor-header {
  display: flex;
 
}
.log-principal {
  width: 32%;
  padding-left: 10%;
  padding-top: 15px;
}
.texto-superior {
  width: 60%;
  margin-top: 25px;
  margin-bottom: 25px;
  min-width: calc(1em + 17vw);
}
.texto-inferior {
  width: 55%;
  margin-bottom: 33px;
}
.texto-importante {
  font-family: raleway;
  font-size: calc(1em + 2.2vw);
  /* line-height: 45px;*/
  margin-bottom: 0;
  
}
.enfasis {
  color: var(--rojo);
}

.cont-izq {
    width: 70%;
}

.informativas {
  padding-left: 10%;
  padding-top: 40px;
}

.texto {
  color: var(--gris);
  font-family: "Lobster", sans-serif;
  font-size: calc(0.2em + 1vw);
}

.botones-info {
  gap: 1rem;
  display: flex;
}
.btn-principal {

  width: calc(2em + 8vw);
  height: calc(1em + 2.8vw);
  min-width: 78px;
  min-height: 30px;
  border: none;
  background-color: var(--negro);
  color: var(--blanco);
  font-family: "Raleway";
  font-weight: 700;
  border-radius: 40px;
  /*font-size: 17px;*/
  font-size:  calc(0.4em + 1vw);
  cursor: pointer;
  transition: ease-in-out 0.2s;
}
.btn-principal:hover {
  /*width: 165px;
  height: 57px;*/
  width: calc(2em + 8.5vw);
  height: calc(1em + 2.8vw);
  transition: ease-in 0.2s;
}
.btn-principal:active {
  /* width: 145px;
    height: 54px;*/
  font-size: calc(0.2em + 1vw);
}
.btn-enfasis {
  background-color: var(--rojo) !important;
}

.cont-derecho {
  background-color: var(--rojo);
  width: 30%;
  height: 100vh;
  display: flex;
  /*align-items: center;*/
  max-height: 45em;
}
.contenedor-slider {
  margin-top: 9.2em;
}



.imagenes-portada {
    width: calc(2em + 23vw);
    border-radius: calc(2.3vw);
    margin-left: calc(-2em + -8.5vw);
}
/*Videos landing Start*/
.contenedor-area-videos {
    display: flex;
    padding-left: 10%;
}
.contenedor-video {
    margin-right: -30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  
}
.miniatura {
    display: block;
    object-fit: cover;
    width: calc(2em + 15.5vw);
    border-radius: 20px;
    box-shadow: 2px 2px 5px #999;
    position: relative;
    cursor: pointer;
}
.video-select {
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-select >.miniatura {
    width: calc(2em + 25.5vw);
    z-index: 10;
}


.ico-play {
    width: calc(1em + 4.5vw);
    position: absolute;
    z-index: 11;
    cursor: pointer;
}
.ico-play:hover {
    width: calc(1em + 5vw);
}

.video-select:hover>.ico-play{
    width: calc(1em + 5vw);
}
/*Videos landing End*/

/*Area de reclutamiento Start*/
.contenedor-cajitas {
    margin-right: 50px;
    margin-left: 50px;
    display: flex;
    gap: 3%;
    justify-content: space-evenly;
}
.cajita {
    box-shadow: 1px 1px 8px 0px #b0aeae;
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 40px;
    padding: 30px;
}
.contenedor-texto-superior {
    display: flex;
    justify-content: center;
}

.rec-texto-superior {
    font-size: calc(1em + 1.8vw);
    margin-top: 3pc;
}
.img-iconito {
    width: 5em;
}
.texto-principal-cajita {
   
    font-size: calc(1em + 0.6vw);
    font-weight: 600;
    margin-top: 15px;
    margin-bottom: 15px;
}
/*Area de reclutamiento End*/

/*Area de Pensamiento Start*/
.area-pensamiento {
    background-color: var(--rojo);
    height: calc(1em + 16vh);
    display: flex;
    flex-direction: column;
    margin-top: 4pc;
    padding: 10%;
    justify-content: center;
}
.pensamiento-texto {
    color: var(--blanco);
    font-size: calc(1em + 1.2vw);
}
.contenedor-pensamiento-texto {
    display: flex;
    text-align: center;
}
.contenedor-pensamiento-autor {
    display: flex;
    text-align: center;
    justify-content: center;
}
.pensamiento-autor {
    font-size: calc(1em + 1.0vw);
    color: var(--blanco);
    font-style: italic;
  
}
/*Area de Pensamiento End*/

/*Informacion Adcional Start*/
.contenedor-informacion-adicional {
    display: flex;
    margin-left: 7%;
    margin-right: 7%;
    margin-top: 3pc;
    margin-bottom: 3pc;
    gap: 8%;
}
.img-unica {
    width: calc(1em + 31vw);
    border-radius: 33px;
}
.lado-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40%;
}
.cont-img-grupo {
    display: flex;
}
.cont-img-grupo {
    display: flex;
    gap: 5%;
    margin-top: 5%;
}
.img-grupo {
    width: calc(1em + 20vw);
    height: calc(1em + 18vh);
    border-radius: 33px;
    object-fit: cover;
}
.titulo-informativo {
    font-size: calc(1em + 1.8vw);
   
    font-weight: 700;
}
.parrafo-informativo {
    font-size: calc(1em + 0.2vw);
    text-align: justify;
}


/*Informacion Adcional End*/





/*--------------------------------MEDIA QUERIES POR DISPOSITIVOS START:----------------------------------*/

/*Pantalla grande*/

@media (min-width: 999px) and (max-width: 2000px) {
  .texto-importante {
    font-size: calc(1em + 1.8vw);
}

.btn-principal {
  width: calc(2em + 6vw);
  height: calc(1em + 2.4vw);
  Font-size: calc(0.4em + 0.7vw);
}
  .texto-importante:hover{
    font-size: calc(1em + 1.8vw);
}

.btn-principal:hover {
  width: calc(2em + 6vw);
  height: calc(1em + 2.4vw);
}
  }
/*-----------------------------------------Tablets------------------------------*/

@media (min-width: 750px) and (max-width: 899px) {
  .cont-derecho {
    max-height: 35em;
    }
  }
/*-----------------------------------------Mobiles-------------------------------*/
  
@media (min-width: 499px) and (max-width: 749px) {
  .cont-derecho {
    max-height: 30em;
    }
    .texto-importante {
      font-size: calc(1em + 1.4vw);
      }
      .contenedor-slider {
        margin-top: 6.2em;
    }
  }
  
@media (min-width: 299px) and (max-width: 649px) {
  .cont-derecho {
    max-height: 25em;
    }
    .texto-importante {
      font-size: calc(1em + 1.3vw);
      }
      .contenedor-slider {
        margin-top: 5.9em;
    }
  }




/*----------------------------------BOTONES FLOTANTES REDES SOCIALES START------------------------------------------*/
/* Estilos para los botones flotantes */
.social-buttons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  
}

.social-buttons a {
display: flex;
justify-content: center;
text-decoration: none;
align-items: center;
margin-bottom: 10px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #333;
color: #fff;
text-align: center;
line-height: 50px;
font-size: 24px;
transition: background-color 0.3s ease;
}
.social-buttons a:hover{
text-decoration: none;
}

.social-buttons a:hover {
  background-color: #555;
}

/* Estilos para los iconos de redes sociales */
.social-buttons a i {
  display: block;
}

.social-buttons a i.fa-facebook {
  color: white;
}

.social-buttons a i.fa-twitter {
  color: white;
}

.social-buttons a i.fa-youtube {
  color: white;
}
/*----------------------------------BOTONES FLOTANTES REDES SOCIALES END------------------------------------------*/



/*--------------------------------MEDIA QUERIES GENERALES START:----------------------------------*/

/*Pantalla grande*/

@media (min-width: 999px) and (max-width: 2000px) {
  .texto-importante {
    font-size: calc(1em + 1.8vw);
}
}


/*Pequeña pequeña*/
@media (min-width: 299px) and (max-width: 900px) {
.contenedor-header {
  display: flex;
  margin-bottom: 20px;
}


}
@media (min-width: 199px) and (max-width: 400px) {
.contenedor-header {
  display: flex;
  margin-bottom: 20px;
}

.contenedor-cajitas {
 
  flex-direction: column;
  display: flex;
  gap: 23px;
  align-items: center;
  justify-content: space-evenly;
}

.cajita {
   width: 75%; 
}

.img-iconito {
  width: 4.5em;
}

.contenedor-informacion-adicional {
  display: flex;
  margin-left: 7%;
  margin-right: 7%;
  margin-top: 3pc;
  margin-bottom: 3pc;
  gap: 8%;
  flex-direction: column;
  align-items: center;
}


.img-unica {
  width: calc(1em + 60vw);
  
}

.img-grupo {
  width: calc(1em + 27vw);
  height: calc(1em + 25vh);

}
}