/* ==========================================================================
   VARIÁVEIS DO DESIGN SYSTEM (PADRÃO TEMA ESCURO CYBER-AGRO)
   ========================================================================== */
:root {
    --preto: #060913;
    --azul-metalico: #0E1626;
    --azul-profundo: #16223F;
    --azul-celeste: #00A3E0;
    --verde-tech: #00E676;
    --amarelo-neon: #FFEA00;
    --ouro-premium: #C5A059;
    --branco: #FFFFFF;
    --cinza-texto: #B0BCD0;

    --font-stack: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --curvatura-componente: 16px;
    --tempo-animacao: 0.25s ease-in-out;
}

/* Inversão dinâmica para Modo Claro */
body.modo-claro-ativo {
    --preto: #F0F4F8;
    --azul-metalico: #FFFFFF;
    --azul-profundo: #E1E8F0;
    --branco: #0A0F1D;
    --cinza-texto: #334155;
}

/* ==========================================================================
   RESETS E CONFIGURAÇÕES DE RESPONSIVIDADE BASE
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Garante que paddings não estourem a largura dos elementos */
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Tamanho base para cálculo de REM */
}

body {
    font-family: var(--font-stack);
    background-color: var(--preto);
    color: var(--branco);
    line-height: 1.75;
    transition: background-color var(--tempo-animacao);
    overflow-x: hidden; /* Impede barra de rolagem horizontal indesejada em celulares */
}

img {
    max-width: 100%; /* Impede a imagem de ficar maior que a tela do celular */
    height: auto;
    display: block;
}

strong {
    color: var(--verde-tech);
    font-weight: 600;
}

/* ==========================================================================
   HEADER FLEXÍVEL
   ========================================================================== */
.header-principal {
    background-color: rgba(6, 9, 19, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: sticky;
    top: 0;
    z-index: 999;
}

.container-nav {
    max-width: 1440px;
    margin: 0 auto;
    padding: 1.2rem clamp(1rem, 4vw, 2.5rem); /* Padding dinâmico conforme tela diminui */
    display: flex;
    flex-wrap: wrap; /* Permite que o menu quebre linha em telas micro-celulares */
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.logo-tech {
    font-size: 1.6rem;
    font-weight: 800;
}

.logo-tech span {
    color: var(--azul-celeste);
}

.links-navegacao {
    display: flex;
    gap: 1.5rem;
}

.links-navegacao a {
    color: var(--cinza-texto);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color var(--tempo-animacao);
}

.links-navegacao a:hover {
    color: var(--verde-tech);
}

/* ==========================================================================
   HERO BANNER FLUIDO (Ajustável por clamp e Viewport)
   ========================================================================== */
.hero-tecnologico {
    background: radial-gradient(circle at top right, rgba(0, 230, 118, 0.1), transparent 45%), var(--azul-metalico);
    padding: clamp(3rem, 10vh, 7rem) clamp(1rem, 4vw, 2.5rem);
    text-align: center;
}

/* Tipografia Inteligente com Clamp: tamanho calcula sozinho baseando-se no dispositivo */
.titulo-principal-hero {
    font-size: clamp(1.8rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.subtitulo-principal-hero {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--cinza-texto);
    max-width: 750px;
    margin: 0 auto 2.5rem auto;
}

.cta-banner {
    display: inline-block;
    background-color: var(--azul-celeste);
    color: #FFFFFF;
    text-decoration: none;
    padding: 0.9rem 2rem;
    border-radius: var(--curvatura-componente);
    font-weight: 600;
    transition: var(--tempo-animacao);
}

.cta-banner:hover {
    transform: translateY(-2px);
    background-color: var(--branco);
    color: var(--preto);
}

/* ==========================================================================
   MALHA GRID RESPONSIVA (Mágica de Adaptação de Dispositivos)
   ========================================================================== */
.grid-principal {
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2.5rem);
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 coluna vertical que consome 100% da largura */
    gap: 2.5rem;
}

/* Se a tela for maior que 1024px (Tablets em modo paisagem e Desktops) transiciona para 2 colunas */
@media (min-width: 1024px) {
    .grid-principal {
        grid-template-columns: 1fr 360px; /* Coluna do artigo maleável + Formulário fixado na lateral */
        align-items: start;
    }
    
    .coluna-conversao {
        position: sticky; /* Faz o formulário "flutuar" acompanhando a rolagem do usuário */
        top: 100px;
    }
}

/* ==========================================================================
   ELEMENTOS INTERNOS E INTERATIVOS
   ========================================================================== */
.conteudo-editorial p {
    font-size: 1.1rem;
    color: var(--cinza-texto);
    margin-bottom: 1.5rem;
}

.citacao-premium {
    background: linear-gradient(90deg, var(--azul-profundo), transparent);
    border-left: 4px solid var(--ouro-premium);
    padding: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
}

/* Container de Imagem Seguro contra quebras */
.imagem {
    width: 100%;
    margin: 2rem 0;
    border-radius: var(--curvatura-componente);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.imagem img {
    width: 100%;
    object-fit: cover;
}

/* Accordion Component */
.caixa-dobravel {
    background-color: var(--azul-metalico);
    border-radius: var(--curvatura-componente);
    margin-bottom: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.gatilho-accordion {
    width: 100%;
    background: none;
    border: none;
    padding: 1.2rem;
    text-align: left;
    color: var(--branco);
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}

.gatilho-accordion::after {
    content: '+';
    color: var(--azul-celeste);
}

.caixa-dobravel.aberto .gatilho-accordion::after {
    content: '−';
    color: var(--amarelo-neon);
}

.painel-accordion {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out;
}

.painel-accordion p {
    padding: 0 1.2rem 1.2rem 1.2rem;
    font-size: 0.95rem;
    color: var(--cinza-texto);
}

/* Formulário Card Glassmorphism */
.card-formulario-glass {
    background: rgba(14, 22, 38, 0.7);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 163, 224, 0.2);
    padding: 2rem 1.5rem;
    border-radius: var(--curvatura-componente);
}

.input-wrapper {
    margin-bottom: 1.2rem;
}

.input-wrapper label {
    display: block;
    font-size: 0.75rem;
    margin-bottom: 0.4rem;
    color: var(--cinza-texto);
    text-transform: uppercase;
}

.input-wrapper input, textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    background-color: var(--preto);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--curvatura-componente);
    color: var(--branco);
}

.btn-submeter-form, .btn-postar {
    width: 100%;
    background-color: var(--azul-celeste);
    color: var(--branco);
    border: none;
    padding: 1rem;
    font-weight: 700;
    border-radius: var(--curvatura-componente);
    cursor: pointer;
    transition: var(--tempo-animacao);
}

.btn-submeter-form:hover {
    background-color: var(--verde-tech);
    color: #000000;
}

/* ==========================================================================
   RODAPÉ E ACCESSIBILIDADE WIDGET
   ========================================================================== */
.rodape-futurista {
    background-color: #03050a;
    padding: 2rem 1rem;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.widget-acessibilidade {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.botao-flutuante-principal {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--azul-celeste);
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.menu-interno-botoes {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background-color: var(--azul-profundo);
    padding: 0.6rem;
    border-radius: var(--curvatura-componente);
}

.menu-interno-botoes.oculto {
    display: none;
}

.menu-interno-botoes button {
    background-color: var(--azul-metalico);
    color: var(--branco);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    text-align: left;
}