:root {
    --background-principal: #0f172a;
    --background-secundario: #0a0f1e;
    --background-gradient-titulo: linear-gradient(90deg, rgba(56, 189, 248, 1) 0%, rgba(34, 197, 94, 1) 100%);
    --background-cards: #1e293b;

    --text-color-1: #cbd5e0;
    --text-color-2: #38bdf8;
    --text-gray: #9fa5af;
    /* Texto secundário */

    --border-color: #38BFF833;
    --border-color2: #34ade3;

    --bg-mobile: #111a2e;
    --bg-item: #1a2437;
    /* Fundo de cada li */
    --bg-icon-box: #1a434c;
    --text-blue: #38bdf8;
    /* Azul dos ícones e logo */

    --border-subtle: rgba(255, 255, 255, 0.05);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* evita que o elemento saia quando adicionar padding e bordas*/
}

body {
    background-color: var(--background-principal);
}

.menu {

    display: flex;
    justify-content: space-around;
    align-items: center;

    width: 100%;
    max-width: 100%;

    padding: 1rem;

    background: var(--background-principal);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);

    position: sticky;
    top: 0;
    z-index: 29;
}

.menu-mobile {
    display: none;
}

.hamburguer{
    display: none;
}

.conteiner-principal {
    display: flex;
    justify-content: space-around;
    align-items: center;

    width: 100%;
}

.logo {
    font-size: 1.25rem;
    font-weight: 700;


    background: var(--background-gradient-titulo);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}

.logo a {
    text-decoration: none;
}

.logo a:visited {
    text-decoration: none;

}

.links-menu ul {
    display: flex;
    list-style-type: none;
    gap: 1.5rem;


    color: #e2e8f0;
    cursor: pointer;
}

.links-menu ul :hover {
    color: #38bdf8;
    cursor: pointer;
}

.links-menu ul a {
    text-decoration: none;
    color: #e2e8f0;
}

.idiomas{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0.625rem;

    padding: 0.313rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}



.idiomas button{
    font-size: 0.75rem;
    background: none;
    border: none;
    color: var(--text-color-1);
    cursor: pointer;
}

body[data-lang="pt"] button[data-lang-btn="pt"],
body[data-lang="en"] button[data-lang-btn="en"] {
    padding: 0.2rem;
    background: #38bdf8;
    color: #fff;
    border-radius: 7px;
}

/*======================
    ESTILO SEÇÃO INICIO
========================*/

.Inicio {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    min-width: 100%;
    min-height: 100vh;

    background: var(--background-principal);

    position: relative;
    overflow: hidden;
}

.Inicio h1 {
    font-size: 5rem;

    margin-bottom: 1.5rem;

    background: var(--background-gradient-titulo);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


.Inicio h2 {
    font-size: 1rem;
    color: #99a1af;

    margin-bottom: 3rem;
}

.Inicio a {
    text-decoration: none;
}

.msg-animado {
    font-size: 1.25rem;

    margin-bottom: 2rem;
    color: var(--text-color-1);

    border-right: 2px solid #38bdf8;
    white-space: nowrap;

    overflow: hidden;

    animation: marcador 1s step-end infinite;
}

@keyframes marcador {
    50% {
        border-right: none;
    }
}

.btn-ancora {
    border: none;
    border-radius: 0.938rem;
    padding: 0.75rem 2rem;

    color: #cbd5e0;
    background: #38bdf8;

    cursor: pointer;

}

.btn-ancora:hover {
    background: #22c55e;
}

.icon-bottom {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    justify-content: center;
    align-items: center;

    animation: bounce 2s infinite;

}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translate(-50%, 0);
    }

    40% {
        transform: translate(-50%, -10px);
    }

    60% {
        transform: translate(-50%, -5px);
    }
}


/*===========================================
CONFIGURAÇÃO DA SEÇÃO SOBRE
=============================================*/

.sobre {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    min-height: 100vh;

    padding: 2.5rem 1.25rem;

    background: var(--background-secundario);
}

.titulo-sobre {
    display: flex;
    align-items: center;
    width: 75rem;
    max-width: 100%;

    gap: 0.625rem;
    padding: 0.625rem;


}

.titulo-sobre h2 {
    font-size: 3rem;
    color: var(--text-color-1);
}

.conteiner-terminal {
    width: 60rem;
    max-width: 90%;
}

.terminal {
    display: flex;
    flex-direction: column;



    border: 1px solid var(--border-color);
    border-radius: 8px;

    overflow: hidden;
}

.cabecalho-terminal {
    display: flex;
    align-items: center;

    padding: 0.825rem;
    gap: 1rem;
    border-bottom: 1px solid var(--border-color);
    background: #0f172a;
}

.bolinhas {
    display: flex;
    gap: 0.4rem;
}

.bolinha-vermelha,
.bolinha-amarela,
.bolinha-verde {

    width: 15px;
    height: 15px;
    border-radius: 50%;

}

.bolinha-vermelha {
    background: #fb2c36;
}

.bolinha-amarela {
    background: #f0b100;
}

.bolinha-verde {
    background: #00c950;
}

.nome-user {
    font-size: 0.875rem;
    color: #cbd5e0;
}

/*                              */
.conteudo-interativo {
    display: flex;
    flex-direction: column;

    gap: 0.625rem;
    padding: 1rem;
    background: var(--background-cards);
}

.conteudo-interativo p {
    font-size: 1rem;
}

.bloco-comandos {
    max-height: 300px;
    overflow-y: auto;
}

.bloco-comandos::-webkit-scrollbar {
    width: 10px;
}

.bloco-comandos::-webkit-scrollbar-track {
    background: transparent;
}

.bloco-comandos::-webkit-scrollbar-thumb {
    background: white;
    border-radius: 10px;
}


.icon-text {
    display: flex;
    align-items: center;
    gap: 0.313rem;
}


.prompto {
    color: var(--text-color-2);
    margin-right: 5px;
}

.output-text {
    color: #cbd5f5;
    line-height: 1.5;
}

.input-text {
    color: #e2e8f0;
    margin-top: 0.3rem;
}

.error-text {
    color: #ff4d4d;
    margin-top: 0.3rem;
}

.form-terminal {
    display: flex;
    align-items: center;
    /* Alinha o span e o input na mesma linha vertical */
    gap: 5px;
    /* Define um espaço pequeno e fixo entre o prompt e o cursor */
    padding: 0.313rem 0;
    /* Adicionado 'rem' para corrigir o erro de sintaxe */
    width: 100%;
}

.form-terminal input {
    background: transparent;
    border: none;
    outline: none;
    color: #e2e8f0;
    flex: 1;
    /* Faz o campo de texto ocupar todo o resto da linha */
    font-family: inherit;
    font-size: 1rem;
    padding: 0;
    /* Remove paddings internos que podem entortar o texto */
}

.form-terminal input::placeholder {
    font-size: 0.875rem;
    color: #e2e8f0;
}

.form-terminal input:focus {
    outline: none;
}

.form-terminal .prompto {
    color: var(--text-color-2);
    white-space: nowrap;
    /* Impede que o prompt quebre linha em telas menores */
    margin-right: 5px;
}

.dica {
    margin-top: 0.625rem;
    color: #99a1af;
}

/*=========================
    ESTILO DA SEÇÃO SKILLS
===========================*/

.skills {
    padding: 60px 20px;
    background-color: #0f172a;
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 4rem;
}

.titulo-skills {
    font-size: 3rem;
    color: var(--text-color-1);
}

/* Grid de 2 colunas principais */
.grafico-card {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    /* O gráfico ganha um pouco mais de largura */
    gap: 1.875rem;
    max-width: 1200px;
    width: 100%;
    align-items: center;
}

.grafico {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 30px;
    height: 450px;
    /* Altura fixa para manter o retângulo */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.titulo-grafico {
    color: #f8fafc;
    margin-bottom: 20px;
    font-size: 1.5rem;
}

/* Grid Interna dos Cards (2 colunas) */
.grid-card {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.card {
    background: #1e293b;
    border: 1px solid #334155;
    border-left: 4px solid;
    /* Borda colorida na lateral */
    border-radius: 8px;
    padding: 20px;
    min-height: 140px;
}

/* Cores das Bordas (Combine com o Figma) */
.border-frontend {
    border-left-color: #38bdf8;
}

.border-design {
    border-left-color: #22c55e;
}

.border-frameworks {
    border-left-color: #f59e0b;
}

.border-backend {
    border-left-color: #8b5cf6;
}

.border-tools {
    border-left-color: #ec4899;
}

.border-softskills {
    border-left-color: #14b8a6;
}

.card h3 {
    color: #f8fafc;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.card ul {
    list-style: none;
    padding: 0;
}

.card ul li {
    color: #94a3b8;
    font-size: 0.9rem;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

/* Pontinho colorido antes do texto */
.card ul li::before {
    content: "•";
    margin-right: 8px;
    font-size: 1.2rem;
}

.border-frontend ul li::before {
    color: #38bdf8;
}

.border-design ul li::before {
    color: #22c55e;
}

.border-frameworks ul li::before {
    color: #f59e0b;
}

.border-backend ul li::before {
    color: #8b5cf6;
}

.border-tools ul li::before {
    color: #ec4899;
}

.border-softskills ul li::before {
    color: #14b8a6;
}




/*===========================
    ESTILO DA SEÇÃO PROJETOS
=============================*/
.projetos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /* vai distribui Título, Filtros e Carrossel */
    padding: 2.5rem 1.25rem;
    height: 100vh;
    /* Ocupa exatamente a tela cheia */
    background: var(--background-secundario);
    overflow: hidden;
    /* Evita scroll desnecessário */
}

.cabecalho-projetos {
    text-align: center;
    z-index: 8;
}

.cabecalho-projetos h2 {
    font-size: 3rem;
    color: var(--text-color-1);
}

.filtro {
    display: flex;
    gap: 15px;
    margin-top: 1.25rem;
    margin-bottom: 1.875rem;
}

.btn-filtro {
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 0.625rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 7px;

    color: var(--text-color-1);

    background: var(--background-cards);
}

.btn-filtro:hover {
    transform: scale(1.01);
    border: 1px solid #00c950;
}

.carrossel {
    position: relative;
    perspective: 1200px;
    width: 100%;
    flex: 1;
    /* Faz o carrossel ocupar o espaço restante com inteligência */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    touch-action: pan-y;
}

.btn-esquerda,
.btn-direita {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    color: white;
    z-index: 10;

    padding: 0.5rem;
    border: none;
    background: #38bdf8;
    box-shadow: 0 5px 10px rgba(56, 189, 248, 0.5);
    border-radius: 50%;


    cursor: pointer;
}

.btn-esquerda:hover,
.btn-direita:hover {
    background: #22c55e;
    box-shadow: 0 5px 10px rgba(33, 196, 93, 0.5);
}

.btn-esquerda {
    left: 5%;
}

.btn-direita {
    right: 5%;
}



.carrossel-posicao {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* ===========================
   ESTILO DO CARD (PARA O CARROSSEL 3D)
============================= */

.card-projetos {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;

    width: 350px;
    background-color: #1a2332;
    border-radius: 20px;
    overflow: hidden;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    border: 1px solid var(--border-color);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Transição suave para o carrossel */
    backface-visibility: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);


    position: absolute;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    /* Permite que filhos 3D funcionem */
    z-index: 1;
}

.card-projetos.ativo {
    transform: scale(1.1);
    border: 2px solid #38bdf8;
    box-shadow: 0 20px 40px rgba(56, 189, 248, 0.5);
    z-index: 999;
    display: revert;
}

.card-projetos:not(.ativo) {
    filter: blur(1px);

}

.card-projetos .botoes:not(.ativo) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.card-projetos.ativo .botoes {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.card-projetos a {
    text-decoration: none;
}

.card-projetos a:visited {
    text-decoration: none;
}


.img:hover {
    transform: scale(1.1);
    filter: brightness(0.8);
    background-position: center top;

}


/* Área da Imagem */
.card1 .img {
    width: 100%;
    height: 180px;
    /* IMPORTANTE: Altura fixa para limitar a imagem */

    /* Configurações para a imagem de fundo */
    background-size: cover;
    /* Faz a imagem cobrir o espaço sem esticar */
    background-position: center;
    /* Centraliza a parte principal da imagem */
    background-repeat: no-repeat;

    /* Coloque o link da sua imagem aqui para testar */
    background-image: url(/assets/img/cards-projetos/sistema-estudo.png);

}

.card2 .img {
    width: 100%;
    height: 180px;
    /* IMPORTANTE: Altura fixa para limitar a imagem */

    /* Configurações para a imagem de fundo */
    background-size: cover;
    /* Faz a imagem cobrir o espaço sem esticar */
    background-position: center;
    /* Centraliza a parte principal da imagem */
    background-repeat: no-repeat;

    /* Coloque o link da sua imagem aqui para testar */
    background-image: url(/assets/img/cards-projetos/gerenciador-tarefas.png);

}

.card3 .img {
    width: 100%;
    height: 180px;
    /* IMPORTANTE: Altura fixa para limitar a imagem */

    /* Configurações para a imagem de fundo */
    background-size: cover;
    /* Faz a imagem cobrir o espaço sem esticar */
    background-position: center;
    /* Centraliza a parte principal da imagem */
    background-repeat: no-repeat;

    /* Coloque o link da sua imagem aqui para testar */
    background-image: url(/assets/img/cards-projetos/linebarbearia.png);

}

.card4 .img {
    width: 100%;
    height: 180px;
    /* IMPORTANTE: Altura fixa para limitar a imagem */

    /* Configurações para a imagem de fundo */
    background-size: cover;
    /* Faz a imagem cobrir o espaço sem esticar */
    background-position: center;
    /* Centraliza a parte principal da imagem */
    background-repeat: no-repeat;

    /* Coloque o link da sua imagem aqui para testar */
    background-image: url(/assets/img/cards-projetos/doranime.png);

}

.card5 .img {
    width: 100%;
    height: 180px;
    /* IMPORTANTE: Altura fixa para limitar a imagem */

    /* Configurações para a imagem de fundo */
    background-size: cover;
    /* Faz a imagem cobrir o espaço sem esticar */
    background-position: center;
    /* Centraliza a parte principal da imagem */
    background-repeat: no-repeat;

    /* Coloque o link da sua imagem aqui para testar */
    background-image: url(/assets/img/cards-projetos/Smartphone\ com\ app\ de\ produtividade\ gamificado.png);

}



/* Conteúdo */
.conteudo {
    padding: 24px;
    text-align: left;
    /* Garante que o texto não centralize com o card */
}

.conteudo h2 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: #fff;
    text-transform: capitalize;
}

.conteudo p {
    font-size: 0.9rem;
    color: #94a3b8;
    line-height: 1.5;
    margin-bottom: 20px;
    /* Limita o texto para não quebrar o tamanho do card */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 60px;
}

/* Tags de Ferramentas */
.ferramentas-usadas {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.ferramentas-usadas span {
    background: rgba(56, 189, 248, 0.1);
    color: var(--text-color-2);
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    border: 1px solid rgba(56, 189, 248, 0.2);
}

.botoes {
    display: flex;
    gap: 12px;
    width: 100%;
    /* Garante que o container use a largura disponível */
}

/* Agora o flex: 1 vai para a tag 'a' */
.botoes a {
    flex: 1;
    text-decoration: none;
    /* Remove o sublinhado padrão do link */
}

.botoes button {
    width: 100%;
    /* O botão agora ocupa 100% do link (que é flex: 1) */
    padding: 12px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    /* Adicionado aqui para centralizar com o ícone */
    transition: transform 0.2s, filter 0.2s;
}

.demo{
    color: var(--text-color-1);
    background-color: #34ade3;
}
.demo:hover {
    background-color: #00c950;
}


.codigo {
    background-color: var(--background-principal);
    color: var(--text-color-1);
    border: 1px solid #334155 !important;
    /* !important caso o reset de border acima conflite */
}

/* Hovers */
.botoes button:hover {
    transform: scale(1.02);
    filter: brightness(1.1);
}

.codigo:hover {
    border: 1px solid var(--border-color2) !important;
}

/* Ajuste nos ícones SVG dentro dos botões */
.botoes button svg {
    flex-shrink: 0;
    /* Impede que o ícone amasse */
}

.indice {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;
}

.indice-number {
    position: absolute;
    top: -20px;
    /* sobe o número */
    left: 50%;
    transform: translateX(-50%);
}

.blocos {
    display: flex;
    gap: 8px;
    align-items: center;
}

.bloco-item {
    width: 12px;
    height: 4px;
    background: rgba(56, 189, 248, 0.2);
    border-radius: 4px;
    transition: all 0.4s ease;
    cursor: pointer;
}

.bloco-item:hover {
    background: rgba(56, 189, 248, 0.5);
}

.bloco-ativo {
    width: 24px;
    background: #38bdf8;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}

.indice-number {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    letter-spacing: 2px;
    color: var(--text-color-2);
}



/* ===========================
   ESTILO DA SEÇAO DE CONTATO
============================= */
.contato {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    min-height: 100vh;

    padding: 3.5rem;
    gap: 0.625rem;

}

.contato h2 {
    font-size: 3rem;
    color: var(--text-color-1);
}

.contato p {
    font-size: 1rem;
    color: #e2e8f0;
}

.grid-form-social {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}



/* Container que agrupa a aba e o formulário */
.envelope-wrapper {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 60px auto 0;
    /* Espaço no topo para a aba não cortar */
}

/* Aba do envelope (A parte triangular de cima) */
.envelope-flap {
    position: absolute;
    top: -35px;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: var(--background-cards);
    border-radius: 12px 12px 0 0;


    clip-path: polygon(0 0, 50% 60%, 100% 0, 100% 100%, 0 100%);

    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    z-index: 11;
    /* Fica atrás da 'carta' (formulário) */
}

/* O corpo do formulário */
.form-container {
    position: relative;
    background-color: var(--background-cards);
    padding: 2.5rem;
    border-radius: 12px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border: 1px solid var(--border-color);
    border-top: none;
    z-index: 2;
    /* Garante que fique por cima da aba */
}

.form-container form {
    position: relative;
    z-index: 2;
}



.contact-label {
    color: #94a3b8;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.contact-input {
    width: 100%;
    padding: 0.8rem 1rem;
    margin-bottom: 1.5rem;
    background: #0f172a;
    /* Fundo mais escuro que o card */
    border: 1px solid #334155;
    border-radius: 8px;
    color: #fff;
    transition: all 0.3s ease;
}

.contact-input:focus {
    border-color: #38bdf8;
    outline: none;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.1);
}

.contact-textarea {
    min-height: 120px;
    resize: none;
}

.contact-submit-button {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(90deg, #38bdf8 0%, #22c55e 100%);
    color: white;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition: transform 0.2s, filter 0.2s;
}

.contact-submit-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.social-conteiner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.social-conteiner h3 {
    font-size: 1.25rem;
    color: var(--text-color-1);
}

.social-conteiner a {
    text-decoration: none;

}

.social-conteiner a:visited {
    text-decoration: none;
}

.rede-social {
    display: flex;
    align-items: center;

    width: 80%;

    gap: 0.625rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;

    background: var(--background-cards);
    transition: all 1s ease;

    cursor: pointer;
}

.rede-social:hover {
    border: 1px solid var(--border-color2);
    transform: translateX(30px);
}

.rede-social p {
    font-size: 0.875rem;
    color: var(--text-color-1);
}

.aviso {
    width: 80%;

    margin-top: 2rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.5rem;
    background: var(--background-cards);
}

.aviso p {
    font-size: 0.875rem;
    color: var(--text-color-1);
    line-height: 2;
}

/*==============
    FOOTER
================*/

.footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin-top: 2rem;
    gap: 0.3rem;
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    background: var(--background-secundario);


}

.p1 {
    font-size: 1rem;
    color: var(--text-color-1);
}

.p2 {
    font-size: 0.875rem;
    color: #d1d1d1ca;
}







/* Responsividade: No celular fica tudo em uma coluna */
@media (max-width: 900px) {
    .grafico-card {
        grid-template-columns: 1fr;
    }

    .grid-card {
        grid-template-columns: 1fr;
    }

    .card-projetos {
        position: absolute;
        width: 320px;
        /* Tamanho ideal para não poluir */
        background-color: #1a2332;
        border-radius: 20px;
        border: 1px solid var(--border-color);
        transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
        backface-visibility: hidden;
        user-select: none;
    }
}

@media(max-width: 768px) {

    .conteiner-principal {
        justify-content: start;
    }

    .links-menu {
        display: none;
    }

    .hamburguer{
        display: block;
    }

    .hamburguer button {
        background: none;
        border: none;
    }

    .menu-mobile {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        max-width: 320px;
        
        height: 100vh;
        background: #111a2e;
        z-index: 30;
        padding: 2rem;
        display: flex;
        flex-direction: column;

        /* Joga para fora da tela */
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Quando o menu estiver ativo */
    .menu-mobile.active {
        transform: translateX(0);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
    }

    /* Classe para travar o site (aplicada via JS no body) */
    body.menu-open {
        overflow: hidden;
        height: 100vh;
    }

    /* Estilo para o botão de fechar (X) que você deve colocar dentro do menu */
    .close-menu {
        align-self: flex-end;
        /* Joga o X para a direita */
        background: none;
        border: none;
        cursor: pointer;
        margin-bottom: 1rem;

        padding: 0.313rem;

        border: 1px solid var(--border-color);
        border-radius: 8px;
    }
    
    .menu-mobile a{
        text-decoration: none;
    }

    /* Estilo do Topo */
    .menu-mobile h2 {
        color: var(--text-blue);
        font-size: 1.5rem;
        margin-bottom: 0.2rem;
    }

    .menu-mobile p {
        color: var(--text-gray);
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }

    /* Divisor*/
    .menu-mobile ul {
        border-top: 1px solid var(--border-subtle);
        padding-top: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        list-style: none;
    }

    /* Estilo dos Links*/
    .menu-mobile li {
        background: var(--bg-item);
        border: 1px solid var(--border-subtle);
        border-radius: 12px;
        transition: all 0.3s ease;
    }

    .menu-mobile li:hover {
        border-color: var(--text-blue);
        transform: translateX(5px);
    }

    .icon-link {
        display: flex;
        align-items: center;
        padding: 0.8rem 1rem;
        gap: 1rem;
        color: white;
        font-weight: 500;
        text-decoration: none;
    }

    /* Caixa do Ícone */
    .icon-mobile {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 42px;
        height: 42px;
        border-radius: 8px;
        background: var(--bg-icon-box);
        color: var(--text-blue);
    }

    /* Footer do Menu */
    .p-footer{
        margin-top: auto;
        padding: 1.5rem 0;
        border-top: 1px solid var(--border-subtle);
        text-align: center;
        font-size: 0.75rem;
        color: var(--text-gray);
    }

    /*=====================
       ESTILO MOBILE inicio
    =======================*/
    .msg-animado{
        font-size: 1.18rem;
    }


    /*=====================
       ESTILO MOBILE SOBRE
    =======================*/
    .sobre {
        padding: 2rem 1rem;
    }

    .conteiner-terminal {
        width: 60rem;
        max-width: 100%;
    }

    .icon-text{
        gap: 0.1rem;
    }

    .conteudo-interativo p {
        font-size: 0.75rem;
    }

    .prompto{
        font-size: 0;
    }

    .prompto::after{
        content: ":~ >";
        font-size: 1rem;
        
    }

    .dica{
        font-size: 0.875rem;
    }

    /*=======================
       ESTILO MOBILE PROJETOS
    =========================*/
    .btn-direita, .btn-esquerda{
        display: none;
    }

    /*=======================
        MOBAL ESTILO CONTATO
    =========================*/
    .contato {
        padding: 1rem;
        gap: 0.3rem;
    }

    .contato h2{
        text-align: center;
    }

    .grid-form-social {
        grid-template-columns: 1fr;
    }


    .rede-social {
        width: 100%;
    }

    .rede-social:hover {
        transform: none;
    }

    .aviso {
        width: 100%;
    }


}