:root {
    --color-home-red: #B8223A;
    --color-beige: #E9E7DC;
    --color-yellow: #F9B12B;
    --color-black: #000000;
    --color-white: #FFFFFF;
    
    --font-primary: 'Coluna Rounded', sans-serif;
    --font-secondary: 'Outfit', sans-serif;
    --font-title: 'League Spartan', sans-serif;
    
    --transition-speed: 0.6s;
    --easing: cubic-bezier(0.77, 0, 0.175, 1);
}

/* 3. FONTS */
@font-face {
    font-family: 'Coluna Rounded';
    /* ATENÇÃO: Renomeie o arquivo no FTP para 'colunarounded.woff2' (tudo minúsculo) */
    src: url('../assets/fonts/colunarounded.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Garante que o texto apareça mesmo antes da fonte carregar */
}

/* LEAGUE SPARTAN is imported via Google Fonts in HTML */

/* RESET & BASE */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden; /* No scroll global */
    /* UPDATED: Changed to Home Red to match index.html meta tag. 
       This ensures the "default" browser state is Home Red. */
    background-color: var(--color-home-red); 
    font-family: var(--font-primary);
    color: var(--color-white);
}

/* UTILS */
.hidden { display: none !important; }
.opacity-0 { opacity: 0; pointer-events: none; }
.block { display: block; }

/* Elements waiting for intro animation */
.awaiting-intro {
    opacity: 0;
}

/* 1. LOADER */
.loader-container {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #F9B12B; /* Fundo Amarelo Solicitado */
    color: var(--color-black); /* Texto Preto para Contraste */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4rem;
    font-weight: bold;
    transition: opacity 1.5s ease-out; /* Transição suave Amarelo -> Vermelho (body) */
}

.loader-content {
    transition: opacity 0.3s ease; /* Fade rápido apenas para o texto */
}

/* 2. VIDEO WRAPPER */
.video-wrapper {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #000;
    z-index: 9998; /* Inicialmente abaixo do Loader */
}
.video-wrapper video {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* 3. GLOBAL UI */
#global-ui {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; /* Let clicks pass through */
    z-index: 500;
    transition: opacity 0.5s ease;
}
#global-ui.fade-out-ui {
    opacity: 0;
}

#global-ui.ui-inverted .logo-container img {
    filter: brightness(0); /* Turn Logo Black */
}
#global-ui.ui-inverted .global-close-btn img {
    filter: brightness(0); /* Turn X Icon Black */
}

/* Logo */
.logo-container {
    position: absolute;
    transition: all 0.8s var(--easing);
    pointer-events: auto;
    cursor: pointer; /* Clickable */
}
.logo-container img {
    height: 60px; /* Tamanho fixo para o logo SVG */
    width: auto;
    display: block;
    transition: filter 0.5s ease;
}
.logo-container.home-pos {
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
}
.logo-container.page-pos {
    top: 2rem;
    left: 2rem;
    transform: translateX(0) scale(0.8);
}
.logo-container.about-pos {
    top: 2rem;
    left: 3.5rem; 
    transform: translateX(0) scale(0.8);
}

/* Global Close Button (X) */
.global-close-btn {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: transparent;
    border: none;
    cursor: pointer;
    pointer-events: auto;
    z-index: 501;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.4s ease, transform 0.3s ease;
}
.global-close-btn img {
    width: 100%;
    height: 100%;
    display: block;
    transition: filter 0.5s ease;
    filter: brightness(0) invert(1); 
}
.global-close-btn:hover {
    transform: scale(1.1);
}

/* Search Bar */
.search-container {
    position: absolute;
    width: 300px;
    height: 50px;
    background: var(--color-beige);
    border-radius: 25px;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    pointer-events: auto;
    transition: transform 0.6s var(--easing), opacity 0.6s ease;
}
.search-container.home-pos {
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
}
.search-container.hidden-anim {
    transform: translate(-50%, 100%);
    opacity: 0;
    pointer-events: none; 
    visibility: hidden;  
    transition: transform 0.6s var(--easing), opacity 0.6s ease, visibility 0s 0.6s;
}

.search-shadow {
    position: absolute;
    bottom: -15px; left: 0; width: 100%; height: 20px;
    background: url('../assets/shadows/search-shadow.png') no-repeat center bottom;
    background-size: contain;
    z-index: -1;
}
#search-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-primary);
    font-size: 1rem;
    color: var(--color-black);
}
.search-dropdown {
    position: absolute;
    bottom: 60px;
    left: 0;
    width: 100%;
    background: var(--color-white);
    color: var(--color-black);
    max-height: 200px;
    overflow-y: auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.search-result-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}
.search-result-item:hover { background: #f0f0f0; }

/* 4. HOME VIEW */
#view-home {
    position: absolute;
    width: 100%; height: 100%;
    overflow: hidden;
}
.main-menu {
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
}
.main-menu ul { list-style: none; }
.main-menu li {
    font-size: clamp(2rem, 3.5vw, 4rem); 
    cursor: pointer;
    margin-bottom: 8px; 
    transition: transform 0.3s ease, color 0.3s ease;
    transform-origin: left center;
}
@media (hover: hover) {
    .main-menu li:hover {
        transform: translateY(-10px) scale(1.05);
        color: rgba(255,255,255, 0.8); 
    }
}

.home-overlay {
    position: absolute;
    top: 0; right: 0;
    width: 45%;
    height: 100%;
    background: var(--color-home-red);
    transform: translateX(100%);
    transition: transform 0.6s var(--easing), width 0.6s var(--easing);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.home-overlay.active {
    transform: translateX(0);
}
.home-overlay.expanded {
    width: 100%;
    z-index: 200; 
}

/* 5. CATEGORY VIEW & WORKS */
#view-category {
    position: absolute; 
    top: 0; 
    left: 0;
    background-color: transparent; 
    width: 100%; 
    height: 100%;
    transition: background-color 0.6s var(--easing);
}

.page-title {
    position: absolute;
    top: 2rem;
    left: 6rem;
    font-family: var(--font-secondary);
    font-weight: 400;
    font-size: 2rem;
    text-transform: lowercase;
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease 0.5s; 
    color: var(--color-white);
    z-index: 50;
    margin: 0;
}
.page-title.black-title {
    color: var(--color-black) !important;
}
#about-page-title {
    left: 7.5rem; 
}
.page-title.enter {
    opacity: 1;
    transform: translateX(0);
}

/* Works Stage */
.work-stage {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10;
}
.work-item {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s linear; 
}
.work-item.active {
    opacity: 1;
    visibility: visible;
}

/* Parallax Layers */
.layer {
    position: absolute;
    transition: transform 0.1s linear;
    will-change: transform;
}
.layer-img { z-index: 2; width: auto; max-width: 60%; max-height: 70vh; object-fit: contain; }

/* VIDEO EMBED */
.video-embed-container {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    margin: auto;
    width: 70vw; 
    height: fit-content; 
    z-index: 5;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
}
.video-embed-container iframe {
    pointer-events: auto !important; 
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}
.video-embed-container.vertical-video {
    width: 35vh; 
    max-width: 90vw;
}

/* BRANDING SLIDESHOW */
.branding-img-primary {
    opacity: 1;
    transition: opacity 1.5s ease-in-out, transform 0.1s linear;
}
.branding-img-secondary {
    opacity: 0;
    transition: opacity 1.5s ease-in-out, transform 0.1s linear;
}
.work-item.swap-images .branding-img-primary { opacity: 0; }
.work-item.swap-images .branding-img-secondary { opacity: 1; }

.layer-text { 
    z-index: 3; 
    font-family: var(--font-title);
    font-weight: 700;
    font-size: clamp(1.5rem, 4vw, 4rem);
    text-align: center;
    color: var(--color-white);
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
    pointer-events: none;
    line-height: 0.9;
    top: 75%;
    left: 0;
    width: 100%;
}
.video-project-title {
    top: 85%;
}

/* NAVIGATION DEFAULT STYLES (Desktop & Generic Mobile) */
.nav-arrow {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.nav-arrow.top { top: 2rem; }
.nav-arrow.bottom { bottom: 2rem; }
.nav-arrow:hover { transform: translateX(-50%) scale(1.1); }
.nav-arrow img { width: 100%; height: 100%; }

.side-label {
    position: absolute;
    top: 50%;
    font-size: 1.2rem;
    color: var(--color-white);
    text-transform: capitalize;
    cursor: pointer;
    z-index: 100;
    letter-spacing: 1px;
    padding: 10px;
    transition: opacity 0.3s ease;
}
.side-label:hover { opacity: 0.8; }
.side-label.left {
    left: 2rem;
    transform: translateY(-50%) rotate(90deg); 
}
.side-label.right {
    right: 2rem;
    transform: translateY(-50%) rotate(270deg);
}

.nav-side-wrapper {
    /* Default: display contents so children behave as absolute */
    display: contents;
}

/* WORKS MENU OVERLAY */
.works-menu-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #dbdbdb; 
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s 0.4s;
    padding-top: 6rem; 
    overflow-x: hidden; 
}
.works-menu-overlay.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease;
}

.works-menu-heading {
    position: absolute;
    top: 2rem;
    left: 6rem;
    font-family: var(--font-secondary); 
    font-weight: 400;
    font-size: 2rem;
    text-transform: lowercase;
    z-index: 205;
    margin: 0;
    line-height: 1;
    color: var(--color-white) !important; 
}

#close-works-menu img {
    filter: brightness(0) !important; 
}

#works-list-full {
    list-style: none;
    text-align: center;
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
}
#works-list-full li {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: clamp(1rem, 2.5vw, 2rem);
    margin: 10px 0;
    cursor: pointer;
    transition: transform 0.3s ease;
}
#works-list-full li:hover {
    transform: scale(1.05);
    opacity: 0.8;
}

/* PROJECT DETAIL OVERLAY */
.project-detail-overlay {
    position: fixed;
    top: 0; right: 0;
    width: 45%;
    height: 100%;
    background-color: #FFFFFF; 
    z-index: 210;
    transform: translateX(100%);
    transition: transform 0.6s var(--easing);
    padding: 4rem;
    padding-top: 15vh; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.project-detail-overlay.open {
    transform: translateX(0);
}

.detail-close-btn {
    position: absolute;
    top: 2rem; right: 2rem;
    background: transparent; border: none;
    cursor: pointer;
    width: 32px; 
    height: 32px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}
.detail-close-btn img {
    width: 100%;
    height: 100%;
    display: block;
    filter: brightness(0);
}
.detail-close-btn:hover {
    transform: scale(1.1);
}

.detail-logo {
    display: none; 
}

.detail-content-wrapper {
    color: var(--color-black); 
}
#detail-title {
    font-family: var(--font-title);
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 2rem;
}
#detail-desc {
    font-family: var(--font-secondary);
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}
.detail-nav {
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 1.2rem;
    opacity: 0.7;
    transition: opacity 0.3s;
}
.detail-nav:hover {
    opacity: 1;
}

/* ABOUT VIEW */
#view-about {
    background-color: var(--color-yellow);
    width: 100%; height: 100%;
    position: absolute;
    top: 0; left: 0;
    overflow: hidden; 
    padding: 2rem 3rem;
}

.about-container {
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
}

.about-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem;
    margin-top: 6rem; 
}

.about-text-col {
    padding-right: 2rem;
    padding-left: 4.5rem; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    padding-top: 0; 
    margin-top: -1rem; 
}

.about-name {
    font-family: var(--font-title); 
    font-weight: 700;
    font-size: clamp(3rem, 6vw, 6rem);
    line-height: 1.1;
    color: var(--color-black);
    margin-bottom: 1rem;
}

.about-role {
    font-family: var(--font-title);
    font-size: clamp(1.2rem, 2vw, 2rem);
    color: var(--color-white);
    margin-bottom: 2rem;
    font-weight: 700;
}

.about-desc {
    font-family: var(--font-secondary); 
    color: var(--color-black);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 100%;
    text-align: justify; 
}
.about-desc p { margin-bottom: 15px; }

.about-img-col {
    height: 100%;
    display: flex;
    align-items: flex-end; 
    justify-content: center;
    position: relative;
}

.about-person-img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    filter: drop-shadow(10px 10px 20px rgba(0,0,0,0.2));
}

/* CONTACT VIEW */
#view-contact {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FFFFFF;
}

.contact-container {
    width: 100%; height: 100%;
    display: flex;
    flex-direction: row;
}

.contact-col {
    flex: 1;
    height: 100%;
    position: relative;
}

.contact-left {
    background: #FFFFFF;
    color: var(--color-black);
    padding: 0; 
    display: flex;
    flex-direction: column;
    position: relative; 
}

.contact-info-top {
    z-index: 10;
    padding-left: 6rem;
    padding-right: 2rem;
    padding-top: 8rem; 
}

.contact-subtitle {
    font-family: var(--font-title); 
    font-weight: 700;
    font-size: 3rem;
    margin-bottom: 1rem;
    line-height: 1;
}

.contact-address {
    font-family: var(--font-secondary); 
    font-size: 1rem;
    line-height: 1.5;
    max-width: 400px;
}

.map-container {
    flex: 1; 
    position: relative;
    width: 100%; 
    margin-top: 2rem; 
    display: flex;
    align-items: flex-end; 
}

.map-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.desktop-map { 
    display: block; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    object-position: center bottom;
}
.mobile-map { display: none; }

.contact-right {
    background-color: var(--color-yellow);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem;
}

.contact-call-action {
    color: var(--color-black);
    text-align: left;
}

.contact-call-action h2 {
    font-family: var(--font-title); 
    font-weight: 700;
    font-size: 4rem;
    line-height: 1;
    margin-bottom: 3rem;
}

.contact-details {
    font-family: var(--font-secondary); 
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 4rem;
}

.social-icons {
    display: flex;
    gap: 1.5rem;
}

.icon-link {
    display: inline-block;
    width: 50px;
    height: 50px;
    transition: transform 0.3s ease;
}
.icon-link:hover {
    transform: scale(1.1);
}
.icon-link img {
    width: 100%;
    height: 100%;
    display: block;
}

/* MOBILE ADAPTATION */
@media (max-width: 768px) {
    #view-about { 
        padding: 0 1.5rem; 
        padding-top: 130px; 
        overflow-y: auto !important; 
        display: block;
        height: 100%;
    }
    
    .about-container {
        height: auto; 
        min-height: 100%;
        display: flex;
        flex-direction: column;
    }

    .logo-container.about-pos {
        left: 1.5rem;
        top: 1.5rem; 
    }

    .about-grid {
        display: flex;
        flex-direction: column;
        gap: 1rem; 
        margin-top: 0; 
        flex: 0 0 auto;
        overflow: visible;
        padding-bottom: 2rem; 
    }

    .about-text-col { 
        padding-right: 0; 
        padding-left: 0; 
        text-align: left;
        margin-top: 0;
        padding-top: 0; 
        flex: 0 0 auto; 
    }
    
    .about-img-col { 
        width: 100%; 
        justify-content: flex-end; 
        align-items: flex-end; 
        height: auto;
        margin-top: 2rem;
    }
    
    .about-person-img { 
        max-height: none;
        width: 50%;
        max-width: 100%;
        object-fit: contain;
    }

    .main-menu {
        left: 1.5rem; 
        width: 90%;
    }
    .main-menu li {
        font-size: 10vw; 
        margin-bottom: 2vh; 
        line-height: 1; 
    }

    .project-detail-overlay {
        width: 100%;
        padding: 2rem;
        padding-top: 2rem; 
        overflow-y: auto; 
    }

    .detail-logo {
        display: block;
        margin-bottom: 2rem;
        width: auto;
    }
    .detail-logo img {
        height: 60px;
        width: auto;
        display: block;
        filter: brightness(0);
    }

    .page-title,
    .works-menu-heading {
        left: 5.5rem !important; 
        font-size: 1.5rem;
        top: 2rem;
        line-height: 1;
    }
    
    #page-title, 
    #contact-page-title,
    .works-menu-heading {
        top: 2.8rem; 
    }

    #works-list-full {
        padding-top: 2rem; 
    }
    
    .layer-img { max-width: 55%; } 

    /* =========================================================
       SEPARAÇÃO DE LAYOUTS (DIVS ISOLADAS)
       ========================================================= */

    /* 
       LAYOUT 1: PADRÃO / STANDARD
       Aplica-se a: (Nenhum específico agora, usado como fallback se houver)
       Seletor EXCLUINDO: Video, Design G, Web, Branding, Sinalizacao, Festas
    */
    #view-category:not([data-active-cat="edicao-video"]):not([data-active-cat="design-grafico"]):not([data-active-cat="design-web"]):not([data-active-cat="branding"]):not([data-active-cat="sinalizacao"]):not([data-active-cat="festas-eventos"]) .work-item {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        position: absolute; 
        top: 0; left: 0; width: 100%;
    }

    #view-category:not([data-active-cat="edicao-video"]):not([data-active-cat="design-grafico"]):not([data-active-cat="design-web"]):not([data-active-cat="branding"]):not([data-active-cat="sinalizacao"]):not([data-active-cat="festas-eventos"]) .layer {
        position: absolute !important;
    }

    #view-category:not([data-active-cat="edicao-video"]):not([data-active-cat="design-grafico"]):not([data-active-cat="design-web"]):not([data-active-cat="branding"]):not([data-active-cat="sinalizacao"]):not([data-active-cat="festas-eventos"]) .layer-img {
        max-width: 85% !important; 
        width: auto;
        top: 50%; 
        left: 50%;
        transform: translate(-50%, -50%) !important; 
    }
    
    #view-category:not([data-active-cat="edicao-video"]):not([data-active-cat="design-grafico"]):not([data-active-cat="design-web"]):not([data-active-cat="branding"]):not([data-active-cat="sinalizacao"]):not([data-active-cat="festas-eventos"]) .layer-text {
        top: 75% !important;
        font-size: 1.5rem !important;
    }

    #view-category:not([data-active-cat="edicao-video"]):not([data-active-cat="design-grafico"]):not([data-active-cat="design-web"]):not([data-active-cat="branding"]):not([data-active-cat="sinalizacao"]):not([data-active-cat="festas-eventos"]) .nav-arrow.top {
        top: 16vh !important; 
    }
    #view-category:not([data-active-cat="edicao-video"]):not([data-active-cat="design-grafico"]):not([data-active-cat="design-web"]):not([data-active-cat="branding"]):not([data-active-cat="sinalizacao"]):not([data-active-cat="festas-eventos"]) .nav-arrow.bottom {
        bottom: 2rem;
    }
    
    #view-category:not([data-active-cat="edicao-video"]):not([data-active-cat="design-grafico"]):not([data-active-cat="design-web"]):not([data-active-cat="branding"]):not([data-active-cat="sinalizacao"]):not([data-active-cat="festas-eventos"]) .side-label.left {
        left: 0 !important; 
        transform: translateY(-50%) rotate(90deg);
    }
    #view-category:not([data-active-cat="edicao-video"]):not([data-active-cat="design-grafico"]):not([data-active-cat="design-web"]):not([data-active-cat="branding"]):not([data-active-cat="sinalizacao"]):not([data-active-cat="festas-eventos"]) .side-label.right {
        right: 0 !important; 
        transform: translateY(-50%) rotate(270deg);
    }

    /* 
       LAYOUT 2: EDIÇÃO DE VÍDEO (FLEX COLUMN)
       Aplica-se a: Apenas edicao-video
    */
    #view-category[data-active-cat="edicao-video"] .work-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 6rem; /* Espaço pro título da página */
        height: 100%;
        position: absolute;
        top: 0; left: 0; width: 100%;
    }

    #view-category[data-active-cat="edicao-video"] .layer {
        position: relative !important;
        transform: none !important;
        width: 100% !important;
        top: auto !important;
        left: auto !important;
        margin-bottom: 1rem;
    }

    /* ORDENAÇÃO DA PILHA DE VÍDEO */
    #view-category[data-active-cat="edicao-video"] .layer-text {
        order: 1;
        font-size: 1.5rem !important;
        margin-bottom: 1rem;
        top: auto !important;
    }
    
    #view-category[data-active-cat="edicao-video"] .video-embed-container {
        order: 2;
        width: 90vw !important;
        height: auto !important;
        max-height: 40vh;
        margin: 0 auto 1.5rem auto !important;
        pointer-events: auto !important;
    }
    
    #view-category[data-active-cat="edicao-video"] .nav-arrow.top {
        order: 3;
        position: relative;
        top: auto; left: auto;
        transform: none;
        margin-bottom: 1rem;
    }
    
    #view-category[data-active-cat="edicao-video"] .nav-side-wrapper {
        order: 4;
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
        padding: 0 1rem;
        margin-bottom: 1rem;
    }
    
    #view-category[data-active-cat="edicao-video"] .side-label {
        position: relative;
        top: auto; left: auto; right: auto;
        transform: none !important;
        writing-mode: horizontal-tb;
    }
    
    #view-category[data-active-cat="edicao-video"] .nav-arrow.bottom {
        order: 5;
        position: relative;
        top: auto; bottom: auto; left: auto;
        transform: none;
    }

    /* 
       LAYOUT 3: DESIGN GRÁFICO
       Aplica-se a: Apenas design-grafico
    */
    #view-category[data-active-cat="design-grafico"] .work-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 6rem;
        height: 100%;
        position: absolute;
        top: 0; left: 0; width: 100%;
    }

    #view-category[data-active-cat="design-grafico"] .layer {
        position: relative !important;
        transform: none !important;
        width: 100% !important;
        top: auto !important;
        left: auto !important;
        margin-bottom: 1rem;
    }

    #view-category[data-active-cat="design-grafico"] .layer-text {
        order: 1;
        font-size: 1.5rem !important;
        margin-bottom: 1rem;
        top: auto !important;
    }
    
    #view-category[data-active-cat="design-grafico"] .layer-img {
        order: 2;
        width: 100% !important; 
        max-width: 95vw !important; 
        height: auto !important;
        max-height: 65vh; 
        margin: 0 auto 1.5rem auto !important;
        object-fit: contain;
        transform: none !important;
    }
    
    #view-category[data-active-cat="design-grafico"] .nav-arrow.top {
        order: 3;
        position: relative;
        top: auto; left: auto;
        transform: none;
        margin-bottom: 1rem;
    }
    
    #view-category[data-active-cat="design-grafico"] .nav-side-wrapper {
        order: 4;
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
        padding: 0 1rem;
        margin-bottom: 1rem;
    }
    
    #view-category[data-active-cat="design-grafico"] .side-label {
        position: relative;
        top: auto; left: auto; right: auto;
        transform: none !important;
        writing-mode: horizontal-tb;
    }
    
    #view-category[data-active-cat="design-grafico"] .nav-arrow.bottom {
        order: 5;
        position: relative;
        top: auto; bottom: auto; left: auto;
        transform: none;
    }

    /* 
       LAYOUT 4: DESIGN WEB (SPECIFIC)
       Aplica-se a: Apenas design-web
    */
    #view-category[data-active-cat="design-web"] .work-item {
        display: flex;
        flex-direction: column;
        justify-content: center; /* Center content vertically */
        align-items: center;
        height: 100%;
        position: absolute;
        top: 0; left: 0; width: 100%;
    }

    /* 1. UP ARROW - Moved higher to clear video */
    #view-category[data-active-cat="design-web"] .nav-arrow.top {
        position: absolute;
        top: 12vh !important; /* Higher than standard 16vh */
        z-index: 20;
    }

    /* 2. VIDEO (Layer Img) - Order 1 */
    #view-category[data-active-cat="design-web"] .layer-img {
        position: relative !important;
        order: 1;
        width: auto;
        /* EDITAR AQUI: CONTROLE DE TAMANHO DA IMAGEM DESIGN WEB MOBILE */
        max-width: 100vw !important; /* LARGURA */
        max-height: 70vh; /* ALTURA */
        
        object-fit: contain;
        margin: 9rem auto 1rem auto; /* EDITAR AQUI: MARGEM (Topo, Dir, Base, Esq) */
        transform: none !important;
    }

    /* 3. TITLE (Layer Text) - Order 2 (Below Video) */
    #view-category[data-active-cat="design-web"] .layer-text {
        position: relative !important;
        order: 2;
        top: auto !important;
        left: auto !important;
        font-size: 1.5rem !important;
        margin-bottom: 4rem; /* Buffer for down arrow */
        width: 80%;
    }

    /* 4. DOWN ARROW - Absolute Bottom */
    #view-category[data-active-cat="design-web"] .nav-arrow.bottom {
        position: absolute;
        bottom: 2rem;
        z-index: 20;
    }

    /* 5. SIDE BUTTONS - Absolute with Wrapper */
    #view-category[data-active-cat="design-web"] .nav-side-wrapper {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        pointer-events: none;
    }
    #view-category[data-active-cat="design-web"] .side-label {
        pointer-events: auto;
        position: absolute;
        top: 50%;
    }
    
    /* Works Button: Closer to Left Border */
    #view-category[data-active-cat="design-web"] .side-label.left {
        left: -15px !important; /* UPDATED: Pushed closer to edge from -10px to -15px */
        transform: translateY(-50%) rotate(90deg);
    }
    
    /* Right Button: Standard */
    #view-category[data-active-cat="design-web"] .side-label.right {
        right: 0 !important;
        transform: translateY(-50%) rotate(270deg);
    }

    /* 
       LAYOUT 5: BRANDING (SPECIFIC)
       Aplica-se a: Apenas branding
    */
    #view-category[data-active-cat="branding"] .work-item {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        position: absolute; 
        top: 0; left: 0; width: 100%;
    }

    #view-category[data-active-cat="branding"] .layer-img {
        /* EDITAR AQUI: CONTROLE DE TAMANHO DA IMAGEM BRANDING MOBILE */
        max-width: 85% !important; /* LARGURA */
        max-height: 60vh; /* ALTURA (Adicionado limite para não invadir texto) */
        
        width: auto;
        position: absolute !important;
        top: 50%; 
        left: 50%;
        transform: translate(-50%, -50%) !important; 
    }

    #view-category[data-active-cat="branding"] .side-label.left {
        left: -22px !important; 
        transform: translateY(-50%) rotate(90deg);
    }

    #view-category[data-active-cat="branding"] .side-label.right {
        right: -6px !important; 
        transform: translateY(-50%) rotate(270deg);
    }

    /* EDITAR AQUI: POSIÇÃO E TAMANHO DO TÍTULO BRANDING */
    #view-category[data-active-cat="branding"] .layer-text {
        top: 80% !important; /* POSIÇÃO VERTICAL (Quanto maior %, mais pra baixo) */
        font-size: 1.5rem !important; /* TAMANHO DA FONTE */
    }

    /* EDITAR AQUI: POSIÇÃO DAS SETAS BRANDING */
    #view-category[data-active-cat="branding"] .nav-arrow.top {
        top: 14vh !important; /* POSIÇÃO SETA CIMA */
    }
    #view-category[data-active-cat="branding"] .nav-arrow.bottom {
        bottom: 5rem !important; /* POSIÇÃO SETA BAIXO */
    }

    /* 
       LAYOUT 6: SINALIZAÇÃO (SPECIFIC)
       Aplica-se a: Apenas sinalizacao
    */
    #view-category[data-active-cat="sinalizacao"] .work-item {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        position: absolute; 
        top: 0; left: 0; width: 100%;
    }

    /* IMAGEM */
    #view-category[data-active-cat="sinalizacao"] .layer-img {
        max-width: 85% !important; 
        width: auto;
        max-height: 70vh; 
        position: absolute !important;
        top: 50%; 
        left: 50%;
        transform: translate(-50%, -50%) !important; 
    }

    /* SETAS DE NAVEGAÇÃO SINALIZAÇÃO */
    #view-category[data-active-cat="sinalizacao"] .nav-arrow.top {
        top: 14vh !important; /* EDITE AQUI */
    }
    #view-category[data-active-cat="sinalizacao"] .nav-arrow.bottom {
        bottom: 2rem !important; /* EDITE AQUI */
    }

    /* BOTÕES LATERAIS */
    #view-category[data-active-cat="sinalizacao"] .side-label.left {
        /* TRABALHOS */
        left: -22px !important; /* EDITE A POSIÇÃO */
        transform: translateY(-50%) rotate(90deg);
    }
    #view-category[data-active-cat="sinalizacao"] .side-label.right {
        /* SOBRE */
        right: -6px !important; /* EDITE A POSIÇÃO */
        transform: translateY(-50%) rotate(270deg);
    }
    
    /* TITULO */
    #view-category[data-active-cat="sinalizacao"] .layer-text {
        top: 83% !important;
        font-size: 1.5rem !important;
    }


    /* 
       LAYOUT 7: FESTAS E EVENTOS (SPECIFIC)
       Aplica-se a: Apenas festas-eventos
    */
    #view-category[data-active-cat="festas-eventos"] .work-item {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        position: absolute; 
        top: 0; left: 0; width: 100%;
    }

    /* IMAGEM */
    #view-category[data-active-cat="festas-eventos"] .layer-img {
        max-width: 85% !important; 
        width: auto;
        max-height: 70vh; 
        position: absolute !important;
        top: 50%; 
        left: 50%;
        transform: translate(-50%, -50%) !important; 
    }

    /* SETAS DE NAVEGAÇÃO FESTAS */
    #view-category[data-active-cat="festas-eventos"] .nav-arrow.top {
        top: 14vh !important; /* EDITE AQUI */
    }
    #view-category[data-active-cat="festas-eventos"] .nav-arrow.bottom {
        bottom: 2rem !important; /* EDITE AQUI */
    }

    /* BOTÕES LATERAIS */
    #view-category[data-active-cat="festas-eventos"] .side-label.left {
        /* TRABALHOS */
        left: -22px !important; /* EDITE A POSIÇÃO */
        transform: translateY(-50%) rotate(90deg);
    }
    #view-category[data-active-cat="festas-eventos"] .side-label.right {
        /* SOBRE */
        right: -6px !important; /* EDITE A POSIÇÃO */
        transform: translateY(-50%) rotate(270deg);
    }

    /* TITULO */
    #view-category[data-active-cat="festas-eventos"] .layer-text {
        top: 83% !important;
        font-size: 1.5rem !important;
    }


    /* Ajustes Gerais Mobile */
    
    /* CONTACT VIEW MOBILE */
    .contact-container {
        flex-direction: column;
    }
    
    .contact-left {
        height: 50vh;
        padding: 0; 
        justify-content: flex-start;
    }
    
    .desktop-map { display: none; }
    
    .mobile-map { 
        display: block; 
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 1; 
    } 
    
    .contact-left .map-container {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        z-index: 0;
        margin-top: 0; 
    }
    
    .contact-info-top {
        position: relative;
        z-index: 5;
        margin-top: 7rem; 
        margin-left: 4rem; 
        margin-right: 1.5rem;
        padding: 1.5rem;
        background: rgba(255, 255, 255, 0.85); 
        border-radius: 8px; 
    }

    .contact-right {
        height: 50vh;
        padding: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: center; 
        align-items: center;
        text-align: center;
    }
    
    .contact-call-action {
        text-align: center;
        width: 100%;
    }
    
    .contact-call-action h2 { font-size: 2.5rem; margin-bottom: 1.5rem; }
    .contact-details { margin-bottom: 2rem; font-size: 1rem; }
    
    .social-icons {
        display: flex;
        justify-content: center; 
        gap: 1.5rem;
        width: 100%;
        margin-top: 3rem; 
    }
    
    .icon-link { width: 40px; height: 40px; }

    #global-ui.ui-inverted .logo-container img {
        filter: brightness(0) invert(0) !important;
    }
}

/* SIMPLE VIEW Generic */
.simple-content {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--color-black);
}