body {
    line-height: normal;
    margin: 0;
    padding: 0;
}

/* Esta classe agora controla todas as páginas desse estilo */
.project-page {
    max-width: 1300px !important;
    margin: 0 auto;
    padding: 70px 2% !important;
    text-align: center;
    width: 100%;
    background: transparent !important;
}

/* Título da Página (Ex: Advertising, VFX, Cinematic) */
.page-title {
    font-family: 'IM Fell English SC', serif;
    font-size: 36px;
    letter-spacing: 4px;
    margin: 30px 0 70px;
    color: white;
    text-transform: lowercase;
    font-weight: 400;
}

/* ==========================================================================
   LAYOUT DE VÍDEOS
   ========================================================================== */

.main-video {
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto 150px !important;
    cursor: pointer;
    display: block;
}

.video-preview-container {
    position: relative;
    width: 100% !important;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    cursor: pointer;
}

.main-video-fixed {
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}


/* Ícone de Play Central */
.play-icon-central {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-image: url('/_image/icons/play_icon.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 5;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.video-preview-container:hover .play-icon-central {
    transform: translate(-50%, -50%) scale(1.1); /* Dá um leve aumento no ícone */
    opacity: 0.9;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    /* Proporção 16:9 */
    height: 0;
    overflow: hidden;
    /* Moldura branca do seu layout */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    image-rendering: -webkit-optimize-contrast;
}

.vertical-video-container {
    position: relative;
    width: 100%;
    max-width: 400px; /* Limita a largura para não ficar gigante em telas grandes */
    margin: 0 auto;
    padding-bottom: 177.78%; /* Isso cria a proporção exata de 9:16 (16 / 9 * 100) */
    height: 0;
    overflow: hidden;
    aspect-ratio: 9 / 16;
}
.vertical-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%!important;
    height: 100%!important;
    border: none;
    display: block;
}

.vertical-video-holder {
    max-width: 450px !important; /* Garante que o holder acompanhe a largura */
}

/* Estilo base para os ícones do Hover */
.custom-icon {
    width: 40px;
    /* Ajuste o tamanho conforme seu ícone */
    height: 40px;
    margin: 0 auto 10px auto;
    /* Centraliza e dá espaço para o texto abaixo */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Classe para o ícone de PLAY */
.icon-play-custom {
    background-image: url('/_image/icons/play_icon.png');
}

/* Classe para o ícone de IMAGEM */
.icon-image-custom {
    background-image: url('/_image/icons/photo_icon.png');
}

.icon-page-custom {
    background-image: url('/_image/icons/page_icon.png');
}

/* ==========================================================================
   iICONES DOS SOFTWARES

   ========================================================================== */

.software-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    
}

.icon-wrapper {
    position: relative; /* Base para o balão */
    display: inline-block;
}

.icon-wrapper img {
    height: 35px;
    width: auto;
    display: block;
    transition: transform 0.2s;
    cursor: pointer;
}

.icon-wrapper:hover img {
    transform: scale(1.1);
}

/* O BALÃO (TOOLTIP) */
.icon-wrapper::after {
    content: attr(data-title);
    position: absolute;
    top: 130%; /* Aparece embaixo */
    left: 50%;
    transform: translateX(-50%);
    
    background-color: rgba(26, 26, 26, 0.9);
    color: #fff;
    padding: 6px 12px;
    font-size: 17px;
    white-space: nowrap;
    border-radius: 8px; /* Arredondado */
    border: none; /* Sem borda */
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    z-index: 100;
    
}

/* MOSTRAR NO HOVER */
.icon-wrapper:hover::after {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   GRIDS
   ========================================================================== */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 100px;
}

.grid-item {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #111;
    overflow: hidden;
    cursor: pointer;
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   HOVERS
   ========================================================================== */

.hover-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centraliza horizontalmente o ícone e a info-box */
    justify-content: center;
    /* Centraliza verticalmente */
    width: 100%;
}

.item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 11;
    /* O hover fica um pouco acima */
}

/* Mude de .grid-item para algo que aceite ambas as páginas */
.grid-item:hover .item-overlay,
.portfolio-item:hover .item-overlay {
    opacity: 1;
}

.info-box {
    border: 1px solid white;
    width: 85%;
    margin: 1px auto 10px auto;

    /* 4. Use PADDINGS IGUAIS para garantir centralização vertical */
    /* Exemplo: 12px em cima/baixo e 15px nas laterais */
    padding: 12px 15px;

    /* Garante que o padding não mude o tamanho total do box */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.info-box p {
    font-size: 10px;
    color: #999;
}

.info-box h3 {
    font-weight: 400;
    text-transform: none !important;
    font-family: 'Gentium Book Basic', serif !important;
    font-size: 16px !important;

    /* 1. Zere as margens para o navegador não empurrar o texto */
    margin: 0 !important;

    /* 2. Ajuste a altura da linha para o tamanho da fonte */
    line-height: 1.2;

    /* 3. Centralização horizontal */
    text-align: center;

}

.studio-name {
    font-weight: 400;
    font-family: 'Gentium Book Basic', serif !important;
    text-transform: none !important;
    color: white;
    /* Ou #bbb como estava antes */
    font-size: 16px !important;
    margin: 0;
    text-align: center;
    /* Se quiser a sombra leve igual na sua imagem de referência: */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.icon-play,
.icon-image {
    width: 35px;
    height: 35px;
    border: 1px solid white;
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
}

.icon-play::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 14px;
    border-style: solid;
    border-width: 7px 0 7px 11px;
    border-color: transparent transparent transparent white;
}

/* ==========================================================================
   MODAL DE VÍDEO (VIMEO/YOUTUBE)
   ========================================================================== */

.modal-overlay {
    /* O 'fixed' garante que ele ignore qualquer container e use a tela toda */
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Um valor absurdamente alto para passar por cima de qualquer vídeo */
    z-index: 999 !important;      
    /* Alinhamento central */
    display: none;
    justify-content: center;
    align-items: center;

    /* O último número (0.8) controla a opacidade (de 0 a 1) */
    background-color: rgba(0, 0, 0, 0.85) !important; 
    
    /* Opcional: Adiciona um efeito de desfoque (blur) no fundo */
    backdrop-filter: blur(5px); 
    -webkit-backdrop-filter: blur(5px); /* Para compatibilidade com Safari */
    overflow-y: auto;    
    padding-top: 100px;
    
}



.modal-overlay img, 
.modal-overlay iframe {
    margin-top: 20px; /* Afasta o conteúdo do topo do modal */
    max-height: 70vh; /* Evita que a imagem ocupe a tela inteira e esconda o texto */
    width: auto;
}

.modal-body {
    
    width: 100%;
    max-width: 1300px;
    position: relative;
    display: flex;           /* Adicione isso */
    flex-direction: column;  /* Adicione isso */
    align-items: center;     /* Centraliza horizontalmente tudo que estiver dentro */
    justify-content: center; /* Centraliza verticalmente */
}

.modal-body.gallery-view {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.media-holder {
    width: 100% !important;
    max-width: 900px; /* Alinhado com seu padrão */
    margin: 0 auto;
    display: block !important;
}

.vimeo-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* Proporção 16:9 */
    height: 0;
    overflow: visible;    
    max-width: 100%;
    background: #000;
    image-rendering: -webkit-optimize-contrast;
}

.vimeo-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

.close-btn {
    position: fixed !important; /* Mantém o botão fixo na tela, independente do scroll */
    top: 20px !important;
    right: 30px !important;
    z-index: 9999 !important;    /* Garante que ele fique acima de TUDO (vídeos, imagens, etc) */
    font-size: 50px !important;  /* Aumenta o tamanho para facilitar o clique no mobile */
    cursor: pointer !important;
    color: white !important;
    padding: 10px !important;    /* Cria uma área de clique maior ao redor do 'X' */
    background: rgba(0, 0, 0, 0.5); /* Adiciona um fundo escuro suave para destacar o 'X' */
    border-radius: 50%;
    line-height: 1;
}

#modal-reel .modal-body {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza o vídeo verticalmente */
    height: 100%;            /* Garante que ele use a altura total do modal */
    margin-top: 0;           /* Remove margens desnecessárias sem o texto */
}

/* Garante que o título do topo também não empurre o vídeo para baixo demais */
#modal-reel .modal-header-title {
    position: absolute;
    top: 40px;
    left: 50px;
}

/* ==========================================================================
   OUTRAS CONFIGS
   ========================================================================== */
/* CAIXA TÉCNICA (BAHIA/FIAT/VALE) */
.tech-info-box {
    background: rgba(26, 26, 26, 0.7);
    border-radius: 10px;
    padding: 30px;    /*espaço do texto para a borda*/
    font-family: 'Gentium Book Basic', serif !important;
    font-size: 20px;
    width: 100%;             /* Mude para 100% ou um valor fixo */
    max-width:800px;        /* Ajuste para alinhar com a largura do vídeo/imagem */
    box-sizing: border-box;  /* Garante que o padding não aumente a largura */
    margin: 60px auto 0 auto !important;     
    text-align: center;      /*Ou center, dependendo do teu gosto */
    line-height: 1.6;
}

.highlight {
    color: oklch(78.59% 0.082 94.39);
    font-weight: 400;
    text-decoration: none !important;
}

.software-list {
    font-size: 0.8rem;
    margin: 15px 0;
    color: #888;
}

/* CARROSSEL */
.carousel-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 900px; /* Alinhado com o padrão dos seus vídeos */
    margin: 0 auto;
}

.carousel-img.media-vertical {
    max-height: 70vh;
    width: auto;
    border: 1px solid white;
}

.nav-arrow {
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    z-index: 10;
    transition: opacity 0.3s ease, transform 0.2s ease;
    padding: 0;                       /* Remove espaços internos que podem gerar fundos fantasmas */
    line-height: 1;

    background: none !important;      /* Remove qualquer cor de fundo */
    border: none !important;          /* Remove bordas se existirem */
    color: white !important;          /* Garante que a seta seja branca */
    font-size: 60px !important;
}

.nav-arrow:hover {
    background: oklch(0.45 0.05 160)!important;    
    transform: translateY(-50%) scale(1.1);          /* Leve aumento no tamanho */
    opacity: 1;
}

.left {
    left: -100px; /* Fica dentro da imagem na esquerda */
}

.right {
    right: -100px; /* Fica dentro da imagem na direita */
}

/* Container dos dots */
.carousel-dots {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center;
    
    /* AJUSTE AQUI: aumente o valor para afastar os pontos */
    gap: 10px !important; 
    
    width: 100% !important;
    margin: 20px 0 !important;
}

/* Estilo individual de cada pontinho */
.dot {
    height: 10px;
    width: 10px;
    background-color: rgba(255, 255, 255, 0.3); /* Cinza clarinho quando inativo */
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Estilo do pontinho ativo (foto atual) */
.dot.active {
    background-color: #ffffff; /* Branco puro quando ativo */
    transform: scale(1.3);     /* Fica levemente maior */
}

/* Efeito ao passar o mouse */
.dot:hover {
    background-color: rgba(255, 255, 255, 0.8);
}


.main-media,
.media-horizontal,
.media-vertical {
    border: 1px solid white;
    max-width: 100%;
}

.media-vertical {
    max-height: 60vh;
}

/* =========================================
   GRADE DE CARTAZES (POSTER GRID)
   ========================================= */

.poster-grid {
    display: grid;
    /* Alterado para 6 colunas para reduzir o tamanho individual de cada poster */
    grid-template-columns: repeat(6, 1fr) !important; 
    gap: 20px !important; 
    width: 100%;
    /* Mantemos 1100px para que a grade seja um pouco mais larga que o vídeo (900px) */
    max-width: 1100px !important; 
    margin: 0 auto 100px;
    padding: 0 10px;
}

.poster {
    display: block;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.poster img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Efeito de elevação ao passar o mouse */
.poster:hover {
    transform: translateY(-10px);
}

.poster:hover img {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
}


/* ==========================================================================
   RODAPÉ (FORÇA POSIÇÃO NO FINAL)
   ========================================================================== */
footer {
    position: relative !important;
    margin-top: 100px;
}


.software-icons-footer {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 50px 0; /* Espaço generoso entre os posters e os ícones */    
}

.software-icons-footer .icon-wrapper img {
     height: 35px;
    width: auto;
    display: block;
    transition: transform 0.2s;
    cursor: pointer;
}

.software-icons-footer .icon-wrapper:hover img {    
    opacity: 1;
    transform: scale(1.2);
}

/* Reutilizando o Tooltip que criamos */
.software-icons-footer .icon-wrapper::after {
    content: attr(data-title);
    position: absolute;
    top: 130%; /* Aparece embaixo */
    left: 50%;
    transform: translateX(-50%);
    
    background-color: rgba(26, 26, 26, 0.9);
    color: #fff;
    padding: 6px 12px;
    font-size: 17px;
    white-space: nowrap;
    border-radius: 8px; /* Arredondado */
    border: none; /* Sem borda */
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    z-index: 100;

    font-family: 'Gentium Book Basic', serif !important;
    text-transform: none !important;
}

.software-icons-footer .icon-wrapper:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Esconde o título por padrão em todas as telas (Desktop) */
.mobile-only-title {
    display: none;
}

@media (max-width: 768px) {
    /* 1. Ajuste do container principal */
    .project-page {
        padding: 20px 5% !important; /* Reduz o respiro lateral do desktop */
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* 2. Reduz o título principal (Ex: ADVERTISING) */
    .page-title {
        font-size: 28px !important;
        margin: 10px 0 40px !important; 
        letter-spacing: 2px !important;
            

    }

    /* 3. Transforma a Grade em uma Coluna Única */
    .projects-grid {
        display: flex !important;
        flex-direction: column !important; /* Empilha os projetos verticalmente */
        align-items: center !important;    /* Centraliza os posters */
        gap: 45px !important;              /* Espaço entre um projeto e outro */
        margin: 0 auto !important;
        width: 100% !important;
    }

    /* 4. Ajuste de cada Item da Grade (Poster + Texto) */
    .grid-item {
        width: 100% !important;
        max-width: 420px !important;       /* Limite para o poster não ficar gigante */
        margin: 0 !important;
        text-align: center !important;
    }

    /* 5. Garante que as imagens dentro do grid-item ocupem a largura total */
    .grid-item img {
        width: 100% !important;
        height: auto !important;
        display: block;
        margin-bottom: 12px !important;    /* Espaço entre a imagem e o texto abaixo */
    }

    /* 6. Ajuste das legendas (Parágrafos dentro do grid-item) */
    .grid-item p {
        font-size: 14px !important;
        letter-spacing: 1px !important;
        line-height: 1.4 !important;
        color: white;
    }
    .mobile-only-title {
        display: block !important; /* Faz aparecer apenas no celular */
        font-family: 'IM Fell English SC', serif;
        font-size: 16px;
        color: white;
        text-align: center;
        letter-spacing: 3px;
        text-transform: uppercase;
        
        /* Linhas laterais ou bordas para separar bem (opcional) */
        margin: 10px 0 20px; 
        padding-bottom: 10px;
        margin-top: 70px !important;
        
    }

    .main-video {
        /* Diminui este valor para aproximar o título do vídeo */
        margin-bottom: 20px !important; 
    }

   .poster-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important; /* CRIA AS 4 COLUNAS */
        gap: 10px !important;                             /* Espaço pequeno entre os posters */
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

.software-icons-footer {
        display: flex !important;
        flex-wrap: wrap !important;     /* PERMITE QUEBRA DE LINHA */
        justify-content: center !important; /* CENTRALIZA OS ÍCONES NAS NOVAS LINHAS */
        gap: 15px !important;           /* ESPAÇO ENTRE OS ÍCONES */
        padding: 0 10px !important;     /* EVITA QUE ELES ENCOSTEM NA BORDA DO CELULAR */
        margin-top: 100px !important;
        margin-bottom: -30px !important;
    }

    .software-icons-footer .icon-wrapper {
        flex: 0 0 auto !important;      /* IMPEDE QUE OS ÍCONES SEJAM ESMAGADOS */
    }

    .software-icons-footer .icon-wrapper img {
        width: 35px !important;         /* AJUSTA O TAMANHO DOS ÍCONES PARA O MOBILE */
        height: auto !important;
    }








}