/* Preguntas del Área [zem_area_questions] — ver inc/shortcodes/area-questions.php */

.zem-area-questions__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid color-mix(in srgb, currentColor 40%, transparent);
}

.zem-area-questions__item {
    border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent);
}

.zem-area-questions__summary {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 18px 0;
    cursor: pointer;
    list-style: none;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.38;
}

.zem-area-questions__summary::-webkit-details-marker {
    display: none;
}

.zem-area-questions__number {
    font-size: 12px;
    color: #B8860B;
}

.zem-area-questions__question {
    flex: 1;
}

.zem-area-questions__chevron {
    flex: none;
    transition: transform 0.2s ease;
}

.zem-area-questions__details[open] .zem-area-questions__chevron {
    transform: rotate(90deg);
}

.zem-area-questions__answer {
    padding: 0 0 20px 46px;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.38;
}

.zem-area-questions__answer > :first-child { margin-top: 0; }
.zem-area-questions__answer > :last-child { margin-bottom: 0; }

/* Color del texto, líneas y chevrón (todo usa currentColor). Blanco por el diseño sobre fondo oscuro;
   se puede cambiar por sección de Elementor con --zem-area-questions-color en CSS personalizado. */
.zem-area-questions {
    color: var(--zem-area-questions-color, #fff);
}

@media (max-width: 767px) {
    /* Medidas de Figma móvil (393px): fila con padding 16px 4px, gap 16px, borde 0.5px; pregunta 13px, número 6px. */
    .zem-area-questions__list,
    .zem-area-questions__item {
        border-color: #fff;
        border-width: 0.5px;
    }

    .zem-area-questions__summary {
        gap: 16px;
        padding: 16px 4px;
        font-size: 13px;
    }

    .zem-area-questions__number {
        font-size: 6px;
    }

    .zem-area-questions__answer {
        padding-left: 26px;
        font-size: 13px;
    }
}