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

body {
    overflow-x: hidden;
    background: #ffffff;
}

/* ---------------- HEADER ---------------- */
header {
    width: 100%;
    height: 95px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 70px;
    background: #ffffff;
    z-index: 1000;
    border-bottom: 1px solid #f1f1f1;
}

header img.logo-topo {
    height: 100px;
}

nav a {
    margin-left: 45px;
    font-size: 18px;
    text-decoration: none;
    color: #ff8200;
    font-weight: 500;
    transition: 0.2s;
}

nav a:hover {
    color: #ff7903;
}

/* ---------------- HERO BANNER ---------------- */
.hero {
    width: 100%;
    height: 750px;
    background: linear-gradient(90deg, #ff7903, #ff7a00);
    margin-top: 95px;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 0 100px;
    overflow: hidden;
}

/* LEFT SIDE */
.hero-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    z-index: 5;
}

.hero-left img.logo-arvore {
    width: 710px;
    margin-bottom: 20px;
}

.hero-left h1 {
    font-size: 95px;
    font-weight: 900;
    margin-top: -10px;
}

.hero-left h2 {
    font-size: 40px;
    letter-spacing: 12px;
    margin-top: -20px;
    font-weight: 400;
}

.homem-chave {
    height: 590px;
    position: absolute;
    right: 260px;
    bottom: 0;
    z-index: 10;
}

.cars {
    position: absolute;
    right: 111px;
    bottom: 195px;
    z-index: 3;
}

.cars img {
    width: 870px;
    opacity: 1;
}

.vb-title {
    font-size: 40px;
    font-weight: 700;
    color: #ff7903;
    line-height: 40px;
}
.vb-description {
    font-size: 18px;
    color: #6c757d;
    margin-top: 20px;
    max-width: 480px;
}

.vb-highlight {
    font-size: 18px;
    font-weight: bold;
    color: #444;
    margin-top: 15px;
}

.vb-button {
    background: #73d000;
    color: #fff;
    border-radius: 40px;
    padding: 14px 40px;
    font-size: 20px;
    font-weight: 700;
    border: none;
    margin-top: 15px;
    transition: 0.3s ease-in-out;
    transform: scale(1);
}

.vb-button:hover {
    background: #64b800;
    color: #fff;
    transform: scale(1.07);
}

.vb-image {
    width: 100%;
}

.pt-80 {
    padding-top: 80px;
    padding-bottom: 80px;
}

.cf-title {
    color: #ff9a00;
    font-size: 38px;
    font-weight: 700;
}

.cf-description {
    font-size: 18px;
    color: #5c5c5c;
    margin-top: 15px;
    max-width: 620px;
}

.cf-highlight {
    color: #ff8a00;
    font-weight: 700;
}

.cf-list {
    list-style: none;
    padding-left: 0;
    margin-top: 25px;
}

.cf-list li {
    font-size: 17px;
    margin-bottom: 18px;
    display: flex;
    align-items: flex-start;
    color: #444;
}

.check-icon {
    color: #ff9000;
    font-size: 22px;
    margin-right: 10px;
    margin-top: 2px;
}

/* --- IMAGEM + FORMATO FUNDO --- */
.tree-bg {
    position: absolute;
    width: 380px;
    height: 480px;
    background: linear-gradient(180deg, #ffae00, #ff7a00);
    clip-path: polygon(
        50% 0%, 
        85% 25%, 70% 25%, 
        95% 50%, 75% 50%, 
        100% 75%, 70% 75%, 
        50% 100%, 
        30% 75%, 0% 75%, 
        25% 50%, 5% 50%, 
        30% 25%, 15% 25%
    );
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.woman-img {
    position: relative;
    z-index: 2;
    max-width: 90%;
}

.func-title {
    color: #ff7903;
    font-size: 40px;
    font-weight: 700;
}

.func-text {
    color: #555;
    margin-top: 12px;
    max-width: 620px;
}

.func-highlight {
    color: #ff7a00;
    font-weight: 700;
}

.func-list {
    list-style: none;
    padding-left: 0;
    margin-top: 25px;
}

.func-list li {
    font-size: 17px;
    margin-bottom: 18px;
    display: flex;
    align-items: flex-start;
    color: #444;
}

.func-icon {
    color: #ff8800;
    font-size: 22px;
    margin-right: 10px;
    margin-top: 2px;
}

/* ÁRVORE DE FUNDO */
.func-tree-shape {
    position: absolute;
    width: 380px;
    height: 480px;
    background: linear-gradient(180deg, #ffae00, #ff7a00);
    clip-path: polygon(
        50% 0%, 
        85% 25%, 70% 25%, 
        95% 50%, 75% 50%, 
        100% 75%, 70% 75%, 
        50% 100%, 
        30% 75%, 0% 75%, 
        25% 50%, 5% 50%, 
        30% 25%, 15% 25%
    );
    z-index: 1;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
}

/* IMAGEM DA MULHER */
.func-woman-img {
    position: relative;
    z-index: 2;
    max-width: 90%;
}

.planos-section {
    padding: 60px 0;
}

.btn-planos-top {
    background: #73d000;
    color: #fff;
    border-radius: 40px;
    padding: 14px 40px;
    font-size: 20px;
    font-weight: 700;
    border: none;
    transition: 0.3s ease-in-out;
    text-decoration: none;
}

.btn-planos-top:hover {
    background: #64b800;
    color: #fff;
    transform: scale(1.07);
}

.planos-titulo {
    font-size: 30px;
    font-weight: 700;
    color: #ff7903;
    margin-top: 30px;
}

.planos-subtitulo {
    color: #777;
    margin-bottom: 40px;
    font-size: 15px;
}

.plano-card {
    border: 3px solid #2d2d2d;
    border-radius: 25px;
    padding: 40px 20px;
    margin-bottom: 30px;
    min-height: 510px;
    transition: .3s;
}

.plano-card.destaque {
    border-color: #ff7903;
}

.plano-nome {
    color: #ff7903;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 25px;
}

.plano-lista {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    text-align: left;
}

.plano-lista li {
    font-size: 15px;
    color: #555;
    margin-bottom: 12px;
}

.ok {
    color: #64b800;
    font-weight: bold;
    margin-right: 8px;
}

.no {
    color: #e03b26;
    font-weight: bold;
    margin-right: 8px;
}

.plano-preco {
    font-size: 32px;
    font-weight: 800;
    color: #ff7903;
}

.plano-periodo {
    font-size: 14px;
    color: #777;
    margin-bottom: 25px;
}

.btn-assinar {
    background: #6cc300;
    color: #fff;
    font-weight: 700;
    display: block;
    padding: 12px;
    border-radius: 30px;
    text-decoration: none;
    width: 70%;
    margin: 0 auto;
    transition: .3s;
}

.btn-assinar:hover {
    transform: scale(1.07);
}


.pb-30 {
    padding-bottom: 30px;
}

/* --- Seção de Perguntas (Esquerda) --- */
.faq-section {
    flex: 1;
    padding-right: 40px;
}

.faq-section h2 {
    font-size: 35px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

.faq-item {
    margin-bottom: 25px;
}

.faq-question {
    font-size: 20px;
    font-weight: bold;
    color: #ff7903; /* Cor Laranja para as perguntas */
    margin-bottom: 10px;
    line-height: 1.4;
}

.faq-answer {
    font-size: 16px;
    color: #555;
    line-height: 1.5;
}

/* --- Botão --- */
.start-button {
    background: #6cc300;
    color: #fff;
    font-weight: 700;
    padding: 14px 43px;
    border-radius: 30px;
    text-decoration: none;
    transition: .3s;
    margin-top: 30px;
    display: block;
    width: max-content;
}
.start-button:hover {
    background-color: #639818; /* Verde um pouco mais escuro no hover */
    transform: scale(1.05);
}

.image-section {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-section img {
    width: 90%;        /* diminui a imagem */
    max-width: 450px;  /* limite opcional */
    height: auto;
}

.faq-section {
    padding-right: 20px; /* aproxima o texto da imagem */
}
/* Responsividade básica (opcional, mas recomendado) */
@media (max-width: 900px) {
    .container {
        flex-direction: column;
    }
    .faq-section {
        padding-right: 0;
        margin-bottom: 40px;
    }
    .image-section {
        width: 80%;
        max-width: 400px;
        height: 400px;
    }
}

.rodape-garagem {
    background-color: #000000; /* Cor de fundo escura */
    color: #ffffff; /* Cor do texto branco */
    padding: 30px 0;
    font-family: Arial, sans-serif; /* Fonte comum para replicar o estilo */
    font-size: 14px;
}

.rodape-conteudo {
    display: flex;
    justify-content: space-around; /* Distribui as colunas */
    align-items: flex-start;
    max-width: 1200px; /* Limite a largura máxima do conteúdo */
    margin: 0 auto; /* Centraliza o conteúdo */
    padding: 0 20px;
}

.rodape-coluna {
    text-align: left;
    width: 30%; /* Ajuste a largura das colunas conforme necessário */
    min-width: 200px;
}

.rodape-coluna:last-child {
    text-align: right; /* Alinha a última coluna (direitos autorais) à direita */
    width: 30%;
}

.rodape-coluna ul {
    list-style: none; /* Remove os marcadores de lista */
    padding: 0;
    margin: 5px 0 0 0;
}

.rodape-coluna li {
    margin-bottom: 5px;
}

.rodape-coluna a {
    color: #ffffff; /* Cor do link branco */
    text-decoration: none; /* Remove o sublinhado */
}

.rodape-coluna a:hover {
    text-decoration: underline;
}

.titulo-coluna {
    font-weight: bold; /* Deixa o título da coluna em negrito (embora na imagem não pareça, é comum para títulos) */
    margin-bottom: 10px;
    color: #c9c9c9; /* Uma cor levemente mais clara para os títulos */
}

/* Ajustes finos para a coluna de direitos autorais */
.rodape-coluna:last-child p {
    margin: 5px 0;
    line-height: 1.5;
}

/* Estilos Gerais do Header */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #f8f8f8; /* Exemplo de cor de fundo */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo-topo {
    height: 50px; /* Ajuste o tamanho do seu logo */
}

/* Estilos do Menu de Navegação em Desktop */
.main-nav a {
    text-decoration: none;
    color: #333;
    margin-left: 20px;
    padding: 5px 10px;
}

/* Esconde o botão de hambúrguer por padrão (em desktop) */
.menu-toggle {
    display: none;
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
    color: #333;
}



.bannerHome img {
    width: 100%;
}

.bannerHome .mobile {
    display: none;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    background-color: #fff;
}

.func-list li {
    display: flex;
    align-items: center;
    gap: 10px; /* Espaço entre o ícone e o texto */
    margin-bottom: 12px;
    line-height: 1.4;
}

.func-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px; /* Ajuste o tamanho como preferir */
    min-width: 24px; /* mantém o alinhamento visual */
}