/*==================================================
                FONDO
==================================================*/

.menu-background{

    position: fixed;

    inset: 0;

    background:
        linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
        url("../fotos/fotos/foto4.webp") center/cover no-repeat;

    z-index:-2;

}

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

#contact-section{

    padding:140px 0 100px;

    min-height:100vh;

}

.contact-title{

    width:min(1000px,90%);

    margin:0 auto 70px;

    text-align:center;

}

.contact-title h1{

    font-family:"Cormorant Garamond",serif;

    font-size:5rem;

    font-weight:400;

    color:white;

    margin-bottom:20px;

}

.contact-title p{

    max-width:650px;

    margin:auto;

    color:#d6d6d6;

    font-size:1.1rem;

    line-height:1.8;

}

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

.contact-container{

    width:min(1200px,90%);

    margin:auto;

    display:grid;

    grid-template-columns:380px 1fr;

    gap:50px;

    align-items:stretch;

}

/*==================================================
                INFORMACIÓN
==================================================*/

.contact-info{

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(14px);

    border-radius:16px;

    padding:45px;

    box-shadow:0 20px 45px rgba(0,0,0,.35);

}

.info-block{

    margin-bottom:35px;

}

.info-block:last-child{

    margin-bottom:0;

}

.info-block h2{

    font-family:"Cormorant Garamond",serif;

    font-size:2rem;

    font-weight:500;

    color:white;

    margin-bottom:10px;

}

.info-block p{

    color:#d4d4d4;

    line-height:1.8;

}

.info-block a{

    color: rgb(255, 204, 0);

    text-decoration:none;

    transition:.3s;

}

.info-block a:hover{

    color:white;

}

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

.social-links{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.social-links a{

    color: rgb(255, 204, 0);

    text-decoration:none;

    transition:.3s;

}

.social-links a:hover{

    color:white;

    transform:translateX(6px);

}

/*==================================================
                    MAPA
==================================================*/

.contact-map{

    border-radius:16px;

    overflow:hidden;

    box-shadow:0 20px 45px rgba(0,0,0,.35);

}

.contact-map iframe{

    width:100%;

    height:100%;

    min-height:650px;

    border:none;

    display:block;

}

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

@media(max-width:900px){

    .contact-container{

        grid-template-columns:1fr;

    }

    .contact-title h1{

        font-size:3.5rem;

    }

    .contact-info{

        padding:35px;

    }

    .contact-map iframe{

        min-height:450px;

    }

}

@media(max-width:600px){

    #contact-section{

        padding:120px 0 70px;

    }

    .contact-title h1{

        font-size:2.8rem;

    }

    .contact-title p{

        font-size:1rem;

    }

    .info-block h2{

        font-size:1.7rem;

    }

}