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

.contenedor-gral {
    max-width: 1200px; 
    margin: auto;
  }
  
  .contenedor {
    position: relative;
    height: 500px;
    overflow: hidden;
    margin: 20px 0;
    justify-items: center;  /* Se utiliza cuand hay problemas de alineación */
  }
  
  .parallax {
    position: absolute;
    width:100%;
    background-image: url(/img/laboratorio-calibracion.png);
    background-size: cover;
    height: 100vh;
    z-index: -2;
  }
  
  .titulo {
    color: white;
    font-size: 2em;
    text-shadow: 3px 3px 2px #272727;
    text-align: center;
    max-width: 600px;
    margin-top: 190px;
  }
  
  .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 400px: */
  @media (max-width: 400px) {
    .contenedor {
      height: 430px;
    }
    .parallax {
      height: 70vh;
    }
    .titulo {
      margin-top: 90px;
    }
    
    .sencamer {
      /* position: absolute; */
      margin-top: 30px;
      margin-left: 35px;
    }
  }
  
  
  /*=============== Final Estilos de efecto Parallax en Cabecera  ===============*/

  .conte {
    margin: auto;
    /* background: burlywood; */
    height: max-content;
    padding: 1%;
    /* justify-content: center; */
    /* align-items: center; */
  }
  
  .pri {
     height: 100px;
     background: rgb(0, 204, 255);
     width: 100%;
     margin-bottom: 2%;
     margin-top: 2%;
  }
  
  .segu {
     /* background: rgb(0, 255, 34); */
     /* height: 200px; */
     width: 100%;
     /* padding-top: 1%;
     padding-bottom: 1%; */
     /* background-color: aqua; */
     height: 100px;
  }
  
  .foto {
     background: rgb(255, 72, 0);
     height: 200px;
     width: 40%;
  }
  
  .parrafo {
     background: rgb(204, 0, 255);
     height: 200px;
     width: 60%;
     
  }
  
  .tres {
     display: flex;
     /* background: rgb(251, 255, 0); */
     /* height: 150px; */
     justify-content: center;
     gap: 3%;
     width: 100%;
     padding-top: 2%;
     padding-bottom: 2%;
  }

  .cont-fichas {
    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%;
  }

  .cont-fichas .card {
    width: 22rem !important;
  }

  .cont-fichas a:hover {
    opacity: 0.8; 
  }  
  .cont-fichas p {
    font-size: 0.8em;
    margin-bottom: -2%;
  }
  .segu {
     display: flex;
  }
  
  .ficha1 {
     background: chocolate;
     width: 30%;
     height: 150px;
  }
  
  .ficha2 {
     background: rgb(210, 30, 99);
     width: 30%;
     height: 150px;
  }
  
  .ficha3 {
     background: rgb(16, 247, 139);
     width: 30%;
     height: 150px;
  }