/* ============================================
   FONTES PERSONALIZADAS
   ============================================ */

   @font-face {
   font-family: 'Kallisto Medium';
   src: url('../fonts/Kallisto-Medium.woff') format('woff');
   font-style: normal;
   font-display: swap;
}

/* Fallback para caso a fonte não carregue */
@font-face {
   font-family: 'Kallisto Fallback';
   src: local('Verdana');
   font-style: normal;
   ascent-override: 95%;
   descent-override: 25%;
   line-gap-override: 0%;
   size-adjust: 100%;
}


/* ============================================
    VARIÁVEIS CSS - NOVA PALETA DE CORES
    ============================================ */

:root {
    /* ===== CORES PRIMÁRIAS (BASE DA SUA PALETA) ===== */
    --cor-vermelho-vivo: #C10000;     /* Vermelho principal - Taekwondo */
    --cor-vermelho-suave: #C8523D;    /* Vermelho terracota - Destaques */
    --cor-verde: #4CA582;             /* Verde natureza - Sucesso/Confirmação */
    --cor-azul: #3B6084;              /* Azul profissional - Informações */
    --cor-rosa: #ECACBD;              /* Rosa suave - Elementos delicados */
    --cor-azul-claro: #D0DEEA;        /* Azul claro - Fundos/Backgrounds */
   
    /* ===== CORES NEUTRAS ===== */
   --cor-branco: #FFFFFF;
   --cor-preto: #000000;
   
    /* ===== CORES SEMÂNTICAS (DERIVADAS DA PALETA) ===== */
    /* Primárias */
    --cor-primaria: var(--cor-vermelho-vivo);      /* Cor principal do site */
    --cor-secundaria: var(--cor-azul);             /* Cor secundária */
    --cor-terciaria: var(--cor-verde);             /* Cor terciária */
   
    /* ===== CORES DE FUNDO ===== */
    --cor-fundo-claro: var(--cor-branco);          /* Fundo geral claro */
    --cor-fundo-escuro: #1A1A1A;                   /* Fundo menu/rodapé (preto suavizado) */
    --cor-fundo-card: var(--cor-branco);           /* Fundo de cards/conteúdo */
    --cor-fundo-suave: var(--cor-azul-claro);      /* Fundo suave azulado */
    --cor-fundo-hover: #F5F5F5;                    /* Fundo hover */
    --cor-fundo-destaque: rgba(236, 172, 189, 0.1); /* Fundo com toque rosa */
   
    /* ===== CORES DE TEXTO ===== */
    --cor-texto-claro: var(--cor-branco);          /* Texto sobre fundo escuro */
    --cor-texto-escuro: #222222;                   /* Texto principal (preto suavizado) */
    --cor-texto-cinza: #555555;                    /* Texto secundário */
    --cor-texto-label: #666666;                    /* Texto labels/formulários */
   
    /* ===== CORES DE BORDA ===== */
    --cor-borda-clara: #E0E0E0;                    /* Bordas claras */
    --cor-borda-escura: #444444;                   /* Bordas escuras */
    --cor-borda-destaque: var(--cor-vermelho-vivo); /* Bordas de destaque */
    --cor-borda-suave: var(--cor-azul-claro);      /* Bordas suaves */
   
    /* ===== CORES DE ESTADO ===== */
    --cor-sucesso: var(--cor-verde);               /* Verde - sucesso/confirmação */
    --cor-sucesso-claro: rgba(76, 165, 130, 0.1);  /* Verde claro - fundo sucesso */
   
    --cor-aviso: #FF9800;                          /* Laranja - aviso (mantido para contraste) */
    --cor-aviso-claro: rgba(255, 152, 0, 0.1);     /* Laranja claro */
   
    --cor-erro: #D32F2F;                           /* Vermelho - erro (mais escuro para legibilidade) */
    --cor-erro-claro: rgba(211, 47, 47, 0.1);      /* Vermelho claro */
   
    --cor-info: var(--cor-azul);                   /* Azul - informação */
    --cor-info-claro: rgba(59, 96, 132, 0.1);      /* Azul claro */
    --cor-destaque: var(--cor-rosa);               /* Rosa - destaque especial */
    --cor-destaque-claro: rgba(236, 172, 189, 0.1); /* Rosa claro */
   
    /* ===== CORES DE BOTÕES ===== */
   --cor-botao-primario: var(--cor-vermelho-vivo);
   --cor-botao-primario-hover: #A80000;
   --cor-botao-secundario: var(--cor-azul);
   --cor-botao-secundario-hover: #2A4A6B;
   --cor-botao-terciario: var(--cor-verde);
   --cor-botao-terciario-hover: #3D8A6A;
   
    /* ===== CORES DE LINKS ===== */
   --cor-link: var(--cor-azul);
   --cor-link-hover: var(--cor-vermelho-vivo);
   --cor-link-visitado: #2A4A6B;
   
    /* ===== GRADIENTS COM A NOVA PALETA ===== */
   --gradiente-vermelho: linear-gradient(135deg, var(--cor-vermelho-vivo) 0%, var(--cor-vermelho-suave) 100%);
   --gradiente-azul: linear-gradient(135deg, var(--cor-azul) 0%, #2A4A6B 100%);
   --gradiente-verde: linear-gradient(135deg, var(--cor-verde) 0%, #3D8A6A 100%);
   --gradiente-suave: linear-gradient(to bottom, var(--cor-branco) 0%, var(--cor-azul-claro) 100%);
   --gradiente-menu: linear-gradient(180deg, #1A1A1A 0%, #2A2A2A 100%);
   --gradiente-destaque: linear-gradient(135deg, var(--cor-rosa) 0%, #F8D7E3 100%);
   
    /* ===== FONTES ===== */
   --fonte-titulo: 'Kallisto Medium', 'Kallisto Fallback', 'Verdana';
   --fonte-texto: 'Verdana', 'Geneva', 'Tahoma', sans-serif;
   --fonte-mono: 'Courier New', 'Monaco', monospace;
   
    /* ===== TAMANHOS DE FONTE - ESCALA MODULAR ===== */
    --fonte-xxxl: 4rem;      /* 64px - Títulos hero */
    --fonte-xxl: 3.5rem;     /* 56px - Título principal grande */
    --fonte-xl: 3rem;        /* 48px - Título principal */
    --fonte-lg: 2rem;        /* 32px - Títulos seções */
    --fonte-md: 1.5rem;      /* 24px - Títulos médios */
    --fonte-sm: 1.2rem;      /* 19px - Texto destacado */
    --fonte-xs: 1rem;        /* 16px - Texto normal (base) */
    --fonte-xxs: 0.9rem;     /* 14px - Texto pequeno */
    --fonte-xxxs: 0.8rem;    /* 13px - Texto muito pequeno */
   
    /* ===== ESPAÇAMENTOS - ESCALA 8px ===== */
    --espaco-xxl: 64px;      /* 64px */
    --espaco-xl: 40px;       /* 40px */
    --espaco-lg: 30px;       /* 30px */
    --espaco-md: 20px;       /* 20px */
    --espaco-sm: 15px;       /* 15px */
    --espaco-xs: 10px;       /* 10px */
    --espaco-xxs: 5px;       /* 5px */
   
    /* ===== BORDAS E RAIO ===== */
    --borda-raio-sm: 3px;    /* Bordas pequenas */
    --borda-raio: 5px;       /* Raio padrão */
    --borda-raio-lg: 10px;   /* Raio grande */
    --borda-raio-xl: 15px;   /* Raio extra grande */
    --borda-raio-xxl: 20px;  /* Raio circular */
   
    --borda-fina: 1px;       /* Borda fina */
    --borda-media: 2px;      /* Borda média */
    --borda-grossa: 3px;     /* Borda grossa */
    --borda-destaque: 4px;   /* Borda de destaque */
   
    /* ===== SOMBRAS ===== */
   --sombra-suave: 0 2px 8px rgba(0, 0, 0, 0.08);
   --sombra-media: 0 5px 15px rgba(193, 0, 0, 0.1); /* Tom vermelho sutil */
   --sombra-forte: 0 8px 25px rgba(0, 0, 0, 0.15);
   --sombra-elevada: 0 12px 35px rgba(0, 0, 0, 0.2);
   --sombra-interna: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    --sombra-destaque: 0 4px 12px rgba(193, 0, 0, 0.2); /* Sombra vermelha para destaques */
   
    /* ===== TRANSIÇÕES E ANIMAÇÕES ===== */
   --transicao-rapida: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   --transicao-media: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   --transicao-lenta: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   
   --duracao-curta: 0.2s;
   --duracao-media: 0.3s;
   --duracao-longa: 0.5s;
   
   /* ===== Z-INDEX - CAMADAS ===== */
   --z-fundo: -1;
   --z-base: 0;
   --z-conteudo: 1;
   --z-elevado: 10;
   --z-menu: 100;
   --z-modal: 1000;
   --z-toast: 2000;
   
    /* ===== LAYOUT E GRID ===== */
   --largura-maxima: 1400px;
   --largura-conteudo: 1200px;
   --largura-formulario: 600px;
   
   --altura-header: 80px;
   --altura-footer: 60px;
   
   /* ===== OPACIDADES ===== */
   --opacidade-baixa: 0.1;
   --opacidade-media: 0.3;
   --opacidade-alta: 0.7;
   --opacidade-total: 1;
   
    /* ===== FILTROS ===== */
   --blur-suave: blur(5px);
   --blur-medio: blur(10px);
   --blur-forte: blur(20px);
}

/* ============================================
   DARK THEME VARIABLES (usando a mesma paleta)
   ============================================ */
@media (prefers-color-scheme: dark) {
   :root {
        /* Cores de texto */
       --cor-texto-claro: #F5F5F5;
       --cor-texto-escuro: #E0E0E0;
       --cor-texto-cinza: #B0B0B0;
       --cor-texto-label: #999999;
       
        /* Cores de fundo */
       --cor-fundo-claro: #121212;
       --cor-fundo-escuro: #000000;
       --cor-fundo-card: #1E1E1E;
       --cor-fundo-suave: #1A2A3A; /* Azul escuro suavizado */
       --cor-fundo-hover: #2A2A2A;
       --cor-fundo-destaque: rgba(236, 172, 189, 0.15);
       
        /* Cores de borda */
       --cor-borda-clara: #444444;
       --cor-borda-escura: #666666;
       
        /* Gradientes ajustados */
       --gradiente-suave: linear-gradient(to bottom, #121212 0%, #1A2A3A 100%);
       --gradiente-menu: linear-gradient(180deg, #000000 0%, #1A1A1A 100%);
       
        /* Sombras ajustadas para dark mode */
       --sombra-suave: 0 2px 8px rgba(0, 0, 0, 0.3);
       --sombra-media: 0 5px 15px rgba(193, 0, 0, 0.2);
       --sombra-forte: 0 8px 25px rgba(0, 0, 0, 0.5);
       --sombra-destaque: 0 4px 12px rgba(193, 0, 0, 0.3);
   }
}

/* ============================================
   RESET E ESTILOS BASE
   ============================================ */

*, *::before, *::after {
   box-sizing: border-box;
}

html {
    font-size: 13px; /* Base para rem */
   -webkit-text-size-adjust: 100%;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

body {
   margin: 0;
   padding: 0;
   font-family: var(--fonte-texto);
   font-size: var(--fonte-xs);
   line-height: 1.6;
   color: var(--cor-texto-escuro);
   background-color: var(--cor-fundo-claro);
   overflow-x: hidden;
}

/* ============================================
   TIPOGRAFIA BASE
   ============================================ */

h1, h2, h3, h4, h5, h6 {
   font-family: var(--fonte-titulo);
   font-weight: 500;
   line-height: 1.2;
   margin-top: 0;
   margin-bottom: var(--espaco-sm);
   color: var(--cor-texto-escuro);
}

h1 { 
   font-size: var(--fonte-xl);
   color: var(--cor-vermelho-vivo);
}

h2 { 
   font-size: var(--fonte-lg);
   color: var(--cor-azul);
}

h3 { 
   font-size: var(--fonte-md);
   color: var(--cor-verde);
}

h4 { 
   font-size: var(--fonte-sm);
   color: var(--cor-vermelho-suave);
}

h5 { 
   font-size: var(--fonte-xs);
   color: var(--cor-texto-cinza);
}

h6 { 
   font-size: var(--fonte-xxs);
   color: var(--cor-texto-label);
   text-transform: uppercase;
   letter-spacing: 1px;
}

p {
   margin-top: 0;
   margin-bottom: var(--espaco-md);
}

a {
   color: var(--cor-link);
   text-decoration: none;
   transition: all var(--transicao-rapida);
}

a:hover {
   color: var(--cor-link-hover);
   text-decoration: underline;
}

strong, b {
   font-weight: 600;
   color: var(--cor-vermelho-suave);
}

em, i {
   font-style: italic;
}

small {
   font-size: var(--fonte-xxs);
   color: var(--cor-texto-label);
}

blockquote {
   border-left: 4px solid var(--cor-rosa);
   padding-left: var(--espaco-md);
   margin: var(--espaco-lg) 0;
   font-style: italic;
   color: var(--cor-texto-cinza);
   background-color: var(--cor-fundo-destaque);
   padding: var(--espaco-md);
   border-radius: var(--borda-raio);
}

/* ============================================
   BOTÕES BASE (para uso geral)
   ============================================ */

.btn {
   display: inline-block;
   padding: var(--espaco-sm) var(--espaco-lg);
   font-family: var(--fonte-titulo);
   font-size: var(--fonte-xs);
   font-weight: 500;
   line-height: 1.5;
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   white-space: nowrap;
   vertical-align: middle;
   cursor: pointer;
   user-select: none;
   border: var(--borda-media) solid transparent;
   border-radius: var(--borda-raio);
   transition: all var(--transicao-media);
}

.btn-primary {
   color: var(--cor-texto-claro);
   background-color: var(--cor-botao-primario);
   border-color: var(--cor-botao-primario);
}

.btn-primary:hover {
   color: var(--cor-texto-claro);
   background-color: var(--cor-botao-primario-hover);
   border-color: var(--cor-botao-primario-hover);
   transform: translateY(-2px);
   box-shadow: var(--sombra-destaque);
}

.btn-secondary {
   color: var(--cor-texto-claro);
   background-color: var(--cor-botao-secundario);
   border-color: var(--cor-botao-secundario);
}

.btn-secondary:hover {
   color: var(--cor-texto-claro);
   background-color: var(--cor-botao-secundario-hover);
   border-color: var(--cor-botao-secundario-hover);
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(59, 96, 132, 0.2);
}

.btn-tertiary {
   color: var(--cor-texto-claro);
   background-color: var(--cor-botao-terciario);
   border-color: var(--cor-botao-terciario);
}

.btn-tertiary:hover {
   color: var(--cor-texto-claro);
   background-color: var(--cor-botao-terciario-hover);
   border-color: var(--cor-botao-terciario-hover);
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(76, 165, 130, 0.2);
}

.btn-outline {
   color: var(--cor-primaria);
   background-color: transparent;
   border-color: var(--cor-primaria);
}

.btn-outline:hover {
   color: var(--cor-texto-claro);
   background-color: var(--cor-primaria);
   transform: translateY(-2px);
}

.btn-lg {
   padding: var(--espaco-md) var(--espaco-xl);
   font-size: var(--fonte-sm);
}

.btn-sm {
   padding: var(--espaco-xs) var(--espaco-md);
   font-size: var(--fonte-xxs);
}

.btn-block {
   display: block;
   width: 100%;
}

/* ============================================
   ACESSIBILIDADE
   ============================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Focus styles for keyboard navigation */
:focus-visible {
    outline: 3px solid var(--cor-rosa);
    outline-offset: 2px;
}

/* Remove focus for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}