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

.footer{
    position:relative;
    width:100%;

    background:
        linear-gradient(
            135deg,
            #eefaff 0%,
            #f8fbfd 48%,
            #edf7fd 100%
        );

    color:var(--ing-dark);

    border-top:1px solid #dcecf5;

    overflow:hidden;

    isolation:isolate;
}


/* Decoraciones */

.footer::before{
    content:"";

    position:absolute;

    width:300px;
    height:300px;

    right:-120px;
    top:-170px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(51,190,211,.15) 0%,
            rgba(51,190,211,.04) 65%,
            transparent 70%
        );

    pointer-events:none;

    z-index:0;
}


.footer::after{
    content:"";

    position:absolute;

    width:220px;
    height:220px;

    left:-100px;
    bottom:-130px;

    border-radius:50%;

    background:rgba(11,78,162,.06);

    pointer-events:none;

    z-index:0;
}


/* Línea superior */

.footer-linea{
    position:relative;

    z-index:2;

    width:100%;
    height:4px;

    background:
        linear-gradient(
            90deg,
            #6edce4,
            #41a9d5,
            var(--ing-primary)
        );
}


/* =========================================================
   CONTENIDO
========================================================= */

.footer-contenido{
    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        minmax(0,1.4fr)
        minmax(160px,.65fr)
        minmax(280px,1fr);

    gap:60px;

    align-items:start;

    padding-top:55px;
    padding-bottom:45px;
}


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

.footer-brand{
    max-width:470px;
}


.footer-brand h3{
    color:var(--ing-dark);

    font-size:1.55rem;
    font-weight:800;

    letter-spacing:-.02em;

    margin:0 0 12px;
}


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

    margin:0 0 18px;

    color:#59697b;

    font-size:.94rem;
    line-height:1.7;
}


.footer-frase{
    display:inline-block;

    color:var(--ing-primary);

    font-size:.82rem;
    font-weight:700;
}


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

.footer-menu h4,
.footer-contacto h4{
    margin:4px 0 18px;

    color:var(--ing-dark);

    font-size:.88rem;
    font-weight:800;

    text-transform:uppercase;
    letter-spacing:.08em;
}


/* =========================================================
   MENÚ
========================================================= */

.footer-menu nav{
    display:flex;
    flex-direction:column;

    gap:11px;
}


.footer-menu a{
    position:relative;

    width:max-content;

    color:#59697b;

    font-size:.91rem;

    text-decoration:none;

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


.footer-menu a::before{
    content:"";

    position:absolute;

    width:0;
    height:1px;

    left:0;
    bottom:-3px;

    background:var(--ing-primary);

    transition:width .25s ease;
}


.footer-menu a:hover{
    color:var(--ing-primary);

    transform:translateX(3px);
}


.footer-menu a:hover::before{
    width:100%;
}


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

.footer-contacto{
    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:15px;
}


.footer-contacto > a,
.footer-contacto-item{
    display:flex;

    align-items:center;

    gap:12px;

    width:100%;

    color:#59697b;

    text-decoration:none;
}


.footer-contacto i{
    flex-shrink:0;

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

    width:39px;
    height:39px;

    border-radius:12px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #20bdd0,
            var(--ing-primary)
        );

    font-size:.88rem;

    box-shadow:
        0 7px 17px rgba(11,78,162,.13);
}


.footer-contacto div div,
.footer-contacto a div{
    display:flex;

    flex-direction:column;

    gap:2px;

    min-width:0;
}


.footer-contacto small{
    color:#8995a3;

    font-size:.70rem;

    text-transform:uppercase;
    letter-spacing:.04em;
}


.footer-contacto span{
    color:#526176;

    font-size:.89rem;

    line-height:1.35;
}


.footer-contacto a:hover span{
    color:var(--ing-primary);
}


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

.footer-separador{
    position:relative;

    z-index:2;

    border-top:1px solid rgba(11,78,162,.09);
}


.footer-bottom{
    display:flex;

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

    gap:25px;

    min-height:62px;

    color:#758295;

    font-size:.78rem;
}


.footer-bottom-derecha{
    color:#657589;
}


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

@media(max-width:950px){

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

        gap:40px;
    }


    .footer-menu{
        display:none;
    }

}


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

@media(max-width:650px){

    .footer::before{
        width:190px;
        height:190px;

        right:-90px;
        top:-100px;
    }


    .footer::after{
        width:140px;
        height:140px;

        left:-75px;
        bottom:-85px;
    }


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

        gap:28px;

        padding-top:38px;
        padding-bottom:30px;

        text-align:left;
    }


    .footer-brand{
        max-width:100%;
    }


    .footer-brand h3{
        font-size:1.35rem;
    }


    .footer-brand p{
        max-width:100%;

        font-size:.88rem;

        line-height:1.65;
    }


    .footer-menu{
        display:block;
    }


    .footer-menu nav{
        display:grid;

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

        gap:12px 20px;
    }


    .footer-menu a{
        width:auto;

        font-size:.87rem;
    }


    .footer-contacto{
        width:100%;
    }


    .footer-contacto > a,
    .footer-contacto-item{
        width:100%;
    }


    .footer-contacto i{
        width:36px;
        height:36px;

        border-radius:10px;

        font-size:.80rem;

        box-shadow:none;
    }


    .footer-contacto span{
        font-size:.84rem;

        word-break:normal;
        overflow-wrap:break-word;
    }


    .footer-bottom{
        flex-direction:column;

        justify-content:center;

        gap:5px;

        min-height:auto;

        padding:16px 0;

        text-align:center;

        line-height:1.45;

        font-size:.72rem;
    }

}


/* =========================================================
   MÓVIL PEQUEÑO
========================================================= */

@media(max-width:380px){

    .footer-contenido{
        padding-top:32px;
        padding-bottom:25px;
    }


    .footer-brand h3{
        font-size:1.22rem;
    }


    .footer-brand p{
        font-size:.82rem;
    }


    .footer-menu h4,
    .footer-contacto h4{
        font-size:.78rem;
    }


    .footer-contacto span{
        font-size:.78rem;
    }


    .footer-bottom{
        font-size:.67rem;
    }

}