@import url('variables.css');

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

.main-footer{

    width:100%;

    color:var(--blanco);

    position:relative;

    background-color:
        var(--guinda);

    background-image:

        linear-gradient(

            rgba(0,0,0,.2),

            rgba(0,0,0,.2)

        ),

        url("../../img/iconos/unnamed2.png");

    background-repeat:
        repeat;

    background-blend-mode:
        multiply;

    overflow:hidden;

}

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

.footer-container{

    max-width:1200px;

    margin:0 auto;

    padding:60px 20px;

    display:flex;

    flex-wrap:wrap;

    justify-content:
        space-between;

    align-items:center;

    gap:40px;

}

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

.brand-section{

    flex:1 1 300px;

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    min-width:0;

    overflow:hidden;

}

.brand-section img{

    display:block;

    width:auto;

    max-width:100%;

    height:auto;

    max-height:180px;

    object-fit:contain;

}

/* =========================
   TITULOS
========================= */

.main-footer h2{

    position:relative;

    margin-bottom:25px;

    padding-bottom:10px;

    font-size:20px;

    font-weight:700;

    text-transform:
        uppercase;

    letter-spacing:1px;

}

.main-footer h2::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:45px;

    height:3px;

    background:
        var(--dorado);

}

/* =========================
   SECCIONES
========================= */

.contact-section,
.emergency-section{

    flex:1;

    min-width:250px;

}

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

.contact-list{

    list-style:none;

    margin:0;

    padding:0;

}

.contact-list li{

    display:flex;

    margin-bottom:18px;

    font-size:14px;

    line-height:1.5;

}

.contact-list i{

    width:30px;

    margin-top:2px;

    font-size:18px;

    flex-shrink:0;

}

.contact-list a,
.phone-number a{

    color:inherit;

    text-decoration:none;

    transition:.3s ease;

}

.contact-list a:hover,
.phone-number a:hover{

    color:

        var(

            --blanco-transp,

            rgba(
                255,
                255,
                255,
                .85
            )

        );

    text-decoration:
        underline;

}

.contact-list a:focus-visible,
.phone-number a:focus-visible{

    outline:

        2px solid

        var(--dorado);

    outline-offset:
        3px;

}

/* =========================
   EMERGENCIAS
========================= */

.emergency-grid{

    display:grid;

    grid-template-columns:
        1fr auto;

    gap:12px 20px;

    font-size:14px;

}

.phone-number{

    padding:2px 10px;

    border-radius:4px;

    font-weight:700;

    background:

        rgba(

            255,
            255,
            255,

            .15

        );

}

/* =========================
   BARRA FINAL
========================= */

.footer-bar{

    padding:20px 0;

    text-align:center;

    background:
        var(--gris-footer);

    border-top:

        1px solid

        rgba(

            255,
            255,
            255,

            .05

        );

}

.footer-bar p{

    margin:0;

    font-size:13px;

    color:

        var(

            --blanco-transp,

            rgba(

                255,
                255,
                255,

                .85

            )

        );

}

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

@media(max-width:768px){

    .footer-container{

        flex-direction:
            column;

        text-align:
            center;

    }

    .brand-section{

        width:100%;

        min-width:100%;

    }

    .brand-section img{

        width:85%;

        max-width:360px;

        max-height:none;

    }

    .main-footer h2::after{

        left:50%;

        transform:
            translateX(-50%);

    }

    .contact-list li{

        justify-content:
            center;

    }

    .emergency-grid{

        justify-items:
            center;

    }

}

/* =========================
   TELEFONOS
========================= */

@media(max-width:480px){

    .brand-section img{

        width:92%;

        max-width:280px;

    }

}