@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap');

.acordeon {
  width: 100%;
  color: #ffffff;
  margin: 0px auto 50px;
  padding: 25px 45px;
  background: #084f8f;
}

.acordeon .contenedor {
  position: relative;
    color: #ffffff;
  margin: 10px 10px;
    background: #084f8f;
}

/* Posiciona las etiquetas en relación con el contenedor. Añade relleno en la parte superior e inferior y aumenta el tamaño de la fuente. También hace que su cursor sea un puntero */

.acordeon .etiqueta {
  color: #ffffff;
  position: relative;
  padding: 5px 0;
  font-size: 23px;
  cursor: pointer;
}
/* Posiciona el signo más a 5px de la derecha. Lo centra utilizando la propiedad transform. */

.acordeon .etiqueta::before {
  content: '+';
  color: #ffffff;
  position: absolute;
  top: 50%;
  right: -5px;
  font-size: 30px;
  transform: translateY(-50%);

}

/* Oculta el contenido (altura: 0), disminuye el tamaño de la fuente, justifica el texto y añade la transición */

.acordeon .contenido {
  position: relative;
  height: 0;
  font-size: 15px;
  text-align: justify;
  width: 98%;
  overflow: hidden;
  transition: 0.5s;
}

/* Añade una línea horizontal entre los contenidos */

.acordeon hr {
  width: 100%;
  margin-left: 0;
  border: 0,5px solid #ffffff;
}

/* Muestra la parte de contenido cuando está activa. Establece la altura */

.acordeon .contenedor.activa .contenido {
  height: 100%;
}

/* Cambia de signo positivo a negativo una vez activado */

.acordeon .contenedor.activa .etiqueta::before {
  content: '-';
  font-size: 30px;

}