/* Quitar sombra del header en página FAQ */
.ortoer-faq .ortoer-header {
    box-shadow: none;
}

/* Reset box-sizing para todas las secciones FAQ */
.ortoer-faq-banner,
.ortoer-faq-banner *,
.ortoer-faq-stripe,
.ortoer-faq-content,
.ortoer-faq-content * {
    box-sizing: border-box;
}

/* ========================================
   FAQ - Banner
   ======================================== */

/* Banner foto */
.ortoer-faq-banner {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    background-color: #E1EEFF;
    padding: 40px 20px;
}

.ortoer-faq-banner__container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.ortoer-faq-banner__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Franja azul */
.ortoer-faq-stripe {
    width: 100%;
    height: 43px;
    background-color: #0360D9;
}

/* ========================================
   FAQ - Contenido
   ======================================== */
.ortoer-faq-content {
    width: 100%;
    background-color: #FFFFFF;
    padding: 60px 20px;
}

.ortoer-faq-content__container {
    max-width: 1100px;
    margin: 0 auto;
}

.ortoer-faq-content__title {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0;
    color: #0A1B3D;
    margin: 0 0 40px;
}

.ortoer-faq-content__category {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0.1em;
    color: #0A1B3D;
    margin: 40px 0 24px;
}

.ortoer-faq-content__item {
    margin-bottom: 32px;
}

.ortoer-faq-content__question {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #0A1B3D;
    margin: 0 0 8px;
    background: none;
    border: none;
    padding: 0;
    cursor: default;
    text-align: left;
    width: 100%;
    display: block;
    line-height: inherit;
}

.ortoer-faq-content__answer {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #0A1B3D;
    margin: 0;
    border: 1px solid #021526;
    padding: 16px 20px;
    border-radius: 4px;
    max-width: 100%;
    word-wrap: break-word;
}

.ortoer-faq-content__icon {
    display: none;
}

.ortoer-faq-content__icon svg {
    width: 28px;
    height: 28px;
    vertical-align: middle;
    margin-right: 6px;
}

/* Remove yellow tap highlight on mobile browsers */
.ortoer-faq-content__question:focus,
.ortoer-faq-content__question:active {
    outline: none;
    background: none;
    -webkit-tap-highlight-color: transparent;
}

/* Mobile */
@media (max-width: 768px) {
    .ortoer-faq-banner {
        padding: 0;
        background-color: #E1EEFF;
    }

    .ortoer-faq-content {
        padding: 40px 16px;
    }
    .ortoer-faq-content__title {
        font-size: 22px;
        line-height: 1.2;
    }
    .ortoer-faq-content__category {
        font-size: 18px;
        font-style: italic;
        letter-spacing: 0;
    }

    .ortoer-faq-content__icon {
        display: inline;
    }

    .ortoer-faq-content__question {
        cursor: pointer;
    }

    .ortoer-faq-content__question,
    .ortoer-faq-content__answer {
        font-size: 15px;
    }

    /* Accordion mobile */
    .ortoer-faq-content__answer-wrap {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    .ortoer-faq-content__item.is-open .ortoer-faq-content__answer-wrap {
        max-height: 500px;
    }

    /* Rotate + icon to x when open */
    .ortoer-faq-content__icon svg {
        transition: transform 0.3s ease;
    }
    .ortoer-faq-content__item.is-open .ortoer-faq-content__icon svg {
        transform: rotate(45deg);
    }

    .ortoer-faq-banner__img {
        margin: 20px 0;
    }

    .ortoer-faq-stripe {
        height: 20px;
    }
}

@media (max-width: 480px) {
    .ortoer-faq-stripe {
        height: 14px;
    }
}