/* Estilos exclusivos de /ayuda/2.3. Todo va scoped bajo .px-help-faq para no
   pisar style.help.css ni style.help.2.3.css, que comparten el resto de las
   paginas de ayuda. */

.px-help-faq.bg-image-v2 {
    background: #F6F2FE;
    padding: 40px 0 60px;
}

.px-help-faq.bg-image-v2:before {
    background: #F6F2FE !important;
}

.px-help-faq .px-help-faq-wrap {
    font-family: "Open Sans", Arial, sans-serif;
    margin: 80px auto 0;
    max-width: 820px;
    text-align: left;
    width: 100%;
}

.px-help-faq .cabezal {
    margin-bottom: 20px;
    padding-top: 0 !important;
    text-align: left;
}

.px-help-faq .cabezal h2 {
    color: #110027 !important;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin: 0 0 6px;
    padding-bottom: 0;
}

.px-help-faq .cabezal h2:after {
    display: none;
}

.px-help-faq .cabezal h4 {
    color: rgba(17, 0, 39, .6) !important;
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.55;
    margin: 0;
}

.px-help-faq a {
    color: #7026DC;
}

.px-help-faq a:hover,
.px-help-faq a:focus {
    color: #5A1BB0;
}

/* Cards: las usan el panel estatico de Bootstrap y los modulos dinamicos */

.px-help-faq .px-faq-card {
    background: #fff;
    border: 1px solid rgba(17, 0, 39, .10);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(17, 0, 39, .04);
    margin-bottom: 10px;
    overflow: hidden;
    transition: border-color .18s, box-shadow .18s;
}

.px-help-faq .px-faq-card.is-open {
    border-color: #7026DC;
    box-shadow: 0 10px 28px rgba(112, 38, 220, .10);
}

.px-help-faq .px-faq-topic {
    align-items: center;
    display: flex;
    gap: 16px;
    padding: 20px 22px;
    text-decoration: none !important;
}

.px-help-faq .px-faq-topic-txt {
    flex: 1;
    min-width: 0;
}

.px-help-faq .px-faq-topic-title {
    color: #110027;
    display: block;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

.px-help-faq .px-faq-topic-meta {
    color: rgba(17, 0, 39, .55);
    display: block;
    font-size: 12.5px;
    line-height: 1.4;
    margin-top: 4px;
}

.px-help-faq .px-faq-chev {
    align-items: center;
    background: #F3EDFD;
    border-radius: 50%;
    color: #7026DC;
    display: flex;
    flex: none;
    height: 30px;
    justify-content: center;
    transition: transform .22s;
    width: 30px;
}

.px-help-faq .px-faq-card.is-open > .px-faq-topic .px-faq-chev,
.px-help-faq .px-faq-topic.accordion-toggle:not(.collapsed) .px-faq-chev {
    transform: rotate(180deg);
}

/* Links a otras secciones de ayuda */

.px-help-faq .px-faq-jump {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(17, 0, 39, .10);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(17, 0, 39, .04);
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
    padding: 20px 22px;
    text-decoration: none !important;
    transition: border-color .18s, box-shadow .18s;
}

.px-help-faq .px-faq-jump:hover {
    border-color: #7026DC;
    box-shadow: 0 10px 28px rgba(112, 38, 220, .10);
}

.px-help-faq .px-faq-jump-title {
    color: #110027;
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    min-width: 0;
}

.px-help-faq .px-faq-chev-next {
    transform: rotate(-90deg);
}

/* Cuerpo del panel estatico */

.px-help-faq .px-faq-static {
    color: #2B1B47;
    font-size: 15.5px;
    line-height: 1.65;
    padding: 0 22px 18px;
}

.px-help-faq .px-faq-static p {
    color: #2B1B47;
    font-size: 15.5px;
    line-height: 1.65;
    margin: 0 0 12px;
}

.px-help-faq .px-faq-static ul {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.px-help-faq .px-faq-static ul li {
    padding-left: 18px;
    position: relative;
}

.px-help-faq .px-faq-static ul li:before {
    background: #7026DC;
    border-radius: 50%;
    content: "";
    height: 6px;
    left: 0;
    position: absolute;
    top: 11px;
    width: 6px;
}

.px-help-faq .px-faq-stores img {
    margin-right: 10px;
}

/* Bloque "Consulta sobre:" con el acordeon dinamico */

.px-help-faq .px-faq-block {
    margin-top: 30px;
}

.px-help-faq .px-faq-block-title {
    color: #110027;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 14px;
}

.px-help-faq .px-faq-panel {
    animation: px-faq-in .2s ease-out;
    display: none;
    padding: 0 22px 10px;
}

.px-help-faq .px-faq-card.is-open > .px-faq-panel {
    display: block;
}

.px-help-faq .px-faq-sep {
    background: rgba(17, 0, 39, .08);
    height: 1px;
    margin-bottom: 6px;
}

.px-help-faq .px-faq-q {
    border-bottom: 1px solid rgba(17, 0, 39, .06);
}

.px-help-faq .px-faq-q:last-child {
    border-bottom: 0;
}

.px-help-faq .px-faq-q-head {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    padding: 14px 4px;
    text-decoration: none !important;
}

.px-help-faq .px-faq-q-title {
    color: #110027;
    flex: 1;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.45;
    min-width: 0;
}

.px-help-faq .px-faq-q.is-open .px-faq-q-title {
    color: #7026DC;
}

.px-help-faq .px-faq-chev-sm {
    background: none;
    height: 18px;
    margin-top: 2px;
    transition: transform .2s;
    width: 18px;
}

.px-help-faq .px-faq-q.is-open .px-faq-chev-sm {
    transform: rotate(180deg);
}

.px-help-faq .px-faq-a {
    animation: px-faq-in .2s ease-out;
    display: none;
    padding: 2px 30px 18px 4px;
}

.px-help-faq .px-faq-q.is-open .px-faq-a {
    display: block;
}

.px-help-faq .px-faq-a p {
    color: #2B1B47;
    font-size: 15.5px;
    line-height: 1.65;
    margin: 0 0 12px;
}

.px-help-faq .px-faq-steps {
    margin-bottom: 14px;
}

.px-help-faq .px-faq-step {
    align-items: flex-start;
    background: #FBFAFE;
    border-radius: 10px;
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
    padding: 11px 14px;
}

.px-help-faq .px-faq-step:last-child {
    margin-bottom: 0;
}

.px-help-faq .px-faq-step-n {
    align-items: center;
    background: #7026DC;
    border-radius: 50%;
    color: #fff;
    display: flex;
    flex: none;
    font-size: 11.5px;
    font-weight: 600;
    height: 22px;
    justify-content: center;
    width: 22px;
}

.px-help-faq .px-faq-step-dot {
    background: #7026DC;
    border-radius: 50%;
    flex: none;
    height: 7px;
    margin: 8px 0 0 7px;
    width: 7px;
}

.px-help-faq .px-faq-step-txt {
    color: #110027;
    font-size: 14.5px;
    line-height: 1.5;
}

@keyframes px-faq-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media screen and (max-width: 767px) {

    .px-help-faq .px-help-faq-wrap {
        margin-top: 0px;
    }

    .px-help-faq.bg-image-v2 {
        padding: 24px 0 48px;
    }

    .px-help-faq .cabezal h2 {
        font-size: 20px;
    }

    .px-help-faq .px-faq-topic,
    .px-help-faq .px-faq-jump {
        gap: 12px;
        padding: 16px;
    }

    .px-help-faq .px-faq-topic-title,
    .px-help-faq .px-faq-jump-title {
        font-size: 16px;
        line-height: 1.35;
    }

    .px-help-faq .px-faq-panel {
        padding: 0 16px 8px;
    }

    .px-help-faq .px-faq-static {
        padding: 0 16px 16px;
    }

    .px-help-faq .px-faq-q-title {
        font-size: 14.5px;
    }

    .px-help-faq .px-faq-a {
        padding-right: 18px;
    }

    .px-help-faq .px-faq-a p,
    .px-help-faq .px-faq-static p,
    .px-help-faq .px-faq-static {
        font-size: 14.5px;
    }
}