MediaWiki:Common.css: mudanças entre as edições

/* =====================================
   EVERLIGHT WIKI - COMMON.CSS
   ===================================== */

/* -----------------------------
   SIDEBAR LOGO
   ----------------------------- */
.sidebar-logo img {
    max-width: 100px;         /* LARGURA MÁXIMA IGUAL AO PRINT */
    height: auto;             /* ALTURA AUTOMÁTICA PROPORCIONAL */
    display: block;           /* EXIBE COMO BLOCO */
    margin: 0 auto;           /* CENTRALIZA HORIZONTALMENTE */
}

/* -----------------------------
   FONTE E FUNDO PADRÃO
   ----------------------------- */
body {
    font-family: "Segoe UI", Arial, sans-serif;  /* FONTE PADRÃO IGUAL AO PRINT */
    background-color: #ffffff;                   /* FUNDO BRANCO IGUAL AO PRINT */
}

/* -----------------------------
   REMOVE LARGURA QUEBRADA PADRÃO
   ----------------------------- */
.mw-body {
    max-width: 100%;          /* LARGURA MÁXIMA PARA EVITAR QUEBRA */
}

/* -----------------------------
   CONTAINER PRINCIPAL DA PÁGINA
   ----------------------------- */
.everlight-container {
    max-width: 1200px;        /* LARGURA MÁXIMA IGUAL AO PRINT */
    margin: 0 auto;           /* CENTRALIZA CONTAINER */
    padding: 10px;            /* ESPAÇAMENTO INTERNO PADRÃO */
}

/* =========================
   BARRA SUPERIOR DE LINKS
   ========================= */
.everlight-top-links {
    text-align: center;       /* CENTRALIZA TEXTO IGUAL AO PRINT */
    font-size: 14px;          /* TAMANHO DE FONTE IGUAL AO PRINT */
    margin-bottom: 15px;      /* ESPAÇAMENTO INFERIOR IGUAL AO PRINT */
}

.everlight-top-links a {
    color: #2a4bd7;           /* COR DO LINK IGUAL AO PRINT */
    text-decoration: none;    /* REMOVE SUBLINHADO PADRÃO */
    margin: 0 6px;            /* ESPAÇAMENTO ENTRE LINKS IGUAL AO PRINT */
}

.everlight-top-links a:hover {
    text-decoration: underline; /* SUBLINHADO AO PASSAR O MOUSE */
}

/* =========================
   BANNER PRINCIPAL
   ========================= */
.everlight-banner {
    height: 220px;            /* ALTURA DO BANNER IGUAL AO PRINT */
    background: #9b1c1c;      /* COR DE FUNDO DO BANNER */
    border-radius: 10px;       /* CANTOS ARREDONDADOS */
    display: flex;             /* FLEX PARA CENTRALIZAR CONTEÚDO */
    align-items: center;       /* CENTRALIZA VERTICALMENTE */
    justify-content: center;   /* CENTRALIZA HORIZONTALMENTE */
    color: #ffffff;            /* COR DO TEXTO DO BANNER */
    font-size: 32px;           /* TAMANHO DA FONTE DO BANNER */
    font-weight: bold;         /* NEGRITO */
    margin-bottom: 20px;       /* ESPAÇAMENTO ABAIXO DO BANNER */
}

/* =========================
   BOTÃO DE EVENTO
   ========================= */
.everlight-event-button {
    text-align: center;        /* CENTRALIZA O BOTÃO */
    margin-bottom: 25px;       /* ESPAÇAMENTO ABAIXO DO BOTÃO */
}

.everlight-event-button a {
    background: #c62828;       /* COR DE FUNDO DO BOTÃO */
    color: #fff;               /* COR DO TEXTO */
    padding: 12px 30px;        /* PADDING DO BOTÃO */
    font-size: 20px;           /* TAMANHO DA FONTE DO BOTÃO */
    text-decoration: none;     /* REMOVE SUBLINHADO */
    border-radius: 6px;        /* CANTOS LEVEMENTE ARREDONDADOS */
    transition: background 0.3s; /* TRANSIÇÃO SUAVE AO HOVER */
}

.everlight-event-button a:hover {
    background: #a11f1f;       /* COR DE FUNDO AO PASSAR O MOUSE */
}

/* =========================
   CARDS PRINCIPAIS
   ========================= */

/* =====================================
   IMAGENS SIMPLES COM HOVER (SEM GRID)
   ===================================== */

/* Container das imagens com hover */
.hover-images {
    display: flex;                  /* FLEX PARA LINHAS */
    flex-wrap: wrap;                /* QUEBRA AUTOMÁTICA DE LINHA */
    gap: 16px;                      /* ESPAÇAMENTO ENTRE IMAGENS */
    justify-content: center;        /* CENTRALIZA HORIZONTALMENTE */
    align-items: center;            /* ALINHA VERTICALMENTE */
    margin: 20px 0;                 /* MARGEM SUPERIOR E INFERIOR */
}

/* Remove qualquer estilo padrão do MediaWiki */
.hover-images .thumb,
.hover-images .image {
    background: none;               /* REMOVE FUNDO */
    border: none;                   /* REMOVE BORDA */
    box-shadow: none;               /* REMOVE SOMBRA */
    margin: 0;                      /* REMOVE MARGEM */
    padding: 0;                     /* REMOVE PADDING */
}

/* Imagens dentro do container hover */
.hover-images img {
    display: block;                 /* EXIBE COMO BLOCO */
    border-radius: 6px;             /* CANTOS ARREDONDADOS */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* TRANSIÇÃO SUAVE */
}

/* Efeito ao passar o mouse nas imagens */
.hover-images img:hover {
    transform: translateY(-6px) scale(1.03); /* LEVE MOVIMENTO E AUMENTO */
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25); /* SOMBRA SUAVE */
}

/* Efeito especial para galerias com hover */
.everlight-hover-gallery img:hover {
    transform: scale(1.08) translateY(-6px);  /* AMPLIAÇÃO + LEVE ELEVAÇÃO */
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
    cursor: pointer;                          /* CURSOR DE MÃO */
}

/* =========================
   TÍTULOS DE SEÇÃO
   ========================= */
.everlight-section-title {
    font-size: 22px;              /* TAMANHO DA FONTE IGUAL AO PRINT */
    margin: 25px 0 15px;          /* MARGEM SUPERIOR E INFERIOR */
    border-bottom: 2px solid #ccc; /* LINHA INFERIOR */
}

/* =========================
   GUIAS
   ========================= */
.everlight-guide {
    display: flex;                /* FLEX PARA ÍCONES + TEXTO */
    align-items: center;          /* CENTRALIZA VERTICALMENTE */
    font-size: 14px;              /* TAMANHO DA FONTE PADRÃO */
}

/* Ícones dentro das guias */
.everlight-guide .icon {
    width: 28px;                  /* LARGURA DO ÍCONE */
    height: 28px;                 /* ALTURA DO ÍCONE */
    background: #ccc;             /* FUNDO CINZA */
    margin-right: 8px;            /* ESPAÇAMENTO ENTRE ÍCONE E TEXTO */
}

/* =========================
   DESTAQUES
   ========================= */

/* Container de destaques em grid */
.everlight-highlights {
    display: grid;                              /* GRID PARA CARDS */
    grid-template-columns: repeat(4, 1fr);      /* 4 COLUNAS IGUAIS */
    gap: 12px;                                  /* ESPAÇAMENTO ENTRE CARDS */
}

/* Imagem do destaque */
.everlight-highlight .img {
    height: 120px;                              /* ALTURA IGUAL AO PRINT */
    background: #ddd;                           /* FUNDO CINZA CLARO */
}

/* Título do destaque */
.everlight-highlight .title {
    padding: 8px;                               /* ESPAÇAMENTO INTERNO */
    text-align: center;                         /* CENTRALIZA TEXTO */
    font-weight: bold;                          /* TEXTO EM NEGRITO */
}

/* =========================
   ANIMAÇÕES - CARDS PRINCIPAIS
   ========================= */

/* Card container */
.everlight-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease; /* TRANSIÇÃO SUAVE */
    cursor: pointer;                                         /* CURSOR DE MÃO */
}

/* Efeito hover do card */
.everlight-card:hover {
    transform: translateY(-6px);                             /* LEVE ELEVAÇÃO */
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);            /* SOMBRA SUAVE */
    background: #ffffff;                                     /* FUNDO BRANCO */
}

/* Imagem dentro do card */
.everlight-card .img {
    transition: transform 0.25s ease;                        /* TRANSIÇÃO SUAVE */
}

/* Efeito hover na imagem do card */
.everlight-card:hover .img {
    transform: scale(1.05);                                  /* LEVE AMPLIAÇÃO */
}

/* =========================
   CONTEÚDOS EXCLUSIVOS
   ========================= */

/* Container geral */
.everlight-exclusive-wrapper {
    margin-top: 30px;                                        /* MARGEM SUPERIOR */
}

/* Grid dos conteúdos exclusivos */
.everlight-exclusive-grid {
    display: grid;                                           /* GRID PARA ITENS */
    grid-template-columns: repeat(3, 1fr);                  /* 3 COLUNAS IGUAIS */
    gap: 15px;                                               /* ESPAÇAMENTO ENTRE ITENS */
}

/* Item individual */
.everlight-exclusive-item {
    border: 1px solid #cfcfcf;                               /* BORDA LEVE */
    background: #f7f7f7;                                     /* FUNDO CINZA CLARO */
    transition: transform 0.25s ease, box-shadow 0.25s ease; /* TRANSIÇÃO SUAVE */
}

/* Efeito hover no item */
.everlight-exclusive-item:hover {
    transform: translateY(-5px);                              /* LEVE ELEVAÇÃO */
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);                /* SOMBRA SUAVE */
}

/* Imagem do item exclusivo */
.everlight-exclusive-img {
    height: 140px;                                            /* ALTURA IGUAL AO PRINT */
    background: #dcdcdc;                                      /* FUNDO CINZA CLARO */
}

/* Título do item exclusivo */
.everlight-exclusive-title {
    padding: 10px;                                           /* ESPAÇAMENTO INTERNO */
    font-weight: bold;                                       /* TEXTO EM NEGRITO */
    text-align: center;                                      /* CENTRALIZA TEXTO */
    background: #ffffff;                                     /* FUNDO BRANCO */
}

/* =========================
   GUIAS – EverLight
   ========================= */

/* Container geral das guias */
.hr-guides-wrapper {
    max-width: 1200px;          /* LARGURA MÁXIMA IGUAL AO PRINT */
    margin: 25px auto;          /* CENTRALIZA E MARGEM SUPERIOR */
    background: #ffffff;        /* FUNDO BRANCO */
}

/* Título das guias */
.hr-guides-title {
    text-align: center;         /* CENTRALIZA TEXTO */
    font-weight: bold;          /* NEGRITO */
    font-size: 14px;            /* TAMANHO DA FONTE */
    letter-spacing: 1px;        /* ESPAÇAMENTO ENTRE LETRAS */
    padding: 6px 0;             /* ESPAÇAMENTO INTERNO */
    margin-bottom: 10px;        /* MARGEM INFERIOR */
    border-top: 1px solid #cfcfcf;
    border-bottom: 1px solid #cfcfcf;
}

/* Grid dos itens das guias */
.hr-guides-grid {
    display: grid;                                      /* GRID PARA ITENS */
    grid-template-columns: repeat(5, 1fr);             /* 5 COLUNAS IGUAIS */
    column-gap: 30px;                                  /* ESPAÇAMENTO ENTRE COLUNAS */
    row-gap: 6px;                                      /* ESPAÇAMENTO ENTRE LINHAS */
    padding: 5px 10px 10px;                            /* PADDING INTERNO */
}

/* Item individual da guia */
.hr-guide-item {
    display: flex;                                     /* FLEX PARA ÍCONE + TEXTO */
    align-items: center;                               /* CENTRALIZA VERTICALMENTE */
    font-size: 13px;                                   /* TAMANHO DA FONTE */
    line-height: 1.6;                                  /* ALTURA DE LINHA */
}

/* Ícone do item da guia */
.hr-guide-item img {
    margin-right: 6px;                                 /* ESPAÇAMENTO ENTRE ÍCONE E TEXTO */
}

/* Link do item da guia */
.hr-guide-item a {
    color: #0033cc;                                    /* COR DO LINK */
    text-decoration: none;                             /* REMOVE SUBLINHADO */
}

.hr-guide-item a:hover {
    text-decoration: underline;                        /* SUBLINHADO AO PASSAR O MOUSE */
}

/* RESPONSIVO */
@media (max-width: 900px) {
    .hr-guides-grid {
        grid-template-columns: repeat(2, 1fr);         /* 2 COLUNAS EM TELAS PEQUENAS */
    }
}

/* =========================
   CARDS
   ========================= */

/* Container geral de cards */
.everlight-cards {
    display: flex;                                      /* FLEX PARA CARDS */
    gap: 14px;                                          /* ESPAÇAMENTO ENTRE CARDS */
    justify-content: center;                             /* CENTRALIZA HORIZONTALMENTE */
    flex-wrap: wrap;                                    /* QUEBRA DE LINHA AUTOMÁTICA */
}

/* Card individual */
.everlight-card {
    width: 160px;                                      /* LARGURA DO CARD */
    background: #ffffff;                               /* FUNDO BRANCO */
    border: 1px solid #cfd6dd;                        /* BORDA LEVE */
    border-radius: 2px;                                /* CANTOS LEVEMENTE ARREDONDADOS */
    overflow: hidden;                                  /* ESCONDE EXCESSO DE CONTEÚDO */
    text-align: center;                                /* CENTRALIZA TEXTO */
    font-family: Arial, sans-serif;                    /* FONTE PADRÃO */
}

/* Imagem do card */
.everlight-img {
    width: 100%;                                       /* OCUPA TODA A LARGURA */
    height: 100px;                                     /* ALTURA IGUAL AO PRINT */
    background-size: cover;                             /* IMAGEM COBRE TODO O ESPAÇO */
    background-position: center;                        /* CENTRALIZA IMAGEM */
    background-repeat: no-repeat;                       /* SEM REPETIÇÃO */
}

/* Link do card */
.everlight-card a {
    display: block;
    padding: 8px 4px;                                  /* PADDING INTERNO */
    font-weight: bold;                                 /* TEXTO NEGRITO */
    color: #0033cc;                                    /* COR DO LINK */
    text-decoration: none;                             /* REMOVE SUBLINHADO */
}

.everlight-card a:hover {
    text-decoration: underline;                        /* SUBLINHADO AO PASSAR O MOUSE */
}

/* =========================
   CLASSES TABLE
   ========================= */

/* Tabela de classes */
.classes-table {
    width: 100%;                                       /* OCUPA 100% DA LARGURA */
    border-collapse: collapse;                         /* REMOVE ESPAÇAMENTO ENTRE CELULAS */
    text-align: center;                                /* CENTRALIZA TEXTO */
    background: #fff;                                  /* FUNDO BRANCO */
}

/* Células da tabela */
.classes-table td {
    border: 1px solid #cfcfcf;                         /* BORDA LEVE */
    padding: 10px;                                     /* ESPAÇAMENTO INTERNO */
    vertical-align: middle;                             /* ALINHA TEXTO NO CENTRO */
}

/* Nome da classe */
.class-name {
    color: #2a5db0;                                    /* COR AZUL */
    font-weight: bold;                                  /* TEXTO NEGRITO */
}

/* =========================
   BARRAS DE TÍTULO
   ========================= */

/* Barra padrão */
.row-title td {
    font-weight: bold;                                  /* TEXTO NEGRITO */
    padding: 6px;                                       /* PADDING INTERNO */
    border: 1px solid #bdbdbd;                          /* BORDA LEVE */
}

/* Barra inicial */
.row-title.initial td {
    background: #fdecc8;                                /* FUNDO LARANJA CLARO */
}

/* Barras de cores alternativas */
.row-title.c1 td {
    background: #f6ef99;                                /* FUNDO AMARELO CLARO */
}

.row-title.c2 td {
    background: #f2ddc7;                                /* FUNDO BEGE CLARO */
}

.row-title.trans td {
    background: #dce8dc;                                /* FUNDO VERDE CLARO */
}

.row-title.expand td {
    background: #f6ef99;                                /* FUNDO AMARELO CLARO */
}

.row-title.expand2 td {
    background: #f2ddc7;                                /* FUNDO BEGE CLARO */
}

/* ===============================
   LAYOUT DAS CLASSES – EVERLIGHT
   =============================== */

/* Grid principal das classes */
.classes-grid {
    display: grid;                                /* GRID PARA ITENS */
    gap: 0;                                       /* SEM ESPAÇAMENTO ENTRE ITENS */
    border-left: 1px solid #cfcfcf;              /* BORDA ESQUERDA */
    border-top: 1px solid #cfcfcf;               /* BORDA SUPERIOR */
    margin-bottom: 25px;                          /* MARGEM INFERIOR */
    background: #ffffff;                          /* FUNDO BRANCO */
}

/* Configurações por quantidade de colunas */
.classes-grid-2  { grid-template-columns: repeat(2, 1fr); }
.classes-grid-4  { grid-template-columns: repeat(4, 1fr); }
.classes-grid-6  { grid-template-columns: repeat(6, 1fr); }
.classes-grid-10 { grid-template-columns: repeat(5, 1fr); }

/* Item individual da classe */
.class-item {
    text-align: center;                           /* CENTRALIZA TEXTO */
    padding: 20px 10px;                           /* ESPAÇAMENTO INTERNO */
    border-right: 1px solid #cfcfcf;             /* BORDA DIREITA */
    border-bottom: 1px solid #cfcfcf;            /* BORDA INFERIOR */
    background: #ffffff;                          /* FUNDO BRANCO */
    font-size: 14px;                              /* TAMANHO DA FONTE */
    line-height: 1.4;                             /* ALTURA DE LINHA */
}

/* Imagem dentro do item da classe */
.class-item img {
    display: inline-block;                        /* EXIBE EM LINHA */
    margin: 0 2px;                                /* MARGEM LATERAL PEQUENA */
    vertical-align: middle;                       /* ALINHA AO MEIO */
    max-width: 100%;                              /* NÃO ULTRAPASSA CONTAINER */
    height: auto;                                 /* ALTURA PROPORCIONAL */
}

/* =========================
   TÍTULOS DE CLASSES
   ========================= */

/* Títulos genéricos */
h2 {
    margin: 0;
    padding: 6px;
    text-align: center;
    font-weight: bold;
}

/* Classes de cores específicas (substitui :contains) */
.classe-inicial-title            { background: #f6e7c6; border: 1px solid #e0c99c; }
.classe-1-title                  { background: #f2ea8c; border: 1px solid #e0d87c; }
.classe-2-title                  { background: #efd7c4; border: 1px solid #dcc2a9; }
.classe-transcendental-title     { background: #dce6d8; border: 1px solid #c5d4c1; }
.classe-expandida-title           { background: #f2ea8c; border: 1px solid #e0d87c; }

/* =========================
   RESPONSIVIDADE DAS CLASSES
   ========================= */

/* Para telas até 1200px */
@media (max-width: 1200px) {
    .classes-grid-6  { grid-template-columns: repeat(4, 1fr); }
    .classes-grid-10 { grid-template-columns: repeat(5, 1fr); }
}

/* Para telas até 900px */
@media (max-width: 900px) {
    .classes-grid-6  { grid-template-columns: repeat(3, 1fr); }
    .classes-grid-10 { grid-template-columns: repeat(3, 1fr); }
    .classes-grid-4  { grid-template-columns: repeat(2, 1fr); }
}

/* Para telas até 600px */
@media (max-width: 600px) {
    .classes-grid-6, 
    .classes-grid-10, 
    .classes-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Para telas até 400px */
@media (max-width: 400px) {
    .classes-grid-6, 
    .classes-grid-10, 
    .classes-grid-4,
    .classes-grid-2 { grid-template-columns: 1fr; }
}

/* ================================================= */
/* SISTEMA DE CLASSES - WIKI EVERLIGHT              */
/* ================================================= */

/* -----------------------------
   RESET E CONTAINER
   ----------------------------- */
.everlight-classes-system {
    max-width: 1000px;                                  /* LARGURA MÁXIMA DO SISTEMA */
    margin: 20px auto;                                  /* CENTRALIZA HORIZONTALMENTE */
    padding: 0 15px;                                    /* PADDING LATERAL */
    font-family: -apple-system, BlinkMacSystemFont,     /* FONTE PADRÃO */
                 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

/* -----------------------------
   TÍTULO DA PÁGINA
   ----------------------------- */
.everlight-page-title {
    text-align: center;                                 /* CENTRALIZA TEXTO */
    margin-bottom: 40px;                                /* MARGEM INFERIOR */
    padding-bottom: 20px;                               /* PADDING INFERIOR */
    border-bottom: 2px solid #e0e0e0;                  /* LINHA SEPARADORA */
}

.everlight-page-title h1 {
    color: #2c3e50;                                    /* COR DO TÍTULO */
    font-size: 32px;                                    /* TAMANHO DO TÍTULO */
    margin-bottom: 15px;                                /* MARGEM INFERIOR */
    font-weight: 700;                                   /* NEGRITO */
}

.everlight-page-title p {
    color: #666;                                        /* COR DO SUBTÍTULO */
    font-size: 16px;                                    /* TAMANHO DA FONTE */
    line-height: 1.6;                                   /* ALTURA DE LINHA */
    max-width: 800px;                                   /* LARGURA MÁXIMA DO TEXTO */
    margin: 0 auto;                                     /* CENTRALIZA TEXTO */
}

/* -----------------------------
   GRADE PRINCIPAL (3 COLUNAS)
   ----------------------------- */
.everlight-main-grid {
    display: grid;                                      /* GRID PARA CARDS */
    grid-template-columns: repeat(3, 1fr);             /* 3 COLUNAS IGUAIS */
    gap: 25px;                                         /* ESPAÇAMENTO ENTRE CARDS */
    margin-bottom: 40px;                               /* MARGEM INFERIOR */
}

/* Responsividade da grade principal */
@media (max-width: 900px) {
    .everlight-main-grid {
        grid-template-columns: repeat(2, 1fr);         /* 2 COLUNAS EM TELAS MÉDIAS */
    }
}

@media (max-width: 600px) {
    .everlight-main-grid {
        grid-template-columns: 1fr;                    /* 1 COLUNA EM TELAS PEQUENAS */
    }
}

/* -----------------------------
   CARD DA CLASSE (ESTILO SITE)
   ----------------------------- */
.everlight-class-card {
    background: white;                                 /* FUNDO DO CARD */
    border-radius: 12px;                               /* CANTOS ARREDONDADOS */
    overflow: hidden;                                  /* ESCONDE EXCESSO */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);          /* SOMBRA SUAVE */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* TRANSIÇÃO SUAVE */
    cursor: pointer;                                   /* CURSOR DE MÃO */
    border: 2px solid transparent;                     /* BORDA TRANSPARENTE INICIAL */
    position: relative;                                /* POSICIONAMENTO RELATIVO */
}

.everlight-class-card:hover {
    transform: translateY(-8px);                       /* LEVE ELEVAÇÃO */
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);         /* SOMBRA AO HOVER */
    border-color: #3498db;                             /* BORDA AZUL AO HOVER */
}

.everlight-class-card.active {
    border-color: #2980b9;                             /* BORDA AZUL ESCURO */
    background: #f8fafc;                               /* FUNDO LEVE DIFERENCIADO */
}

/* -----------------------------
   IMAGEM DO CARD
   ----------------------------- */
.everlight-class-image {
    height: 220px;                                     /* ALTURA IGUAL AO PRINT */
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%); /* GRADIENTE DE FUNDO */
    display: flex;                                     /* FLEX PARA CENTRALIZAR IMAGENS */
    align-items: center;
    justify-content: center;
    gap: 10px;                                         /* ESPAÇAMENTO ENTRE IMAGENS */
    padding: 20px;                                     /* PADDING INTERNO */
    overflow: hidden;
}

/* -----------------------------
   IMAGENS COM EFEITO HOVER
   ----------------------------- */
.everlight-img-hover {
    transition: all 0.4s ease;                        /* TRANSIÇÃO SUAVE */
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));  /* SOMBRA LEVE */
    max-height: 180px;                                /* ALTURA MÁXIMA */
    object-fit: contain;                               /* PROPORÇÃO CORRETA */
}

.everlight-class-card:hover .everlight-img-hover {
    transform: scale(1.08);                            /* AMPLIAÇÃO AO HOVER */
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.2));  /* SOMBRA MAIOR AO HOVER */
}

/* -----------------------------
   NOME DA CLASSE
   ----------------------------- */
.everlight-class-name {
    padding: 20px;                                    /* PADDING INTERNO */
    text-align: center;                                /* CENTRALIZA TEXTO */
    background: white;                                 /* FUNDO BRANCO */
    border-top: 1px solid #f1f1f1;                   /* LINHA SEPARADORA */
}

.everlight-class-title {
    display: block;
    color: #2c3e50;                                   /* COR DO TÍTULO */
    font-size: 20px;                                   /* TAMANHO DA FONTE */
    font-weight: 700;                                  /* NEGRITO */
    margin-bottom: 5px;                                /* MARGEM INFERIOR */
}

.everlight-class-subtitle {
    display: block;
    color: #7f8c8d;                                   /* COR DO SUBTÍTULO */
    font-size: 14px;                                   /* TAMANHO DA FONTE */
    font-weight: 500;                                  /* PESO MÉDIO */
    text-transform: uppercase;                         /* MAIÚSCULAS */
    letter-spacing: 1px;                               /* ESPAÇAMENTO ENTRE LETRAS */
}

/* ================================================= */
/* ÁREA DE EXPANSÃO (ABRE AO CLICAR)                */
/* ================================================= */

/* Container da área expansível */
.everlight-expansion-area {
    display: none;                                     /* OCULTO POR PADRÃO */
    background: white;                                 /* FUNDO BRANCO */
    border-radius: 12px;                               /* CANTOS ARREDONDADOS */
    margin: 20px 0 40px;                               /* MARGEM SUPERIOR E INFERIOR */
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);           /* SOMBRA LEVE */
    border: 1px solid #e0e0e0;                        /* BORDA CINZA CLARO */
    animation: everlightSlideDown 0.4s ease-out;       /* ANIMAÇÃO AO ABRIR */
}

/* Área ativa (quando clicada) */
.everlight-expansion-area.active {
    display: block;                                    /* EXIBE CONTEÚDO */
}

/* Animação de abertura */
@keyframes everlightSlideDown {
    from {
        opacity: 0;
        transform: translateY(-15px);                 /* LEVE SUBIDA INICIAL */
    }
    to {
        opacity: 1;
        transform: translateY(0);                     /* POSIÇÃO FINAL */
    }
}

/* Conteúdo interno da expansão */
.everlight-expansion-content {
    padding: 30px;                                     /* PADDING INTERNO */
}

/* Título da expansão */
.everlight-expansion-title {
    color: #2c3e50;                                   /* COR DO TÍTULO */
    font-size: 28px;                                   /* TAMANHO DA FONTE */
    margin-bottom: 15px;                               /* MARGEM INFERIOR */
    padding-bottom: 15px;                              /* PADDING INFERIOR */
    border-bottom: 2px solid #3498db;                 /* LINHA AZUL */
    font-weight: 700;                                  /* NEGRITO */
}

/* Descrição da expansão */
.everlight-expansion-description {
    color: #555;                                       /* COR DO TEXTO */
    font-size: 16px;                                   /* TAMANHO DA FONTE */
    line-height: 1.7;                                  /* ALTURA DE LINHA */
    margin-bottom: 30px;                               /* MARGEM INFERIOR */
    padding-bottom: 20px;                              /* PADDING INFERIOR */
    border-bottom: 1px solid #eee;                     /* LINHA LEVE */
}

/* ================================================= */
/* GRADE DE SUB-CLASSES (DENTRO DA EXPANSÃO)        */
/* ================================================= */

/* Grid de sub-classes */
.everlight-subclasses-grid {
    display: grid;                                     /* GRID PARA ITENS */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* COLUNAS FLEXÍVEIS */
    gap: 25px;                                         /* ESPAÇAMENTO ENTRE CARDS */
    margin-top: 20px;                                  /* MARGEM SUPERIOR */
}

/* Card individual de sub-classe */
.everlight-subclass-card {
    background: #f8fafc;                               /* FUNDO LEVE */
    border-radius: 10px;                                /* CANTOS ARREDONDADOS */
    padding: 20px;                                      /* PADDING INTERNO */
    transition: all 0.3s ease;                          /* TRANSIÇÃO SUAVE */
    border: 1px solid #e2e8f0;                          /* BORDA CLARA */
    display: flex;                                      /* FLEX PARA IMAGEM + INFO */
    align-items: center;
    gap: 20px;                                          /* ESPAÇAMENTO ENTRE IMAGEM E INFO */
}

/* Hover no card de sub-classe */
.everlight-subclass-card:hover {
    background: white;                                  /* FUNDO BRANCO AO HOVER */
    border-color: #3498db;                              /* BORDA AZUL */
    box-shadow: 0 6px 12px rgba(52, 152, 219, 0.15);   /* SOMBRA AO HOVER */
    transform: translateY(-3px);                        /* LEVE ELEVAÇÃO */
}

/* Imagem da sub-classe */
.everlight-subclass-image {
    flex-shrink: 0;                                     /* NÃO REDUZIR */
}

.everlight-subclass-img {
    width: 100px;
    height: 100px;                                      /* TAMANHO FIXO */
    object-fit: contain;                                 /* MANDA PROPORÇÃO CORRETA */
    transition: transform 0.3s ease;                    /* TRANSIÇÃO SUAVE */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));     /* SOMBRA LEVE */
}

/* Hover na imagem */
.everlight-subclass-card:hover .everlight-subclass-img {
    transform: scale(1.1);                              /* LEVE AMPLIAÇÃO */
}

/* Informações da sub-classe */
.everlight-subclass-info {
    flex-grow: 1;                                       /* OCUPA ESPAÇO RESTANTE */
}

/* Título da sub-classe */
.everlight-subclass-info h3 {
    margin: 0 0 8px 0;                                  /* MARGEM INFERIOR */
    font-size: 18px;                                    /* TAMANHO DO TÍTULO */
    font-weight: 700;                                   /* NEGRITO */
}

/* Link do título da sub-classe */
.everlight-subclass-info h3 a {
    color: #2c3e50;                                    /* COR PADRÃO */
    text-decoration: none;                              /* SEM SUBLINHADO */
    transition: color 0.2s;                             /* TRANSIÇÃO DE COR */
}

.everlight-subclass-info h3 a:hover {
    color: #3498db;                                    /* AZUL AO PASSAR O MOUSE */
}

/* Descrição da sub-classe */
.everlight-subclass-info p {
    color: #666;                                        /* COR DO TEXTO */
    font-size: 14px;                                    /* TAMANHO DA FONTE */
    line-height: 1.5;                                   /* ALTURA DE LINHA */
    margin: 0;
}

/* ================================================= */
/* ANIMAÇÕES EXTRAS E MELHORIAS                      */
/* ================================================= */

/* -----------------------------
   EFEITO DE CARREGAMENTO PARA AS IMAGENS
   ----------------------------- */
.everlight-class-image {
    position: relative;  /* Necessário para pseudo-elemento de shimmer */
}

.everlight-class-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: loadingShimmer 1.5s infinite;
    pointer-events: none;
}

@keyframes loadingShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* -----------------------------
   SETA INDICADORA NO CARD ATIVO
   ----------------------------- */
.everlight-class-card.active::after {
    content: '▼';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    color: #2980b9;
    font-size: 20px;
    animation: bounce 0.5s infinite alternate;
}

@keyframes bounce {
    from { transform: translateX(-50%) translateY(0); }
    to { transform: translateX(-50%) translateY(5px); }
}

/* -----------------------------
   BOTÃO DE FECHAR (OPCIONAL)
   ----------------------------- */
.everlight-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #e74c3c;
    color: white;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 10;
}

.everlight-close-btn:hover {
    background: #c0392b;
}

/* ================================================= */
/* RESPONSIVIDADE ADICIONAL                         */
/* ================================================= */

/* TABLETS MENORES */
@media (max-width: 768px) {
    .everlight-class-image {
        height: 180px;
        padding: 15px;
    }
    
    .everlight-img-hover {
        max-height: 150px;
    }
    
    .everlight-expansion-content {
        padding: 20px;
    }
    
    .everlight-subclass-card {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
}

/* CELULARES */
@media (max-width: 480px) {
    .everlight-classes-system {
        padding: 0 10px;
    }
    
    .everlight-page-title h1 {
        font-size: 24px;
    }
    
    .everlight-page-title p {
        font-size: 14px;
    }
    
    .everlight-main-grid {
        gap: 15px;
    }
    
    .everlight-class-image {
        height: 150px;
    }
    
    .everlight-img-hover {
        max-height: 120px;
    }
    
    .everlight-class-name {
        padding: 15px;
    }
    
    .everlight-class-title {
        font-size: 18px;
    }
    
    .everlight-subclasses-grid {
        grid-template-columns: 1fr;
    }
}

/* DARK MODE SUPPORT (OPCIONAL) */
@media (prefers-color-scheme: dark) {
    .everlight-classes-system {
        background: transparent;
    }
    
    .everlight-class-card,
    .everlight-expansion-area,
    .everlight-subclass-card {
        background: #2d3748;
        border-color: #4a5568;
    }
    
    .everlight-class-name,
    .everlight-expansion-content {
        background: #2d3748;
    }
    
    .everlight-class-title,
    .everlight-expansion-title,
    .everlight-subclass-info h3 a {
        color: #e2e8f0;
    }
    
    .everlight-class-subtitle,
    .everlight-expansion-description,
    .everlight-subclass-info p {
        color: #a0aec0;
    }
    
    .everlight-class-image {
        background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    }
    
    .everlight-subclass-card:hover {
        background: #4a5568;
    }
}

/* ================================================= */
/* GRID DE CLASSES                                   */
/* ================================================= */
.classes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    margin: 20px 0;
}

/* ITEM INDIVIDUAL */
.class-item {
    border: 1px solid #cfcfcf;
    background: #f7f7f7;
    padding: 15px 10px;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
}

.class-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    background: #ffffff;
}

/* IMAGENS DAS CLASSES */
.class-item img {
    margin: 0 2px;
    vertical-align: middle;
}

/* NOME DA CLASSE */
.class-item b,
.class-item strong {
    display: block;
    margin-top: 8px;
    font-size: 14px;
}

/* ================================================= */
/* LINKS EM TODO O CARD                              */
/* ================================================= */

/* Torna o card inteiro clicável */
.class-link {
    text-decoration: none;   /* Remove underline */
    color: inherit;          /* Mantém cor do card */
    display: block;          /* Ocupa todo o card */
}

.class-link:hover {
    text-decoration: none;
    color: inherit;
}

/* ================================================= */
/* ANIMAÇÃO E INTERAÇÃO – CLASSES                    */
/* ================================================= */

/* Card individual */
.class-item {
    position: relative;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

/* Hover no card */
.class-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    background: #fdfdfd;
}

/* Animação nas imagens do card */
.class-item img {
    transition: transform 0.25s ease;
}

.class-item:hover img {
    transform: scale(1.08);
}

/* Remove underline e mantém todo o card clicável */
.class-item a {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* ================================================= */
/* PÁGINA DE CLASSES – EVERLIGHT                     */
/* ================================================= */

/* Container principal da página */
.job-page {
    max-width: 750px;
    margin: 0 0 40px 0;       /* remove auto horizontal */
    padding-left: 0;          /* remove recuo herdado */
}

/* Header da página */
.job-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: #f6f7f9;
    border: 1px solid #dcdcdc;
    margin-bottom: 25px;
}

/* Título da página */
.job-title h1 {
    margin: 0;
    font-size: 28px;
}

.job-title p {
    margin: 0;
    color: #666;
    font-weight: bold;
}

/* Seções da página */
.job-section {
    margin-bottom: 25px;
}

.job-section h2 {
    font-size: 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid #ccc;
    padding-bottom: 4px;
}

.job-section h3 {
    font-size: 16px;
    margin-top: 15px;
}

/* Lista de itens */
.job-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 20px;
    margin: 10px 0;
}

.job-list li {
    list-style: disc;
    margin-left: 18px;
}

/* ================================================= */
/* TABELA DE ATRIBUTOS                               */
/* ================================================= */
.everlight-attr-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    margin: 20px 0 30px;
    font-size: 14px;
}

.everlight-attr-table th {
    background: #f2ea8c;
    border: 1px solid #cfcfcf;
    padding: 8px;
    text-align: center;
}

.everlight-attr-table td {
    border: 1px solid #cfcfcf;
    padding: 8px;
    text-align: center;
}

/* Hover nas linhas da tabela */
.everlight-attr-table tbody tr:hover {
    background: #f9f9f9;
}

/* ================================================= */
/* PÁGINA DA CLASSE – APRENDIZ                       */
/* ================================================= */

/* Container principal */
.aprendiz-page {
    max-width: 1200px;
    margin: 25px auto;
    padding: 10px;
}

/* Conteúdo principal: texto + infobox */
.aprendiz-content {
    display: flex;
    gap: 24px;
}

/* -----------------------------
   TEXTO PRINCIPAL
   ----------------------------- */
.aprendiz-text {
    flex: 3;
    background: #ffffff;
    padding: 18px;
    border: 1px solid #cfcfcf;
    font-size: 14px;
    line-height: 1.6;
}

.aprendiz-text h2 {
    margin-top: 25px;
    padding-bottom: 5px;
    border-bottom: 2px solid #e0e0e0;
}

/* -----------------------------
   INFOBOX LATERAL
   ----------------------------- */
.aprendiz-infobox {
    flex: 1;
    background: #f8f8f8;
    border: 1px solid #cfcfcf;
    font-size: 13px;
}

/* Título da infobox */
.infobox-title {
    background: #f2ea8c;
    text-align: center;
    font-weight: bold;
    padding: 8px;
    font-size: 16px;
}

/* Área de imagens dentro da infobox */
.infobox-images {
    text-align: center;
    padding: 10px;
}

/* Tabela da infobox */
.infobox-table {
    width: 100%;
    border-collapse: collapse;
}

.infobox-table th,
.infobox-table td {
    border-top: 1px solid #cfcfcf;
    padding: 6px;
    text-align: left;
}

.infobox-table th {
    background: #eeeeee;
    width: 45%;
}

/* =========================
   RESPONSIVIDADE
   ========================= */
@media (max-width: 800px) {
    .aprendiz-content {
        flex-direction: column;
    }
}

/* ================================================= */
/* INFOBOX – APRENDIZES (CLONE)                     */
/* ================================================= */

/* Container da infobox */
.aprendiz-infobox {
    width: 300px;
    background: #f8f8f8;
    border: 1px solid #cfcfcf;
    font-size: 13px;
    float: right;
    margin: 0 0 10px 10px;
    font-family: Arial, sans-serif;
}

/* Cabeçalho da infobox */
.aprendiz-header {
    border-radius: 8px;
    color: #0645ad;
    padding: 4px;
    text-align: center;
    font-weight: bold;
    line-height: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
}

/* Imagem principal */
.aprendiz-main-image {
    text-align: center;
    padding: 10px;
    background: #e6e6e6;
}

/* Título das seções da infobox */
.aprendiz-section-title {
    background: #4a4a4a;
    color: #fff;
    text-align: center;
    font-weight: bold;
    padding: 4px;
    margin-top: 5px;
}

.aprendiz-section-title.dark {
    background: #333;
}

/* Tabs */
.aprendiz-tabs {
    display: flex;
    gap: 10px;
    padding: 6px;
    font-size: 12px;
}

.aprendiz-tabs .tab {
    color: #0645ad;
    cursor: pointer;
}

.aprendiz-tabs .active {
    font-weight: bold;
    text-decoration: underline;
}

/* Sprites */
.aprendiz-sprites {
    text-align: center;
    padding: 6px;
}

/* Tabela de informações */
.aprendiz-info-table {
    width: 100%;
    border-collapse: collapse;
}

.aprendiz-info-table th {
    background: #f0f0f0;
    border: 1px solid #ccc;
    padding: 4px;
    width: 40%;
    text-align: left;
}

.aprendiz-info-table td {
    border: 1px solid #ccc;
    padding: 4px;
}

.aprendiz-info-table a {
    color: #0645ad;
    text-decoration: none;
}

.aprendiz-info-table a:hover {
    text-decoration: underline;
}

/* Ícones de armas na infobox */
.aprendiz-weapons img {
    margin: 2px;
    padding: 2px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    width: 24px;
    height: 24px;
}

/* Tabela de bônus */
.aprendiz-bonus-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.aprendiz-bonus-table th {
    color: #0645ad;
    font-weight: bold;
    padding: 4px;
    border: 1px solid #ccc;
}

.aprendiz-bonus-table td {
    padding: 4px;
    border: 1px solid #ccc;
}

/* ================================================= */
/* TABELA DE ATRIBUTOS                               */
/* ================================================= */
.everlight-attr-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    margin: 20px 0 30px;
    font-size: 14px;
}

.everlight-attr-table th {
    background: #f2ea8c;
    border: 1px solid #cfcfcf;
    padding: 8px;
    text-align: center;
}

.everlight-attr-table td {
    border: 1px solid #cfcfcf;
    padding: 8px;
    text-align: center;
}

.everlight-attr-table tbody tr:hover {
    background: #f9f9f9;
}

/* ================================================= */
/* CARDS PRINCIPAIS                                  */
/* ================================================= */
.everlight-cards {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Card individual */
.everlight-card {
    width: 160px;
    background: #ffffff;
    border: 1px solid #cfd6dd;
    text-align: center;
    font-family: Arial, sans-serif;
    padding-bottom: 8px;
}

/* Área da imagem do card */
.everlight-card-img {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Imagem do MediaWiki */
.everlight-card-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Mantém proporção e centraliza */
}

/* Texto do card */
.everlight-card a {
    display: block;
    padding: 6px 4px;
    font-weight: bold;
    color: #0033cc;
    text-decoration: none;
}

.everlight-card a:hover {
    text-decoration: underline;
}

/* ================================================= */
/* HOVER EM IMAGENS                                  */
/* ================================================= */
.img-hover a img {
    border: none;
    outline: none;
    box-shadow: none;
}

.hover-images {
    display: flex;
    gap: 16px;
    align-items: center;
}

.img-hover {
    display: inline-block;
}

.img-hover img {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.img-hover img:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

/* ============================= */
/* TESTE SCRIPTS - CLASSES inicio*/
/* ============================= */

/* =====================================
   SLIDER HORIZONTAL – CONTEÚDOS EXCLUSIVOS
   ===================================== */

/* Container principal do carrossel */
.everlight-carousel {
    position: relative;  /* Permite posicionar setas dentro */
    display: flex;       /* Organiza os elementos horizontalmente */
    align-items: center; /* Centraliza verticalmente conteúdo e setas */
}

/* Botões de navegação (setas) */
.nav-btn {
    background: rgba(0,0,0,0.5); /* Transparência inicial */
    color: white;
    border-radius: 50%;           /* Circulares */
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;             /* Suaviza mudanças visuais */
}

/* Hover nos botões deixa a seta totalmente preta */
.nav-btn:hover { 
    background: #000; 
}

/* Wrapper que segura a faixa rolável */
.exclusive-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;  /* Esconde overflow horizontal */
    margin: 20px 0;
}

/* Área rolável (slider real) */
.exclusive-slider {
    display: flex;          /* Mantém imagens lado a lado */
    gap: 18px;              /* Espaçamento entre slides */
    overflow-x: auto;       /* Permite rolagem horizontal */
    scroll-behavior: smooth; /* Rolagem suave */
    padding: 10px 40px;     /* Espaçamento interno */
}

/* Remove barra de rolagem no Webkit (Chrome/Safari) */
.exclusive-slider::-webkit-scrollbar {
    display: none;
}
/* Remove barra de rolagem em Firefox */
.exclusive-slider {
    scrollbar-width: none;
}

/* Cada slide individual */
.exclusive-slide {
    flex: 0 0 auto; /* Impede que o slide encolha ou cresça */
}

/* Imagens dentro do slide */
.exclusive-slide img {
    display: block;
    border-radius: 6px;      /* Cantos arredondados */
    transition: transform 0.25s ease, box-shadow 0.25s ease; /* Animação suave */
}

/* Hover sobre a imagem do slide */
.exclusive-slide img:hover {
    transform: translateY(-6px) scale(1.03); /* Leve elevação + zoom */
    box-shadow: 0 10px 22px rgba(0,0,0,0.25); /* Sombra realista */
}

/* Setas de navegação absolutas */
.exclusive-arrow {
    position: absolute;
    top: 50%;                  /* Centraliza verticalmente */
    transform: translateY(-50%);
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    width: 34px;
    height: 60px;
    cursor: pointer;
    font-size: 28px;
    z-index: 5;                /* Fica acima dos slides */
}

/* Setas esquerda/direita */
.exclusive-arrow.left { left: 0; }
.exclusive-arrow.right { right: 0; }

/* Hover nas setas aumenta contraste */
.exclusive-arrow:hover {
    background: rgba(0,0,0,0.85);
}

/* ================================================= */
/* CARROSSEL – CONTAINER GERAL                      */
/* ================================================= */

/* Container geral do carrossel */
.everlight-carousel {
    position: relative;
    width: 100%;         /* Ocupa 100% da largura do container pai */
    overflow: hidden;    /* Esconde overflow horizontal */
    margin: 25px 0;
}

/* Faixa de imagens do carrossel */
.everlight-carousel-track {
    display: flex;       /* Alinha imagens horizontalmente */
    gap: 20px;           /* Espaço entre imagens */
    overflow-x: auto;    /* Permite scroll horizontal */
    scroll-behavior: smooth; /* Rolagem suave */
    padding: 10px 40px;
}

/* Remove barra de rolagem feia do track */
.everlight-carousel-track::-webkit-scrollbar {
    display: none;
}

/* Imagens dentro do track */
.everlight-carousel-track img {
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover suave */
}

/* Hover nas imagens dentro do track */
.img-hover img:hover {
    transform: translateY(-6px) scale(1.04); /* Leve elevação + zoom */
    box-shadow: 0 10px 22px rgba(0,0,0,0.25); /* Sombra realista */
}

/* ================================================= */
/* SETAS DO CARROSSEL                               */
/* ================================================= */
.carousel-btn {
    position: absolute;
    top: 50%;                 /* Centraliza verticalmente */
    transform: translateY(-50%);
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;       /* Círculo */
    cursor: pointer;
    z-index: 10;              /* Fica acima do conteúdo */
}

/* Posicionamento das setas esquerda/direita */
.carousel-btn.left { left: 5px; }
.carousel-btn.right { right: 5px; }

/* Hover aumenta contraste */
.carousel-btn:hover {
    background: rgba(0,0,0,0.85);
}


.everlight-carousel {
  position: relative;   /* Permite posicionar setas e elementos dentro */
  width: 100%;          /* Ocupa toda largura do container pai */
  overflow: hidden;     /* Esconde conteúdo que extrapola horizontalmente */
  margin: 30px auto;    /* Centraliza horizontalmente e adiciona espaçamento vertical */
}

/* Wrapper interno do carrossel */
.carousel-wrapper {
    display: flex;         /* Alinha os itens horizontalmente */
    gap: 20px;             /* Espaço entre os itens */
    overflow-x: hidden;    /* Oculta barra de rolagem, JS controla movimentação */
    scroll-behavior: smooth; /* Rolagem suave ao usar setas via JS */
    padding: 40px 0;       /* Espaço vertical para que itens ativos (scale) não sejam cortados */
    white-space: nowrap;    /* Garante que os itens fiquem em linha única */
}

/* Cada item do carrossel */
.carousel-item {
    flex: 0 0 auto;           /* Impede que o item encolha ou cresça */
    transition: transform 0.4s ease, opacity 0.4s ease; /* Suaviza zoom e opacidade */
}

/* Item ativo (em destaque) */
.carousel-item.active {
  opacity: 1;            /* Totalmente visível */
  transform: scale(1.1); /* Leve zoom para destacar */
}

/* Título do item (abaixo da imagem) */
.carousel-title {
  margin-top: 8px;
  font-weight: bold;
}

/* Botões de navegação */
.nav-btn {
  position: absolute;       /* Fixa posição dentro do carrossel */
  top: 50%;                 /* Centraliza verticalmente */
  transform: translateY(-50%);
  font-size: 30px;
  cursor: pointer;
  z-index: 10;              /* Fica acima dos itens */
  user-select: none;        /* Impede seleção de texto */
  padding: 10px;
}

/* Posições específicas das setas */
.left-btn { left: 0; }
.right-btn { right: 0; }

/* ================================================= */
/* CARD – CONTEÚDOS EXCLUSIVOS                       */
/* ================================================= */
/* (Sem regras específicas ainda, mas é placeholder para estilo dos cards) */

/* ================================================= */
/* HIDE – SEÇÕES DOBRÁVEIS (accordion)              */
/* ================================================= */
/* Container da seção de classe */
.job-section {
    margin-bottom: 15px;
    border: 1px solid #ddd;   /* Delimita a seção */
    border-radius: 5px;       /* Cantos arredondados */
    overflow: hidden;         /* Esconde conteúdo excedente */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Estilo do título da seção (summary da tag <details>) */
.job-section summary {
    padding: 12px 15px;
    cursor: pointer;          /* Indica que é clicável */
    font-weight: bold;
    list-style: none;         /* Remove a seta padrão do browser */
    transition: background 0.3s; /* Suaviza mudança de cor no hover */
    outline: none;            /* Remove contorno padrão ao focar */
}

/* Hover no título da seção */
.job-section summary:hover {
    filter: brightness(0.95); /* Leve escurecimento ao passar o mouse */
}

/* Cores específicas por categoria de classe */
.human-job summary { background-color: #fdf2d9; } /* Bege */
.expanded-job summary { background-color: #eef2ad; } /* Amarelo */
.doram-job summary { background-color: #e9f5e9; } /* Verde */

/* Container interno da seção (conteúdo que abre) */
.job-content {
    display: flex;               /* Alinha conteúdo horizontalmente */
    align-items: center;         /* Centraliza verticalmente */
    justify-content: space-around; /* Espaço igual entre elementos */
    background: #f9f9f9;
    padding: 20px;
    flex-wrap: wrap;             /* Quebra linha em telas menores */
    gap: 15px;                   /* Espaçamento entre elementos */
}

/* Estilo das transclasses (sub-classes) */
.trans-name {
    color: #2e7d32;       /* Verde destaque */
    font-weight: bold;
}

//* ================================================= */
/* ÁRVORE DE CLASSE                                 */
/* ================================================= */

/* Container geral da árvore de classes */
.job-container { 
    font-family: sans-serif;      /* Fonte legível e neutra */
    max-width: 649px;             /* Limita largura do conteúdo */
    margin: 10px auto;            /* Centraliza horizontalmente e adiciona espaçamento vertical */
}

/* Cada seção da árvore (accordion) */
.job-section { 
    border: 1px solid #ddd;       /* Borda discreta */
    margin-bottom: 5px;           /* Espaço entre seções */
    border-radius: 4px;           /* Cantos arredondados */
    overflow: hidden;             /* Esconde conteúdo que ultrapassa o container */
}

/* Título da seção (clicável) */
.job-section summary { 
    padding: 10px 15px;           /* Espaçamento interno */
    cursor: pointer;              /* Indica que é clicável */
    font-weight: bold;
    background: #fdf2d9;          /* Cor de fundo padrão (bege) */
    color: #5a4a3a;               /* Cor do texto */
    list-style: none;             /* Remove setinha padrão do browser */
    outline: none;                /* Remove contorno ao focar */
}

/* Hover no título */
.job-section summary:hover { 
    background: #f9e8bc;          /* Leve escurecimento quando passa o mouse */
}

/* Seção aberta */
.job-section[open] summary { 
    border-bottom: 1px solid #ddd; /* Linha separadora */
    background: #f4e6c5;           /* Fundo diferenciado para aberto */
}

/* Headers diferenciados (cores por categoria ou evolução) */
.expand-header summary { 
    background: #eef2ad;          /* Amarelo claro */
    color: #4a4a2a;               /* Texto mais escuro */
}
.expand-header summary:hover { 
    background: #e5eb8d;          /* Alteração suave no hover */
}

/* Conteúdo interno da seção */
.content { 
    display: flex;               /* Alinha os elementos em linha */
    align-items: center;         /* Centraliza verticalmente */
    justify-content: center;     /* Centraliza horizontalmente */
    background: #fff;            /* Fundo branco */
    padding: 20px;               /* Espaçamento interno */
    flex-wrap: wrap;             /* Permite quebra de linha em telas menores */
    gap: 15px;                   /* Espaço entre elementos */
}

/* Caixa de evolução (sub-itens dentro da árvore) */
.evo-box { 
    border: 1px dashed #bbb;    /* Borda tracejada */
    padding: 12px;               /* Espaçamento interno */
    background: #fafafa;         /* Fundo levemente cinza */
    border-radius: 5px;          /* Cantos arredondados */
    display: flex;
    flex-direction: column;      /* Itens empilhados verticalmente */
    gap: 10px;                   /* Espaçamento interno entre itens */
}

/* Linha horizontal dentro da caixa de evolução */
.row { 
    display: flex;               /* Alinha itens horizontalmente */
    align-items: center;         /* Centraliza verticalmente */
    gap: 10px;                   /* Espaçamento entre elementos da linha */
}

/* Nome de transclasses / sub-classes */
.trans { 
    color: #2e7d32;              /* Verde para destaque */
    font-weight: bold;
}

/* Setas indicativas */
.arrow { 
    color: #888;                 /* Cinza neutro */
    font-weight: bold;
}

/* ================================================= */
/* CARROSSEL INFOBOX CLASSES                         */
/* ================================================= */

/* Container principal do carrossel da Infobox */
.carrossel-everlight { 
    width: 200px;                /* Largura do container */
    height: 300px;               /* Altura ideal para artes de Ragnarok */
    margin: 0 auto !important;   /* Centraliza o carrossel */
    overflow: hidden;            /* Esconde imagens fora do frame */
    position: relative;          /* Permite animação e posicionamento interno */
    display: block;
}

/* Wrapper interno que desliza */
.carrossel-slider { 
    display: flex;               /* Itens alinhados horizontalmente */
    width: 400px;                /* Largura total (2 imagens de 200px cada) */
    animation: animaCarrossel 10s infinite ease-in-out; /* Animação automática do carrossel */
}

/* Cada item do carrossel */
.carrossel-item { 
    width: 200px;                /* Largura fixa igual ao container */
    flex-shrink: 0;              /* Evita que encolha */
    text-align: center;          /* Centraliza imagem e título */
}

/* Imagem dentro do item */
.carrossel-item img { 
    max-width: 200px;            /* Largura máxima */
    height: auto;                /* Mantém proporção */
    margin: 0 auto;              /* Centraliza horizontalmente */
}

/* Keyframes da animação do carrossel */
@keyframes animaCarrossel { 
    0%, 45% { transform: translateX(0); }     /* Começa parado */
    50%, 95% { transform: translateX(-200px); } /* Desliza para a próxima imagem */
    100% { transform: translateX(0); }        /* Retorna ao início */
}

/* ================================================= */
/* GUIA MARÉ INFERNAL                               */
/* ================================================= */

/* Container geral do guia */
.guia-mare { 
    background: #f9f9f9;       /* Fundo neutro */
    border: 1px solid #aaa;    /* Borda clara */
    padding: 15px;             /* Espaçamento interno */
    border-radius: 8px;        /* Cantos arredondados */
}

/* Cabeçalho do guia */
.header-mare { 
    background: linear-gradient(90deg, #4b0082, #800000); /* Gradiente roxo/bermelo */
    color: white;             /* Texto branco */
    padding: 10px;            /* Espaçamento */
    border-radius: 5px;       /* Cantos arredondados */
    font-weight: bold;        
    font-size: 1.2em;         /* Texto maior */
    text-align: center;
    margin-bottom: 10px;      /* Espaço abaixo do header */
}

/* Caixas de regra individual */
.regra-box { 
    border-left: 5px solid #800000; /* Barra lateral vermelha */
    background: #fff5f5;            /* Fundo rosa bem claro */
    padding: 10px;                   /* Espaço interno */
    margin: 10px 0;                  /* Espaço entre caixas */
}

/* Títulos de mapas ou seções internas */
.map-title { 
    font-weight: bold;
    color: #800000;                /* Vermelho */
    border-bottom: 1px solid #ddd; /* Linha de separação */
    margin-bottom: 5px;
    display: block;                /* Garante que fique em linha própria */
}

/* ================================================= */
/* CSS DOS COMANDOS                                 */
/* ================================================= */

/* Cabeçalho de comandos */
.header-comandos { 
    background: linear-gradient(90deg, #333, #555); /* Gradiente escuro */
    color: white;           
    padding: 10px;         
    border-radius: 5px;
    font-weight: bold;
    font-size: 1.2em;
    text-align: center;
    margin-bottom: 10px;
}

/* Código de comando */
.cmd-code { 
    color: #800000;           /* Vermelho */
    font-weight: bold;
    background: #eee;         /* Fundo claro */
    padding: 2px 5px;         /* Espaçamento interno */
    border-radius: 3px;       
    font-family: monospace;   /* Fonte de código */
}

/* Código VIP */
.vip-code { 
    color: #b8860b;           /* Dourado */
    font-weight: bold;
    background: #fffdf5;      
    padding: 2px 5px;
    border-radius: 3px;
    font-family: monospace;
    border: 1px solid #daa520; /* Borda dourada */
}

/* ================================================= */
/* ÁRVORE DE HABILIDADES – DORAM                     */
/* ================================================= */

/* Container geral da árvore */
.doram-container {
    position: relative;       /* Permite posicionamento absoluto das caixas */
    width: 100%;
    max-width: 850px;         /* Limita tamanho */
    height: 900px;            /* Altura fixa para a árvore */
    background-color: #f9f9f9; 
    font-family: sans-serif;  
    margin: 0 auto;           /* Centraliza horizontalmente */
    overflow-x: auto;         /* Scroll horizontal se ultrapassar largura */
}

/* Cada caixa de habilidade */
.doram-skill { 
    position: absolute;       /* Posicionamento livre dentro do container */
    display: flex;            
    align-items: center;      
    width: 170px;             
    height: 42px;             
    background: linear-gradient(180deg, #5baaff 0%, #3090f0 100%); /* Azul gradiente */
    border: 1px solid #2b80dd; 
    border-radius: 6px;       
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); 
    color: white;             
    font-size: 13px;          
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    z-index: 10;              
    padding: 0 5px;           
    box-sizing: border-box;   
}

/* Área do ícone da habilidade */
.doram-icon { 
    width: 32px;
    height: 32px;
    background: rgba(0,0,0,0.2); 
    border-radius: 4px;      
    margin-right: 8px;        
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;         
}

/* Remove margens de imagens */
.doram-icon img { 
    margin: 0;
    padding: 0;
    background: none;
}

/* Nome da habilidade */
.doram-name { 
    line-height: 1.1;        
    flex: 1;                  
}

/* Etiquetas de nível */
.doram-lvl { 
    position: absolute;       
    background: white;        
    color: black;             
    font-size: 11px;          
    font-weight: bold;        
    padding: 1px 4px;         
    border-radius: 4px;       
    z-index: 11;              
    white-space: nowrap;      
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Posições padrões das etiquetas */
.lvl-bottom { bottom: -22px; left: 50%; transform: translateX(-50%); } /* Centro embaixo */
.lvl-right { top: 12px; right: -40px; } /* Lateral direita */

/* ================================================= */
/* LINHAS CONECTORAS (CSS PURO)                     */
/* ================================================= */
/* Faz as colunas ficarem lado a lado */
.skill-grid-aprendiz {
    display: flex;
    gap: 30px; /* Espaço entre as colunas */
    align-items: flex-start;
}

/* Estilo de cada linha de habilidade */
.skill-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    padding-left: 8px;
    min-width: 200px;
}

/* Cores das barrinhas laterais (conforme Foto 2) */
.s-passiva  { border-left: 5px solid #90EE90; } /* Verde */
.s-ofensiva { border-left: 5px solid #FFB6C1; } /* Vermelho/Rosa */
.s-suporte  { border-left: 5px solid #B0E0E6; } /* Azul claro */
.s-outros   { border-left: 5px solid #BEBEBE; } /* Cinza */

.skill-link {
    margin-left: 10px;
    font-size: 14px;
}



/* --- FIM DO CSS --- */
/* Container da Infobox à direita */
.skill-box-right {
    float: right;
    width: 350px;
    border: 1px solid #aaaaaa;
    background-color: #f9f9f9;
    margin: 0 0 1em 1em;
    padding: 0;
    font-family: sans-serif;
    font-size: 90%;
}

/* Cabeçalhos cinzas da Infobox e da Tabela */
.skill-header-main {
    background-color: #eaecf0;
    border-bottom: 1px solid #aaaaaa;
    padding: 5px;
    text-align: center;
    font-weight: bold;
}

.skill-table-subhead {
    background-color: #d1d4d9;
    font-weight: bold;
    text-align: center;
}

/* Tabela de Níveis à esquerda */
.skill-levels-table {
    border-collapse: collapse;
    width: 50%;
    float: left;
    margin-bottom: 1em;
}

.skill-levels-table th, .skill-levels-table td {
    border: 1px solid #aaaaaa;
    padding: 4px 8px;
    font-size: 13px;
}

.skill-levels-table th {
    background-color: #eaecf0;
}

/* Ajustes de texto e imagem */
.skill-img-frame {
    background: white;
    padding: 10px;
    text-align: center;
}

.skill-label {
    background-color: #eaecf0;
    font-weight: bold;
    width: 30%;
    border-top: 1px solid #aaaaaa;
}

.skill-value {
    background-color: #fdfdfd;
    border-top: 1px solid #aaaaaa;
}






<!-- ============================================
     PÁGINA COMPLETA - GUIAS E RODAPÉ
     CSS INCLUÍDO NA MESMA PÁGINA
============================================= -->

{{DISPLAYTITLE:<span style="display:none">{{PAGENAME}}</span>}}

<!-- CSS EMBUTIDO NA PÁGINA -->
<style>
/* ============================================
   CSS PARA GUIAS E RODAPÉ - TUDO EM UM
============================================= */

/* =======================
   BOTÕES SUPERIORES
   ======================= */

.everlight-top-links-white {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  padding: 20px;
  background: #ffffff;
  border-radius: 12px;
  margin: 20px auto;
  max-width: 1200px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

.everlight-top-links-white::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #8B5CF6 0%, #3B82F6 25%, #10B981 50%, #F59E0B 75%, #EC4899 100%);
  border-radius: 12px 12px 0 0;
}

.wiki-top-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  color: #374151;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 8px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  min-width: 110px;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
}

.wiki-top-link::before,
.wiki-top-link::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, #8B5CF6, #3B82F6);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 1px;
  z-index: 2;
}

.wiki-top-link::before { top: -1px; }
.wiki-top-link::after { bottom: -1px; }

.wiki-top-link:hover {
  letter-spacing: 1px;
  background: white;
  border-color: #8B5CF6;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
  color: #1f2937;
}

.wiki-top-link:hover::before,
.wiki-top-link:hover::after { width: 85%; }

.wiki-link-icon {
  font-size: 16px;
  transition: all 0.3s ease;
  display: inline-block;
}

.wiki-top-link:hover .wiki-link-icon {
  transform: scale(1.15);
  animation: iconBounce 0.5s ease;
}

@keyframes iconBounce {
  0%, 100% { transform: scale(1.15); }
  50% { transform: scale(1.3); }
}

.wiki-link-text {
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.wiki-top-link:hover .wiki-link-text {
  background: linear-gradient(90deg, #8B5CF6, #3B82F6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wiki-link-separator {
  color: #d1d5db;
  font-size: 16px;
  font-weight: 300;
  margin: 0 5px;
  transition: all 0.3s ease;
  padding: 0 2px;
}

.wiki-top-link:hover + .wiki-link-separator,
.wiki-link-separator:hover {
  color: #8B5CF6;
  transform: scale(1.2);
  font-weight: bold;
}

/* =======================
   SEÇÃO DE GUIAS
   ======================= */

.hr-guides-wrapper {
  background: white;
  border-radius: 16px;
  padding: 30px;
  margin: 30px auto;
  max-width: 1200px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.hr-guides-title {
  font-size: 2.2rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 30px;
  background: linear-gradient(135deg, #8B5CF6, #3B82F6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  padding-bottom: 15px;
}

.hr-guides-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: linear-gradient(90deg, #8B5CF6, #3B82F6);
  border-radius: 2px;
}

.hr-guides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
}

.hr-guide-item {
  background: #f9fafb;
  border-radius: 10px;
  padding: 15px 20px;
  border-left: 4px solid #8B5CF6;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #e5e7eb;
}

.hr-guide-item:hover {
  transform: translateX(10px);
  background: white;
  border-left-color: #3B82F6;
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.1);
}

.hr-icon {
  font-size: 18px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 92, 246, 0.1);
  border-radius: 8px;
  color: #8B5CF6;
  transition: all 0.3s ease;
}

.hr-guide-item:hover .hr-icon {
  transform: scale(1.1) rotate(5deg);
  background: rgba(139, 92, 246, 0.2);
}

.hr-guide-item a {
  color: #374151;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  flex-grow: 1;
}

.hr-guide-item:hover a {
  color: #8B5CF6;
}

/* =======================
   RODAPÉ PROFISSIONAL
   ======================= */

.wiki-footer-container {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  color: #fff;
  margin-top: 80px;
  padding: 40px 20px 20px;
  border-top: 4px solid #8B5CF6;
  position: relative;
  overflow: hidden;
}

.wiki-footer-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.footer-section {
  position: relative;
  z-index: 1;
  margin-bottom: 40px;
}

.footer-main {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: start;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  min-width: 200px;
}

.footer-logo img {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.05);
  padding: 10px;
  border: 2px solid rgba(139, 92, 246, 0.3);
  transition: all 0.3s ease;
}

.footer-logo img:hover {
  transform: scale(1.05);
  border-color: #8B5CF6;
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.4);
}

.footer-title h3 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, #8B5CF6, #3B82F6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
}

.footer-subtitle {
  color: #94a3b8;
  font-size: 0.9rem;
  margin-top: 5px;
  text-align: center;
}

.footer-description p {
  color: #cbd5e1;
  line-height: 1.6;
  margin-bottom: 25px;
  max-width: 600px;
  font-size: 1rem;
}

.footer-social {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.social-link:hover {
  transform: translateY(-3px);
  text-decoration: none;
}

.social-link.discord:hover { 
  background: rgba(88, 101, 242, 0.2); 
  border-color: #5865F2;
}
.social-link.website:hover { 
  background: rgba(59, 130, 246, 0.2); 
  border-color: #3B82F6;
}

.footer-heading {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(139, 92, 246, 0.5);
  position: relative;
}

.footer-heading::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #8B5CF6, transparent);
}

.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-menu li {
  margin-bottom: 12px;
}

.footer-menu a {
  color: #cbd5e1;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  transition: all 0.3s ease;
  border-radius: 6px;
  padding-left: 10px;
  position: relative;
}

.footer-menu a::before {
  content: '›';
  position: absolute;
  left: -5px;
  opacity: 0;
  transition: all 0.3s ease;
  color: #8B5CF6;
}

.footer-menu a:hover {
  color: #fff;
  padding-left: 20px;
  background: rgba(139, 92, 246, 0.1);
}

.footer-menu a:hover::before {
  opacity: 1;
  left: 5px;
}

.footer-divider {
  clear: both;
  margin: 30px 0;
}

.divider-line {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(139, 92, 246, 0.5) 50%, transparent 100%);
}

.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-copyright p {
  margin: 5px 0;
  color: #94a3b8;
  font-size: 0.9rem;
}

.footer-copyright strong {
  color: #fff;
  font-weight: 700;
}

.footer-disclaimer {
  font-size: 0.8rem !important;
  color: #64748b !important;
  margin-top: 10px !important;
}

.footer-stats {
  display: flex;
  gap: 30px;
  justify-content: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
}

.stat-number {
  font-size: 1.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, #8B5CF6, #3B82F6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.stat-label {
  font-size: 0.8rem;
  color: #94a3b8;
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.footer-btn:hover {
  background: rgba(139, 92, 246, 0.2);
  border-color: #8B5CF6;
  transform: translateY(-2px);
  text-decoration: none;
}

.footer-message {
  margin-top: 30px;
  padding: 15px;
  background: rgba(139, 92, 246, 0.1);
  border-radius: 10px;
  border-left: 4px solid #8B5CF6;
}

.message-container {
  display: flex;
  align-items: center;
  gap: 15px;
}

.message-icon {
  font-size: 1.5rem;
  animation: messagePulse 2s infinite;
}

@keyframes messagePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.message-text {
  color: #e2e8f0;
  font-size: 0.95rem;
  flex-grow: 1;
}

/* =======================
   RESPONSIVIDADE
   ======================= */

@media (max-width: 1024px) {
  .everlight-top-links-white,
  .hr-guides-wrapper {
    padding: 15px;
  }
  
  .wiki-top-link {
    padding: 8px 14px;
    font-size: 13px;
    min-width: 95px;
  }
  
  .hr-guides-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
  
  .footer-section:not(.footer-main) {
    width: calc(33.333% - 30px);
    display: inline-block;
    vertical-align: top;
    margin-right: 30px;
    margin-bottom: 40px;
  }
}

@media (max-width: 768px) {
  .everlight-top-links-white {
    flex-direction: column;
    gap: 8px;
  }
  
  .wiki-top-link {
    width: 100%;
    max-width: 220px;
  }
  
  .wiki-link-separator {
    display: none;
  }
  
  .hr-guides-title {
    font-size: 1.8rem;
  }
  
  .hr-guides-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-main {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .footer-brand {
    margin-bottom: 20px;
  }
  
  .footer-section:not(.footer-main) {
    width: 100%;
    margin-right: 0;
  }
  
  .footer-bottom {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }
  
  .footer-copyright {
    text-align: center;
  }
  
  .footer-stats {
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .footer-actions {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* =======================
   ANIMAÇÕES
   ======================= */

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

.wiki-top-link,
.hr-guide-item {
  animation: fadeInSlide 0.5s ease-out forwards;
  opacity: 0;
}

.wiki-top-link:nth-child(1) { animation-delay: 0.1s; }
.wiki-top-link:nth-child(3) { animation-delay: 0.2s; }
.wiki-top-link:nth-child(5) { animation-delay: 0.3s; }
.wiki-top-link:nth-child(7) { animation-delay: 0.4s; }
.wiki-top-link:nth-child(9) { animation-delay: 0.5s; }
.wiki-top-link:nth-child(11) { animation-delay: 0.6s; }
.wiki-top-link:nth-child(13) { animation-delay: 0.7s; }

.hr-guide-item:nth-child(1) { animation-delay: 0.1s; }
.hr-guide-item:nth-child(2) { animation-delay: 0.2s; }
.hr-guide-item:nth-child(3) { animation-delay: 0.3s; }
.hr-guide-item:nth-child(4) { animation-delay: 0.4s; }
.hr-guide-item:nth-child(5) { animation-delay: 0.5s; }

/* Efeito ripple para clique */
@keyframes ripple {
  to {
    transform: scale(2.5);
    opacity: 0;
  }
}

.clicked {
  animation: clickPulse 0.3s ease;
}

@keyframes clickPulse {
  0% { transform: translateY(-2px) scale(1); }
  50% { transform: translateY(-2px) scale(0.98); }
  100% { transform: translateY(-2px) scale(1); }
}
</style>

<!-- JAVASCRIPT EMBUTIDO -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Adiciona efeito de clique nos botões
  const buttons = document.querySelectorAll('.wiki-top-link, .footer-btn');
  buttons.forEach(button => {
    button.addEventListener('click', function(e) {
      // Efeito de onda
      const ripple = document.createElement('span');
      const rect = this.getBoundingClientRect();
      const size = Math.max(rect.width, rect.height);
      const x = e.clientX - rect.left - size / 2;
      const y = e.clientY - rect.top - size / 2;
      
      ripple.style.cssText = `
        position: absolute;
        border-radius: 50%;
        background: rgba(139, 92, 246, 0.15);
        transform: scale(0);
        animation: ripple 0.6s linear;
        width: ${size}px;
        height: ${size}px;
        top: ${y}px;
        left: ${x}px;
        pointer-events: none;
        z-index: 0;
      `;
      
      this.appendChild(ripple);
      
      setTimeout(() => {
        ripple.remove();
      }, 600);
    });
  });
  
  // Botão voltar ao topo
  const scrollToTopBtn = document.getElementById('scrollToTop');
  if (scrollToTopBtn) {
    scrollToTopBtn.addEventListener('click', function() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    });
  }
  
  // Mensagem dinâmica no rodapé
  const dynamicMessage = document.getElementById('dynamicMessage');
  if (dynamicMessage) {
    const messages = [
      "Esta wiki é mantida pela comunidade. Ajude a melhorá-la!",
      "Encontrou um erro? Clique em 'Editar' para corrigir!",
      "Novo no servidor? Comece pelo Guia de UP!",
      "Participe do nosso Discord para tirar dúvidas!"
    ];
    
    let currentMessage = 0;
    
    setInterval(() => {
      dynamicMessage.style.opacity = '0';
      setTimeout(() => {
        currentMessage = (currentMessage + 1) % messages.length;
        dynamicMessage.textContent = messages[currentMessage];
        dynamicMessage.style.opacity = '1';
      }, 500);
    }, 8000);
  }
  
  // Atualiza ano no copyright
  const copyrightText = document.querySelector('.footer-copyright');
  if (copyrightText && copyrightText.textContent.includes('2024')) {
    const currentYear = new Date().getFullYear();
    copyrightText.innerHTML = copyrightText.innerHTML.replace('2024', currentYear);
  }
});
</script>

<!-- ============================================
     CONTEÚDO DA PÁGINA - COMEÇA AQUI
============================================= -->

<!-- LOGO E TÍTULO (opcional) -->
<center>
[[Arquivo:logo-everlight.png|500px|link=Página_Principal]]
</center>

<!-- BOTÕES SUPERIORES -->
<div class="everlight-top-links-white">
  
  <a href="https://everlightgames.com.br/?to=inicio" class="wiki-top-link">
    <span class="wiki-link-icon">🌐</span>
    <span class="wiki-link-text">Site Oficial</span>
  </a>
  
  <span class="wiki-link-separator">•</span>
  
  <a href="/wiki/Informações_do_Servidor" class="wiki-top-link">
    <span class="wiki-link-icon">ℹ️</span>
    <span class="wiki-link-text">Informações</span>
  </a>
  
  <span class="wiki-link-separator">•</span>
  
  <a href="https://everlightgames.com.br/?to=registro" class="wiki-top-link">
    <span class="wiki-link-icon">📝</span>
    <span class="wiki-link-text">Registro</span>
  </a>
  
  <span class="wiki-link-separator">•</span>
  
  <a href="https://everlightgames.com.br/?to=downloads" class="wiki-top-link">
    <span class="wiki-link-icon">⬇️</span>
    <span class="wiki-link-text">Download</span>
  </a>
  
  <span class="wiki-link-separator">•</span>
  
  <a href="/wiki/Mercado" class="wiki-top-link">
    <span class="wiki-link-icon">💰</span>
    <span class="wiki-link-text">Mercado</span>
  </a>
  
  <span class="wiki-link-separator">•</span>
  
  <a href="https://discord.gg/aRpbZP5yx9" class="wiki-top-link">
    <span class="wiki-link-icon">💬</span>
    <span class="wiki-link-text">Discord</span>
  </a>
  
  <span class="wiki-link-separator">•</span>
  
  <a href="/wiki/Atualizações" class="wiki-top-link">
    <span class="wiki-link-icon">🔄</span>
    <span class="wiki-link-text">Atualizações</span>
  </a>
  
</div>

<!-- SEÇÃO DE GUIAS -->
<div class="hr-guides-wrapper">

<div class="hr-guides-title">
GUIAS EVERLIGHT
</div>

<div class="hr-guides-grid">

<div class="hr-guide-item"><span class="hr-icon">📈</span>[[Guia de UP]]</div>
<div class="hr-guide-item"><span class="hr-icon">💰</span>[[Comércio]]</div>
<div class="hr-guide-item"><span class="hr-icon">🏪</span>[[Loja de Presença]]</div>
<div class="hr-guide-item"><span class="hr-icon">✨</span>[[Encantamentos]]</div>
<div class="hr-guide-item"><span class="hr-icon">🗳️</span>[[Pontos de Voto]]</div>
<div class="hr-guide-item"><span class="hr-icon">👑</span>[[Sistema VIP]]</div>
<div class="hr-guide-item"><span class="hr-icon">👹</span>[[Pontos MVP]]</div>
<div class="hr-guide-item"><span class="hr-icon">🤖</span>[[Eventos Automáticos]]</div>
<div class="hr-guide-item"><span class="hr-icon">🏰</span>[[Instâncias]]</div>
<div class="hr-guide-item"><span class="hr-icon">🌿</span>[[Grupo do Éden]]</div>
<div class="hr-guide-item"><span class="hr-icon">🎲</span>[[Random Options]]</div>
<div class="hr-guide-item"><span class="hr-icon">🔥</span>[[Monstros Infernais]]</div>
<div class="hr-guide-item"><span class="hr-icon">⌨️</span>[[Comandos]]</div>
<div class="hr-guide-item"><span class="hr-icon">🐾</span>[[Sistema de PET]]</div>
<div class="hr-guide-item"><span class="hr-icon">🛡️</span>[[Passe de Batalha]]</div>
<div class="hr-guide-item"><span class="hr-icon">🏰</span>[[Instâncias]]</div>
<div class="hr-guide-item"><span class="hr-icon">🌊</span>[[Maré Infernal]]</div>
<div class="hr-guide-item"><span class="hr-icon">👑</span>[[MVPs]]</div>
<div class="hr-guide-item"><span class="hr-icon">⚔️</span>[[Progressão de Dano]]</div>
<div class="hr-guide-item"><span class="hr-icon">🔧</span>[[Refinamento e Grade]]</div>
<div class="hr-guide-item"><span class="hr-icon">🎰</span>[[Roleta da Sorte]]</div>
<div class="hr-guide-item"><span class="hr-icon">💎</span>[[Sistema RMT]]</div>
<div class="hr-guide-item"><span class="hr-icon">👑</span>[[Sistema VIP]]</div>
<div class="hr-guide-item"><span class="hr-icon">🔄</span>[[Renascimento]]</div>
<div class="hr-guide-item"><span class="hr-icon">📊</span>[[Trait Status]]</div>
<div class="hr-guide-item"><span class="hr-icon">👼</span>[[Bençao de Lilith]]</div>
<div class="hr-guide-item"><span class="hr-icon">👨‍🍳</span>[[Chefenia]]</div>
<div class="hr-guide-item"><span class="hr-icon">📚</span>[[Colecionador]]</div>
<div class="hr-guide-item"><span class="hr-icon">📈</span>[[Guia de UP]]</div>
<div class="hr-guide-item"><span class="hr-icon">👥</span>[[Horda]]</div>

</div>
</div>

<!-- RODAPÉ PROFISSIONAL -->
<div class="wiki-footer-container">

  <!-- PRIMEIRA SEÇÃO -->
  <div class="footer-section footer-main">
    <div class="footer-brand">
      <div class="footer-logo">
        [[Arquivo:Everlight-logo.png|80x80px|link=Página_Principal]]
      </div>
      <div class="footer-title">
        <h3>EverLight Games</h3>
        <p class="footer-subtitle">Wiki Oficial</p>
      </div>
    </div>
    
    <div class="footer-description">
      <p>A enciclopédia definitiva do servidor EverLight Ragnarok Online.</p>
      
      <div class="footer-social">
        <a href="https://discord.gg/aRpbZP5yx9" class="social-link discord">
          <span class="social-icon">💬</span>
          <span class="social-text">Discord</span>
        </a>
        <a href="https://everlightgames.com.br" class="social-link website">
          <span class="social-icon">🌐</span>
          <span class="social-text">Site Oficial</span>
        </a>
      </div>
    </div>
  </div>

  <!-- LINKS RÁPIDOS -->
  <div class="footer-section">
    <h4 class="footer-heading">Navegação</h4>
    <ul class="footer-menu">
      <li><a href="/wiki/Página_Principal">🏠 Página Inicial</a></li>
      <li><a href="/wiki/Guia_de_UP">📈 Guia de UP</a></li>
      <li><a href="/wiki/Comandos">⌨️ Comandos</a></li>
      <li><a href="/wiki/Sistema_VIP">👑 Sistema VIP</a></li>
      <li><a href="/wiki/Mercado">💰 Mercado</a></li>
      <li><a href="/wiki/Atualizações">🔄 Atualizações</a></li>
    </ul>
  </div>

  <!-- GUIAS IMPORTANTES -->
  <div class="footer-section">
    <h4 class="footer-heading">Guias Essenciais</h4>
    <ul class="footer-menu">
      <li><a href="/wiki/Instâncias">🏰 Instâncias</a></li>
      <li><a href="/wiki/Maré_Infernal">🌊 Maré Infernal</a></li>
      <li><a href="/wiki/MVPs">👑 MVPs</a></li>
      <li><a href="/wiki/Sistema_de_PET">🐾 Sistema de PET</a></li>
      <li><a href="/wiki/Refinamento_e_Grade">🔧 Refinamento</a></li>
      <li><a href="/wiki/Eventos_Automáticos">🤖 Eventos Auto</a></li>
    </ul>
  </div>

  <!-- RECURSOS DA WIKI -->
  <div class="footer-section">
    <h4 class="footer-heading">Recursos</h4>
    <ul class="footer-menu">
      <li><a href="/wiki/Especial:PáginasNovas">📄 Páginas Novas</a></li>
      <li><a href="/wiki/Especial:MudançasRecentes">📝 Mudanças Recentes</a></li>
      <li><a href="/wiki/Especial:PáginasAleatórias">🎲 Página Aleatória</a></li>
      <li><a href="/wiki/Ajuda">❓ Ajuda</a></li>
    </ul>
  </div>

  <!-- LINHA SEPARADORA -->
  <div class="footer-divider">
    <div class="divider-line"></div>
  </div>

  <!-- RODAPÉ INFERIOR -->
  <div class="footer-bottom">
    
    <div class="footer-copyright">
      <p>© 2024 <strong>EverLight Games</strong>. Todos os direitos reservados.</p>
      <p class="footer-disclaimer">
        Ragnarok Online é uma marca registrada da Gravity Co., Ltd.
      </p>
    </div>
    
    <div class="footer-stats">
      <div class="stat-item">
        <span class="stat-number">{{NUMBEROFPAGES}}</span>
        <span class="stat-label">Páginas</span>
      </div>
      <div class="stat-item">
        <span class="stat-number">{{NUMBEROFARTICLES}}</span>
        <span class="stat-label">Artigos</span>
      </div>
      <div class="stat-item">
        <span class="stat-number">{{NUMBEROFUSERS}}</span>
        <span class="stat-label">Usuários</span>
      </div>
    </div>
    
    <div class="footer-actions">
      <button class="footer-btn" id="scrollToTop">
        <span class="btn-icon">⬆️</span>
        <span class="btn-text">Topo</span>
      </button>
      <a href="/wiki/Especial:Preferências" class="footer-btn">
        <span class="btn-icon">⚙️</span>
        <span class="btn-text">Config</span>
      </a>
    </div>
    
  </div>

  <!-- MENSAGEM DINÂMICA -->
  <div class="footer-message">
    <div class="message-container">
      <span class="message-icon">💡</span>
      <span class="message-text" id="dynamicMessage">
        Esta wiki é mantida pela comunidade. Ajude a melhorá-la!
      </span>
    </div>
  </div>

</div>