/* -------- FONTES NOHEMI -------- */

@font-face {
    font-family: 'Satoshi';
    src: url('fonts/fonts/Satoshi-Variable.ttf.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}



/* 1. O "Reset" Universal (O MAIS IMPORTANTE) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Isso faz a mágica: impede que o padding estoure a largura */
}

/* 2. A Trava de Segurança */
html, body {
    overflow-x: hidden; /* Proíbe terminantemente a rolagem horizontal */
    max-width: 100vw;   /* Garante que o site nunca seja maior que a janela */
    width: 100%;
    position: relative; /* Ajuda a segurar elementos absolutos */
}

/* ---------- GERAL ---------- */

body {
    margin: 0;
    padding: 0;
    /* MUDANÇA AQUI: De #000 (Preto) para #F3F3F3 (Seu Cinza Claro) */
    background: #F3F3F3; 
    color: #000;
    font-family: 'Satoshi', sans-serif;
    overflow-x: hidden;
}

.cta-section {
    /* 1. Mata a altura baseada na tela (o vilão do zoom) */
    height: auto !important; 
    min-height: auto !important;
    
    /* 2. Define o espaçamento fixo (não muda com zoom) */
    padding-top: 180px;  /* Espaço para o logo/menu */
    padding-bottom: 100px; /* Espaço embaixo, antes dos projetos */
    
    /* 3. Garante que o bloco não tente centralizar verticalmente em telas gigantes */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Começa do topo */
}

.cta-card {
    background-color: #000000f1; /* Fundo do Card (Preto fica luxuoso) */
    width: 100%;
    max-width: 1090px;
    border-radius: 40px; /* Borda bem arredondada estilo app */
    padding: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden; /* Garante que nada saia das bordas redondas */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.397); /* Sombra suave para "flutuar" */
}

/* Lado Esquerdo (Texto) */
.cta-text {
    flex: 1;
    max-width: 600px;
    z-index: 2; /* Fica acima de tudo */
}

.cta-text h2 {
    font-size: 56px;
    line-height: 1.1;
    color: #FFFFFF; /* Texto Branco */
    margin-bottom: 24px;
    letter-spacing: -1px;
}

.cta-text p {
    font-size: 18px;
    line-height: 1.6;
    color: #CCCCCC; /* Cinza claro para subtítulo */
    margin-bottom: 40px;
    max-width: 450px;
    margin-left: 70px;
}
.destaque {
    background: linear-gradient(90deg, #ff7a00, #ffffff); /* Laranja indo para Branco */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* Faz a mágica acontecer */
    font-weight: 700;
}
.texto-destaque {
    color: #FFFFFF;    /* Branco puro para destacar do cinza */
    font-weight: 600;  /* Um pouco mais grosso que o normal */
}
/* O Botão Estilo "Pílula" */
.cta-button {
    display: inline-block;
    padding: 18px 36px;
    border: 1px solid #FFFFFF; /* Borda fina elegante */
    border-radius: 50px;       /* Formato pílula */
    color: #FFFFFF;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.cta-button:hover {
    background-color: #ff7a00; /* Cor do seu logo ao passar o mouse */
    border-color: #ff7a00;
    color: #FFF;
    transform: translateY(-3px); /* Sobe um pouquinho */
}

/* Lado Direito (Imagem) */
.cta-image {
    flex: 1;                 /* Ocupa o espaço restante */
    display: flex;
    justify-content: center; /* Centraliza a imagem no espaço dela */
    align-items: center;     /* Centraliza verticalmente */
    position: relative;
}

.cta-image img {
    /* --- Tamanho e Posição --- */
    width: 100%;
    max-width: 3500px;  /* Tamanho que definimos */
    height: auto;
    object-fit: contain;
    -webkit-mask-image: radial-gradient(closest-side, black 40%, transparent 95%);
    mask-image: radial-gradient(closest-side, black 40%, transparent 95%);
    margin-right: 150px;
}


/* ---------- BLOCO DO VÍDEO ---------- */

.video-bloco {
    width: 100%;
    
    /* A CORREÇÃO MÁGICA: */
    height: auto !important;      /* A altura será apenas o necessário */
    min-height: auto !important;  /* Remove a ordem de ocupar a tela toda */
    
    padding-bottom: 0 !important;
    display: block;
    position: relative;
    overflow: hidden;
}
.video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* Garante comportamento de bloco */
    opacity: 0.1;
}

/* ---------- HEADER ---------- */

header {
    padding-top: 40px;
    text-align: center;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}

.logo img {
    width: 50px;
    margin-bottom: 30px;
}

.headline {                     /*FONTE DA FRASE H1 */
    font-size: 30px;           /*TAMANHO FONTE*/
    font-weight: 710;          /*GROSSURA*/
    margin-top: 10px;
    line-height: 1.2;          /*ESPAÇAMENTO VERTICAL*/
    font-family: 'Satoshi', sans-serif;
    letter-spacing: -1px;
}


/* ---------- MENU ---------- */

.hamburger {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    width: 40px;
    height: 25px;
    cursor: pointer;
    
    position: absolute;
    top: 90px;
    right: 20%; 
    z-index: 10000;
}

.hamburger span {
    width: 100%;
    height: 3px;
    background-color: #000;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.hamburger.active span {
    background-color: #ff7a00;
}

.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }


.menu {
    display: none !important;
    
    position: absolute;
    top: 130px;
    
    /* ALINHAMENTO DA CAIXA: */
    /* right: 20% -> Alinha a borda direita da caixa com o ícone */
    right: 20% !important; 
    
    background-color: #fff;
    padding: 20px 0; /* Espaço em cima e embaixo (igual navegador) */
    border-radius: 10px; /* Bordas menos redondas, mais "sistema" */
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    
    flex-direction: column !important;
    min-width: 250px; /* Largura fixa boa para leitura */
    z-index: 9999;
}

.menu.active {
    display: flex !important;
}

.menu a {
    color: #333; /* Cinza escuro elegante */
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    
    /* O TRUQUE DO "LADO ESQUERDO": */
    text-align: left;       /* Texto alinhado à esquerda */
    padding: 12px 25px;     /* Espaçamento interno */
    border-bottom: none;    /* Remove linhas divisórias (opcional) */
    width: 100%;            /* Ocupa a largura toda */
    box-sizing: border-box; /* Garante que o padding não quebre */
    transition: background 0.2s;
}

.menu a:hover {
    background-color: #fafafa; /* Um fundo quase branco (opcional, pode tirar se quiser) */
    color: #ff7a00 !important; /* AQUI ESTÁ O LARANJA */
}

.menu a:last-child { border-bottom: none; }

.menu a:hover::after  {
  width: 100%;
}


.menu a:last-child::after {
    content: "";
}


.portfolio-section {
    padding: 10px 5%;
    background-color: #F3F3F3; /* Mantém o fundo do site */
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    
    /* Mude de 0px para 80px (ou mais, se quiser mais longe) */
    margin-top: 80px !important; 
}

/* O Cartão do Projeto */
.projeto-item {
    display: block;
    border-radius: 24px; /* Bordas arredondadas */
    overflow: hidden;    /* Garante que a imagem respeite a borda redonda */
    position: relative;
    aspect-ratio: 1 / 1; /* FORÇA SER QUADRADO (Ou use 4/5 para retangular) */
    background-color: #000; /* Fundo preto enquanto carrega */
    transform: translateZ(0); /* Melhora performance no Chrome */
}

.img-container {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Configuração Comum para as Duas Imagens */
.img-capa, .img-hover {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Preenche o quadrado sem distorcer */
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.5s ease; /* Tempo da transição suave */
}

/* --- A LÓGICA DA MÁGICA --- */

/* 1. Imagem Hover (fica embaixo, esperando) */
.img-hover {
    z-index: 1; /* Fica atrás */
}

/* 2. Imagem Capa (fica em cima) */
.img-capa {
    z-index: 2; /* Fica na frente */
    opacity: 1; /* Totalmente visível */
}

/* 3. Quando passar o mouse no Item: */
.projeto-item:hover .img-capa {
    opacity: 0; /* A capa fica invisível, revelando a de baixo */
}

/* Efeito de Zoom leve opcional (fica muito chique) */
.projeto-item:hover .img-hover {
    transform: scale(1.05);
    transition: transform 6s ease; /* Zoom beeem lento */
}

/* --- ESTILO GERAL DOS CARDS --- */
.card-partida, .card-estrategia {
    flex: 1; /* 50% para cada */
    border-radius: 32px; /* Cantos arredondados modernos */
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease;
}

.card-partida:hover, .card-estrategia:hover {
    transform: translateY(-5px); /* Leve flutuação ao passar o mouse */
}

.sessao-mosaico {
    padding: 100px 5%;
    background-color: #F3F3F3; /* Fundo do site */
}

.mosaico-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas iguais */
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- ESTILO DAS IMAGENS --- */
.mosaico-img {
    width: 100%;
    height: 100%;
    min-height: 500px; /* Garante altura para ficar imponente */
    border-radius: 32px;
    overflow: hidden;
}

.mosaico-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.mosaico-img:hover img {
    transform: scale(1.05); /* Zoom elegante ao passar o mouse */
}

/* --- ESTILO GERAL DOS CARDS --- */
.mosaico-card {
    border-radius: 32px;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Texto no topo, Botão no chão */
    min-height: 500px; /* Mesma altura das fotos */
}

.mosaico-card h3 {
    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 24px;
    max-width: 100%;
}

.mosaico-card p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 40px;
}

/* --- CARD BRANCO (Direita Superior) --- */
.card-branco {
    background-color: #FFFFFF;
    color: #000000;
}

.card-branco p {
    color: #555;
    max-width: 400px;
}

.btn-outline {
    display: inline-block;
    padding: 16px 32px;
    
    /* ESTADO NORMAL: Borda Preta */
    border: 1px solid #000000; 
    color: #000000;
    background-color: transparent;
    
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    width: fit-content;
    transition: all 0.3s ease;
}

/* ESTADO HOVER: Fundo Laranja e Borda "some" */
.btn-outline:hover {
    background-color: #ff7a00; /* Fundo vira Laranja */
    color: #FFFFFF;            /* Texto vira Branco */
    
    /* O segredo para a borda sumir: pintamos ela da mesma cor do fundo */
    border-color: #ff7a00;     
    
    /* Ou se preferir que ela fique transparente: */
    /* border-color: transparent; */
}

/* --- CARD PRETO (Esquerda Inferior) --- */
.card-preto {
    background-color: #000000;
    color: #FFFFFF;
}

.card-preto p {
    color: #999;
    max-width: 380px;
}

/* Botão Sólido (Para o fundo Preto) */
.btn-solid {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #FFFFFF;
    color: #000000;
    padding: 16px 32px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    width: fit-content;
    transition: all 0.3s ease;
}

.btn-solid:hover {
    background-color: #ff7a00; /* Laranja da marca */
    color: #FFFFFF;
}

.btn-solid .arrow {
    transition: transform 0.3s ease;
}

.btn-solid:hover .arrow {
    transform: translateX(5px);
}



/* 2. O CARD PRETO (Corrigido) */
.sobre-card {
    background-color: #000000;
    width: 100%;
    max-width: 1050px; /* Garante o tamanho igual ao de cima */
    
    /* --- O COMANDO MÁGICO QUE FALTOU: --- */
    margin: 0 auto;  /* Isso força o card a ir para o centro */
    /* ------------------------------------ */

    border-radius: 40px;
    padding: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

/* --- TEXTO (Esquerda) --- */
.sobre-text {
    flex: 1;
    max-width: 550px;
    z-index: 2;
}

.sobre-text h2 {
    font-size: 48px;
    color: #FFFFFF;
    margin-bottom: 30px;
    font-weight: 700;
    letter-spacing: -1px;
}

.sobre-text p {
    font-size: 18px;
    line-height: 1.6;
    color: #CCCCCC; /* Cinza claro para leitura */
    margin-bottom: 40px;
}

.sobre-text strong {
    color: #FFFFFF; /* Nome em destaque branco */
}

/* Links Sociais (Estilo Minimalista) */
.social-links {
    display: flex;
    gap: 20px;
}

.social-links a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,0.3); /* Linha sutil embaixo */
    padding-bottom: 2px;
    transition: all 0.3s ease;
}

.social-links a:hover {
    color: #ff7a00; /* Laranja da marca */
    border-color: #ff7a00;
}

/* --- IMAGEM (Direita) --- */
.sobre-image {
    flex: 1;
    display: flex;
    justify-content: flex-end; /* Joga a foto para a direita */
    position: relative;
}

.sobre-image img {
    width: 350px; /* Tamanho da foto */
    height: 350px;
    object-fit: cover;
    border-radius: 50%; /* Foto redonda (ou tire essa linha para quadrada) */
    border: 4px solid #1a1a1a; /* Borda sutil para destacar do fundo preto */
    filter: grayscale(100%); /* Opcional: Foto preto e branco fica chique */
    transition: filter 0.3s ease;
}

.sobre-image img:hover {
    filter: grayscale(0%); /* Fica colorida ao passar o mouse */
}

section {
    margin-bottom: 80px; /* Empurra o próximo bloco 80 pixels para baixo */
}

/* Garante que o rodapé também tenha seu espaço */
footer {
    margin-top: 80px;
    padding: 40px 0;
    text-align: center;
}

/* O efeito Degradê Laranja na palavra */
.texto-degrade {
    background: linear-gradient(90deg, #ff7a00, #ffc300); /* Laranja -> Amarelo Ouro */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* Deixa o texto transparente para mostrar o fundo */
    background-clip: text;
    
    font-weight: 800; /* Extra bold para o degradê aparecer bem */
}

/* ---------- BOTÃO WHATSAPP FLUTUANTE ---------- */
.btn-whatsapp {
    position: fixed; /* Fixa na tela mesmo rolando */
    bottom: 30px;    /* Distância do chão */
    right: 30px;     /* Distância da direita */
    z-index: 9999;   /* Garante que fique acima de tudo */
    
    background-color: #25D366; /* Verde Oficial do WhatsApp */
    width: 60px;     /* Tamanho pequeno */
    height: 60px;    /* Tamanho pequeno */
    border-radius: 50%; /* Faz ficar redondo */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); /* Sombra para dar destaque */
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    transition: all 0.3s ease; /* Animação suave */
}

/* Tamanho do ícone dentro da bolinha */
.btn-whatsapp svg {
    width: 35px;
    height: 35px;
    fill: #FFFFFF; /* Ícone Branco */
}

/* Efeito ao passar o mouse */
.btn-whatsapp:hover {
    background-color: #128C7E; /* Verde mais escuro */
    transform: scale(1.1) translateY(-5px); /* Cresce e sobe um pouquinho */
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4); /* Sombra verde brilhante */
}



.logo {
    position: absolute;
    
    /* 1. MOVENDO PARA A DIREITA */
    left: 20%;  /* Era 5%. Aumentei para 10% para desencostar da borda */
    
    /* 2. ALINHANDO COM O MENU */
    top: 80px;  /* O seu menu está em 80px. Coloquei igual para ficarem na mesma linha */
    
    z-index: 10;
}

.logo img {
    width: 150px; /* Tamanho da logo */
    height: auto;
    display: block;
}



.modal-card-preto {
    background-color: #000000 !important; /* Fundo Preto Absoluto */
    width: 90%;
    max-width: 850px; /* Largura ideal para o formulário */
    margin: 0 auto;   /* Centraliza o card */
    padding: 60px;
    border-radius: 40px; /* Curvatura igual ao design original */
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    border: 1px solid #1a1a1a; /* Borda leve para destacar do fundo */
    position: relative;
    color: white; /* Garante que o texto geral seja branco */
}

/* --- TÍTULO COM DEGRADÊ (Igual ao "inesquecível") --- */
.modal-card-preto h2 {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
}

/* Isso aqui pinta a palavra dentro do <span> de Laranja */
.modal-card-preto h2 span {
    background: linear-gradient(90deg, #ff7a00, #ffcc00);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 800;
}

/* --- AJUSTES FINAIS DOS INPUTS E BOTÃO --- */
.btn-submit {
    background-color: #ff7b00c5 !important; /* Botão Amarelo */
    color: #ffffff !important;
    font-weight: 800;
    border-radius: 8px;
    text-transform: uppercase;
}


.modal-card-preto {
    background-color: #000000 !important;
    width: 90%;
    max-width: 1080px; /* Largura boa para leitura vertical */
    margin: 0 auto;
    
    /* --- MUDANÇA PRINCIPAL AQUI --- */
    display: block; /* Remove o 'flex' para ficar um embaixo do outro */
    /* ------------------------------ */

    padding: 60px; /* Reduzi um pouco para não ficar gigante */
    border-radius: 40px; /* Diminuí a curva para ficar mais "retangular" */
    box-shadow: 0 20px 60px rgba(0,0,0,0.9);
    border: 1px solid #222;
    position: relative;
    color: white;
}
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divide em 2 colunas iguais */
    gap: 15px; /* Espaço entre os quadrados */
    margin-bottom: 20px;
}

/* Estilo dos Inputs (Brancos igual à referência) */
.form-grid input, 
.form-grid select, 
.form-grid textarea {
    width: 100%;
    background-color: #ffffff; /* Fundo Branco */
    color: #000000;            /* Texto Escuro */
    border: none;              /* Sem borda preta */
    border-radius: 4px;        /* Levemente arredondado */
    padding: 15px;             /* Espaço interno confortável */
    font-size: 15px;
    font-family: inherit;
    box-sizing: border-box;    /* Garante que não estoure o tamanho */
    outline: none;
}

/* Foco (Quando clica para digitar) */
.form-grid input:focus, 
.form-grid select:focus, 
.form-grid textarea:focus {
    box-shadow: 0 0 0 2px #ff7a00; /* Borda laranja brilhante */
}

/* A caixa de texto grande ocupa as duas colunas */
#detalhes {
    grid-column: 1 / -1; /* Vai da coluna 1 até o final */
    resize: none;
}

/* Ajuste no Botão */
.btn-submit {
    width: 100%;
    padding: 18px;

    /* 1. COR DO FUNDO (Branco) */
    background-color: #ff7a00 !important; 
    color: #ffffff !important;            /* Letra branca */
    
    border: none;
    font-weight: 800;
    font-size: 18px;
    border-radius: 4px;
    cursor: pointer;
    
    /* 2. AQUI ESTÁ O SEGREDO DO TEXTO: */
    text-transform: none !important; /* "none" deixa igual ao HTML */
    
    transition: all 0.3s ease;
}

.btn-submit:hover {
    /* Mantém a cor original (Branco e Preto) */
    background-color: #ff7a00 !important; 
    color: #ffffff !important;
    
    /* O BRILHO Laranja em volta */
    /* 0 0 15px = Tamanho do brilho | #ff7a00 = Cor Laranja */
    box-shadow: 0 0 20px #ff7a00, 0 0 40px rgba(255, 122, 0, 0.4) !important;
    
    /* Um leve zoom para dar interatividade */
    transform: scale(1.02);
    
    /* Opcional: Uma borda fina laranja para definir bem o limite */
    border: 1px solid #ff7a00 !important;
}

/* 1. TEXTOS DE PROTEÇÃO */
.security-area {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: left;
}

.security-title {
    color: #ffffff !important;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px; /* Espaço entre cadeado e texto */
}

.security-subtitle {
    color: #888888 !important; /* Cinza discreto */
    font-size: 12px;
    margin-top: 0;
}

/* 2. CAIXA "NÃO SOU ROBÔ" (Estilo Google) */
.captcha-box {
    background-color: #f9f9f9; /* Fundo cinza bem clarinho */
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    width: 300px; /* Largura padrão do Google */
    height: 74px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px; /* Espaço antes do botão de enviar */
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

/* O Checkbox e o Texto */
.captcha-check {
    display: flex;
    align-items: center;
    gap: 12px;
}

.captcha-check input[type="checkbox"] {
    width: 24px;
    height: 24px;
    border: 2px solid #c1c1c1;
    border-radius: 2px;
    cursor: pointer;
    margin: 0; /* Remove margens padrão */
}

.captcha-check label {
    color: #000;
    font-size: 14px;
    font-family: Arial, sans-serif; /* Fonte padrão do Google */
    cursor: pointer;
}

/* O Logo do lado direito */
.captcha-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
}

.captcha-brand img {
    width: 32px;
    height: 32px;
    margin-bottom: 2px;
}

.captcha-brand span, 
.captcha-brand small {
    font-size: 8px; /* Letra miúda */
    color: #555;
    font-family: Arial, sans-serif;
    line-height: 1.1;
}

footer {
    width: 100%;
    background-color: #e2e2e2; /* Mesma cor de fundo do site ou da seção */
    color: #666; /* Cor do texto mais suave */
    text-align: center; /* Centraliza o texto */
    padding: 40px 0; /* O PULO DO GATO: Dá 40px de respiro em cima e embaixo */
    margin-top: 50px; /* Garante que ele empurre o formulário pra cima */
}

/* --- RESPONSIVO (CELULAR) --- */
@media (max-width: 600px) {
    .form-grid {
        grid-template-columns: 1fr; /* Vira 1 coluna só */
    }
}
@media (max-width: 768px)  {

    /* REFORÇO DE SEGURANÇA PARA O BODY NO MOBILE */
    body {
        overflow-x: hidden !important; /* Corta qualquer coisa que vaze para os lados */
        width: 100% !important;        /* Garante largura total */
        position: relative !important;
    }
     
  header { height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; }
   
 .logo {
        position: absolute !important; /* Solta ele para flutuar no topo */
        top: 30px !important;          /* Distância do teto */
        left: 20px !important;         /* Distância da esquerda */
        
        /* AQUI ESTÁ O SEGREDO DO SVG: */
        width: 120px !important;       /* Largura fixa para o nome caber */
        height: auto !important;       /* Altura automática */
        
        z-index: 9999 !important;      /* Obriga a ficar POR CIMA do preto */
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
    }

   .logo img, .logo svg {
        width: 100% !important;        /* O SVG obedece a caixa de 120px */
        height: auto !important;
        display: block !important;
    }

 .hamburger {
        position: absolute !important;
        top: 35px !important;          /* Alinhado visualmente com o logo */
        right: 20px !important;        /* Cola na Direita */
        
        width: 30px !important;
        height: 20px !important;
        display: flex !important;
        z-index: 9999 !important;      /* Fica por cima de tudo */
    }
.cta-section {
        /* POSIÇÃO VERTICAL: */
        /* 110px é a medida segura para ficar abaixo do logo sem criar buraco enorme */
        margin-top: 110px !important; 
        
        /* LARGURA SEGURA: */
        width: 100% !important;
        
        /* AQUI ESTÁ O SEGREDO DO "NÃO CORTAR": */
        /* Isso diz: "A largura total INCLUI as bordas, não soma elas" */
        box-sizing: border-box !important; 
        
        padding: 0 15px !important; /* Margem lateral da tela */
        
        display: block !important;
        position: relative !important;
        z-index: 1 !important;
    }

  .cta-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
        
        /* AJUSTE DE PADDING: */
        /* Topo: 40px | Lados: 20px | Baixo: 0px */
        /* Zeramos embaixo para a imagem colar na borda inferior se quiser */
        padding: 20px 20px 0px 20px !important; 
        
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        
        /* Arredondamento e Máscara */
        border-radius: 25px !important;
        overflow: hidden !important; /* ISSO É O SEGREDO: Corta a imagem nas bordas redondas */
    }
    
  .cta-text h2 {
        /* AQUI VOCÊ CONTROLA O TAMANHO: */
        font-size: 40px !important; /* Reduzi para 24px. Teste 22px se quiser menor. */
        
        line-height: 1.2 !important;    /* Ajusta a altura da linha */
        margin-bottom: 15px !important; /* Espaço abaixo dele */
        text-align: center !important;  /* Garante que fique no meio */
        width: 100% !important;
    }
    .cta-text {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centraliza os blocos */
        text-align: center !important;  /* Centraliza o texto dentro dos blocos */
        margin: 0 !important;
        padding: 0 !important;
    }
   .cta-text p {
        text-align: center !important;
        width: 100% !important;
        
        /* AQUI É O SEGREDO: zera a margem esquerda do PC */
        margin-left: 0 !important; 
        margin-right: 0 !important;
        margin-bottom: 25px !important;
        
        /* Evita que o texto encoste muito na borda */
        padding: 0 5px !important; 
    }
   .cta-button {
        /* AQUI ESTÁ A CORREÇÃO: */
        /* Muda de "block" (largura total) para "inline-block" (tamanho do texto) */
        display: inline-block !important; 
        width: auto !important; 

        /* Garante que ele não fique muito largo em telas pequenas */
        max-width: 90% !important; 

        /* Centraliza o botão e dá um espaço do texto acima dele */
        margin: 20px auto 0 auto !important; 
        
        /* Se quiser ele mais "magrinho", diminua o padding aqui: */
        /* Exemplo: padding: 12px 24px !important; */
    }
  .cta-image {
        display: block !important;      /* Tira do escondido */
        width: 100% !important;
        margin-top: 30px !important;    /* Espaço entre o botão e a imagem */
        
        /* Centraliza a imagem no container */
        display: flex !important;
        justify-content: center !important;
        align-items: flex-end !important; /* Alinha no fundo */
    }

    .cta-image img {
        width: 100% !important;        /* Ocupa a largura do card */
        max-width: 300px !important;   /* Trava para não ficar gigante */
        height: auto !important;
        display: block !important;
        
        /* Remove margens antigas */
        margin: 0 !important;
        padding: 0 !important;
    }

  .portfolio-section { padding-top: 30px !important; }
    
   .portfolio-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        
        /* DIMINUI AQUI (Espaço entre as fotos): */
        /* De 10px para 8px (ou 5px se quiser bem coladas) */
        gap: 8px !important;
        
        /* DIMINUI AQUI (Bordas da tela): */
        /* De 12px para 5px. Elas vão quase encostar na borda do celular */
        padding: 0 5px !important; 
        
        margin-top: 0 !important;
        box-sizing: border-box !important;
    }
    
    .projeto-item { 
        width: 100% !important; 
        aspect-ratio: 1/1; /* Mantém quadradinho */
        border-radius: 15px !important;
        object-fit: cover !important;
    }
.sessao-mosaico {
        padding: 50px 20px !important; /* Reduzi o padding geral */
    }

   .mosaico-grid {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .mosaico-grid {
        display: flex !important;
        flex-direction: column !important;
    }

    /* --- O PULO DO GATO (Invertendo o 3º e 4º item) --- */
    
    /* Pega o 3º item (Geralmente o Card Preto) e joga para baixo */
    .mosaico-grid > :nth-child(3) {
        order: 4 !important; 
    }

    /* Pega o 4º item (Geralmente a Imagem) e puxa para cima */
    .mosaico-grid > :nth-child(4) {
        order: 3 !important; 
    }

  .mosaico-img {
        width: 100% !important;
        
        /* AQUI ESTÁ O SEGREDO: */
        /* Aumentei para 550px para igualar a altura do card de texto */
        min-height: 390px !important; 
        height: 250px !important; 
        
        border-radius: 20px !important;
        overflow: hidden !important; /* Garante que a imagem não saia das bordas */
        margin: 0 !important;
        display: block !important;
    }

    .mosaico-img img {
        width: 100% !important;
        height: 100% !important;      /* Obriga a imagem a preencher os 550px */
        object-fit: cover !important; /* A mágica: Corta as bordas sem esticar a foto */
        display: block !important;
    }

    /* --- CARDS DE TEXTO (Branco e Preto) --- */
    .mosaico-card {
        width: 100% !important;
        min-height: auto !important; /* Altura automática conforme o texto */
        
        /* Reduzi de 60px para 30px para sobrar espaço pro texto */
        padding: 40px 30px !important; 
        
        border-radius: 20px !important;
        box-sizing: border-box !important; /* Evita que estoure a tela */
    }

    /* Títulos dos Cards */
    .mosaico-card h3 {
        font-size: 28px !important; /* Reduzido de 34px */
        margin-bottom: 20px !important;
    }

    /* Parágrafos */
    .mosaico-card p {
        font-size: 16px !important;
        margin-bottom: 30px !important;
        max-width: 100% !important;
    }

    /* --- BOTÕES DENTRO DOS CARDS --- */
    .btn-outline, .btn-solid {
        width: 100% !important;       /* Botão ocupa a largura toda */
        justify-content: center !important; /* Texto no meio */
        text-align: center !important;
        padding: 15px 0 !important;   /* Altura confortável de toque */
    }


.sobre-card {
        display: flex !important;
        flex-direction: column !important;
        
        width: auto !important;
        margin-left: 20px !important;
        margin-right: 20px !important;
        box-sizing: border-box !important;
        
        padding: 40px 25px !important;
        
        text-align: center !important;
        align-items: center !important;
        border-radius: 30px !important;
    }
  

   .sobre-text p {
        font-size: 15px !important;
        
        /* O SEGREDO DO "DESAPERTAR": */
        line-height: 2.0 !important;    /* Muito espaço entre as linhas */
        letter-spacing: 0.5px !important; /* Separa levemente as letras */
        
        /* Aumentei a margem lateral de 10px para 25px */
        /* Isso impede o texto de chegar perto da borda do card */
        padding: 0 25px !important;      
        
        color: #d1d1d1 !important;
        margin-bottom: 35px !important; /* Mais espaço antes dos links */
        font-weight: 300 !important;    /* Fonte mais leve/fina se possível */
    }

   .sobre-text {
        order: 2 !important; /* FORÇA FICAR EM SEGUNDO */
        
        width: 100% !important;
        margin-bottom: 10px !important;
        padding: 0 !important;
    }
   .sobre-text h2 {
        font-size: 26px !important;
        margin-bottom: 15px !important;
    }

  .sobre-text p {
        font-size: 15px !important;
        line-height: 1.8 !important;
        letter-spacing: 0.5px !important;
        padding: 0 10px !important;
        color: #d1d1d1 !important;
        margin-bottom: 20px !important;
    }

   .social-links {
        order: 3 !important; /* FORÇA FICAR EM TERCEIRO */
        
        display: flex !important;
        justify-content: center !important; /* Centraliza perfeitamente */
        align-items: center !important;
        
        width: 100% !important;
        gap: 25px !important; /* Distância entre os links */
        margin-bottom: 0 !important;
        flex-wrap: wrap !important;
    }
    
    /* Ajuste fino nos links para ficarem alinhados */
    .social-links a {
        display: inline-block !important;
        text-align: center !important;
        font-size: 14px !important;
    }

    
    
    .social-links a {
        font-size: 14px !important; /* Links um pouco mais delicados */
    }

  .sobre-image {
        order: 1 !important; /* FORÇA FICAR EM PRIMEIRO */
        
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        
        margin-top: 0 !important;
        margin-bottom: 25px !important; /* Espaço para o texto que vem abaixo */
    }

    .sobre-image img {
        width: 130px !important;
        height: 130px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        border: 2px solid #333 !important;
    }


   /* =======================================================
       MENU MOBILE: CAIXA NA DIREITA, TEXTO NO MEIO
       ======================================================= */
    
    .menu {
        position: absolute !important;
        top: 70px !important;
        right: 20px !important;
        
        background-color: #FFFFFF !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;
        border-radius: 20px !important;
        padding: 25px !important;
        
        /* Largura automática */
        width: auto !important;
        min-width: 180px !important;
        
        /* Limpa o resto */
        left: auto !important;
        transform: none !important;
        margin: 0 !important;
        border: none !important;
        display: none; 
        z-index: 99999 !important;
    }

    /* Quando abre */
    .menu.active {
        display: flex !important;
        flex-direction: column !important;
        
        /* AQUI MUDOU: Centraliza os itens na caixa */
        align-items: center !important; 
    }

    /* OS LINKS */
    .menu a {
        color: #000000 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        
        /* AQUI MUDOU: Texto centralizado */
        text-align: center !important; 
        
        width: 100% !important;
        padding: 8px 0 !important;
        margin-bottom: 5px !important;
        border-bottom: none !important;
        text-decoration: none !important;
    }

    .menu a:hover {
        color: #ff7a00 !important;
        background: none !important;
    }
}

@media (max-width: 768px) {
    
    /* 1. Ajusta o tamanho do cartão preto */
    .modal-card-preto {
        width: 90%;       /* Ocupa 90% da largura da tela */
        padding: 25px;    /* Diminui o espaço interno (antes devia ser maior) */
        margin: 20px auto; /* Centraliza na tela */
    }

    /* 2. Empilha os campos do formulário (Transforma 2 colunas em 1) */
    .form-grid {
        grid-template-columns: 1fr !important; /* Força 1 coluna única */
        gap: 15px; /* Espaço menor entre os campos */
    }

    /* 3. Ajusta o tamanho do Título */
    .modal-header h2 {
        font-size: 24px; /* Diminui a fonte para não quebrar linha feio */
        text-align: center;
    }

    .modal-header p {
        font-size: 14px;
        text-align: center;
    }

    /* 4. Botão de Enviar "Gordinho" (Fácil de clicar com o dedo) */
    .btn-submit {
        width: 100%;   /* Ocupa a largura total */
        padding: 15px; /* Mais área de toque */
        font-size: 16px;
    }

    /* 5. Ajusta o captcha e textos de segurança */
    .captcha-box {
        flex-direction: column; /* Coloca o captcha em cima e texto embaixo se precisar */
        align-items: center;
        gap: 15px;
    }
    
    .security-area {
        text-align: center;
    }
}



/* ==========================================================
   AJUSTES FINAIS DE RESPONSIVIDADE (TABLET, LAPTOP E TV)
   Cole isso na última linha do seu arquivo Style.css
   ========================================================== */

/* 1. FLUÍDEZ GERAL (Isso impede que os blocos travem e criem rolagem lateral) */
.sobre-card, 
.modal-card-preto,
.cta-card {
    width: 90% !important;          /* Ocupa 90% da tela disponível */
    max-width: 1200px !important;   /* Mas para de crescer se a tela for gigante */
    margin-left: auto !important;   /* Centraliza Esquerda */
    margin-right: auto !important;  /* Centraliza Direita */
}

/* 2. TABLETS E NOTEBOOKS MENORES (Telas médias, tipo iPad ou Laptop de 13") */
@media (max-width: 1024px) {
    
    /* Reduz o espaçamento gigante entre as sessões */
    .sobre-card, .modal-card-preto {
        margin-bottom: 80px !important;
        padding: 40px !important; /* Menos borda interna */
    }

    /* Ajusta o tamanho das fontes para não ficar exagerado */
    .cta-text h2, 
    .sobre-text h2,
    .modal-header h2 {
        font-size: 32px !important; /* Reduz de 48px/56px para caber na tela */
    }

    /* Grid do Portfólio vira 2 colunas (antes era 3) */
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

/* 3. TELAS GIGANTES (Monitores 4K ou Ultrawide) */
@media (min-width: 1441px) {
    body {
        max-width: 1600px; /* Trava o site no meio para não esticar infinito */
        margin: 0 auto;    /* Centraliza o bloco do site na TV */
        background-color: #F3F3F3;
        box-shadow: 0 0 50px rgba(0,0,0,0.1); /* Sombra elegante nas bordas */
    }
}


@media (max-width: 1366px) {

    /* 1. Reduz os espaços gigantes verticais (era 150px) */
    #modal-projeto, 
    .sobre-card {
        margin-top: 60px !important;
        margin-bottom: 60px !important;
    }

    /* 2. Segura a largura para não colar na borda */
    .cta-card,
    .sobre-card, 
    .modal-card-preto {
        width: 90% !important; /* Deixa 5% de respiro de cada lado */
        max-width: 1000px !important; /* Trava o tamanho máximo */
        padding: 40px !important; /* Diminui a "gordura" interna */
    }

    /* 3. Diminui a fonte dos Títulos (ficam gigantes em tela pequena) */
    .cta-text h2, 
    .sobre-text h2,
    .modal-header h2 {
        font-size: 32px !important; /* Reduz para caber melhor */
    }

    /* 4. Ajuste da Seção Hero (Topo) */
    .cta-section {
        padding-top: 120px !important; /* Sobe um pouco o conteúdo */
        padding-bottom: 50px !important;
    }

    /* 5. Se o texto e a imagem do topo estiverem batendo */
    .cta-image img {
        max-width: 250px !important; /* Diminui a imagem do astronauta/destaque */
        margin-right: 50px !important;
    }
}

/* --- RESPONSIVO (CELULAR) --- */
@media (max-width: 600px) {
    .form-grid {
        grid-template-columns: 1fr; /* Vira 1 coluna só */
    }
}
@media (max-width: 768px)  {

    /* REFORÇO DE SEGURANÇA PARA O BODY NO MOBILE */
    body {
        overflow-x: hidden !important; /* Corta qualquer coisa que vaze para os lados */
        width: 100% !important;        /* Garante largura total */
        position: relative !important;
    }
     
  header { height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; }
   
 .logo {
        position: absolute !important; /* Solta ele para flutuar no topo */
        top: 30px !important;          /* Distância do teto */
        left: 20px !important;         /* Distância da esquerda */
        
        /* AQUI ESTÁ O SEGREDO DO SVG: */
        width: 120px !important;       /* Largura fixa para o nome caber */
        height: auto !important;       /* Altura automática */
        
        z-index: 9999 !important;      /* Obriga a ficar POR CIMA do preto */
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
    }

   .logo img, .logo svg {
        width: 100% !important;        /* O SVG obedece a caixa de 120px */
        height: auto !important;
        display: block !important;
    }

 .hamburger {
        position: absolute !important;
        top: 35px !important;          /* Alinhado visualmente com o logo */
        right: 20px !important;        /* Cola na Direita */
        
        width: 30px !important;
        height: 20px !important;
        display: flex !important;
        z-index: 9999 !important;      /* Fica por cima de tudo */
    }
.cta-section {
        /* POSIÇÃO VERTICAL: */
        /* 110px é a medida segura para ficar abaixo do logo sem criar buraco enorme */
        margin-top: 110px !important; 
        
        /* LARGURA SEGURA: */
        width: 100% !important;
        
        /* AQUI ESTÁ O SEGREDO DO "NÃO CORTAR": */
        /* Isso diz: "A largura total INCLUI as bordas, não soma elas" */
        box-sizing: border-box !important; 
        
        padding: 0 15px !important; /* Margem lateral da tela */
        
        display: block !important;
        position: relative !important;
        z-index: 1 !important;
    }

  .cta-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
        
        /* AJUSTE DE PADDING: */
        /* Topo: 40px | Lados: 20px | Baixo: 0px */
        /* Zeramos embaixo para a imagem colar na borda inferior se quiser */
        padding: 20px 20px 0px 20px !important; 
        
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        
        /* Arredondamento e Máscara */
        border-radius: 25px !important;
        overflow: hidden !important; /* ISSO É O SEGREDO: Corta a imagem nas bordas redondas */
    }
    
  .cta-text h2 {
        /* AQUI VOCÊ CONTROLA O TAMANHO: */
        font-size: 40px !important; /* Reduzi para 24px. Teste 22px se quiser menor. */
        
        line-height: 1.2 !important;    /* Ajusta a altura da linha */
        margin-bottom: 15px !important; /* Espaço abaixo dele */
        text-align: center !important;  /* Garante que fique no meio */
        width: 100% !important;
    }
    .cta-text {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centraliza os blocos */
        text-align: center !important;  /* Centraliza o texto dentro dos blocos */
        margin: 0 !important;
        padding: 0 !important;
    }
   .cta-text p {
        text-align: center !important;
        width: 100% !important;
        
        /* AQUI É O SEGREDO: zera a margem esquerda do PC */
        margin-left: 0 !important; 
        margin-right: 0 !important;
        margin-bottom: 25px !important;
        
        /* Evita que o texto encoste muito na borda */
        padding: 0 5px !important; 
    }
   .cta-button {
        /* AQUI ESTÁ A CORREÇÃO: */
        /* Muda de "block" (largura total) para "inline-block" (tamanho do texto) */
        display: inline-block !important; 
        width: auto !important; 

        /* Garante que ele não fique muito largo em telas pequenas */
        max-width: 90% !important; 

        /* Centraliza o botão e dá um espaço do texto acima dele */
        margin: 20px auto 0 auto !important; 
        
        /* Se quiser ele mais "magrinho", diminua o padding aqui: */
        /* Exemplo: padding: 12px 24px !important; */
    }
  .cta-image {
        display: block !important;      /* Tira do escondido */
        width: 100% !important;
        margin-top: 30px !important;    /* Espaço entre o botão e a imagem */
        
        /* Centraliza a imagem no container */
        display: flex !important;
        justify-content: center !important;
        align-items: flex-end !important; /* Alinha no fundo */
    }

    .cta-image img {
        width: 100% !important;        /* Ocupa a largura do card */
        max-width: 300px !important;   /* Trava para não ficar gigante */
        height: auto !important;
        display: block !important;
        
        /* Remove margens antigas */
        margin: 0 !important;
        padding: 0 !important;
    }

.portfolio-section { 
    padding-top: 230px !important; 
}
    
   .portfolio-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        
        /* DIMINUI AQUI (Espaço entre as fotos): */
        /* De 10px para 8px (ou 5px se quiser bem coladas) */
        gap: 8px !important;
        
        /* DIMINUI AQUI (Bordas da tela): */
        /* De 12px para 5px. Elas vão quase encostar na borda do celular */
        padding: 0 5px !important; 
        
        margin-top: 0 !important;
        box-sizing: border-box !important;
    }
    
    .projeto-item { 
        width: 100% !important; 
        aspect-ratio: 1/1; /* Mantém quadradinho */
        border-radius: 15px !important;
        object-fit: cover !important;
    }
.sessao-mosaico {
        padding: 50px 20px !important; /* Reduzi o padding geral */
    }

   .mosaico-grid {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .mosaico-grid {
        display: flex !important;
        flex-direction: column !important;
    }

    /* --- O PULO DO GATO (Invertendo o 3º e 4º item) --- */
    
    /* Pega o 3º item (Geralmente o Card Preto) e joga para baixo */
    .mosaico-grid > :nth-child(3) {
        order: 4 !important; 
    }

    /* Pega o 4º item (Geralmente a Imagem) e puxa para cima */
    .mosaico-grid > :nth-child(4) {
        order: 3 !important; 
    }

  .mosaico-img {
        width: 100% !important;
        
        /* AQUI ESTÁ O SEGREDO: */
        /* Aumentei para 550px para igualar a altura do card de texto */
        min-height: 390px !important; 
        height: 250px !important; 
        
        border-radius: 20px !important;
        overflow: hidden !important; /* Garante que a imagem não saia das bordas */
        margin: 0 !important;
        display: block !important;
    }

    .mosaico-img img {
        width: 100% !important;
        height: 100% !important;      /* Obriga a imagem a preencher os 550px */
        object-fit: cover !important; /* A mágica: Corta as bordas sem esticar a foto */
        display: block !important;
    }

    /* --- CARDS DE TEXTO (Branco e Preto) --- */
    .mosaico-card {
        width: 100% !important;
        min-height: auto !important; /* Altura automática conforme o texto */
        
        /* Reduzi de 60px para 30px para sobrar espaço pro texto */
        padding: 40px 30px !important; 
        
        border-radius: 20px !important;
        box-sizing: border-box !important; /* Evita que estoure a tela */
    }

    /* Títulos dos Cards */
    .mosaico-card h3 {
        font-size: 28px !important; /* Reduzido de 34px */
        margin-bottom: 20px !important;
    }

    /* Parágrafos */
    .mosaico-card p {
        font-size: 16px !important;
        margin-bottom: 30px !important;
        max-width: 100% !important;
    }

    /* --- BOTÕES DENTRO DOS CARDS --- */
    .btn-outline, .btn-solid {
        width: 100% !important;       /* Botão ocupa a largura toda */
        justify-content: center !important; /* Texto no meio */
        text-align: center !important;
        padding: 15px 0 !important;   /* Altura confortável de toque */
    }


.sobre-card {
        display: flex !important;
        flex-direction: column !important;
        
        width: auto !important;
        margin-left: 20px !important;
        margin-right: 20px !important;
        box-sizing: border-box !important;
        
        padding: 40px 25px !important;
        
        text-align: center !important;
        align-items: center !important;
        border-radius: 30px !important;
    }
  

   .sobre-text p {
        font-size: 15px !important;
        
        /* O SEGREDO DO "DESAPERTAR": */
        line-height: 2.0 !important;    /* Muito espaço entre as linhas */
        letter-spacing: 0.5px !important; /* Separa levemente as letras */
        
        /* Aumentei a margem lateral de 10px para 25px */
        /* Isso impede o texto de chegar perto da borda do card */
        padding: 0 25px !important;      
        
        color: #d1d1d1 !important;
        margin-bottom: 35px !important; /* Mais espaço antes dos links */
        font-weight: 300 !important;    /* Fonte mais leve/fina se possível */
    }

   .sobre-text {
        order: 2 !important; /* FORÇA FICAR EM SEGUNDO */
        
        width: 100% !important;
        margin-bottom: 10px !important;
        padding: 0 !important;
    }
   .sobre-text h2 {
        font-size: 26px !important;
        margin-bottom: 15px !important;
    }

  .sobre-text p {
        font-size: 15px !important;
        line-height: 1.8 !important;
        letter-spacing: 0.5px !important;
        padding: 0 10px !important;
        color: #d1d1d1 !important;
        margin-bottom: 20px !important;
    }

   .social-links {
        order: 3 !important; /* FORÇA FICAR EM TERCEIRO */
        
        display: flex !important;
        justify-content: center !important; /* Centraliza perfeitamente */
        align-items: center !important;
        
        width: 100% !important;
        gap: 25px !important; /* Distância entre os links */
        margin-bottom: 0 !important;
        flex-wrap: wrap !important;
    }
    
    /* Ajuste fino nos links para ficarem alinhados */
    .social-links a {
        display: inline-block !important;
        text-align: center !important;
        font-size: 14px !important;
    }

    
    
    .social-links a {
        font-size: 14px !important; /* Links um pouco mais delicados */
    }

  .sobre-image {
        order: 1 !important; /* FORÇA FICAR EM PRIMEIRO */
        
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        
        margin-top: 0 !important;
        margin-bottom: 25px !important; /* Espaço para o texto que vem abaixo */
    }

    .sobre-image img {
        width: 130px !important;
        height: 130px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        border: 2px solid #333 !important;
    }


   /* =======================================================
       MENU MOBILE: CAIXA NA DIREITA, TEXTO NO MEIO
       ======================================================= */
    
    .menu {
        position: absolute !important;
        top: 70px !important;
        right: 20px !important;
        
        background-color: #FFFFFF !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;
        border-radius: 20px !important;
        padding: 25px !important;
        
        /* Largura automática */
        width: auto !important;
        min-width: 180px !important;
        
        /* Limpa o resto */
        left: auto !important;
        transform: none !important;
        margin: 0 !important;
        border: none !important;
        display: none; 
        z-index: 99999 !important;
    }

    /* Quando abre */
    .menu.active {
        display: flex !important;
        flex-direction: column !important;
        
        /* AQUI MUDOU: Centraliza os itens na caixa */
        align-items: center !important; 
    }

    /* OS LINKS */
    .menu a {
        color: #000000 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        
        /* AQUI MUDOU: Texto centralizado */
        text-align: center !important; 
        
        width: 100% !important;
        padding: 8px 0 !important;
        margin-bottom: 5px !important;
        border-bottom: none !important;
        text-decoration: none !important;
    }

    .menu a:hover {
        color: #ff7a00 !important;
        background: none !important;
    }
}


/* ==========================================================
   CORREÇÃO DE EMERGÊNCIA MOBILE (O "CALÇO" GIGANTE)
   Substitua o último bloco @media do seu arquivo por este.
   ========================================================== */

@media (max-width: 768px) {

html body .cta-section {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        height: auto !important;
    }
    
    /* 2. O CARD PRETO */
    html body .cta-card {
        margin-bottom: 0 !important; 
        
        position: relative !important;
    }

html body .portfolio-grid {
        /* Se 350px for muito, diminua para 200px. Se for pouco, aumente. */
        margin-top: 500px !important; 
        
        /* Garante que eles fiquem visíveis (na frente do fundo) */
        position: relative !important;
        z-index: 100 !important;
        
        /* Configuração das colunas (mantém bonito) */
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* --- RESTO DAS CONFIGURAÇÕES VISUAIS (NÃO MEXA AQUI) --- */
    body { overflow-x: hidden !important; width: 100% !important; }
    header { height: 0 !important; padding: 0 !important; overflow: visible !important; }
    .logo { position: absolute !important; top: 30px !important; left: 20px !important; width: 120px !important; z-index: 9999 !important; display: block !important; }
    .logo img { width: 100% !important; }
    .hamburger { position: absolute !important; top: 35px !important; right: 20px !important; z-index: 9999 !important; }
    
    .cta-text h2 { font-size: 32px !important; line-height: 1.2 !important; text-align: center !important; }
    .cta-text p { margin: 0 auto 20px auto !important; text-align: center !important; }
    .cta-button { display: inline-block !important; margin: 20px auto !important; }
    .cta-image { margin-top: 20px !important; width: 100% !important; }
    .cta-image img { max-width: 250px !important; margin: 0 !important; }

    .sessao-mosaico { padding: 50px 20px !important; }
    .mosaico-grid { display: flex !important; flex-direction: column !important; }
    .mosaico-grid > :nth-child(3) { order: 4 !important; }
    .mosaico-grid > :nth-child(4) { order: 3 !important; }
    .mosaico-img { min-height: 250px !important; height: 250px !important; }
    .mosaico-card { padding: 40px 30px !important; min-height: auto !important; }
    
    .sobre-card { flex-direction: column !important; padding: 40px 25px !important; width: 90% !important; text-align: center !important; }
    .sobre-image { order: 1 !important; margin-bottom: 25px !important; justify-content: center !important; }
    .sobre-text { order: 2 !important; width: 100% !important; }
    .social-links { order: 3 !important; justify-content: center !important; flex-wrap: wrap !important; }
    
    .modal-card-preto { width: 90% !important; padding: 30px 20px !important; }
    .form-grid { grid-template-columns: 1fr !important; }
    .captcha-box { flex-direction: column !important; height: auto !important; gap: 10px; }
    footer { padding: 30px 0 !important; }
}


/* ==========================================================
   AJUSTES FINAIS DE RESPONSIVIDADE (TABLET, LAPTOP E TV)
   Cole isso na última linha do seu arquivo Style.css
   ========================================================== */

/* 1. FLUÍDEZ GERAL (Isso impede que os blocos travem e criem rolagem lateral) */
.sobre-card, 
.modal-card-preto,
.cta-card {
    width: 90% !important;          /* Ocupa 90% da tela disponível */
    max-width: 1200px !important;   /* Mas para de crescer se a tela for gigante */
    margin-left: auto !important;   /* Centraliza Esquerda */
    margin-right: auto !important;  /* Centraliza Direita */
}

/* 2. TABLETS E NOTEBOOKS MENORES (Telas médias, tipo iPad ou Laptop de 13") */
@media (max-width: 1024px) {
    
    /* Reduz o espaçamento gigante entre as sessões */
    .sobre-card, .modal-card-preto {
        margin-bottom: 80px !important;
        padding: 40px !important; /* Menos borda interna */
    }

    /* Ajusta o tamanho das fontes para não ficar exagerado */
    .cta-text h2, 
    .sobre-text h2,
    .modal-header h2 {
        font-size: 32px !important; /* Reduz de 48px/56px para caber na tela */
    }

    /* Grid do Portfólio vira 2 colunas (antes era 3) */
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

/* 3. TELAS GIGANTES (Monitores 4K ou Ultrawide) */
@media (min-width: 1441px) {
    body {
        max-width: 1600px; /* Trava o site no meio para não esticar infinito */
        margin: 0 auto;    /* Centraliza o bloco do site na TV */
        background-color: #F3F3F3;
        box-shadow: 0 0 50px rgba(0,0,0,0.1); /* Sombra elegante nas bordas */
    }
}


@media (max-width: 1366px) {

    /* 1. Reduz os espaços gigantes verticais (era 150px) */
    #modal-projeto, 
    .sobre-card {
        margin-top: 60px !important;
        margin-bottom: 60px !important;
    }

    /* 2. Segura a largura para não colar na borda */
    .cta-card,
    .sobre-card, 
    .modal-card-preto {
        width: 90% !important; /* Deixa 5% de respiro de cada lado */
        max-width: 1000px !important; /* Trava o tamanho máximo */
        padding: 40px !important; /* Diminui a "gordura" interna */
    }

    /* 3. Diminui a fonte dos Títulos (ficam gigantes em tela pequena) */
    .cta-text h2, 
    .sobre-text h2,
    .modal-header h2 {
        font-size: 32px !important; /* Reduz para caber melhor */
    }

    /* 4. Ajuste da Seção Hero (Topo) */
    .cta-section {
        padding-top: 120px !important; /* Sobe um pouco o conteúdo */
        padding-bottom: 50px !important;
    }

    /* 5. Se o texto e a imagem do topo estiverem batendo */
    .cta-image img {
        max-width: 250px !important; /* Diminui a imagem do astronauta/destaque */
        margin-right: 50px !important;
    }
}