<div id="faqs">
  <section class="accordion">
    <div class="accordion-element">
      <input type="checkbox" id="check1" />
      <label for="check1"><span class="label-text">¿De verdad funciona la terapia online? </span> <span class="accordion-indicator"> </span></label>
      <article>
        <p>
          Sí, se ha demostrado que su eficacia es equiparable a la presencial. El desarrollo de la motivación y el esfuerzo del usuario es la clave para seguir un buen proceso terapéutico, indiferentemente de la vía de actuación.
        </p>
      </article>
    </div>
    <div class="accordion-element">
      <input type="checkbox" id="check2" />
      <label for="check2"><span class="label-text">¿Cuánto tiempo debo hacer terapia?</span> <span class="accordion-indicator"> </span></label>
      <article>
        <p>Nunca se sabe. Esta es la respuesta más sincera que encontraras. Hay personas que necesitan un acompañamiento terapéutico más tiempo que otras, ahora bien, des de Montero Psicología siempre se realiza un feedback al usuario exponiendo sobre su proceso y sus avances para que sea consciente de en que punto se encuentra.</p>
      </article>
    </div>
    
    <div class="accordion-element">
      <input type="checkbox" id="check3" />
      <label for="check3"><span class="label-text">¿Hay posibilidad de cambiar día y hora de la sesión si ya la he escogido?</span> <span class="accordion-indicator"> </span></label>
      <article>
        <p>Sí, siempre que sea con un plazo de 24 horas, puedes comunicar a través del correo a tu terapeuta el cambio sin ningún problema.</p>
      </article>
    </div>
    
    <div class="accordion-element">
      <input type="checkbox" id="check4" />
      <label for="check4"><span class="label-text">¿Si no puedo asistir a mi sesión, debo pagarla igualmente?</span> <span class="accordion-indicator"> </span></label>
      <article>
        <p>Si la cancelación se produce a menos de 24 horas de la fecha prevista, se debe abonar íntegramente el importe. Ahora bien, si la modificación se efectúa con más de 24 horas de antelación, ¡la cancelación es gratuita!</p>
      </article>
    </div>
    
    <div class="accordion-element">
      <input type="checkbox" id="check5" />
      <label for="check5"><span class="label-text">¿Si empiezo haciendo terapia presencial y por distintos motivos (laboral, familiar…) me va mejor hacerlo online, puedo cambiar?</span> <span class="accordion-indicator"> </span></label>
      <article>
        <p>Sí, por supuesto. Montero Psicología ofrece tanto la opción presencial como online, la adaptación del profesional a cada caso siempre tiene en cuenta tus preferencias.</p>
      </article>
    </div>
  </section>
</div>

* { font-family: 'Ubuntu', sans-serif;}
h1 { text-align: center; color: darkblue; }

#faqs {
  padding: 12px;
  label { 
    color: #659E9A;
    word-break: break-word;
    // min-height: 48px;
    
    .label-text {
      display: inline-block;
      max-width: 90%;
    }
    .accordion-indicator {
      vertical-align: middle;
    }
  }
  
  .accordion {
    max-width: 800px;
    margin: 0 auto;
    input {
      display: none;
    }
    label {
      font-size: 20px;
      font-weight: 600;
      background: #fefefe;
      border-radius: .4em;
      cursor: pointer;
      display: block;
      margin-bottom: .125em;
      padding: .5em;
      z-index: 20;
      span.accordion-indicator {
        transition: all 0.4s;
        width: 13px;
        height: 13px;
        margin-top: 5px;
        margin-right: 5px;
        display: inline-block;
        border: solid #282828;
        border-width: 0 2.5px 2.5px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        float: right;
      }
    }
    .accordion-element {
      margin-bottom: 5px;
      border-radius: .4em;
      margin-top: 24px;
    }
    label:hover, .accordion-element:hover {
      background: #f5f5f5;
    }
    input:checked + label > i{
      transition: all 0.25s;
      &.fa::before, &.fa {
        content: "\f068";
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    input:checked + label {
      background: #f0f0f0;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
      color: #282828;
      margin-bottom: 0;
      span.accordion-indicator { 
        -webkit-transform: rotate(225deg);
        -ms-transform: rotate(225deg);
        transform: rotate(225deg);
        margin-top: 10px;
      }
    }
    article {
      background: #fefefe;
      border-bottom-left-radius: .25em;
      border-bottom-right-radius: .25em;
      border-bottom: 2px solid #f0f0f0;
      border-left: 2px solid #f0f0f0;
      border-right: 2px solid #f0f0f0;
      overflow: hidden;
      z-index: 10;
      transition: max-height .25s;
    }
    input:not(:checked) ~ article {
      max-height: 0;
    }
    input:checked ~ article {
      height: auto;
      max-height: 500px;
      margin-bottom: .125em;

    }
    article p {
      padding: 1em;
    }
  }
}