/* ==========================================================================
   FAQs Landing - Estilos dedicados
   Colores: #0C2340 (azul oscuro), #0ED6EF (turquesa), #f5f5f5 (fondo)
   Fuentes: HurmeGeometricSans1 (regular, semibold, bold)
   ========================================================================== */

/* --- Seccion principal --- */
#faqsLandingSec {
    position: relative;
    padding: 0 98px;
    margin-bottom: var(--section-separation);
    overflow: hidden;
}

/* --- FAQs Box (contenedor flex de menu + contenido) --- */
#faqsLandingSec .faqsBox {
    display: flex;
    border: 1px solid #ddd;
}

/* --- Menu lateral de categorias --- */
#faqsLandingSec .faqsMenu {
    width: 100%;
    max-width: 380px;
    padding: 32px;
}

#faqsLandingSec .faqsMenu ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

#faqsLandingSec .faqsMenu ul > li {
    margin: 0 0 14px 0;
    font-family: 'HurmeGeometricSans1', sans-serif;
    font-size: 1.125rem;
    color: #999;
    line-height: 1.75rem;
}

#faqsLandingSec .faqsMenu ul > li:last-child {
    margin-bottom: 0;
}

#faqsLandingSec .faqsMenu ul > li > a {
    text-decoration: none;
    transition: color 0.25s ease;
    font-family: 'HurmeGeometricSans1SemiBold', sans-serif;
    font-size: 1.125rem;
    color: #0C2340;
    line-height: 1.4rem;
}

#faqsLandingSec .faqsMenu ul > li > a:hover {
    color: #0ED6EF;
    text-decoration: none;
}

#faqsLandingSec .faqsMenu ul > li > a.active {
    color: #0ED6EF;
    text-decoration: none;
}

/* --- Contenido de FAQs --- */
#faqsLandingSec .faqsCont {
    width: 100%;
    padding: 32px;
    border-left: 1px solid #ddd;
}

/* --- Categorias show/hide --- */
#faqsLandingSec .faqCategoryItems {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

#faqsLandingSec .faqCategoryItems.show {
    display: block;
    opacity: 1;
}

/* --- Accordion items --- */
#faqsLandingSec .accordion-item {
    margin-bottom: 4px;
    border-left: 3px solid #ddd;
    transition: 0.25s ease;
}

#faqsLandingSec .accordion-item:hover {
    border-color: #0C2340;
}

/* --- Accordion header --- */
#faqsLandingSec .accordion-header h3 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin: 0;
    padding: 18px 10px 18px 24px;
    background-color: transparent;
    font-family: 'HurmeGeometricSans1SemiBold', sans-serif;
    font-size: 1.125rem;
    color: #0C2340;
    line-height: 1.4rem;
    cursor: pointer;
    user-select: none;
    transition: color 0.25s ease;
}

#faqsLandingSec .accordion-header h3:hover,
#faqsLandingSec .accordion-header h3:not(.collapsed) {
    color: #0ED6EF;
}

#faqsLandingSec .accordion-header h3:after {
    display: none;
}

/* --- Icono + que rota a x --- */
#faqsLandingSec .accordion-header h3 .arrow {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    transition: 0.3s ease-in-out;
}

#faqsLandingSec .accordion-header h3:not(.collapsed) .arrow {
    transform: rotate(45deg);
}

/* --- Borde activo del item expandido --- */
#faqsLandingSec .accordion-item:has(.accordion-header h3:not(.collapsed)) {
    border-color: #0ED6EF;
}

/* --- Accordion body --- */
#faqsLandingSec .accordion-body {
    padding: 0 20px 18px 24px;
    opacity: 0;
}

#faqsLandingSec .collapsing .accordion-body,
#faqsLandingSec .collapse.show .accordion-body {
    animation: faqsFadeIn 0.8s both;
}

#faqsLandingSec .accordion-body p {
    margin: 0 0 15px 0;
    font-family: 'HurmeGeometricSans1', sans-serif;
    font-size: 1rem;
    color: #555;
    line-height: 1.625rem;
}

#faqsLandingSec .accordion-body p:last-child {
    margin-bottom: 0;
}

#faqsLandingSec .accordion-body ul {
    margin: 0 0 15px 0;
    padding-left: 20px;
    font-family: 'HurmeGeometricSans1', sans-serif;
    font-size: 1rem;
    color: #555;
    line-height: 1.625rem;
}

#faqsLandingSec .accordion-body a {
    color: #0ED6EF;
}

@keyframes faqsFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==========================================================================
   BREAKPOINT: Desktop Grande (> 1920px)
   ========================================================================== */
@media (min-width: 1921px) {
    #faqsLandingSec .faqsMenu {
        max-width: 450px;
    }
}

/* ==========================================================================
   BREAKPOINT: Desktop (992px - 1920px)
   ========================================================================== */
@media (min-width: 992px) and (max-width: 1920px) {
    #faqsLandingSec {
        padding: 0 32px;
        margin-bottom: var(--section-separation);
    }

    #faqsLandingSec .faqsMenu {
        max-width: 340px;
    }
}

/* ==========================================================================
   BREAKPOINT: Tablet / Mobile (< 992px)
   ========================================================================== */
@media (max-width: 991px) {
    #faqsLandingSec {
        padding: 0 15px;
        margin-bottom: var(--section-separation-mobile);
    }

    #faqsLandingSec .faqsBox {
        flex-direction: column;
    }

    #faqsLandingSec .faqsMenu {
        max-width: 100%;
        padding: 15px;
    }

    #faqsLandingSec .faqsMenu ul > li {
        margin: 0 0 10px 0;
        font-size: 1rem;
        line-height: 1.375rem;
    }

    #faqsLandingSec .faqsCont {
        padding: 15px;
        border-left: none;
        border-top: 1px solid #ddd;
    }

    #faqsLandingSec .accordion-header h3 {
        padding: 15px 5px 15px 18px;
        font-size: 1rem;
        line-height: 1.25rem;
    }

    #faqsLandingSec .accordion-body {
        padding: 0 10px 15px 18px;
    }

    #faqsLandingSec .accordion-body p {
        font-size: 0.9375rem;
        line-height: 1.4rem;
    }
}