@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");

/*Encabezado-titulo-contenido*/
header {
  background-image: url(../img/servicios-ambientales/consultoria-ambiental/fondo.jpg);
}

/* div.titulo > div > h1 {
  font-size: 3em;
}

div.titulo > div {
  padding: 1.2em 4.2em;
  border-radius: 85px;
} */

/*--------------*/
/* Enunciado */
/*--------------*/

.contenedor-enunciado {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.imagen-enunciado {
  position: relative;
  width: 51rem;
}

.contenedor-enunciado > p {
  position: absolute;
  width: 614px;
  transform: translateX(-33px);
  font-family: "Quicksand";
  font-size: 1.25rem;
  text-align: center;
}

.figura-atras {
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
  background-color: #f59c20;
  transform: rotateX(-0.3deg) rotateY(0.5deg) rotateZ(-5deg) skewX(347deg)
    translateZ(-3px);
  margin: auto;
  box-shadow: 3px 9px 6px rgb(138 138 138 / 39%);
}

@media only screen and (max-width: 991px) {
  .imagen-enunciado {
    min-width: 690px;
  }
  .contenedor-enunciado > p {
    width: 538px;
    transform: translateX(-27px);
    line-height: 25px;
  }
}

@media only screen and (max-width: 699px) {
  .imagen-enunciado {
    display: none;
  }
  .contenedor-enunciado > p {
    position: relative;
    padding: 10px;
    transform: none;
    background-color: #ffffffd5;
    border: 3px solid #1d6e2b;
    box-shadow: 0px 7px 0px rgb(138 138 138 / 39%);
  }
  .figura-atras {
    display: block;
  }
}

/*--------------*/
/* Contenido */
/*--------------*/

.contenedor-item {
  align-items: center;
}

.item {
  position: relative;
  display: flex;
  align-items: center;
  margin: auto;
  width: 556px;
}

.item > p {
  position: absolute;
  width: 69%;
  left: 14%;
  text-align: center;
  font-size: 1.3rem;
  font-family: "Quicksand", sans-serif;
  font-weight: bold;
}

.item > img {
  width: 100%;
}

.contenedor-foto {
  text-align: center;
}

.contenedor-foto > img {
  position: relative;
  width: 425px;
  animation: latidos 2s infinite;
}

@keyframes latidos {
  from {
    transform: none;
  }
  50% {
    transform: scale(1.05);
  }
  to {
    transform: none;
  }
}

@media only screen and (max-width: 580px) {
  .item {
    width: 100%;
    min-width: 330px;
  }
  .item > p {
    font-size: 0.9rem;
  }
  .contenedor-foto > img {
    width: 100%;
  }
}

@media only screen and (max-width: 390px) {
  .item > p {
    line-height: 16px;
  }
}