/* ==========================================================
   HERO
========================================================== */

.contacto-hero{
    position:relative;
    width:100%;
    min-height:clamp(520px,41.6667vw,800px);
    overflow:hidden;
    color:var(--global-white);
    background-color:var(--global-black);
    background-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,.94) 0%,
            rgba(0,0,0,.76) 46%,
            rgba(0,0,0,.22) 78%,
            rgba(0,0,0,.06) 100%
        ),
        var(--contacto-hero-image);
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}

.contacto-hero::after{
    content:"";
    position:absolute;
    inset:0;
    border-bottom:1px solid rgba(255,255,255,.18);
    pointer-events:none;
}

.contacto-hero-row{
    position:relative;
    z-index:1;
    min-height:clamp(520px,41.6667vw,800px);
    padding-top:clamp(5rem,9vw,9rem);
    padding-bottom:clamp(4rem,7vw,7rem);
}

.contacto-hero-copy{
    max-width:980px;
}

.contacto-hero-copy .global-kicker{
    margin-bottom:1.5rem;
    color:rgba(255,255,255,.68);
}

.contacto-hero-copy h1{
    margin-bottom:1.5rem;
    font-size:clamp(3.5rem,7vw,7.2rem);
    line-height:.92;
    letter-spacing:-.06em;
}

.contacto-hero-copy > p{
    max-width:760px;
    margin-bottom:0;
    color:rgba(255,255,255,.74);
    font-size:clamp(1.05rem,1.7vw,1.3rem);
    line-height:1.7;
}


/* ==========================================================
   INTRODUCCIÓN
========================================================== */

.contacto-intro{
    border-bottom:1px solid var(--global-gray-200);
}

.contacto-intro-heading h2{
    max-width:600px;
    margin-bottom:0;
    font-size:clamp(2.4rem,4.5vw,4.8rem);
    line-height:1;
    letter-spacing:-.05em;
}

.contacto-intro-texto{
    max-width:800px;
}

.contacto-intro-texto p{
    margin-bottom:0;
    color:var(--global-gray-700);
    font-family:var(--global-font-heading);
    font-size:clamp(1.45rem,2.6vw,2.4rem);
    font-weight:600;
    line-height:1.25;
    letter-spacing:-.035em;
}


/* ==========================================================
   FORMULARIO Y DATOS
========================================================== */

.contacto-principal{
    border-bottom:1px solid var(--global-gray-200);
}

.contacto-seccion-heading{
    margin-bottom:clamp(2.5rem,5vw,4.5rem);
}

.contacto-seccion-heading .global-kicker{
    margin-bottom:1.25rem;
}

.contacto-seccion-heading h2{
    max-width:680px;
    margin-bottom:0;
    font-size:clamp(2.4rem,4.5vw,4.8rem);
    line-height:1;
    letter-spacing:-.05em;
}


/* ==========================================================
   CAMPOS DEL FORMULARIO
========================================================== */

.contacto-campo{
    position:relative;
}

.contacto-etiqueta{
    display:block;
    margin-bottom:10px;
    color:var(--global-gray-600);
    font-size:.74rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.contacto-campo .form-control{
    display:block;
    width:100%;
    height:54px;
    padding:0 18px;
    border:1px solid var(--global-gray-400);
    border-radius:0;
    outline:0;
    color:var(--global-black);
    background:var(--global-white);
    box-shadow:none;
    font-family:var(--global-font-body);
    font-size:1rem;
    line-height:1.4;
    transition:
        border-color var(--global-transition),
        background-color var(--global-transition);
}

.contacto-campo textarea.form-control{
    width:100%;
    min-height:220px;
    height:auto;
    padding:16px 18px;
    resize:vertical;
    line-height:1.75;
}

.contacto-campo .form-control::placeholder{
    color:var(--global-gray-500);
    opacity:1;
}

.contacto-campo .form-control:hover{
    border-color:var(--global-gray-600);
}

.contacto-campo .form-control:focus{
    border-color:var(--global-black);
    color:var(--global-black);
    background:var(--global-white);
    box-shadow:none;
}


/* ==========================================================
   reCAPTCHA
========================================================== */

.contacto-captcha{
    position:relative;
    min-height:78px;
    padding:16px;
    border:1px solid var(--global-gray-200);
    border-radius:0;
    background:var(--global-gray-100);
}

.contacto-captcha-aviso{
    margin:0;
    color:#9f1b1b;
    font-size:.86rem;
    line-height:1.6;
}

.hiddenRecaptcha{
    position:absolute;
    width:1px;
    height:1px;
    margin:0;
    padding:0;
    overflow:hidden;
    border:0;
    opacity:0;
    pointer-events:none;
}


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

.contacto-boton{
    display:inline-flex;
    min-width:230px;
    height:56px;
    padding:0 24px;
    border:1px solid var(--global-black);
    border-radius:0;
    align-items:center;
    justify-content:space-between;
    gap:2rem;
    color:var(--global-white);
    background:var(--global-black);
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    transition:
        color var(--global-transition),
        background-color var(--global-transition),
        border-color var(--global-transition),
        opacity var(--global-transition);
}

.contacto-boton i{
    font-size:1.1rem;
    transition:transform var(--global-transition);
}

.contacto-boton:hover:not(:disabled){
    color:var(--global-black);
    background:var(--global-white);
}

.contacto-boton:hover:not(:disabled) i{
    transform:translate(4px,-4px);
}

.contacto-boton:focus-visible{
    outline:2px solid var(--global-black);
    outline-offset:4px;
}

.contacto-boton:disabled{
    cursor:not-allowed;
    opacity:.62;
}


/* ==========================================================
   DATOS DE CONTACTO
========================================================== */

.contacto-datos{
    padding-left:clamp(0rem,3vw,3rem);
}

.contacto-datos-lista{
    margin:0;
    font-style:normal;
}

.contacto-dato-item{
    display:grid;
    grid-template-columns:minmax(130px,.8fr) 1.2fr;
    gap:1.5rem;
    padding:1.35rem 0;
    border-bottom:1px solid var(--global-gray-200);
}

.contacto-dato-item:first-child{
    border-top:1px solid var(--global-gray-200);
}

.contacto-dato-etiqueta{
    color:var(--global-gray-500);
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.contacto-dato-enlaces a{
    display:block;
    width:max-content;
    max-width:100%;
    margin-bottom:.35rem;
    color:var(--global-black);
    font-family:var(--global-font-heading);
    font-size:clamp(1.05rem,1.7vw,1.3rem);
    font-weight:600;
    line-height:1.4;
    overflow-wrap:anywhere;
}

.contacto-dato-enlaces a:last-child{
    margin-bottom:0;
}

.contacto-dato-enlaces a:hover{
    color:var(--global-gray-500);
}


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

.contacto-mapa{
    width:100%;
    overflow:hidden;
    background:var(--global-gray-100);
}

.contacto-mapa iframe{
    display:block;
    width:100%;
    height:520px;
    border:0;
    filter:grayscale(1);
}


/* ==========================================================
   CIERRE
========================================================== */

.contacto-cierre-logo{
    display:inline-block;
    width:min(100%,220px);
    height:auto;
}

.contacto-cierre h2{
    max-width:780px;
    margin:1rem 0 1.25rem;
}

.contacto-cierre-texto{
    max-width:650px;
    margin-bottom:0;
    color:rgba(255,255,255,.68);
    font-size:1.05rem;
    line-height:1.75;
}

.contacto-cierre-boton{
    display:inline-flex;
    min-height:58px;
    padding:0 1.5rem;
    border:1px solid rgba(255,255,255,.35);
    border-radius:0;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem;
    color:var(--global-white);
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    transition:
        color var(--global-transition),
        background-color var(--global-transition),
        border-color var(--global-transition);
}

.contacto-cierre-boton i{
    font-size:1.1rem;
    transition:transform var(--global-transition);
}

.contacto-cierre-boton:hover{
    border-color:var(--global-white);
    color:var(--global-black);
    background:var(--global-white);
}

.contacto-cierre-boton:hover i{
    transform:translate(4px,-4px);
}


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

@media (max-width:991.98px){

    .contacto-datos{
        padding-left:0;
    }

    .contacto-cierre-logo{
        width:180px;
        margin-bottom:1rem;
    }

}

@media (max-width:767.98px){

    .contacto-hero{
        min-height:auto;
        background-image:
            linear-gradient(
                180deg,
                rgba(0,0,0,.38) 0%,
                rgba(0,0,0,.95) 100%
            ),
            var(--contacto-hero-image);
        background-position:58% center;
    }

    .contacto-hero-row{
        min-height:680px;
        padding-top:4rem;
        padding-bottom:4rem;
    }

    .contacto-hero-copy h1{
        font-size:clamp(3rem,15vw,5rem);
    }

    .contacto-dato-item{
        grid-template-columns:1fr;
        gap:.5rem;
    }

    .contacto-mapa iframe{
        height:400px;
    }

}

@media (max-width:575.98px){

    .contacto-campo .form-control{
        height:52px;
        padding-right:15px;
        padding-left:15px;
    }

    .contacto-campo textarea.form-control{
        min-height:190px;
        height:auto;
        padding:15px;
    }

    .contacto-captcha{
        overflow-x:auto;
    }

    .contacto-boton,
    .contacto-cierre-boton{
        width:100%;
    }

    .contacto-mapa iframe{
        height:340px;
    }

}

/* ==========================================================
   COLORES DE ENCABEZADOS SEGÚN CONTRASTE
========================================================== */

.contacto-hero h1,
.contacto-hero h2,
.contacto-hero h3,
.contacto-hero h4,
.contacto-hero h5,
.contacto-hero h6,
.contacto-cierre h1,
.contacto-cierre h2,
.contacto-cierre h3,
.contacto-cierre h4,
.contacto-cierre h5,
.contacto-cierre h6{
    color:var(--global-heading-dark-bg);
}