body {
    font-family: 'Helvetica', Arial, sans-serif;
    background-color: white;
    color: black;
    margin: 0; 
    padding: 0;
    overflow: hidden;
    ;
}

h2 {
    font-size: 1em;
    color: black;
    margin-bottom: 20px;
}

.p{
    padding: 0; 
    margin: 0; 
    width: 100%;
    line-height: 1.6; 
    text-align: justify;
    color: black;

}

.img-i{

    width: 250px;
    border-radius: 30px;
    display: block;
    margin: 0 auto;
    margin-bottom: 12px;
    border-radius: 20px;
    border: 0px solid;
    border-color: black;
}

/* Tirando o espaço entre o Nome e a Profissão */

.site-title {
    font-size: 50px;    
    margin-top: 5px;
    margin-bottom: 0; /* Zera o empurrão para baixo do título */
    line-height: 1; /* Diminui a altura da própria linha do texto */
}

.site-subtitle {
    font-size: 38px;
    margin-top: 0px; /* Deixa só 5 pixels de respiro em cima (pode botar 0 se quiser grudado mesmo) */
    color: #FF0800; /* Uma dica de design: deixar o subtítulo um pouco mais cinza destaca mais o seu nome! */
}

/* Reserva altura fixa para o título e subtítulo, para o menu de navegação
   NÃO se mover enquanto o texto é digitado/apagado (inclusive quando fica vazio) */
.site-title {
    white-space: nowrap;
    min-height: 60px;
}

.site-subtitle {
    white-space: nowrap;
    min-height: 46px;
}

/* Barra do cursor da animação de digitação (elemento real, não pseudo-elemento) */
.cursor-typewriter {
    display: inline-block;
    width: 3px;
    height: 0.9em;
    margin-left: 4px;
    background-color: currentColor;
    vertical-align: -0.1em;
    opacity: 0;
}

.cursor-typewriter.cursor-ativo {
    opacity: 1;
    animation: piscarCursor 0.8s steps(1) infinite;
}

@keyframes piscarCursor {
    50% {
        opacity: 0;
    }
}


/* Botão*/
button {
    color: black;
    border: white;
    padding: 7px 12px;
    border-radius: 15px;
    font-size: 0.8em;
    cursor: pointer;
    transition: 0.3 ease;
    font-weight: bold;
    transform: scale(0.9)
  
}



.btn-icon {
    font-size: 1.1em;
    padding: 8px 14px;
    background-color: #ffffff; /* Fundo sólido branco */
    border: 1px solid #d0d0d0; /* Borda cinza clara */
    border-radius: 12px; /* Cantos bem arredondados (cara de botão) */
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil para dar profundidade */
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111111;
}

/* Efeito ao passar o mouse (Modo Claro) */
.btn-icon:hover {
    background-color: #f5f5f5;
    transform: translateY(-2px); /* Efeito de elevação leve */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

    /* Estrutura do site */
.colunas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 0px;
    row-gap: 0px; 
    align-items: start;
}

.bloco-nome {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.bloco-nav {
    grid-column: 1;
    grid-row: 2;
    margin-top: -20px; 
}

.bloco-skills {
    grid-column: 1;
    grid-row: 3; 
    margin-top: 20px; 
}

.bloco-foto {
    grid-column: 2;
    grid-row: 1;
}

.bloco-bio {
    grid-column: 2;
    grid-row: 2 / span 2;
    display: flex;
    flex-direction: column;
    
    /* 1. Removemos o justify-content: center; pois ele não será mais necessário */
    
    /* 2. Adicionamos o align-self para empurrar o bloco inteiro para a base da linha 3 */
    align-self: end; 
    
    gap: 20px;
}

.colunas-resume {
    /* O menu fica com 380px, e o PDF (1fr) recebe TODO o resto da tela */
    grid-template-columns: 423px 1fr; 
}

li {
    margin-left: 10px;
    list-style-type: none;
    padding: 0; 
    margin: 0; 
    
}

a {
    margin-right: 10px;
    text-decoration: none;
    color: black; 
    text-decoration: none; /* Remove o sublinhado padrão do navegador */
    transition: color 0.3s ease; /* Deixa a mudança de cor mais suave ao passar o mouse */
    
}

a:hover{
    
        color: gray; /* Fica um branco mais acinzentado/apagado para indicar que é clicável */
} 

#sobre-mim {
    max-width: 800px;
    /* Limita a largura máxima. Assim o texto não fica espremido nem muito esticado */
    margin: 0 auto;
    /* O 'auto' nas laterais centraliza a caixa inteira no meio da tela */
}

/* Estilizando o título da seção */
h2 {
    font-size: 2.5em;
    /* Deixa o título bem grande */
    color: #111111;
    /* Um cinza ainda mais escuro para contrastar */
    margin-bottom: 20px;
    /* Empurra o parágrafo de baixo um pouco para longe */
}

/* Estilizando o texto sobre você */
p {
    font-size: 1.1em;
    color:black;
}

/* O MENU DE IDIOMA E TEMA */
.menu-flutuante {
    position: static;
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin: 0px;
    padding: 0px;
}

/* --- MODO ESCURO --- */

body.dark-mode {
    background-color: black;
    color: #e0e0e0;
    margin: 0; 
    padding: 0;
    overflow: hidden;
}

body.dark-mode .site-subtitle{

    color: #008b8b;

}

body.dark-mode h2#titulo-skills {
    color: #ffffff; 
}

body.dark-mode button {
    color: #e0e0e0;
}

body.dark-mode .menu-flutuante button:hover {
    background-color: #008b8b;

}

/* =========================================
   VISUAL DOS BOTÕES FLUTUANTES (TEMA E IDIOMA)
   ========================================= */

/* Visual no Modo Claro */
.btn-icon {
    font-size: 1.1em;
    padding: 8px 14px;
    background-color: #ffffff; /* Fundo sólido branco */
    border: 1px solid #d0d0d0; /* Borda cinza clara */
    border-radius: 12px; /* Cantos bem arredondados (cara de botão) */
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil para dar profundidade */
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111111;
}

/* Efeito ao passar o mouse (Modo Claro) */
.btn-icon:hover {
    background-color: #f5f5f5;
    transform: translateY(-2px); /* Efeito de elevação leve */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Visual no Modo Escuro (Dark Mode) */
body.dark-mode .btn-icon {
    background-color: #2a2a2a !important; /* Preenchimento cinza escuro elegante */
    border: 1px solid #444444 !important; /* Borda que combina com o fundo */
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); /* Sombra mais forte para o dark mode */
}

/* Efeito ao passar o mouse (Modo Escuro) */
body.dark-mode .btn-icon:hover {
    background-color: #3a3a3a !important; /* Fica um pouco mais claro ao passar o mouse */
    border-color: #555555 !important;
    transform: translateY(-2px);
}

body.dark-mode p{

    color: white;
}

body.dark-mode a{

    color: white;

}

body.dark-mode .site-container{

    background: rgba(255, 255, 255, 0.05);
    border-color: white;
    
}

body.dark-mode .img-i{

border-color: white;

}

body.dark-mode .resume-header h1 {
    color: #ffffff;
}

body.dark-mode .btn-download {
    background-color: #ffffff;
    color: #111111;
}

body.dark-mode .btn-download:hover {
    background-color: #e0e0e0;
}

body.dark-mode .pdf-wrapper {
    border-color: #333333;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

body.dark-mode .skill-tag {
    background-color: #008b8b; /* Um cinza de elevação */
    color: #ffffff;
    border: 1px solid #444444; /* Borda fininha para delimitar a tag */
}


body.dark-mode .skill-tag:hover {
    background-color: #7E8C54;
}

body.dark-mode #voltarcarrosel,
body.dark-mode #avancarcarrosel {
    background-color: rgba(255, 255, 255, 0.1); /* Fundo como vidro translúcido */
    color: #ffffff; 
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark-mode #voltarcarrosel:hover,
body.dark-mode #avancarcarrosel:hover {
    background-color: rgba(255, 255, 255, 0.25); /* Fica ligeiramente mais opaco no hover */
}

/* MOLDURA */
.site-container {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    border-color: black;
    width: 95vw;
    max-width: none;
    margin: 2vh auto;
    padding: 10px 2vw;
    height: 96vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

.site-container::-webkit-scrollbar {
    width: 6px;
}

.site-container::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

body.dark-mode .site-container::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
}

#canvas-ondas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none; /* Deixa o clique passar reto pelo canvas */
}

#canvas-externo {
    position: fixed; /* Fica travado no fundo, cobrindo o viewport */
    top: 0;
    left: 0;
    width: 100vw; /* Toda a largura da tela */
    height: 100vh; /* Toda a altura da tela */
    z-index: -2; /* Fica ATRÁS da moldura branca e do container */
    pointer-events: none; /* Deixa o clique passar reto */
}

/* Isso protege os seus elementos colocando-os acima do canvas */
.site-title, .site-subtitle, .colunas {
    position: relative;
    z-index: 1;
}

.controles-flutuantes {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 999;
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: center; /* Garante que o texto fique centralizado com o ícone */
}

/*  NAVEGACAO  */

.site-container ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding: 0;
    margin: 0 0 24px 0;
    list-style: none;
}

.site-container nav li {
    position: relative;
    cursor: pointer;
    padding-bottom: 5px;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.site-container nav li::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: currentColor;
    transition: all 0.3s ease-in-out;
    transform: translateX(-50%);
}

.site-container nav li:hover::after {
    width: 100%;
}

/* carrosel de fotos */

.carrosel{

display: flex;
align-items: center;
justify-content: center;
gap: 25px;

}

#voltarcarrosel#avancarcarrosel{

    cursor: pointer;
}

#foto-carrossel {
    /* PASSO 1: Fixe o tamanho exato que você quer (ex: um quadrado perfeito) */
    width: 230px;
    height: 230px;
    margin-bottom: 0px;
    
    /* PASSO 2: A Mágica. Diz para cortar a foto se ela for maior e nunca esticar */
    object-fit: cover;

    border-radius: 0%;
    border: none;
    border-color: #d0d0d0;
    overflow: hidden;
  
    /* PASSO 4: Preprare a transição (Problema 2) */
    transition: opacity 0.4s ease-in-out; /* Duração de 0.4 segundos */
    opacity: 1; /* Default: Visível */
}

/* PASSO 5: A classe que o JS vai usar para 'esconder' a foto temporariamente */
#foto-carrossel.fading {
    opacity: 0; /* Fica transparente */
}
body.dark-mode #foto-carrossel {
    width: 220px;
    height: 230px;
    object-fit: cover;
    object-position: center 15%;
    border-radius: 0%;
    border: none;
    border-color: #d0d0d0;
}
/* Espaçamento do título em relação ao carrossel */
.skills-section {
    margin-top: 20px; 
}

.skills-section h2 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    /* Se você quiser que o título siga a cor dinâmica do seu tema, use a sua variável aqui */
}

/* O contêiner mágico das tags */
.skills-container {
    display: flex;
    flex-wrap: wrap; /* Esse é o segredo! Se a tag não couber na linha, ela desce para a próxima */
    gap: 12px; /* O espaço exato entre uma tag e outra, tanto na horizontal quanto na vertical */
}

/* O desenho da pílula */
.skill-tag {
    /* Fundo escuro em vez de cinza claro */
    background-color: #FF0800; 
    color: white; /* Letra branca */
    
    padding: 4px 14px; 
    border-radius: 8px; 
    font-size: 0.95rem;
    font-weight: 500;
    
    /* Uma sombra preta para descolar a tag do fundo */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); 
    transition: all 0.3s ease; 
}

/* Um bônus interativo: pequeno efeito ao passar o mouse por cima */
.skill-tag:hover {
    background-color: purple;
    transform: translateY(-2px);
}

/* =========================================
   TIPOGRAFIA E LAYOUT: SOBRE MIM
   ========================================= */

/* A caixa principal que segura o texto para não quebrar a tela */
.sobre-mim {
    margin-top: 32px;
    max-width: 650px; /* Impede o texto de esticar infinitamente */
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px; /* Cria um respiro automático entre todos os elementos dentro da div */
     margin-top: 0px;
}

/* O título principal da seção */
.sobre-mim h1 {
    font-size: 2rem;
    color: #111111;
    margin: 0; /* O gap da div já cuida do espaçamento */
}

/* O subtítulo focado em áreas de atuação */
.sobre-mim h2 {
    font-size: 1.2rem;
    font-weight: 500;
    color: #555555;
    margin: 0;
}

/* O parágrafo descritivo */
.sobre-mim p {
    line-height: 1.6;
    font-size: 1.15rem;
    color: #333333;
    margin: 0;
}

/* A Lista de Tópicos */
.sobre-mim ul {
    list-style-type: none; /* Remove as bolinhas pretas padrão do navegador */
    padding-left: 0; /* Remove o recuo padrão das listas */
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Dá um espaço de respiro entre cada linha da lista */
}

/* Os itens da lista */
.sobre-mim li {
    line-height: 1.5;
    font-size: 1.05rem;
    color: #333333;
}

/* =========================================
   MODO ESCURO: SOBRE MIM
   ========================================= */
body.dark-mode .sobre-mim h1 {
    color: #ffffff;
}

body.dark-mode .sobre-mim h2 {
    color: #aaaaaa; /* Cinza claro para não roubar a atenção do H1 */
}

body.dark-mode .sobre-mim p,
body.dark-mode .sobre-mim li {
    color: #e0e0e0; /* Cinza quase branco para leitura confortável */
}

/* Skills section - mobile override */
.skills-section {
    padding-bottom: 0px;
}

/* =========================================
   PÁGINA: RESUME
   ========================================= */

.resume-container {
    width: 100%;
    max-width: 100%; /* Removemos a trava de 900px */
    margin: 10px 0 0 0; /* Removemos o 'auto' para ele colar na esquerda e preencher a tela */
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.resume-header {
    display: flex;
    justify-content: center; /* Coloca o título exatamente no centro da coluna */
    align-items: center;
    position: relative; /* Transforma o cabeçalho em uma âncora */
    width: 100%;
    margin-bottom: 10px;
}

.resume-header h1 {
    font-size: 2rem;
    color: #111111;
    margin: 0;
}

/* O Botão de Download */
.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #111111;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none; /* Remove o sublinhado do link */
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-download:hover {
    background-color: #333333;
    transform: translateY(-2px); /* Efeito de levitação ao passar o mouse */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* A Caixa do PDF */
.pdf-wrapper {
    width: 100%;
    height: 65vh; /* Reduzimos de 75vh para o PDF não empurrar o fundo do site */
    border-radius: 12px;
    overflow: hidden; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #e0e0e0;
    
}

.pdf-viewer {
    width: 100%;
    height: 100%;
    border: none; /* Remove a borda feia padrão do iframe */
}

.resume-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Força o título e o botão para as pontas exatas do PDF */
    margin-bottom: 10px; /* Dá um respiro pequeno antes do documento começar */
}

/* =========================================
   ESTRUTURA DO CARROSSEL DE PROJETOS
========================================= */
.carousel-container {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 15px; 
}

/* O Botão de Seta */
.carousel-btn {
    background: #111111;
    color: white;
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    min-width: 45px; /* Impede o botão de amassar */
    cursor: pointer;
    font-size: 1.2rem;
    z-index: 2;
}

body.dark-mode .carousel-btn {
    background: #ffffff;
    color: #111111;
}

/* A Pista do Carrossel */
.projects-track {
    display: flex;
    flex-wrap: nowrap; /* Trava os cartões na mesma linha */
    gap: 30px;
    width: 100%;
    overflow-x: auto; /* DEVOLVE A PERMISSÃO PARA O BOTÃO ROLAR */
    scroll-behavior: smooth;
    padding-bottom: 20px; 
    
    /* Esconde a barra de rolagem nativa para ficar elegante */
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.projects-track::-webkit-scrollbar {
    display: none;
}

/* =========================================
   O VISUAL DO CARTÃO (GIGANTE)
========================================= */
.project-card {
    flex: 0 0 calc(49% - 10px);
    min-width: calc(49% - 10px);
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

body.dark-mode .project-card {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.1);
}

.project-card:hover {
    transform: translateY(-5px);
    border-bottom: 4px solid #ff3333; 
}

/* A PARTE QUE TINHA SUMIDO: O Fundo Cinza */
.card-img {
    /* REMOVA o height: 200px e o min-height e adicione: */
    width: 100%;
    aspect-ratio: 16 / 9; /* O navegador cria o retângulo perfeito automaticamente */
    
    background-color: #eaeaea; 
    border-bottom: 1px solid rgba(0,0,0,0.05);
    
    /* Agora você pode usar o cover tranquilamente, pois a caixa já tem o formato do print! */
    background-size: cover; 
    background-position: top center; 
    background-repeat: no-repeat; 
}

body.dark-mode .card-img {
    background-color: #2a2a2a;
}

.card-info h3 {
    margin: 0;
    font-size: 1.1rem;
}

.card-info {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
}

.card-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.project-desc {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    opacity: 0.7;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.project-tag {
    display: inline-block;
    background: #ff3333;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

body.dark-mode .project-tag {
    background: #008b8b;
}

.view-btn {
    white-space: nowrap;
    flex-shrink: 0;
}

/* =========================================
   PÁGINA: DESENHE
   ========================================= */

.desenho-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Abas Desenhar / Mural */
.desenho-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.tab-btn {
    background: rgba(0, 0, 0, 0.05);
    color: #111111;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 8px 18px;
    font-size: 0.9rem;
    transform: none;
}

.tab-btn.active {
    background-color: #FF0800;
    color: #ffffff;
    border-color: #FF0800;
}

body.dark-mode .tab-btn {
    background: rgba(255, 255, 255, 0.06);
    color: #e0e0e0;
    border-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .tab-btn.active {
    background-color: #FF0800;
    color: #ffffff;
    border-color: #FF0800;
}

/* Barra de ferramentas */
.desenho-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.ferramenta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    color: #111111;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 0.85rem;
    transform: none;
}

.ferramenta-btn .material-symbols-outlined {
    font-size: 18px;
}

.ferramenta-btn.active {
    background-color: #111111;
    color: #ffffff;
    border-color: #111111;
}

.ferramenta-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

body.dark-mode .ferramenta-btn {
    background: rgba(255, 255, 255, 0.06);
    color: #e0e0e0;
    border-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .ferramenta-btn.active {
    background-color: #ffffff;
    color: #111111;
    border-color: #ffffff;
}

/* Paleta de cores */
.paleta-cores {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.cor-swatch {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 2px solid rgba(0, 0, 0, 0.25);
    cursor: pointer;
    padding: 0;
    transform: none;
}

.cor-swatch.selecionada {
    border-color: #FF0800;
    box-shadow: 0 0 0 2px rgba(255, 8, 0, 0.3);
}

body.dark-mode .cor-swatch {
    border-color: rgba(255, 255, 255, 0.25);
}

/* A tela de desenho */
.canvas-wrapper {
    width: 100%;
    background-color: #ffffff; /* Sempre branca, tipo papel, mesmo no modo escuro */
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    touch-action: none;
}

#canvas-desenho {
    display: block;
    width: 100%;
    height: 52vh;
}

body.dark-mode .canvas-wrapper {
    border-color: #333333;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Rodapé do painel de desenho */
.desenho-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.dica-desenho {
    font-size: 0.9rem;
    color: #777777;
}

body.dark-mode .dica-desenho {
    color: #aaaaaa;
}

/* Mural (galeria de desenhos) */
.mural-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 6px;
}

.mural-vazio {
    display: none;
    color: #777777;
    font-size: 1rem;
}

body.dark-mode .mural-vazio {
    color: #aaaaaa;
}

.mural-card {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.mural-card:hover {
    transform: translateY(-4px);
}

body.dark-mode .mural-card {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.15);
}

.mural-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background-color: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.mural-card-info {
    padding: 12px 14px;
}

.mural-card-info h4 {
    margin: 0 0 2px 0;
    font-size: 0.95rem;
}

.mural-card-info .mural-data {
    font-size: 0.75rem;
    color: #6b6b6b;
    margin: 0 0 6px 0;
}

body.dark-mode .mural-card-info .mural-data {
    color: #999999;
}

.mural-card-info .mural-msg {
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.4;
    word-break: break-word;
}

/* Modal: Salvar desenho */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-overlay.aberto {
    display: flex;
}

.modal-salvar {
    background: #ffffff;
    color: #111111;
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

body.dark-mode .modal-salvar {
    background: #1a1a1a;
    color: #e0e0e0;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
}

.modal-fechar {
    background: transparent;
    border: none;
    font-size: 1rem;
    color: inherit;
    transform: none;
    padding: 4px 8px;
}

.modal-body {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.modal-preview {
    width: 90px;
    height: 90px;
    object-fit: contain;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    flex-shrink: 0;
}

.modal-campos {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.modal-campos label {
    font-size: 0.8rem;
    color: #777777;
}

body.dark-mode .modal-campos label {
    color: #aaaaaa;
}

.modal-campos input,
.modal-campos textarea {
    font-family: inherit;
    font-size: 0.9rem;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #d0d0d0;
    background: #ffffff;
    color: #111111;
    resize: none;
}

.modal-campos textarea {
    min-height: 60px;
}

body.dark-mode .modal-campos input,
body.dark-mode .modal-campos textarea {
    background: #2a2a2a;
    color: #e0e0e0;
    border-color: #444444;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn-secundario {
    background: transparent;
    color: inherit;
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 500;
    transform: none;
}

body.dark-mode .btn-secundario {
    border-color: rgba(255, 255, 255, 0.25);
}

/* =========================================
   MODAL: CURRICULUM VITAE
   ========================================= */

/* Botão do menu que abre o modal do CV — visualmente idêntico aos links de navegação */
.nav-cv-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-cv-btn:hover {
    color: gray;
}

.cv-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.cv-modal-overlay.aberto {
    opacity: 1;
    visibility: visible;
}

.cv-modal {
    background: #ffffff;
    color: #111111;
    border-radius: 20px;
    width: 100%;
    max-width: 680px;
    height: 82vh;
    max-height: 680px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    transform: scale(0.94) translateY(12px);
    transition: transform 0.25s ease;
}

.cv-modal-overlay.aberto .cv-modal {
    transform: scale(1) translateY(0);
}

body.dark-mode .cv-modal {
    background: #1a1a1a;
    color: #e0e0e0;
}

.cv-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

body.dark-mode .cv-modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.cv-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.cv-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cv-modal-download {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.2s;
}

.cv-modal-download:hover {
    background: rgba(0, 0, 0, 0.08);
}

body.dark-mode .cv-modal-download:hover {
    background: rgba(255, 255, 255, 0.12);
}

.cv-download-btn {
    padding: 8px 16px;
    font-size: 0.85rem;
    white-space: nowrap;
}

.cv-modal-fechar {
    background: transparent;
    border: none;
    font-size: 1rem;
    color: inherit;
    padding: 6px 10px;
    transform: none;
    cursor: pointer;
}

.cv-modal-body {
    flex: 1;
    overflow: auto;
    background: #525659; /* Cinza padrão de visualizadores de PDF */
}

.cv-modal-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.highlight {
    color: #FF0800;
    font-weight: 600;
}

/* =========================================
   SISTEMA DE IDIOMAS (DROPDOWN)
   ========================================= */
/* =========================================
   SISTEMA DE IDIOMAS (DROPDOWN) CORRIGIDO
   ========================================= */
.idioma-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Oculta o menu por padrão de forma forçada */
.idioma-dropdown {
    display: none; 
    position: absolute;
    top: 100%; /* Agora abre para baixo, pois o menu está no topo do card */
    right: 0;
    margin-top: 10px;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    padding: 6px;
    min-width: 140px;
    flex-direction: column;
    gap: 4px;
    z-index: 1000;
}

/* Mostra o menu quando clicado */
.idioma-dropdown.aberto {
    display: flex;
}

/* Limpa o estilo global de buttons do seu site */
.idioma-dropdown .idioma-option {
    background: transparent !important; 
    color: #111111 !important;
    border: none !important;
    padding: 10px 14px;
    text-align: left;
    font-size: 0.95rem;
    cursor: pointer;
    border-radius: 8px !important;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    width: 100%;
    transform: none !important; /* Remove o efeito de encolher do seu CSS base */
}

.idioma-dropdown .idioma-option:hover {
    background-color: rgba(0, 0, 0, 0.08) !important;
}

.idioma-dropdown .idioma-option.active {
    background-color: rgba(255, 8, 0, 0.1) !important;
    color: #FF0800 !important;
    font-weight: bold;
}

/* MODO ESCURO */
body.dark-mode .idioma-dropdown {
    background-color: #1a1a1a;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    border: 1px solid #333;
}

body.dark-mode .idioma-dropdown .idioma-option {
    color: #e0e0e0 !important;
}

body.dark-mode .idioma-dropdown .idioma-option:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .idioma-dropdown .idioma-option.active {
    background-color: #96ebeb  !important;
    color: #008b8b !important;
}

/* Força a exibição do menu por cima de qualquer outra regra */
.idioma-dropdown.aberto {
    display: flex !important;
}

/* Garante que o clique vá sempre para o botão, e não para o texto/bandeira dentro dele */
#btn-idioma span {
    pointer-events: none;
}

.idioma-dropdown.aberto {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 999999 !important; /* Força ficar na frente do canvas e de tudo */
}

#btn-idioma {
    position: relative;
    z-index: 999999 !important;
}

#btn-idioma span {
    pointer-events: none !important;
}

/* Modo escuro para o texto em destaque */
body.dark-mode .highlight {
    color: #008b8b; /* Um vermelho/coral mais claro para brilhar no fundo escuro */
}

/* =========================================
   MODAL: CONTATO
   ========================================= */
.contact-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.contact-modal-overlay.aberto {
    opacity: 1;
    visibility: visible;
}

.contact-modal {
    background: #ffffff;
    color: #111111;
    border-radius: 20px;
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    transform: scale(0.94) translateY(12px);
    transition: transform 0.25s ease;
    padding: 30px;
}

.contact-modal-overlay.aberto .contact-modal {
    transform: scale(1) translateY(0);
}

body.dark-mode .contact-modal {
    background: #1a1a1a;
    color: #e0e0e0;
}

.contact-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.contact-modal-header h3 {
    margin: 0;
    font-size: 1.5rem;
}

.contact-modal-fechar {
    background: transparent;
    border: none;
    font-size: 1.2rem;
    color: inherit;
    cursor: pointer;
}

.contact-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border-radius: 12px;
    background-color: #f5f5f5;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.contact-item:hover {
    background-color: #e0e0e0;
    transform: translateY(-2px);
}

body.dark-mode .contact-item {
    background-color: #2a2a2a;
}

body.dark-mode .contact-item:hover {
    background-color: #3a3a3a;
}

.contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.contact-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

body.dark-mode .contact-icon img {
    filter: invert(1);
}

.contact-details {
    display: flex;
    flex-direction: column;
}

.contact-platform {
    font-weight: bold;
    font-size: 1.1rem;
}

.contact-username {
    font-size: 0.9rem;
    color: #555;
}

body.dark-mode .contact-username {
    color: #aaa;
}

/* =========================================
   MODAL: PROJECTS
   ========================================= */
.projects-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.projects-modal-overlay.aberto {
    opacity: 1;
    visibility: visible;
}

.projects-modal {
    background: #ffffff;
    color: #111111;
    border-radius: 20px;
    width: 100%;
    max-width: 1100px;
    height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    transform: scale(0.94) translateY(12px);
    transition: transform 0.25s ease;
}

.projects-modal-overlay.aberto .projects-modal {
    transform: scale(1) translateY(0);
}

body.dark-mode .projects-modal {
    background: #1a1a1a;
    color: #e0e0e0;
}

.projects-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

body.dark-mode .projects-modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.projects-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.projects-modal-fechar {
    background: transparent;
    border: none;
    font-size: 1rem;
    color: inherit;
    padding: 6px 10px;
    transform: none;
    cursor: pointer;
}

.projects-modal-body {
    flex: 1;
    overflow: auto;
    padding: 20px;
}

/* =========================================
   MODAL: PAINT
   ========================================= */
.paint-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.paint-modal-overlay.aberto {
    opacity: 1;
    visibility: visible;
}

.paint-modal {
    background: #ffffff;
    color: #111111;
    border-radius: 20px;
    width: 100%;
    max-width: 900px;
    height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    transform: scale(0.94) translateY(12px);
    transition: transform 0.25s ease;
}

.paint-modal-overlay.aberto .paint-modal {
    transform: scale(1) translateY(0);
}

body.dark-mode .paint-modal {
    background: #1a1a1a;
    color: #e0e0e0;
}

.paint-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

body.dark-mode .paint-modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.paint-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.paint-subtitle {
    margin: 2px 0 0;
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0.6;
}

body.dark-mode .paint-subtitle {
    opacity: 0.5;
}

.paint-modal-fechar {
    background: transparent;
    border: none;
    font-size: 1rem;
    color: inherit;
    padding: 6px 10px;
    transform: none;
    cursor: pointer;
}

.paint-modal-body {
    flex: 1;
    overflow: auto;
    padding: 20px;
}

.paint-modal #canvas-desenho {
    height: 40vh;
}

.modal-overlay {
    z-index: 1001;
}

/* =========================================
   MOBILE: LAYOUT PRINCIPAL (até 768px)
   ========================================= */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
    }

    body {
        overflow-y: hidden;
    }

    .site-container {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
        margin: 0;
        padding: 48px 16px 12px 16px;
        box-sizing: border-box;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .controles-flutuantes {
        position: absolute;
        top: 12px;
        left: 16px;
        right: 16px;
        gap: 8px;
        justify-content: flex-end;
        align-items: center;
    }

    .menu-flutuante {
        width: auto;
        justify-content: flex-end;
    }

    .btn-icon {
        padding: 6px 10px;
        font-size: 1rem;
    }

    .colunas {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 16px;
    }

    .bloco-nome {
        grid-column: 1;
        grid-row: 1;
        order: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0;
    }

    .bloco-foto {
        grid-column: 1;
        grid-row: 2;
        order: 2;
        display: flex;
        justify-content: center;
    }

    .bloco-bio {
        grid-column: 1;
        grid-row: 3;
        order: 3;
        height: auto;
        gap: 12px;
    }

    .bloco-skills {
        grid-column: 1;
        grid-row: 5;
        order: 5;
    }

    .bloco-nav {
        grid-column: 1;
        grid-row: 4;
        order: 4;
    }

    .site-title {
        font-size: 2rem;
        min-height: auto;
        white-space: normal;
        text-align: center;
    }

    .site-subtitle {
        font-size: 1.5rem;
        min-height: auto;
        white-space: normal;
        text-align: center;
    }

    .img-i {
        width: 65vw;
        max-width: 280px;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: contain;
        border-radius: 16px;
        margin-bottom: 16px;
    }

    body.dark-mode #foto-carrossel {
        width: 65vw;
        max-width: 280px;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: contain;
        object-position: center center;
        border-radius: 16px;
    }

    .sobre-mim {
        margin-top: 0;
        padding: 0 8px;
    }

    .sobre-mim h1 {
        font-size: 1.4rem;
        text-align: center;
    }

    .sobre-mim p {
        font-size: 1rem;
        line-height: 1.5;
        text-align: left;
    }

    .skills-section {
        margin-top: 16px;
        padding-bottom: 80px;
    }

    .skills-section h2 {
        font-size: 1.1rem;
        text-align: center;
        margin-bottom: 12px;
    }

    .skills-container {
        justify-content: center;
        gap: 8px;
    }

    .skill-tag {
        padding: 6px 12px;
        font-size: 0.85rem;
    }

    .bloco-nav {
        margin-top: 32px !important;
    }

    .bloco-nav ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
    }

    .bloco-nav ul li {
        margin: 0;
        width: 100%;
        max-width: 300px;
    }

    .bloco-nav ul li a,
    .bloco-nav ul li button {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 12px 20px;
        border-radius: 12px;
        background-color: #f0f0f0;
        border: 1px solid #d0d0d0;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        display: flex;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }

    .bloco-nav ul li a:hover,
    .bloco-nav ul li button:hover {
        background-color: #e4e4e4;
    }

    body.dark-mode .bloco-nav ul li a,
    body.dark-mode .bloco-nav ul li button {
        background-color: #333333;
        border-color: #444444;
        color: #fff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    }

    body.dark-mode .bloco-nav ul li a:hover,
    body.dark-mode .bloco-nav ul li button:hover {
        background-color: #3e3e3e;
    }

    /* =========================================
       MOBILE: MODAIS
       ========================================= */
    .cv-modal,
    .projects-modal,
    .paint-modal,
    .modal-salvar {
        width: 95vw;
        max-width: none;
        height: 88vh;
        max-height: none;
        border-radius: 16px;
        margin: 0 auto;
    }

    .contact-modal {
        width: 95vw;
        max-width: none;
        height: auto;
        max-height: 85vh;
        border-radius: 16px;
        margin: 0 auto;
    }

    .cv-modal-overlay,
    .contact-modal-overlay,
    .projects-modal-overlay,
    .paint-modal-overlay,
    .modal-overlay {
        padding: 10px;
        align-items: flex-end;
    }

    .cv-modal-overlay.aberto .cv-modal,
    .contact-modal-overlay.aberto .contact-modal,
    .projects-modal-overlay.aberto .projects-modal,
    .paint-modal-overlay.aberto .paint-modal,
    .modal-overlay.aberto .modal-salvar {
        transform: translateY(0);
    }

    .cv-modal-iframe {
        min-height: 0;
        height: 100%;
        width: 100%;
        border: none;
    }

    .contact-modal {
        padding: 16px;
    }

    .contact-item {
        padding: 12px;
        gap: 12px;
    }

    .contact-icon {
        font-size: 1.5rem;
        width: 36px;
        height: 36px;
    }

    .contact-platform {
        font-size: 1rem;
    }

    .contact-username {
        font-size: 0.8rem;
    }

    .projects-modal-body {
        padding: 12px;
    }

    .carousel-container {
        flex-direction: column;
        gap: 16px;
    }

    .carousel-btn {
        display: none;
    }

    .projects-track {
        flex-direction: column;
        flex-wrap: wrap;
        gap: 16px;
        overflow-x: hidden;
        overflow-y: auto;
        padding-bottom: 0;
    }

    .project-card {
        flex: 0 0 100%;
        min-width: 100%;
    }

    .card-img {
        aspect-ratio: 16 / 10;
    }

    .card-info {
        padding: 16px;
    }

    .card-info h3 {
        font-size: 1.1rem;
    }

    .paint-modal-body {
        padding: 12px;
    }

    .desenho-toolbar {
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .ferramenta-btn {
        padding: 10px 12px;
        font-size: 0.8rem;
    }

    .paleta-cores {
        justify-content: center;
        gap: 6px;
    }

    .cor-swatch {
        width: 32px;
        height: 32px;
    }

    #canvas-desenho {
        height: 35vh;
    }

    .modal-salvar {
        padding: 16px;
    }

    .modal-body {
        flex-direction: column;
        align-items: center;
    }

    .modal-preview {
        width: 120px;
        height: 120px;
    }

    .modal-campos {
        width: 100%;
    }

    .modal-actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-secundario,
    .btn-download {
        width: 100%;
        justify-content: center;
        padding: 14px;
        font-size: 1rem;
    }
}

/* =========================================
   TABLET (769px - 1024px)
   ========================================= */
@media (min-width: 769px) and (max-width: 1024px) {
    .site-container {
        width: 98vw;
        padding: 16px 24px;
    }

    .colunas {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .site-title {
        font-size: 2.5rem;
    }

    .site-subtitle {
        font-size: 1.8rem;
    }

    .img-i {
        width: 200px;
        height: 200px;
    }

    body.dark-mode #foto-carrossel {
        width: 200px;
        height: 200px;
    }

    .cv-modal,
    .projects-modal,
    .paint-modal {
        max-width: 700px;
        height: 85vh;
    }

    .contact-modal {
        max-width: 450px;
    }
}

/* =========================================
   NOTEBOOK (1025px - 1200px)
   ========================================= */
@media (min-width: 1025px) and (max-width: 1200px) {
    .site-container {
        width: 96vw;
        padding: 16px 2vw;
    }

    .colunas {
        gap: 30px;
    }

    .site-title {
        font-size: 3rem;
    }

    .site-subtitle {
        font-size: 2.2rem;
    }
}

/* =========================================
   DESKTOP (acima de 1201px) - Estilos originais preservados
   ========================================= */
@media (min-width: 1201px) {
    .site-container {
        width: 95vw;
        max-width: 1400px;
        padding: 10px 2vw;
    }
}