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

body {
    background-color: #F2F9F7;
}

.ad-header {
    display: flex;
    background: #2F2E2E;
    justify-content: center;
    height: 50px;
    position: relative;
}

.ad-header > div {
    display: flex;            /* Coloca os filhos (p e img) lado a lado */
    align-items: center;      /* Alinha verticalmente no centro */
    gap: 10px;                /* Espaço entre o texto e a imagem */
}

.ad-header p {
    font-family: "Inter", sans-serif;
    color: #FFFFFF;
}

.ad-header p span {
    font-weight: bolder;
}

#seta,
#X {
    cursor: pointer;
}

#X {
    position: absolute;
    margin-left: auto;
    right: 20px;
}

header {
    display: flex;
    align-items: center;
    margin-top: 40px;
    justify-content: center;
}

.logo img {
    width: 70px;
    height: 70px;
}

.logo {
    display: flex;
    align-items: center;
    margin-right: 100px;
}

nav {
    display: flex;
    gap: 60px;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 80px;
    align-items: center;
}

nav li > a {
    color: black;
    text-decoration: none;
}

h1 {
    color: #6B6B6B;
    font-family: "Montserrat", sans-serif;
}

h1 span {
    color: #30A660;
}

li a,
nav a {
    font-family: "Montserrat", sans-serif;
    font-size: 30px;
}

.btn {
    font-family: "Montserrat", sans-serif;
    background-color: white;
    border-radius: 10px;
    padding: 8px 20px 8px 20px;
    font-weight: 700;
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    text-align: center;
    margin-left: 20px;
    font-size: 30px;
}

.headline {
    text-align: center;
}

.headline h1,
.headline h2 {
    margin-top: 20px;
    font-family: "Montserrat", sans-serif;
}

.headline h1 {
    margin-top: 120px;
    font-weight: bold;
    font-size: 80px;
    color: black;
}

.headline h2 {
    color: #7B7B7B;
    font-weight: 600;
    font-size: 40px;
}

.segmented {
    display: inline-flex; /* Coloca os botões lado a lado. */
    border: 1px solid #999;
    border-radius: 15px;
    overflow: hidden; /* Faz com que os botões “encaixem” dentro da borda arredondada, sem sair para fora. */
    margin-top: 50px;
}

.segmented button {
    border: none;
    font-family: "Montserrat", sans-serif;
    background: white;
    padding: 20px 40px;
    cursor: pointer;
    transition: background 0.2s; /* Faz a troca de cor do hover ser suave. */
    font-size: 20px;
}

/* Adiciona uma linha divisória à direita de todos os botões,
   exceto o último (para não ficar com borda dupla no final) */
.segmented button:not(:last-child) {
    border-right: 1px solid #999; 
}

/* Quando o mouse passa em cima do botão,
   o fundo muda para cinza claro */
.segmented button:hover {
    background: #f0f0f0;
}

/* Define o botão ativo (selecionado):
   fundo cinza mais escuro e texto em negrito */
.segmented button.active {
    background: #ddd;
    font-weight: bold;
}

/* Estilo específico para o texto do desconto (-20%):
   cor laranja, em negrito e com espaço antes do texto */
.segmented .discount {
    color: #e67e22; /* laranja */
    font-weight: bold;
    margin-left: 4px;
}

.planos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    margin-bottom: 30px;
}

.card-preco {
    margin-top: 100px;
    background-color: white;
    border-radius: 20px;
    padding: 30px 50px 30px 40px;
    width: 401px;
    height: 500px;
    border: solid 2px black;
}

.card-preco ul {
    list-style: none;
}

.card-preco h1 {
    font-family: "Montserrat", sans-serif;
    color: black;
}

.card-preco h2 {
    color: #656363;
    margin-bottom: 10px;
}

.card-preco h2,
.card-preco h3 {
    font-family: "Inter", sans-serif;
    font-weight: 400;
}

.card-preco h3 {
    margin-bottom: 10px;
}

.preco {
    color: black;
    font-family: "Montserrat", sans-serif;
    margin-bottom: 20px;
    font-weight: 800;
}

.card-preco ul li {
    font-family: "Montserrat", sans-serif;
}

.card-preco ul {
    list-style: none;
    display: flex;              /* ativa flexbox na lista */
    flex-direction: column;     /* organiza os itens em coluna */
    height: 50%;                /* garante altura fixa relativa ao card */
    /* Isso, junto com margin-top:auto no botão,
       faz o botão ser empurrado para o fundo do card */
}

.card-preco button {
    background-color: #30A660;
    color: white;
    width: 300px;
    height: 59px;
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
    font-size: 30px;
    border-radius: 10px;
    cursor: pointer;
    margin-top: auto; /* força o botão a ir para o fundo */
}

.relato-clientes {
    margin-top: 80px;
}

.relato-clientes h1 {
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
    font-size: 60px;
    color: black;
    text-align: center;
}

.card-relato {
    margin-top: 80px;
    background-color: white;
    border-radius: 20px;
    padding: 30px 50px 30px 40px;
    width: 401px;
    height: 300px;
    border: solid 2px black;
}

.card-relato p {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    margin-top: 20px;
}

.estrelas {
    display: flex;              /* coloca as estrelas lado a lado */
    justify-content: center;    /* centraliza horizontalmente */
    gap: 5px;                   /* espaço entre as estrelas */
}

.card-group {
    display: flex;
    justify-content: center;
    gap: 54px;
}

.footer {
    margin-top: 80px;
    text-align: center;
    margin-bottom: 40px;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.footer p,
.footer-links a {
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    color: black;
    font-weight: 600;
}

.footer-links a {
    text-decoration: none;
}

.preco { transition: opacity .25s ease; }
.preco.changing { opacity: 0; }


.hamburguer {
        display: none;
        width: 30px;
        height: 22px;
        flex-direction: column;
        justify-content: space-between;
        margin-right: 20px;
    }

    .logo {
        margin-left: 20px;
    }

@media (max-width: 768px) {
    .ad-header {
        display: none;
    }

    header {
        margin-top: 0;
        display: flex;
        justify-content: space-between;
        background-color: #000000;
        flex-wrap: wrap; /* Os itens iram preencher outra linha quando não houver espaço*/
    }

    #menu {
        margin-top: 20px;
    }

    .hamburguer {
        display: flex;
    }

    #menu li a {
        color: white;
    }
    
    nav {
        display: none;
        width: 100%;  /* <- permite quebrar linha */
    }

    .hamburguer span {
        display: block;
        height: 4px;
        background-color: white;
        border-radius: 2px;
        transition: 0.3s;
    }

    #login-button {
        display: none;
    }

    #menu.active {
        display: block;
        width: 100%;
    }

    #login-button {
        display: block; 
        margin: 0 auto;
        border: none;
        background-color: #000000;
        color: white;
        font-weight: 400;
        margin-top: 30px;
        margin-bottom: 20px;
    }

    #menu ul {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .planos {
        gap: 5px;
        flex-direction: column;
    }

    .headline {
        margin-top: -60px;
    }

    .headline h1 {
        font-size: 80px;
        margin: 120px 10px 0 10px;
    }

    .headline h2 {
        font-size: 40px;
        margin: 30px 10px 0 10px;
    }

    .card-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .relato-clientes h1 {
        font-size: 50px;
        margin: 10px 60px 20px 60px;
    }

    .card-relato {
        margin-top: 30px;
        height: 580px;
        width: 90%;
    }

    .card-relato p {
        font-size: 35px;
    }

    .estrelas img {
        width: 80px;
        height: 80px;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .card-preco {
        margin-top: 30px;
        height: 600px;
        width: 90%;
    }

    .card-preco h1 {
        font-size: 60px;
    }
    
    .card-preco h2 {
        font-size: 40px;
    }

    .card-preco h3 {
        font-size: 35px;
    }

    .card-preco li {
        font-size: 25px;
    }

    #btn1 {
        margin-top: 30px;
    }

    #btn1,
    #btn2,
    #btn3 {
        width: 530px;
        height: 70px;
    }

    #btn3 {
        margin-top: 30px;
    }

    #cardp2 {
        height: 630px;
    }

    #cardp3 {
        height: 640px;
    }

    .button-preco {
        display: block;
        margin: auto;
    }

    .segmented {
        margin-bottom: 20px;
    }

    .footer {
        margin-top: 60px;
    }

    .segmented button {
        padding: 20px 95px;
        font-size: 30px;
    }
}

@media (max-width: 480px) { 
    header {
        width: 100%;
    }

    .headline h1 {
        font-size: 40px;
        margin-left: 20px;
        margin-right: 20px;
    }

    .headline h2 {
        font-size: 25px;
    }

    .segmented button {
        padding: 20px 40px;
        font-size: 20px;
    }

    .card-preco h1 {
        font-size: 40px;
    }

    .card-preco h2 {
        font-size: 25px;
    }

    #btn1,
    #btn2,
    #btn3 {
        width: 350px;
        height: 60px;
    }

    #cardp3 {
        height: 710px;
    }

    #cardp1 {
        height: 560px;
    }

    .relato-clientes h1 {
        font-size: 40px;
    }

    .estrelas img {
        width: 50px;
        height: 50px;
    }

    .card-relato p {
        font-size: 25px;
    }

    .card-relato {
        height: 430px;
    }

    .footer p {
        font-size: 15px;
    }

    .footer-links a {
        font-size: 15px;
    }

}