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

.hero-sgmao{
position:relative;
background:url("../img/hero/hero_solucion.webp") center/cover no-repeat;
min-height:65vh;
display:flex;
align-items:center;
justify-content:center;
padding:90px 20px;
color:#fff;
}

.hero-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,0.55);
}

.hero-content{
position:relative;
z-index:2;
max-width:800px;
}

.hero-sgmao h1{
font-size:clamp(2rem,4vw,3rem);
font-weight:700;
letter-spacing:1px;
}

.hero-sgmao h1::after{
content:"";
display:block;
width:80px;
height:4px;
background:#f2b705;
margin:15px auto;
}

.hero-sub{
font-size:clamp(1rem,1.3vw,1.2rem);
line-height:1.6;
opacity:.95;
}

.text-muted-white{
    color: #fff;
}

.section-solucion{
    padding:80px 0;
background:#4CAF50;
}
/* =====================================
TÍTULOS
===================================== */

.section-title{
font-weight:700;
color:#fff;
}


/* =====================================
SERVICIOS
===================================== */

.service-mini{
display:flex;
align-items:flex-start;
gap:12px;
background:white;
padding:15px;
border-radius:6px;
box-shadow:0 5px 15px rgba(0,0,0,0.05);
transition:0.3s;
height:100%;
}

.service-mini:hover{
transform:translateY(-3px);
box-shadow:0 8px 20px rgba(0,0,0,0.1);
}

.service-mini i{
font-size:20px;
color:#f2b705;
margin-top:3px;
}


/* =====================================
TARJETA
===================================== */

.card-industrial{
border:0;
border-radius:8px;
}


/* =====================================
LISTA
===================================== */

.list-check{
list-style:none;
padding:0;
}

.list-check li{
position:relative;
padding-left:25px;
margin-bottom:8px;
}

.list-check li:before{
content:"✔";
position:absolute;
left:0;
color:#f2b705;
font-weight:bold;
}


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

@media (max-width:768px){

#soluciones{
text-align:center;
}

.service-mini{
text-align:left;
}

.card-industrial{
margin-top:20px;
}

}

@media (max-width:576px){

.hero-sgmao{
min-height:40vh;
padding:60px 15px;
}

.hero-sub{
font-size:0.95rem;
}

}