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

.footer{

    background:#151515;

    color:#fff;

    padding:100px 0 0;

    position:relative;

    overflow:hidden;

}

.footer::before{

    content:"";

    position:absolute;

    top:-220px;
    right:-220px;

    width:500px;
    height:500px;

    background:rgba(181,139,69,.10);

    border-radius:50%;

    filter:blur(120px);

}

.footer::after{

    content:"";

    position:absolute;

    bottom:-250px;
    left:-250px;

    width:550px;
    height:550px;

    background:rgba(181,139,69,.08);

    border-radius:50%;

    filter:blur(130px);

}

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

.footer-container{

    position:relative;

    z-index:2;

    width:min(1300px,92%);

    margin:auto;

    display:grid;

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

    gap:70px;

    padding-bottom:70px;

}

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

.footer-col{

    display:flex;

    flex-direction:column;

}

.footer-col h3{

    color:#fff;

    font-family:'Playfair Display',serif;

    font-size:30px;

    font-weight:500;

    margin-bottom:28px;

    position:relative;

}

.footer-col h3::after{

    content:"";

    width:60px;
    height:3px;

    margin-top:14px;

    display:block;

    background:#B58B45;

    border-radius:20px;

}

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

.footer-logo{

    font-family:'Playfair Display',serif;

    font-size:44px;

    font-weight:500;

    color:#fff;

    letter-spacing:3px;

    margin-bottom:25px;

}

.footer-col p{

    color:#CFCFCF;

    font-size:16px;

    line-height:1.9;

}

/*====================================
        ENLACES
====================================*/

.footer-col ul{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-col ul li{

    margin-bottom:18px;

}

.footer-col ul li a{

    color:#D8D8D8;

    text-decoration:none;

    font-size:16px;

    transition:.35s;

    display:inline-flex;

    align-items:center;

    gap:10px;

}

.footer-col ul li a:hover{

    color:#B58B45;

    transform:translateX(8px);

}



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

.footer-contacto li{

    display:flex;

    align-items:flex-start;

    gap:15px;

    color:#D8D8D8;

    line-height:1.8;

    font-size:16px;

    margin-bottom:20px;

}

.footer-contacto i{

    width:42px;

    height:42px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:rgba(181,139,69,.15);

    color:#B58B45;

    font-size:16px;

    flex-shrink:0;

    transition:.35s;

}

.footer-contacto li:hover i{

    background:#B58B45;

    color:#fff;

    transform:rotate(360deg);

}



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

.footer-social{

    display:flex;

    gap:18px;

    margin-top:35px;

}

.footer-social a{

    width:52px;

    height:52px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

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

    color:#fff;

    font-size:18px;

    text-decoration:none;

    transition:.35s;

}

.footer-social a:hover{

    background:#B58B45;

    color:#fff;

    transform:translateY(-6px);

    box-shadow:0 18px 35px rgba(181,139,69,.35);

}



/*====================================
        EFECTOS
====================================*/

.footer-col p{

    transition:.35s;

}

.footer-col:hover p{

    color:#fff;

}

.footer-col:hover h3{

    color:#B58B45;

}

.footer-col h3{

    transition:.35s;

}

/*====================================
        NEWSLETTER
====================================*/

.footer-form{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-top:30px;

}

.footer-form input{

    width:100%;

    padding:18px 22px;

    border:1px solid rgba(181,139,69,.25);

    border-radius:50px;

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

    color:#fff;

    font-size:15px;

    outline:none;

    transition:.35s;

}

.footer-form input::placeholder{

    color:#BDBDBD;

}

.footer-form input:focus{

    border-color:#B58B45;

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

    box-shadow:0 0 0 4px rgba(181,139,69,.12);

}



/*====================================
        BOTÓN
====================================*/

.footer-form button{

    height:58px;

    border:none;

    border-radius:50px;

    background:#B58B45;

    color:#fff;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    cursor:pointer;

    transition:.35s;

    box-shadow:0 18px 35px rgba(181,139,69,.30);

}

.footer-form button:hover{

    background:#9F7A3F;

    transform:translateY(-5px);

    box-shadow:0 25px 45px rgba(181,139,69,.40);

}



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

.footer-bottom{

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

    padding:28px 0;

    text-align:center;

}

.footer-bottom p{

    color:#BEBEBE;

    font-size:14px;

    letter-spacing:1px;

}



/*====================================
        EFECTOS GENERALES
====================================*/

.footer *{

    transition:.35s;

}

.footer a{

    transition:.35s;

}

.footer input,
.footer button{

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

}

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

@media(max-width:992px){

    .footer{

        padding:80px 0 0;

    }

    .footer-container{

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

        gap:50px;

    }

    .footer-logo{

        font-size:38px;

    }

    .footer-col h3{

        font-size:26px;

    }

}



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

@media(max-width:768px){

    .footer{

        padding:70px 0 0;

        text-align:center;

    }

    .footer-container{

        grid-template-columns:1fr;

        gap:45px;

    }

    .footer-logo{

        font-size:34px;

    }

    .footer-col h3{

        font-size:24px;

    }

    .footer-col h3::after{

        margin:15px auto 0;

    }

    .footer-col p{

        max-width:420px;

        margin:auto;

    }

    .footer-social{

        justify-content:center;

    }

    .footer-col ul li a{

        justify-content:center;

    }

    .footer-contacto li{

        justify-content:center;

        text-align:left;

    }

    .footer-form{

        max-width:420px;

        margin:30px auto 0;

    }

}



/*====================================
        IPHONE
====================================*/

@media(max-width:480px){

    .footer{

        padding:60px 0 0;

    }

    .footer-logo{

        font-size:30px;

    }

    .footer-col h3{

        font-size:22px;

    }

    .footer-col p,

    .footer-col ul li a,

    .footer-contacto li{

        font-size:15px;

    }

    .footer-social{

        gap:12px;

    }

    .footer-social a{

        width:46px;

        height:46px;

        font-size:16px;

    }

    .footer-form input{

        padding:16px 20px;

    }

    .footer-form button{

        height:54px;

        font-size:12px;

        letter-spacing:2px;

    }

    .footer-bottom{

        padding:22px 15px;

    }

    .footer-bottom p{

        font-size:13px;

        line-height:1.7;

    }

}



/*====================================
        ANIMACIONES
====================================*/

.footer-col{

    animation:footerFade .8s ease both;

}

.footer-col:nth-child(2){

    animation-delay:.15s;

}

.footer-col:nth-child(3){

    animation-delay:.3s;

}

.footer-col:nth-child(4){

    animation-delay:.45s;

}

@keyframes footerFade{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}