/* ============================================================
   CENTRO DE AYUDA · TICODESIGN
============================================================ */

.help-page {
    width: 100%;
    overflow: hidden;
    background: #fff;
}


/* ============================================================
   HERO
============================================================ */

.help-hero {
    position: relative;
    min-height: 720px;
    padding: 190px 28px 110px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(255,255,255,.055),
            transparent 34%
        ),
        #090909;

    color: #fff;
}

.help-hero__grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size: 64px 64px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.8),
            transparent 88%
        );

    pointer-events: none;
}

.help-hero__glow {
    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    filter: blur(120px);

    opacity: .13;

    pointer-events: none;
}

.help-hero__glow--orange {
    top: -220px;
    right: -130px;

    background: #ff6b00;
}

.help-hero__glow--green {
    left: -260px;
    bottom: -280px;

    background: #20a35a;

    opacity: .10;
}

.help-hero__inner {
    position: relative;
    z-index: 2;

    width: min(1120px, 100%);
    margin: 0 auto;

    text-align: center;
}

.help-hero__eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 28px;

    color: rgba(255,255,255,.60);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: .15em;
    text-transform: uppercase;
}

.help-hero__eyebrow-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #ff6b00;

    box-shadow:
        0 0 0 5px rgba(255,107,0,.10);
}

.help-hero__title {
    margin: 0;

    font-size: clamp(52px, 6.3vw, 98px);
    font-weight: 700;

    line-height: .94;
    letter-spacing: -.058em;
}

.help-hero__title span {
    color: #ff6b00;
}

.help-hero__lead {
    width: min(680px, 100%);

    margin:
        30px auto
        42px;

    color: rgba(255,255,255,.65);

    font-size: clamp(17px, 1.4vw, 20px);
    font-weight: 400;

    line-height: 1.65;
}


/* ============================================================
   BUSCADOR
============================================================ */

.help-search {
    display: flex;
    align-items: center;

    width: min(850px, 100%);
    min-height: 82px;

    margin: 0 auto;

    padding:
        9px 10px
        9px 27px;

    background: #fff;

    border-radius: 18px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.35),
        0 0 0 1px rgba(255,255,255,.08);
}

.help-search__icon {
    flex: 0 0 auto;

    width: 25px;
    height: 25px;

    margin-right: 16px;

    color: #929292;
}

.help-search__icon svg {
    display: block;

    width: 100%;
    height: 100%;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
}

.help-search__input {
    flex: 1;

    min-width: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: #171717;

    font-family: inherit;

    font-size: 17px;
    font-weight: 400;
}

.help-search__input::placeholder {
    color: #999;
}

.help-search__button {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    min-height: 62px;

    padding: 0 27px;

    border: 0;
    border-radius: 12px;

    background: #ff6b00;
    color: #fff;

    font-family: inherit;

    font-size: 13px;
    font-weight: 600;

    letter-spacing: .04em;

    cursor: pointer;

    transition:
        background .25s ease,
        transform .25s ease;
}

.help-search__button:hover {
    background: #e95f00;
    transform: translateY(-1px);
}

.help-search__arrow {
    font-size: 19px;
    line-height: 1;
}


/* ============================================================
   ACCESOS RÁPIDOS HERO
============================================================ */

.help-hero__quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    gap: 10px 18px;

    margin-top: 27px;

    font-size: 13px;
}

.help-hero__quick-label {
    color: rgba(255,255,255,.38);
}

.help-hero__quick a {
    position: relative;

    color: rgba(255,255,255,.72);

    text-decoration: none;

    transition: color .2s ease;
}

.help-hero__quick a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 100%;
    bottom: -4px;

    height: 1px;

    background: #20a35a;

    transition: right .25s ease;
}

.help-hero__quick a:hover {
    color: #fff;
}

.help-hero__quick a:hover::after {
    right: 0;
}

.help-hero__bottom {
    position: absolute;
    z-index: 2;

    left: 50%;
    bottom: 34px;

    transform: translateX(-50%);

    display: flex;
    align-items: center;

    gap: 15px;

    white-space: nowrap;

    font-size: 12px;
}

.help-hero__bottom > span {
    color: rgba(255,255,255,.34);
}

.help-hero__bottom a {
    display: flex;
    align-items: center;

    gap: 8px;

    color: rgba(255,255,255,.72);

    text-decoration: none;

    transition: color .2s ease;
}

.help-hero__bottom a:hover {
    color: #fff;
}

.help-hero__down {
    color: #20a35a;

    animation:
        helpDown 1.7s ease-in-out infinite;
}

@keyframes helpDown {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(4px);
    }

}


/* ============================================================
   HERO COMPACTO
============================================================ */

.help-hero--compact {
    min-height: auto;

    padding:
        125px 28px
        42px;
}

.help-hero--compact .help-hero__inner {
    width: min(1220px, 100%);

    display: grid;

    grid-template-columns:
        minmax(240px, .7fr)
        minmax(420px, 1.3fr);

    align-items: center;

    gap: 55px;

    text-align: left;
}

.help-hero__compact-label {
    display: block;

    margin-bottom: 10px;

    color: #f36b21;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: .14em;
    text-transform: uppercase;
}

.help-hero__compact-head h1 {
    margin: 0;

    color: #fff;

    font-size: clamp(30px, 3vw, 48px);
    font-weight: 700;

    line-height: 1;
    letter-spacing: -.045em;
}

.help-hero--compact .help-search {
    width: 100%;
    min-height: 64px;

    margin: 0;

    padding:
        6px 7px
        6px 20px;

    border-radius: 14px;
}

.help-hero--compact .help-search__button {
    min-height: 50px;

    padding: 0 22px;
}

.help-hero--compact .help-hero__quick,
.help-hero--compact .help-hero__bottom {
    display: none;
}

.help-hero--compact .help-hero__glow {
    opacity: .06;
}


/* ============================================================
   LISTADO DE TEMAS
============================================================ */

.help-topics {
    padding:
        110px 28px
        130px;

    background: #fff;
}

.help-topics__inner {
    width: min(1220px, calc(100% - 40px));
    margin: 0 auto;
}

.help-topics__header {
    max-width: 760px;

    margin-bottom: 60px;
}

.help-topics__eyebrow {
    margin-bottom: 14px;

    color: #f36b21;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: .14em;
    text-transform: uppercase;
}

.help-topics__title {
    margin: 0;

    color: #111;

    font-size: clamp(40px, 4vw, 64px);
    font-weight: 700;

    line-height: 1;
    letter-spacing: -.045em;
}

.help-topics__lead {
    max-width: 660px;

    margin: 22px 0 0;

    color: #777;

    font-size: 17px;
    line-height: 1.7;
}

.help-topics__list {
    border-top: 1px solid #e7e7e2;
}

.help-topic {
    position: relative;

    display: grid;

    grid-template-columns:
        80px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 25px;

    min-height: 130px;

    padding: 26px 10px;

    border-bottom: 1px solid #e7e7e2;

    color: inherit;

    text-decoration: none;

    transition:
        padding-left .25s ease,
        background .25s ease;
}

.help-topic:hover {
    padding-left: 20px;

    background: #fafaf8;
}

.help-topic__number {
    color: #aaa;

    font-size: 13px;
    font-weight: 500;
}

.help-topic__title {
    margin: 0;

    color: #171717;

    font-size: clamp(20px, 2vw, 27px);
    font-weight: 600;

    line-height: 1.25;
    letter-spacing: -.025em;

    transition: color .2s ease;
}

.help-topic:hover .help-topic__title {
    color: #f36b21;
}

.help-topic__summary {
    max-width: 730px;

    margin: 9px 0 0;

    color: #858585;

    font-size: 14px;
    line-height: 1.65;
}

.help-topic__meta {
    display: flex;
    align-items: center;

    gap: 22px;

    margin-left: 20px;

    white-space: nowrap;

    color: #aaa;

    font-size: 11px;
}

.help-topic__arrow {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    border-radius: 50%;

    background: #f3f3ef;
    color: #111;

    font-size: 19px;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.help-topic:hover .help-topic__arrow {
    background: #f36b21;
    color: #fff;

    transform: translateX(4px);
}


/* ============================================================
   PAGINACIÓN
============================================================ */

.help-pagination {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 55px;
}

.help-pagination__page,
.help-pagination__arrow {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background: #f3f3ef;
    color: #222;

    font-size: 13px;
    font-weight: 500;

    text-decoration: none;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.help-pagination__page:hover,
.help-pagination__arrow:hover {
    background: #111;
    color: #fff;

    transform: translateY(-2px);
}

.help-pagination__page.is-active {
    background: #f36b21;
    color: #fff;

    pointer-events: none;
}

.help-pagination__dots {
    display: grid;
    place-items: center;

    min-width: 28px;
    height: 42px;

    color: #999;

    font-size: 14px;
}


/* ============================================================
   BÚSQUEDA SIN RESULTADOS
============================================================ */

.help-search-empty {
    padding: 70px 30px;

    background: #f6f6f3;

    border-radius: 22px;

    text-align: center;
}

.help-search-empty__icon {
    display: grid;
    place-items: center;

    width: 52px;
    height: 52px;

    margin: 0 auto 20px;

    border-radius: 50%;

    background: #111;
    color: #fff;

    font-size: 20px;
}

.help-search-empty h3 {
    margin: 0 0 10px;

    color: #111;

    font-size: 27px;
}

.help-search-empty p {
    max-width: 500px;

    margin: 0 auto 25px;

    color: #777;

    line-height: 1.7;
}

.help-search-empty a {
    display: inline-flex;

    padding: 13px 20px;

    border-radius: 10px;

    background: #f36b21;
    color: #fff;

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;
}


/* ============================================================
   ARTÍCULO
============================================================ */

.help-article {
    width: 100%;

    padding:
        55px 28px
        110px;

    background: #fff;
    color: #171717;
}

.help-article__inner {
    width: min(1100px, calc(100% - 40px));
    margin: 0 auto;
}


/* VOLVER */

.help-article__back {
    display: inline-flex;

    margin-bottom: 28px;

    color: #6f6f6f !important;

    font-size: 13px;
    font-weight: 500;

    text-decoration: none;

    transition: color .2s ease;
}

.help-article__back:hover {
    color: #f36b21 !important;
}


/* HEADER */

.help-article__header {
    padding-bottom: 38px;

    border-bottom: 1px solid #e8e8e4;
}

.help-article__eyebrow {
    margin-bottom: 14px;

    color: #f36b21 !important;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: .14em;
    text-transform: uppercase;
}

.help-article__title {
    max-width: 950px;

    margin: 0;

    color: #111 !important;

    font-size: clamp(32px, 3.5vw, 48px);
    font-weight: 700;

    line-height: 1.02;
    letter-spacing: -.045em;
}

.help-article__summary {
    max-width: 780px;

    margin: 24px 0 0;

    color: #666 !important;

    font-size: 18px;
    line-height: 1.7;
}

.help-article__meta {
    display: flex;
    flex-wrap: wrap;

    gap: 22px;

    margin-top: 26px;

    color: #8c8c8c !important;

    font-size: 12px;
}

.help-article__meta span {
    color: #8c8c8c !important;
}

.help-article__meta strong {
    color: #111 !important;

    font-weight: 600;
}


/* ============================================================
   IMAGEN PRINCIPAL / POSICIONES
============================================================ */

.help-article__image--top {
    margin:
        38px 0
        32px;

    text-align: center;
}

.help-article__image--top img {
    display: block;

    max-width: 100%;
    height: auto;

    margin: 0 auto;

    object-fit: cover;

    border-radius: 18px;
}

.help-article__inline-image {
    margin:
        10px 0
        28px;
}

.help-article__inline-image img {
    display: block;

    max-width: 100%;
    height: auto;

    border-radius: 14px;
}

.help-article__inline-image--izquierda {
    float: left;

    max-width: 46%;

    margin:
        8px 30px
        20px 0;
}

.help-article__inline-image--derecha {
    float: right;

    max-width: 46%;

    margin:
        8px 0
        20px 30px;
}

.help-article__inline-image--dentro {
    float: none;

    max-width: 720px;

    margin:
        35px auto;
}


/* ============================================================
   CONTENIDO DEL ARTÍCULO
============================================================ */

.help-article__content {
    padding-top: 44px;

    color: #353535;

    font-family: 'Poppins', sans-serif;

    font-size: 17px;

    line-height: 1.85;

    overflow-wrap: anywhere;
}

.help-article__content::after {
    content: "";

    display: block;

    clear: both;
}


/* JUSTIFICADO */

.help-article__content p {
    margin:
        0 0
        24px;

    text-align: justify;
    text-wrap: pretty;

    hyphens: auto;
}


/* LIMPIEZA DE ESTILOS VIEJOS DE LA DB */

.help-article__content p,
.help-article__content span,
.help-article__content div,
.help-article__content font,
.help-article__content li,
.help-article__content td,
.help-article__content th,
.help-article__content strong,
.help-article__content b,
.help-article__content em,
.help-article__content i {
    color: #353535 !important;
}

.help-article__content p,
.help-article__content span,
.help-article__content div,
.help-article__content font {
    background-color: transparent !important;
}

.help-article__content font {
    font-family: inherit !important;
    font-size: inherit !important;
}


/* TÍTULOS DEL CONTENIDO */

.help-article__content h1,
.help-article__content h2,
.help-article__content h3,
.help-article__content h4,
.help-article__content h5,
.help-article__content h6 {
    color: #111 !important;

    font-weight: 700;
}

.help-article__content h1 {
    margin:
        0 0
        24px;

    font-size: clamp(30px, 3vw, 42px);

    line-height: 1.15;
}

.help-article__content h2 {
    margin:
        48px 0
        18px;

    font-size: 30px;

    line-height: 1.2;
}

.help-article__content h3 {
    margin:
        38px 0
        15px;

    font-size: 23px;

    line-height: 1.3;
}


/* LINKS */

.help-article__content a,
.help-article__content a span,
.help-article__content a font {
    color: #f36b21 !important;
}


/* LISTAS */

.help-article__content ul,
.help-article__content ol {
    margin:
        20px 0
        30px;

    padding-left: 24px;
}

.help-article__content li {
    margin-bottom: 10px;
}


/* TABLAS HEREDADAS */

.help-article__content table {
    width: 100% !important;

    max-width: 100%;

    margin:
        28px 0;

    border-collapse: collapse;
}

.help-article__content td,
.help-article__content th {
    padding: 10px 12px;

    border: 1px solid #e2e2dd;
}


/* IMÁGENES HEREDADAS DENTRO DEL HTML */

.help-article__content img {
    max-width: 100% !important;
    height: auto !important;

    border-radius: 12px;
}


/* ============================================================
   SOPORTE FINAL
============================================================ */

.help-article__support {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 70px;

    padding: 34px;

    border-radius: 20px;

    background: #111;

    color: #fff;
}

.help-article__support span {
    display: block;

    margin-bottom: 5px;

    color: rgba(255,255,255,.55);

    font-size: 12px;
}

.help-article__support strong {
    display: block;

    color: #fff;

    font-size: 18px;
}

.help-article__support a {
    flex: 0 0 auto;

    padding:
        14px 20px;

    border-radius: 10px;

    background: #25d366;
    color: #fff;

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;
}


/* ============================================================
   ARTÍCULO NO ENCONTRADO
============================================================ */

.help-not-found {
    padding:
        100px 28px
        130px;

    background: #fff;
}

.help-not-found__inner {
    width: min(900px, calc(100% - 40px));
    margin: 0 auto;

    text-align: center;
}

.help-not-found__eyebrow {
    display: block;

    margin-bottom: 14px;

    color: #f36b21;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: .14em;
    text-transform: uppercase;
}

.help-not-found h1 {
    margin:
        0 0
        18px;

    color: #111;

    font-size: clamp(36px, 5vw, 64px);

    line-height: 1;
    letter-spacing: -.045em;
}

.help-not-found p {
    max-width: 600px;

    margin:
        0 auto
        28px;

    color: #777;

    line-height: 1.7;
}

.help-not-found a {
    display: inline-flex;

    padding:
        13px 20px;

    border-radius: 10px;

    background: #f36b21;
    color: #fff;

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 760px) {

    .help-hero {
        min-height: 690px;

        padding:
            155px 18px
            100px;
    }

    .help-hero__title {
        font-size: clamp(48px, 15vw, 70px);
    }

    .help-hero__lead {
        margin-top: 24px;
        margin-bottom: 32px;

        font-size: 16px;
    }

    .help-search {
        min-height: 72px;

        padding:
            7px 7px
            7px 20px;

        border-radius: 15px;
    }

    .help-search__icon {
        width: 21px;
        height: 21px;

        margin-right: 11px;
    }

    .help-search__input {
        font-size: 15px;
    }

    .help-search__button {
        min-height: 56px;

        padding: 0 18px;
    }

    .help-search__button .help-search__arrow {
        display: none;
    }

    .help-hero__quick-label {
        flex-basis: 100%;
    }

    .help-hero__bottom {
        flex-direction: column;

        gap: 6px;

        bottom: 25px;
    }


    /* HERO COMPACTO */

    .help-hero--compact {
        padding:
            105px 18px
            32px;
    }

    .help-hero--compact .help-hero__inner {
        grid-template-columns: 1fr;

        gap: 24px;
    }

    .help-hero__compact-head h1 {
        font-size: 34px;
    }

    .help-hero--compact .help-search {
        min-height: 58px;
    }


    /* TEMAS */

    .help-topics {
        padding:
            85px 18px
            100px;
    }

    .help-topics__inner {
        width: 100%;
    }

    .help-topics__header {
        margin-bottom: 42px;
    }

    .help-topic {
        grid-template-columns:
            42px
            minmax(0, 1fr)
            auto;

        gap: 12px;

        min-height: 110px;

        padding:
            22px 0;
    }

    .help-topic__summary {
        display: none;
    }

    .help-topic__meta > span:first-child {
        display: none;
    }

    .help-topic__arrow {
        width: 36px;
        height: 36px;
    }


    /* ARTÍCULO */

    .help-article {
        padding:
            48px 18px
            90px;
    }

    .help-article__inner,
    .help-not-found__inner {
        width: 100%;
    }

    .help-article__title {
        font-size: clamp(
            36px,
            11vw,
            52px
        );
    }

    .help-article__summary {
        font-size: 17px;
    }

    .help-article__content {
        padding-top: 36px;

        font-size: 16px;
    }

    .help-article__content p {
        text-align: left;
        hyphens: none;
    }

    .help-article__inline-image--izquierda,
    .help-article__inline-image--derecha {
        float: none;

        max-width: 100%;

        margin:
            25px 0;
    }

    .help-article__support {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 480px) {

    .help-search__button {
        padding: 0 14px;

        font-size: 12px;
    }

    .help-hero__quick {
        gap: 10px 14px;
    }

}