/* ---------------------------------------------------------
   STYLES.CSS - NORMATIZE ENGENHARIA
   Estilos técnicos, padrões de blueprint, grids e glows corporativos.
   --------------------------------------------------------- */

/* DEFINIÇÃO DE VARIÁVEIS / TOKENS DE DESIGN */
:root {
    --color-bg-base: #0F0F11;
    --color-bg-card: #18181B;
    --color-primary: #E65F00;
    --color-primary-glow: rgba(230, 95, 0, 0.15);
    --color-text-main: #FAFAFA;
    --color-text-muted: #A1A1AA;
    --font-sans: 'Inter', sans-serif;
    --font-heading: 'Outfit', sans-serif;
    --font-mono: 'Fira Code', monospace;
}

/* RESET E BASE */
html {
    scroll-behavior: smooth;
    background-color: var(--color-bg-base);
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-bg-base);
    color: var(--color-text-main);
}

/* CUSTOM SCROLLBAR (Premium Dark Theme) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #0F0F11;
}

::-webkit-scrollbar-thumb {
    background: #27272A;
    border: 2px solid #0F0F11;
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* GRID TÉCNICO DE FUNDO (BLUEPRINT MULTICAMADAS) */
.technical-grid-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: 
        linear-gradient(to right, rgba(63, 63, 70, 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(63, 63, 70, 0.08) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center top;
}

.technical-grid-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(to right, rgba(63, 63, 70, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(63, 63, 70, 0.03) 1px, transparent 1px);
    background-size: 10px 10px;
    background-position: center top;
    pointer-events: none;
}

/* GRADE TÉCNICA EM SOBREPOSIÇÃO (CARD DO HERO) */
.bg-technical-grid-lines {
    background-image: 
        linear-gradient(to right, rgba(230, 95, 0, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(230, 95, 0, 0.06) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* MICRO-GLOW EFFECT PARA CTAS PRINCIPAIS */
.glow-button {
    position: relative;
    z-index: 1;
}

.glow-button::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--color-primary);
    filter: blur(10px);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}

.glow-button:hover::before {
    opacity: 0.4;
}

/* BORDAS E CARDS TÉCNICOS */
.technical-image-container {
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.technical-image-container:hover {
    border-color: rgba(230, 95, 0, 0.4);
    box-shadow: 0 0 30px rgba(230, 95, 0, 0.08);
}

/* FONTES ESPECÍFICAS PARA ESTATÍSTICAS */
.counter {
    font-family: var(--font-heading);
    font-weight: 800;
}

/* CUSTOM DROPDOWN RESET PARA COR DO TEXTO */
select option {
    background-color: #0F0F11 !important;
    color: #FAFAFA !important;
}

select:focus option:checked {
    background-color: var(--color-primary) !important;
    color: white !important;
}

/* ANIMAÇÃO DE FLUTUAÇÃO DE COMPONENTES IA (OPCIONAL) */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0px); }
}

.float-animation {
    animation: float 4s ease-in-out infinite;
}

/* COMPATIBILIDADE COM O TEMA ESCURO DO FORMULÁRIO */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: 1px solid var(--color-primary);
    -webkit-text-fill-color: #FAFAFA;
    -webkit-box-shadow: 0 0 0px 1000px #0F0F11 inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* EFEITO DE GLOW AMBIENTAL SUAVE E EM MOVIMENTO (DETALHES EM LARANJA) */
@keyframes float-glow-1 {
    0% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(40px, -60px) scale(1.15);
    }
    66% {
        transform: translate(-30px, 30px) scale(0.9);
    }
    100% {
        transform: translate(0, 0) scale(1);
    }
}

@keyframes float-glow-2 {
    0% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-50px, 50px) scale(1.2);
    }
    100% {
        transform: translate(0, 0) scale(1);
    }
}

.ambient-glow-orange-1 {
    animation: float-glow-1 25s ease-in-out infinite;
    will-change: transform;
}

.ambient-glow-orange-2 {
    animation: float-glow-2 30s ease-in-out infinite;
    will-change: transform;
}

/* Logos premium blend */
.premium-logos-blend {
    filter: grayscale(0.8) brightness(1.1);
    opacity: 0.6;
    transition: opacity 0.5s ease, filter 0.5s ease;
}
.premium-logos-blend:hover {
    opacity: 1;
    filter: grayscale(0) brightness(1);
}