*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}


body{

    background:#faf7f5;
    color:#333;

}


header{

    height:90px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 10%;

    background:white;

    box-shadow:0 2px 8px #ddd;

}

@media(max-width:768px){

header{

    height:auto;

    flex-direction:column;

    padding:20px;

}

nav{

    margin-top:20px;

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:15px;

}

nav a{

    margin-left:0;

}

}
.logo img{

    width:125px;

    transition:.3s;

}

.logo img:hover{

    transform:scale(1.05);

}

nav a{

    margin-left:25px;

    text-decoration:none;

    color:#555;

    font-weight:bold;

}



nav a:hover{

    color:#b85c8a;

}



.banner{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:40px;

    padding:70px 8%;

    flex-wrap:wrap;

}

.beneficios-banner{

    list-style:none;

    margin-top:30px;

    margin-bottom:35px;

}

.beneficios-banner li{

    font-size:18px;

    margin-bottom:14px;

    color:#444;

}
.texto-banner{

    flex:1;
    max-width:650px;
    min-width:0;

}


.texto-banner h1{

    font-size:45px;
    color:#b85c8a;
    line-height:1.2;
    overflow-wrap:break-word;

}

.texto-banner h1 span {

    font-size:0.45em;
    font-weight:normal;
    color:#b85c8a;

}

@media (max-width:768px){

    .banner{

        padding:40px 5%;
        gap:20px;
        flex-direction:column;

    }


    .texto-banner{

        width:100%;
        text-align:center;

    }


    .texto-banner h1{

        font-size:30px;

    }


    .texto-banner h1 span{

        display:block;          /* Faz o span ir para a linha de baixo */
        font-size:18px;
        margin-top:8px;         /* Espaço entre o título e o subtítulo */
    }


    .texto-banner p{

        padding:5px 10px;

    }


    .texto-banner h3{

        margin-left:0;

    }

}

.texto-banner h2{

    margin:20px 0;

    font-size:28px;

}

.texto-banner h3{

    margin:5px 0px 0px 25px;

    font-size:20px;

}

.texto-banner p{

    font-size:18px;

    line-height:1.6;
    padding:5px 30px;

}

.premio{

    margin:30px 0;
    padding:20px;
    border:2px solid #b85c8a;
    border-radius:20px;
    background:#fff;

    text-align:center;

}


.premio h3{

    color:#b85c8a;
    margin-bottom:15px;

}


.premio p{

    padding:0;
    margin:0;
    line-height:1.6;

}

button{

    margin-top:30px;

    padding:15px 30px;

    border:none;

    border-radius:30px;

    background:#b85c8a;

    color:white;

    font-size:18px;

    cursor:pointer;

}

button:hover{

    background:#8f4168;

}

.btn-download{

    display:inline-block;

    margin-top:30px;

    padding:16px 36px;

    background:#b85c8a;

    color:white;

    text-decoration:none;

    border-radius:40px;

    font-size:18px;

    font-weight:bold;

    box-shadow:0 12px 25px rgba(184,92,138,.35);

    transition:.3s;

}
.btn-download:hover{

    background:#9d4a76;

    transform:translateY(-3px);

}



.imagem-banner{

    flex:1;

    display:flex;

    justify-content:center;

}

.imagem-banner img{

    width:300px;

    max-width:100%;

    height:auto;

    border-radius:25px;

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

    transition:.4s;

}

.imagem-banner img:hover{

    transform:scale(1.03);

}

.recursos{

    padding:40px 8%;

    text-align:center;

}

.pagina{

    max-width:900px;

    margin:50px auto;

    background:white;

    padding:40px;

    border-radius:15px;

    box-shadow:0 5px 20px #ddd;

}



.pagina h1{

    color:#b85c8a;

    text-align:center;

    margin-bottom:30px;

}



.pagina h2{

    color:#b85c8a;

    margin-top:30px;

}



.pagina p{

    font-size:17px;

    line-height:1.7;

    margin-top:15px;

}



.data{

    margin-top:40px;

    font-style:italic;

    text-align:right;

}

.cards{

    display:flex;

    justify-content:center;

    gap:30px;

    margin-top:40px;

}



.card{

    background:white;

    padding:30px;

    width:300px;

    border-radius:15px;

    box-shadow:0 5px 15px #ddd;

}

.aplicativo{

    padding:50px 8%;

    text-align:center;

}



.aplicativo h2{

    color:#b85c8a;

    font-size:35px;

}



.descricao-app{

    font-size:18px;

    margin:20px auto 40px;

    max-width:700px;

}



.telas-app{

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

}



.tela{

    background:white;

    width:280px;

    padding:20px;

    border-radius:20px;

    box-shadow:0 5px 15px #ddd;

}



.tela img{

    width:100%;

    height:450px;

    object-fit:contain;

}



.tela h3{

    color:#b85c8a;

    margin-top:15px;

}



.tela p{

    line-height:1.5;

}

/* ===========================
          RODAPÉ
=========================== */

footer{

    background:#333;

    color:white;

    margin-top:80px;

}

.footer-container{

    max-width:1200px;
    margin:auto;

    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    flex-wrap:wrap;

    gap:20px;

    padding:25px 8%;

}

.footer-logo{

    width:260px;


}


.footer-logo p{

    color:#ddd;
    line-height:1.8;
}



.footer-links,
.footer-app,
.footer-social{

    width:190px;
}

.footer-logo h3,
.footer-links h3,
.footer-app h3,
.footer-social h3{

    margin-bottom:20px;

    color:white;

}

.footer-links a,
.footer-app a,
.footer-social a{

    display:block;
    color:#cccccc;
    text-decoration:none;
    margin-bottom:12px;
    transition:.3s;
}

.footer-links a:hover,
.footer-app a:hover,
.footer-social a:hover{

    color:#ffffff;
    transform:translateX(6px);

}

footer hr{

    border:none;

    border-top:1px solid #555;

}
@media (max-width:768px){

    .footer-container{

        flex-direction:column;
        align-items:flex-start;
        gap:35px;

    }

    .footer-logo,
    .footer-links,
    .footer-app,
    .footer-social{

        width:100%;
        min-width:100%;

    }

}

.copyright{

    text-align:center;

    padding: 10px;

    color:#bbb;

    font-size:14px;

}

/* ---------- VANTAGENS ---------- */

.vantagens{

    padding:50px 8%;

    background:linear-gradient(180deg,#faf7f5,#f4eef4);

    text-align:center;

}

.vantagens h2{

    font-size:38px;

    color:#b85c8a;

    margin-bottom:15px;

}

.subtitulo{

    max-width:700px;

    margin:0 auto 30px;

    font-size:18px;

    color:#666;

}

.grid-vantagens{

    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:30px;

    max-width:1100px;

    margin:auto;

}

@media (max-width: 900px){

    .grid-vantagens{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width: 600px){

    .grid-vantagens{

        grid-template-columns:1fr;

    }

}

.vantagem{

    background:white;

    padding:20px;

    border-radius:20px;

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

    transition:.3s;

}

.vantagem:hover{

    transform:translateY(-8px);

}

.icone{

    font-size:48px;

    margin-bottom:20px;

}

.vantagem h3{

    color:#b85c8a;

    margin-bottom:15px;

}

.vantagem p{

    line-height:1.6;

}
/* ---------------- COMO FUNCIONA ---------------- */

.como-funciona{

    padding:50px 8%;

    background:white;

    text-align:center;

}

.como-funciona h2{

    font-size:38px;

    color:#b85c8a;

}

.linha-tempo{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:20px;

    margin-top:50px;

    flex-wrap:wrap;

}

.passo{

    background:#faf7f5;

    width:240px;

    padding:25px;

    border-radius:20px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    transition:.3s;

}

.passo:hover{

    transform:translateY(-8px);

}

.numero{

    width:50px;

    height:50px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    background:#b85c8a;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    font-weight:bold;

}

.passo h3{

    color:#b85c8a;

    margin-bottom:15px;

}

.passo p{

    line-height:1.6;

}

.seta{

    font-size:40px;

    color:#b85c8a;

    margin-top:90px;

}

@media(max-width:900px){

    .seta{

        display:none;

    }

}