/*=============== Estilos de efecto Parallax y todo lo del diseño  ===============*/

:root {
  --header-height: 3.5rem;
  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: hsl(220, 68%, 54%);
  --first-color-lighten: hsl(220, 68%, 97%);
  --title-color: hsl(220, 48%, 28%);
  --text-color: hsl(220, 12%, 45%);
  --grey-tex-color: hsl(0, 0%, 64%);
  --body-color: hsl(220, 100%, 99%);
  --color: #ffffff;
  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Poppins", sans-serif;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;
  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;
  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

.contenedor-gral {
    max-width: 1200px;
    margin: auto;
    margin-top: 5%;
  }

  .contenedor {
    position: relative;
    height: 50vh;
    overflow: hidden;
    justify-items: center;  /* Se utiliza cuand hay problemas de alineación */
  }

  .parallax {
    position: absolute;
    width:120%;
    background-image: url(/img/paginas/Empresa.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 80vh;
    z-index: -2;
  }

  .titulo {
    position: relative;
    color: white;
    font-size: 3em;
    text-shadow: 3px 3px 2px #272727;
    text-align: center;
    max-width: 600px;
    margin-top: 100px;
  }

  .cont-leyenda {
    justify-items: center;  /* Se utiliza cuand hay
                               problemas de alineación */
  }

  .leyenda {
    color: rgb(209, 219, 223);
    font-size: 1.2em;
    text-shadow: 1px 1px #272727;
    text-align: center;
    max-width: 500px;
    margin-top: 10px;
  }

  .sencamer {
    position: absolute;
    margin-top: -230px;
    margin-left: 50px;
    z-index: -1;
  }

  /* aplicará estilos solo si el ancho
     del viewport de su navegador es igual
     o menor que 500px: */
  @media (max-width: 500px) {
    .contenedor {
      height: 30vh;
    }
    .parallax {
      width:100%;
      background-size:cover;
      height: 30vh;
    }
    .titulo {
      font-size: 2.5em;
    }

    .sencamer {
      margin-top: 30px;
      margin-left: 35px;
    }
  }

  /*=============== Final Estilos de efecto Parallax en Cabecera  ===============*/

  /*=============== Estilos de maqueta de colores  ===============*/
.conte {
  margin: auto;
  /* background: burlywood; */
  height: max-content;
  width: 100%;
  padding: 1%;
  /* justify-content: center; */
  /* align-items: center; */
}

.pri {
   position: relative;
   height: 100px;
   background: rgb(0, 204, 255);
   width: 100%;
   margin-bottom: 2%;
   margin-top: 2%;
}

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

.segu {
  width: 100%;
  height: 100px;
  background-color: rgb(209, 209, 209);
  display: flex;
}

.cuerpo-ppal {
   /* background: rgb(255, 72, 0); */
   height: max-content;
   width: 70%;
   padding: 0;
}

.cuerpo-ppal .card {
   width: 15rem !important;
}

.barra-lateral {
   /* background: rgb(255, 115, 0); */
   height: fit-content;
   width: 30%;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   flex-direction: row;
   gap: 2%;
   padding-top: 3%;
   padding-bottom: 2%;
}

.tres {
   display: flex;
   flex-wrap: wrap;
   /* background: rgb(251, 255, 0); */
   height: fit-content;
   justify-content: center;
   gap: 3%;
   width: 100%;
   padding-top: 2%;
   padding-bottom: 2%;
}

.card {
   width: 20rem !important;
}

.ficha1 {
   background: rgb(218, 218, 218);
   width: 15rem;
   height: 150px;
   margin-top: 3%;
}

.ficha2 {
  background: rgb(218, 218, 218);
   width: 15rem;
   height: 150px;
   margin-top: 3%
}

.ficha3 {
  background: rgb(218, 218, 218);
   width: 15rem;
   height: 150px;
   margin-top: 3%
}

@media (max-width: 500px) {
  .cont-wrap {
    display: block;
  }
 .cuerpo-ppal {
    width: 100%;
    padding: 3%;
  }

  .cuerpo-ppal .card {
    width: 22rem !important;
  }
  .barra-lateral{
    justify-content: center;
    width: 100%;
  }

  .ficha1, .ficha2, .ficha3  {
    width: 25rem;
  }

  .card {
    width: 22rem !important;
  }


}

/*=============== final de Estilos de maqueta de colores  ===============*/

/* =============== Menu de la estructura de la hoja =================== */

.menu-struc{
  margin: 2% 0;
}

.menu-struc a{
  color: var(--grey-tex-color);
}
.menu-items {
  display: inline-flex;

}

.menu2::before {
  content: ">";
  margin: 3px;
}

.menu1:hover, .menu2:hover{
  color: var(--text-color)
}

/* ============ final Menu de la estructura de la hoja ================== */

.p-normal {
  /* Parrafo Normal  */
  margin: 25px 0;
  font-size: 0.9em;
  margin-right: 5%;

}
.cuerpo-ppal ol {
  list-style: disc;
  font-size: 0.9em;
  margin-top: 0%;
  margin-left: 3%;
}

.cuerpo-ppal h2 {
  font-size: 1.6em; 
}

.cuerpo-ppal li {
  margin-bottom: 0%;
}

.titulo-centrado {
  text-align: center;
  font-family: 'Arial Narrow', Arial, sans-serif;
  width: 100%;
  background-color: rgb(216, 234, 240);
  color: #272727;
  margin-bottom: 4%;
}

/* ============ final de los estilos del diseño "nosotros" ================== */
/*Todo lo que se inserte después de estos estilos deberá ir en un css aparte*/
/*Lo que se altere por encima de este aviso no debe alterar al grupo de hojas "nosotros"*/