/* ==========================================
   BLOCO 1: DEFINIÇÕES DE VARIÁVEIS CSS
   Responsabilidade: Sistema de variáveis CSS para consistência
   ========================================== */

/* Variáveis CSS personalizadas */
:root {
    /* Sistema de cores baseado em azul */
    --primary-blue: #191970;    /* Azul primário escuro */
    --secondary-blue: #00B4D8;  /* Azul secundário claro */
    --secondary-blue-dark: #0096c7; /* Azul secundário escuro */
    
    /* Cores básicas */
    --white: #ffffff;           /* Branco */
    --text-light: rgba(255, 255, 255, 0.9); /* Texto branco transparente */
    
    /* Sistema de sombras para profundidade */
    --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.1);   /* Sombra leve */
    --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.15); /* Sombra média */
    
    /* Sistema de transições */
    --transition-fast: 0.2s ease;   /* Transição rápida */
    --transition-normal: 0.3s ease; /* Transição normal */
    
    /* Dimensões do header */
    --header-height: 90px;      /* Altura do header */
    --header-height-mobile: 80px; /* Altura do header mobile */
    
    /* Formas consistentes */
    --border-radius: 8px;       /* Bordas arredondadas */
}

/* ==========================================
   BLOCO 2: ESTILOS PRINCIPAIS DO HEADER
   Responsabilidade: Layout e posicionamento fixo
   ========================================== */

/* Header principal com gradiente e posicionamento fixo */
.main-header {
    background: linear-gradient(to right, #87CEFA, #072A66); /* Gradiente azul claro para escuro */
    color: var(--white); /* Texto branco */
    padding: 0; /* Sem padding interno */
    position: fixed; /* Fixo no topo da página */
    width: 100%; /* Largura total */
    top: 0; /* Posicionado no topo */
    z-index: 1000; /* Acima de todos os outros elementos */
    box-shadow: var(--shadow-medium); /* Sombra para profundidade */
    height: var(--header-height); /* Altura variável */
    display: flex; /* Layout flexbox */
    align-items: center; /* Centralização vertical */
    backdrop-filter: blur(10px); /* Efeito de desfoque no fundo */
    transition: all var(--transition-normal); /* Transição suave */
}

/* ==========================================
   BLOCO 3: ESTADO DO HEADER QUANDO SCROLLED
   Responsabilidade: Animações ao fazer scroll
   ========================================== */

/* Header quando usuário fez scroll */
.main-header.scrolled {
    background: linear-gradient(to right, #87CEFA, #072A66); /* Mesmo gradiente */
    height: calc(var(--header-height) - 10px); /* Altura reduzida */
    backdrop-filter: blur(15px); /* Desfoque mais intenso */
}

/* ==========================================
   BLOCO 4: CONTAINER DO HEADER
   Responsabilidade: Layout interno do header
   ========================================== */

/* Container interno do header */
.main-header .container {
    display: flex; /* Layout flexbox */
    justify-content: space-between; /* Distribuição space-between */
    align-items: center; /* Centralização vertical */
    height: 100%; /* Altura total */
    width: 100%; /* Largura total */
    max-width: 1400px; /* Largura máxima */
    margin: 0 auto; /* Centralização horizontal */
    padding: 0 clamp(15px, 3vw, 30px); /* Padding responsivo */
}

/* ==========================================
   BLOCO 5: ESTILOS DO LOGO
   Responsabilidade: Branding e identidade visual
   ========================================== */

/* Container do logo */
.logo {
    display: flex; /* Layout flexbox */
    align-items: center; /* Centralização vertical */
    
}

/* ==========================================
   BLOCO 6: IMAGEM DO LOGO
   Responsabilidade: Elemento visual do logo
   ========================================== */

/* Imagem do logo */
.logo img {
    height: clamp(110px, 12vw, 130px); /* Altura responsiva */
    width: auto; /* Largura automática */
    max-height: 130px; /* Altura máxima */
    object-fit: contain; /* Manter proporções */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); /* Sombra no logo */
    transition: all var(--transition-normal); /* Transições suaves */
}

/* Imagem do logo no estado scrolled */
.main-header.scrolled .logo img {
    height: clamp(110px, 12vw, 130px); /* Manter altura */
    filter: none; /* Remover sombra */
}

/* ==========================================
   BLOCO 7: NAVEGAÇÃO PRINCIPAL
   Responsabilidade: Menu de navegação principal
   ========================================== */

/* Lista de navegação principal */
.main-nav ul {
    display: flex; /* Layout flexbox */
    gap: clamp(20px, 3vw, 40px); /* Gap responsivo entre itens */
    list-style: none; /* Sem marcadores */
    margin: 0; /* Sem margem */
    padding: 0; /* Sem padding */
    align-items: center; /* Centralização vertical */
}

/* ==========================================
   BLOCO 8: ITENS DE NAVEGAÇÃO
   Responsabilidade: Container para links individuais
   ========================================== */

/* Itens da navegação */
.main-nav li {
    position: relative; /* Para posicionamento absoluto de pseudo-elementos */
}

/* ==========================================
   BLOCO 9: LINKS DE NAVEGAÇÃO
   Responsabilidade: Links do menu principal
   ========================================== */

/* Links da navegação */
.main-nav a {
    color: white; /* Texto branco */
    font-weight: 500; /* Peso semi-negrito */
    font-size: clamp(14px, 1.5vw, 16px); /* Tamanho responsivo */
    padding: 12px 16px; /* Espaçamento interno */
    position: relative; /* Para posicionamento de pseudo-elementos */
    transition: all var(--transition-normal); /* Transições suaves */
    text-decoration: none; /* Sem sublinhado */
    border-radius: var(--border-radius); /* Bordas arredondadas */
    display: flex; /* Layout flexbox */
    align-items: center; /* Centralização vertical */
    gap: 8px; /* Espaçamento entre elementos */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Sombra no texto */
}

/* ==========================================
   BLOCO 10: LINHA INFERIOR DOS LINKS
   Responsabilidade: Efeito visual de hover/ativo
   ========================================== */

/* Linha inferior decorativa nos links */
.main-nav a::before {
    content: ''; /* Conteúdo vazio necessário */
    position: absolute; /* Posicionamento absoluto */
    bottom: 0; /* Posição no bottom */
    left: 50%; /* Centralização horizontal */
    transform: translateX(-50%); /* Centralização com transform */
    width: 0; /* Largura inicial zero */
    height: 3px; /* Altura da linha */
    background: linear-gradient(90deg, var(--secondary-blue), #00d4ff); /* Gradiente da linha */
    border-radius: 2px; /* Bordas arredondadas */
    transition: width var(--transition-normal); /* Transição de largura */
}

/* ==========================================
   BLOCO 11: EFEITOS DE HOVER E ATIVO
   Responsabilidade: Estados visuais dos links
   ========================================== */

/* Estados hover e ativo dos links */
.main-nav a:hover,
.main-nav a.active {
    color: var(--white); /* Texto branco */
    background: rgba(255, 255, 255, 0.1); /* Fundo transparente */
    transform: translateY(-2px); /* Elevação sutil */
}

/* Linha inferior no hover/ativo */
.main-nav a:hover::before,
.main-nav a.active::before {
    width: 80%; /* Largura da linha no estado ativo */
}

/* ==========================================
   BLOCO 12: AÇÕES DO USUÁRIO
   Responsabilidade: Botões de login/conta
   ========================================== */

/* Container de ações do usuário */
.user-actions {
    display: flex; /* Layout flexbox */
    gap: 15px; /* Espaçamento entre elementos */
    align-items: center; /* Centralização vertical */
}

/* ==========================================
   BLOCO 13: SISTEMA DE DROPDOWN
   Responsabilidade: Menus suspensos
   ========================================== */

/* Container do dropdown */
.dropdown {
    position: relative; /* Para posicionamento absoluto do menu */
}

/* ==========================================
   BLOCO 14: BOTÃO DO DROPDOWN
   Responsabilidade: Trigger do menu suspenso
   ========================================== */

/* Botão do dropdown */
.dropdown-btn {
    background: none; /* Sem fundo */
    border: none; /* Sem borda */
    cursor: pointer; /* Cursor pointer */
    color: white; /* Texto branco */
    font-weight: 500; /* Peso semi-negrito */
    font-size: clamp(14px, 1.5vw, 16px); /* Tamanho responsivo */
    padding: 12px 16px; /* Espaçamento interno */
    transition: all var(--transition-normal); /* Transições suaves */
    border-radius: var(--border-radius); /* Bordas arredondadas */
    display: flex; /* Layout flexbox */
    align-items: center; /* Centralização vertical */
    gap: 8px; /* Espaçamento entre elementos */
    white-space: nowrap; /* Evitar quebra de linha */
}

/* ==========================================
   BLOCO 15: ESTADOS DO DROPDOWN
   Responsabilidade: Hover e ativo do botão
   ========================================== */

/* Hover no botão do dropdown */
.dropdown-btn:hover {
    background: rgba(255, 255, 255, 0.1); /* Fundo transparente */
    transform: translateY(-2px); /* Elevação sutil */
}

/* Estado ativo do dropdown */
.dropdown-btn.active {
    background: rgba(255, 255, 255, 0.1); /* Fundo transparente */
}

/* ==========================================
   BLOCO 16: ÍCONE DO DROPDOWN
   Responsabilidade: Seta indicativa do menu
   ========================================== */

/* Ícone de seta do dropdown */
.dropdown-btn i.fa-angle-down {
    transition: transform var(--transition-normal); /* Transição de rotação */
}

/* Rotação da seta no estado ativo */
.dropdown-btn.active i.fa-angle-down {
    transform: rotate(180deg); /* Rotação 180 graus */
}

/* ==========================================
   BLOCO 17: MENU DO DROPDOWN
   Responsabilidade: Lista suspensa do dropdown
   ========================================== */

/* Menu do dropdown */
.dropdown-menu {
    position: absolute; /* Posicionamento absoluto */
    top: 100%; /* Posicionado abaixo do botão */
    right: 0; /* Alinhado à direita */
    background: white; /* Fundo branco */
    border-radius: var(--border-radius); /* Bordas arredondadas */
    box-shadow: var(--shadow-medium); /* Sombra para profundidade */
    list-style: none; /* Sem marcadores */
    padding: 10px 15px; /* Espaçamento interno */
    margin-top: 10px; /* Espaçamento acima */
    min-width: 200px; /* Largura mínima */
    opacity: 0; /* Transparente por padrão */
    visibility: hidden; /* Invisível por padrão */
    transform: translateY(-10px); /* Deslocamento inicial */
    transition: all var(--transition-normal); /* Transições suaves */
    z-index: 1001; /* Acima do header */
    overflow: hidden; /* Ocultar conteúdo que extrapola */
}

/* ==========================================
   BLOCO 18: MENU ATIVO DO DROPDOWN
   Responsabilidade: Estado visível do menu
   ========================================== */

/* Menu do dropdown no estado ativo */
.dropdown-menu.active {
    opacity: 1; /* Opacidade total */
    visibility: visible; /* Visível */
    transform: translateY(0); /* Posição normal */
}

/* ==========================================
   BLOCO 19: LINKS DO DROPDOWN
   Responsabilidade: Itens individuais do menu
   ========================================== */

/* Links do menu do dropdown */
.dropdown-menu li a {
    display: flex; /* Layout flexbox */
    align-items: center; /* Centralização vertical */
    padding: 12px 20px; /* Espaçamento interno */
    color: black; /* Texto preto */
    text-decoration: none; /* Sem sublinhado */
    transition: all var(--transition-fast); /* Transição rápida */
    font-size: 14px; /* Tamanho da fonte */
    border-radius: 0; /* Sem bordas arredondadas */
    background: none; /* Sem fundo */
    transform: none; /* Sem transformação */
    gap: 10px; /* Espaçamento entre elementos */
}

/* ==========================================
   BLOCO 20: HOVER DOS LINKS DO DROPDOWN
   Responsabilidade: Efeito hover nos itens do menu
   ========================================== */

/* Hover nos links do dropdown */
.dropdown-menu li a:hover {
    background: #f0f0f0; /* Fundo cinza claro */
    transform: translateX(5px); /* Deslocamento horizontal */
    color: var(--primary-color); /* Cor da marca */
}

/* ==========================================
   BLOCO 21: ÍCONES DOS LINKS DO DROPDOWN
   Responsabilidade: Ícones nos itens do menu
   ========================================== */

/* Ícones nos links do dropdown */
.dropdown-menu li a i {
    width: 16px; /* Largura fixa */
    text-align: center; /* Centralização do texto */
}

/* ==========================================
   BLOCO 22: PRIMEIRO E ÚLTIMO ITEM
   Responsabilidade: Bordas arredondadas nos extremos
   ========================================== */

/* Primeiro item do dropdown */
.dropdown-menu li:first-child a {
    border-top-left-radius: var(--border-radius); /* Borda superior esquerda arredondada */
    border-top-right-radius: var(--border-radius); /* Borda superior direita arredondada */
}

/* Último item do dropdown */
.dropdown-menu li:last-child a {
    border-bottom-left-radius: var(--border-radius); /* Borda inferior esquerda arredondada */
    border-bottom-right-radius: var(--border-radius); /* Borda inferior direita arredondada */
}

/* ==========================================
   BLOCO 23: BOTÃO DE LOGIN
   Responsabilidade: Ação principal de autenticação
   ========================================== */

/* Botão de login */
.login-btn {
    background: linear-gradient(135deg, var(--secondary-blue), var(--secondary-blue-dark)); /* Gradiente do botão */
    color: var(--white); /* Texto branco */
    padding: clamp(8px, 1.5vw, 12px) clamp(16px, 3vw, 24px); /* Padding responsivo */
    border-radius: var(--border-radius); /* Bordas arredondadas */
    font-weight: 600; /* Peso bold */
    font-size: clamp(13px, 1.5vw, 15px); /* Tamanho responsivo */
    transition: all var(--transition-normal); /* Transições suaves */
    white-space: nowrap; /* Evitar quebra de linha */
    text-decoration: none; /* Sem sublinhado */
    border: 2px solid transparent; /* Borda transparente */
    position: relative; /* Para posicionamento do pseudo-elemento */
    overflow: hidden; /* Ocultar overflow */
    display: flex; /* Layout flexbox */
    align-items: center; /* Centralização vertical */
    gap: 8px; /* Espaçamento entre elementos */
}

/* ==========================================
   BLOCO 24: EFEITO BRILHANTE DO BOTÃO
   Responsabilidade: Efeito visual especial no login
   ========================================== */

/* Pseudo-elemento para efeito brilhante */
.login-btn::before {
    content: ''; /* Conteúdo vazio */
    position: absolute; /* Posicionamento absoluto */
    top: 0; /* Posição no topo */
    left: -100%; /* Inicialmente fora da tela */
    width: 100%; /* Largura total */
    height: 100%; /* Altura total */
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); /* Efeito brilhante */
    transition: left 0.5s; /* Transição da posição */
}

/* ==========================================
   BLOCO 25: HOVER DO BOTÃO DE LOGIN
   Responsabilidade: Efeitos visuais no hover
   ========================================== */

/* Hover no botão de login */
.login-btn:hover {
    background: linear-gradient(135deg, var(--secondary-blue-dark), #007bb5); /* Gradiente mais escuro */
    transform: translateY(-3px); /* Elevação maior */
    box-shadow: 0 8px 25px rgba(0, 180, 216, 0.3); /* Sombra colorida */
    border-color: rgba(255, 255, 255, 0.3); /* Borda sutil */
}

/* Estado ativo do botão */
.login-btn:active {
    transform: translateY(-1px); /* Elevação menor */
}

/* ==========================================
   BLOCO 26: TOGGLE DO MENU MOBILE
   Responsabilidade: Botão hamburger para mobile
   ========================================== */

/* Botão toggle do menu mobile */
.mobile-menu-toggle {
    display: none; /* Oculto por padrão (desktop) */
    background: none; /* Sem fundo */
    border: none; /* Sem borda */
    color: var(--white); /* Texto branco */
    font-size: clamp(20px, 4vw, 28px); /* Tamanho responsivo */
    padding: 8px; /* Espaçamento interno */
    cursor: pointer; /* Cursor pointer */
    border-radius: var(--border-radius); /* Bordas arredondadas */
    transition: all var(--transition-normal); /* Transições suaves */
    position: relative; /* Para posicionamento */
}

/* ==========================================
   BLOCO 27: HOVER DO TOGGLE MOBILE
   Responsabilidade: Efeito visual do botão hamburger
   ========================================== */

/* Hover no toggle mobile */
.mobile-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.1); /* Fundo transparente */
    transform: scale(1.1); /* Escala maior */
}

/* Estado ativo do toggle */
.mobile-menu-toggle.active {
    transform: rotate(90deg); /* Rotação quando ativo */
}

/* ==========================================
   BLOCO 28: NAVEGAÇÃO MOBILE
   Responsabilidade: Menu responsivo para mobile
   ========================================== */

/* Navegação mobile */
.mobile-nav {
    position: fixed; /* Posicionamento fixo */
    top: var(--header-height); /* Posicionado abaixo do header */
    left: 0; /* Posição à esquerda */
    width: 100%; /* Largura total */
    height: 0; /* Altura inicial zero */
    background: linear-gradient(180deg, var(--primary-blue) 0%, #1a1a7a 100%); /* Gradiente do fundo */
    overflow: hidden; /* Ocultar overflow */
    transition: all var(--transition-normal); /* Transições suaves */
    z-index: 999; /* Acima do conteúdo */
    backdrop-filter: blur(10px); /* Efeito de desfoque */
}

/* ==========================================
   BLOCO 29: NAVEGAÇÃO MOBILE ATIVA
   Responsabilidade: Estado expandido do menu mobile
   ========================================== */

/* Menu mobile no estado ativo */
.mobile-nav.active {
    height: auto; /* Altura automática */
    max-height: calc(100vh - var(--header-height)); /* Altura máxima */
    box-shadow: var(--shadow-medium); /* Sombra para profundidade */
}

/* ==========================================
   BLOCO 30: LISTA DA NAVEGAÇÃO MOBILE
   Responsabilidade: Itens do menu mobile
   ========================================== */

/* Lista da navegação mobile */
.mobile-nav ul {
    padding: 20px; /* Espaçamento interno */
    list-style: none; /* Sem marcadores */
    margin: 0; /* Sem margem */
    display: flex; /* Layout flexbox */
    flex-direction: column; /* Elementos em coluna */
    gap: 5px; /* Espaçamento entre itens */
}

/* ==========================================
   BLOCO 31: ITENS DA NAVEGAÇÃO MOBILE
   Responsabilidade: Animações dos itens mobile
   ========================================== */

/* Itens da navegação mobile */
.mobile-nav li {
    opacity: 0; /* Transparente por padrão */
    transform: translateX(-20px); /* Deslocamento inicial */
    transition: all var(--transition-normal); /* Transições suaves */
}

/* ==========================================
   BLOCO 32: ANIMAÇÃO DOS ITENS ATIVOS
   Responsabilidade: Sequência de animação dos itens
   ========================================== */

/* Itens no estado ativo com delays escalonados */
.mobile-nav.active li {
    opacity: 1; /* Visível */
    transform: translateX(0); /* Posição normal */
}

/* Delays escalonados para animação sequencial */
.mobile-nav.active li:nth-child(1) { transition-delay: 0.1s; }
.mobile-nav.active li:nth-child(2) { transition-delay: 0.2s; }
.mobile-nav.active li:nth-child(3) { transition-delay: 0.3s; }
.mobile-nav.active li:nth-child(4) { transition-delay: 0.4s; }
.mobile-nav.active li:nth-child(5) { transition-delay: 0.5s; }

/* ==========================================
   BLOCO 33: LINKS DA NAVEGAÇÃO MOBILE
   Responsabilidade: Itens individuais do menu mobile
   ========================================== */

/* Links da navegação mobile */
.mobile-nav a {
    color: white; /* Texto branco */
    font-size: 18px; /* Tamanho da fonte */
    font-weight: 500; /* Peso semi-negrito */
    display: flex; /* Layout flexbox */
    align-items: center; /* Centralização vertical */
    gap: 12px; /* Espaçamento entre elementos */
    padding: 15px 20px; /* Espaçamento interno */
    text-decoration: none; /* Sem sublinhado */
    border-radius: var(--border-radius); /* Bordas arredondadas */
    transition: all var(--transition-normal); /* Transições suaves */
    border-left: 3px solid transparent; /* Borda lateral transparente */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Sombra no texto */
}

/* ==========================================
   BLOCO 34: HOVER DOS LINKS MOBILE
   Responsabilidade: Efeitos visuais nos links mobile
   ========================================== */

/* Hover e ativo nos links mobile */
.mobile-nav a:hover,
.mobile-nav a.active {
    background: rgba(255, 255, 255, 0.1); /* Fundo transparente */
    color: var(--white); /* Texto branco */
    border-left-color: var(--secondary-blue); /* Cor da borda lateral */
    transform: translateX(10px); /* Deslocamento horizontal */
}

/* ==========================================
   BLOCO 35: ÍCONES DOS LINKS MOBILE
   Responsabilidade: Ícones nos itens mobile
   ========================================== */

/* Ícones nos links mobile */
.mobile-nav a i {
    width: 20px; /* Largura fixa */
    text-align: center; /* Centralização do texto */
    color: var(--secondary-blue); /* Cor do ícone */
}

/* ==========================================
   BLOCO 36: OVERLAY DO MENU MOBILE
   Responsabilidade: Fundo escurecido para mobile
   ========================================== */

/* Overlay para menu mobile */
.mobile-overlay {
    position: fixed; /* Posicionamento fixo */
    top: 0; /* Posição no topo */
    left: 0; /* Posição à esquerda */
    width: 100%; /* Largura total */
    height: 100%; /* Altura total */
    background: rgba(0, 0, 0, 0.5); /* Fundo semi-transparente */
    z-index: 998; /* Acima do conteúdo, abaixo do menu */
    opacity: 0; /* Transparente por padrão */
    visibility: hidden; /* Invisível por padrão */
    transition: all var(--transition-normal); /* Transições suaves */
}

/* ==========================================
   BLOCO 37: OVERLAY ATIVO
   Responsabilidade: Estado visível do overlay
   ========================================== */

/* Overlay no estado ativo */
.mobile-overlay.active {
    opacity: 1; /* Opacidade total */
    visibility: visible; /* Visível */
}

/* ==========================================
   BLOCO 38: DESIGN RESPONSIVO
   Responsabilidade: Adaptações para tablet e mobile
   ========================================== */

/* Media query para dispositivos móveis */
@media (max-width: 992px) {
    /* Ocultar dropdown na navegação desktop */
    .main-nav .dropdown {
        display: none;
    }

    /* Ocultar botão de login na navegação desktop */
    .main-nav .login-btn {
        display: none;
    }

    /* Ocultar navegação desktop */
    .main-nav {
        display: none;
    }

    /* Mostrar botão toggle mobile */
    .mobile-menu-toggle {
        display: block;
    }

    /* Ajustar posição da navegação mobile */
    .mobile-nav {
        top: var(--header-height-mobile);
    }
}

/* ==========================================
   BLOCO 39: ANIMAÇÕES CSS
   Responsabilidade: Animações personalizadas
   ========================================== */

/* Animação de deslizamento para baixo */
@keyframes slideDown {
    from {
        opacity: 0; /* Transparente */
        transform: translateY(-20px); /* Deslocamento para cima */
    }

    to {
        opacity: 1; /* Opacidade total */
        transform: translateY(0); /* Posição normal */
    }
}

/* ==========================================
   BLOCO 40: ANIMAÇÃO DO HEADER
   Responsabilidade: Animação de entrada do header
   ========================================== */

/* Aplicação da animação ao header */
.main-header {
    animation: slideDown 0.5s ease-out;
}

/* ==========================================
   BLOCO 41: INDICADOR DE SCROLL
   Responsabilidade: Barra de progresso de scroll
   ========================================== */

/* Indicador de scroll */
.scroll-indicator {
    position: absolute; /* Posicionamento absoluto */
    bottom: 0; /* Posição no bottom */
    left: 0; /* Posição à esquerda */
    height: 2px; /* Altura da barra */
    background: linear-gradient(90deg, var(--secondary-blue), #00d4ff); /* Gradiente da barra */
    transition: width var(--transition-normal); /* Transição de largura */
}

/* ==========================================
   BLOCO 42: ACESSIBILIDADE - REDUÇÃO DE MOVIMENTO
   Responsabilidade: Suporte para usuários sensíveis a movimento
   ========================================== */

/* Media query para redução de movimento */
@media (prefers-reduced-motion: reduce) {
    /* Desabilitar animações para usuários que preferem reduzir movimento */
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================
   BLOCO 43: ESTADOS DE FOCO PARA ACESSIBILIDADE
   Responsabilidade: Indicadores visuais para navegação por teclado
   ========================================== */

/* Estados de foco para acessibilidade */
.main-nav a:focus,
.login-btn:focus,
.mobile-menu-toggle:focus {
    outline: 2px solid var(--secondary-blue); /* Outline azul */
    outline-offset: 2px; /* Offset do outline */
}

/* ==========================================
   BLOCO 44: MODO DE ALTO CONTRASTE
   Responsabilidade: Suporte para modo de alto contraste
   ========================================== */

/* Media query para alto contraste */
@media (prefers-contrast: high) {
    /* Header com fundo preto e borda branca */
    .main-header {
        background: #000000;
        border-bottom: 2px solid #ffffff;
    }

    /* Links e botões com borda branca */
    .main-nav a,
    .login-btn {
        border: 1px solid #ffffff;
    }
}