body{
    margin:0;
    font-family:Arial,sans-serif;
    color:#222;
}

.topo{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 5%;
}

.logo{height:70px;}

.contatos{
    display:flex;
    gap:25px;
    flex-wrap:wrap;
}

.hero{
    min-height:550px;
    background:linear-gradient(rgba(0,25,70,.85),rgba(0,25,70,.85)),
    url('layout-referencia.png') center/cover;
    display:flex;
    align-items:center;
    color:white;
    padding:0 5%;
}

.texto{
    max-width:600px;
}

.texto h1{
    font-size:3rem;
}

.texto span{
    color:#d71920;
}

.botoes{
    margin-top:30px;
}

.btn{
    display:inline-block;
    text-decoration:none;
    color:white;
    padding:15px 25px;
    border-radius:8px;
    margin-right:15px;
}

.vermelho{background:#d71920;}
.azul{background:#002c66;}

.titulo{
    text-align:center;
    padding:60px 20px 20px;
}

.titulo small{
    color:#d71920;
}

.produtos{
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
    padding:30px;
}

.card{
    max-width:400px;
    padding:30px;
    border-radius:10px;
    box-shadow:0 2px 10px rgba(0,0,0,.15);
}

.diferenciais{
    background:#002c66;
    color:white;
    display:flex;
    justify-content:space-around;
    flex-wrap:wrap;
    padding:40px;
    gap:20px;
}

footer{
    text-align:center;
    padding:30px;
}

.footer-logo{
    height:60px;
}

.whatsapp{
    position:fixed;
    right:20px;
    bottom:20px;
    background:#25D366;
    color:white;
    text-decoration:none;
    padding:15px 20px;
    border-radius:30px;
}

@media(max-width:768px){
    .texto h1{font-size:2rem;}
    .topo{flex-direction:column;gap:15px;}
}