/* =========================================
   1. RESETS & BASE GERAL
   ========================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    width: 100%; min-height: 100%;
    font-family: "Inconsolata", monospace; font-size: 20px; font-weight: 400;
    color: white; background-color: #211D1E; overflow-x: hidden;
}

/* =========================================
   2. NAVEGAÇÃO & HOVER ANIMADO
   ========================================= */
.nav-link { 
    position: relative; display: inline-block; cursor: pointer; 
    font-size: 20px; font-weight: 700; text-decoration: none; color: white; z-index: 2;
}
.nav-link::before {
    content: ""; position: absolute; left: 0; bottom: 2px; 
    height: 45%; background-color: #B81E13; width: 0; 
    transition: width 0.5s linear; z-index: -1; 
}
.nav-link:hover::before, .nav-link.active::before { width: 100%; }

.section-title {
    font-size: 24px; font-weight: 700; color: white;
    position: relative; display: inline-block; z-index: 2;
}
.section-title::before {
    content: ""; position: absolute; left: 0; bottom: 2px; 
    height: 45%; background-color: #B81E13; width: 100%; z-index: -1; 
}

/* =========================================
   3. HEADER & LOGO
   ========================================= */
#header { position: relative; width: 100%; height: 100vh; min-height: 700px; background-color: #211D1E; }
.banner-slider { width: 100%; height: 100%; position: absolute; top:0; left:0; z-index: 0;}
.banner-slider img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: bottom; visibility: hidden; }
.banner-slider img.active { visibility: visible; z-index: 1; }

.header-content { position: relative; z-index: 2; width: 100%; height: 100%; padding: 40px; display: flex; flex-direction: column; justify-content: space-between;}

.header-top { position: relative; width: 100%; }
.logo-link { display: block; }
.logo { width: 219.5px; height: 68.64px; display: block; object-fit: contain; }

.lang-switcher { font-weight: 700; font-size: 20px; display: flex; gap: 8px;}
.lang-btn { cursor: pointer; opacity: 0.5; transition: opacity 0.3s; }
.lang-btn.active { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.lang-btn:hover { opacity: 0.8; }

.hero-container { width: 100%; display: flex; justify-content: flex-end; padding-bottom: 40px;}
.hero-text { font-weight: 900; font-size: 56px; text-align: right; line-height: 1.2; text-transform: lowercase; white-space: nowrap; }
.hero-highlight { background-color: #637448; color: white; padding: 0 10px; display: inline-block;}

/* =========================================
   4. POPUP SOBRE MIM 
   ========================================= */
.popup-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.25); z-index: 2000;
    opacity: 0; visibility: hidden; transition: opacity 0.4s ease;
}
.popup-overlay.active { opacity: 1; visibility: visible; }

.popup-content {
    position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 100%);
    width: 100%; max-width: 1400px; height: 90vh; background-color: #551410; 
    padding: 40px 60px; display: flex; flex-direction: column; overflow-y: auto;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.popup-overlay.active .popup-content { transform: translate(-50%, 0); }

.popup-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.popup-logo { width: 219.5px; height: 68.64px; object-fit: contain; }
.popup-close { font-size: 32px; font-weight: 700; cursor: pointer; }

.popup-body { display: flex; gap: 60px; height: 100%;}
.popup-text-col { flex: 1; font-size: 18px; line-height: 1.6; display: flex; flex-direction: column; gap: 40px;}
.popup-img-col { flex: 1; display: flex; justify-content: flex-end; align-items: flex-start;}
.popup-img-col img { max-width: 100%; max-height: 600px; object-fit: contain; }

.edu-title { font-size: 24px; font-weight: 700; margin-bottom: 16px; }
.edu-item { margin-bottom: 12px; }

/* =========================================
   5. SEÇÃO DE PROJETOS E CARROSSEL
   ========================================= */
.dark-section { background-color: #211D1E; width: 100%; display: flex; justify-content: center;}
.section-container { width: 100%; max-width: 1322px; padding: 80px 40px; display: flex; flex-direction: column;}

.section-header-block { display: flex; flex-direction: column; align-items: flex-end; margin-bottom: 40px; }
#projects-header-block { cursor: pointer; }

.projects-subtitle { font-size: 16px; font-weight: 300; margin-top: 8px; opacity: 0.8;}
#projects-header-block:hover .projects-subtitle { opacity: 1; text-decoration: underline; }

.carousel-viewport { width: 100%; overflow: hidden; position: relative; }
.carousel-track { display: flex; width: 100%; transition: transform 0.4s ease-in-out; }

.project-card { display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: transform 0.3s ease; }
.project-card:hover { transform: scale(1.02); }
.project-thumbnail { width: 100%; max-width: 322px; margin: 0 auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.project-info { display: flex; flex-direction: column; padding: 16px 20px; width: 100%; max-width: 322px; align-self: stretch; margin: 0 auto; text-align: left; }

.project-title { font-size: 24px; font-weight: 700; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-scope { font-size: 16px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =========================================
   6. CONTATOS
   ========================================= */
.contacts-links { display: flex; justify-content: space-between; width: 100%; border-top: none; }
.text-link { font-size: 24px; font-weight: 700; cursor: pointer; text-decoration: none; color: white; transition: opacity 0.3s;}
.text-link:hover { opacity: 0.7; }

/* =========================================
   7. OUTRAS PÁGINAS
   ========================================= */
.project-logo { position: absolute; top: 40px; left: 40px; width: 219.5px; height: 68.64px; z-index: 999; }
.all-projects-page { background-color: #637448; padding: 160px 40px 40px 40px; min-height: 100vh; }
.all-projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; width: 100%; }
.all-projects-grid .project-card { width: 100%; max-width: 100%; align-items: flex-start; }
.all-projects-grid .project-thumbnail, .all-projects-grid .project-info { max-width: 100%; margin: 0; }

.project-content-wrapper { max-width: 644px; margin: 160px auto 60px auto; display: flex; flex-direction: column; align-items: flex-start; padding: 0 20px; }
.project-page-title { font-size: 48px; font-weight: 700; width: 100%; text-align: left; margin-bottom: 8px; }
.project-page-subtitle { font-size: 24px; font-weight: 500; width: 100%; text-align: left; margin-bottom: 40px; }
.project-page-text { font-size: 20px; font-weight: 400; line-height: 1.4; width: 100%; text-align: left; margin-bottom: 32px; }
figure { width: 100%; margin-bottom: 32px; display: flex; flex-direction: column; }
figure img, figure video { width: 100%; display: block; }
figcaption { font-size: 16px; font-weight: 300; margin-top: 12px; text-align: right; opacity: 0.8; }

.construction-page { min-height: 100vh; padding: 100px 20%; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.construction-page h1 { font-size: 48px; font-weight: 700; }
.construction-page h3 { font-size: 24px; font-weight: 400; margin-bottom: 24px; }
.construction-page p { font-size: 20px; line-height: 1.5; }

/* =========================================
   8. RESPONSIVIDADE (MOBILE & DESKTOP)
   ========================================= */
@media (min-width: 1024px) {
    .logo-link { position: absolute; top: 40px; left: 40px; margin: 0; }
    .lang-switcher { position: absolute; right: 40px; top: 40px; } 
    
    .main-nav { display: block; padding: 0; margin: 0; }
    #nav-about { position: absolute; top: 86px; left: 35%; transform: translateX(-50%); }
    #nav-projects { position: absolute; top: 86px; right: 35%; transform: translateX(50%); }
    #nav-contacts { position: absolute; top: 86px; right: 40px; }

    .hero-container { position: absolute; bottom: 40px; right: 40px; justify-content: flex-end; margin: 0; width: auto; }

    .carousel-track { flex-wrap: nowrap; justify-content: flex-start; gap: 138px; max-width: 1242px; margin: 0 auto;}
    .project-card { flex: 0 0 322px; width: 322px; align-items: flex-start; }
    .project-thumbnail, .project-info { margin: 0; }
}

@media (max-width: 1024px) {
    .header-top { display: flex; flex-direction: column; align-items: flex-start; position: relative; }
    .logo-link { position: relative; margin-bottom: 32px; }
    
    /* Idioma travado no topo à direita */
    .lang-switcher { position: absolute; top: 0; right: 0; margin: 0; }
    
    /* Resetando o Contatos para voltar pra coluna junto com os irmãos */
    .main-nav { position: relative; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; width: 100%; }
    #nav-about, #nav-projects, #nav-contacts { position: relative; top: auto; left: auto; right: auto; transform: none; display: inline-block; margin: 0; }
    
    .hero-container { justify-content: flex-start; padding-bottom: 40px;}
    .hero-text { font-size: 32px; text-align: left; white-space: normal; } 
    
    .popup-content { padding: 40px 20px; }
    .popup-body { flex-direction: column; }
    .popup-img-col { order: -1; justify-content: center;}
    .popup-img-col img { max-height: 250px; }

    .project-logo { top: 40px; left: 8%; width: 200px; height: auto; }
    .all-projects-page { padding-top: 120px; }
    .section-header-block { align-items: flex-start; }

    .carousel-track { gap: 0; }
    .project-card { flex: 0 0 100%; align-items: center; }
    .project-thumbnail { max-width: 322px; }
    .project-info { max-width: 322px; }
    
    .all-projects-grid { grid-template-columns: 1fr; }
    .contacts-links { flex-direction: column; gap: 20px; align-items: flex-start; }
}