@import url('global.css');
@import url('header.css');
@import url('hero.css');
@import url('competencia.css');
@import url('projeto.css');
@import url('contato.css');

/* ===== VARIÁVEIS GLOBAIS ===== */
:root{
    --verde-claro: #64FFDA;
    --cinza-claro: #CCD6F6;
    --cinza-claro-hover: #e2e8fd;
    --roxo-escuro: #0F0F23;
    --roxo-cinza: #2A2A4A;
    --cinza-escuro: #8892B0;
    --border-nav: #2A2A4A;
    --azul-escuro: #112240;
    --azul-claro: #1E2A4A;

}

.display-none{
    display: none;
}

.height{
    height: 100vh;
}

.gradient-section{
    background: linear-gradient(90deg, #0F0F23 0%, #1A1A3A 50%, #0F0F23 100%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--roxo-escuro);
    color: var(--cinza-claro);
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
}

.gradient-section {
    background: linear-gradient(90deg, #0F0F23 0%, #1A1A3A 50%, #0F0F23 100%);
}

/* Botões */
.btn-outline {
    border: 1px solid var(--verde-claro);
    color: var(--verde-claro);
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-outline:hover {
    background-color: var(--verde-claro);
    color: var(--roxo-escuro);
}

.btn-primary {
    background-color: var(--verde-claro);
    color: var(--roxo-escuro);
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.title-general{
    padding-top: 2rem;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

.divisor-general{
    width: 4rem;
    margin: 0.75rem auto;
    border-color: var(--verde-claro);
}

.paragraph-general{
    font-size: 0.875rem;
    line-height: 1.425rem;
    color: var(--cinza-escuro);
    text-align: center;
}

@media (min-width: 1024px) {
    .btn-outline,
    .btn-primary {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
}

@media (min-width: 1024px) {
    .title-general{
        font-size: 2rem;
    }

    .divisor-general{
        width: 4rem;
        margin: 0.75rem auto;
        border: 1rem;
        border: 0.1rem solid var(--verde-claro);
    }

    .paragraph-general{
        font-size: 1.2rem;
    }

}