/* ========================================================================== */
/* Variáveis e Reset                                                          */
/* ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');


:root {
    --primary-color: #000000;     /* Cor principal (preto) */
    --primary-dark: #1a1a1a;      /* Preto mais escuro para hover */
    --text-color: #1e293b;        /* Cor do texto principal */
    --text-light: #64748b;        /* Texto secundário (parágrafos) */
    --bg-color: #ffffff;          /* Fundo principal */
    --bg-light: #f8fafc;          /* Fundo claro para cartões */
    --border-color: #e2e8f0;      /* Cor de borda leve */
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Sombra */
    --transition: all 0.3s ease;  /* Transição suave padrão */
}

* {
    margin: 0;                   /* Remove margens padrão */
    padding: 0;                  /* Remove padding padrão */
    box-sizing: border-box;      /* Inclui borda e padding no cálculo do tamanho */
}

body {
    /*font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Fonte base */
    font-family: "Poppins";
    color: var(--text-color);    /* Cor do texto */
    background-color: var(--bg-color); /* Cor de fundo */
    line-height: 1.6;            /* Altura da linha para legibilidade */
}

.container {
    max-width: 1400px;           /* Largura máxima */
    margin: 0 auto;              /* Centraliza na tela */
    padding: 0 20px;             /* Espaço lateral interno */
}

/* ========================================================================== */
/* Tipografia                                                                 */
/* ========================================================================== */

h1, h2, h3, h4 {
    font-weight: 700;            /* Títulos mais fortes */
    line-height: 1.2;            /* Linhas mais compactas */
    margin-bottom: 1rem;         /* Espaço inferior */
}

h1 {
    font-size: 3rem;             /* Título principal grande */
}

h2 {
    font-size: 2rem;             /* Subtítulo */
    margin-bottom: 2rem;         /* Espaço extra abaixo */
    position: relative;          /* Necessário para ::after */
    display: inline-block;       /* Ajusta largura ao texto */
}

h2::after {
    content: '';                 /* Linha decorativa */
    position: absolute;          
    bottom: -8px;                /* Posição abaixo do texto */
    left: 0;
    width: 50%;                  /* Barra ocupa metade do texto */
    height: 4px;                 /* Espessura da barra */
    background-color: var(--primary-color); /* Preto primário */
    border-radius: 2px;          /* Bordas arredondadas */
}

p {
    margin-bottom: 1rem;         /* Espaço inferior */
    color: var(--text-light);    /* Texto mais claro */
}

/* ========================================================================== */
/* Links                                                                      */
/* ========================================================================== */

a {
    color: var(--primary-color); /* Cor preta */
    text-decoration: none;       /* Remove sublinhado */
    transition: var(--transition); /* Transição suave */
}

a:hover {
    color: var(--primary-dark);  /* Preto escuro no hover */
}

/* ========================================================================== */
/* Botões                                                                     */
/* ========================================================================== */

.btn {
    display: inline-block;       /* Mantém formato inline com altura */
    padding: 0.75rem 1.5rem;     /* Espaçamento interno */
    background-color: var(--primary-color); /* Fundo preto */
    color: white;                /* Texto branco */
    border-radius: 0.375rem;     /* Cantos arredondados */
    font-weight: 500;            /* Peso médio da fonte */
    transition: var(--transition); /* Transição suave */
    border: 2px solid var(--primary-color); /* Borda preta */
}

.btn:hover {
    background-color: var(--primary-dark); /* Fundo preto escuro */
    border-color: var(--primary-dark);     /* Borda preta escura */
    transform: translateY(-2px);           /* Elevação sutil */
    color: white;
    box-shadow: var(--shadow);             /* Sombra */
}

.btn-outline {
    background-color: transparent; /* Fundo transparente */
    color: var(--primary-color);   /* Texto preto */
}

.btn-outline:hover {
    background-color: var(--primary-color); /* Preto no hover */
    color: white;                /* Texto branco */
}

/* ========================================================================== */
/* Navegação                                                                  */
/* ========================================================================== */

.header {
    padding: 1.7rem 0;      /* Espaçamento interno */
    position: relative;          /* Base para elementos posicionados */
    top: 0;                      /* Mantém no topo */
    background-color: var(--bg-color); /* Fundo branco */
    z-index: 100;                /* Fica acima de outros */ 
}

.nav {
    display: flex;               /* Layout flexível */
    justify-content: space-between ; /* Espaço entre marca e links */
    align-items: center;         /* Centraliza verticalmente */
}

.nav-brand a {
    font-size: 1.7rem;           /* Logo maior */
    font-weight: 700;            /* Forte */
    color: var(--text-color);    /* Cor do texto */
}

.nav-links {
    display: flex;               /* Links em linha */
    list-style: none;            /* Remove marcadores */
    gap: 2.5rem;                 /* Espaço entre os links */
}

.nav-links a {
    color: var(--text-color);    /* Texto padrão */
    font-weight: 500;            /* Peso médio */
    position: relative;          /* Para ::after */
}

.nav-links a::after {
    content: '';                 /* Barra inferior animada */
    position: relative;          
    bottom: -4px;                /* Abaixo do texto */
    left: 0;
    width: 0;                    /* Começa invisível */
    height: 2px;                 /* Espessura */
    background-color: var(--primary-color); /* Preto */
    transition: var(--transition); /* Cresce suave */
}

.nav-links a:hover::after {
    width: 100%;                 /* Expande no hover */
}

.menu-toggle {
    display: none;               /* Escondido por padrão (mobile) */
    background: none;            /* Sem fundo */
    border: none;                /* Sem borda */
    font-size: 1.5rem;           /* Ícone grande */
    cursor: pointer;             /* Cursor de mão */
    color: var(--text-color);    /* Cor do texto */
}

/* ========================================================================== */
/* Hero Section                                                               */
/* ========================================================================== */

.hero {
    display: flex;               /* Layout em duas colunas */
    flex-direction: row-reverse;
    align-items: center;         /* Centraliza verticalmente */
    min-height: 80vh;            /* Ocupa 80% da altura da tela */
    padding: 2rem 2rem;             /* Espaço interno */
}

.hero-content {
    flex: 1;                     /* Ocupa metade */
    padding-right: 2em;         /* Espaço da imagem */
}

.hero-subtitle {
    font-size: 1.25rem;          /* Texto maior que p */
    margin-bottom: 2rem;         /* Espaço inferior */
    max-width: 600px;            /* Limita largura */
}

.hero-links {
    display: flex;               /* Botões lado a lado */
    gap: 1rem;                   /* Espaço entre eles */
}

.hero-image {
    width: 600px;                           /* Largura fixa do container */
    height: 600px;                          /* Altura fixa do container */
    flex: 1;                                /* Outra metade */
    display: flex;                          /* Flex para centralizar */
    justify-content: center;                /* Centraliza imagem */
    align-items: center;                    /* Alinha verticalmente */
}

.hero-image img {
    width: 80%;                            /* A imagem ocupa o container */
    height: auto;                           /* Mantém proporção */
    object-fit: contain;                    /* Garante que não distorça */
    border-radius: 50%;                     /* Torna a imagem redonda */
}


/* ========================================================================== */
/* Seções                                                                     */
/* ========================================================================== */

.section {
    padding: 5rem 0;             /* Espaço vertical */
}

.section:not(:last-child) {
    border-bottom: 1px solid var(--border-color); /* Linha divisória */
}

/* ========================================================================== */
/* Sobre                                                                      */
/* ========================================================================== */

.about-content {
    display: flex;               /* Layout em colunas */
    gap: 3rem;                   /* Espaço entre colunas */
}

.about-text {
    flex: 2;                     /* Ocupa mais espaço */
}

.skills {
    margin-top: 2rem;            /* Espaço superior */
}

.skills-list {
    display: flex;               /* Itens lado a lado */
    flex-wrap: wrap;             /* Quebra de linha */
    gap: 0.75rem;                /* Espaço entre eles */
    list-style: none;            /* Remove marcadores */
    margin-top: 1rem;            /* Espaço superior */
}

.skills-list li {
    background-color: var(--bg-light); /* Fundo claro */
    padding: 0.5rem 1rem;              /* Espaço interno */
    border-radius: 9999px;             /* Forma de cápsula */
    font-size: 0.875rem;               /* Texto menor */
    font-weight: 500;                  /* Peso médio */
}

/* ========================================================================== */
/* Experiência (Timeline)                                                     */
/* ========================================================================== */

.timeline {
    position: relative;          /* Base para linha central */
    max-width: 800px;            /* Largura máxima */
    margin: 0 auto;              /* Centraliza */
}

.timeline::before {
    content: '';                 /* Linha vertical */
    position: absolute;          
    top: 0;                      
    left: 50px;                  /* Distância da borda */
    height: 100%;                /* Toda a altura */
    width: 2px;                  /* Espessura */
    background-color: var(--border-color); /* Cinza claro */
}

.timeline-item {
    position: relative;          
    padding-left: 100px;         /* Espaço para a linha e data */
    margin-bottom: 3rem;         /* Espaço inferior */
}

.timeline-date {
    position: absolute;          
    left: 0;                     /* Encosta na esquerda */
    top: 0;
    width: 80px;                 /* Largura fixa */
    padding: 0.25rem 0;          /* Espaço interno */
    text-align: right;           /* Alinha à direita */
    font-weight: 500;            /* Médio */
    color: var(--text-light);    /* Cinza */
}

.timeline-content {
    background-color: var(--bg-light); /* Fundo claro */
    padding: 1.5rem;                   /* Espaço interno */
    border-radius: 0.5rem;             /* Bordas arredondadas */
    box-shadow: var(--shadow);         /* Sombra */
}

.timeline-content h3 {
    margin-bottom: 0.5rem;      /* Espaço inferior */
}

.company {
    color: var(--primary-color); /* Preto */
    font-weight: 500;            /* Médio */
    margin-bottom: 1rem;         /* Espaço inferior */
    display: inline-block;       /* Permite margens */
}

.timeline-content ul {
    padding-left: 1.25rem;       /* Recuo para marcadores */
}

.timeline-content li {
    margin-bottom: 0.5rem;       /* Espaço entre itens */
}

/* Projetos */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.project-card {
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    transition: var(--transition);
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.project-image {
    height: 200px;
    background-color: var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-content{
    padding: 1.5rem;
}

.project-content h3 {
    margin-bottom: 0.75rem;
}

.project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.project-tech span {
    background-color: var(--bg-light);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.project-link {
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    gap: 0.5rem;
}

.mais-projetos {
    padding: 3rem;
    display: flex;
    justify-content: center;
}

/* Contato */
.contact-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.contact-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

.contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    transition: var(--transition);
}

.contact-link:hover {
    background-color: var(--bg-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

/* Rodapé */
.footer {
    text-align: center;
    padding: 2rem 0;
    color: var(--text-light);
    font-size: 0.875rem;
}

/* Responsivo */
@media (max-width: 768px) {
    .nav-links {
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        background-color: var(--bg-color);
        flex-direction: column;
        align-items: center;
        padding: 2rem 0;
        gap: 1.5rem;
        box-shadow: var(--shadow);
        transform: translateY(-150%);
        transition: var(--transition);
        z-index: 99;
    }

    .nav-links.active {
        transform: translateY(0);
    }

    .menu-toggle {
        display: block;
    }

    .hero-image {
        flex: 1;                                /* Outra metade */
        justify-content: center;                /* Centraliza imagem */
        align-items:start;                    /* Alinha verticalmente */
    }

    .hero {
        flex-direction: column;
        text-align: center;
        padding: 2rem 0;
    }

    .hero-content {
        padding-right: 0;
        margin-bottom: 2rem;
    }

    .hero-links {
        justify-content: center;
    }

    
    .hero-image img {
        width: 50%;                            /* A imagem ocupa o container */
        height: auto;                           /* Mantém proporção */
        object-fit: contain;                    /* Garante que não distorça */
        border-radius: 50%;                     /* Torna a imagem redonda */
    }
    .about-content {
        flex-direction: column;
    }

    .timeline::before {
        left: 30px;
    }

    .timeline-item {
        padding-left: 70px;
    }/* Projects Page Extensions */

.projects-header {
    text-align: center;
    margin-bottom: 3rem;
}

.projects-header h1 {
    font-size: 2.5rem;
}

.projects-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 2rem 0;
}

.filter-btn {
    padding: 0.5rem 1rem;
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.875rem;
}

.filter-btn:hover, .filter-btn.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.projects-grid.extended {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

.project-card .project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-meta {
    display: flex;
    gap: 1rem;
    margin: 0.75rem 0;
    font-size: 0.875rem;
    color: var(--text-light);
}

.project-meta i {
    margin-right: 0.25rem;
}

/* Project Template Styles */
.project-detail {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 0;
}

.project-header {
    margin-bottom: 2rem;
    text-align: center;
}

.project-header h1 {
    font-size: 2.5rem;
    margin: 1rem 0;
}

.project-excerpt {
    font-size: 1.25rem;
    color: var(--text-light);
    margin-bottom: 2rem;
}

.project-category {
    display: inline-block;
    background-color: var(--primary-color);
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
}

.project-featured-image {
    margin: 2rem 0;
    text-align: center;
}

.project-featured-image img {
    max-width: 100%;
    border-radius: 0.5rem;
    box-shadow: var(--shadow);
}

figcaption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-light);
    text-align: center;
}


.project-content h2 {
    margin: 2rem 0 1rem;
}

.project-content h2::after {
    width: 100%;
}

.project-content ul, .project-content ol {
    margin: 1rem 0 1rem 2rem;
}

.project-content li {
    margin-bottom: 0.5rem;
}

.code-block {
    margin: 2rem 0;
    background-color: #1e1e1e;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.code-block h3 {
    padding: 1rem 1.5rem;
    background-color: #252526;
    color: #d4d4d4;
    font-size: 2rem;
    margin: 0;
}

pre {
    margin: 0;
    padding: 1.5rem;
    overflow-x: auto;
}

.project-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.result-item {
    background-color: var(--bg-light);
    padding: 1.5rem;
    border-radius: 0.5rem;
    text-align: center;
}

.result-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.result-label {
    font-size: 0.875rem;
    color: var(--text-light);
}

.project-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.project-gallery img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 0.5rem;
    transition: var(--transition);
}

.project-gallery img:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow);
}

.project-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 3rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.project-navigation .btn-outline {
    flex: 1;
    min-width: 200px;
    text-align: center;
}

@media (max-width: 768px) {
    .projects-grid.extended {
        grid-template-columns: 1fr;
    }
    
    .project-header h1 {
        font-size: 2rem;
    }
    
    .project-navigation .btn-outline {
        flex: 100%;
    }
}

    .timeline-date {
        width: 60px;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 2.25rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    .hero-links {
        flex-direction: column;
        gap: 1rem;
    }

    .projects-grid {
        grid-template-columns: 1fr;
    }
}

/* Projects Page Extensions */
.projects-header {
    text-align: center;
    margin-bottom: 3rem;
}

.projects-header h1 {
    font-size: 2.5rem;
}

.projects-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 2rem 0;
}

.filter-btn {
    padding: 0.5rem 1rem;
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.875rem;
}

.filter-btn:hover, .filter-btn.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.projects-grid.extended {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

.project-card .project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-meta {
    display: flex;
    gap: 1rem;
    margin: 0.75rem 0;
    font-size: 0.875rem;
    color: var(--text-light);
}

.project-meta i {
    margin-right: 0.25rem;
}

/* Project Template Styles */
.project-detail {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 0;
}

.project-header {
    text-align: center;
}

.project-header h1 {
    font-size: 2.5rem;
    margin: 1rem 0;
}

.project-excerpt {
    font-size: 1.25rem;
    color: var(--text-light);
    margin-bottom: 2rem;
}

.project-category {
    display: inline-block;
    background-color: var(--primary-color);
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
}

.project-featured-image {
    margin: 2rem 0;
    text-align: center;
}

.project-featured-image img {
    max-width: 100%;
    border-radius: 0.5rem;
    box-shadow: var(--shadow);
}

figcaption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-light);
    text-align: center;
}

.project-content h2 {
    margin: 2rem 0 1rem;
}

.project-content h2::after {
    width: 100%;
}

.project-content ul, .project-content ol {
    margin: 1rem 0 1rem 2rem;
}

.project-content li {
    margin-bottom: 0.5rem;
}

.code-block {
    margin: 2rem 0;
    background-color: #1e1e1e;
    border-radius: 0.5rem;
    overflow: hidden;
    font-size: 1rem;
    box-shadow: var(--shadow);
}

.code-block h3 {
    padding: 1rem 1.5rem;
    background-color: #252526;
    color: #d4d4d4;
    font-size: 1rem;
    margin: 0;
}

pre {
    margin: 0;
    padding: 1.5rem;
    overflow-x: auto;
}

.project-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.result-item {
    background-color: var(--bg-light);
    padding: 1.5rem;
    border-radius: 0.5rem;
    text-align: center;
}

.result-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.result-label {
    font-size: 0.875rem;
    color: var(--text-light);
}

.project-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.project-gallery img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 0.5rem;
    transition: var(--transition);
}

.project-gallery img:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow);
}

.project-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 3rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.project-navigation .btn-outline {
    flex: 1;
    min-width: 200px;
    text-align: center;
}

@media (max-width: 768px) {
    .projects-grid.extended {
        grid-template-columns: 1fr;
    }
    
    .project-header h1 {
        font-size: 2rem;
    }
    
    .project-navigation .btn-outline {
        flex: 100%;
    }
}