/* ========================================
   NEXUS - Batalha de Bots
   Atlas Seguros - Summarization Challenge
   ======================================== */

/* Variáveis CSS - Cores e Tipografia Nexus */
:root {
    /* Variáveis de Altura */
    --header-height: 60px; /* Compacto com alinhamento à esquerda */
    --footer-height: 50px;

    --primary-color: #1B365D;
    --secondary-color: #f7c500;
    --text-color: #1B365D;
    --light-bg: #F8F9FA;
    --gradient-primary: linear-gradient(135deg, #1B365D 0%, #0A1F3D 100%);
    --gradient-secondary: linear-gradient(135deg, #f7c500 0%, #f7c500 100%);
    --gradient-light: linear-gradient(135deg, #FFFFFF 0%, #F8F9FA 100%);
    --font-size-hero: 4rem;
    --font-size-large: 3rem;
    --font-size-normal: 1.2rem;
    --font-primary: Arial, sans-serif;
    --font-secondary: Arial, sans-serif;
    
    /* Espaçamentos */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    
    /* Bordas */
    --border-radius-sm: 8px;
    --border-radius-md: 10px;
    --border-radius-lg: 15px;
    --border-radius-xl: 2rem;
    
    /* Sombras */
    --shadow-sm: 0 2px 10px rgba(0,0,0,0.1);
    --shadow-md: 0 10px 30px rgba(0,0,0,0.1);
    --shadow-lg: 0 15px 40px rgba(0,0,0,0.15);
    
    /* Transições */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* Reset e Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-secondary);
}

body {
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--light-bg);
    font-family: var(--font-secondary);
    letter-spacing: 0.02em;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Tipografia */
h1, h2, h3, h4, h5, h6,
.logo span,
.brand-name {
    font-family: var(--font-primary);
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

/* Utilitários */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.mb-5 { margin-bottom: var(--spacing-xl); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
.mt-5 { margin-top: var(--spacing-xl); }

.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-xs); }
.p-2 { padding: var(--spacing-sm); }
.p-3 { padding: var(--spacing-md); }
.p-4 { padding: var(--spacing-lg); }
.p-5 { padding: var(--spacing-xl); }

/* Animações */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

/* Classes de animação */
.fade-in {
    animation: fadeIn 0.5s ease-out;
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}

/* Estados de hover e focus */
.hover-lift {
    transition: transform var(--transition-normal);
}

.hover-lift:hover {
    transform: translateY(-2px);
}

/* Responsividade base */
@media (max-width: 1200px) {
    .container {
        max-width: 100%;
        padding: 0 var(--spacing-lg);
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-sm);
    }
}