/* =========================================================
   CIDMED - PREGUNTAS FRECUENTES
   Diseño aislado para no modificar style.css
   ========================================================= */

#faq.faq {
    position: relative;
    padding: 100px 0;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7faf9 52%,
            #f4f7fb 100%
        );

    overflow: hidden;
}

/* =========================================================
   DECORACIÓN DE FONDO
   ========================================================= */

#faq.faq::before {
    content: "";

    position: absolute;
    width: 430px;
    height: 430px;

    left: -220px;
    top: 20%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(88, 171, 149, 0.10) 0%,
            rgba(88, 171, 149, 0.035) 45%,
            transparent 72%
        );

    pointer-events: none;
}

#faq.faq::after {
    content: "";

    position: absolute;
    width: 400px;
    height: 400px;

    right: -220px;
    bottom: -200px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(52, 74, 108, 0.09) 0%,
            rgba(52, 74, 108, 0.025) 48%,
            transparent 72%
        );

    pointer-events: none;
}

/* =========================================================
   CONTENEDOR
   ========================================================= */

#faq.faq .container {
    position: relative;
    z-index: 2;
}

/* =========================================================
   TÍTULO
   ========================================================= */

#faq.faq .section-title {
    position: relative;

    margin-bottom: 55px;

    text-align: center;
}

#faq.faq .section-title h2 {
    position: relative;

    display: inline-block;

    margin: 0;
    padding-bottom: 18px;

    color: #2d405f;

    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.4px;

    text-transform: none;
}

/* Línea verde */
#faq.faq .section-title h2::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 58px;
    height: 3px;

    border-radius: 10px;

    background: #58ab95;

    transform: translateX(-50%);
}

/* Detalle azul */
#faq.faq .section-title h2::before {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 18px;
    height: 3px;

    border-radius: 10px;

    background: #344a6c;

    transform: translateX(-50%);

    z-index: 1;
}

/* =========================================================
   LISTA
   ========================================================= */

#faq.faq .faq-list {
    max-width: 950px;

    margin: 0 auto;
    padding: 0;

    list-style: none;
}

/* =========================================================
   ITEM
   ========================================================= */

#faq.faq .faq-list li {
    position: relative;

    margin-bottom: 14px;

    background: rgba(255, 255, 255, 0.95);

    border: 1px solid rgba(52, 74, 108, 0.08);

    border-radius: 16px;

    box-shadow:
        0 7px 25px rgba(45, 64, 95, 0.045);

    overflow: hidden;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

/* Hover del item */
#faq.faq .faq-list li:hover {
    border-color: rgba(88, 171, 149, 0.18);

    box-shadow:
        0 12px 30px rgba(45, 64, 95, 0.075);
}

/* =========================================================
   PREGUNTA
   ========================================================= */

#faq.faq .faq-list .question {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 70px;

    padding: 20px 70px 20px 40px;

    cursor: pointer;

    color: #344a6c;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.45;

    transition:
        color 0.3s ease,
        background 0.3s ease;
}

/* Barra lateral al pasar */
#faq.faq .faq-list .question::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 3px;
    height: 0;

    border-radius: 0 5px 5px 0;

    background: #58ab95;

    transform: translateY(-50%);

    transition: height 0.3s ease;
}

#faq.faq .faq-list li:hover .question::before {
    height: 30px;
}

/* =========================================================
   ICONO CHEVRON
   ========================================================= */

#faq.faq .faq-list .question .icon-show,
#faq.faq .faq-list .question .icon-close {
    position: absolute;

    right: 25px;
    top: 50%;

    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 16px;

    transform: translateY(-50%);

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

/* Flecha cerrada */
#faq.faq .faq-list .question .icon-show {
    color: #58ab95;

    background: rgba(88, 171, 149, 0.10);
}

/* Flecha abierta */
#faq.faq .faq-list .question .icon-close {
    color: #ffffff;

    background: #58ab95;
}

/* Hover */
#faq.faq .faq-list li:hover .question .icon-show {
    background: rgba(88, 171, 149, 0.17);
}

/* =========================================================
   ESTADO ABIERTO
   ========================================================= */

#faq.faq .faq-list .question:not(.collapsed) {
    color: #2d405f;

    background:
        linear-gradient(
            90deg,
            rgba(88, 171, 149, 0.055),
            rgba(255, 255, 255, 0)
        );
}

#faq.faq .faq-list .question:not(.collapsed)::before {
    height: 38px;
}

/* =========================================================
   RESPUESTA
   ========================================================= */

#faq.faq .faq-list .collapse {
    border-top: 1px solid rgba(52, 74, 108, 0.06);
}

#faq.faq .faq-list .collapse p {
    margin: 0;

    padding: 22px 28px 25px;

    color: #687487;

    font-size: 14px;
    font-weight: 400;

    line-height: 1.8;
}

/* =========================================================
   LINKS DENTRO DE RESPUESTAS
   ========================================================= */

#faq.faq .faq-list .collapse p a {
    color: #58ab95;

    font-weight: 600;

    text-decoration: none;

    transition: color 0.25s ease;
}

#faq.faq .faq-list .collapse p a:hover {
    color: #344a6c;
    text-decoration: underline;
}

/* =========================================================
   STRONG
   ========================================================= */

#faq.faq .faq-list .collapse p strong {
    color: #344a6c;
    font-weight: 700;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1199px) {

    #faq.faq {
        padding: 85px 0;
    }

    #faq.faq .section-title {
        margin-bottom: 45px;
    }

    #faq.faq .faq-list {
        max-width: 900px;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    #faq.faq {
        padding: 70px 0;
    }

    #faq.faq .section-title {
        margin-bottom: 35px;
    }

    #faq.faq .section-title h2 {
        font-size: 30px;
    }

    #faq.faq .faq-list {
        width: 100%;
    }

    #faq.faq .faq-list li {
        margin-bottom: 11px;

        border-radius: 14px;
    }

    #faq.faq .faq-list .question {
        min-height: 64px;

        padding: 18px 58px 18px 20px;

        font-size: 15px;
    }

    #faq.faq .faq-list .question .icon-show,
    #faq.faq .faq-list .question .icon-close {
        right: 17px;

        width: 30px;
        height: 30px;

        font-size: 14px;
    }

    #faq.faq .faq-list .collapse p {
        padding: 19px 20px 22px;

        font-size: 13.5px;
        line-height: 1.75;
    }
}

/* =========================================================
   MOBILE PEQUEÑO
   ========================================================= */

@media (max-width: 575px) {

    #faq.faq {
        padding: 55px 0;
    }

    #faq.faq .section-title h2 {
        font-size: 27px;
    }

    #faq.faq .faq-list .question {
        font-size: 14.5px;
        line-height: 1.5;
    }

    #faq.faq .faq-list .collapse p {
        font-size: 13px;
        line-height: 1.7;
    }
}

/* =========================================================
   REDUCIR ANIMACIONES
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #faq.faq .faq-list li,
    #faq.faq .faq-list .question,
    #faq.faq .faq-list .question::before,
    #faq.faq .faq-list .question .icon-show,
    #faq.faq .faq-list .question .icon-close,
    #faq.faq .faq-list .collapse p a {
        transition: none;
    }
}

#faq.faq .faq-list .question {
    padding-right: 55px;
}

#faq.faq .faq-list .question .icon-show,
#faq.faq .faq-list .question .icon-close {
    left: auto !important;
    right: 18px !important;
}

#faq.faq .faq-list li .collapse p,
#faq.faq .faq-list li .collapsing p {
    font-family: "Montserrat", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
}

#faq.faq .faq-list .question {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 600 !important;
}

/* =========================================================
   TIPOGRAFÍA ESTABLE DEL FAQ
   Evita cambios visuales durante el collapse
   ========================================================= */

#faq.faq,
#faq.faq .faq-list,
#faq.faq .faq-list li,
#faq.faq .faq-list .question,
#faq.faq .faq-list .collapse,
#faq.faq .faq-list .collapsing,
#faq.faq .faq-list .collapse p,
#faq.faq .faq-list .collapsing p {
    font-family: "Montserrat", sans-serif !important;
}

#faq.faq .faq-list .question {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
}

#faq.faq .faq-list .collapse p,
#faq.faq .faq-list .collapsing p {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
}