* {
    /* ... */
    box-sizing: border-box;
}/* Definições de Cores e Gradientes */

/* Definições de Cores e Gradientes (Mantidas) */
:root {
    --color-dark-blue: #1A378C;
    --color-medium-blue: #2A56C4;
    --color-light-blue: #3E80E6;
    --color-green: #4CAF50;
    --color-purple: #9C27B0;
    --color-white: #ffffff;
    --color-gray-text: #6e6e6e;
    --color-light-bg: #F4F6F9;
    --gradient-header: linear-gradient(90deg, #1A378C 0%, #3E80E6 100%);
    --gradient-hero: linear-gradient(135deg, rgba(26, 55, 140, 0.8) 0%, rgba(62, 128, 230, 0.8) 100%);
    --gradient-cta-final: linear-gradient(135deg, #1A378C 0%, #3E80E6 100%);
    --font-family: 'Poppins', sans-serif;
    --shadow-card: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* Reset Básico e Estilos Mobile-First */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Essencial para responsividade! */
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--color-dark-blue);
    background-color: var(--color-white);
    overflow-x: hidden; /* Evita barras de rolagem horizontais em telas pequenas */
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

section {
    padding: 50px 0; /* Padding reduzido para mobile */
}

/* Tamanhos de Fonte Ajustados para Mobile */
h1 {
    font-size: 2.5rem; 
    font-weight: 800;
}

h2 {
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
}

/* --- HEADER (Ajustes Mobile) --- */
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-menu {
    display: none; /* Escondido por padrão no mobile */
    flex-direction: column;
    
    /* MUDANÇA ESSENCIAL: Fixa o menu na janela do navegador */
    position: fixed; 
    
    /* Mantém o alinhamento de 70px abaixo do topo (ajuste este valor se necessário) */
    top: 70px; 
    
    left: 0;
    width: 100%;
    background: var(--gradient-header);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 10px 0;
    
    /* NOVO: Garante que o menu flutue sobre qualquer outro conteúdo */
    z-index: 999; 
}
.nav-menu.active {
    display: flex; /* Exibido via JavaScript quando o botão é clicado */
}
.nav-menu a {
    padding-top: 10px;
    margin: 0px 20px;
    text-align: center;
    
}
.btn-primary {
    margin: 10px auto;
    
}

.menu-toggle {
    display: block; /* Mostrado no mobile */
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 1.5rem;
    cursor: pointer;
}

/* --- HERO SECTION --- */
.hero {
    height: auto;
    padding-bottom: 50px;
}
.hero p {
    font-size: 1rem;
}
.hero-actions {
    display: flex;
    flex-direction: column; /* Botões em coluna no mobile */
    gap: 15px;
    width: 100%; /* Ocupa a largura total */
}

/* --- DADOS QUE FUNDAMENTAM SECTION --- */
.data-cards {
    display: flex;
    flex-direction: column; /* Cartões em coluna no mobile */
    gap: 30px;
}
.data-card .percentage {
    font-size: 3rem;
}

/* --- RECURSOS DA PLATAFORMA SECTION --- */
.resource-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 coluna no mobile */
    gap: 20px;
}

/* --- NÍVEIS DE APRENDIZAGEM SECTION --- */
.levels-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 coluna no mobile */
    gap: 30px;
}
.level-card {
    padding: 25px;
}
.level-info {
    justify-content: space-between; /* Melhor espaçamento */
}

/* --- IMPACTO DO PROJETO ALPHA SECTION --- */
.impact-stats-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 coluna no mobile */
    gap: 20px;
}
.stat-number {
    font-size: 2.5rem;
}

/* --- SOBRE O PROJETO ALPHA SECTION --- */
.about-content {
    display: flex;
    flex-direction: column; /* Conteúdo em coluna no mobile */
    gap: 30px;
}
.about-alpha h2 {
    text-align: center;
}
.about-image-card {
    min-height: 250px;
}

/* --- METODOLOGIA SECTION --- */
.methodology-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 coluna no mobile */
    gap: 20px;
}

/* --- CTA FINAL SECTION --- */
.final-cta-box {
    padding: 40px 20px;
}
.final-cta-box h2 {
    font-size: 2rem;
}
.cta-features-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 coluna no mobile */
    gap: 30px;
}

/* --- FOOTER --- */
.footer-content-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 coluna no mobile */
    text-align: center;
    gap: 30px;
}
.footer-bottom-content {
    flex-direction: column; /* Conteúdo inferior em coluna */
    gap: 15px;
}
.legal-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.legal-links a, .developer-info {
    margin-left: 0;
}


/* ======================================= */
/* MEDIA QUERIES PARA TELAS MAIORES (Tablets e Desktops) */
/* ======================================= */

/* Telas Médias (Tablets e Paisagem - 768px e acima) */
@media (min-width: 768px) {
    /* Ajustes Gerais */
    h1 {
        font-size: 3.2rem;
    }
    h2 {
        font-size: 2.2rem;
    }
    section {
        padding: 80px 0;
    }

    /* HEADER */
    .nav-menu {
        display: flex; /* Exibe o menu de navegação completo */
        flex-direction: row;
        position: static;
        width: auto;
        background: none;
        box-shadow: none;
        padding: 0;
    }
    .menu-toggle {
        display: none; /* Esconde o botão hamburger */
    }

    /* HERO */
    .hero-actions {
        flex-direction: row; /* Botões lado a lado */
        justify-content: center;
    }

    /* DADOS QUE FUNDAMENTAM */
    .data-cards {
        flex-direction: row; /* Cartões lado a lado */
        gap: 50px;
    }

    /* RECURSOS, NÍVEIS, METODOLOGIA (Pode ter 2 colunas) */
    .resource-grid,
    .methodology-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas */
    }
    .levels-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas no tablet, 3 no desktop */
    }
    
    /* IMPACTO */
    .impact-stats-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 colunas */
    }
    .stat-number {
        font-size: 2.8rem;
    }

    /* SOBRE */
    .about-content {
        flex-direction: row; /* Volta a ser lado a lado */
        gap: 50px;
    }
    .about-alpha h2 {
        text-align: left;
    }

    /* CTA FINAL */
    .cta-features-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 colunas */
    }

    /* FOOTER */
    .footer-content-grid {
        grid-template-columns: 2.5fr 1fr 1fr; /* Retorna ao layout de desktop */
        text-align: left;
    }
    .footer-bottom-content {
        flex-direction: row;
    }
    .legal-links {
        flex-direction: row;
    }
}

/* Telas Grandes (Desktops - 992px e acima) */
@media (min-width: 992px) {
    /* RECURSOS, NÍVEIS, METODOLOGIA (3 colunas) */
    .resource-grid,
    .methodology-grid,
    .levels-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 colunas padrão */
    }
}



:root {
    --color-dark-blue: #1A378C; /* Azul Escuro Base */
    --color-medium-blue: #2A56C4; /* Azul Médio */
    --color-light-blue: #3E80E6; /* Azul Claro/Ciano */
    --color-green: #03e4fd; /* Verde dos Níveis */
    --color-purple: #130241; /* Roxo dos Níveis */
    --color-white: #ffffff;
    --color-gray-text: #6e6e6e;
    --color-light-bg: #F4F6F9;
    --gradient-header: linear-gradient(90deg, #1A378C 30%, #3E80E6 100%);
    --gradient-hero: linear-gradient(135deg, rgba(26, 55, 140, 0.905) 40%, rgba(27, 212, 253, 0.8) 100%);
    --gradient-cta-final: linear-gradient(135deg, #1A378C 0%, #3E80E6 100%);
    --font-family: 'Poppins', sans-serif;
    --shadow-card: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* Reset Básico e Fontes */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--color-dark-blue);
    background-color: var(--color-white);
}

a {
    text-decoration: none;
    color: var(--color-medium-blue);
    font-weight: 800;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

section {
    padding: 80px 0;
}

/* --- TÍTULOS --- */
h1 {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}

h2 {
    font-size: 2.2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
    color: var(--color-dark-blue);
}

/* --- COMPONENTES BÁSICOS (BOTÕES) --- */
.btn {
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: 600;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-align: center;
    white-space: nowrap;
    border: none;
}

.btn-primary {
    padding: auto;
    background-color: var(--color-light-blue);
    color: var(--color-white);
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.btn-primary:hover {
    background-color: #093671;
}


/* --- HEADER --- */
.header {
    background: var(--gradient-header);
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-white);
}

.alpha-text {
    /* Estilo padrão para todos os dispositivos (Mobile-First) */
    font-weight: 800;
    
    /* Margem para celulares: 0px. Garante que o texto fique na tela */
    margin: 0 -130px; 
}

/* --- Media Query para Tablets (Telas acima de 768px) --- */
@media (min-width: 768px) {
    .alpha-text {
        /* Aplica uma margem negativa menor, se necessário, para ajuste */
        margin: 0 0px; 
    }
}

/* --- Media Query para Computadores e Desktops (Telas acima de 1024px) --- */
@media (min-width: 1024px) {
    .alpha-text {
        /* Aplica a margem negativa grande original apenas em telas grandes */
        margin: 0 -135px;
    }
}
    /* --- Media Query para Computadores e Desktops (Telas acima de 1024px) --- */
@media (min-width: 1024px) {
    .alpha-text {
        /* Aplica a margem negativa grande original apenas em telas grandes */
        margin: 0 -135px;
    }
}

.alpha-text2{
     font-weight: 800;
}
.nav-menu a:not(.btn) {
    color: var(--color-white);
    margin-left: 25px;
    font-weight: 500;
    opacity: 0.9;
    transition: opacity 0.3s;
}
.nav-menu a:not(.btn):hover {
    opacity: 1;
}

.menu-toggle {
    display: none; /* Oculto no desktop */
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 1.5rem;
    cursor: pointer;
}

/* --- HERO SECTION --- */
.hero {
    /* Imagem de fundo e gradiente conforme o design */
    background: var(--gradient-hero), url('placeholder-hero-bg.jpg') no-repeat center center/cover;
    height: 80vh; /* Altura ajustada para o conteúdo caber */
    display: flex;
    align-items: center;
    color: var(--color-white);
    text-align: center;
    padding-top: 50px;
}
.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hero p {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto 40px;
    font-weight: 500;
}
.hero-actions {
    display: flex;
    gap: 20px;
}
.btn-cta-main {
    padding: 15px 35px;
    font-size: 1.1rem;
    border-radius: 30px;
    background: none;
}
.btn-white-border {
    border: 2px solid var(--color-white);
    color: var(--color-white);
}
.btn-white-border:hover {
    background-color: rgba(18, 4, 53, 0.7);
}

/* --- DADOS QUE FUNDAMENTAM SECTION --- */
.data-mission {
    padding-top: 40px;
    padding-bottom: 80px;
}
.data-subtitle {
    text-align: center;
    color: var(--color-gray-text);
    margin-bottom: 40px;
}
.data-cards {
    display: flex;
    justify-content: center;
    gap: 50px;
}
.data-card {
    text-align: center;
}
.data-card .percentage {
    font-size: 4rem;
    font-weight: 800;
    display: block;
    margin-bottom: 5px;
    color: var(--color-medium-blue);
}
.data-card:nth-child(2) .percentage {
    color: #0cedea; /* Cor Verde para o 66% conforme a imagem */
}
.data-description {
    color: var(--color-gray-text);
    font-weight: 500;
    max-width: 250px;
}

/* --- RECURSOS DA PLATAFORMA SECTION --- */
.platform-resources {
    background-color: var(--color-light-bg);
}
.resource-subtitle {
    text-align: center;
    color: var(--color-gray-text);
    margin-bottom: 40px;
}
.resource-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.resource-card {
    background-color: var(--color-white);
    padding: 30px;
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    transition: transform 0.3s;
}
.resource-card:hover {
    transform: translateY(-5px);
}
.icon-circle {
    width: 50px;
    height: 50px;
    background-color: var(--color-medium-blue);
    color: var(--color-white);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    margin-bottom: 15px;
}
.resource-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-dark-blue);
    margin-bottom: 10px;
}
.resource-card p {
    font-size: 0.95rem;
    color: var(--color-gray-text);
}

/* --- NÍVEIS DE APRENDIZAGEM SECTION --- */
.levels-subtitle {
    text-align: center;
    color: var(--color-gray-text);
    margin-bottom: 50px;
}
.levels-grid {
    display: grid;
    /* Define o tamanho das 3 colunas, sendo a do meio para os cards */
    grid-template-columns: repeat(2, 1fr); 
    
    /* Centraliza os itens dentro da grelha no eixo horizontal */
    justify-content: center; 
    
    /* Espaçamento entre os cards */
    gap: 30px;
    
    /* Opcional: define a largura máxima da grelha para evitar que ela estique demais */
    max-width: 800px; 
    
    /* Opcional: centraliza a própria grelha (o elemento .levels-grid) na página */
    margin: 0 auto; 
}
.level-card {
    padding: 30px;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.295);
}
/* Efeitos de fundo dos cards (usando um pseudo-elemento para o efeito de onda suave) */
.level-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 50%;
    border-radius: 0 15px 0 100%; /* Ajuste a borda para o efeito visual no canto */
    opacity: 0.1;
    z-index: 1;
}

.level-card > * {
    position: relative;
    z-index: 2;
}

.level-icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: var(--color-white);
}

/* Estilos Específicos dos Níveis */
.level-iniciante {
    background-color: #e8f3f5; /* Fundo Verde Claro */
}
.level-iniciante .level-icon-wrapper {
    background-color: var(--color-green);
}
.level-iniciante::after {
    background-color: var(--color-green);
}

.level-intermediario {
    background-color: #E3F2FD; /* Fundo Azul Claro */
}
.level-intermediario .level-icon-wrapper {
    background-color: var(--color-medium-blue);
}
.level-intermediario::after {
    background-color: var(--color-medium-blue);
}

.level-avancado {
    background-color: #F3E5F5; /* Fundo Roxo Claro */
}
.level-avancado .level-icon-wrapper {
    background-color: var(--color-purple);
}
.level-avancado::after {
    background-color: var(--color-purple);
}

.level-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--color-dark-blue);
}

.level-list {
    list-style: none;
    padding-left: 0;
    margin: 20px 0;
}
.level-list li {
    font-size: 0.95rem;
    color: var(--color-gray-text);
    margin-bottom: 8px;
}
.level-list i {
    color: var(--color-green); /* Checkmark verde para todos */
    margin-right: 8px;
}

.level-info {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: var(--color-gray-text);
    font-weight: 500;
}



/* --- IMPACTO DO PROJETO ALPHA SECTION --- */
.project-impact {
    background: linear-gradient(135deg, #1A378C 0%, #3E80E6 100%);
    color: var(--color-white);
    text-align: center;
}
.project-impact h2 {
    color: var(--color-white);
}
.impact-subtitle {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 50px;
}

.impact-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.impact-card {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 30px 20px;
    border-radius: 12px;
    transition: background-color 0.3s;
}
.impact-card:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.impact-icon-circle {
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    margin: 0 auto 15px;
}

.stat-number {
    font-size: 2.8rem;
    font-weight: 800;
    display: block;
    margin-bottom: 5px;
}
.stat-text {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 5px;
}
.stat-detail {
    font-size: 0.85rem;
    opacity: 0.7;
}

.impact-cta-container {
    background-color: rgba(255, 255, 255, 0.15);
    padding: 40px;
    border-radius: 12px;
}
.impact-cta-container h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
}
.impact-cta-container p {
    font-size: 1rem;
    margin-bottom: 20px;
}
.btn-secondary-light {
    background-color: var(--color-white);
    color: var(--color-medium-blue);
    font-weight: 700;
    border-radius: 30px;
    padding: 15px 35px;
}
.btn-secondary-light:hover {
    background-color: #03124f;
}

/* --- SOBRE O PROJETO ALPHA SECTION --- */
.about-alpha {
    background-color: var(--color-dark-blue);
    color: var(--color-white);
}
.about-alpha h2 {
    color: var(--color-white);
    text-align: left;
    margin-bottom: 20px;
}
.about-content {
    display: flex;
    gap: 50px;
    align-items: center;
}
.about-text-column {
    flex: 1;
}
.about-image-column {
    flex: 1;
    min-height: 400px; /* Altura mínima para o card de imagem */
}
.about-image-card {
    background: url('placeholder-sobre-bg.jpg') no-repeat center center/cover;
    height: 100%;
    min-height: 400px;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.image-label {
    position: absolute;
    bottom: 30px;
    right: 30px;
    background-color: var(--color-white);
    color: var(--color-dark-blue);
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.image-detail {
    position: absolute;
    bottom: 10px;
    right: 30px;
    color: var(--color-dark-blue);
    font-size: 0.9rem;
    font-weight: 500;
}
.about-features {
    list-style: none;
    margin-top: 20px;
}
.about-features li {
    font-size: 1.1rem;
    margin-bottom: 10px;
}
.about-features i {
    color: var(--color-light-blue);
    margin-right: 10px;
}

/* --- METODOLOGIA SECTION --- */
.methodology {
    background-color: var(--color-white);
}
.methodology-subtitle {
    text-align: center;
    color: var(--color-gray-text);
    margin-bottom: 50px;
}
.methodology-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.methodology-card {
    background-color: var(--color-white);
    padding: 30px;
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    transition: transform 0.3s;
}
.methodology-card:hover {
    transform: translateY(-5px);
}
.step-icon-circle {
    width: 60px;
    height: 60px;
    background-color: var(--color-medium-blue);
    color: var(--color-white);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 15px;
}
.methodology-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-dark-blue);
    margin-bottom: 10px;
}
.methodology-card p {
    font-size: 0.95rem;
    color: var(--color-gray-text);
}

/* --- CTA FINAL SECTION --- */
.final-cta-section {
    background: linear-gradient(135deg, #1A378C 0%, #3E80E6 100%);
    padding: 100px 0;
}
.final-cta-box {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    padding: 60px;
    border-radius: 15px;
    text-align: center;
    color: var(--color-white);
}
.final-cta-box h2 {
    color: var(--color-white);
    margin-bottom: 15px;
    font-size: 2.5rem;
}
.final-cta-box p {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 40px;
}
.btn-cta-final {
    background-color: var(--color-white);
    color: var(--color-light-blue);
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 30px;
    padding: 15px 40px;
    margin-bottom: 50px;
}
.btn-cta-final:hover {
    background-color:#03124f ;
}
.cta-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.cta-feature {
    text-align: center;
}
.cta-feature i {
    font-size: 2.5rem;
    color: var(--color-white);
    opacity: 0.8;
    margin-bottom: 10px;
}
.cta-feature p {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}
.cta-feature span {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* --- FOOTER --- */
.footer {
    background-color: #151515; /* Cor preta/muito escura do rodapé */
    color: var(--color-white);
    padding-top: 50px;
}
.footer-content-grid {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr; /* Marca, Links, Suporte */
    gap: 30px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-logo {
    font-size: 1.8rem;
    margin-bottom: 15px;
}
.footer-brand p {
    font-size: 0.9rem;
    opacity: 0.8;
    max-width: 350px;
}
.social-links {
    margin-top: 20px;
}
.social-links a {
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    transition: background-color 0.3s;
}
.social-links a:hover {
    background-color: var(--color-medium-blue);
    border-color: var(--color-medium-blue);
}

.footer-links-group h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--color-light-blue); /* Cor de destaque para os títulos */
}
.footer-links-group ul {
    list-style: none;
}
.footer-links-group a {
    color: var(--color-white);
    opacity: 0.8;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 8px;
}
.footer-links-group a:hover {
    color: var(--color-light-blue);
    opacity: 1;
}

.footer-bottom {
    padding: 20px 0;
    font-size: 0.8rem;
}
.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(255, 255, 255, 0.6);
}
.legal-links a {
    color: inherit;
    margin-left: 20px;
}
.developer-info {
    margin-left: 20px;
    color: var(--color-light-blue);
}

/* ======================================= */
/* RESPONSIVIDADE (MOBILE FIRST adjustments) */
/* ======================================= */

/* Telas Pequenas (Smartphones) */
@media (max-width: 992px) {
    h1 {
        font-size: 2.5rem;
    }
    h2 {
        font-size: 1.8rem;
    }
    section {
        padding: 50px 0;
    }

    /* HEADER */
    .nav-menu {
        max-height: 0; /* começa fechado */
        overflow: hidden;
        opacity: 0;
        flex-direction: column;
        position: absolute;
        top: 90px;
        left: 0;
        width: 100%;
        background: var(--gradient-header);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        padding: 0;
        transition: all 0.4s ease; /* animação suave */
    }
    
    .nav-menu.active {
        max-height: 300px; /* altura máxima quando aberto (ajuste conforme o conteúdo) */
        opacity: 1;
        padding: 10px 0;
    }
    
    .nav-menu a {
        margin: 10px 20px;
        text-align: center;
        color: white;
        text-decoration: none;
    }
    
    
    .btn-primary {
        margin: 10px auto;
        text-align: center;
    }
    .menu-toggle {
        cursor: pointer;
        width: 30px;
        height: 25px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .menu-toggle span {
        display: block;
        height: 3px;
        background: white;
        border-radius: 2px;
        transition: all 0.4s ease;
    }
    
    /* Animação do ícone quando o menu está aberto */
    .menu-toggle.open span:nth-child(1) {
        transform: translateY(11px) rotate(45deg);
    }
    
    .menu-toggle.open span:nth-child(2) {
        opacity: 0;
    }
    
    .menu-toggle.open span:nth-child(3) {
        transform: translateY(-11px) rotate(-45deg);
    }
    

    /* HERO */
    .hero {
        height: auto;
        padding-bottom: 50px;
    }
    .hero p {
        font-size: 1rem;
    }
    .hero-actions {
        flex-direction: column;
        gap: 15px;
    }

    /* DADOS QUE FUNDAMENTAM */
    .data-cards {
        flex-direction: column;
        gap: 30px;
    }
    .data-card .percentage {
        font-size: 3rem;
    }

    /* RECURSOS, NÍVEIS, METODOLOGIA */
    .resource-grid,
    .levels-grid,
    .methodology-grid {
        grid-template-columns: 1fr; /* Uma coluna no mobile */
    }
    .level-card {
        padding: 25px;
    }

    /* IMPACTO */
.impact-stats-grid {
    grid-template-columns: 1fr; /* UMA coluna em telas pequenas (padrão) */
}
.impact-cta-container {
    padding: 30px;
    /* Manter o padding, pois o objetivo era apenas mudar as colunas */
}

@media (min-width: 768px) {
    .impact-stats-grid {
        grid-template-columns: repeat(2, 1fr); /* Duas colunas em telas médias e grandes */
    }
}
    /* SOBRE */
    .about-content {
        flex-direction: column;
    }
    .about-text-column, .about-image-column {
        width: 100%;
    }
    .about-image-card {
        min-height: 300px;
    }
    .about-alpha h2 {
        text-align: center;
    }

    /* CTA FINAL */
    .final-cta-box {
        padding: 40px 20px;
    }
    .final-cta-box h2 {
        font-size: 2rem;
    }
    .cta-features-grid {
        grid-template-columns: 1fr; /* Uma coluna no mobile */
        gap: 40px;
    }

    /* FOOTER */
    .footer-content-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }
    .footer-brand p {
        max-width: none;
    }
    .social-links {
        margin-top: 15px;
    }
    .footer-links-group {
        text-align: center;
    }
    .footer-links-group ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    .footer-links-group a {
        margin-bottom: 0;
    }
    .footer-bottom-content {
        flex-direction: column;
        gap: 15px;
    }
    .legal-links {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .legal-links a, .developer-info {
        margin-left: 0;
    }
}

/* Telas Médias (Tablets) */
@media (min-width: 600px) and (max-width: 992px) {
    .resource-grid,
    .methodology-grid {
        grid-template-columns: repeat(2, 1fr); /* Duas colunas */
    }
    .impact-stats-grid {
        grid-template-columns: repeat(3, 1fr); /* Três colunas, funciona bem em tablet */
    }
}

/* ======================================= */
/* ESTILOS DA SEÇÃO SOBRE NÓS (TEAM) */
/* ======================================= */

.about-us-section {
    padding: 60px 0;
    background-color: var(--color-light-gray); /* Fundo claro para contrastar com as seções azuis/pretas */
    text-align: center;
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-dark-blue);
    margin-bottom: 5px;
}

.section-subtitle {
    color: #666666;
    margin-bottom: 40px;
    font-size: 1.1rem;
}

/* --- GRID DOS INTEGRANTES --- */
.team-grid {
    display: grid;
    /* Por padrão (mobile), 1 coluna */
    grid-template-columns: 1fr; 
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.team-member-card {
    background-color: var(--color-white);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.team-member-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Container da Imagem (para criar o círculo) */
.member-image-container {
    width: 120px;
    height: 120px;
    margin: 0 auto 15px;
    overflow: hidden;
    border-radius: 50%; /* Faz a imagem ser um círculo */
    border: 4px solid #00BFFF; /* Borda ciano/azul para destaque */
}

.member-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem preencha o círculo sem distorcer */
}

.member-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-dark-blue);
    margin-bottom: 5px;
}

.member-role {
    font-size: 0.9rem;
    color: #00BFFF;
    font-weight: 600;
    margin-bottom: 10px;
}

.member-spec {
    font-size: 0.85rem;
    color: #666666;
}


/* ======================================= */
/* MEDIA QUERIES PARA RESPONSIVIDADE (TEAM) */
/* ======================================= */

/* Telas Médias (Tablets) */
@media (min-width: 600px) {
    .team-grid {
        /* 2 COLUNAS */
        grid-template-columns: repeat(2, 1fr); 
    }
}

/* Telas Grandes (Desktop) */
@media (min-width: 992px) {
    .team-grid {
        /* 4 COLUNAS - Lado a Lado */
        grid-template-columns: repeat(4, 1fr); 
    }
}

/* LOGO DA ALPHA - Responsividade Completa (Celulares, Tablets, Desktops) */

/* 1. ESTILO BASE: Para Telas Médias (Tablets e Dispositivos Intermediários) */
.logoimg {
    /* Garante que o logo nunca seja maior que 100% do seu contêiner */
    max-width: 100%;
    
    /* Altura e Largura automáticas para preservar a proporção da imagem */
    height: auto; 
    width: auto; 
    
    /* Define a altura ideal para Tablets (a partir de 768px de largura) */
    min-height: 90px; 
    
    /* object-fit: contain garante que a imagem inteira seja visível (não cortada) */
    object-fit: contain; 
}

/* 2. MEDIA QUERY PARA TELAS PEQUENAS (Smartphones e Interfaces de Aplicativos Compactas - até 767px) */
/* Este é o tamanho para a maioria dos celulares e telas menores. */
@media (max-width: 767px) {
    .logoimg {
        /* Reduz a altura para economizar espaço vertical em celulares */
        min-height: 65px;
        max-width: 200px;
    }
}

/* 3. MEDIA QUERY PARA TELAS MUITO PEQUENAS (Celulares e Aplicativos Menores - até 480px) */
/* Um ajuste ainda menor para os menores dispositivos móveis. */
@media (max-width: 480px) {
    .logoimg {
        /* Altura mínima para garantir visibilidade e não ocupar muito espaço */
        min-height: 55px;
        max-width: 150px;
    }
}

/* 4. MEDIA QUERY PARA TELAS GRANDES (Desktops e Laptops - a partir de 1024px) */
/* Aumenta o tamanho para dar destaque em monitores grandes. */
@media (min-width: 1024px) {
    .logoimg {
        /* Altura ideal para telas grandes (mais destaque) */
        min-height: 100px;
        /* Limita a largura para que o logo não fique gigantesco em monitores ultra-largos */
        max-width: 330px;
    }
}
/*IMAGEM DA ETEC*/
.rgsimg{
    max-width: 100%; 
    height: 430px; 
  object-fit: cover;
  border-radius: 10px
}

/* ======================================= */
/* ESTILOS DA SEÇÃO MISSÃO, VISÃO E VALORES */
/* ======================================= */

.mission-values-section {
    padding: 80px 0;
    background-color: var(--color-white); 
    text-align: center;
}

/* O título e o subtítulo podem ser reutilizados de outras seções */
/* .section-title e .section-subtitle (se já definidos) */

/* --- GRID DOS VALORES --- */
.values-grid {
    display: grid;
    /* 1 coluna por padrão (mobile) */
    grid-template-columns: 1fr; 
    gap: 30px;
    max-width: 1200px;
    margin: 40px auto 0;
    padding: 0 15px;
}

.value-card {
    background-color: var(--color-white);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.336);
    text-align: left;
    transition: transform 0.3s, box-shadow 0.3s;
    min-height: 250px; /* Garante que os cards tenham altura mínima */
    border: 1px solid #eee;
}

.value-card.blue-card {
    /* Estilo de card com a identidade visual Alpha */
    border-top: 5px solid var(--color-primary-blue);
}

.value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

/* Ícone no topo */
.card-icon {
    font-size: 2.5rem;
    color: #0091ff; /* Cor ciano/azul claro para destaque */
    margin-bottom: 15px;
    display: block;
}

.card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark-blue);
    margin-bottom: 10px;
}

.card-description {
    font-size: 1rem;
    color: #555555;
    line-height: 1.6;
}

/* Estilização específica para a lista de Valores */
.values-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.values-list li {
    font-size: 1rem;
    color: #555555;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
}
.ciano-check {
    color: #00BFFF;
    margin-right: 10px;
    font-size: 1.1rem;
    margin-top: 3px;
}


/* ======================================= */
/* MEDIA QUERIES PARA RESPONSIVIDADE (MISSÃO/VISÃO) */
/* ======================================= */

/* Telas Médias e Grandes */
@media (min-width: 768px) {
    .values-grid {
        /* 3 COLUNAS LADO A LADO */
        grid-template-columns: repeat(3, 1fr); 
    }
}
/* Regras para alinhar o ícone e o título lado a lado */
.title-with-icon-wrapper {
    /* 1. Ativa o layout Flexbox */
    display: flex; 
    
    /* 2. Alinha verticalmente os itens (ícone e h3) no centro */
    align-items: center; 
    
    /* 3. Adiciona espaço entre o ícone e o título */
    gap: 15px; 
}

/* Regras opcionais para o círculo do ícone (ajuste conforme necessário) */
.icon-circle {
    /* Exemplo de dimensões */
    width: 40px; 
    height: 40px; 
    
    /* Centraliza o ícone dentro do círculo */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Transforma a div num círculo */
    border-radius: 50%; 
}

/* Regras opcionais para o título */
.title-with-icon-wrapper h3 {
    /* Garante que o texto não quebre (opcional, mas recomendado) */
    margin: 0; /* Remove margens padrão que podem afetar o alinhamento */
    line-height: normal;
}
/* Regras para alinhar o ícone e o título lado a lado */
.step-title-wrapper {
    /* 1. Ativa o layout Flexbox */
    display: flex; 
    
    /* 2. Alinha verticalmente os itens (ícone e h3) no centro */
    align-items: center; 
    
    /* 3. Adiciona um espaçamento entre o ícone e o título */
    gap: 15px; 
}

/* Regras opcionais para o círculo do ícone (mantendo a sua estrutura original) */
.step-icon-circle {
    /* Exemplo de dimensões, ajuste conforme necessário */
    width: 40px; 
    height: 40px; 
    
    /* Centraliza o ícone dentro do círculo */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Garante que o contentor seja um círculo */
    border-radius: 50%; 
}

/* Regras opcionais para o título */
.step-title-wrapper h3 {
    /* Remove margens padrão do h3 que podem desalinhar no Flexbox */
    margin: 0; 
    /* Outros estilos de fonte... */
}