/* =========================================================
   MOTOGRAPHIX V9
   FOOTER MOBILE
   ========================================================= */

.mgx-footer-mobile {
    display: none;
}


@media (max-width: 899px) {

    .mgx-footer-mobile {
        display: block;

        width: 100%;

        background: #000000;
        color: #FFFFFF;

        border-top: 1px solid rgba(255, 255, 255, 0.07);
    }


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

    .mgx-footer-mobile-inner {
        width: calc(100% - 32px);
        max-width: 520px;

        margin: 0 auto;

        padding: 46px 0 34px;
    }


    /* =====================================================
       MARCA
       ===================================================== */

    .mgx-footer-mobile-brand {
        text-align: center;

        padding-bottom: 34px;
    }


    .mgx-footer-mobile-logo {
        display: inline-block;
    }


    .mgx-footer-mobile-logo img {
        display: block;

        width: 205px;
        max-width: 100%;

        margin: 0 auto;

        height: auto;
    }


    .mgx-footer-mobile-brand p {
        max-width: 360px;

        margin: 18px auto 0;

        color: rgba(255, 255, 255, 0.72);

        font-size: 13px;
        font-weight: 650;
        line-height: 1.7;
    }


    /* =====================================================
       REDES
       ===================================================== */

    .mgx-footer-mobile-social {
        margin-top: 24px;

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

        gap: 10px;
    }


    .mgx-footer-mobile-social a {
        width: 42px;
        height: 42px;

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

        background: rgba(255, 255, 255, 0.05);
        color: #FFFFFF;

        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 999px;

        font-size: 15px;

        text-decoration: none;

        transition:
            background 0.2s ease,
            border-color 0.2s ease,
            transform 0.2s ease;
    }


    .mgx-footer-mobile-social a:active {
        background: #E30613;
        border-color: #E30613;

        transform: scale(0.94);
    }

    /* SVG ICONS */

    .mgx-footer-mobile-icon {
        display: block;

        color: currentColor;

        fill: none;
        stroke: currentColor;

        pointer-events: none;
    }

    .mgx-footer-mobile-social-icon {
        width: 20px;
        height: 20px;

        flex: 0 0 20px;
    }

    .mgx-footer-mobile-contact-icon {
        width: 16px;
        height: 16px;

        flex: 0 0 16px;

        color: #E30613;
    }

    .mgx-footer-mobile-link-icon {
        width: 15px;
        height: 15px;

        flex: 0 0 15px;

        margin-right: 7px;

        color: #E30613;
    }


    /* =====================================================
       ACORDEONES
       ===================================================== */

    .mgx-footer-accordion {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }


    .mgx-footer-accordion:last-of-type {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }


    .mgx-footer-trigger {
        width: 100%;
        min-height: 60px;

        padding: 0;

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

        gap: 20px;

        background: transparent;
        color: #FFFFFF;

        border: 0;

        font-family: Helvetica, Arial, sans-serif;
        font-size: 14px;
        font-weight: 900;
        letter-spacing: 1px;

        text-align: left;
        text-transform: uppercase;

        cursor: pointer;
    }


    .mgx-footer-chevron {
        width: 17px;
        height: 17px;

        flex: 0 0 17px;

        color: rgba(255, 255, 255, 0.42);

        fill: none;
        stroke: currentColor;

        pointer-events: none;

        transition:
            transform 0.28s ease,
            color 0.28s ease;
    }


    .mgx-footer-accordion.is-active .mgx-footer-chevron {
        transform: rotate(180deg);

        color: #E30613;
    }


    /* =====================================================
       CONTENIDO ACORDEÓN
       ===================================================== */

    .mgx-footer-accordion-content {
        max-height: 0;

        overflow: hidden;

        display: flex;
        flex-direction: column;

        gap: 15px;

        opacity: 0;

        transition:
            max-height 0.35s ease,
            opacity 0.25s ease,
            padding 0.35s ease;
    }


    .mgx-footer-accordion.is-active
    .mgx-footer-accordion-content {
        max-height: 520px;

        padding: 2px 0 24px;

        opacity: 1;
    }


    .mgx-footer-accordion-content a {
        width: fit-content;

        color: rgba(255, 255, 255, 0.58);

        font-size: 14px;
        font-weight: 700;
        line-height: 1.5;

        text-decoration: none;
    }


    .mgx-footer-accordion-content a:active {
        color: #E30613;
    }




    /* =====================================================
       CONTACTO
       ===================================================== */

    .mgx-footer-mobile-contact {
        gap: 0;
    }


    .mgx-footer-mobile-contact-item {
        padding: 16px 0;

        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }


    .mgx-footer-mobile-contact-item:last-child {
        border-bottom: 0;
    }


    .mgx-footer-mobile-contact-item > span {
        display: flex;
        align-items: center;

        gap: 8px;

        margin-bottom: 8px;

        color: rgba(255, 255, 255, 0.52);

        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.5px;

        text-transform: uppercase;
    }




    .mgx-footer-mobile-contact-item > a {
        color: #FFFFFF;

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


    .mgx-footer-mobile-contact-item p {
        margin: 0 0 10px;

        color: rgba(255, 255, 255, 0.56);

        font-size: 13px;
        font-weight: 650;
        line-height: 1.65;
    }


    .mgx-footer-mobile-contact-item p + a {
        color: #E30613;

        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.6px;

        text-transform: uppercase;
    }


    /* =====================================================
       COPYRIGHT
       ===================================================== */

    .mgx-footer-mobile-bottom {
        padding-top: 28px;

        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 5px;

        text-align: center;
    }


    .mgx-footer-mobile-bottom span {
        color: rgba(255, 255, 255, 0.65);

        font-size: 11px;
        font-weight: 700;
        line-height: 1.5;
    }

}


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

@media (max-width: 480px) {

    .mgx-footer-mobile-inner {
        width: calc(100% - 28px);

        padding-top: 40px;
    }


    .mgx-footer-mobile-logo img {
        width: 190px;
    }


    .mgx-footer-trigger {
        min-height: 58px;

        font-size: 13px;
    }


    .mgx-footer-accordion-content a {
        font-size: 13px;
    }

}