.faqs-wrapper {
  display: flex;
  gap: 40px;
}

.faq-column {
  flex: 1;
}

.faq-item {
  border-bottom: 1px solid #ddd;
  padding: 0px 0;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  font-weight: bold;
  padding: 10px;
  
  transition: background 0.3s ease;
}

.faq-question:hover {
  background: #efefef;
}

.faq-icon {
     font-weight: bold;
    transition: transform 0.3s 
ease;
    background: #3a322f;
    border-radius: 100px;
    padding: 5px 7px 0px;
    font-size: 12px;
    color: #fff;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

.faq-answer {
  display: none;
  padding: 15px 10px 10px;
  background: #fff;
}

.faq-item.active .faq-answer {
  display: block;
}

/* Mantener icono alineado aun cuando el título haga wrap */
.faq-question {
  display: flex;
  align-items: center;         /* centra verticalmente icono y texto */
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;             /* opcional: indica interactividad */
  padding: 0.5rem 0;           /* ajusta según tu tema */
}

/* Permite que el texto ocupe el espacio disponible y haga wrap */
.faq-question .faq-title {
  flex: 1 1 auto;
  word-break: break-word;      /* evita desbordes largos sin espacios */
  margin-right: 0.5rem;        /* separa del icono en navegadores antiguos */
}

/* Mantiene el icono en su tamaño sin estirarse */
.faq-question .faq-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;               /* ajusta si usas otros iconos */
  height: 1.5rem;
}

/* Opcional: transición y rotación del icono cuando se abre/cierra */
.faq-item.open .faq-icon i {
  transform: rotate(180deg);
  transition: transform 0.25s ease;
}
.faq-icon i {
  transition: transform 0.25s ease;
}

@media (max-width: 768px) {
    .faqs-wrapper {
        display: flex;
        flex-direction: column;
		 gap: 0px;
    }

    .faqs-wrapper .faq-column {
        width: 100% !important;
        display: block;
    }

    .faqs-wrapper.columns-2 .faq-column,
    .faqs-wrapper.columns-3 .faq-column,
    .faqs-wrapper.columns-4 .faq-column {
        width: 100% !important;
    }
}