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

.contacto-section{

padding:
62px 0 0px;

}

/* ===================================================== /
/ PLACEHOLDER /
/ ===================================================== */

.contacto-placeholder{

width:100%;

}

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

.contacto-hero{

max-width:720px;

margin-bottom:10px;

}

/* TAG */

.contacto-hero small{

color:#1e88ff;

letter-spacing:4px;

text-transform:uppercase;

font-size:11px;

display:block;

margin-bottom:8px;

}

/* TITLE */

.contacto-hero h1{

font-size:36px;

line-height:1;

font-weight:800;

color:white;

margin-bottom:10px;

}

/* TEXT */

.contacto-hero p{

font-size:14px;

line-height:1.5;

color:#aab4c5;

max-width:680px;

margin-bottom:0;

}

/* ===================================================== /
/ FORM BOX /
/ ===================================================== */

.contacto-box{

background:
rgba(255,255,255,0.03);

border:
1px solid rgba(255,255,255,0.05);

border-radius:28px;

padding:
22px;

}

/* ===================================================== /
/ LABELS /
/ ===================================================== */

.contacto-box label{

display:block;

margin-bottom:5px;

color:#dce4ef;

font-size:12px;

font-weight:600;

}

/* ===================================================== /
/ INPUTS /
/ ===================================================== */

.contacto-box .form-control{

background:
rgba(255,255,255,0.04);

border:
1px solid rgba(30,136,255,0.9);

color:white;

border-radius:18px;

padding:
10px 16px;

min-height:48px;

font-size:13px;

transition:0.3s;

}

/* FOCUS */

.contacto-box .form-control{

background:
rgba(255,255,255,0.06);

border-color:#1e88ff;

box-shadow:
0 0 14px rgba(30,136,255,0.22);

color:white;

}

/* PLACEHOLDER */

.contacto-box .form-control::placeholder{

color:#8b96aa;

}

/* ===================================================== /
/ BUTTON /
/ ===================================================== */

.contacto-btn{

padding:
11px 22px;

border-radius:16px;

font-size:14px;

font-weight:600;

}

/* ===================================================== /
/ GAP AJUSTE /
/ ===================================================== */

.contacto-box .row{

--bs-gutter-y:0.7rem;

}

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

@media(max-width:900px){

.contacto-section{

    padding:
    82px 0 8px;
}

.contacto-hero h1{

    font-size:30px;
}

.contacto-hero p{

    font-size:13px;
}

.contacto-box{

    padding:
    18px;
}

.contacto-box .form-control{

    min-height:46px;
}

}