/* Acordeón reutilizable y flexible */
.acordeon-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 32px auto;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  background: #f7f7f9;
  border: 1px solid #e0e0e0;
  overflow: hidden;
}
.acordeon-item {
  border-bottom: 1px solid #e0e0e0;
  background: #fff;
}
.acordeon-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  cursor: pointer;
  font-size: 1.08rem;
  font-weight: 500;
  color: #222;
  background: #f7f7f9;
  transition: background 0.2s;
  border: none;
  outline: none;
  width: 100%;
  text-align: left;
  position: relative;
  min-height: 56px;
}
.acordeon-header:hover, .acordeon-header:focus {
  background: #e5e5ea;
}
.acordeon-header .acordeon-icon {
  color: #348CB2;
  font-size: 1.3em;
  transition: color 0.2s, transform 0.3s;
  margin-left: 16px;
}
.acordeon-header.open .acordeon-icon {
  color: #E6220D;
  transform: rotate(90deg);
}
.acordeon-header .fa-plus,
.acordeon-header .fa-minus {
  display: none;
}
.acordeon-header:hover .fa-plus {
  display: inline-block;
}
.acordeon-header.open .fa-plus {
  display: none;
}
.acordeon-header.open .fa-minus {
  display: inline-block;
  transform: rotate(90deg);
}
.acordeon-header.open .fa-chevron-down {
  display: none;
}
.acordeon-header:not(.open) .fa-chevron-down {
  display: inline-block;
}
.acordeon-header:not(.open):hover .fa-chevron-down {
  display: none;
}
.acordeon-content {
  background: #fff;
  color: #333;
  font-size: 1rem;
  line-height: 1.6;
  padding: 0 24px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s cubic-bezier(.68,-0.55,.27,1.55);
  box-sizing: border-box;
  border-top: 1px solid #e0e0e0;
  /* animación rebote: se activa con clase .acordeon-content.open */
}
.acordeon-content.open {
  padding: 18px 24px 24px 24px;
  max-height: none;
  animation: acordeon-bounce 0.7s cubic-bezier(.68,-0.55,.27,1.55);
}
@keyframes acordeon-bounce {
  0% { transform: scaleY(0.7) translateY(-30px); }
  60% { transform: scaleY(1.05) translateY(10px); }
  80% { transform: scaleY(0.98) translateY(-6px); }
  100% { transform: scaleY(1) translateY(0); }
}
/* Sombra extra al abrir */
.acordeon-content.open {
  box-shadow: 0 6px 24px rgba(52,140,178,0.07);
}
/* Responsive */
@media (max-width: 600px) {
  .acordeon-container { max-width: 100%; }
  .acordeon-header, .acordeon-content { padding-left: 12px; padding-right: 12px; }
}