:root {
    --accent-color: #E4C7A7; 
    --accent-dark: #CFA87D;  
    --primary-dark: #1A120E; 
    --bg-white: #FFFFFF;
    --bg-light: #F4F4F4;
    --gold: #FFD700;
    --silver: #C0C0C0;
    --bronze: #CD7F32;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-light);
    color: var(--primary-dark);
}

.container { width: 90%; max-width: 1100px; margin: 0 auto; }

/* Header e Navbar comuns */
header { background: var(--bg-white); padding: 1rem 0; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.nav-container { display: flex; justify-content: space-between; align-items: center; }
.logo img { height: 50px; }
.nav-links { list-style: none; display: flex; gap: 20px; font-weight: 600; }
/* =========================================
   AJUSTE DE COR DOS LINKS DO MENU
   ========================================= */

/* Cor padrão dos links do menu */
.nav-links a {
    color: var(--primary-dark); /* Usa a cor escura padrão do site (#1A120E) */
    transition: color 0.3s ease; /* Adiciona uma transição suave */
}

/* Cor dos links quando o mouse passa por cima (Hover) */
.nav-links a:hover {
    color: var(--accent-color); /* Muda para a cor de destaque dourada (#E4C7A7) */
}

/* Hero da Página */
.ranking-hero {
    background-color: var(--primary-dark);
    color: white;
    padding: 4rem 0;
    text-align: center;
}
.ranking-hero h1 { font-family: 'Playfair Display'; font-size: 3rem; color: var(--accent-color); }

/* PÓDIO VISUAL */
.podium-section { margin-top: -50px; margin-bottom: 4rem; }
.podium-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
}

.podium-item {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    width: 200px;
    transition: transform 0.3s;
}

.podium-item.first { height: 280px; border-top: 8px solid var(--gold); z-index: 2; }
.podium-item.second { height: 240px; border-top: 8px solid var(--silver); }
.podium-item.third { height: 220px; border-top: 8px solid var(--bronze); }

.medal-icon { font-size: 2.5rem; display: block; margin-bottom: 10px; }
.podium-name { font-weight: bold; font-size: 1.1rem; display: block; margin: 10px 0; }
.podium-rating { color: var(--accent-dark); font-weight: 800; font-size: 1.3rem; }

/* TABELA */
.table-card {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.ranking-table-full { width: 100%; border-collapse: collapse; }
.ranking-table-full th { text-align: left; padding: 15px; border-bottom: 2px solid var(--bg-light); color: var(--text-muted); font-size: 0.9rem; }
.ranking-table-full td { padding: 15px; border-bottom: 1px solid var(--bg-light); }
.ranking-table-full tr:hover { background-color: #fafafa; }

/* Botão Flutuante (Reutilizado) */
.floating-brand { position: fixed; bottom: 25px; right: 25px; width: 60px; height: 60px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(0,0,0,0.2); z-index: 9999; border: 2px solid var(--accent-color); animation: pulse 2s infinite; }
.floating-brand img { width: 70%; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(228, 199, 167, 0.5); } 70% { box-shadow: 0 0 0 10px rgba(228, 199, 167, 0); } 100% { box-shadow: 0 0 0 0 rgba(228, 199, 167, 0); } }

@media (max-width: 768px) {
    .podium-container { flex-direction: column; align-items: center; }
    .podium-item { width: 100%; height: auto !important; margin-bottom: 10px; padding: 1rem; }
}

/* =========================================
   RODAPÉ PERSONALIZADO CORETEK (COM LOGO)
   ========================================= */
footer {
    background-color: #111;
    color: #fff;
    padding: 2.5rem 0;
    margin-top: 4rem;
    border-top: 3px solid var(--accent-color);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-copy {
    color: #888;
    font-size: 0.85rem;
}

.footer-branding {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Alinha tudo à direita no PC */
}

.footer-branding span {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #666;
    margin-bottom: 8px;
}

.coretek-wrapper {
    display: flex;
    align-items: center; /* Alinha logo e texto no meio */
    gap: 12px;
    text-decoration: none;
    transition: 0.3s;
}

.coretek-logo {
    height: 35px; /* Ajuste o tamanho da sua logo aqui */
    width: auto;
    filter: grayscale(1) brightness(1.5); /* Deixa a logo em tons de branco/cinza para o footer */
    transition: 0.3s;
}

.coretek-wrapper:hover .coretek-logo {
    filter: grayscale(0) brightness(1); /* Volta a cor original no hover */
}

.coretek-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.coretek-text strong {
    font-size: 1.2rem;
    letter-spacing: 2px;
    color: #FFFFFF;
}

.coretek-dot {
    color: var(--accent-color);
}

.coretek-text small {
    font-size: 0.55rem;
    color: var(--accent-dark);
    text-align: right;
    letter-spacing: 1px;
    margin-top: 2px;
}

.coretek-wrapper:hover {
    transform: translateY(-3px);
}

/* Ajuste Mobile */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    .footer-branding {
        align-items: center;
    }
    .coretek-text small {
        text-align: center;
    }
}

/* CONTAINER DA ESFERA */
.coretek-floating-sphere {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 100px;
    height: 100px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* EFEITO DE ESFERA (AURA) */
.sphere-effect {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(188, 19, 254, 0.2) 0%, rgba(188, 19, 254, 0) 70%);
    border: 2px solid rgba(188, 19, 254, 0.3);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(188, 19, 254, 0.4), inset 0 0 20px rgba(188, 19, 254, 0.2);
    animation: sphere-pulse 3s ease-in-out infinite;
}

/* O ROBÔ DENTRO DA ESFERA */
.robot-inside {
    width: 75%;
    height: auto;
    z-index: 2;
    filter: drop-shadow(0 0 10px rgba(188, 19, 254, 0.5));
    animation: robot-float 4s ease-in-out infinite;
}

/* TOOLTIP */
.tooltip-coretek {
    position: absolute;
    right: 110px;
    background: #1a120e;
    color: white;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 0.85rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    border-left: 3px solid #bc13fe;
}

.coretek-floating-sphere:hover .tooltip-coretek {
    opacity: 1;
    visibility: visible;
}

/* ANIMAÇÕES */
@keyframes sphere-pulse {
    0%, 100% { transform: scale(1); opacity: 0.6; border-color: rgba(188, 19, 254, 0.3); }
    50% { transform: scale(1.1); opacity: 1; border-color: rgba(0, 243, 255, 0.5); } /* Brilho muda levemente para ciano */
}

@keyframes robot-float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-10px) rotate(3deg); }
}

/* AJUSTE MOBILE */
@media (max-width: 768px) {
    .coretek-floating-sphere { width: 80px; height: 80px; bottom: 20px; right: 20px; }
    .tooltip-coretek { display: none; }
}

/* BLINDAGEM VISUAL CORETEK */
* {
    /* Impede seleção de texto em todos os navegadores */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    /* Remove o destaque azul ao tocar em botões no mobile */
    -webkit-tap-highlight-color: transparent;
}

/* Proteção específica para imagens */
img {
    -webkit-user-drag: none;
    -webkit-user-drag: none;
    pointer-events: none; /* Impede clique e arraste */
}

/* Reabilitar seleção apenas em campos de entrada (formulários) */
input, textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* =========================================
   AJUSTE DO PODIUM NO MOBILE (CORETEK STANDARD)
   ========================================= */
@media (max-width: 768px) {
    /* Transforma o container do pódio em uma coluna flexível */
    .ranking-podium {
        display: flex;
        flex-direction: column;
        gap: 20px; /* Espaço entre os cards */
    }

    /* A mágica acontece aqui: definimos a ordem visual de cada card */
    
    /* O card do 1º Lugar (que tem a classe .place-1 ou similar) assume a primeira posição */
    .ranking-card.place-1 {
        order: 1;
        /* Destaque extra para o campeão no mobile */
        transform: scale(1.05); 
        border: 2px solid #ffd700; /* Borda dourada sutil */
        z-index: 2; /* Garante que ele fique por cima se houver sobreposição */
        margin-bottom: 10px;
    }

    /* O card do 2º Lugar assume a segunda posição */
    .ranking-card.place-2 {
        order: 2;
    }

    /* O card do 3º Lugar assume a terceira posição */
    .ranking-card.place-3 {
        order: 3;
    }
    
    /* Ajuste fino para os cards de 2º e 3º não ficarem gigantes */
    .ranking-card:not(.place-1) {
        width: 95%; /* Um pouco menores que a largura total */
        margin: 0 auto; /* Centraliza */
    }
}

/* =========================================
   AJUSTE DE PÓDIO RESPONSIVO - CORETEK
   ========================================= */
@media (max-width: 768px) {
    /* Ativa o controle de ordem no container do pódio */
    .podium-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Abaixo, você deve conferir no seu 'ranking.js' qual classe 
       está sendo dada para cada card. Geralmente usamos:
    */

    .podium-card.first-place { 
        order: 1; /* Carlos Eduardo vai para o topo */
        width: 100%;
        transform: scale(1.05); /* Um pequeno destaque para o campeão */
    }

    .podium-card.second-place { 
        order: 2; /* Rafael Mendes fica logo abaixo */
        width: 90%;
    }

    .podium-card.third-place { 
        order: 3; /* Ana Beatriz fecha a lista */
        width: 90%;
    }
}
/* =========================================
   SOCIAL LINKS - CORETEK STYLE
   ========================================= */
.footer-social {
    display: flex;
    align-items: center;
}

.social-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #888;
    font-size: 1.2rem;
    transition: 0.3s;
    font-family: 'Inter', sans-serif;
}

.social-link i {
    font-size: 1.8rem;
    color: var(--accent-color); /* Usa o dourado AXJPG */
}

.social-link span {
    font-size: 0.9rem;
    font-weight: 600;
}

.social-link:hover {
    color: #FFFFFF;
    transform: translateY(-3px);
}

.social-link:hover i {
    filter: drop-shadow(0 0 8px var(--accent-color));
}

/* Ajuste Mobile */
@media (max-width: 768px) {
    .footer-social {
        justify-content: center;
        width: 100%;
        margin: 10px 0;
    }
}