*{margin:0;box-sizing:border-box;font-family:'Segoe UI',Arial,sans-serif}
body{color:#202733;background:#fff}
header{height:90px;display:flex;align-items:center;justify-content:space-between;padding:10px 7%;position:fixed;top:0;width:100%;background:#fff;z-index:10;box-shadow:0 4px 20px #0002}
.logo{height:75px;width:auto}
nav a{margin:0 15px;text-decoration:none;color:#12213b;font-weight:600}
.cta{background:#08a348;color:#fff!important;padding:15px 25px;border-radius:40px;text-decoration:none;font-weight:bold}
.hero{min-height:100vh;background:linear-gradient(90deg,#061b43dd,#061b4344),url('../assets/logo.png');background-size:cover;background-position:center;display:flex;align-items:center;padding:8%}
.hero-content{max-width:700px;color:white;margin-top:80px}
.tag{letter-spacing:2px}
h1{font-size:55px;line-height:1.1;margin:20px 0}
.hero p{font-size:22px;margin-bottom:35px}
.outline{border:2px solid white;color:white;padding:13px 25px;border-radius:40px;margin-left:15px;text-decoration:none}
section{padding:80px 8%}
h2{text-align:center;font-size:40px;color:#063b91;margin-bottom:40px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:25px}
.box,.service{padding:35px;background:#fff;border-radius:20px;box-shadow:0 10px 30px #0001}
.dark{background:#081a36;color:white}
.dark h2,.dark h3{color:white}
.gallery{height:300px;background:#eef3fa;border-radius:20px;display:flex;align-items:center;justify-content:center}
footer{background:#071323;color:white;text-align:center;padding:50px}
footer img{height:120px}
.whats{position:fixed;right:25px;bottom:25px;background:#0aa84f;color:#fff;padding:18px 25px;border-radius:50px;text-decoration:none;font-weight:bold}
@media(max-width:900px){nav{display:none}h1{font-size:36px}}

.hero{
background:
linear-gradient(90deg,rgba(4,22,55,.90),rgba(4,22,55,.45)),
url('../assets/logo.png') center/cover;
}
.materials{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:25px;
margin-top:35px;
}
.material{
background:#fff;
color:#172033;
border-radius:20px;
overflow:hidden;
box-shadow:0 12px 35px rgba(0,0,0,.2);
text-align:center;
}
.material img{
width:100%;
height:180px;
object-fit:contain;
padding:15px;
background:#fff;
}
.material h3{
color:#073b91;
font-size:25px;
}
.material p{
padding:0 20px 25px;
}
.subtitle{
text-align:center;
max-width:700px;
margin:-20px auto 35px;
}

.service-section .box{
background:#fff;
border-left:5px solid #073b91;
}
.videos{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
margin-top:30px;
}
.videos video{
width:100%;
border-radius:20px;
box-shadow:0 10px 25px #0002;
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
margin-top:30px;
}
.gallery-grid img{
width:100%;
height:260px;
object-fit:cover;
border-radius:20px;
box-shadow:0 10px 25px #0002;
}
.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
}

/* Ajustes responsivos para celulares */
@media (max-width: 768px){

    section{
        padding: 55px 5%;
    }

    .hero{
        min-height: 720px;
        background-position:center;
    }

    .hero h1, h1{
        font-size: 38px;
        line-height: 1.12;
        max-width: 100%;
    }

    .hero p{
        font-size: 18px;
        line-height: 1.5;
    }

    .hero a,
    .hero button{
        width:100%;
        max-width:320px;
        text-align:center;
        display:block;
        margin:12px auto;
        box-sizing:border-box;
    }

    .whats{
        right:15px;
        bottom:15px;
        padding:14px 18px;
        font-size:14px;
        z-index:99;
    }

    h2{
        font-size:34px;
        line-height:1.2;
    }

}