/* ================================================
   RESET E CONFIGURAÇÕES GLOBAIS
   ================================================ */

/* Reset básico para remover estilos padrão do navegador */
* {
    margin: 0; /* Remove margens padrão do navegador */
    padding: 0; /* Remove preenchimentos padrão do navegador */
    box-sizing: border-box; /* Inclui padding e border no cálculo da largura/altura total */
}

/* Configurações globais do documento */
html {
    scroll-behavior: smooth; /* Scroll suave para links internos */
    font-size: 16px; /* Tamanho base da fonte (1rem = 16px) */
}

body {
    font-family: 'Inter', sans-serif; /* Fonte principal */
    line-height: 1.6; /* Altura da linha para melhor legibilidade */
    color: #333; /* Cor do texto padrão */
    background-color: #fff; /* Cor de fundo padrão */
}

/* ================================================
   CLASSES UTILITÁRIAS
   ================================================ */

/* Container responsivo para centralizar conteúdo */
.container {
    max-width: 1200px; /* Largura máxima */
    margin: 0 auto; /* Centraliza horizontalmente */
    padding: 0 20px; /* Espaçamento interno lateral */
}

/* Botões estilizados */
.btn {
    display: inline-block; /* Exibe como bloco inline para permitir dimensões personalizadas */
    /* background-color: #28a745; Cor de fundo padrão comentada */
    padding: 12px 24px; /* Preenchimento interno (vertical horizontal) */
    border: none; /* Remove borda padrão */
    /* color: white; Cor do texto comentada */
    border-radius: 5px; /* Bordas arredondadas para suavizar cantos */
    text-decoration: none; /* Remove sublinhado de links */
    font-weight: 600; /* Peso da fonte (semi-negrito) */
    text-align: center; /* Alinha o texto ao centro */
    cursor: pointer; /* Muda cursor para ponteiro ao passar o mouse */
    transition: all 0.3s ease; /* Transição suave para todas as propriedades em 0.3s */
    font-size: 1rem; /* Tamanho da fonte base (16px) */ 
}

/* Classe para botões primários */
.btn-primary {
    background-color: #007bff; /* Cor de fundo azul primária do botão */
    color: white; /* Cor do texto branca para contraste */
}

/* Efeito de hover para botões primários */
.btn-primary:hover {
    background-color: #0056b3; /* Cor mais escura no hover para feedback visual */
    transform: translateY(-2px); /* Efeito de elevação no hover (move para cima) */
}

/* Espaçamento específico para o botão do guia na seção hero */
.hero-guide-btn {
    margin-left: 1rem; /* Espaçamento à esquerda do botão do guia */
}

/* Cabeçalhos de seção */
.section-header {
    text-align: center; /* Centraliza o texto */
    margin-top: 3rem; /* Espaço acima do cabeçalho */
    margin-bottom: 3rem; /* Espaço abaixo do cabeçalho */
}

/* Títulos de seção */
.section-title {
    font-size: 2.5rem; /* Tamanho grande da fonte (40px) */
    font-weight: 700; /* Peso da fonte negrito */
    color: #2c3e50; /* Cor azul escura para destaque */
    margin-bottom: 1rem; /* Margem inferior para espaçamento */
}

/* Subtítulos de seção */
.section-subtitle {
    font-size: 1.2rem; /* Tamanho ligeiramente maior que o texto normal */
    color: #6c757d; /* Cor cinza para subtítulo */
    max-width: 600px; /* Largura máxima para melhor legibilidade */
    margin: 0 auto; /* Centraliza horizontalmente */
}

/* ================================================
   HEADER (CABEÇALHO)
   ================================================ */

.header {
    background-color: #fff; /* Fundo branco para o cabeçalho */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Sombra sutil para separar do conteúdo */
    position: sticky; /* Fixa no topo ao fazer scroll */
    top: 0; /* Posição no topo da tela */
    z-index: 1000; /* Fica acima de outros elementos sobrepostos */
}

.header .container {
    display: flex; /* Layout flexível */
    justify-content: space-between; /* Espaça logo e menu nas extremidades */
    align-items: center; /* Alinha verticalmente ao centro */
    padding: 1rem 20px; /* Preenchimento interno (vertical horizontal) */
}

/* Logo */
.logo h1 {
    color: #007bff; /* Cor azul para a marca */
    font-size: 1.8rem; /* Tamanho da fonte do logo */
    font-weight: 700; /* Peso negrito para destaque */
}

/* Menu de navegação */
.nav-list {
    display: flex;
    list-style: none; /* Remove bullets da lista */
    gap: 2rem; /* Espaçamento entre itens */
}

.nav-link {
    text-decoration: none; /* Remove sublinhado padrão dos links */
    color: #333; /* Cor escura padrão para os links */
    font-weight: 500; /* Peso médio da fonte */
    transition: color 0.3s ease; /* Transição suave da cor */
    position: relative; /* Posicionamento relativo para pseudo-elemento */
}

.nav-link:hover {
    color: #007bff; /* Muda para azul no hover */
}

/* Efeito de sublinhado no hover */
.nav-link::after {
    content: ''; /* Conteúdo vazio para criar o sublinhado */
    position: absolute; /* Posicionamento absoluto em relação ao link */
    bottom: -5px; /* Posiciona abaixo do texto */
    left: 0; /* Alinha à esquerda */
    width: 0; /* Largura inicial zero */
    height: 2px; /* Altura do sublinhado */
    background-color: #007bff; /* Cor azul do sublinhado */
    transition: width 0.3s ease; /* Transição suave da largura */
}

.nav-link:hover::after {
    width: 100%; /* Expande para largura total no hover */
}

/* Menu hambúrguer (oculto por padrão) */
.hamburger {
    display: none; /* Oculto por padrão (só aparece em mobile) */
    flex-direction: column; /* Empilha as barras verticalmente */
    cursor: pointer; /* Cursor de ponteiro */
    gap: 4px; /* Espaçamento entre as barras */
}

.hamburger span {
    width: 25px; /* Largura das barras */
    height: 3px; /* Altura das barras */
    background-color: #333; /* Cor escura das barras */
    transition: all 0.3s ease; /* Transição para animação */
}

/* ================================================
   SEÇÃO HERO (BANNER PRINCIPAL)
   ================================================ */

.hero {
    height: 100vh; /* Altura total da tela (viewport height) */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Gradiente diagonal */
    display: flex; /* Layout flexível */
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    text-align: center; /* Alinha texto ao centro */
    color: white; /* Texto branco para contraste */
    position: relative; /* Posicionamento relativo para elementos filhos */
    overflow: hidden; /* Oculta conteúdo que sair dos limites */
}

.hero-content {
    z-index: 2; /* Fica acima do background */
    max-width: 800px; /* Largura máxima do conteúdo */
    padding: 0 20px; /* Preenchimento lateral */
}

.hero-title {
    font-size: 3.5rem; /* Tamanho grande para título principal */
    font-weight: 700; /* Peso negrito */
    margin-bottom: 1rem; /* Margem inferior */
    animation: fadeInUp 1s ease-out; /* Animação de entrada suave */
}

.hero-subtitle {
    font-size: 1.3rem; /* Tamanho médio para subtítulo */
    margin-bottom: 2rem; /* Margem inferior maior */
    opacity: 0.9; /* Levemente transparente */
    animation: fadeInUp 1s ease-out 0.3s both; /* Animação com delay de 0.3s */
}

.hero .btn {
    animation: fadeInUp 1s ease-out 0.6s both; /* Animação do botão com delay de 0.6s */
}

/* Background animado (opcional) */
.hero-background {
    position: absolute; /* Posicionamento absoluto */
    top: 0; /* Alinhado ao topo */
    left: 0; /* Alinhado à esquerda */
    width: 100%; /* Largura total */
    height: 100%; /* Altura total */
    background: url('https://via.placeholder.com/1920x1080') center/cover; /* Imagem de fundo */
    opacity: 0.3; /* Transparência para não ofuscar o texto */
    z-index: 1; /* Fica atrás do conteúdo */
}

/* ================================================
   SEÇÃO SOBRE
   ================================================ */

.about {
    padding: 5rem 0; /* Preenchimento vertical generoso */
    background-color: #f8f9fa; /* Fundo cinza claro para contraste */
}

.about-content {
    display: grid; /* Layout em grade */
    grid-template-columns: 1fr 1fr; /* Duas colunas iguais (50% cada) */
    gap: 3rem; /* Espaçamento entre as colunas */
    align-items: center; /* Alinha itens verticalmente ao centro */
}

.about-text h3 {
    color: #2c3e50; /* Cor escura para títulos */
    font-size: 1.5rem; /* Tamanho médio da fonte */
    margin-bottom: 1rem; /* Margem inferior */
    margin-top: 2rem; /* Margem superior para espaçamento */
}

.about-text h3:first-child {
    margin-top: 0; /* Remove margem superior do primeiro título */
}

.about-text p {
    color: #6c757d; /* Cor cinza para texto */
    line-height: 1.7; /* Altura da linha para melhor legibilidade */
}

.about-image img {
    width: 100%; /* Largura total do container */
    height: auto; /* Altura automática para manter proporção */
    border-radius: 10px; /* Bordas arredondadas */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Sombra sutil para profundidade */
}

/* ================================================
   SEÇÃO SERVIÇOS
   ================================================ */

.services {
    padding: 5rem 0; /* Preenchimento vertical */
    background-color: #fff; /* Fundo branco */
}

.services-grid {
    display: grid; /* Layout em grade */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Grid responsivo: mín 300px */
    gap: 2rem; /* Espaçamento entre cards */
}

.service-card {
    background: white; /* Fundo branco do card */
    padding: 2rem; /* Preenchimento interno generoso */
    border-radius: 10px; /* Bordas arredondadas */
    text-align: center; /* Centraliza o conteúdo */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); /* Sombra sutil */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transições suaves */
}

.service-card:hover {
    transform: translateY(-10px); /* Eleva o card 10px no hover */
    box-shadow: 0 15px 40px rgba(0,0,0,0.15); /* Sombra mais pronunciada no hover */
}

.service-icon {
    width: 80px; /* Largura do ícone */
    height: 80px; /* Altura do ícone */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Gradiente de fundo */
    border-radius: 50%; /* Formato circular */
    display: flex; /* Layout flexível */
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    margin: 0 auto 1.5rem; /* Centraliza e adiciona margem inferior */
    font-size: 2rem; /* Tamanho do ícone */
    color: white; /* Cor branca do ícone */
}

.service-title {
    font-size: 1.3rem; /* Tamanho da fonte do título */
    color: #2c3e50; /* Cor escura */
    margin-bottom: 1rem; /* Margem inferior */
}

.service-description {
    color: #6c757d; /* Cor cinza para descrição */
    line-height: 1.6; /* Altura da linha para legibilidade */
}

/* ================================================
   SEÇÃO CONTATO
   ================================================ */

.contact {
    padding: 5rem 0; /* Preenchimento vertical */
    background-color: #f8f9fa; /* Fundo cinza claro */
}

.contact-content {
    display: grid; /* Layout em grade */
    grid-template-columns: 1fr 1fr; /* Duas colunas iguais */
    gap: 3rem; /* Espaçamento entre colunas */
}

/* Formulário de contato */
.contact-form {
    background: white; /* Fundo branco do formulário */
    padding: 2rem; /* Preenchimento interno */
    border-radius: 10px; /* Bordas arredondadas */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); /* Sombra sutil */
}

.form-group {
    margin-bottom: 1.5rem; /* Margem inferior entre campos */
}

.form-group label {
    display: block; /* Exibe em bloco (ocupa linha inteira) */
    margin-bottom: 0.5rem; /* Margem inferior pequena */
    font-weight: 600; /* Peso semi-negrito */
    color: #2c3e50; /* Cor escura */
}

.form-group input,
.form-group textarea {
    width: 100%; /* Largura total */
    padding: 12px; /* Preenchimento interno */
    border: 2px solid #e9ecef; /* Borda cinza clara */
    border-radius: 5px; /* Bordas arredondadas */
    font-size: 1rem; /* Tamanho da fonte */
    transition: border-color 0.3s ease; /* Transição suave da cor da borda */
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none; /* Remove outline padrão */
    border-color: #007bff; /* Muda cor da borda para azul no foco */
}

/* Informações de contato */
.contact-info {
    display: flex; /* Layout flexível */
    flex-direction: column; /* Direção vertical */
    gap: 2rem; /* Espaçamento entre itens */
}

.contact-item {
    display: flex; /* Layout flexível */
    align-items: flex-start; /* Alinha ao topo */
    gap: 1rem; /* Espaçamento entre ícone e texto */
}

.contact-item i {
    width: 50px; /* Largura do ícone */
    height: 50px; /* Altura do ícone */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Gradiente de fundo */
    border-radius: 50%; /* Formato circular */
    display: flex; /* Layout flexível */
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    color: white; /* Cor branca do ícone */
    font-size: 1.2rem; /* Tamanho do ícone */
    flex-shrink: 0; /* Não diminui o tamanho quando houver pouco espaço */
}

.contact-item h4 {
    color: #2c3e50; /* Cor escura para título */
    margin-bottom: 0.5rem; /* Margem inferior pequena */
}

.contact-item p {
    color: #6c757d; /* Cor cinza para texto */
    margin: 0; /* Remove margem padrão */
}

/* ================================================
   FOOTER (RODAPÉ)
   ================================================ */

.footer {
    background-color: #2c3e50; /* Fundo escuro */
    color: white; /* Texto branco */
    padding: 3rem 0 1rem; /* Preenchimento: 3rem topo, 1rem inferior */
}

.footer-content {
    display: grid; /* Layout em grade */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Colunas responsivas */
    gap: 2rem; /* Espaçamento entre colunas */
    margin-bottom: 2rem; /* Margem inferior */
}

.footer-section h3,
.footer-section h4 {
    margin-bottom: 1rem; /* Margem inferior para títulos */
    color: #ecf0f1; /* Cor clara para títulos */
}

.footer-section p,
.footer-section ul {
    color: #bdc3c7; /* Cor cinza clara para texto */
    line-height: 1.6; /* Altura da linha para legibilidade */
}

.footer-section ul {
    list-style: none; /* Remove marcadores da lista */
}

.footer-section ul li {
    margin-bottom: 0.5rem; /* Margem inferior entre itens */
}

.footer-section ul li a {
    color: #bdc3c7; /* Cor cinza clara para links */
    text-decoration: none; /* Remove sublinhado */
    transition: color 0.3s ease; /* Transição suave da cor */
}

.footer-section ul li a:hover {
    color: #007bff; /* Muda para azul no hover */
}

/* Redes sociais */
.social-links {
    display: flex; /* Layout flexível */
    gap: 1rem; /* Espaçamento entre ícones */
    margin-top: 1rem; /* Margem superior */
}

.social-link {
    width: 40px; /* Largura do ícone */
    height: 40px; /* Altura do ícone */
    background-color: #34495e; /* Fundo cinza escuro */
    border-radius: 50%; /* Formato circular */
    display: flex; /* Layout flexível */
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    color: white; /* Cor branca do ícone */
    text-decoration: none; /* Remove sublinhado */
    transition: background-color 0.3s ease; /* Transição suave da cor de fundo */
}

.social-link:hover {
    background-color: #007bff; /* Muda para azul no hover */
}

/* Copyright */
.footer-bottom {
    border-top: 1px solid #34495e; /* Borda superior cinza */
    padding-top: 1rem; /* Preenchimento superior */
    text-align: center; /* Centraliza o texto */
    color: #bdc3c7; /* Cor cinza clara */
}

/* ================================================
   ANIMAÇÕES
   ================================================ */

@keyframes fadeInUp {
    from {
        opacity: 0; /* Inicia transparente */
        transform: translateY(30px); /* Inicia 30px abaixo */
    }
    to {
        opacity: 1; /* Termina opaco */
        transform: translateY(0); /* Termina na posição original */
    }
}

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

/* Tablets (768px e abaixo) */
@media (max-width: 768px) {
    /* Header responsivo */
    .nav {
        display: none; /* Oculta navegação normal */
    }
    
    .hamburger {
        display: flex; /* Mostra menu hambúrguer */
    }
    
    .nav-list {
        position: fixed; /* Posicionamento fixo */
        top: 70px; /* Abaixo do header */
        left: -100%; /* Inicia fora da tela (esquerda) */
        width: 100%; /* Largura total */
        height: calc(100vh - 70px); /* Altura da tela menos header */
        background-color: white; /* Fundo branco */
        flex-direction: column; /* Direção vertical */
        justify-content: flex-start; /* Alinha ao topo */
        align-items: center; /* Centraliza horizontalmente */
        padding-top: 2rem; /* Preenchimento superior */
        transition: left 0.3s ease; /* Transição suave de entrada */
        box-shadow: 0 5px 20px rgba(0,0,0,0.1); /* Sombra */
    }
    
    .nav-list.active {
        left: 0; /* Move para posição visível quando ativo */
    }
    
    .nav-item {
        margin: 1rem 0; /* Margem vertical entre itens */
    }
    
    /* Hero responsivo */
    .hero-title {
        font-size: 2.5rem; /* Reduz tamanho da fonte */
    }
    
    .hero-subtitle {
        font-size: 1.1rem; /* Reduz tamanho da fonte */
    }
    
    /* Seções responsivas */
    .section-title {
        font-size: 2rem; /* Reduz tamanho da fonte */
    }
    
    .about-content,
    .contact-content {
        grid-template-columns: 1fr; /* Uma coluna em telas pequenas */
        gap: 2rem; /* Reduz espaçamento */
    }
    
    .services-grid {
        grid-template-columns: 1fr; /* Uma coluna para serviços */
    }
    
    .courses-grid {
        grid-template-columns: 1fr; /* Uma coluna para cursos */
        gap: 1.5rem; /* Reduz espaçamento */
    }
    
    .hero-buttons {
        flex-direction: column; /* Empilha botões verticalmente */
        align-items: center; /* Centraliza botões */
    }
    
    .hero-buttons .btn {
        width: 100%; /* Botões ocupam largura total */
        max-width: 300px; /* Largura máxima */
    }
    
    .path-steps {
        flex-direction: column; /* Empilha passos verticalmente */
    }
    
    .step-arrow {
        transform: rotate(90deg); /* Rotaciona seta para baixo */
        margin: 1rem 0; /* Margem vertical */
    }
    
    .stats {
        justify-content: center; /* Centraliza estatísticas */
    }
    
    .footer-content {
        grid-template-columns: 1fr; /* Uma coluna no footer */
        text-align: center; /* Centraliza texto */
    }
}

/* Smartphones (480px e abaixo) */
@media (max-width: 480px) {
    .container {
        padding: 0 15px; /* Reduz preenchimento lateral */
    }
    
    .hero-title {
        font-size: 2rem; /* Reduz ainda mais o título */
    }
    
    .hero-subtitle {
        font-size: 1rem; /* Reduz subtítulo */
    }
    
    .section-title {
        font-size: 1.8rem; /* Reduz título das seções */
    }
    
    .service-card,
    .contact-form,
    .course-card {
        padding: 1.5rem; /* Reduz preenchimento interno */
    }
    
    .course-icon {
        font-size: 2.5rem; /* Reduz ícone do curso */
    }
    
    .course-stats {
        justify-content: center; /* Centraliza estatísticas */
    }
    
    .learning-path {
        padding: 1.5rem; /* Reduz preenchimento */
    }
    
    .step-number {
        width: 40px; /* Reduz tamanho do número */
        height: 40px; /* Reduz altura */
        font-size: 1rem; /* Reduz fonte */
    }
    
    .contact-item {
        text-align: center; /* Centraliza itens de contato */
        flex-direction: column; /* Empilha verticalmente */
        align-items: center; /* Centraliza horizontalmente */
    }
}

/* ================================================
   ESTADOS DE HOVER E FOCO
   ================================================ */

/* Melhora a acessibilidade com estados de foco visíveis */
button:focus,
input:focus,
textarea:focus,
a:focus {
    outline: 2px solid #007bff; /* Contorno azul para indicar foco */
    outline-offset: 2px; /* Espaçamento do contorno */
}

/* Estados de hover para melhor UX */
.service-card:hover .service-icon {
    transform: scale(1.1); /* Aumenta o ícone em 10% no hover */
    transition: transform 0.3s ease; /* Transição suave da transformação */
}

/* ================================================
   SEÇÃO CURSOS
   ================================================ */

/* Container dos cursos */
.courses {
    padding: 4rem 0; /* Espaçamento vertical da seção */
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); /* Gradiente de fundo */
}

/* Grid de cursos */
.courses-grid {
    display: grid; /* Layout em grade */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Colunas responsivas */
    gap: 2rem; /* Espaçamento entre cards */
    margin-bottom: 3rem; /* Margem inferior */
}

/* Card de curso */
.course-card {
    background: white; /* Fundo branco */
    border-radius: 15px; /* Bordas bem arredondadas */
    padding: 2rem; /* Preenchimento interno */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Sombra elevada */
    transition: all 0.3s ease; /* Transição suave */
    position: relative; /* Para posicionamento de badges */
    border: 1px solid transparent; /* Borda transparente inicial */
}

/* Card em destaque */
.course-card.featured {
    border: 2px solid #007bff; /* Borda azul para destaque */
    transform: scale(1.02); /* Ligeiramente maior */
}

/* Hover do card de curso */
.course-card:hover {
    transform: translateY(-10px) scale(1.02); /* Efeito de elevação e zoom */
    box-shadow: 0 20px 40px rgba(0,0,0,0.15); /* Sombra mais intensa */
}

/* Header do curso */
.course-header {
    display: flex; /* Layout flexível */
    justify-content: space-between; /* Espaça ícone e badge */
    align-items: center; /* Alinha verticalmente */
    margin-bottom: 1.5rem; /* Margem inferior */
}

/* Ícone do curso */
.course-icon {
    font-size: 3rem; /* Tamanho grande */
    background: linear-gradient(135deg, #007bff, #0056b3); /* Gradiente azul */
    -webkit-background-clip: text; /* Corta o fundo pelo texto */
    -webkit-text-fill-color: transparent; /* Texto transparente para mostrar gradiente */
    background-clip: text; /* Suporte para outros navegadores */
}

/* Badge do curso */
.course-badge {
    background: #28a745; /* Fundo verde */
    color: white; /* Texto branco */
    padding: 0.3rem 0.8rem; /* Preenchimento */
    border-radius: 20px; /* Bordas muito arredondadas */
    font-size: 0.8rem; /* Fonte pequena */
    font-weight: 600; /* Semi-negrito */
    text-transform: uppercase; /* Maiúsculas */
    letter-spacing: 0.5px; /* Espaçamento entre letras */
}

/* Badge novo */
.course-badge.new {
    background: #dc3545; /* Vermelho para "novo" */
    animation: pulse 2s infinite; /* Animação de pulso */
}

/* Animação de pulso */
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

/* Título do curso */
.course-title {
    font-size: 1.5rem; /* Tamanho do título */
    font-weight: 700; /* Negrito */
    color: #2c3e50; /* Cor escura */
    margin-bottom: 1rem; /* Margem inferior */
}

/* Descrição do curso */
.course-description {
    color: #6c757d; /* Cor cinza */
    line-height: 1.6; /* Altura da linha */
    margin-bottom: 1.5rem; /* Margem inferior */
}

/* Estatísticas do curso */
.course-stats {
    display: flex; /* Layout flexível */
    gap: 1rem; /* Espaçamento entre itens */
    margin-bottom: 1.5rem; /* Margem inferior */
    flex-wrap: wrap; /* Quebra linha se necessário */
}

/* Item de estatística */
.course-stats .stat {
    display: flex; /* Layout flexível */
    align-items: center; /* Alinha verticalmente */
    gap: 0.5rem; /* Espaçamento entre ícone e texto */
    color: #6c757d; /* Cor cinza */
    font-size: 0.9rem; /* Fonte menor */
}

/* Ícones das estatísticas */
.course-stats .stat i {
    color: #007bff; /* Cor azul */
    font-size: 1rem; /* Tamanho do ícone */
}

/* Tópicos do curso */
.course-topics {
    display: flex; /* Layout flexível */
    flex-wrap: wrap; /* Quebra linha se necessário */
    gap: 0.5rem; /* Espaçamento entre tópicos */
    margin-bottom: 2rem; /* Margem inferior */
}

/* Tópico individual */
.topic {
    background: #e9ecef; /* Fundo cinza claro */
    color: #495057; /* Texto escuro */
    padding: 0.3rem 0.8rem; /* Preenchimento */
    border-radius: 15px; /* Bordas arredondadas */
    font-size: 0.8rem; /* Fonte pequena */
    font-weight: 500; /* Peso médio */
}

/* Botão do curso */
.course-btn {
    width: 100%; /* Largura total */
    text-align: center; /* Texto centralizado */
    padding: 0.8rem 1.5rem; /* Preenchimento maior */
    font-weight: 600; /* Semi-negrito */
    border-radius: 10px; /* Bordas arredondadas */
}

/* Botão secundário */
.btn-secondary {
    background: #6c757d; /* Fundo cinza */
    color: white; /* Texto branco */
}

.btn-secondary:hover {
    background: #5a6268; /* Cinza mais escuro no hover */
    transform: translateY(-2px); /* Efeito de elevação */
}

/* Botão outline */
.btn-outline {
    background: transparent; /* Fundo transparente */
    color: #007bff; /* Texto azul */
    border: 2px solid #007bff; /* Borda azul */
}

.btn-outline:hover {
    background: #007bff; /* Fundo azul no hover */
    color: white; /* Texto branco no hover */
    transform: translateY(-2px); /* Efeito de elevação */
}

/* Botões do hero */
.hero-buttons {
    display: flex; /* Layout flexível */
    gap: 1rem; /* Espaçamento entre botões */
    justify-content: center; /* Centraliza os botões */
    flex-wrap: wrap; /* Quebra linha em telas pequenas */
    margin-top: 2rem; /* Margem superior */
}

/* Trilha de aprendizado */
.learning-path {
    background: white; /* Fundo branco */
    border-radius: 15px; /* Bordas arredondadas */
    padding: 2rem; /* Preenchimento */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); /* Sombra */
    text-align: center; /* Texto centralizado */
}

.learning-path h3 {
    color: #2c3e50; /* Cor escura */
    margin-bottom: 2rem; /* Margem inferior */
    font-size: 1.5rem; /* Tamanho da fonte */
}

/* Passos da trilha */
.path-steps {
    display: flex; /* Layout flexível */
    justify-content: center; /* Centraliza os passos */
    align-items: center; /* Alinha verticalmente */
    gap: 1rem; /* Espaçamento entre elementos */
    flex-wrap: wrap; /* Quebra linha se necessário */
}

/* Passo individual */
.step {
    display: flex; /* Layout flexível */
    flex-direction: column; /* Direção vertical */
    align-items: center; /* Centraliza conteúdo */
    text-align: center; /* Texto centralizado */
    max-width: 200px; /* Largura máxima */
}

/* Número do passo */
.step-number {
    background: #007bff; /* Fundo azul */
    color: white; /* Texto branco */
    width: 50px; /* Largura fixa */
    height: 50px; /* Altura fixa */
    border-radius: 50%; /* Círculo perfeito */
    display: flex; /* Layout flexível */
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    font-weight: 700; /* Negrito */
    font-size: 1.2rem; /* Fonte maior */
    margin-bottom: 1rem; /* Margem inferior */
}

/* Conteúdo do passo */
.step-content h4 {
    color: #2c3e50; /* Cor escura */
    margin-bottom: 0.5rem; /* Margem inferior */
}

.step-content p {
    color: #6c757d; /* Cor cinza */
    font-size: 0.9rem; /* Fonte menor */
}

/* Seta entre passos */
.step-arrow {
    font-size: 1.5rem; /* Tamanho da seta */
    color: #007bff; /* Cor azul */
    font-weight: bold; /* Negrito */
    margin: 0 1rem; /* Margem lateral */
}

/* Estatísticas na seção sobre */
.stats {
    display: flex; /* Layout flexível */
    gap: 2rem; /* Espaçamento entre estatísticas */
    margin-top: 2rem; /* Margem superior */
    justify-content: center; /* Centraliza */
    flex-wrap: wrap; /* Quebra linha se necessário */
}

/* Item de estatística */
.stat-item {
    text-align: center; /* Texto centralizado */
    padding: 1rem; /* Preenchimento */
    background: #f8f9fa; /* Fundo cinza claro */
    border-radius: 10px; /* Bordas arredondadas */
    min-width: 120px; /* Largura mínima */
}

/* Número da estatística */
.stat-number {
    display: block; /* Exibe como bloco */
    font-size: 2rem; /* Fonte grande */
    font-weight: 700; /* Negrito */
    color: #007bff; /* Cor azul */
    margin-bottom: 0.5rem; /* Margem inferior */
}

/* Label da estatística */
.stat-label {
    display: block; /* Exibe como bloco */
    color: #6c757d; /* Cor cinza */
    font-size: 0.9rem; /* Fonte menor */
    font-weight: 500; /* Peso médio */
}

/* ================================================
   PRINT STYLES (para impressão)
   ================================================ */

@media print {
    .header,
    .footer,
    .btn {
        display: none; /* Oculta elementos não necessários na impressão */
    }
    
    body {
        font-size: 12pt; /* Tamanho de fonte otimizado para impressão */
        line-height: 1.4; /* Altura da linha mais compacta */
    }
    
    .section-title {
        font-size: 18pt; /* Tamanho de título para impressão */
    }
}