.versa{
font-family:'Montserrat',sans-serif;
color:#111;
}

/* CONTENEDOR */

.container{
max-width:1200px;
margin:auto;
padding:0 20px;
}

.center{
text-align:center;
}

/* HERO */

.versa-hero{
padding:100px 20px 60px;
background:linear-gradient(180deg,#f4f8fb,#ffffff);
}

.tag{
display:inline-block;
background:#e6f2ff;
color:#005e9d;
padding:8px 14px;
border-radius:20px;
font-size:1.1rem;
font-weight:600;
margin-bottom:20px;
}

.versa-hero h1{
font-size:3rem;
max-width:800px;
margin:auto;
margin-bottom:20px;
line-height:1.2;
}

.highlight{
color:#005e9d;
}

.subtitle{
color:#555;
max-width:650px;
margin:0 auto 30px;
line-height:1.6;
}

.hero-buttons{
display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;
}

.hero-buttons a{
padding:14px 22px;
border-radius:8px;
text-decoration:none;
font-weight:600;
}

.hero-buttons .primary{
background:#005e9d;
color:white;
}

.hero-buttons .secondary{
background:#0f172a;
color:white;
}

/* SECTION HEADER */

.section-header{
margin-bottom:40px;
}

.section-header h2{
font-size:2rem;
margin-bottom:10px;
}

.line{
width:80px;
height:4px;
background:#005e9d;
border-radius:2px;
}

/* BENTO GRID */

.bento{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

.card{
background:#f8f9fa;
padding:25px;
border-radius:16px;
transition:.3s;
}

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

.card h3{
margin-bottom:10px;
font-size:1.2rem;
color:#005e9d;
}

.card p{
color:#555;
font-size:.9rem;
}

/* VARIANTES */

.card.large{
grid-column:span 2;
}

.card.wide{
grid-column:span 2;
}

.card.highlight{
background:#005e9d;
color:white;
}

.card.highlight h3,
.card.highlight p{
color:white;
}

.card.outline{
border:2px solid #e5e5e5;
background:white;
}

/* CTA */

.versa-cta{
padding:80px 20px;
}

.cta-box{
background:#0f172a;
color:white;
padding:60px;
border-radius:30px;
display:flex;
flex-direction:column;
gap:20px;
}

.cta-box h2{
font-size:2rem;
}

.cta-box p{
opacity:.8;
}

.cta-box a{
background:#005e9d;
color:white;
padding:14px 24px;
border-radius:8px;
text-decoration:none;
font-weight:600;
width:fit-content;
}

/* MOBILE */

@media(max-width:900px){

.versa-hero h1{
font-size:2rem;
}

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

.card.large,
.card.wide{
grid-column:span 1;
}

.cta-box{
padding:40px 25px;
}

}