/**
 * Sobreescritura del tema — estilos del bloque de FAQs (descategoryfaqs).
 *
 * Reemplaza por completo modules/descategoryfaqs/views/css/front.css (el tema
 * sustituye el archivo, no lo fusiona). Se mantienen intactos los selectores y
 * el mecanismo de plegado (.descfaqs--js + [aria-expanded]) que usa el JS del
 * módulo; solo cambia el aspecto para igualarlo al FAQ de la home (.home-faq).
 */

.descfaqs {
    margin: 0;
    padding-block: 56px 74px;
    background: #faf6f0;
}

.descfaqs__wrapper {
    max-width: 646px;
}

.descfaqs__title {
    margin: 0 0 25px;
    font: 600 21px/28px var(--fuente);
    text-transform: uppercase;
    letter-spacing: .02em;
    text-align: start;
    color: #333333;
}

.descfaqs__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.descfaqs__item {
    margin: 0;
    border-bottom: 1px solid #e6ddd0;
    background: transparent;
}

/* La pregunta es un <h3> en la plantilla del tema: se neutraliza el estilo
   de encabezado (margen y tamaño) para que herede el del acordeón. */
.descfaqs__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 13px 0;
    border: 0;
    background: none;
    font: 400 16px/22px var(--fuente);
    text-transform: uppercase;
    text-align: left;
    color: #333333;
    cursor: pointer;
    transition: color .3s ease;
}

.descfaqs__question:hover,
.descfaqs__question:focus,
.descfaqs__question[aria-expanded="true"] {
    background: none;
    color: var(--des-color-primary);
}

.descfaqs__question-text {
    flex: 1 1 auto;
    padding-right: 0;
}

.descfaqs__question-text a {
    text-decoration: underline;
    color: inherit;
}

.descfaqs__question-text a:hover {
    text-decoration: none;
}

/* Icono +/– como en el FAQ de la home (el módulo trae un chevron rotado). */
.descfaqs__icon {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    border: 0;
    transform: none;
    font-size: 22px;
    line-height: 1;
    color: var(--des-color-primary);
}

.descfaqs__icon::before {
    content: "+";
}

.descfaqs__question[aria-expanded="true"] .descfaqs__icon {
    transform: none;
}

.descfaqs__question[aria-expanded="true"] .descfaqs__icon::before {
    content: "–";
}

.descfaqs__answer-inner {
    padding: 0 0 18px;
    font: 400 16px/22px var(--fuente);
    color: #333333;
}

.descfaqs__answer-inner p {
    margin: 0 0 10px;
    font: inherit;
}

.descfaqs__answer-inner p:last-child {
    margin-bottom: 0;
}

/* La colapsabilidad solo se activa cuando hay JavaScript disponible: */
/* sin JS, todas las respuestas quedan visibles (mejor accesibilidad y SEO). */
.descfaqs--js .descfaqs__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.descfaqs--js .descfaqs__question[aria-expanded="true"] + .descfaqs__answer {
    max-height: 2000px;
}

@media (max-width: 767px) {
    .descfaqs {
        padding-block: 40px 48px;
    }
}