/*==================================================*
  CONTACTO - SMAR
*==================================================*/

.contact{
    position:relative;
    overflow:hidden;
    padding:100px 0;
}

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

.contact-parallax{
    position:absolute;
    top:-20%;
    left:0;
    width:100%;
    height:140%;

    background-image:url("../img/backgrounds/contacto-bg.webp");
    background-size:cover;
    background-position:center;

    z-index:0;

    transform:translateY(0);
    will-change:transform;
}

/*==================================================*
  OVERLAY
*==================================================*/

.contact::before{
    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
        180deg,
        rgba(0,40,75,.75),
        rgba(0,20,40,.88)
    );

    z-index:1;
}

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

.contact .container{
    position:relative;
    z-index:2;
}

/*==================================================*
  TÍTULO
*==================================================*/

/* =========================================
   CABECERA DE CONTACTO
========================================= */

.contact-heading{
    text-align:center;
    max-width:760px;
    margin:0 auto 45px;
}

.contact-kicker{
    display:inline-block;
    margin-bottom:12px;

    color:#1B2A41;

    font-size:17px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.contact h2{
    color:#FFFFFF;

    font-size:42px;
    font-weight:700;

    line-height:1.2;

    margin:0 0 14px;
}

.contact-heading p{
    margin:0;

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

    font-size:16px;
    line-height:1.7;
}

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

.contact-wrapper{
    display:flex;
    gap:40px;
    flex-wrap:wrap;
    align-items:stretch;
}

/*==================================================*
  FORMULARIO
*==================================================*/

.contact-form{
    flex:1;
    max-width:500px;

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

    padding:40px;

    border-radius:20px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.25);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.contact-form:hover{
    transform:translateY(-5px);

    box-shadow:
        0 28px 70px rgba(0,0,0,.30);
}

/*==================================================*
  CAMPOS
*==================================================*/

.contact-form input,
.contact-form textarea{
    width:100%;

    padding:14px 16px;

    margin-bottom:16px;

    border-radius:10px;

    border:2px solid #E5E5E5;

    background:#FFFFFF;

    color:#2E2E2E;

    font-family:'Montserrat',sans-serif;
    font-size:14px;

    transition:
        border-color .3s ease,
        box-shadow .3s ease;
}

.contact-form textarea{
    min-height:140px;
    resize:vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
    color:#8A8A8A;
}

.contact-form input:focus,
.contact-form textarea:focus{
    outline:none;

    border-color:#D96B3B;

    box-shadow:
        0 0 0 3px rgba(217,107,59,.12);
}

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

/* =========================================
   BOTÓN SOLICITAR COTIZACIÓN
========================================= */

.contact-form button{
    width:100%;

    background:linear-gradient(
        135deg,
        #D96B3B,
        #C85A2F
    );

    color:#FFFFFF;

    border:none;

    padding:16px 20px;

    border-radius:10px;

    font-family:'Montserrat',sans-serif;
    font-size:15px;
    font-weight:700;

    cursor:pointer;

    box-shadow:
        0 8px 22px rgba(217,107,59,.28);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        filter .3s ease;
}

.contact-form button:hover{
    transform:translateY(-3px);

    box-shadow:
        0 12px 30px rgba(217,107,59,.38);

    filter:brightness(1.05);
}

.contact-form button:active{
    transform:translateY(0);
}

/*==================================================*
  INFORMACIÓN DE CONTACTO
*==================================================*/

.contact-info{
    flex:1;

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

    backdrop-filter:blur(10px);

    padding:35px;

    border-radius:20px;

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

    color:#FFFFFF;

    box-shadow:
        0 20px 60px rgba(0,0,0,.20);
}

/*==================================================*
  DATOS
*==================================================*/

.contact-info p{
    margin-bottom:18px;

    font-size:15px;
    line-height:1.6;
}

.contact-info a{
    color:#FFFFFF;

    font-weight:500;

    transition:
        color .3s ease;
}

.contact-info a:hover{
    color:#4FC3FF;
}

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

.contact-map{
    width:100%;

    margin-top:25px;

    border-radius:16px;

    overflow:hidden;

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

    box-shadow:
        0 15px 35px rgba(0,0,0,.25);
}

.contact-map iframe{
    width:100%;

    height:350px;

    border:0;

    display:block;
}

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

@media (max-width:900px){

    .contact{
        padding:80px 20px;
    }

    .contact h2{
        font-size:30px;
        margin-bottom:35px;
    }

    .contact-wrapper{
        flex-direction:column;
    }

    .contact-form,
    .contact-info{
        max-width:100%;
        width:100%;
    }

    .contact-form{
        padding:30px;
    }

    .contact-info{
        padding:30px;
    }

    .contact-map iframe{
        height:280px;
    }

}


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

@media (max-width:600px){

    .contact{
        padding:70px 15px;
    }

    .contact h2{
        font-size:26px;
    }

    .contact-form{
        padding:25px 20px;
        border-radius:16px;
    }

    .contact-info{
        padding:25px 20px;
        border-radius:16px;
    }

    .contact-map iframe{
        height:240px;
    }

}