/* =========================================================
   BETY'S ELEC
   FOOTER GLOBAL — TRANSPARENTE
========================================================= */

.site-footer {

    width: 100%;

    position: relative;

    z-index: 5;

    padding:
        64px 20px 26px;

    background:
        transparent;

    color:
        var(--texto);
}


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

.site-footer-inner {

    width:
        min(
            calc(100% - 40px),
            var(--ancho-maximo)
        );

    margin:
        0 auto;

    display:
        grid;

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

    gap:
        60px;

    align-items:
        start;
}


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

.site-footer-brand {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;
}


.site-footer-logo-link {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        74px;

    height:
        74px;

    text-decoration:
        none;
}


.site-footer-logo {

    width:
        74px;

    height:
        74px;

    display:
        block;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 0 18px
            rgba(242,185,39,.14)
        );
}


.site-footer-tagline {

    margin:
        18px 0 0;

    max-width:
        230px;

    color:
        var(--dorado);

    font-size:
        14px;

    line-height:
        1.65;
}


/* =========================================================
   COLUMNAS
========================================================= */

.site-footer-links {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        24px;
}


.site-footer-column {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;
}


.site-footer-column h3 {

    margin:
        0 0 16px;

    color:
        var(--dorado);

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        1.6px;

    text-transform:
        uppercase;
}


.site-footer-column a {

    margin:
        0 0 10px;

    color:
        var(--texto);

    font-size:
        13px;

    line-height:
        1.45;

    text-decoration:
        none;

    transition:
        color .2s ease,
        transform .2s ease;
}


.site-footer-column a:hover {

    color:
        var(--dorado-claro);

    transform:
        translateX(2px);
}


/* =========================================================
   SEPARADOR
========================================================= */

.site-footer-divider {

    width:
        min(
            calc(100% - 40px),
            var(--ancho-maximo)
        );

    height:
        1px;

    margin:
        42px auto 18px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(
                242,
                185,
                39,
                .28
            ) 20%,
            rgba(
                242,
                185,
                39,
                .28
            ) 80%,
            transparent
        );
}


/* =========================================================
   PARTE INFERIOR
========================================================= */

.site-footer-bottom {

    width:
        min(
            calc(100% - 40px),
            var(--ancho-maximo)
        );

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        rgba(
            238,
            238,
            238,
            .62
        );

    font-size:
        11px;

    line-height:
        1.5;
}


.site-footer-bottom-note {

    text-align:
        right;
}


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

@media (max-width: 900px) {

    .site-footer-inner {

        grid-template-columns:
            1fr;

        gap:
            42px;
    }


    .site-footer-brand {

        align-items:
            center;

        text-align:
            center;
    }


    .site-footer-links {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            34px 24px;
    }


    .site-footer-column {

        align-items:
            center;

        text-align:
            center;
    }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 600px) {

    .site-footer {

        padding:
            52px 14px 22px;
    }


    .site-footer-inner,
    .site-footer-divider,
    .site-footer-bottom {

        width:
            100%;
    }


    .site-footer-links {

        grid-template-columns:
            1fr;

        gap:
            28px;
    }


    .site-footer-column {

        align-items:
            center;

        text-align:
            center;
    }


    .site-footer-bottom {

        flex-direction:
            column;

        justify-content:
            center;

        text-align:
            center;

        gap:
            8px;
    }


    .site-footer-bottom-note {

        text-align:
            center;
    }

}