/* Establece el ancho del acordeón. Establece el margen a 90px en la parte superior e inferior y auto a la izquierda y derecha */

.caja {

  height:550px;
  background-color:white;
  overflow:scroll;

  

}
.acordeon.contenedor {

  color:black;
  background-color: white;
 	margin:8px;
}



/* 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 {
  position: relative;
  padding: 10px 0;
  font-size: 16px;
  color: black;
  cursor: pointer;
}
/* Posiciona el signo más a 5px de la derecha. Lo centra utilizando la propiedad transform. */

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

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



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

.acordeon hr {
  width: 100;
  margin-left: 0;
  border: 1px solid white;
}
/* Posiciona el signo más a 5px de la derecha. Lo centra utilizando la propiedad transform. */

.acordeon .etiqueta::before {
  content: '+';
  color: black;
  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;
  background-color:white;
 	margin:2px;
  font-size: 13px;
  text-align: justify;
 width:398px;
  overflow: hidden;
  transition: 0.5s;
    border-radius:10px;
    	border-bottom-left-radius:3px;
	border-bottom-right-radius:3px;

}

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

.acordeon hr {
  width: 100;
  margin-left: 0;
  border: 1px solid white;
}
/* Muestra la parte de contenido cuando está activa. Establece la altura */

.acordeon .contenedor.activa .contenido {
  height: 450px;
  	margin:8px;
}

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

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