/* HERO */

.hero-sgmao{
position:relative;
background:url("../img/hero/hero-smgao.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-sgmao{
    padding:80px 0;
background:#4CAF50;
}

/* TITULO */

.section-title{
color:#003366;
}

.texto-sgmao{
max-width:700px;
margin:auto;
}


/* CONTENEDOR TARJETAS */

.tarjetas-sgmao{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:25px;
}


/* TARJETAS */

.card-premium{
width:320px;
padding:30px;
border-radius:16px;
border:2px solid #fcbf49;
text-align:center;
transition:.4s;
box-shadow:0 12px 25px rgba(0,0,0,.3);
}

.card-premium:hover{
transform:translateY(-10px);
box-shadow:0 20px 40px rgba(0,0,0,.45);
}


/* COLORES TARJETAS */

.card-azul{
background:linear-gradient(145deg,#003366,#00509e);
color:white;
}

.card-amarilla{
background:linear-gradient(145deg,#f5c63d,#e6b800);
color:#222;
border-color:#003366;
}

.card-gris{
background:linear-gradient(145deg,#5a5a5a,#7a7a7a);
color:white;
}


/* ICONOS */

.icon-premium{
font-size:50px;
margin-bottom:15px;
transition:.4s;
}

.card-premium:hover .icon-premium{
transform:rotate(15deg) scale(1.1);
color:#ffe28a;
}


/* TEXTO */

.text-premium{
font-size:16px;
margin-bottom:15px;
}

.list-premium{
list-style:none;
padding:0;
text-align:left;
}

.list-premium li{
font-size:14px;
line-height:1.8;
}


/* RESPONSIVE */

@media(max-width:768px){

.hero-sgmao{
min-height:40vh;
padding:60px 15px;
}

.hero-sub{
font-size:0.95rem;
}

.card-premium{
width:100%;
}

.icon-premium{
font-size:40px;
}

}