/* Configurações gerais da página */
* {
    /* Seletor universal que afeta todos os elementos */
    margin: 0;
    /* Remove margens padrão de todos os elementos */
    padding: 0;
    /* Remove preenchimentos padrão de todos os elementos */
    box-sizing: border-box;
    /* Define o modelo de caixa para incluir padding e bordas no tamanho total */
    font-family: 'Poppins', sans-serif;
    /* Define a fonte padrão para todos os elementos */
}

body {
    /* Seletor para o corpo da página */
    color: #333;
    /* Define a cor do texto para um cinza escuro */
    line-height: 1.6;
    /* Define a altura da linha para melhorar a legibilidade */
}

/* Contêineres gerais */
.container {
    /* Classe para os contêineres principais */
    width: 100%;
    /* Define largura total */
    margin: 0 auto;
    /* Centraliza o contêiner na página */
    border-collapse: collapse;
    /* Remove espaçamento entre células da tabela */
    padding-left: 20px;
}

/* Estilização do cabeçalho */
.header {
    /* Classe para o cabeçalho */
    padding: 20px 10%;
    /* Adiciona espaçamento interno */
    display: table;
    /* Garante comportamento de tabela */
    background-color: white;
    /* Define fundo branco */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    /* Adiciona sombra sutil */
}

.logo {
    /* Classe para o logo */
    display: flex;
    /* Usa flexbox para alinhar os itens */
    align-items: center;
    /* Centraliza os itens verticalmente */
    width: 50%;
    /* Define largura */
    padding-left: 20px;
}

.logo img {
    /* Seletor para a imagem do logo */
    margin-right: 10px;
    /* Adiciona espaçamento à direita da imagem */
    border-radius: 8px;
    /* Arredonda os cantos da imagem */
}

.logo-text h1 {
    /* Seletor para o título do logo */
    color: #000000;
    /* Cor azul para o título */
    font-size: 32px;
    /* Tamanho da fonte */
    margin-bottom: 0;
    /* Remove margem inferior */

}

.logo-text p {
    /* Seletor para o subtítulo do logo */
    color: #2f86d6;
    /* Cor cinza para o subtítulo */
    font-size: 16px;
    /* Tamanho da fonte */
}

.menu {
    /* Classe para o menu de navegação */
    text-align: right;
    /* Alinha o texto à direita */
    width: 50%;
    /* Define largura */
}

.menu ul {
    /* Seletor para a lista do menu */
    list-style: none;
    /* Remove marcadores da lista */
    display: flex;
    /* Usa flexbox para alinhar itens */
    justify-content: flex-end;
    /* Alinha itens à direita */
}

.menu li {
    /* Seletor para os itens da lista do menu */
    margin-left: 20px;
    margin-right: 20px;
    /* Adiciona espaçamento entre itens */
}

.menu a {
    /* Seletor para os links do menu */
    text-decoration: none;
    /* Remove sublinhado dos links */
    color: #233032;
    /* Cor cinza para os links */
    font-weight: bold;
    /* Deixa o texto em negrito */
    transition: color 0.3s;
    /* Adiciona transição suave para a cor */
    font-size: 18px;
}

.menu a:hover {
    /* Seletor para os links do menu ao passar o mouse */
    color: #2475d0;
    /* Muda a cor para azul ao passar o mouse */
}

/* Estilização do banner */
.banner {
    /* Classe para o banner principal */
    background-color: #2f86d6;
    /* Fundo azul */
    color: white;
    /* Texto branco */
    padding: 60px 10%;
    /* Espaçamento interno */
    display: table;
    /* Garante comportamento de tabela */
}

.banner-content {
    /* Classe para o conteúdo do banner */
    width: 50%;
    /* Define largura */
    vertical-align: middle;
    /* Alinha verticalmente ao meio */
    padding-left: 20px;
}

.banner-image {
    /* Classe para a imagem do banner */
    width: 50%;
    /* Define largura */
    text-align: right;
    /* Alinha a imagem à direita */
    vertical-align: middle;
    /* Alinha verticalmente ao meio */
}

.banner-image img {
    /* Seletor para a imagem dentro do banner */
    max-width: 100%;
    /* Limita a largura da imagem */
    border-radius: 8px;
    /* Arredonda os cantos da imagem */
    animation: float 3s ease-in-out infinite;
    /* Adiciona animação flutuante */
}

.subtitle {
    /* Classe para o subtítulo */
    font-size: 16px;
    /* Tamanho da fonte */
    margin-bottom: 15px;
    /* Margem inferior */
    color: #fff;
    padding-left: 20px;
}

.banner h2 {
    /* Seletor para o título do banner */
    font-size: 28px;
    /* Tamanho da fonte */
    line-height: 1.2;
    /* Altura da linha */
    margin-bottom: 20px;
    /* Margem inferior */
    color: #fff;
    padding-left: 20px;
}

.pricing-brief {
    background-color: #333;
    color: white;
    padding: 5px 20px; /* menos padding lateral pra não empurrar demais */
    display: table;
    
    margin-left: auto;    /* empurra para a direita */
    margin-right: 20px;   /* deixa um espaçamento da borda direita */
    width: 100%;   /* a tabela vai ter a largura do conteúdo */
}


.pricing-text {
    /* Classe para o texto do resumo de preços */
    width: 70%;
    /* Define largura */
    vertical-align: middle;
    /* Alinha verticalmente ao meio */
    font-size: 18px;
    padding-left: 10px;
}

.pricing-text h3 {
    /* Seletor para o título do resumo de preços */
    font-size: 24px;
    /* Tamanho da fonte */
    margin-bottom: 5px;
    /* Margem inferior */
    color: #fff;
    padding-left: 10px;
}

.pricing-button, .cta-button {
    width: 30%;
    text-align: right;
    vertical-align: middle;
    font-size: 24px;
    padding-right: 10px; /* espaço interno à direita */
}

.btn {
    /* Classe para botões */
    display: inline-block;
    /* Exibe como bloco inline */
    padding: 10px 20px;
    /* Espaçamento interno */
    background-color: #2475d0;
    /* Fundo azul */
    color: white;
    /* Texto branco */
    text-decoration: none;
    /* Remove sublinhado */
    border-radius: 4px;
    /* Arredonda os cantos */
    font-weight: bold;
    /* Texto em negrito */
    transition: background-color 0.3s;
    /* Transição suave para a cor de fundo */
}

.btn:hover {
    /* Seletor para botões ao passar o mouse */
    background-color: #1a5ba0;
    /* Escurece o azul ao passar o mouse */
    transform: scale(1.05);
    /* Aumenta ligeiramente o tamanho */
}

/* Estilização da seção de características */
.features {
    /* Classe para a seção de características */
    padding: 60px 10%;
    /* Espaçamento interno */
    background-color: white;
    /* Fundo branco */
    display: table;
    /* Garante comportamento de tabela */
    text-align: center;
    /* Centraliza o texto */
}

.section-title {
    /* Classe para títulos de seção */
    padding-bottom: 40px;
    /* Espaçamento inferior */
    text-align: center;
    /* Centraliza o texto */
}

.section-title h2 {
    /* Seletor para o título principal da seção */
    font-size: 28px;
    /* Tamanho da fonte */
    margin-bottom: 10px;
    /* Margem inferior */
    color: #333;
    /* Cor cinza escuro */
}

.section-title h3 {
    /* Seletor para o subtítulo da seção */
    font-size: 22px;
    /* Tamanho da fonte */
    color: #333;
    /* Cor cinza escuro */
}

.highlight {
    /* Classe para texto destacado */
    color: #2475d0;
    /* Cor azul para destaque */
}

.feature-item {
    /* Classe para itens de características */
    width: 33.33%;
    /* Define largura */
    padding: 20px;
    /* Espaçamento interno */
    text-align: center;
    /* Centraliza o conteúdo */
    transition: transform 0.3s;
    /* Transição suave para transformações */
}

.feature-item:hover {
    /* Seletor para itens de características ao passar o mouse */
    transform: translateY(-10px);
    /* Move o item para cima ao passar o mouse */
}

.feature-item img {
    /* Seletor para imagens de características */
    width: 80px;
    /* Define largura */
    height: 80px;
    /* Define altura */
    object-fit: cover;
    /* Ajusta a imagem mantendo proporções */
    border-radius: 50%;
    /* Torna a imagem circular */
    margin-bottom: 15px;
    /* Margem inferior */
}

.feature-item h3 {
    /* Seletor para títulos de características */
    font-size: 20px;
    /* Tamanho da fonte */
    margin-bottom: 10px;
    /* Margem inferior */
    color: #2475d0;
    /* Cor azul */
}

.feature-item p {
    /* Seletor para textos de características */
    font-size: 14px;
    /* Tamanho da fonte */
    color: #666;
    /* Cor cinza médio */
}

/* Estilização da tabela de preços completa */
.pricing-full {
    /* Classe para a seção completa de preços */
    padding: 60px 10%;
    /* Espaçamento interno */
    background-color: #f5f5f5;
    /* Fundo cinza claro */
    display: flex;
    /* Garante comportamento de tabela */
}

.pricing-table {
    /* Classe para a tabela de preços */
    text-align: center;
    /* Centraliza o texto */
}

.plan {
    /* Classe para cada plano */
    width: 25%;
    /* Define largura */
    padding: 50px;
    /* Espaçamento interno */
    background-color: white;
    /* Fundo branco */
    border-radius: 8px;
    /* Arredonda os cantos */
    box-shadow: 0 3px 10px #0000001a;
    /* Adiciona sombra sutil */
    transition: transform 0.3s;
    /* Transição suave para transformações */
}

.plan:hover {
    /* Seletor para planos ao passar o mouse */
    transform: translateY(-5px);
    /* Move o plano para cima ao passar o mouse */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    /* Aumenta a sombra */
}

.plan-header {
    /* Classe para o cabeçalho do plano */
    background-color: #2475d0;
    /* Fundo azul */
    color: white;
    /* Texto branco */
    padding: 15px;
    /* Espaçamento interno */
    border-radius: 8px 8px 0 0;
    /* Arredonda apenas os cantos superiores */
    margin: -20px -20px 20px;
    /* Margens negativas para estender além do padding */
}

.plan-header h3 {
    /* Seletor para o título do cabeçalho do plano */
    font-size: 18px;
    /* Tamanho da fonte */
    font-weight: bold;
    /* Texto em negrito */
}

.plan-image {
    /* Classe para a imagem do plano */
    margin-bottom: 15px;
    /* Margem inferior */
}

.plan-image img {
    /* Seletor para a imagem dentro do plano */
    width: 80px;
    /* Define largura */
    height: 80px;
    /* Define altura */
    object-fit: cover;
    /* Ajusta a imagem mantendo proporções */
    border-radius: 50%;
    /* Torna a imagem circular */
}

.plan-description {
    /* Classe para a descrição do plano */
    margin-bottom: 20px;
    /* Margem inferior */
    font-size: 14px;
    /* Tamanho da fonte */
    color: #666;
    /* Cor cinza médio */
}

.plan-features p {
    /* Seletor para os recursos do plano */
    padding: 8px 0;
    /* Espaçamento interno */
    border-bottom: 1px solid #eee;
    /* Borda inferior */
    font-size: 14px;
    /* Tamanho da fonte */
}

/* Estilização da seção de chamada para ação */
.cta {
    /* Classe para a seção de chamada para ação */
    background-color: #2475d0;
    /* Fundo azul */
    color: white;
    /* Texto branco */
    padding: 60px 10%;
    /* Espaçamento interno */
    display: table;
    /* Garante comportamento de tabela */
    padding-left:15px;
}

.cta-content {
    /* Classe para o conteúdo da chamada para ação */
    width: 70%;
    /* Define largura */
    vertical-align: middle;
    /* Alinha verticalmente ao meio */
    padding-left:15px;
    
}

.cta-content h2 {
    /* Seletor para o título da chamada para ação */
    font-size: 28px;
    /* Tamanho da fonte */
    margin-bottom: 10px;
    /* Margem inferior */
    padding-left:15px;
}

.cta .btn {
    /* Seletor para o botão dentro da chamada para ação */
    background-color: black;
    /* Fundo branco */
    color: #fff;
    /* Texto azul */
    font-size: 24px;
}

.cta .btn:hover {
    /* Seletor para o botão dentro da chamada para ação ao passar o mouse */
    background-color: rgb(39, 39, 39);
    /* Fundo cinza muito claro ao passar o mouse */
}

/* Estilização do rodapé */
.footer {
    /* Classe para o rodapé */
    padding: 40px 10% 20px;
    /* Espaçamento interno */
    background-color: white;
    /* Fundo branco */
    display: table;
    /* Garante comportamento de tabela */
    text-align: center;
    /* Centraliza o texto */
}

.footer-logo {
    /* Classe para o logo no rodapé */
    display: flex;
    /* Usa flexbox para alinhar os itens */
    align-items: center;
    /* Centraliza os itens verticalmente */
    justify-content: center;
    /* Centraliza os itens horizontalmente */
    margin-bottom: 20px;
    /* Margem inferior */
}

.footer-info {
    /* Classe para informações no rodapé */
    padding: 20px 0;
    /* Espaçamento interno */
    border-top: 1px solid #eee;
    /* Borda superior */
    border-bottom: 1px solid #eee;
    /* Borda inferior */
    margin-bottom: 20px;
    /* Margem inferior */
}

.footer-info p {
    /* Seletor para parágrafos das informações no rodapé */
    margin-bottom: 10px;
    /* Margem inferior */
    color: #666;
    /* Cor cinza médio */
}

.footer-credits {
    /* Classe para os créditos no rodapé */
    font-size: 14px;
    /* Tamanho da fonte */
    color: #999;
    /* Cor cinza claro */
}

.developer {
    /* Classe para o nome do desenvolvedor */
    color: #2475d0;
    /* Cor azul */
    font-weight: bold;
    /* Texto em negrito */
}

/* Animações */
@keyframes float {
    /* Define a animação de flutuação */
    0% {
        /* Estado inicial */
        transform: translateY(0);
        /* Sem deslocamento */
    }
    50% {
        /* Estado intermediário (metade da animação) */
        transform: translateY(-10px);
        /* Move para cima */
    }
    100% {
        /* Estado final */
        transform: translateY(0);
        /* Retorna à posição original */
    }
}

/* Media queries para responsividade */
@media (max-width: 768px) {
    /* Estilos para telas menores (tablets e celulares) */
    .container {
        /* Contêineres em telas menores */
        width: 100%;
        /* Largura total */
        padding: 0 5%;
        /* Reduz o padding */
    }

    .header {
        /* Cabeçalho em telas menores */
        display: block;
        /* Altera para exibição em bloco */
    }

    .logo, .menu {
        /* Logo e menu em telas menores */
        width: 100%;
        /* Largura total */
        display: block;
        /* Altera para exibição em bloco */
        text-align: center;
        /* Centraliza o texto */
        margin-bottom: 10px;
        /* Adiciona margem inferior */
    }

    .menu ul {
        /* Lista do menu em telas menores */
        justify-content: center;
        /* Centraliza os itens */
        flex-wrap: wrap;
        /* Permite quebra de linha */
    }

    .menu li {
        /* Itens do menu em telas menores */
        margin: 5px 10px;
        /* Ajusta as margens */
    }

    .banner-content, .banner-image {
        /* Conteúdo e imagem do banner em telas menores */
        width: 100%;
        /* Largura total */
        display: block;
        /* Altera para exibição em bloco */
        text-align: center;
        /* Centraliza o texto */
    }

    .banner-image {
        /* Imagem do banner em telas menores */
        margin-top: 20px;
        /* Adiciona margem superior */
    }

    .pricing-text, .pricing-button {
        /* Texto e botão de preços em telas menores */
        width: 100%;
        /* Largura total */
        display: block;
        /* Altera para exibição em bloco */
        text-align: center;
        /* Centraliza o texto */
    }

    .pricing-button {
        /* Botão de preços em telas menores */
        margin-top: 20px;
        /* Adiciona margem superior */
    }

    .feature-item {
        /* Itens de características em telas menores */
        width: 100%;
        /* Largura total */
        display: block;
        /* Altera para exibição em bloco */
        margin-bottom: 30px;
        /* Adiciona margem inferior */
    }

    .plan {
        /* Planos em telas menores */
        width: 100%;
        /* Largura total */
        display: block;
        /* Altera para exibição em bloco */
        margin-bottom: 30px;
        /* Adiciona margem inferior */
    }

    .cta-content, .cta-button {
        /* Conteúdo e botão da chamada para ação em telas menores */
        width: 100%;
        /* Largura total */
        display: block;
        /* Altera para exibição em bloco */
        text-align: center;
        /* Centraliza o texto */
    }

    .cta-button {
        /* Botão da chamada para ação em telas menores */
        margin-top: 20px;
        /* Adiciona margem superior */
    }
}