.hero-servicios{

position:relative;

width:100%;

height:520px;

display:flex;

align-items:center;

overflow:hidden;

z-index:6;

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

}


.hero-servicios-fondo{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

object-fit:cover;

z-index:1;

}

.hero-servicios-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-servicios-contenido{

position:relative;

z-index:3;

max-width:900px;

padding-top:105px;

}

.hero-servicios-etiqueta{

color:#ef6c00;

font-size:14px;

font-weight:700;

letter-spacing:5px;

margin-bottom:20px;

}

.hero-servicios-contenido h1{

font-size:64px;

line-height:1.05;

color:#ffffff;

margin-bottom:24px;

}

.hero-servicios-contenido p{

font-size:20px;

line-height:1.7;

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

max-width:620px;

}

.servicios-principales{

margin-top:-35px;

padding:85px 0 100px;

background:#ffffff;

position:relative;

z-index:2;

}

.servicios-titulo{

max-width:760px;

margin:0 auto 70px;

text-align:center;

}

.servicios-etiqueta{

color:#ef6c00;

font-size:14px;

font-weight:700;

letter-spacing:4px;

margin-bottom:18px;

}

.servicios-titulo h2{

font-size:52px;

line-height:1.15;

color:#111111;

margin-bottom:24px;

}

.servicios-titulo p{

font-size:20px;

line-height:1.8;

color:#666666;

}

.servicios-grid{

display:grid;

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

gap:35px;

}

.servicio-card{

display:flex;

flex-direction:column;
min-height:560px;

background:#ffffff;

border-radius:22px;

overflow:hidden;

text-decoration:none;

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

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

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

}

.servicio-card:hover{

transform:translateY(-10px);

border-color:rgba(239,108,0,.35);

box-shadow:0 40px 90px rgba(13,19,27,.24);

}

.servicio-card img{

width:100%;

height:220px;

object-fit:cover;

display:block;

transition:transform .6s ease;

}

.servicio-card:hover img{

transform:scale(1.05);

}

.servicio-info{

padding:34px;

display:flex;

flex-direction:column;

flex:1;

}

.servicio-info h3{

font-size:32px;

color:#111111;

margin-bottom:18px;

}

.servicio-info p{

font-size:18px;

line-height:1.8;

color:#666666;

margin-bottom:28px;

}

.servicio-info span{

display:inline-block;

margin-top:auto;

padding:16px 34px;

border:2px solid #ef6c00;

color:#ef6c00;

font-size:15px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

transition:all .35s ease;

}

.servicio-card:hover .servicio-info span{

background:#ef6c00;

color:#ffffff;

}

.servicio-card:hover span{

background:#111111;

}

.servicios-cierre{

padding:55px 0;

background:
linear-gradient(
135deg,
#0a1018 0%,
#111c29 55%,
#0d131b 100%
);

position:relative;

overflow:hidden;

}

.servicios-cierre::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background-image:url("../assets/images/plano_lineas.png");

background-repeat:no-repeat;

background-position:center;

background-size:cover;

opacity:.15;

pointer-events:none;

}

.servicios-cierre-contenido{

position:relative;

z-index:2;

max-width:1200px;

margin:auto;

display:flex;

align-items:center;

justify-content:space-between;

gap:70px;

}

.servicios-cierre-texto{

flex:1;

text-align:left;

}


.servicios-cierre-etiqueta{

color:#ef6c00;

font-size:14px;

font-weight:700;

letter-spacing:5px;

margin-bottom:22px;

}

.servicios-cierre h2{

font-size:42px;

line-height:1.2;

color:#ffffff;

margin-bottom:18px;

}

.servicios-cierre p{

font-size:18px;

line-height:1.8;

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

margin:0;

max-width:700px;

}

.servicios-cierre-boton{

display:inline-block;

padding:18px 42px;

border:2px solid #ef6c00;

color:#ef6c00;

font-size:15px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

transition:all .35s ease;

}

.servicios-cierre-boton:hover{

background:#ef6c00;

color:#ffffff;

}