*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:Segoe UI,Arial,sans-serif;
background:#f5f7fa;
color:#333;

}

/**************** HERO ***************/

.hero{

position: relative;
    height: 430px;

    background:
        linear-gradient(rgba(25,70,135,.78), rgba(25,70,135,.78)),
        url("banner/fondo1.jpg");

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;
}

.hero-content{

position:relative;
z-index:2;
color:white;
max-width:900px;
padding:30px;

}

.logo{

width:200px;
margin-bottom:20px;

}

.hero h1{

font-size:42px;
font-weight:600;
margin-bottom:20px;

}

.hero p{

font-size:22px;
opacity:.95;

}

/************* CARDS **************/

.cards{

max-width:1300px;

margin:auto;

padding:70px 30px;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:35px;

}

.card{

background:white;

border-radius:18px;

overflow:hidden;

text-decoration:none;

color:#333;

box-shadow:0 10px 30px rgba(0,0,0,.08);

transition:.35s;

}

.card:hover{

transform:translateY(-10px);

box-shadow:0 20px 40px rgba(0,0,0,.18);

}

.card img{

width:100%;
height:250px;

object-fit:contain;

padding:25px;

background:#ffffff;

transition:.35s;

}

.card:hover img{

transform:scale(1.08);

}

.info{

padding:28px;

}

.info h2{

color:#0f4c81;

font-size:28px;

margin-bottom:15px;

}

.info p{

font-size:17px;

color:#666;

margin-bottom:20px;

}

.info span{

display:inline-block;

padding:12px 26px;

background:#0f6cb5;

color:white;

border-radius:30px;

font-weight:600;

transition:.3s;

}

.card:hover span{

background:#1493d2;

}

/************* FOOTER ************/

footer{

background:#0f3559;

color:white;

text-align:center;

padding:30px;

font-size:14px;

margin-top:40px;

}

/************* RESPONSIVE ************/

@media(max-width:700px){

.hero{

height:350px;

}

.hero h1{

font-size:30px;

}

.hero p{

font-size:18px;

}

.logo{

width:90px;

}

}