/* =========================================
   CONFIGURAÇÕES GERAIS
   ========================================= */
*, *::before, *::after {
    box-sizing: border-box; /* Previne que o padding empurre os elementos para fora da tela */
}

html {
    overflow-x: hidden; /* Impede a rolagem horizontal indesejada */
    overflow-y: scroll; /* Força o trilho da rolagem a sempre existir, impedindo que o menu pule para os lados nas trocas de página */
}

/* Adicionado via JavaScript apenas após a página carregar para evitar o bug do F5 descendo sozinho */
html.smooth-scroll {
    scroll-behavior: smooth; 
}

body.no-scroll, html.no-scroll { overflow: hidden !important; } 

body { 
    background-color: #121212; 
    color: #ffffff; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    margin: 0; padding: 70px 0 0 0; /* Reduzido para colar os elementos mais próximos ao menu */
    display: flex; flex-direction: column; align-items: center; 
    overflow-x: hidden; /* Trava de segurança para garantir que nada vaze para as laterais */
    width: 100%;
}

/* =========================================
   BACKGROUND PARALLAX
   ========================================= */
#parallax-bg {
    position: fixed;
    top: -30px; /* Margem extra (sangria) para mover sem mostrar corte */
    left: -30px;
    width: calc(100vw + 60px); /* Compensa a sangria */
    height: calc(100vh + 60px);
    background-image: url('./assets/img/backgrounds/jxbackground.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1; /* Mantém atrás de tudo no site */
    pointer-events: none; /* Não interfere nos cliques */
    will-change: transform; /* Otimiza o uso da GPU (Placa de vídeo) */
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1); /* A MÁGICA: Cria o delay elástico e suave no parallax */
}

/* =========================================
   ANIMAÇÃO DE ENTRADA DAS PÁGINAS
   ========================================= */
@keyframes pageFadeZoom {
    from { opacity: 0; transform: scale(0.96) translateY(15px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

main {
    animation: pageFadeZoom 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.container-home { width: 90%; max-width: 1200px; margin-top: 15px; }

/* =========================================
   MENU E CABEÇALHO
   ========================================= */
.menu-principal { 
    display: flex; 
    justify-content: center; 
    gap: 50px; 
    padding: 20px 0; 
    width: 100%; 
    
    /* Transformado em Fixed para flutuar de verdade sobre o site todo */
    position: fixed; 
    top: 0; 
    left: 0;
    z-index: 990; 
    background-color: rgba(34, 5, 5, 0.37); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    border-bottom: 1px solid rgba(141, 71, 71, 0.13);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.3s; /* Animação suave para subir/descer */
}

/* A classe que esconde o menu quando rolamos para baixo */
.menu-escondido {
    transform: translateY(-100%);
}

/* O resgate das fontes e cores dos links */
.menu-principal a { 
    color: #5c5050; 
    text-decoration: none; 
    font-size: 16px; 
    font-weight: bold; 
    transition: color 0.2s; 
    position: relative; /* Necessário para ancorar o brilho e o separador */
}

/* O separador "|" entre os links */
.menu-principal a:not(:last-child)::after {
    content: "|";
    position: absolute;
    right: -25px; /* Exatamente no meio do gap de 50px */
    transform: translateX(50%);
    color: #5c5050;
    opacity: 0.5; /* Deixa o traço sutil para não chamar mais atenção que o texto */
    pointer-events: none; /* Garante que o | não atrapalhe os cliques */
}

/* O brilho branco para o hover e para a aba selecionada (ativo) */
.menu-principal a:hover, .menu-principal a.ativo { 
    color: #f1d2d2; 
}

/* Animação da luzinha do menu (sabre de luz) */
@keyframes lightSaberOn {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* Brilho sutil vindo por baixo da aba ativa */
.menu-principal a.ativo::before {
    content: "";
    position: absolute;
    bottom: -8px; /* Posição logo abaixo da palavra */
    left: 10%; /* Inicia um pouco para dentro criando um efeito de fade nas pontas */
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ca3737, transparent);
    box-shadow: 0 4px 12px 1px rgba(202, 55, 55, 0.6); /* Glow vermelho neon vindo de baixo */
    border-radius: 50%;
    transform-origin: center; /* Garante que a animação comece do meio */
    animation: lightSaberOn 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* A mágica da animação! */
}

/* =========================================
   GALERIA E CARTÕES 3D (Agora centralizados)
   ========================================= */
.galeria-home { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; /* O segredo para centralizar a última linha! */
    gap: 30px; 
    margin-bottom: 5px; 
}

/* =========================================
   CARROSSEL COVERFLOW (SÓ NA HOME)
   ========================================= */
.galeria-home.modo-carrossel {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 560px; /* Reduzido para diminuir o espaço morto vertical */
    margin-top: -20px; /* Puxa o carrossel pra cima, encostando no título */
    position: relative;
    perspective: 1200px; /* Aumenta a profundidade da perspectiva 3D */
    transform-style: preserve-3d; /* Essencial para o 3D funcionar */
    gap: 0;
    overflow: hidden; /* Garante que as cartas não vazem nas laterais */
    
    /* A mágica do Fade nas bordas laterais da galeria */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}

.galeria-home.modo-carrossel .projeto-card {
    position: absolute;
    width: 380px; /* Cartas maiores no desktop */
    height: auto; /* Removido o 100% que causava corte da imagem ao expandir no hover */
    max-width: 100%;
    flex: none;
    /* Mantém as transições de borda e sombra fluídas, deixando o transform por conta do JS */
    transition: border-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out; 
    will-change: transform, opacity; /* Otimização de performance para o navegador */
    margin: 0;
}

/* Bloqueia a seleção de imagem/texto fantasma durante o arraste */
.galeria-home.modo-carrossel .projeto-card,
.galeria-home.modo-carrossel .projeto-card img {
    user-select: none;
    -webkit-user-drag: none;
}

/* Oculta os títulos das cartas de fundo do carrossel */
.galeria-home.modo-carrossel .projeto-card .card-titulo {
    opacity: 0;
    transition: opacity 0.25s ease-in-out; /* Um meio-termo perfeito: suave mas perceptível */
}
.galeria-home.modo-carrossel .projeto-card.ativo .card-titulo {
    opacity: 1;
}

/* Muda o cursor e desliga TOTALMENTE o motor CSS durante o arraste livre */
.galeria-home.modo-carrossel.dragging {
    transition: none !important;
    cursor: grabbing;
}
.galeria-home.modo-carrossel.dragging .projeto-card {
    transition: border-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out !important;
    cursor: grabbing;
}

/* Estados Magnéticos do Carrossel */
.carrossel-item.center {
    transform: translateX(0) scale(1);
    z-index: 5;
    opacity: 1;
}
.carrossel-item.left-1 {
    transform: translateX(-65%) scale(0.85);
    z-index: 4;
    opacity: 0.8;
}
.carrossel-item.right-1 {
    transform: translateX(65%) scale(0.85);
    z-index: 4;
    opacity: 0.8;
}
.carrossel-item.left-2 {
    transform: translateX(-110%) scale(0.7);
    z-index: 3;
    opacity: 0.5;
}
.carrossel-item.right-2 {
    transform: translateX(110%) scale(0.7);
    z-index: 3;
    opacity: 0.5;
}
.carrossel-item.hidden-left { transform: translateX(-130%) scale(0.5); z-index: 1; opacity: 0; pointer-events: none; }
.carrossel-item.hidden-right { transform: translateX(130%) scale(0.5); z-index: 1; opacity: 0; pointer-events: none; }

.projeto-card {
    /* Faz o card crescer e encolher, mas define um tamanho ideal */
    flex: 1 1 380px;
    max-width: 420px; /* Impede que um card sozinho fique gigante ocupando a tela toda */
    width: 100%;
    
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    aspect-ratio: 4 / 5;
    
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.1s ease-out, border-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}

@keyframes fadeUpIn {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}


.projeto-card:hover {
    border-color: #ca3737;
    box-shadow: 0 15px 30px rgba(202, 55, 55, 0.4); /* Glow vermelho para acompanhar a borda */
}

.projeto-card img {
    position: absolute; /* Descola a imagem da física do site para evitar o achatamento inicial */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    /* Removido o transition e o :hover daqui. A imagem agora fica quieta por dentro! */
}

/* O Resgate dos Títulos */
.card-titulo {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
    pointer-events: none;
    z-index: 10; /* Garante que o texto fique por cima da imagem */
    transform: translateZ(30px); /* DEVOLVIDO O EFEITO 3D DO TEXTO FLUTUANDO! */
}
/* =========================================
   EFEITO DE TROCA DE IMAGEM NO HOVER
   ========================================= */

/* A imagem secundária (que fica escondida) */
.projeto-card .img-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; /* Começa 100% invisível */
    transition: opacity 0.3s ease-in-out; /* Transição suave de fade */
    z-index: 1; /* Fica acima da imagem principal, mas abaixo do título */
}

/* Transição secundária ocorre SOMENTE na carta ativa no carrossel (ou em todas fora dele) */
.projeto-card.ativo:hover .img-hover,
.galeria-home:not(.modo-carrossel) .projeto-card:hover .img-hover {
    opacity: 1;
}

/* =========================================
   MODAL (JANELA DE PROJETO)
   ========================================= */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); z-index: 1000; justify-content: center; align-items: center; animation: fadeIn 0.2s ease-out; }
/* 1. Modal Gigante Estilo ArtStation */
.modal-conteudo { 
    background-color: transparent; 
    padding: 0; 
    /* O min() garante que NUNCA vai ultrapassar 95% da tela, mesmo que a imagem seja gigante */
    max-width: min(1600px, 95vw); 
    width: 95%; 
    height: 90vh; 
    position: relative; 
    animation: popIn 0.3s ease-out; 
    min-width: 0; /* Previne que o Flexbox do fundo estique essa caixa para fora do monitor */
}

/* MANTIDO: O esqueleto interno do Modal */
.modal-layout { 
    display: grid; 
    grid-template-columns: minmax(0, 1fr) 340px; /* minmax(0, 1fr) impede a galeria de vazar e empurrar a barra direita pra fora! */
    gap: 20px; 
    height: 100%;
    width: 100%;
    max-width: 100%;
} 

.modal-galeria-scroll { 
    background-color: rgba(10, 10, 10, 0.6); 
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 16px; 
    padding: 20px; 
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    overflow-y: auto; 
    min-width: 0; /* Trava de segurança para garantir que a galeria não ultrapasse o limite imposto */
    overflow-x: hidden; /* Corta qualquer imagem que tente alargar o eixo X */
    box-sizing: border-box;
}

/* 2. O Segredo da Proporção (Horizontal vs Vertical) */
.modal-galeria-scroll img,
.modal-galeria-scroll video {
    max-width: 100%; 
    max-height: 85vh; 
    width: auto; 
    height: auto; 
    object-fit: contain; 
    margin: 0 auto; 
    display: block;
    border-radius: 8px;
}

/* 3. Força o Marmoset e o YouTube a acompanharem a largura gigante SEM PERDER PROPORÇÃO */
.iframe-responsivo {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 85vh; 
    
    /* A MÁGICA: Se a altura bater em 85vh, ele limita a largura máxima automaticamente para manter o 16:9 perfeito! */
    max-width: min(100%, calc(85vh * (16 / 9))); 
    
    margin: 0 auto;
    display: block;
    border-radius: 8px;
    border: none;
    background-color: #121212;
}

/* Para Personagens 3D no Marmoset (Vertical) */
.viewer-3d {
    height: 85vh; /* Força a altura a ocupar 85% da sua tela */
    width: 63vh;  /* A mágica: 63vh é exatamente a proporção 3:4 de 85vh! */
    max-width: min(100%, 63vh); /* Trava absoluta contra vazamento! */
    margin: 0 auto;
    display: block;
    border-radius: 8px;
    border: none;
    background-color: #121212;
}   

.modal-info-sidebar { 
    background-color: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 16px; 
    padding: 30px; 
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative; /* Segura o botão de fechar aqui dentro */
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.modal-info-sidebar h2 { 
    margin: 0 0 4px 0; /* Reduzido de 10px para 4px para aproximar da descrição */
    font-size: 28px; /* Levemente maior para dar mais destaque */
    color: #ffffff; /* Cor clara e premium da sua paleta */
    letter-spacing: 1px; /* Espaçamento entre letras para um toque sofisticado */
    line-height: 1.3;
    padding-right: 30px; /* Impede o texto longo de bater no botão X */
    text-shadow: 0 0 12px rgba(241, 210, 210, 0.35); /* Brilho bem leve, elegante e difuso */
}

.modal-info-sidebar p {
    color: #cccccc;
    line-height: 1.6;
    margin-bottom: 0; /* Remove a margem padrão para não somar com o espaço de baixo */
}

.fechar-btn { position: absolute; top: 15px; right: 25px; font-size: 20px; font-weight: bold; cursor: pointer; color: #888888; z-index: 1050; }
.fechar-btn:hover { color: #ffffff; }

/* Tags dos Softwares */
.software-tags { margin-top: 20px; border-top: 1px solid #333; padding-top: 15px; }
.software-tags h3 { font-size: 14px; color: #888; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
.tags-container { display: flex; flex-wrap: wrap; gap: 10px; }
.tag {
    background-color: #333;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    display: inline-flex; /* Coloca o ícone e o texto na mesma linha */
    align-items: center;  /* Centraliza verticalmente o ícone com o texto */
    gap: 8px;             /* Dá um espacinho de 8px entre o ícone e a palavra */
}

/* Adicione essa nova regra para controlar o tamanho dos ícones */
.tag img {
    width: 16px; /* Tamanho padrão de ícone */
    height: 16px;
    object-fit: contain;
}

/* =========================================
   SEÇÃO DE PREÇO ESTIMADO (MODAL)
   ========================================= */
.preco-estimado-section {
    margin-top: 20px;
}

.preco-estimado-section h3 {
    font-size: 14px;
    color: #888;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.preco-estimado-section .preco-desc {
    font-size: 12px;
    color: #999;
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 1.4;
    font-style: italic;
}

.preco-tag {
    background-color: rgba(76, 175, 80, 0.1); /* Fundo verde super transparente */
    color: #a5d6a7; /* Verde claro elegante pro texto */
    border: 1px solid #4caf50; /* A borda verde pedida */
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    display: inline-flex;
}

/* Botões de Expandir e Baixar */
.imagem-container { position: relative; display: flex; justify-content: center; width: 100%; max-width: 100%; }
.botoes-overlay { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: rgba(30, 30, 30, 0.85); padding: 6px 12px; border-radius: 6px; display: flex; gap: 15px; width: max-content; opacity: 0; transition: opacity 0.2s ease; }
.imagem-container:hover .botoes-overlay { opacity: 1; }
.botoes-overlay a { color: #ffffff; text-decoration: none; transition: opacity 0.2s; display: flex; align-items: center; justify-content: center; opacity: 0.7; }
.botoes-overlay a:hover { opacity: 1; }
.botoes-overlay a svg { width: 18px; height: 18px; }

/* =========================================
   ANIMAÇÕES E RESPONSIVO
   ========================================= */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 768px) { .modal-layout { grid-template-columns: 1fr; } }

/* =========================================
   CUSTOMIZAÇÃO DA BARRA DE ROLAGEM (SCROLLBAR)
   ========================================= */

/* Para Firefox */
.modal-galeria-scroll {
    scrollbar-width: thin;
    scrollbar-color: #444444 transparent;
}

/* Para Chrome, Edge e Safari */
.modal-galeria-scroll::-webkit-scrollbar {
    width: 8px; /* Deixa a barra bem fininha */
}

.modal-galeria-scroll::-webkit-scrollbar-track {
    background: transparent; /* O "trilho" por onde a barra corre fica invisível */
}

.modal-galeria-scroll::-webkit-scrollbar-thumb {
    background-color: #444444; /* Cor da barrinha (um cinza elegante) */
    border-radius: 10px; /* Deixa as pontas arredondadas */
    /* A borda da mesma cor do fundo cria um "respiro" nas laterais da barra */
    border: 2px solid #1a1a1a; 
}

.modal-galeria-scroll::-webkit-scrollbar-thumb:hover {
    background-color: #666666; /* Fica um pouco mais clara quando o usuário passa o mouse */
}
/* =========================================
   MENU DE FILTROS (PÁGINA WORKS)
   ========================================= */
.menu-filtros {
    display: flex;
    justify-content: center;
    gap: 12px; /* Deixa os botões mais unidos */
    margin-top: 0; /* Zera para aproximar totalmente do menu do topo na aba Works */
    margin-bottom: 30px; /* Respiro mais equilibrado antes da galeria */
    flex-wrap: wrap; /* Se tiver muito filtro no celular, ele quebra a linha bonitinho */
}

/* Adiciona espaço extra no final da página Works */
.menu-filtros:not(.youtube-filtros) + .galeria-home {
    margin-bottom: 40px;
}

.btn-filtro {
    background-color: rgba(34, 5, 5, 0.2);
    color: #cca6a6;
    border: 1px solid rgba(141, 71, 71, 0.2);
    padding: 8px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn-filtro:hover, .btn-filtro.ativo {
    background-color: rgba(141, 71, 71, 0.3);
    color: #f1d2d2;
}

/* Botão "See All Works" da Home */
.btn-ver-todos {
    display: inline-block;
    background-color: rgba(34, 5, 5, 0.37);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #f1d2d2;
    padding: 12px 30px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
    border: 1px solid rgba(141, 71, 71, 0.13);
}

.btn-ver-todos:hover {
    background-color: rgba(141, 71, 71, 0.3);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Setinhas do Modal */
.seta-modal {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 20px;
    user-select: none;
    transition: color 0.3s, transform 0.2s;
    z-index: 1001; /* Fica acima de tudo */
}

.seta-modal:hover {
    color: #ffffff;
    transform: translateY(-50%) scale(1.2);
}

.seta-esq { left: 2%; }
.seta-dir { right: 2%; }

/* =========================================
   BOTÃO DE PLAY CUSTOMIZADO (GLOW UP)
   ========================================= */
.btn-play-custom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Cores e Efeito de Vidro Premium */
    background-color: rgba(20, 20, 20, 0.6); 
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px);
    
    /* Borda suave com sombra ao invés de uma linha dura */
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.2);
    
    /* O SEGREDO PRA NÃO FICAR ACHATADO */
    box-sizing: border-box; 
    
    /* Tamanho perfeito */
    border-radius: 50%;
    width: 84px;
    height: 84px;
    
    /* O Triângulo */
    color: #ffffff;
    font-size: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 6px; /* Mantém o triângulo centralizado visualmente sem quebrar o círculo */
    
    cursor: pointer;
    transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 5;
}

/* Um hover muito mais satisfatório */
.btn-play-custom:hover {
    background-color: rgba(255, 255, 255, 0.95);
    color: #121212;
    transform: translate(-50%, -50%) scale(1.15); /* Um zoom mais dramático */
    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
}

/* Tente adicionar isso ao seu estilo se o ícone aparecer em outros elementos */
.seu-icone-classe {
    object-fit: contain;
    aspect-ratio: 1 / 1;
}

/* =========================================
   PÁGINA ABOUT ME
   ========================================= */
.about-container { 
    max-width: 900px; 
    margin-top: 15px; 
}

.about-content { 
    display: flex; 
    gap: 40px; 
    align-items: center; 
    margin-bottom: 50px; 
}

.about-portrait { 
    width: 280px; 
    height: 280px; 
    object-fit: cover; 
    border-radius: 16px; 
    border: 2px solid rgba(255, 255, 255, 0.1); 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
}

.about-text h1 { 
    font-size: 36px; 
    margin-top: 0; 
    margin-bottom: 20px; 
    color: #f1d2d2; 
}

.about-text p { 
    font-size: 16px; 
    line-height: 1.6; 
    color: #cca6a6; 
    margin-bottom: 15px; 
}

.skills-section {
    margin-top: 40px;
    margin-bottom: 60px;
}

.skills-section h2 { 
    border-bottom: 1px solid rgba(141, 71, 71, 0.3); 
    padding-bottom: 10px; 
    margin-bottom: 20px; 
    color: #f1d2d2;
}

/* Responsivo para celular */
@media (max-width: 768px) {
    .about-container {
        margin-top: 10px; /* Leve espaço do menu no topo */
    }
    .about-content { 
        flex-direction: column; 
        align-items: center;
        text-align: center;
        gap: 25px; /* Espaço melhor entre a foto e o texto */
        padding: 0 15px; /* Evita que o texto encoste nos limites da tela */
    }
    .about-portrait { 
        width: 180px; 
        height: 180px;
        border-radius: 50%; /* Transforma a foto num círculo elegante no celular */
        border: 3px solid rgba(255, 255, 255, 0.1);
    }
    .about-text h1 {
        font-size: 26px; /* Fonte do título menor e mais elegante no celular */
        margin-bottom: 10px;
    }
    .about-text p {
        font-size: 14px; /* Texto descritivo menor para facilitar a leitura */
        line-height: 1.5;
    }
}

/* =========================================
   ESTILO DO CABEÇALHO DA HOME (Faltava isso!)
   ========================================= */
.cartao-perfil-destaque {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(34, 5, 5, 0.37);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 30px 40px 35px; /* Aumenta o espaço inferior de 25px para 40px */
    border-radius: 16px;
    margin-bottom: 10px; /* Zera o espaço entre o cabeçalho e a galeria */
    border: 1px solid rgba(141, 71, 71, 0.13);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.info-esq {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0; /* Zera o espaço padrão para aproximar os textos */
}

.title-wrapper {
    display: flex;
    align-items: center;
    gap: 10px; /* Espaço entre JEANX e o bonequinho */
    margin-top: -15px; /* Puxa todo o bloco do título para cima, corrigindo o espaço vazio acima dele */
}

.xamurart-icon {
    width: 90px;
    height: 90px;
    object-fit: contain;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.4)); /* Dá um leve destaque e profundidade ao bonequinho para desgrudar do fundo */
}

.info-esq h1 { margin: 0; font-size: 61px; color: #f1d2d2; letter-spacing: 2px; }
.info-esq p { margin: -15px 0 0 0; color: #f12b2b; font-size: 20px; font-style: italic; } /* Ajustado para dar mais respiro entre o título e a descrição */
.info-dir p { color: #cca6a6; text-align: right; line-height: 1.6; margin: 0; font-size: 16px;}

.splash-text {
    font-size: 22px;
    font-style: italic;
    color: #f1d2d2;
    margin: 0 0 8px 0;
    text-align: right;
}

/* =========================================
   OTIMIZAÇÃO GERAL PARA CELULARES (RESPONSIVO)
   ========================================= */
@media (max-width: 768px) {
    #parallax-bg {
        top: 0; left: 0; width: 100vw; height: 100vh; /* Retira a margem extra do celular */
        transform: none !important; /* Desativa a movimentação no touch */
        background-image: url('./assets/img/backgrounds/jxbackground_vertical.png'); /* Carrega a versão vertical no celular */
    }

    .container-home {
        margin-top: 7   px; /* Reduz o espaço no topo na versão celular */
    }

    /* 1. Menu: Links afastados na medida certa */
    .menu-principal {
        flex-wrap: wrap;
        gap: 25px; /* Aumenta o espaço entre os links no celular */
        padding: 15px 10px; /* Reduz o grande espaço vazio acima e abaixo do menu */
    }
    .menu-principal a {
        font-size: 18px; /* Facilita o toque com o dedo */
    }
    .menu-principal a:not(:last-child)::after {
        right: -12.5px; /* Reajusta a posição do | para o novo gap de 25px no celular */
    }

    /* 2. Cabeçalho da Home: Melhor espaçamento */
    .cartao-perfil-destaque {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 15px 10px; /* Redução drástica para ficar bem compacto */
        margin-bottom: 5px; /* Aproxima bem da galeria no celular */
    }
    
    .info-esq {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0; /* Zera o gap para parar de empurrar o subtítulo */
    }
    
    /* Wrapper que coloca H1 e Ícone lado a lado no celular */
    .title-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 15px;
        margin-top: 5px; /* Puxa o título mais para baixo no celular */
    }
    .xamurart-icon { 
        width: 68px; 
        height: 68px; 
        transform: translateY(6px); /* Desce o bonequinho um pouco apenas no celular */
    } /* Tamanho proporcional ao H1 */
    
    .info-esq h1 { 
        font-size: 46px; /* Grande e impactante (entre 42px e 48px) */
        letter-spacing: 2px;
        margin: 0;
        margin-right: -2px;
        line-height: 0.8; /* Força o limite da caixa da fonte para baixo */
    }
    .info-esq p { 
        font-size: 13px; /* Tamanho ajustado e mais compacto */
        letter-spacing: 1px;
        margin-top: -10px; /* Valor negativo puxa a descrição para mais perto do título */
        transform: translateX(-35px); /* Offset para compensar a largura do ícone e centralizar com o H1 */
    }
    .info-dir p { text-align: center; font-size: 13px; line-height: 1.4; margin: 0 0 12px 0; padding: 0 70px; /* Reduz o espaço embaixo para ficar mais equilibrado */ }
    .splash-text { text-align: center; font-size: 16px; margin-bottom: 4px; }

    /* Menu de Filtros (Aba Works): Menor e mais organizado no celular */
    .menu-filtros {
        margin-top: 0; /* Zera a margem extra no celular para puxar os filtros pra cima */
        margin-bottom: 20px;
        gap: 8px; /* Reduz o espaço entre botões na tela pequena */
    }
    .btn-filtro {
        padding: 6px 14px;
        font-size: 13px; /* Reduz a fonte para caber mais botões lado a lado */
    }

    /* Coverflow adaptado ao Celular */
    .galeria-home.modo-carrossel {
        height: 430px; /* Altura reduzida para diminuir espaços vazios */
        overflow: hidden; /* Corta sobras extremas para não alargar a tela vertical do celular */
        padding: 10px 0;
        margin-top: -20px; /* Cola a galeria ainda mais na caixa superior */
        touch-action: pan-y; /* Bloqueia scroll em X nativo para não bugar o Swipe do JS, permite scroll em Y livre */
        
        /* Mantém o fade mais largo original no celular, pois a tela é menor */
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    }
    .galeria-home.modo-carrossel .projeto-card {
        width: 65vw; /* Cartões mais largos para melhor legibilidade */
        aspect-ratio: 4 / 5; /* Força proporção rígida contra achatamentos */
    }

    /* A mágica do Fade In/Out na borda da carta principal do carrossel no celular */
    .galeria-home.modo-carrossel .projeto-card.ativo {
        border-color: #ca3737;
        box-shadow: 0 10px 25px rgba(202, 55, 55, 0.4); /* Glow vermelho para acompanhar a borda */
    }

    /* Auto-play do GIF (hover) na carta central após 3 segundos parada */
    .galeria-home.modo-carrossel .projeto-card.ativo .img-hover {
        opacity: 1;
        transition: opacity 0.5s ease-in-out 1s; /* O Segredo: Delay de 3s antes de aparecer! */
    }
    
    .galeria-home.modo-carrossel .projeto-card:not(.ativo) .img-hover {
        transition: opacity 0.2s ease-out 0s; /* Zera o delay pra imagem sumir rápido ao ser arrastada pro lado */
    }

    /* 3. Galeria: Grade de 2 COLUNAS centralizada para celular */
    .galeria-home {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px; /* Espaço reduzido por causa do tamanho das telas */
        padding: 0 5px;
    }
    .projeto-card {
        max-width: 100%; /* Remove a trava de largura do PC */
        flex: 0 0 calc((100% - 8px) / 2); /* 2 itens por linha, descontando 1 gap de 8px */
        border-radius: 16px; /* Aumentado para deixar as imagens com cantos bem arredondados no celular */
    }
    .card-titulo {
        font-size: 10px; /* Fonte menor para não poluir o card que agora é pequeno */
        bottom: 8px;
        left: 8px;
    }

    /* 4. Janela Modal (Artes abertas): Mais espaço e rolagem fluida */
    .modal-conteudo {
        padding: 10px; /* Reduzido levemente para sobrar mais área útil */
        width: 95%;
        height: 90vh; /* Aproveita mais a tela no celular */
        overflow: hidden; /* Trava o contêiner principal para o botão X ficar cravado na tela! */
    }
    
    .modal-layout {
        display: flex;
        flex-direction: column;
        gap: 15px;
        height: 100%; /* Assume todo o espaço do modal para habilitar o scroll interno */
        overflow-y: auto; /* O scroll da tela passa a ser aqui dentro, deslizando por trás do X */
        overflow-x: hidden; /* Trava Mestra contra o vazamento lateral */
        width: 100%;
        min-width: 0; /* O SEGREDO: Quebra a teimosia do flexbox de alargar a tela */
    }

    .modal-galeria-scroll {
        padding: 15px; /* Restaura a simetria das bordas */
        max-height: 55vh; /* Fotos não ocupam a tela inteira, permitindo ler a descrição abaixo */
        width: 100%;
        min-width: 0;
        flex-shrink: 0; /* Impede que a galeria seja esmagada */
    }

    /* BLINDAGEM DA CAIXA DE INFORMAÇÕES (Era ela que estava estourando a borda!) */
    .modal-info-sidebar {
        padding: 20px; /* Reduz a "gordura" de 30px do desktop para encaixar na tela vertical */
        width: 100%;
        min-width: 0; /* Força a caixa a encolher e obedecer a tela vertical */
        overflow-x: hidden;
        flex-shrink: 0; /* Impede a caixa de amassar, forçando o layout pai a rolar a tela inteira */
        overflow-y: visible; /* Permite que o texto cresça naturalmente para baixo */
    }

    /* Permite que os ícones sociais "quebrem a linha" em vez de esticar a caixa toda */
    .modal-socials {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* Ajuste do botão fechar e setas para não atrapalhar no touch */
    .fechar-btn {
        top: 10px;
        right: 15px;
        font-size: 24px;
        background: rgba(0,0,0,0.5); /* Fundo sutil para não sumir contra imagens brancas */
        border-radius: 50%;
        width: 36px;
        height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 3px; /* Compensação visual para empurrar o 'X' perfeitamente para o meio */
    }

    .seta-modal {
        font-size: 30px;
        padding: 10px;
        background: rgba(0,0,0,0.3); /* Melhor visibilidade no celular */
        border-radius: 8px;
    }
    .seta-esq { left: 5px; }
    .seta-dir { right: 5px; }

    /* 5. Botão de Play customizado oculto no celular (o player nativo já resolve) */
    .btn-play-custom {
        display: none;
    }
    
    /* 6. Botões de Expandir/Baixar sempre visíveis no celular (já que não existe hover) */
    .botoes-overlay {
        opacity: 1;
        bottom: 10px;
        padding: 5px 12px;
    }
}

/* =========================================
   SOFTWARE GRID (PÁGINA ABOUT - Centralizado)
   ========================================= */
.software-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centraliza a última linha */
    gap: 20px;
    margin-top: 20px;
}

.software-card {
    flex: 1 1 300px;
    max-width: 380px; /* Evita que o card do Marmoset estique infinitamente */
    width: 100%;
    box-sizing: border-box; /* Garante que o padding fique dentro da medida */
    display: flex;
    align-items: flex-start; /* Alinha o ícone com o topo do texto */
    background-color: rgba(34, 5, 5, 0.37);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(141, 71, 71, 0.13);
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.software-card:hover {
    background-color: rgba(141, 71, 71, 0.2);
    transform: translateY(-4px); /* Dá um pulinho suave pra cima */
    border-color: rgba(141, 71, 71, 0.4);
}

.software-card img {
    width: 48px; /* Ícone bem maior para dar o destaque que você pediu */
    height: 48px;
    object-fit: contain;
    margin-right: 15px;
    flex-shrink: 0; /* Impede que o ícone seja esmagado se o texto for muito grande */
}

.software-info h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: #f1d2d2;
}

.software-info p {
    margin: 0;
    font-size: 14px;
    color: #bd9191;
    line-height: 1.5;
}

/* Ajuste fino para o celular */
@media (max-width: 768px) {
    .software-grid {
        display: flex; /* Volta pro Flexbox para permitir centralização */
        flex-wrap: wrap;
        justify-content: center; /* A mágica que centraliza quem sobrar */
        gap: 12px;
    }
    .software-card {
        flex: 0 0 calc(50% - 6px); /* Matemática exata para dar 2 por linha */
        max-width: 100%; /* Remove a trava de tamanho do PC */
        padding: 15px; /* Deixa o cartão menor para caber na grade */
        flex-direction: column; /* Coloca o ícone acima do texto pra caber melhor */
        align-items: center;
        text-align: center;
    }
    .software-card img {
        margin-right: 0;
        margin-bottom: 10px;
        width: 36px;
        height: 36px;
    }
    .software-info h3 { font-size: 15px; }
    .software-info p { font-size: 12px; }
}

/* =========================================
   PÁGINA DE CONTATO (GLOW UP)
   ========================================= */
.contact-container {
    max-width: 1000px; /* Dá espaço pro formulário e info ficarem lado a lado sem aperto */
    margin-top: 15px; /* Leve respiro em relação ao menu */
}

.contact-header {
    text-align: center;
    width: 100%; /* Faz a caixa esticar para ficar alinhada com o formulário abaixo */
    margin: 0 auto 25px auto; /* Reduzido o espaço vazio em baixo da caixa */
    
    /* A MÁGICA DO CARTÃO (Copiada da Home) */
    background-color: rgba(34, 5, 5, 0.37);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 50px 40px;
    border-radius: 16px;
    border: 1px solid rgba(141, 71, 71, 0.13);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    box-sizing: border-box;
    
    /* Flexbox para garantir que tudo fique perfeitamente no meio */
    display: flex;
    flex-direction: column;
    align-items: center; 
}

.contact-header h1 {
    font-size: 52px;
    color: #f1d2d2;
    margin: 0 0 30px 0; /* Desfeito: Volta a ser como antes */
    line-height: 1.1;
    letter-spacing: -1px;
}

.contact-header p {
    font-size: 18px;
    color: #cca6a6; /* Tom intermediário para não sumir no fundo, mas puxando pro vermelho */
    margin: 0;
    line-height: 1.7;
    max-width: 750px; /* O Segredo: impede que o texto estique até as bordas da caixa, mantendo a leitura confortável */
}

/* O charme pro "SOUL" */
.contact-header h1 span {
    color: #f12b2b; /* O mesmo vermelho do seu botão! */
    font-style: italic;
}


.btn-scroll-mobile {
    display: none; /* Escondido no PC */
}

.contact-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.contact-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: rgba(34, 5, 5, 0.37);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 30px 20px;
    border-radius: 12px;
    border: 1px solid rgba(141, 71, 71, 0.13);
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.contact-card:hover {
    background-color: rgba(141, 71, 71, 0.2);
    transform: translateY(-5px);
    border-color: rgba(141, 71, 71, 0.4);
}

.contact-card h3 {
    color: #f1d2d2;
    font-size: 22px;
    margin: 0 0 10px 0;
}

.contact-card p {
    color: #5c5050;
    margin: 0;
    font-size: 14px;
}

/* =========================================
   LAYOUT DE CONTATO (SPLIT)
   ========================================= */
.contact-split-layout {
    display: flex;
    gap: 30px;
    max-width: 1000px;
    width: 100%; /* <-- A MÁGICA PARA ELA NÃO ENCOLHER! */
    margin: 10px auto 40px auto; /* Reduzido o gap superior para puxar os blocos para cima */
    align-items: flex-start;
}

.form-box, .info-box {
    background-color: rgba(34, 5, 5, 0.37);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(141, 71, 71, 0.13);
    border-radius: 12px;
    padding: 30px;
    box-sizing: border-box; /* Garante que o padding não "engorde" a caixa para fora */
    position: relative; /* CRUCIAL: Diz para a pizza usar as bordas desta caixa como limite */
}

/* O ícone da Pizza pequeno e flutuando no canto DIREITO */
.pizza-icon {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 60px; /* Pequeno e contido no canto */
    height: auto;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3));
    transition: transform 0.3s ease;
}

.pizza-icon:hover {
    transform: scale(1.15) rotate(12deg);
}

.input-group input, .input-group textarea {
    background-color: #131313;
    border: 1px solid #424242;
    color: #fff;
    padding: 12px 15px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    width: 100%; /* <-- Faz os campos esticarem até o limite da caixa */
    box-sizing: border-box; /* <-- Impede os campos de vazarem pelas laterais */
}

/* O RESGATE DAS PROPORÇÕES! */
.form-box {
    flex: 1.5; /* Ocupa 60% do espaço (Formulário domina) */
}

.info-box {
    flex: 1; /* Ocupa 40% do espaço (Info fica contida) */
}

/* =========================================
   ESTILOS DO FORMULÁRIO
   ========================================= */
.input-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    text-align: left;
}

.input-group label {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #f1d2d2;
}

.input-group input, .input-group textarea {
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(141, 71, 71, 0.2);
    color: #f1d2d2;
    padding: 12px 15px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.input-group input:focus, .input-group textarea:focus {
    border-color: #f16363; /* Borda roxa ao clicar */
}

.input-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-buttons {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.btn-send {
    background-color: #751515; /* Roxo da print */
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-send:hover {
    background-color: #f12b2b;
}

.btn-email-direct {
    background-color: transparent;
    color: #f1d2d2;
    border: 1px solid rgba(141, 71, 71, 0.4);
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-family: inherit;
    font-weight: bold;
    transition: background-color 0.2s;
}

.btn-email-direct:hover {
    background-color: rgba(141, 71, 71, 0.2);
}

/* =========================================
   ESTILOS DA CAIXA DE INFORMAÇÕES
   ========================================= */
.form-box h3, .info-box h3 {
    margin: 0 0 20px 0;
    font-size: 20px;
    color: #f1d2d2;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divide o espaço perfeitamente na metade */
    gap: 20px;
    margin-bottom: 20px;
}

.info-grid .info-item {
    margin-bottom: 0; /* O espaçamento aqui agora é feito pelo 'gap' do grid */
}

.info-item {
    margin-bottom: 20px;
    text-align: left;
}

.info-title {
    display: block;
    font-size: 12px;
    color: #b69494;
    margin-bottom: 5px;
}

.info-item p, .info-item a {
    margin: 0;
    font-size: 14px;
    color: #f1d2d2;
    text-decoration: none;
}

.info-item a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.social-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.social-tag {
    background-color: transparent;
    border: 1px solid rgba(141, 71, 71, 0.2);
    padding: 6px 12px;
    border-radius: 8px;
    color: #f1d2d2;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s;
}

/* Cores das Redes Sociais no Hover */
.social-tag.artstation:hover {
    background-color: #13AFF0; border-color: #13AFF0;
}
.social-tag.linkedin:hover {
    background-color: #0A66C2; border-color: #0A66C2;
}
.social-tag.twitter:hover {
    background-color: #1DA1F2; border-color: #1DA1F2;
}
.social-tag.instagram:hover {
    background-color: #E1306C; border-color: #E1306C;
}
.social-tag.youtube:hover {
    background-color: #FF0000; border-color: #FF0000;
}

/* Responsivo para celular */
@media (max-width: 768px) {
    .contact-container {
        margin-top: 10px;
        padding: 0 15px; /* Adiciona respiro nas laterais */
    }
    .contact-header {
        padding: 30px 20px; /* Reduz o blocão gigante do topo */
        margin-bottom: 15px; /* Puxa os elementos para cima também no celular */
    }
    .contact-header h1 {
        font-size: 20px; /* Título reduzido para ficar mais compacto no celular */
        margin-bottom: 15px;
    }
    .contact-header p {
        font-size: 12px; /* Descrição menor para facilitar a leitura na tela pequena */
    }
    .btn-scroll-mobile {
        display: inline-block; /* Aparece só no celular */
        margin-top: 20px;
        padding: 10px 24px;
        background-color: transparent;
        color: #cca6a6;
        border: 1px solid rgba(141, 71, 71, 0.3);
        border-radius: 20px;
        text-decoration: none;
        font-size: 14px;
        font-weight: bold;
        transition: color 0.2s ease, border-color 0.2s ease;
    }
    .btn-scroll-mobile:hover { color: #f1d2d2; border-color: #f1d2d2; }
    
    /* Ajusta o tamanho da pizza no celular */
    .pizza-icon {
        width: 50px;
        top: 15px;
        right: 15px;
    }

    .contact-split-layout {
        flex-direction: column;
        gap: 20px;
        margin: 0 auto 20px auto; /* Zera o espaço superior no celular para ficar coladinho */
        align-items: stretch; /* Estica as caixas horizontalmente */
    }
    .form-box, .info-box {
        padding: 20px; /* Menos margem interna para dar mais espaço de tela pro formulário */
        width: 100%; /* Força as caixas a ocuparem todo o espaço sem deixar buraco na direita */
    }
    .info-box {
        order: 1; /* Faz a Info ficar no meio */
    }
    .form-box {
        order: 2; /* Joga o formulário pro final */
    }
    .info-grid {
        grid-template-columns: 1fr; /* No celular, volta a empilhar as informações em 1 coluna para não espremer */
        gap: 15px;
    }
}

/* =========================================
   MODAL DE SUCESSO (CONTATO)
   ========================================= */
.modal-sucesso-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-sucesso-conteudo {
    background-color: rgba(34, 5, 5, 0.37);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(141, 71, 71, 0.13);
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    max-width: 400px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    animation: popIn 0.3s ease-out;
}

.modal-sucesso-conteudo h2 {
    color: #f1d2d2;
    margin-top: 0;
    font-size: 28px;
}

.modal-sucesso-conteudo p {
    color: #cca6a6;
    line-height: 1.5;
    margin-bottom: 30px;
}

/* =========================================
   ÍCONES SOCIAIS E BOTÕES NOVOS
   ========================================= */

/* Transforma o PNG preto em Branco Puro com hover brilhante */
.social-icon-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: invert(1) brightness(2); /* A mágica do branco! */
    transition: transform 0.2s, opacity 0.2s;
}

/* O novo botão de contato dentro do modal da galeria */
.btn-modal-contact {
    display: block;
    width: 100%;
    background-color: rgba(34, 5, 5, 0.37);
    color: #f1d2d2;
    border: 1px solid rgba(141, 71, 71, 0.3);
    text-align: center;
    padding: 12px 0;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 30px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    box-sizing: border-box; /* Impede o botão de vazar para os lados */
}

.btn-modal-contact:hover {
    background-color: rgba(141, 71, 71, 0.6);
    color: #ffffff;
    border-color: #f1d2d2;
    transform: translateY(-2px);
}

/* Onde os ícones vão morar dentro do modal */
.modal-socials {
    display: flex;
    gap: 20px;
    margin-top: 25px;
    justify-content: center;
    border-top: 1px solid #333;
    padding-top: 25px;
}

.modal-socials a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: transparent;
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.2s, background-color 0.2s;
}

.modal-socials a:hover {
    opacity: 1;
    transform: scale(1.15); /* Reduzi o zoom levemente para o fundo redondo ficar elegante */
}

/* Efeito de cores no hover do Modal */
.modal-socials a.artstation:hover { background-color: #13AFF0; }
.modal-socials a.linkedin:hover { background-color: #0A66C2; }
.modal-socials a.twitter:hover { background-color: #1DA1F2; }
.modal-socials a.instagram:hover { background-color: #E1306C; }
.modal-socials a.youtube:hover { background-color: #FF0000; }

/* Arrumando o ícone + texto no botão da página Contact */
.social-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
}

/* Botão extra na página About Me */
.about-action-btn {
    text-align: center;
    margin-top: 60px;
}

/* =========================================
   SEÇÃO YOUTUBE (HOME)
   ========================================= */
.youtube-section {
    display: block; /* Sobrescreve o comportamento do cartao principal */
    padding: 30px;
    width: 100%;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.youtube-header {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 15px;
}

.youtube-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(141, 71, 71, 0.4);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.youtube-info {
    text-align: left;
}

.youtube-info h2 {
    margin: 0 0 10px 0;
    font-size: 32px;
    color: #f1d2d2;
}

.youtube-info p {
    margin: 0 0 15px 0;
    color: #cca6a6;
    line-height: 1.5;
    font-size: 16px;
}

.btn-youtube {
    display: inline-block;
    background-color: #d11d1d; /* Vermelho do YouTube puxado pra sua paleta */
    color: #ffffff;
    padding: 10px 24px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(209, 29, 29, 0.3);
}

.btn-youtube:hover {
    background-color: #ff2a2a;
    transform: translateY(-2px);
}

.youtube-filtros {
    margin-bottom: 15px;
    margin-top: 0;
}

.youtube-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.youtube-iframe-container {
    flex: 1 1 280px;
    max-width: 340px; /* Exatamente a mesma largura máxima das cartas de arte! */
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
    background-color: #000;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.youtube-iframe-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(209, 29, 29, 0.4);
}

.youtube-iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Esconde os dots (bolinhas) no desktop, pois só são necessários no carrossel mobile */
.youtube-dots {
    display: none;
}

@media (max-width: 768px) {
    .youtube-section { padding: 15px; }
    .youtube-header {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        margin-bottom: 15px; /* Reduz a distância entre o cabeçalho e os filtros */
    }
    .youtube-info { text-align: center; }
    .youtube-info h2 { font-size: 24px; margin-bottom: 4px; }
    .youtube-info p { font-size: 13px; margin-bottom: 0; }
    .youtube-avatar { width: 80px; height: 80px; }

    .youtube-filtros { margin-bottom: 15px; }

    /* Pega a última div da seção (que abraça o botão) e força a reduzir a margem em linha */
    .youtube-section > div:last-child { margin-top: 20px !important; }

    /* Transforma a grade do YouTube em um carrossel magnético no celular */
    .youtube-grid {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        gap: 15px;
        padding-bottom: 4px;
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        /* esconde scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
        /* fade lateral */
        -webkit-mask-image: linear-gradient(to right, transparent 0px, black 20px, black calc(100% - 20px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0px, black 20px, black calc(100% - 20px), transparent 100%);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }
    .youtube-grid::-webkit-scrollbar { display: none; }

    /* Dots estilo Instagram */
    .youtube-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 16px;
    }
    .youtube-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: none;
        background-color: rgba(255, 255, 255, 0.25);
        cursor: pointer;
        padding: 0;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }
    .youtube-dot.ativo {
        background-color: #d11d1d;
        transform: scale(1.3);
    }

    .youtube-iframe-container {
        /* Exibe o vídeo principal e "morde" a pontinha do próximo (aprox 85% da tela) */
        flex: 0 0 85%;
        scroll-snap-align: center;
        max-width: 100%;
    }
}