* {
    text-decoration: none;
    margin: 0;
    /*box-sizing: border-box;*/
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* id prioridade baixa 3 */
/* a borda vermelha marca o body completo */

body {
    display: flex;
    margin: 0;
    flex-wrap: wrap; /* quebra de linha no elemento pai*/
    align-items: center;
    /* flex-grow: 1;   /* capaciadde de aumantar no redimensioanmento */
    /* flex-shrink: 0; /* capaciadde de redução no redimencionamento */
    flex-basis: 100%; /*capaciadde de manter o elemento d=no tamanho original */
    flex-direction: column; /* FORÇA A PILHA VERTICAL */
   /* border: 1px solid red; */
    overflow-x: hidden;
}

header, nav, aside {
    display: flex;
    width:100%;
    background: #FFFFFF;
    margin: 3px;
}

header {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Alinha os elementos à esquerda, lado a lado */
    gap: 40px; /* Define o espaço exato entre o logótipo e o menu */
    padding: 0.5rem 1rem;
    width: 100%;
    flex-shrink: 0;
    flex-wrap: nowrap; /* Impede estritamente que os itens saltem para a linha de baixo */
}

header .logo {
    flex: 0 1 1px;
    background: #FFFFFF;
    justify-content: left;
    padding: 10px;
    margin:10px 10px 10px 10px;
}


nav {
    flex: 1 1 1vw;
    /*border: 1px solid black; */
    justify-content: flex-start;
    align-items: center;
}


.link_menu {
    margin:0  1%;
    font-size: 10pt;
}

main {
    flex: 1 0 auto;
    width: 100%;
    /*border: solid; */
    height:100%;
    /*height: calc(100vh - 24px);*/
}

aside {
    flex: 1 0 200px;
    /*border: 1px solid black; */
}

.sidebar {
    min-height: 100vh;
    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
    z-index: 1000;
        }

.sidebar .nav-link {
    color: #333;
    font-weight: 500;
    padding: 10px 20px;
}

.sidebar .nav-link:hover, .sidebar .nav-link.active {
    background-color: #e9ecef; /* Cor de destaque */
    color: #184D1D; /* Verde institucional */
    border-left: 4px solid #184D1D;
}

.content-area {
    width: 100%;
    padding: 20px;
    background-color: #f8f9fa; /* Fundo cinza claro para destacar os cards brancos */
    min-height: 100vh;
}
/* ---------------------------------   stilo da tela de apresentacao -------------------------------------------*/


.container-apresentacao {
    display: flex;
    height: 650px;
    padding: 10px;
    max-width: 1200px;
    width: 100%;
    margin:40px auto;
    gap:10px;
              /* Espaço entre as colunas */
}

.coluna-apresentacao {
    flex: 0.9;                  /* Deixe o flex calcular o espaço automaticamente */
    padding: 10px;
    margin: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 12px;
    background-color: #fff;   /* Adicionei fundo para a sombra destacar */
    box-shadow: 2px 5px 15px rgba(0,0,0,0.05);  /* Sombra um pouco mais suave */
    transition: box-shadow 0.5s ease; /* Transição suave no hover */

}

.coluna-apresentacao:hover {
    flex: 0.9;                  /* Deixe o flex calcular o espaço automaticamente */
    padding: 10px;
    margin: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 12px;
    background-color: #fff;   /* Adicionei fundo para a sombra destacar */
    /* Sombra um pouco mais suave */
    box-shadow: 2px 4px 10px rgba(16, 48, 18, 0.4);
}



.coluna-apresentacao2 {
    flex: 1.3;                /* A segunda coluna será levemente maior que a primeira */
    padding: 10px;
    margin: 5px;              /* Reduzi a margem de 55px para 5px */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 2px 5px 15px rgba(0,0,0,0.05);
    transition: box-shadow 0.5s ease; /* Transição suave no hover */

}

.coluna-apresentacao2:hover {
    box-shadow: 2px 4px 10px rgba(16, 48, 18, 0.4);
}

.coluna-apresentacao:last-child {
    background-color: #ffffff; /* Branco */
}

/* Títulos dentro das divs */
.coluna-apresentacao h1 {
    /* Define um tamanho de fonte que se ajusta à tela, com limites mínimo e máximo */
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
    color: #183D1D;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 1rem; /* Adiciona espaço abaixo do título */
}

.coluna-apresentacao h3 {
    color: #183D1D;           /* Seu verde escuro padrão */
    margin-bottom: 10px;
    /* Define um tamanho de fonte fluido com limites */
    font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1.2rem);
    font-weight: 500; /* Deixa o texto mais leve e elegante */
    line-height: 1.5;
}

/* ---------------------------------   stilo da tela dos planos -------------------------------------------*/

.card-plano {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 30px;
    width: 350px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*border: 1px solid black;*/
    margin-top: 24px;
    margin-left: 25px;
    margin-right: 25px;
    box-shadow: 2px 5px 15px rgba(0,0,0,0.05);
}

.card-plano:hover {
    box-shadow: 2px 4px 10px rgba(16, 48, 18, 0.4);
    transition: box-shadow 0.5s ease; /* Transição suave no hover */
}

/* Grupo que contém o Nome e o Foco */
.plan-titles-group {
    display: flex;
    flex-direction: column;      /* Faz o foco ficar abaixo do nome */
    text-align: left;            /* Garante o alinhamento à esquerda */
}
.plan-header {
    display: flex;
    align-items: center;         /* Alinha verticalmente o grupo de texto com a imagem */
    justify-content: space-between; /* Texto na esquerda, Imagem na direita */
    width: 100%;
    margin-bottom: 20px;
}

.plan-title {
    margin: 0;                   /* Remove margens padrão que podem quebrar o alinhamento */
    font-size: 1.5rem;
    line-height: 1.2;
      text-align: right;
}

.plan-focus {
    font-size: 0.9rem;
    color: #666;
    margin-top: 4px;             /* Pequeno espaço entre o nome e o foco */
    text-align: center;
}

.plan-logo {
    width: 90px;
    height: 90px;
    border-radius: 12px;
    object-fit: contain;         /* Garante que o logo não fique distorcido */
    margin-right: 24px;
}

/* Seção de Preço Minimalista */
.plan-pricing {
    margin: 10px 0;
    text-align: center;
}

/* Valor Principal - Reduzido e mais elegante */
.plan-pricing .amount {
    font-size: 1.8rem; /* Tamanho reduzido para não ser exagerado */
    font-weight: 600;  /* Menos "negrito" que o anterior */
    color: #222;       /* Cor mais sóbria */
    letter-spacing: -0.5px;
}

.plan-pricing .currency,
.plan-pricing .period {
    font-size: 0.9rem;
    color: #888;
    font-weight: 400;
}

/* Mensagem de Apoio - Sutil e sem itálico forçado */
.plan-pricing{
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    color: #999;
    line-height: 1.4;
}
.plan-focus {
    display: inline-block;
    background: #f0f0f0;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    color: #555;
    margin-top: 5px;
}

.plan-message {
    font-size: 0.9rem;
    color: #000000;           /* Cinza mais escuro para melhor legibilidade */
    margin-top: 10px;
    font-style: italic;    /* Aplica o itálico */
    /*font-weight: bold;     /* Aplica o negrito */
    line-height: 1.4;      /* Melhora o espaçamento entre linhas se a mensagem for longa */
}

.btn-select {
    display: block;
    text-align: center;
    padding: 12px;
    background: #184D1D;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
}

.plan-features {
    margin-bottom: 24px;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    font-size: 0.85rem;
   /* color: #444;*/
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

/* Um pequeno ponto discreto em vez de ícones grandes */
.feature-list li::before {
    content: "•";
    color: #184D1D;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-right: 8px;
}
.description {
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Fontes sem serifa de fácil leitura */
    font-size: 0.95rem;      /* Tamanho equilibrado para leitura em telas */
    color: #000000;             /* Cinza médio-escuro para reduzir o cansaço visual */
    line-height: 1.6;        /* Espaçamento entre linhas ideal para blocos de texto */
    text-align: justify;     /* Justifica o texto conforme solicitado */
    /*hyphens: auto; */          /* Ajuda a evitar espaços grandes em textos justificados */
    margin-bottom: 20px;     /* Espaço para a próxima seção de benefícios */
    letter-spacing: 0.01em;  /* Melhora a legibilidade das letras */
}

/* ---------------------------------- ESTILO DA TELA DE BLOG -------------------------------------*/

/* Container Geral */
.blog-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 300px; /* Conteúdo + Sidebar */
    gap: 40px;
    font-family: 'Inter', sans-serif;
}

/* Grade de Posts */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

/* O Card do Post */
.blog-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.06);
    border-color: #e0e0e0;
}

/* Adicione isso ao seu CSS */
.card-link {
    display: block;        /* Transforma o link em bloco para aceitar divs dentro */
    text-decoration: none; /* Remove o sublinhado padrão de links */
    color: inherit;        /* Mantém a cor do texto definida nos filhos */
    height: 100%;          /* Garante que o link preencha o card */
}


/* Placeholder de imagem (cinza elegante enquanto não tem foto) */
.card-image-placeholder {
    height: 180px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.blog_image {
    width: 100%;            /* Garante que ocupe a largura total do card */
    height: 200px;          /* Define uma altura padrão para alinhar o grid */
    object-fit: cover;      /* O "pulo do gato": corta excessos sem distorcer */
    display: block;         /* Remove espaçamentos indesejados abaixo da imagem */
    border-bottom: 1px solid #f0f0f0; /* Opcional: uma linha sutil abaixo da foto */
}



.card-content {
    padding: 24px;
}

.card-category {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #184D1D; /* Seu verde institucional */
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 8px;
    display: block;
}

.card-title {
    font-size: 1.25rem;
    color: #222;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.card-summary {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 6; /* Limita a 3 linhas e põe reticências */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Rodapé do Card */
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f9f9f9;
    padding-top: 15px;
    font-size: 0.8rem;
    color: #888;
}

/* Sidebar e CTA */
.cta-box {
    background: #f9fdf9; /* Fundo verde muito claro */
    border: 1px solid #dbeedd;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    position: sticky; /* Faz o box acompanhar a rolagem */
    top: 20px;
}

.btn-cta {
    background: #184D1D;
    color: #fff;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    display: inline-block;
    margin-top: 15px;
    font-weight: 600;
    transition: background 0.2s;
}

.btn-cta:hover {
    background: #143d17;
}

/* ---------------------------------- ESTILO DA TELA DE FAQ -------------------------------------*/

.faq-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: 'Inter', sans-serif;
}

.faq-toolbar {
    text-align: left;
    margin-bottom: 30px;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.faq-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 24px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.faq-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.06);
    border-color: #e0e0e0;
}

.faq-icon {
    font-size: 1.8rem;
    color: #184D1D;
    display: block;
    margin-bottom: 12px;
}

.faq-subject-badge {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #184D1D;
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
}

.faq-question {
    font-size: 1.1rem;
    color: #222;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.faq-answer {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* ---------------------------------- ESTILO DA TELA COMO COMPRAR -------------------------------------*/

.como-comprar-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
}

.como-comprar-intro {
    color: #555;
    margin-bottom: 30px;
}

.como-comprar-passos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.como-comprar-passos li {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: #fff;
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 2px 5px 15px rgba(0,0,0,0.05);
}

.passo-numero {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #184D1D;
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.passo-texto h3 {
    margin: 0 0 6px 0;
    color: #183D1D;
    font-size: 1.1rem;
}

.passo-texto p {
    margin: 0;
    color: #666;
    line-height: 1.5;
}

.como-comprar-cta {
    text-align: center;
    margin-top: 30px;
}

/* ---------------------------------- ESTILO DA TELA QUEM SOMOS -------------------------------------*/

.quem-somos-container {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.quem-somos-texto {
    flex: 1 1 50%;
    text-align: left;
}

.quem-somos-texto p {
    line-height: 1.6;
    text-align: justify;
    margin-bottom: 20px;
}

.quem-somos-destaque {
    background-color: #f9fdf9;
    border-left: 4px solid #184D1D;
    padding: 20px 30px;
    margin: 30px 0 0 0;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    font-size: 1.2rem;
    color: #183D1D;
}

.quem-somos-imagem {
    flex: 1 1 50%;
}

.quem-somos-imagem img {
    width: 100%;
    height: auto;
    /*border-radius: 12px;
    box-shadow: 2px 5px 15px rgba(0,0,0,0.05);*/
}

@media (max-width: 768px) {
    .quem-somos-container {
        flex-direction: column;
    }
}

/* -------------------------------------  estilo das postagens ------------------------------------ */

/* Container principal do texto do artigo */
.post-body {
    line-height: 1.8;
    color: #333;
    font-family: 'Inter', sans-serif;
    max-width: 850px;
    margin: 0 auto;
}

/* Título Principal (H1) */
.post-main-title {
    font-size: 2.5rem;
    color: #1a1a1a;
    font-weight: 800;
    margin-bottom: 30px;
    line-height: 1.1;
}

/* Seções e Espaçamentos */
.post-section {
    margin-bottom: 30px;
}

.post-section h2 {
    font-size: 1.75rem;
    color: #184D1D; /* Seu verde institucional */
    margin-top: 50px;
    margin-bottom: 20px;
    font-weight: 700;
}

/* Container que envolve a data e o autor */
.post-meta {
    display: flex;
    flex-direction: column; /* Empilha o resumo abaixo da linha de data/autor */
    width: 100%;
    margin-bottom: 30px;
}

/* Linha específica para Data e Autor */
.meta-info-wrapper {
    display: flex;
    justify-content: flex-end; /* Alinha todo o conteúdo desta linha à direita */
    gap: 10px; /* Espaço entre a data, o separador e o autor */
    color: #666;
    font-size: 0.95rem;
}

.post-date, .post-author {
    text-align: right;
    display: inline-block;
}

/* O resumo continua ocupando a largura total ou conforme seu estilo */
.post-summary {
    text-align: justify;
    margin-top: 15px;
    font-style: italic;
    color: #555;
}
/* Estilo de Parágrafos */
.post-section p {
    margin-bottom: 20px;
    font-size: 1.2rem;
}

/* Listas (ul e ol) */
.post-section ul, .post-section ol {
    padding-left: 25px;
    margin-bottom: 25px;
}

.post-section li {
    margin-bottom: 12px;
    font-size: 1.2rem;
}

/* Ênfase e Negritos */
.post-section strong {
    color: #000;
    font-weight: 600;
}

/* Conclusão */
.post-conclusion {
    background-color: #f9fdf9;
    border-left: 4px solid #184D1D;
    padding: 30px;
    margin-top: 60px;
    border-radius: 0 8px 8px 0;
    font-style: italic;
     font-size: 1.2rem;
}

/* Responsividade para telas menores */
@media (max-width: 768px) {
    .post-main-title {
        font-size: 1.8rem;
    }
    .post-section h2 {
        font-size: 1.4rem;
    }
}

/* ---------------------------------  ESTILO do rodape -------------------------------------------*/
.rodape-principal {
    flex: 1 1 100%;
    background-color: #FFF;
    color: #333;
    border-top: 1px solid #184D1D;
    clear: both;
    width: 100%;
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 20px;
}

.footer_coluna {
    text-align: left;
}

.footer_coluna h4 {
    color: #184D1D;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 15px;
}

.footer_coluna ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer_coluna ul li {
    margin-bottom: 10px;
}

.footer_coluna ul li a {
    color: #111;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer_coluna ul li a:hover {
    color: #184D1D;
    text-decoration: underline;
}

.footer-payment-icons,
.footer-social-icons {
    display: flex;
    gap: 15px;
    font-size: 22px;
}

.footer-payment-icons i {
    color: #555;
    transition: color 0.3s ease;
}

.footer-payment-link {
    display: inline-block;
    text-decoration: none;
}

.footer-payment-link:hover .footer-payment-icons i {
    color: #184D1D;
}

.footer-payment-caption {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    color: #111;
    transition: color 0.3s ease;
}

.footer-payment-link:hover .footer-payment-caption {
    color: #0e2c0f;
    text-decoration: underline;
}

.footer-social-icons a {
    transition: color 0.3s ease;
}

.footer-social-icons a:hover {
    color: #278F2D;
}

/* CTA de WhatsApp na página Fale Conosco */
.cta-whatsapp-texto {
    margin-bottom: 10px;
}

.botao_whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #25D366;
    color: #fff;
    padding: 10px 18px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 25px;
    transition: background-color 0.3s ease;
}

.botao_whatsapp:hover {
    background-color: #1EBE57;
    color: #fff;
}

.direitos-autorais {
    text-align: center; /* Centraliza o texto do parágrafo */
    border-top: 1px solid #e0e0e0; /* Linha sutil para separar */
    padding: 15px 20px;
    width: 100%;
    font-size: 9px;
    color: #888;
}
.foot_p {
    text-align: center; /* Centraliza o texto do parágrafo */
    width: 100%;
    font-size: 8px;
    color: #888;
}

@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .footer_coluna {
        text-align: center;
    }

    .footer-payment-icons,
    .footer-social-icons {
        justify-content: center;
    }
}

a {
	/* Remove a decoração padrão do elemento. */
	text-decoration: none;

	/* Definir a cor da fonte para o padrão do elemento pai. */
	/*color: inherit;*/
}
/* Estilização do contentor do menu */
.ul-menu {
    list-style-type: none; /* Remove as bolinhas */
    margin: 10px; /* Remove a margem antiga que estava a empurrar o menu para baixo */
    padding: 10px;
    display: flex; /* Alinha os itens do menu horizontalmente */
    align-items: center; /* Centraliza verticalmente em relação ao logótipo */
    background-color: transparent; /* Permite que a cor do header seja visível */
    /* A propriedade 'border: 10px;' foi removida por ser inválida e desalinhar a caixa */
}

/* Estilização dos itens da lista do menu */
.li-menu {
    margin: 0;
}

/* Estilização dos links */
.li-menu a {
    display: block;
    color: black;
    text-align: center;
    margin: 0 5px;         /* Margem apenas nas laterais para não afetar a altura */
    padding: 10px 20px;
    text-decoration: none;
    font-size: 18px;       /* Ligeiramente ajustado para melhor enquadramento no header */
    font-weight: bold;
    transition: 0.3s;
    border-radius: 5px;
}

/* Estilo para o link que estiver ativo (página atual) */
.li-menu a.active {
    background-color: #184D1D;
    color: white;
    border-radius: 10px;
    box-shadow: 2px 4px 5px rgba(16, 48, 18, 0.9);
}

/* Efeito ao passar o rato (hover) */
.li-menu a:hover {
    background-color: #184D1D;
    color: white; /* Alterado para branco para garantir legibilidade no fundo escuro */
    border-radius: 10px;
    box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.9);
}

/* ---------------  div login      ---------------------------------------------*/

.div_login {
    flex: 0 1 500px;                /* Faz a div do meio crescer para ocupar o espaço vazio */
    display: flex;          /* Ativa flex interno para centralizar o conteúdo dela */
    /* Se quiser um limite de largura para a div do meio: */
    max-width: 1100px;
    align-items: center;    /* CORREÇÃO: Centraliza os itens filhos (formulário) horizontalmente */
    justify-content: center;
    padding: 30px 10px 30px 10px;
    margin:10px 10px 10px 10px;
    text-align: center;
    flex-direction: column; /* FORÇA A PILHA VERTICAL */
    background-color: white;
    border-radius: 10px;
    box-shadow: 2px 4px 10px rgba(16, 48, 18, 0.9);
}

.div_login2 {
    flex: 0 1 500px;                /* Faz a div do meio crescer para ocupar o espaço vazio */
    display: flex;          /* Ativa flex interno para centralizar o conteúdo dela */
    /* Se quiser um limite de largura para a div do meio: */
    max-width: 1200px;
    justify-content: center;
    align-items: center;
    padding: 30px 10px 30px 10px;
    margin:10px 10px 10px 10px;
    text-align: center;
    flex-direction: column; /* FORÇA A PILHA VERTICAL */
    background-color: white;
    border-radius: 10px;
    box-shadow: 2px 4px 10px rgba(16, 48, 18, 0.9);
}

div.campo_form_login {
    display: flex;
    flex-direction:column;
    text-align:left;
    width:100%;
    }

.div_login2 form {
    width: 100%;            /* sem isso o form encolhe e os 80% do campo saem do eixo */
}

div.campo_form_login2 {
    display: flex;
    flex-direction:column;
    align-items: center;
    text-align:center;
    width:80%;
    margin: 0 auto;
    }

/* Aumenta o tamanho da letra do rótulo (E-mail) */
.campo_form_login label {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    width:80%;
}

.campo_form_login2 label {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    width:100%;
    margin: 10px auto;
}

/* Aumenta a letra dentro da caixa de texto e do placeholder */
.campo_form_login input {
    font-size: 16px;
    padding: 10px; /* Adicione padding para a caixa acompanhar o tamanho da letra */
    margin:10px;
}
.campo_form_login2 input {
    font-size: 16px;
    padding: 10px; /* Adicione padding para a caixa acompanhar o tamanho da letra */
    width: 100%;
    margin: 10px auto;
}

.radio_register {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
}

h2.mensagem {
    display: flex;
}

div.botao_login_texto {
    background: none;       /* Remove a cor de fundo */
    text-align:right;
    width: 90%;
    justify-content: flex-end;
    margin:30px 3px 10px 10px;
}

.campo_form_botao_texto {
    background: none;       /* Remove a cor de fundo */
    border: none;           /* Remove a borda padrão */
    padding: 0;             /* Remove o espaçamento interno */
    font: inherit;          /* Herda a fonte, tamanho e cor do elemento pai */
    color: #183D1D;         /* Define a cor do texto (pode ser azul como um link) */
    cursor: pointer;        /* Faz o mouse virar a "mãozinha" ao passar por cima */
    text-decoration: underline; /* Opcional: adiciona o sublinhado de link */
    outline: inherit;       /* Mantém o comportamento de foco padrão */
    transition: font-weight 0.3s ease; /* Transição suave no hover */
}

/* Efeito ao passar o mouse */
.campo_form_botao_texto:hover {
    color: #183D1D;
    font-weight: bold;
    text-decoration: none;  /* Opcional: remove o sublinhado no hover */
}

.botao_login_submit {
    background-color: #278f2d; /* Verde Escuro (DarkGreen) */
    color: white;               /* Cor da letra branca para dar contraste */
    width: 80%;                /* Ocupa 100% da largura da div pai */
    padding: 12px;              /* Espaçamento interno para o botão não ficar "magro" */
    border: none;               /* Remove a borda padrão */
    border-radius: 8px;         /* Cantos arredondados, como já aprendemos */
    font-size: 16px;            /* Tamanho da letra */
    font-weight: bold;          /* Deixa o texto em negrito */
    cursor: pointer;            /* Transforma o mouse em "mãozinha" */
    transition: background-color 0.9s ease; /* Transição suave no hover */
    transition: box-shadow 0.5s ease; /* Transição suave no hover */
    }

.botao_login_submit100 {
    background-color: #184D1D; /* Verde Escuro (DarkGreen) */
    color: white;               /* Cor da letra branca para dar contraste */
    width: 100%;                /* Ocupa 100% da largura da div pai */
    padding: 12px;              /* Espaçamento interno para o botão não ficar "magro" */
    border: none;               /* Remove a borda padrão */
    border-radius: 10px;         /* Cantos arredondados, como já aprendemos */
    font-size: 16px;            /* Tamanho da letra */
    font-weight: bold;          /* Deixa o texto em negrito */
    cursor: pointer;            /* Transforma o mouse em "mãozinha" */
    transition: background-color 0.9s ease; /* Transição suave no hover */
    transition: box-shadow 0.5s ease; /* Transição suave no hover */
    }

.botao_login_submit:hover {
 background-color: #183D1D;
 box-shadow: 1px 3px 5px rgba(16, 48, 18, 0.5)

}
/* -----------------------------   format o botão de upload ---------------------------------------*/

/* 1. Esconde o botão feio padrão do navegador */
.input-arquivo-oculto {
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

/* 2. Estiliza o Label para parecer um botão */
.botao-upload-estilizado {
    background-color: #184D1D; /* Verde Escuro (DarkGreen) */
    color: white;               /* Cor da letra branca para dar contraste */
    width: 80%;                /* Ocupa 100% da largura da div pai */
    padding: 12px;              /* Espaçamento interno para o botão não ficar "magro" */
    border: none;               /* Remove a borda padrão */
    border-radius: 8px;         /* Cantos arredondados, como já aprendemos */
    font-size: 16px;            /* Tamanho da letra */
    font-weight: bold;          /* Deixa o texto em negrito */
    cursor: pointer;            /* Transforma o mouse em "mãozinha" */

}

.botao-upload-estilizado:hover {
    background-color: #0d2611; /* Tom mais escuro para o hover */
}

/* 3. Estilo para o nome do arquivo aparecer embaixo */
.nome-arquivo-selecionado {
    margin-top: 9px;
    padding: 1px;
    font-size: 14px;
    background-color: transparent; /* Um fundo leve para destacar */
    border-radius: 4px;
    display: inline-block;
    width: 90%;
    text-align: center;
}

.msg-erro {
    display: block;
    color: #d9534f;
    font-size: 12px;
    margin-top: 5px;
}

/* --------------------------------------- FORMATACAO PARA MENSAGENS FLASH ----------------------*/


/* --- Estilos para Mensagens Flash --- */

/* Container que envolve todas as mensagens */
.container.mt-3 {
    width: 90%;
    max-width: 960px; /* Largura máxima */
    margin: 1rem auto; /* Centraliza e adiciona espaço */
    position: relative;
    z-index: 1050;
}

/* Estilo base para todos os alertas */
.alert {
    position: relative;
    padding: 1rem 1.5rem; /* Mais espaço interno */
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* Sombra sutil */
}

/* Estilo para alertas que podem ser fechados */
.alert-dismissible {
    padding-right: 4rem; /* Espaço para o botão de fechar */
}

/* Cores para cada categoria de alerta */

/* Sucesso (success) */
.alert-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}

/* Perigo/Erro (danger) */
.alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

/* Aviso (warning) */
.alert-warning {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
}

/* Informação (info) */
.alert-info {
    color: #055160;
    background-color: #cff4fc;
    border-color: #b6effb;
}

/* Botão de fechar (X) - Estilo inspirado no Bootstrap 5 */
.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: 0.25rem;
    opacity: 0.5;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

.btn-close:hover {
    opacity: 0.75;
}

/* As classes .fade e .show controlam a animação. Sem o JS do Bootstrap,
   elas não terão efeito, mas o alerta será visível. */
.fade {
    transition: opacity 0.15s linear;
}
.show {
    opacity: 1;
}

/* -------------------------------------------   mapa da tecnologia  -----------------------------*/
.container-fluxograma {
    display: flex;
    background: #FFFFFF;
    margin:40px auto;
    padding: 10px;
    max-width: 1200px;
    width: 98%;
    border-radius: 12px;
    box-shadow: 2px 5px 15px rgba(0,0,0,0.05);  /* Sombra um pouco mais suave */
    transition: box-shadow 0.5s ease; /* Transição suave no hover */
    gap:10px;
}

.container-fluxograma:hover {
    box-shadow: 2px 4px 10px rgba(16, 48, 18, 0.4); /* Sombra um pouco mais suave */
}


/* Área da Imagem */
.map-container {
    position: relative;
    width: 70%; /* A imagem ocupa 70% da tela */
}

.fluxograma-img {
    width: 100%;
    display: block;
    border-radius: 10px;
}

/* Hotspots (As áreas sensíveis) */
.hotspot {
    position: absolute;
    cursor: pointer;
    z-index: 10;

    /* DEPOIS DO AJUSTE: Mude "1px solid red" para "none" para esconder as caixas */
    /*border: 2px dashed rgba(255, 0, 0, 0.5); */
    border: None;
    /*background-color: rgba(255, 255, 255, 0.1);*/
    transition: background-color 0.3s;
}

/*.hotspot:hover {
    background-color: rgba(39, 143, 45, 0.2); /* Verde translúcido ao passar o mouse */
/*    border-color: #278F2D;
}*/

/* AJUSTE FINO DAS POSIÇÕES (Valores aproximados em %) */
/* Inputs (Esquerda) */
#spot-inputs { top: 13%; left: 2%; width: 15%; height: 65%; }

/* Minerador 1 (Cérebro esq) */
#spot-minerador1 { top: 30%; left: 22%; width: 14%; height: 27%; }

/* Persona (Meio) */
#spot-persona { top: 31%; left: 40%; width: 14%; height: 25%; }

/* Fontes de Dados (Baixo meio) */
#spot-fontes { top: 56%; left: 49%; width: 12%; height: 43%; }

/* Minerador 2 (Cérebro dir) */
#spot-minerador2 { top: 33%; left: 62%; width: 14%; height: 27%; }

/* Output (Direita) */
#spot-output { top: 33%; left: 84%; width: 14%; height: 27%; }

/* ---------------------------------- estilo da dash de dados ------------------------------------*/
 .sidebar {
    min-height: 100vh;
    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
    z-index: 1000;
        }

.sidebar .nav-link {
    color: #333;
    font-weight: 500;
    padding: 10px 20px;
}

.sidebar .nav-link:hover, .sidebar .nav-link.active {
    background-color: #e9ecef; /* Cor de destaque */
    color: #184D1D; /* Verde institucional */
    border-left: 4px solid #184D1D;
}

.content-area {
    width: 100%;
    padding: 20px;
    background-color: #f8f9fa; /* Fundo cinza claro para destacar os cards brancos */
    min-height: 100vh;
}


/* --------------------------------------------estilo  do menu do usuario logado -------------------------------------*/

/* Remove a seta padrão do dropdown se desejar um visual mais limpo */
.dropdown-toggle::after {
    display: none; /* Ou remova esta linha se quiser manter a setinha */
}

/* Estilização do Menu Vertical */
.user-menu-custom {
    min-width: 200px; /* Largura mínima para não ficar espremido */
    padding: 10px 0;  /* Espaçamento vertical interno */
    border: none;     /* Remove a borda padrão cinza */
    border-radius: 12px; /* Bordas arredondadas modernas */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Sombra suave para destaque */

    /* Garante que o menu flutue acima de outros elementos */
    z-index: 1050;
}

/* Estilização dos Itens da Lista */
.user-menu-custom .dropdown-item {
    padding: 10px 20px; /* Espaço maior para clique */
    font-size: 0.95rem;
    color: #4a5568;
    transition: all 0.2s ease;
}

/* Efeito ao passar o mouse */
.user-menu-custom .dropdown-item:hover {
    background-color: #f8f9fa;
    color: #184D1D; /* Verde institucional */
    transform: translateX(5px); /* Pequeno movimento para a direita */
}

/* Item de Sair (Danger) */
.user-menu-custom .dropdown-item.text-danger:hover {
    background-color: #fff5f5;
    color: #dc3545;
}
/* Área do Card de Informação */
.info-panel {
    width: 30%;
    padding-left: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-panel .card {
    background: linear-gradient(135deg, #184D1D 0%, #278F2D 100%);
    color: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(24, 77, 29, 0.3);
    transition: all 0.4s ease;
    opacity: 0; /* Começa invisível ou com texto padrão */
    transform: translateY(20px);
}

.info-panel .card.active {
    opacity: 1;
    transform: translateY(0);
}

.info-panel .card h2 {
    margin-top: 0;
    font-size: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 10px;
}

.info-panel .card p {
    font-size: 1.1rem;
    line-height: 1.6;
}

.instruction {
    color: #666;
    text-align: center;
    font-style: italic;
}

/*----------------------------------------   divo com imagem de fundo  ---------------------------*/

/* ------------------------------------------------------------------------------------------------*/
/*
/* formato de tela quase quadrado */

/* Responsividade: Em celulares, a sidebar vai para baixo ou some */
@media (max-width: 768px) {
    .blog-container {
        grid-template-columns: 1fr;
    }
}