/*
Theme Name: Vilas Boas Arquitetura
Version: 7.2 - Restauração Completa e Blindagem
*/

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* RESET DE LINKS: Proíbe o navegador de usar azul ou roxo */
a, a:link, a:visited, a:active { text-decoration: none; color: inherit; }

html, body { 
    background-color: #000; color: #e5e5e5; font-family: 'Inter', sans-serif; 
    -webkit-font-smoothing: antialiased; width: 100%; position: relative;
    overflow-x: clip; 
}

:root {
    --bg-black: #000000; --bg-gray: #161616; --gray-ui: #222222; 
    --gray-medium: #b0b0b0; --white: #ffffff; --font-logo: 'Agharti', sans-serif; 
}

.agharti-text { font-family: var(--font-logo); text-transform: lowercase; font-weight: normal; }
.curtain-reveal { opacity: 0; transform: translateY(30px); transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1); }
.curtain-reveal.is-visible { opacity: 1 !important; transform: translateY(0) !important; }

/* HEADER */
header { position: sticky; top: 0; width: 100%; background-color: rgba(0, 0, 0, 0.9); padding: 25px 0; z-index: 1000; backdrop-filter: blur(15px); border-bottom: 1px solid var(--gray-ui); }
.nav-container { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 50px; }
.logo { font-size: 2.5rem; color: var(--white); line-height: 0.8; text-decoration: none; }
nav ul { list-style: none; display: flex; gap: 40px; }
nav a, nav a:visited { font-weight: 500; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gray-medium); text-decoration: none; transition: 0.2s; }
nav a:hover, nav a.active-nav { color: var(--white); }

/* LINKS E BOTÕES CTA (Com blindagem :visited) */
.text-link, .text-link:visited { display: inline-block; color: var(--white); font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.85rem; margin-top: 30px; padding-bottom: 5px; border-bottom: 1px solid var(--gray-medium); transition: 0.3s; text-decoration: none; }
.text-link:hover { color: var(--gray-medium); border-color: var(--white); padding-right: 10px; }

.exec-cta, .exec-cta:visited { display: inline-flex; align-items: center; gap: 10px; margin-top: 40px; font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; color: var(--white); border-bottom: 1px solid var(--white); padding-bottom: 5px; transition: 0.2s; text-decoration: none; }
.exec-cta:hover { color: var(--gray-medium); border-color: var(--gray-medium); gap: 15px; }
.exec-cta::after { content: '→'; font-weight: 400; transition: transform 0.2s; }

/* HERO */
#inicio { position: relative; height: calc(100vh - 90px); width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--gray-ui); }
.hero-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: 1.5s; filter: grayscale(100%); }
.hero-slide.active { opacity: 1; }
.hero-overlay { position: absolute; top: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.3)); z-index: 2; }
.hero-content { position: relative; z-index: 3; text-align: center; max-width: 1200px; padding: 0 40px; }
.hero-title { font-size: 6rem; color: #fff; line-height: 1.1; margin-bottom: 20px; }
.hero-subtitle { font-size: 1.5rem; color: #ccc; font-weight: 300; }

/* SEÇÕES */
section { width: 100%; padding: 140px 0; border-bottom: 1px solid var(--gray-ui); box-sizing: border-box; overflow: hidden; }
.section-odd { background-color: var(--bg-black); }
.section-even { background-color: var(--bg-gray); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.section-title { font-size: 4.5rem; margin-bottom: 80px; color: var(--white); letter-spacing: 2px; }

/* MANIFESTO E QUEM SOMOS */
.manifesto-grid, .quem-wrapper { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; align-items: start; }
.manifesto-headline { font-size: 2.5rem; color: #fff; line-height: 1.2; font-weight: 400; margin-top: 0; letter-spacing: -1px; }
.quem-foto { width: 100%; aspect-ratio: 4/5; overflow: hidden; background: var(--gray-ui); position: relative; }
.quem-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: 0.3s ease; }
.quem-foto:hover .quem-img { filter: grayscale(0%); }
p { font-size: 1.05rem; font-weight: 300; color: #e5e5e5; line-height: 1.6; margin-bottom: 1.5rem; margin-top: 0; }

/* PORTFÓLIO */
.portfolio-filters { display: flex; justify-content: flex-start; gap: 30px; margin-bottom: 40px; }
.filter-btn { background: none; border: none; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; color: var(--gray-medium); cursor: pointer; padding: 0; transition: color 0.2s; font-family: var(--font-text); font-weight: 500; }
.filter-btn:hover, .filter-btn.active { color: var(--white); border-bottom: 1px solid var(--white); }
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-content: start; }
.portfolio-item { aspect-ratio: 4/3; position: relative; overflow: hidden; background: var(--gray-ui); display: block; }
.portfolio-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: 0.3s ease; }
.portfolio-item:hover .portfolio-img { filter: grayscale(0%); transform: scale(1.05); }

/* MÉTODO */
.scroll-method-section { height: 400vh; position: relative; padding: 0 !important; box-sizing: border-box; overflow: visible !important; }
.sticky-wrapper { position: sticky; top: 90px; height: calc(100vh - 90px); display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; width: 100%; overflow: hidden; }
.method-title-wrapper { position: absolute; top: 40px; left: 0; width: 100%; text-align: left; padding: 0 40px; box-sizing: border-box; max-width: 1400px; right: 0; margin: 0 auto; }
.metodo-staircase-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 15px; align-items: start; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 40px; box-sizing: border-box; }

.stair-step { display: flex; flex-direction: column; justify-content: flex-start; }
.stair-step:nth-child(1) { margin-top: 280px; }
.stair-step:nth-child(2) { margin-top: 240px; }
.stair-step:nth-child(3) { margin-top: 200px; }
.stair-step:nth-child(4) { margin-top: 160px; }
.stair-step:nth-child(5) { margin-top: 120px; }
.stair-step:nth-child(6) { margin-top: 80px; }
.stair-step:nth-child(7) { margin-top: 40px; }
.stair-step:nth-child(8) { margin-top: 0px; }

.stair-step .step-number { position: relative; font-weight: 700; font-size: 0.85rem; color: var(--gray-medium); display: flex; flex-direction: column; justify-content: flex-end; height: 90px; box-sizing: border-box; padding-left: 12px; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 2px solid var(--gray-ui); text-transform: uppercase; letter-spacing: 0.5px; transition: color 0.3s ease, border-bottom-color 0.3s ease; line-height: 1.4; }
.stair-step:not(:last-child) .step-number::after { content: ''; position: absolute; bottom: -2px; right: -15px; width: 15px; height: 2px; background-color: var(--gray-ui); background-image: linear-gradient(to right, var(--white) 50%, transparent 50%); background-size: 200% 100%; background-position: right; transition: background-position 0.5s ease; z-index: 1; }
.stair-step:not(:last-child) .step-number::before { content: ''; position: absolute; bottom: -2px; right: -15px; width: 2px; height: 42px; background-color: var(--gray-ui); background-image: linear-gradient(to top, var(--white) 50%, transparent 50%); background-size: 100% 200%; background-position: top; transition: background-position 0.5s ease; z-index: 1; }
.stair-step.active .step-number { color: var(--white); border-bottom-color: var(--white); }
.stair-step.active:not(:last-child) .step-number::after { background-position: left; }
.stair-step.active:not(:last-child) .step-number::before { background-position: bottom; transition-delay: 0.3s; }

.stair-step p { font-size: 0.85rem; color: var(--gray-medium); line-height: 1.5; margin: 0; padding-left: 12px; opacity: 0; transform: translateY(15px); transition: opacity 0.4s ease, transform 0.4s ease; }
.stair-step.active p { opacity: 1; transform: translateY(0); color: var(--text-color); }

/* FAQ */
.faq-wrapper { width: 100%; box-sizing: border-box; }
.faq-item { border-bottom: 1px solid var(--gray-ui); width: 100%; box-sizing: border-box; }
.faq-question { display: flex; justify-content: space-between; align-items: center; padding: 35px 0; cursor: pointer; font-size: 1.3rem; font-weight: 400; color: var(--white); transition: color 0.2s; }
.faq-question:hover { color: var(--gray-medium); }
.faq-icon { font-weight: 300; font-size: 2.5rem; color: var(--gray-medium); margin-left: 20px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; transition: transform 0.3s ease, color 0.3s ease; }
.faq-item .faq-icon::after { content: '+'; }
.faq-item.active .faq-icon { transform: rotate(45deg); color: var(--white); } 
.faq-answer { max-height: 0; overflow: hidden; transition: all 0.3s ease; color: var(--gray-medium); font-weight: 300;}
.faq-item.active .faq-answer { max-height: 500px; padding-bottom: 35px; }

/* FOOTER */
footer { padding: 100px 50px; background-color: var(--bg-black); box-sizing: border-box; width: 100%; border-top: 1px solid var(--gray-ui); }
.footer-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.5fr 2fr 1fr; gap: 60px; box-sizing: border-box; }
.footer-logo { font-size: 3rem; margin-bottom: 15px; display: block; color: var(--white); text-decoration: none; }
.footer-form input, .footer-form textarea { background: transparent; border: none; border-bottom: 1px solid #333; font-family: var(--font-text); font-size: 1rem; color: #fff; padding: 12px 0; width: 100%; margin-bottom: 15px; box-sizing: border-box; transition: border-bottom-color 0.2s; }
.footer-form input::placeholder, .footer-form textarea::placeholder { color: #666; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; }
.footer-form input:focus, .footer-form textarea:focus { outline: none; border-bottom-color: var(--white); }
.submit-btn { background: var(--white); color: #000; border: none; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; padding: 15px 40px; cursor: pointer; margin-top: 10px; transition: background 0.2s; }
.submit-btn:hover { background: var(--gray-medium); }
.footer-contact p { margin: 0 0 15px 0; font-size: 0.95rem; color: var(--gray-medium); }
.footer-contact a { color: var(--white); transition: color 0.2s; text-decoration: none; }
.footer-contact a:hover { color: var(--gray-medium); }

/* RESPONSIVIDADE E CORREÇÕES MOBILE */
@media (max-width: 1024px) {
    .nav-container { flex-direction: column; gap: 20px; padding: 20px; }
    .hero-subtitle { white-space: normal; }
    .manifesto-grid, .quem-wrapper { grid-template-columns: 1fr; gap: 40px; }
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
    
    .scroll-method-section { height: auto !important; padding: 100px 0 !important; }
    .sticky-wrapper { position: relative !important; top: 0 !important; height: auto !important; display: block !important; overflow: visible !important; }
    .method-title-wrapper { position: relative !important; top: 0 !important; margin-bottom: 40px; padding: 0 40px !important; }
    .metodo-staircase-grid { display: flex; flex-direction: column; align-items: flex-start; height: auto; gap: 30px; padding: 0 40px !important; }
    
    .stair-step { width: 100% !important; margin: 0 !important; }
    .stair-step .step-number { height: auto !important; padding: 0 0 10px 0 !important; color: var(--white) !important; border-bottom-color: var(--white) !important; display: block !important; }
    .stair-step .step-number::after, .stair-step .step-number::before { display: none !important; }
    .stair-step p { font-size: 0.9rem; opacity: 1 !important; transform: none !important; padding-left: 0 !important; color: var(--gray-medium); }
    
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 60px;}
}

@media (max-width: 768px) {
    .hero-title { font-size: 3.5rem; }
    .section-title { font-size: 3.5rem; margin-bottom: 50px; }
    .portfolio-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 50px; }
    nav ul { flex-wrap: wrap; justify-content: center; gap: 20px; }
}

/* =========================================
   PÁGINAS DE PROJETOS (INTERNAS)
   ========================================= */
.back-link { display: inline-flex; align-items: center; gap: 5px; color: var(--gray-medium); font-weight: 500; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; transition: color 0.2s; margin-bottom: 20px; text-decoration: none; }
.back-link:hover { color: var(--white); }
.back-link::before { content: '←'; font-size: 1rem; }

/* HERO DO PROJETO */
.project-hero { height: 75vh; width: 100%; position: relative; overflow: hidden; display: flex; align-items: flex-end; padding-bottom: 60px; box-sizing: border-box; background-color: var(--bg-black); }
.hero-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); z-index: 1; transition: filter 0.5s ease; display: block; cursor: zoom-in; }
.project-hero:hover .hero-img { filter: grayscale(0%); }
.project-hero::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 50%, transparent 100%); z-index: 2; pointer-events: none; }
.project-hero-content { position: relative; z-index: 3; max-width: 1400px; margin: 0 auto; padding: 0 50px; width: 100%; box-sizing: border-box; pointer-events: none; }
.status-badge { display: inline-block; padding: 5px 12px; background: var(--white); color: #000; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; pointer-events: auto; }
.project-title { font-size: 5rem; color: var(--white); line-height: 1; font-family: var(--font-logo); font-weight: normal; margin: 0; text-transform: lowercase; }

/* BARRA DE STATUS (TRACKER) */
.status-section { background-color: var(--bg-gray); padding: 100px 50px; border-bottom: 1px solid var(--gray-ui); box-sizing: border-box; width: 100%; }
.tracker-container { max-width: 1400px; margin: 0 auto; box-sizing: border-box; }
.tracker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 15px; margin-top: 60px; }
.tracker-item { position: relative; padding-top: 20px; border-top: 2px solid var(--gray-ui); }
.tracker-item.completed { border-top-color: var(--white); }
.tracker-item.active { border-top-color: var(--white); }
.tracker-item.active::after { content: ''; position: absolute; top: -5px; left: 0; width: 8px; height: 8px; background: var(--white); border-radius: 50%; animation: pulse-status 1.5s infinite; }
.tracker-step { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; color: var(--gray-medium); display: block; margin-bottom: 8px; letter-spacing: 0.5px; }
.tracker-item.completed .tracker-step, .tracker-item.active .tracker-step { color: var(--white); }
.tracker-label { font-size: 0.85rem; color: var(--gray-medium); font-weight: 400; line-height: 1.4; display: block; }
.tracker-item.active .tracker-label { color: var(--white); font-weight: 500; }
@keyframes pulse-status { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(2); opacity: 0; } 100% { transform: scale(1); opacity: 0; } }

/* COMPARAÇÃO / GALERIA DE PROJETO */
.comparison-section { padding: 120px 50px; max-width: 1400px; margin: 0 auto; box-sizing: border-box; }
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 60px; }
.comp-card { display: flex; flex-direction: column; gap: 20px; cursor: pointer; }
.comp-img-wrapper { width: 100%; aspect-ratio: 16/10; overflow: hidden; border: 1px solid var(--gray-ui); position: relative; background-color: var(--gray-ui); }
.comp-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter 0.4s ease; display: block; cursor: zoom-in; }
.comp-card:hover .comp-img { filter: grayscale(0%); }
.comp-label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: var(--gray-medium); font-weight: 500; border-bottom: 1px solid var(--gray-ui); padding-bottom: 10px; display: inline-block; width: fit-content; transition: color 0.3s, border-color 0.3s; }
.comp-card:hover .comp-label { color: var(--white); border-bottom-color: var(--white); }

/* LIGHTBOX (FOTOS AMPLIADAS) */
.lightbox { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.95); display: flex; justify-content: center; align-items: center; z-index: 10000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; cursor: zoom-out; }
.lightbox.active { opacity: 1; visibility: visible; }
.lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,0.8); transform: scale(0.95); transition: transform 0.3s ease; }
.lightbox.active img { transform: scale(1); }

/* RESPONSIVIDADE PÁGINAS DE PROJETOS E DADOS */
@media (max-width: 1024px) {
    .tracker-grid { grid-template-columns: repeat(4, 1fr); gap: 30px; }
    .comparison-grid { grid-template-columns: 1fr; }
    .project-title { font-size: 3.5rem; }
}
@media (max-width: 768px) {
    .tracker-grid { grid-template-columns: repeat(2, 1fr); }
}

/* FICHA TÉCNICA DO PROJETO (DADOS) */
.project-data-bar { padding: 40px 50px; background-color: var(--bg-black); border-bottom: 1px solid var(--gray-ui); width: 100%; box-sizing: border-box; }
.data-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; max-width: 1400px; margin: 0 auto; }
.data-item { display: flex; flex-direction: column; gap: 5px; }
.data-item span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--gray-medium); }
.data-item strong { font-size: 1rem; font-weight: 500; color: var(--white); }

/* DESCRIÇÃO DO PROJETO */
.project-description { padding: 120px 50px; width: 100%; box-sizing: border-box; background-color: var(--bg-black); }
.desc-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; max-width: 1400px; margin: 0 auto; align-items: start; }
.desc-title { font-size: 2.4rem; line-height: 1.3; color: var(--white); font-weight: 400; letter-spacing: -1px; margin: 0; }
.desc-text { font-size: 1.05rem; font-weight: 300; color: var(--gray-medium); line-height: 1.8; }
.desc-text p { margin-bottom: 20px; }

/* GALERIA DE IMAGENS DO PROJETO */
.project-gallery { padding: 0 50px; width: 100%; box-sizing: border-box; background-color: var(--bg-black); }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1400px; margin: 0 auto; }
.gallery-item { position: relative; overflow: hidden; background-color: var(--gray-ui); }

.gallery-item.large { grid-column: span 2; aspect-ratio: 16/9; }
.gallery-item.portrait { aspect-ratio: 4/5; }

.gallery-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter 0.5s ease; cursor: zoom-in; display: block; }
.gallery-item:hover .gallery-img { filter: grayscale(0%); }

/* RESPONSIVIDADE DAS PÁGINAS INTERNAS */
@media (max-width: 1024px) {
    .desc-grid { grid-template-columns: 1fr; gap: 40px; }
    .data-grid { justify-content: flex-start; gap: 50px; }
}
@media (max-width: 768px) {
    .gallery-grid { grid-template-columns: 1fr; gap: 20px; }
    .gallery-item.large { grid-column: span 1; aspect-ratio: 4/3; }
    .gallery-item.portrait { grid-column: span 1; aspect-ratio: 4/5; }
    .project-data-bar, .project-description, .project-gallery { padding-left: 20px; padding-right: 20px; }
    .data-grid { flex-direction: column; gap: 25px; }
    .desc-title { font-size: 2rem; }
}

/* =========================================
   AJUSTES MOBILE DIVERSOS E HOVER
   ========================================= */
@media (max-width: 768px) {
    html {
        scroll-padding-top: 140px; /* Compensa a altura maior do menu no celular */
    }
    
    /* FILTROS E GRID (Página Inicial) */
    .portfolio-filters {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    .filter-btn {
        font-size: 0.75rem !important;
        padding: 5px 12px !important;
        white-space: nowrap; 
    }
    .portfolio-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important; 
    }
    .portfolio-item, .portfolio-item img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4/5 !important; 
        object-fit: cover !important;
    }
}

/* EFEITO HOVER - PORTFÓLIO (DESKTOP) */
.portfolio-item { position: relative; display: block; overflow: hidden; }
.portfolio-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); display: flex; align-items: center; justify-content: center; text-align: center; opacity: 0; transition: opacity 0.5s cubic-bezier(0.2, 1, 0.3, 1); padding: 30px; box-sizing: border-box; z-index: 2; }
.portfolio-item:hover .portfolio-overlay { opacity: 1; }
.overlay-content { transform: translateY(20px); transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1); }
.portfolio-item:hover .overlay-content { transform: translateY(0); }

.overlay-status { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2px; color: var(--white); margin-bottom: 10px; opacity: 0.8; }
/* EFEITO HOVER - PORTFÓLIO (DESKTOP) */
.overlay-title { 
    font-size: 4rem; /* Aumentado de 2rem para 4rem para melhor leitura em telas grandes */
    color: var(--white); 
    margin: 0 0 10px 0; 
    line-height: 1; 
}
.overlay-info { font-size: 0.85rem; color: var(--gray-medium); font-weight: 300; margin: 0; }

/* Overlay sempre visível ou simplificado no celular */
@media (max-width: 768px) {
    .portfolio-overlay {
        opacity: 1; 
        background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);
        align-items: flex-end;
        padding: 15px;
        text-align: left;
    }
    .overlay-content { transform: none; }
    .overlay-title { font-size: 1.2rem; }
    .overlay-status { font-size: 0.6rem; margin-bottom: 5px; }
    .overlay-info { font-size: 0.7rem; }
} /* <-- ESTA ERA A CHAVE QUE FALTAVA! O ARQUIVO ESTAVA TODO PRESO AQUI */

/* =========================================
   NOVO PADRÃO DE GALERIA (1 Grande + 3 Pequenas sempre)
   ========================================= */
.gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

.gallery-grid .gallery-item img.gallery-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* 1º, 5º, 9º item (Gigante) */
.gallery-grid .gallery-item:nth-child(4n + 1) {
    grid-column: span 3 !important;
    aspect-ratio: 21/9 !important; 
}

/* 2º, 3º, 4º, 6º item (Pequenos) */
.gallery-grid .gallery-item:not(:nth-child(4n + 1)) {
    grid-column: span 1 !important;
    aspect-ratio: 1/1 !important; 
}

/* Proteção Galeria Celular */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 15px !important;
    }
    .gallery-grid .gallery-item:nth-child(4n + 1) {
        grid-column: span 2 !important;
        aspect-ratio: 16/9 !important;
    }
    .gallery-grid .gallery-item:nth-child(4n + 2),
    .gallery-grid .gallery-item:nth-child(4n + 3) {
        grid-column: span 1 !important;
        aspect-ratio: 4/5 !important;
    }
    .gallery-grid .gallery-item:nth-child(4n + 4) {
        grid-column: span 2 !important;
        aspect-ratio: 21/9 !important; 
    }
}

/* =========================================
   REMOÇÃO DO TEXTO SOBRE A FOTO NO CELULAR (Aba Projetos)
   ========================================= */
@media (max-width: 768px) {
    .portfolio-overlay {
        display: none !important; /* Desliga completamente a película e os textos */
    }
}
/* =========================================
   PAGINAÇÃO DO PORTFÓLIO (Linha fina com setas)
   ========================================= */
.portfolio-pagination { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    width: 100%; 
    margin-top: 50px; 
}
.page-line { 
    flex-grow: 1; 
    height: 1px; 
    background-color: var(--white); 
    opacity: 0.2; /* Linha sutil para não brigar com as fotos */
    margin: 0 20px; 
}
.page-arrow { 
    background: transparent; 
    border: none; 
    color: var(--white); 
    font-size: 1.5rem; 
    cursor: pointer; 
    transition: opacity 0.3s, transform 0.3s; 
    opacity: 0.6; 
    padding: 10px;
}
.page-arrow:hover { 
    opacity: 1; 
}
.page-arrow.prev:hover { transform: translateX(-5px); }
.page-arrow.next:hover { transform: translateX(5px); }
/* =========================================
   ESTABILIDADE DO PORTFÓLIO (Ajuste Final)
   ========================================= */
.portfolio-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    align-content: start !important;
    min-height: 850px !important; /* Ajustado para aproximar as setas no PC */
}

@media (max-width: 768px) {
    .portfolio-grid {
        grid-template-columns: 1fr 1fr !important;
        min-height: 350px !important; /* Reduzido para aproximar as setas no Mobile */
    }
    
    .portfolio-pagination {
        margin-top: 10px !important;
        opacity: 1 !important; /* Garante visibilidade total */
    }
}