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

.footer{

    position:relative;

    overflow:hidden;

    padding:var(--space-96) 0 var(--space-32);

    background:var(--color-primary-dark);

}

/*=========================================
EFECTO DE FONDO
=========================================*/

.footer::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at top left,
            rgba(247,148,29,.08),
            transparent 30%
        ),

        radial-gradient(
            circle at bottom right,
            rgba(255,255,255,.03),
            transparent 35%
        );

    pointer-events:none;

}

/*=========================================
CONTAINER
=========================================*/

.footer .container{

    position:relative;

    z-index:2;

}

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

.footer__grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1.3fr;

    gap:var(--space-48);

    padding-bottom:var(--space-64);

}

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

.footer__column{

    display:flex;

    flex-direction:column;

}

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

.footer__logo{

    display:inline-flex;

    margin-bottom:var(--space-24);

}

.footer__logo img{

    width:180px;

    height:auto;

}

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

.footer__description{

    margin:0;

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

    line-height:1.8;

    max-width:340px;

}

/*=========================================
TÍTULOS
=========================================*/

.footer__heading{

    margin-bottom:var(--space-24);

    color:var(--color-secondary);

    font-size:var(--font-size-lg);

    font-weight:var(--font-weight-semibold);

}

/*=========================================
LISTAS
=========================================*/

.footer__links{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.footer__links a{

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

    transition:
        color var(--transition-normal),
        transform var(--transition-normal);

}

.footer__links a:hover{

    color:var(--color-secondary);

    transform:translateX(6px);

}

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

.footer__contact{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.footer__contact li{

    display:flex;

    align-items:flex-start;

    gap:14px;

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

    line-height:1.7;

}

.footer__contact i{

    color:var(--color-secondary);

    width:18px;

    margin-top:3px;

}

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

.footer__social{

    display:flex;

    align-items:center;

    gap:16px;

    margin-top:var(--space-32);

}

.footer__social a{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

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

    color:var(--color-white);

    transition:
        background var(--transition-normal),
        color var(--transition-normal),
        transform var(--transition-normal),
        border-color var(--transition-normal);

}

.footer__social a:hover{

    background:var(--color-secondary);

    border-color:var(--color-secondary);

    color:var(--color-white);

    transform:translateY(-4px);

}

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

.footer__bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:24px;

    padding-top:var(--space-32);

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

}

.footer__bottom p{

    margin:0;

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

    font-size:var(--font-size-sm);

}

/*=========================================
BOTÓN VOLVER ARRIBA
=========================================*/

.footer__top{

    position:fixed;

    right:32px;

    bottom:32px;

    width:58px;

    height:58px;

    display:flex;

    justify-content:center;

    align-items:center;

    border:none;

    border-radius:50%;

    background:var(--color-secondary);

    color:var(--color-white);

    box-shadow:var(--shadow-lg);

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    z-index:var(--z-fixed);

    transition:
        opacity var(--transition-normal),
        visibility var(--transition-normal),
        transform var(--transition-normal),
        background var(--transition-normal);

}

.footer__top--show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.footer__top:hover{

    background:var(--color-secondary-hover);

    transform:translateY(-4px);

}

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

@media (max-width:1200px){

    .footer__grid{

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

        gap:var(--space-40);

    }

}

@media (max-width:768px){

    .footer{

        padding:var(--space-80) 0 var(--space-32);

    }

    .footer__grid{

        grid-template-columns:1fr;

        gap:var(--space-48);

    }

    .footer__bottom{

        flex-direction:column;

        text-align:center;

    }

}

@media (max-width:576px){

    .footer__logo img{

        width:160px;

    }

    .footer__social{

        justify-content:center;

    }

    .footer__top{

        width:52px;

        height:52px;

        right:20px;

        bottom:20px;

    }

}

/*=========================================
ACCESSIBILITY
=========================================*/

.footer a:focus-visible,
.footer__top:focus-visible{

    outline:3px solid rgba(247,148,29,.35);

    outline-offset:4px;

}

/*=========================================
PERFORMANCE
=========================================*/

.footer__social a,
.footer__links a,
.footer__top{

    will-change:transform;

}