@charset "utf-8";

/*==================================================
FOOTER MCTIRE
==================================================*/

.footer
{
    position:relative;

    padding-top:38px;

    color:#fff;

    background:
    radial-gradient(
        circle at 12% 15%,
        rgba(215,25,32,.10),
        transparent 25%
    ),
    radial-gradient(
        circle at 90% 80%,
        rgba(215,25,32,.06),
        transparent 25%
    ),
    linear-gradient(
        135deg,
        #080808 0%,
        #111111 50%,
        #080808 100%
    );

    overflow:hidden;
}


/*==================================================
LÍNEA SUPERIOR
==================================================*/

.footer::before
{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:2px;

    background:
    linear-gradient(
        90deg,
        transparent,
        var(--primary),
        #ff4b4b,
        var(--primary),
        transparent
    );

    opacity:.9;
}


/*==================================================
DETALLE DECORATIVO
==================================================*/

.footer::after
{
    content:"";

    position:absolute;

    right:-190px;
    top:-190px;

    width:420px;
    height:420px;

    border-radius:50%;

    border:
    1px solid rgba(215,25,32,.08);

    box-shadow:
    0 0 0 35px rgba(215,25,32,.025),
    0 0 0 70px rgba(215,25,32,.018);

    pointer-events:none;
}


/*==================================================
GRID
==================================================*/

.footer-grid
{
    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
    1.15fr
    1fr
    .75fr;

    gap:3rem;

    align-items:center;
}


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

.footer-brand
{
    position:relative;

    margin:0;

    padding:0;
}


/*==================================================
LOGO
==================================================*/

.footer-logo
{
    display:inline-flex;

    align-items:center;

    margin:
    0 0 9px;

    padding:0;
}


.footer-brand img
{
    display:block;

    width:180px;

    max-width:100%;

    height:auto;

    margin:0;

    filter:
    drop-shadow(
        0 8px 18px
        rgba(0,0,0,.45)
    );

    transition:
    transform .3s ease,
    filter .3s ease;
}


.footer-logo:hover img
{
    transform:
    translateY(-2px)
    scale(1.02);

    filter:
    drop-shadow(
        0 10px 22px
        rgba(215,25,32,.22)
    );
}


/*==================================================
DESCRIPCIÓN MARCA
==================================================*/

.footer-brand p
{
    max-width:400px;

    margin:0;

    padding:0;

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

    font-size:.82rem;

    line-height:1.65;
}


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

.footer-contact
{
    position:relative;

    padding-left:22px;
}


/*==================================================
LÍNEA ROJA
==================================================*/

.footer-contact::before
{
    content:"";

    position:absolute;

    left:0;
    top:3px;

    width:3px;
    height:72px;

    border-radius:20px;

    background:
    linear-gradient(
        180deg,
        #ff4b4b,
        var(--primary),
        transparent
    );
}


/*==================================================
LABEL
==================================================*/

.footer-label
{
    display:inline-flex;

    align-items:center;

    gap:7px;

    margin:
    0 0 9px;

    color:#e62a33;

    font-size:.65rem;

    font-weight:800;

    letter-spacing:1.5px;

    line-height:1.2;

    text-transform:uppercase;
}


.footer-label i
{
    font-size:.7rem;
}


/*==================================================
TÍTULO
==================================================*/

.footer-contact h3
{
    margin:0;

    color:#fff;

    font-size:1.35rem;

    font-weight:800;

    line-height:1.2;

    letter-spacing:-.2px;
}


/*==================================================
DESCRIPCIÓN CONTACTO
==================================================*/

.footer-contact p
{
    max-width:350px;

    margin:
    10px 0 16px;

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

    font-size:.77rem;

    line-height:1.6;
}


/*==================================================
WHATSAPP
==================================================*/

.footer-whatsapp
{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    min-height:44px;

    padding:
    0 17px;

    border-radius:50px;

    color:#fff;

    background:
    linear-gradient(
        135deg,
        #25d366,
        #159447
    );

    font-size:.75rem;

    font-weight:800;

    line-height:1;

    text-decoration:none;

    box-shadow:
    0 8px 20px
    rgba(37,211,102,.16);

    transition:
    transform .3s ease,
    box-shadow .3s ease,
    filter .3s ease;
}


.footer-whatsapp:hover
{
    color:#fff;

    transform:
    translateY(-2px);

    filter:
    brightness(1.07);

    box-shadow:
    0 12px 25px
    rgba(37,211,102,.25);
}


/*==================================================
ICONO WHATSAPP
==================================================*/

.footer-whatsapp-icon
{
    display:flex;

    align-items:center;

    justify-content:center;

    width:28px;

    height:28px;

    border-radius:50%;

    background:
    rgba(255,255,255,.18);
}


.footer-whatsapp-icon i
{
    font-size:.88rem;
}


.footer-whatsapp > i
{
    margin-left:2px;

    font-size:.63rem;

    transition:
    transform .25s ease;
}


.footer-whatsapp:hover > i
{
    transform:
    translateX(3px);
}


/*==================================================
QR + REDES
==================================================*/

.footer-social
{
    display:flex;

    align-items:center;

    justify-content:center;

    gap:17px;
}


/*==================================================
QR BOX
==================================================*/

.footer-qr-box
{
    display:flex;

    align-items:center;

    justify-content:center;

    padding:4px;

    background:#fff;

    border-radius:8px;

    box-shadow:
    0 8px 22px
    rgba(0,0,0,.35);
}


/*==================================================
QR
==================================================*/

.footer-qr
{
    display:block;

    width:65px;

    height:65px;

    object-fit:contain;

    border-radius:4px;
}


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

.footer-social-content
{
    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:8px;
}


.footer-social-content .footer-label
{
    margin:0;

    font-size:.58rem;

    letter-spacing:1.3px;
}


.social-list
{
    display:flex;

    align-items:center;

    gap:6px;
}


.social-list a
{
    display:flex;

    align-items:center;

    justify-content:center;

    width:34px;

    height:34px;

    border-radius:50%;

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

    background:
    rgba(255,255,255,.07);

    border:
    1px solid
    rgba(255,255,255,.09);

    text-decoration:none;

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


.social-list a:hover
{
    color:#fff;

    background:
    var(--primary);

    border-color:
    var(--primary);

    transform:
    translateY(-3px);
}


.social-list i
{
    font-size:.78rem;
}


/*==================================================
FOOTER BOTTOM
==================================================*/

.footer-bottom
{
    position:relative;

    z-index:2;

    margin-top:36px;

    padding:17px 12px;

    background:#050505;

    border-top:1px solid rgba(255,255,255,.07);

    overflow:hidden;
}


/*==================================================
LÍNEA DE LUZ DINÁMICA
COMPATIBLE + OPTIMIZADA
==================================================*/

.footer-bottom::before
{
    content:"";

    position:absolute;

    top:-1px;

    left:0;

    width:25%;

    height:2px;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.15),
        var(--primary),
        #ff5555,
        var(--primary),
        rgba(255,255,255,.15),
        transparent
    );

    box-shadow:
    0 0 8px rgba(215,25,32,.35);

    pointer-events:none;

    opacity:0;

    transform:
    translate3d(-120%,0,0);

    -webkit-transform:
    translate3d(-120%,0,0);

    will-change:
    transform,
    opacity;

    animation:
    footerLightMove
    3s
    linear
    infinite;

    -webkit-animation:
    footerLightMove
    3s
    linear
    infinite;
}


/*==================================================
SEGUNDA LÍNEA MUY SUTIL
==================================================*/

.footer-bottom::after
{
    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(215,25,32,.18),
            transparent
        );

    pointer-events:none;
}


/*==================================================
TEXTO
==================================================*/

.footer-bottom p
{
    margin:0;

    text-align:center;

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

    font-size:.69rem;

    line-height:1.55;

    letter-spacing:.2px;
}


/*==================================================
CORAZÓN
==================================================*/

.footer-heart
{
    display:inline-block;

    margin:0 3px;

    color:#e31b23;

    transform-origin:center;

    animation:
        footerHeart
        2.8s
        ease-in-out
        infinite;
}
/*==================================================
====================================================
    AUTOR
    EFECTO PREMIUM
====================================================
==================================================*/

.footer-author
{
    position:relative;

    display:inline-block;

    margin-left:3px;

    font-family:
    "Arial Black",
    "Franklin Gothic Heavy",
    Arial,
    sans-serif;

    font-size:.74rem;

    font-weight:900;

    letter-spacing:.6px;

    color:#fff;

    text-decoration:none;

    animation:
        footerAuthorPremium
        4.5s
        ease-in-out
        infinite;

    transition:
        transform .3s
        cubic-bezier(.22,.61,.36,1);
}


/*==================================================
    SUBRAYADO
==================================================*/

.footer-author::after
{
    content:"";

    position:absolute;

    left:0;

    bottom:-3px;

    width:100%;

    height:1px;

    border-radius:10px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--primary),
            transparent
        );

    transform:
        scaleX(.35);

    transform-origin:center;

    opacity:.7;

    transition:
        transform .35s
        cubic-bezier(.22,.61,.36,1),
        opacity .35s ease;
}


/*==================================================
    PEQUEÑO DESTELLO
==================================================*/

.footer-author::before
{
    content:"";

    position:absolute;

    left:-8px;

    right:-8px;

    bottom:-4px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.8),
            transparent
        );

    transform:
        scaleX(0);

    opacity:0;

    pointer-events:none;
}


/*==================================================
    HOVER
==================================================*/

.footer-author:hover
{
    color:#fff;

    transform:
        translateY(-2px)
        scale(1.02);
}


.footer-author:hover::after
{
    transform:
        scaleX(1);

    opacity:1;
}


/*==================================================
    ANIMACIÓN COLOR
==================================================*/

@keyframes footerAuthorPremium
{
    0%,
    100%
    {
        color:#fff;
    }

    20%
    {
        color:#fff;
    }

    45%
    {
        color:#e31b23;
    }

    60%
    {
        color:#ff4b4b;
    }

    75%
    {
        color:#fff;
    }
}

/*==================================================
ANIMACIÓN DE LUZ
==================================================*/

@keyframes footerLightMove
{
    0%
    {
        opacity:0;

        transform:
        translate3d(-120%,0,0);
    }

    8%
    {
        opacity:1;
    }

    50%
    {
        opacity:1;
    }

    92%
    {
        opacity:1;
    }

    100%
    {
        opacity:0;

        transform:
        translate3d(500%,0,0);
    }
}


@-webkit-keyframes footerLightMove
{
    0%
    {
        opacity:0;

        -webkit-transform:
        translate3d(-120%,0,0);
    }

    8%
    {
        opacity:1;
    }

    50%
    {
        opacity:1;
    }

    92%
    {
        opacity:1;
    }

    100%
    {
        opacity:0;

        -webkit-transform:
        translate3d(500%,0,0);
    }
}



/*==================================================
REDUCIR MOVIMIENTO
==================================================*/

@media(prefers-reduced-motion:reduce)
{
    .footer-bottom::before,
    .footer-heart
    {
        animation:none;
    }
}
/*==================================================
ANIMACIÓN CORAZÓN
==================================================*/

@keyframes footerHeart
{
    0%,
    100%
    {
        transform:scale(1);
    }

    12%
    {
        transform:scale(1.16);
    }

    24%
    {
        transform:scale(.98);
    }

    36%
    {
        transform:scale(1.10);
    }

    48%
    {
        transform:scale(1);
    }
}


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

@media(max-width:992px)
{
    .footer
    {
        padding-top:32px;
    }


    .footer-grid
    {
        grid-template-columns:
        1fr
        1fr;

        gap:30px;
    }


    /* MARCA */

    .footer-brand
    {
        text-align:center;
    }


    .footer-brand p
    {
        margin:
        0 auto;
    }


    /* CONTACTO */

    .footer-contact
    {
        padding-left:20px;

        text-align:left;
    }


    /* QR */

    .footer-social
    {
        grid-column:
        1 / -1;

        justify-content:center;
    }
}


/*==================================================
MOBILE
==================================================*/

@media(max-width:576px)
{
    .footer
    {
        padding-top:20px;
    }


    /*==================================================
    GRID
    ==================================================*/

    .footer-grid
    {
        display:flex;

        flex-direction:column;

        align-items:center;

        gap:20px;

        text-align:center;
    }


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

    .footer-brand
    {
        width:100%;

        margin:0;

        padding:0;

        text-align:center;
    }


    .footer-logo
    {
        display:flex;

        align-items:center;

        justify-content:center;

        margin:
        0 0 4px;

        padding:0;
    }


    .footer-brand img
    {
        display:block;

        width:140px;

        height:auto;

        margin:0;
    }


    .footer-brand p
    {
        max-width:310px;

        margin:
        0 auto;

        padding:0;

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

        font-size:.72rem;

        line-height:1.5;
    }


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

    .footer-contact
    {
        width:100%;

        margin:0;

        padding:0;

        text-align:center;
    }


    .footer-contact::before
    {
        display:none;
    }


    .footer-label
    {
        margin:
        0 0 7px;

        font-size:.58rem;

        letter-spacing:1.25px;
    }


    .footer-contact h3
    {
        font-size:1.12rem;

        line-height:1.2;
    }


    .footer-contact p
    {
        max-width:300px;

        margin:
        8px auto 13px;

        font-size:.71rem;

        line-height:1.5;
    }


    /*==================================================
    WHATSAPP
    ==================================================*/

    .footer-whatsapp
    {
        min-height:41px;

        padding:
        0 15px;

        gap:8px;

        font-size:.71rem;
    }


    .footer-whatsapp-icon
    {
        width:26px;

        height:26px;
    }


    .footer-whatsapp-icon i
    {
        font-size:.82rem;
    }


    /*==================================================
    QR + REDES
    ==================================================*/

    .footer-social
    {
        width:100%;

        display:flex;

        flex-direction:row;

        align-items:center;

        justify-content:center;

        gap:13px;

        margin:0;
    }


    /*==================================================
    QR
    ==================================================*/

    .footer-qr-box
    {
        padding:3px;

        border-radius:7px;
    }


    .footer-qr
    {
        width:60px;

        height:60px;
    }


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

    .footer-social-content
    {
        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:6px;
    }


    .footer-social-content .footer-label
    {
        margin:0;

        font-size:.54rem;

        letter-spacing:1.1px;
    }


    .social-list
    {
        display:flex;

        align-items:center;

        gap:5px;
    }


    .social-list a
    {
        width:30px;

        height:30px;
    }


    .social-list i
    {
        font-size:.7rem;
    }


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

    .footer-bottom
    {
        margin-top:26px;

        padding:
        14px 10px;
    }


    .footer-bottom p
    {
        font-size:.62rem;

        line-height:1.6;
    }
}


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

@media(max-width:380px)
{
    .footer
    {
        padding-top:17px;
    }


    .footer-grid
    {
        gap:17px;
    }


    /* MARCA */

    .footer-brand img
    {
        width:130px;
    }


    .footer-brand p
    {
        max-width:285px;

        font-size:.68rem;

        line-height:1.4;
    }


    /* CONTACTO */

    .footer-contact h3
    {
        font-size:1.04rem;
    }


    .footer-contact p
    {
        max-width:275px;

        font-size:.68rem;

        line-height:1.45;
    }


    /* WHATSAPP */

    .footer-whatsapp
    {
        min-height:39px;

        font-size:.68rem;

        padding:
        0 14px;
    }


    /* QR + REDES */

    .footer-social
    {
        gap:10px;
    }


    .footer-qr
    {
        width:56px;

        height:56px;
    }


    .social-list
    {
        gap:4px;
    }


    .social-list a
    {
        width:28px;

        height:28px;
    }


    .social-list i
    {
        font-size:.66rem;
    }


    /* COPYRIGHT */

    .footer-bottom
    {
        margin-top:23px;

        padding:
        13px 8px;
    }


    .footer-bottom p
    {
        font-size:.59rem;

        line-height:1.55;
    }
}


/*==================================================
REDUCIR MOVIMIENTO
==================================================*/

@media(prefers-reduced-motion:reduce)
{
    .footer-heart,
    .footer-author
    {
        animation:none;
    }


    .footer-logo img,
    .footer-whatsapp,
    .social-list a
    {
        transition:none;
    }
}