/* HERO */

.hero-portafolio{
position:relative;
background:url("../img/hero/hero-contacto.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;
max-width:850px;
z-index:2;
}

.hero-portafolio h1{
font-size:clamp(2rem,4vw,3rem);
font-weight:700;
margin-bottom:15px;
}

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

.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;
}

/* BARRA INDUSTRIAL */

.barra-industrial{
background:#003366;
color:white;
padding:18px 0;
}

.barra-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
text-align:center;
gap:10px;
font-weight:600;
}

.barra-grid i{
color:#f2b705;
margin-right:8px;
}


/* CONTACTO */

.section-industrial{
padding:80px 0;
background:#4CAF50;
}


/* TARJETAS */

.contact-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:30px;
margin-bottom:60px;
}

.contact-card{
background:#fff;
border-radius:8px;
padding:35px 25px;
text-align:center;
box-shadow:0 6px 18px rgba(0,0,0,0.08);
border-top:4px solid #f2b705;
transition:.3s;
}

.contact-card:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,0,0,0.12);
}

.contact-card i{
font-size:32px;
color:#f2b705;
margin-bottom:15px;
}

.contact-card h4{
font-weight:700;
margin-bottom:10px;
color:#003366;
}

.contact-card p{
font-size:14px;
color:#555;
margin-bottom:15px;
}

.contact-card a{
color:#003366;
font-weight:600;
text-decoration:none;
}

.contact-card a:hover{
text-decoration:underline;
}


/* CONTACT ITEMS */

.contact-item{
display:flex;
gap:15px;
margin-bottom:25px;
align-items:flex-start;
}

.contact-item i{
font-size:22px;
color:#f5c63d;
margin-top:3px;
}

.contact-item a{
text-decoration:none;
color:#003366;
font-weight:500;
}

.contact-item a:hover{
text-decoration:underline;
}


/* BOTÓN MAPA */

.btn-mapa{
display:inline-block;
background:#003366;
color:#fff !important;
padding:10px 16px;
border-radius:6px;
font-size:14px;
font-weight:600;
text-decoration:none;
transition:.3s;
}

.btn-mapa:hover{
background:#002244;
}


/* DIVISOR */

.divisor-metal{
height:2px;
background:linear-gradient(
90deg,
transparent,
#c7c7c7,
#888,
#c7c7c7,
transparent
);
margin:60px 0;
}

/* ========================================
TABLET (<= 992px)
======================================== */
@media (max-width:992px){

.hero-portafolio{
min-height:55vh;
padding:70px 20px;
text-align:center;
}

.hero-content{
max-width:90%;
}

.hero-portafolio h1{
font-size:2.2rem;
}

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

.barra-grid{
grid-template-columns:repeat(2,1fr);
}

.contact-grid{
gap:20px;
}

.contact-card{
padding:30px 20px;
}

.navbar-brand span{
font-size:.85rem;
}

}


/* ========================================
MÓVIL (<= 768px)
======================================== */
@media (max-width:768px){

.hero-portafolio{
min-height:50vh;
padding:60px 15px;
}

.hero-portafolio h1{
font-size:1.9rem;
}

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

.barra-grid{
grid-template-columns:1fr;
gap:15px;
}

.contact-grid{
grid-template-columns:1fr;
}

.contact-card{
padding:25px 18px;
}

.contact-item{
flex-direction:column;
gap:5px;
}

.contact-item i{
font-size:20px;
}

.btn-mapa{
width:100%;
text-align:center;
}

.divisor-metal{
margin:40px 0;
}

.navbar-brand span{ font-size:.9rem; }
}


/* ========================================
MÓVIL PEQUEÑO (<= 480px)
======================================== */
@media (max-width:480px){

.hero-portafolio{
padding:50px 10px;
}

.hero-portafolio h1{
font-size:1.6rem;
}

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

.contact-card{
padding:20px 15px;
}

.contact-card i{
font-size:28px;
}

.contact-card h4{
font-size:1rem;
}

.contact-card p{
font-size:13px;
}

.navbar-brand span{
font-size:.75rem;
}

}