.hero-contacto{

position:relative;

width:100%;

height:670px;

display:flex;

align-items:center;

overflow:hidden;

z-index:6;

box-shadow:0 28px 55px rgba(13,19,27,.26);

}

.hero-contacto-fondo{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

object-fit:cover;

z-index:1;

}

.hero-contacto-capa{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:
linear-gradient(
90deg,
rgba(6,14,26,.92) 0%,
rgba(6,14,26,.78) 35%,
rgba(6,14,26,.40) 65%,
rgba(6,14,26,.15) 100%
);

z-index:2;

}

.hero-contacto-distribucion{

position:relative;

z-index:3;

display:grid;

grid-template-columns:1fr 470px;

align-items:center;

gap:70px;

width:100%;

max-width:1280px;

margin:0 auto;

padding:85px 0 70px;

}

.hero-contacto-contenido{

position:relative;

z-index:3;

max-width:760px;

padding-top:50px;

transform:translateY(-71px);

}

.hero-contacto-etiqueta{

color:#ef6c00;

font-size:14px;

font-weight:700;

letter-spacing:5px;

margin-bottom:20px;

}

.hero-contacto-contenido h1{

font-size:64px;

line-height:1.05;

color:#ffffff;

margin-bottom:24px;

}

.hero-contacto-contenido p{

font-size:20px;

line-height:1.7;

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

max-width:620px;

}

.contacto-informacion{

padding:55px 0 45px;

background:#ffffff;

}

.contacto-titulo{

max-width:760px;

margin:0 auto 35px;

text-align:center;

}

.contacto-etiqueta{

color:#ef6c00;

font-size:14px;

font-weight:700;

letter-spacing:4px;

margin-bottom:18px;

}

.contacto-titulo h2{

font-size:52px;

line-height:1.15;

color:#111111;

margin-bottom:24px;

}

.contacto-titulo p{

font-size:20px;

line-height:1.8;

color:#666666;

}

.contacto-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

margin-top:20px;

padding-top:20px;

border-top:1px solid rgba(17,17,17,.08);

align-items:start;

}


.contacto-card{

padding:0;

background:transparent;

border:none;

box-shadow:none;

}

.contacto-card:hover{

transform:none;

box-shadow:none;

}

.contacto-card h3{

font-size:18px;

margin-bottom:8px;

color:#111111;

}

.contacto-card p{

font-size:16px;

line-height:1.6;

color:#666666;

}

@media (max-width:900px){

.hero-contacto{

height:auto;

padding:120px 0 70px;

}

.hero-contacto-contenido{

padding-top:0;

}

.hero-contacto-contenido h1{

font-size:48px;

}

.contacto-grid{

grid-template-columns:1fr;

}

}

.formulario-contacto{

padding:0 0 90px;

background:#ffffff;

}

.formulario-titulo{

max-width:760px;

margin:0 auto 60px;

text-align:center;

}

.formulario-titulo h2{

font-size:52px;

line-height:1.15;

color:#111111;

margin-bottom:24px;

}

.formulario-titulo p{

font-size:20px;

line-height:1.8;

color:#666666;

}

.contacto-formulario{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:30px;

max-width:1050px;

margin:0 auto;

}

.campo{

display:flex;

flex-direction:column;

}

.campo label{

font-size:15px;

font-weight:700;

color:#111111;

margin-bottom:10px;

}

.campo input,

.campo textarea{

width:100%;

padding:18px 20px;

font-size:17px;

border:1px solid rgba(17,17,17,.12);

border-radius:16px;

background:#fafafa;

transition:.30s;

font-family:inherit;

}

.campo input:focus,

.campo textarea:focus{

outline:none;

border-color:#ef6c00;

background:#ffffff;

box-shadow:0 0 0 4px rgba(239,108,0,.12);

}

.campo textarea{

resize:vertical;

min-height:180px;

}

.campo-completo{

grid-column:1 / -1;

}

.formulario-boton{

text-align:center;

margin-top:10px;

}

.formulario-boton button{

padding:18px 48px;

border:2px solid #ef6c00;

background:#ffffff;

color:#ef6c00;

font-size:15px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

border-radius:50px;

transition:.35s;

cursor:pointer;

}

.formulario-boton button:hover{

background:#ef6c00;

color:#ffffff;

}

@media (max-width:900px){

.contacto-formulario{

grid-template-columns:1fr;

}

.formulario-titulo h2{

font-size:42px;

}

}

.hero-contacto-formulario{

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

padding:26px;

border-radius:22px;

box-shadow:0 26px 55px rgba(0,0,0,.25);

}

.hero-contacto-formulario h2{

font-size:22px;

color:#111111;

margin-bottom:18px;

text-align:center;

}

.contacto-formulario-hero{

display:grid;

grid-template-columns:1fr 1fr;

gap:12px;

}

.campo-hero{

display:flex;

flex-direction:column;

}

.campo-hero label{

font-size:12px;

font-weight:700;

color:#444444;

margin-bottom:4px;

}

.campo-hero input,

.campo-hero textarea{

padding:10px 12px;

border:1px solid #dddddd;

border-radius:10px;

font-size:14px;

font-family:inherit;

transition:.30s;

}

.campo-hero input:focus,

.campo-hero textarea:focus{

outline:none;

border-color:#ef6c00;

box-shadow:0 0 0 3px rgba(239,108,0,.15);

}

.campo-hero textarea{

resize:none;

}

.campo-hero-completo{

grid-column:1 / -1;

}

.hero-formulario-boton{

margin-top:8px;

}

.hero-formulario-boton button{

width:100%;

padding:13px;

background:#ef6c00;

color:#ffffff;

font-size:14px;

font-weight:700;

letter-spacing:2px;

border:none;

border-radius:10px;

transition:.30s;

}

.hero-formulario-boton button:hover{

background:#d85d00;

}

@media (max-width:900px){

.hero-contacto{

height:auto;

padding:120px 0 60px;

}

.hero-contacto-distribucion{

grid-template-columns:1fr;

gap:45px;

padding:0;

}

.hero-contacto-contenido{

padding-top:0;

}

.hero-contacto-contenido h1{

font-size:48px;

}

.contacto-formulario-hero{

grid-template-columns:1fr;

}

}

#mensaje-contacto-exito{

margin-bottom:16px;

padding:12px 16px;

background:#e8f5e9;

border:1px solid #66bb6a;

border-radius:10px;

color:#267437;

font-size:15px;

font-weight:700;

text-align:center;

transition:
opacity .40s ease,
transform .40s ease;

}