:root{
    --primary:#0d6efd;
    --primary-dark:#084298;
    --success:#198754;
    --text:#333333;
    --bg:#f5f7fa;
    --white:#ffffff;
    --shadow:0 2px 12px rgba(0,0,0,.08);
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    background:var(--bg);
    color:var(--text);
    line-height:1.7;
    overflow-x:hidden;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

.container{
    width:min(92%,1200px);
    margin:auto;
}

/* HEADER */

header{
    background:linear-gradient(
        135deg,
        var(--primary),
        #3b82f6
    );

    color:white;
    text-align:center;
    padding:clamp(3rem,8vw,6rem) 1rem;
}

header h1{
    font-size:clamp(2rem,6vw,4rem);
    margin-bottom:1rem;
}

header p{
    font-size:clamp(1rem,2vw,1.3rem);
    max-width:700px;
    margin:auto;
}

/* MENU */

nav{
    background:var(--primary-dark);
    position:sticky;
    top:0;
    z-index:1000;
}

.nav-wrapper{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:1.5rem;
    flex-wrap:wrap;
    padding:1rem;
}

nav a{
    color:white;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

nav a:hover{
    opacity:.8;
}

/* MAIN */

main{
    margin:2rem auto;
}

.card{
    background:white;
    padding:2rem;
    border-radius:16px;
    box-shadow:var(--shadow);
    margin-bottom:2rem;
}

section h2{
    margin-bottom:1rem;
    font-size:clamp(1.4rem,3vw,2rem);
}

section p{
    margin-bottom:1rem;
}

/* HERO */

.hero{
    text-align:center;
}

.hero p{
    max-width:800px;
    margin:0 auto 1.5rem;
}

/* BOTÕES */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:14px 28px;

    background:var(--success);
    color:white;
    text-decoration:none;
    border-radius:8px;

    font-weight:600;

    transition:.3s;
}

.btn:hover{
    transform:translateY(-2px);
    background:#157347;
}

/* LISTAS */

ul{
    padding-left:1.5rem;
}

li{
    margin-bottom:.5rem;
}

/* FOOTER */

footer{
    background:#111827;
    color:white;
    text-align:center;
    padding:2rem 1rem;
}

/* TABLETS */

@media (max-width:768px){

    main{
        margin:1rem auto;
    }

    .card{
        padding:1.5rem;
    }

    .nav-wrapper{
        gap:1rem;
    }

}

/* CELULARES */

@media (max-width:480px){

    header{
        padding:3rem 1rem;
    }

    .card{
        padding:1.2rem;
        border-radius:12px;
    }

    .btn{
        width:100%;
    }

    nav a{
        display:block;
        width:100%;
        text-align:center;
    }

    .nav-wrapper{
        flex-direction:column;
    }

}