/* Global properties */

.acordeon .etiqueta::before {
    content: '+';
    color: rgb(85, 210, 241);
    position: absolute;
    margin-top: 17px;
    left: 330px;
    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: #4568dc;
    height: 0;
    text-align: justify;
    width: auto;
    overflow: hidden;
    transition: 0.5s;
    font-family:sans-serif;
    color:#ffffff;
  }
  
  /* Añade una línea horizontal entre los contenidos */
  
  .acordeon hr {
    width: 100;
    margin-left: 0;
    border: 1px solid #000328;
  }

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

.acordeon .contenedor.activa .contenido {
  height: auto;
}

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

.acordeon .contenedor.activa .etiqueta::before {
  color: rgb(241, 85, 85);
  content: '-';
  font-size: 35px;
}