2026-06-10T14:55:48Z

Adm.mayuka: /* Visão Geral */

<div class="farm-infobox">

<div class="farm-header">
Sistema de Auto Ataque
</div>

<div class="farm-content">

<div class="farm-stat">
<span>Requisito</span>
<span>Dispositivo Automático</span>
</div>

<div class="farm-stat">
<span>Penalidade</span>
<span>-20%</span>
</div>

<div class="farm-stat">
<span>EXP</span>
<span>-20%</span>
</div>

<div class="farm-stat">
<span>DROP</span>
<span>-20%</span>
</div>

<div class="farm-stat">
<span>Compatível</span>
<span>@afk</span>
</div>

</div>
</div>

[[File:Losango_Amarelo.png|14px]]= Sistema de Auto Ataque =

O Sistema de Auto Ataque permite automatizar combate, buffs, cura e coleta de itens enquanto o personagem permanece conectado.

<div class="farm-warning">

'''Importante'''

Ao utilizar o Sistema de Auto Ataque o jogador recebe uma penalidade de '''20% de EXP e DROP'''.

</div>

=[[File:Losango_Amarelo.png|14px]] Sistema de Auto Ataque =

O Sistema de Auto Ataque permite automatizar combate, buffs, cura e coleta de itens enquanto o personagem permanece conectado.

<div class="farm-warning">

'''Importante'''

Ao utilizar o Sistema de Auto Ataque o jogador recebe uma penalidade de '''20% de EXP e DROP'''.

</div>

==[[File:Losango_Amarelo.png|14px]] Visão Geral ==

O sistema foi desenvolvido para facilitar atividades de farm, up e coleta, permitindo maior eficiência durante longos períodos de jogo.

{| class="wikitable"
! Recurso
! Disponível
|-
| Atacar monstros
| ✓
|-
| Coletar itens
| ✓
|-
| Utilizar habilidades
| ✓
|-
| Utilizar buffs
| ✓
|-
| Utilizar cura
| ✓
|-
| Selecionar monstros
| ✓
|}

==[[File:Losango_Amarelo.png|14px]] Dispositivo Automático ==

<div class="farm-image">

[[File:dispositivo1.png|280px]]

</div>

O Dispositivo Automático é responsável por habilitar todas as funções do sistema.

O item permite:

* Atacar monstros
* Coletar itens
* Utilizar habilidades
* Utilizar buffs
* Utilizar consumíveis
* Selecionar monstros

<div class="clearfix"></div>

==[[File:Losango_Amarelo.png|14px]] Como Iniciar ==

<div class="farm-image">

[[File:Sem Configuraçoes do autoataque.png|280px]]

</div>

# Utilize o Dispositivo Automático
# Escolha Configurar
# Ajuste as opções desejadas
# Clique em Iniciar

<div class="clearfix"></div>

==[[File:Losango_Amarelo.png|14px]] Menu de Configurações ==

<div class="farm-image">

[[File:Configuração auto ataque.png|280px]]

</div>

{| class="wikitable"
! Categoria
! Função
|-
| Regeneração
| Controle de HP e SP
|-
| Habilidades de Ataque
| Ataques automáticos
|-
| Habilidades de Buff
| Buffs automáticos
|-
| Itens de Buff
| Consumíveis automáticos
|-
| Seleção de Monstros
| Escolha dos alvos
|-
| Teleporte
| Segurança e movimentação
|-
| Outras Configurações
| Recursos adicionais
|}

<div class="clearfix"></div>

==[[File:Losango_Amarelo.png|14px]] Regeneração ==

<div class="farm-image">

[[File:regeneraçao.png|280px]]

</div>

Controla a recuperação automática de HP e SP.

{| class="wikitable"
! Recurso
! Descrição
|-
| Auto-Cura
| Utiliza habilidades automaticamente
|-
| Poções
| Utiliza consumíveis de HP/SP
|-
| Sentar
| Recuperação natural
|}

<div class="clearfix"></div>

==[[File:Losango_Amarelo.png|14px]] Seleção de Monstros ==

<div class="farm-image">

[[File:seleçaomonstros.png|280px]]

</div>

Escolha exatamente quais monstros serão atacados.

<pre>
(ON) Wolf
(OFF) Steel Chonchon
(ON) Argos
</pre>

* MVPs nunca serão atacados.

<div class="clearfix"></div>

==[[File:Losango_Amarelo.png|14px]] Teleporte ==

<div class="farm-image">

[[File:teleporte22.png|350px]]

</div>

{| class="wikitable"
! Configuração
! Função
|-
| Asa de Mosca
| Teleporte por item
|-
| Habilidade Teleporte
| Teleporte por habilidade
|-
| HP Emergencial
| Fuga automática
|-
| Sem Monstros
| Busca nova região
|-
| Excesso de Monstros
| Evita áreas perigosas
|}

<div class="clearfix"></div>

==[[File:Losango_Amarelo.png|14px]] Outras Configurações ==

<div class="farm-image">

[[File:outrasconf.png|350px]]

</div>

* Amuleto de Siegfried
* Retornar ao ponto salvo
* Priorizar itens
* Ataque básico
* Ignorar monstros agressivos

<div class="clearfix"></div>

==[[File:Losango_Amarelo.png|14px]] Checklist ==

<div class="farm-success">

✓ Dispositivo válido

✓ Mapa permitido

✓ Poções configuradas

✓ Buffs configurados

✓ Teleporte configurado

✓ Monstros selecionados

</div>

== Dispositivo Automático ==

<div class="farm-image">

[[File:dispositivo1.png|280px]]

</div>

O Dispositivo Automático é responsável por habilitar todas as funções do sistema.

O item permite:

* Atacar monstros
* Coletar itens
* Utilizar habilidades
* Utilizar buffs
* Utilizar consumíveis
* Selecionar monstros

<div class="clearfix"></div>

== Como Iniciar ==

<div class="farm-image">

[[File:Sem Configuraçoes do autoataque.png|280px]]

</div>

# Utilize o Dispositivo Automático
# Escolha Configurar
# Ajuste as opções desejadas
# Clique em Iniciar

<div class="clearfix"></div>

== Menu de Configurações ==

<div class="farm-image">

[[File:Configuração auto ataque.png|280px]]

</div>

{| class="wikitable"
! Categoria
! Função
|-
| Regeneração
| Controle de HP e SP
|-
| Habilidades de Ataque
| Ataques automáticos
|-
| Habilidades de Buff
| Buffs automáticos
|-
| Itens de Buff
| Consumíveis automáticos
|-
| Seleção de Monstros
| Escolha dos alvos
|-
| Teleporte
| Segurança e movimentação
|-
| Outras Configurações
| Recursos adicionais
|}

<div class="clearfix"></div>

== Regeneração ==

<div class="farm-image">

[[File:regeneraçao.png|280px]]

</div>

Controla a recuperação automática de HP e SP.

{| class="wikitable"
! Recurso
! Descrição
|-
| Auto-Cura
| Utiliza habilidades automaticamente
|-
| Poções
| Utiliza consumíveis de HP/SP
|-
| Sentar
| Recuperação natural
|}

<div class="clearfix"></div>

== Seleção de Monstros ==

<div class="farm-image">

[[File:seleçaomonstros.png|280px]]

</div>

Escolha exatamente quais monstros serão atacados.

<pre>
(ON) Wolf
(OFF) Steel Chonchon
(ON) Argos
</pre>

* MVPs nunca serão atacados.

<div class="clearfix"></div>

== Teleporte ==

<div class="farm-image">

[[File:teleporte22.png|350px]]

</div>

{| class="wikitable"
! Configuração
! Função
|-
| Asa de Mosca
| Teleporte por item
|-
| Habilidade Teleporte
| Teleporte por habilidade
|-
| HP Emergencial
| Fuga automática
|-
| Sem Monstros
| Busca nova região
|-
| Excesso de Monstros
| Evita áreas perigosas
|}

<div class="clearfix"></div>

== Outras Configurações ==

<div class="farm-image">

[[File:outrasconf.png|350px]]

</div>

* Amuleto de Siegfried
* Retornar ao ponto salvo
* Priorizar itens
* Ataque básico
* Ignorar monstros agressivos

<div class="clearfix"></div>

== Checklist ==

<div class="farm-success">

✓ Dispositivo válido

✓ Mapa permitido

✓ Poções configuradas

✓ Buffs configurados

✓ Teleporte configurado

✓ Monstros selecionados

</div>

Auto Ataque

2026-06-10T14:51:29Z

Adm.mayuka: /* Sistema de Auto Ataque */

MediaWiki:Common.css

2026-06-10T14:45:35Z

Adm.mayuka:

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

/* =============================================
AJUSTE FINAL DO LOGO SIDEBAR
============================================= */

/* Força o tamanho no contêiner principal do logo */
#p-logo, .mw-wiki-logo, .ps-logo {
width: 140px ; /* Ajuste essa largura para caber na sua barra lateral */
height: auto ;
display: block ;
margin: 10px auto ;
padding: 0 ;
}

/* Força a imagem dentro do logo a não estourar */
#p-logo a, .mw-wiki-logo img {
background-size: contain ;
width: 100% ;
height: 140px ; /* Ajuste a altura proporcional aqui */
}

/* Se o logo estiver como imagem fixa na tag <img> */
#p-logo img {
max-width: 140px ;
height: auto ;
}
/* -----------------------------
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
----------------------------- */
.farmland-container {
max-width: 1200px; /* LARGURA MÁXIMA IGUAL AO PRINT */
margin: 0 auto; /* CENTRALIZA CONTAINER */
padding: 10px; /* ESPAÇAMENTO INTERNO PADRÃO */
}

/* =========================
BANNER PRINCIPAL
========================= */
.farmland-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
========================= */
.farmland-event-button {
text-align: center; /* CENTRALIZA O BOTÃO */
margin-bottom: 25px; /* ESPAÇAMENTO ABAIXO DO BOTÃO */
}

.farmland-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 */
}

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

/* =====================================
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 */
.farmland-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
========================= */
.farmland-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
========================= */
.farmland-guide {
display: flex; /* FLEX PARA ÍCONES + TEXTO */
align-items: center; /* CENTRALIZA VERTICALMENTE */
font-size: 14px; /* TAMANHO DA FONTE PADRÃO */
}

/* Ícones dentro das guias */
.farmland-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 */
}

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

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

/* Efeito hover do card */
.farmland-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 */
.farmland-card .img {
transition: transform 0.25s ease; /* TRANSIÇÃO SUAVE */
}

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

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

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

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

/* Item individual */
.farmland-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 */
.farmland-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 */
.farmland-exclusive-img {
height: 140px; /* ALTURA IGUAL AO PRINT */
background: #dcdcdc; /* FUNDO CINZA CLARO */
}

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

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

/* Container geral de cards */
.farmland-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 */
.farmland-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 */
.farmland-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 */
.farmland-card a {
display: block;
padding: 8px 4px; /* PADDING INTERNO */
font-weight: bold; /* TEXTO NEGRITO */
color: #0033cc; /* COR DO LINK */
text-decoration: none; /* REMOVE SUBLINHADO */
}

.farmland-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 – FARMLAND
=============================== */

/* 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 FARMLAND */
/* ================================================= */

/* -----------------------------
RESET E CONTAINER
----------------------------- */
.farmland-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
----------------------------- */
.farmland-page-title {
text-align: center; /* CENTRALIZA TEXTO */
margin-bottom: 40px; /* MARGEM INFERIOR */
padding-bottom: 20px; /* PADDING INFERIOR */
border-bottom: 2px solid #e0e0e0; /* LINHA SEPARADORA */
}

.farmland-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 */
}

.farmland-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)
----------------------------- */
.farmland-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) {
.farmland-main-grid {
grid-template-columns: repeat(2, 1fr); /* 2 COLUNAS EM TELAS MÉDIAS */
}
}

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

/* -----------------------------
CARD DA CLASSE (ESTILO SITE)
----------------------------- */
.farmland-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 */
}

.farmland-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 */
}

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

/* -----------------------------
IMAGEM DO CARD
----------------------------- */
.farmland-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
----------------------------- */
.farmland-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 */
}

.farmland-class-card:hover .farmland-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
----------------------------- */
.farmland-class-name {
padding: 20px; /* PADDING INTERNO */
text-align: center; /* CENTRALIZA TEXTO */
background: white; /* FUNDO BRANCO */
border-top: 1px solid #f1f1f1; /* LINHA SEPARADORA */
}

.farmland-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 */
}

.farmland-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 */
.farmland-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: farmlandSlideDown 0.4s ease-out; /* ANIMAÇÃO AO ABRIR */
}

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

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

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

/* Título da expansão */
.farmland-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 */
.farmland-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 */
.farmland-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 */
.farmland-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 */
.farmland-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 */
.farmland-subclass-image {
flex-shrink: 0; /* NÃO REDUZIR */
}

.farmland-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 */
.farmland-subclass-card:hover .farmland-subclass-img {
transform: scale(1.1); /* LEVE AMPLIAÇÃO */
}

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

/* Título da sub-classe */
.farmland-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 */
.farmland-subclass-info h3 a {
color: #2c3e50; /* COR PADRÃO */
text-decoration: none; /* SEM SUBLINHADO */
transition: color 0.2s; /* TRANSIÇÃO DE COR */
}

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

/* Descrição da sub-classe */
.farmland-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
----------------------------- */
.farmland-class-image {
position: relative; /* Necessário para pseudo-elemento de shimmer */
}

.farmland-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
----------------------------- */
.farmland-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)
----------------------------- */
.farmland-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;
}

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

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

/* TABLETS MENORES */
@media (max-width: 768px) {
.farmland-class-image {
height: 180px;
padding: 15px;
}

.farmland-img-hover {
max-height: 150px;
}

.farmland-expansion-content {
padding: 20px;
}

.farmland-subclass-card {
flex-direction: column;
text-align: center;
gap: 15px;
}
}

/* CELULARES */
@media (max-width: 480px) {
.farmland-classes-system {
padding: 0 10px;
}

.farmland-page-title h1 {
font-size: 24px;
}

.farmland-page-title p {
font-size: 14px;
}

.farmland-main-grid {
gap: 15px;
}

.farmland-class-image {
height: 150px;
}

.farmland-img-hover {
max-height: 120px;
}

.farmland-class-name {
padding: 15px;
}

.farmland-class-title {
font-size: 18px;
}

.farmland-subclasses-grid {
grid-template-columns: 1fr;
}
}

/* DARK MODE SUPPORT (OPCIONAL) */
@media (prefers-color-scheme: dark) {
.farmland-classes-system {
background: transparent;
}

.farmland-class-card,
.farmland-expansion-area,
.farmland-subclass-card {
background: #2d3748;
border-color: #4a5568;
}

.farmland-class-name,
.farmland-expansion-content {
background: #2d3748;
}

.farmland-class-title,
.farmland-expansion-title,
.farmland-subclass-info h3 a {
color: #e2e8f0;
}

.farmland-class-subtitle,
.farmland-expansion-description,
.farmland-subclass-info p {
color: #a0aec0;
}

.farmland-class-image {
background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
}

.farmland-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 – FARMLAND */
/* ================================================= */

/* 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 */
/* ================================================= */
.farmland-attr-table {
width: 100%;
border-collapse: collapse;
background: #ffffff;
margin: 20px 0 30px;
font-size: 14px;
}

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

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

/* Hover nas linhas da tabela */
.farmland-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 */
/* ================================================= */
.farmland-attr-table {
width: 100%;
border-collapse: collapse;
background: #ffffff;
margin: 20px 0 30px;
font-size: 14px;
}

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

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

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

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

/* Card individual */
.farmland-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 */
.farmland-card-img {
width: 100%;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

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

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

.farmland-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 */
.farmland-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 */
.farmland-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 */
.farmland-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 */
.farmland-carousel-track::-webkit-scrollbar {
display: none;
}

/* Imagens dentro do track */
.farmland-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);
}

.farmland-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-farmland {
width: 200px; /* Largura do container */
height: 300px; /* Altura ideal para artes de Ragnarok */
margin: 0 auto ; /* 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;
}

/* Container para centralizar os cards principais */
.farmland-main-cards-container {
display: flex;
justify-content: center; /* Centraliza horizontalmente */
align-items: center; /* Alinha verticalmente se houver alturas diferentes */
flex-wrap: wrap; /* Faz os cards pularem de linha em telas menores */
gap: 15px; /* Espaçamento entre os cards */
max-width: 1000px; /* MESMA LARGURA do seu hr-guides-wrapper */
margin: 20px auto; /* Centraliza o bloco na página e dá espaçamento vertical */
}

/* Garante que as imagens dentro dos cards fiquem responsivas */
.farmland-main-cards-container .img-hover img {
display: block;
height: auto;
border-radius: 4px; /* Opcional: deixa as bordas levemente arredondadas */
}

/* Container que agrupa o título e os cards de destaque */
.farmland-highlights-wrapper {
max-width: 1000px; /* Alinhado com o Painel de Conhecimento */
margin: 30px auto; /* Centraliza o bloco todo e dá espaçamento vertical */
}

/* Garante que o título "Destaques" alinhe à esquerda do bloco de 1000px ou centralize */
.farmland-highlights-wrapper .farmland-section-title {
text-align: left; /* Mantenha 'center' se preferir o título no meio */
margin-bottom: 15px;
padding-left: 5px;
}

/* Grid que centraliza os cards de destaque */
.farmland-highlights-grid {
display: flex;
gap: 15px;
flex-wrap: wrap;
justify-content: center; /* ESTA LINHA FAZ A CENTRALIZAÇÃO */
}

/* Ajuste fino para os cards de destaque */
.farmland-highlights-grid .img-hover img {
border-radius: 6px;
transition: transform 0.3s ease;
}

.farmland-main-cards-container {
display: flex;
justify-content: center; /* Tenta centralizar primeiro */
flex-wrap: wrap;
gap: 20px;
max-width: 1000px;
margin: 20px 25%; /* O 'auto' centraliza o bloco inteiro na página */

/* AJUSTE FINO: Se ainda parecer para a esquerda,
aumente o padding-left abaixo para empurrar para a direita */
padding-left: 10px;
box-sizing: border-box;
}
/* --- BOTAO SUBIR TOPO DA PAGINA --- */

/* Botão Voltar ao Topo */
#back-to-top {
display: none; /* Escondido por padrão */
position: fixed;
bottom: 20px;
right: 20px;
z-index: 100;
padding: 10px 15px;
background-color: #3366cc;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

#back-to-top:hover {
background-color: #2a4b8d;
text-decoration: none;
}
.hr-guides-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
margin-top: 10px;
}

.hr-guide-item {
background: linear-gradient(145deg, #1e1e1e, #2a2a2a);
border-radius: 12px;
padding: 12px;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.25s ease;
box-shadow: 0 4px 10px rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
}

.hr-guide-item img {
transition: transform 0.25s ease;
}

.hr-guide-item a {
color: #fff;
font-weight: 600;
text-decoration: none;
}

.hr-guide-item:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 10px 25px rgba(0,0,0,0.6);
background: linear-gradient(145deg, #2a2a2a, #3a3a3a);
border: 1px solid rgba(255,255,255,0.1);
}

.hr-guide-item:hover img {
transform: scale(1.15) rotate(5deg);
}

.hr-guide-item:hover a {
color: #00bfff;
}

/* --- END - CONTINUA --- */

/* =========================
GUIAS – Farmland
========================= */

/* 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;
}

/* TESTE PAGINA TESTE SCRIPTS*/

.ro-wave-wrapper {
text-align: center;
width: 100%;
margin: 80px auto;
display: block;
}

.ro-item-wave {
display: inline-block ;
vertical-align: top ;
margin: 0 -8px ;
}

.ro-circle-wave {
width: 80px ;
height: 80px ;
border: 3px solid #f38d5f ;
border-radius: 50% ;
background: #fff ;
overflow: hidden ;
position: relative ;
display: block ;
}

.ro-circle-wave img {
width: 100% ;
height: 100% ;
object-fit: cover ;
}

/* Ajustes de altura para o efeito de onda */
.ro-pos-1, .ro-pos-9, .ro-pos-10 { margin-top: 110px ; }
.ro-pos-2, .ro-pos-8 { margin-top: 70px ; }
.ro-pos-3, .ro-pos-7 { margin-top: 30px ; }
.ro-pos-4, .ro-pos-6 { margin-top: -10px ; }
.ro-pos-5 { margin-top: -50px ; }

/* Container de largura total controlada */
.everlight-nav-container {
display: flex;
justify-content: center;
flex-wrap: wrap; /* Permite quebrar linha se a tela for pequena */
gap: 8px; /* Espaço menor entre botões */
margin: 10px 0;
width: 100%; /* Garante que não ultrapasse o limite do conteúdo */
box-sizing: border-box;
}

/* Card Profissional Compacto */
.nav-card-compact {
background: linear-gradient(180deg, #1d1d1d 0%, #0a0a0a 100%);
border: 1px solid #333;
border-radius: 4px;
padding: 6px 12px; /* Reduzido para ficar do tamanho do anterior */
flex: 1; /* Distribui o espaço igualmente */
min-width: 110px; /* Tamanho mínimo para não esmagar o texto */
max-width: 160px; /* Tamanho máximo para não vazar */
transition: all 0.3s ease;
text-align: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.nav-card-compact a {
color: #efefef !important;
text-decoration: none !important;
font-weight: bold;
font-size: 0.85em; /* Fonte levemente menor para caber melhor */
display: block;
white-space: nowrap; /* Impede que o texto quebre linha dentro do botão */
}

/* Hover mais discreto para manter o profissionalismo */
.nav-card-compact:hover {
background: #252525;
transform: translateY(-2px);
border-color: #666;
box-shadow: 0 4px 8px rgba(0,0,0,0.6);
}

/* ===========================
CARROSSEL - EQUILÍBRIO (TOPO + BASE VISÍVEL)
=========================== */

#farmlandCarousel {
position: relative;
width: 100%;
max-width: 1280px;
margin: 25px auto;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.45);
background: transparent;
padding: 0;
border: none;
}

.carousel-wrapper,
.carousel-container {
width: 100%;
margin: 0;
padding: 0;
}

.carousel-container {
display: flex;
transition: transform 0.6s cubic-bezier(0.32, 0.72, 0, 1);
flex-wrap: nowrap;
}

/* Slide */
.carousel-slide {
flex: 0 0 100%;
min-width: 100%;
width: 100%;
height: 620px; /* ← Aumentei a altura (importante) */
display: flex;
align-items: center; /* Centralizado verticalmente (melhor equilíbrio) */
justify-content: center;
overflow: hidden;
position: relative;
background: #000;
}

/* Imagem - bom enquadramento */
.carousel-slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 25%; /* ← Ajuste fino: 20% ~ 35% */
display: block;
}

/* Setas */
.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.85);
color: #111;
border: none;
width: 56px;
height: 56px;
border-radius: 50%;
cursor: pointer;
z-index: 10;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
}

.carousel-arrow.left { left: 20px; }
.carousel-arrow.right { right: 20px; }

/* Dots */
.carousel-dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 20;
padding: 8px 20px;
background: rgba(0, 0, 0, 0.55);
border-radius: 30px;
display: flex;
gap: 8px;
}

.carousel-dots .dot {
width: 13px;
height: 13px;
background: rgba(255,255,255,0.75);
border-radius: 50%;
cursor: pointer;
}

.carousel-dots .dot.active {
background: #00eeff;
transform: scale(1.4);
}

/* === TRAVA A ALTURA DA CAIXA PRETA + ÍCONE GRANDE === */
.hr-guide-item {
display: flex !important;
align-items: center !important;
height: 54px !important; /* ← ALTURA FIXA da caixa preta */
min-height: 54px !important;
max-height: 54px !important;
padding: 6px 12px !important;
box-sizing: border-box !important;
overflow: hidden !important; /* evita estourar */
}

/* === IMAGEM MAIOR SEM BORRAR === */
.hr-guide-item img {
width: 64px !important; /* ← Tamanho da imagem */
height: 64px !important;
object-fit: contain !important;
flex-shrink: 0 !important;
margin-right: 12px !important;
margin-top: -5px !important; /* sobe um pouco a imagem */
image-rendering: auto !important;
-webkit-filter: contrast(1.08) !important; /* melhora nitidez */
}

.top-banner {
width: 100%;
max-width: 100%;
overflow: hidden;
}

.top-banner img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
display: block;
}

/* ==================================================
INFOBOX PREMIUM FARMLAND
Preto Fosco + Dourado
================================================== */

.farm-infobox{

float:right;

width:340px;

margin-left:30px;

margin-bottom:25px;

border-radius:12px;

overflow:hidden;

border:1px solid #8f6b19;

background:#1e1e1e;

color:#e6e6e6;

box-shadow:
0 0 20px rgba(0,0,0,.30),
0 0 10px rgba(212,175,55,.10);

}

/* Cabeçalho */

.farm-header{

background:linear-gradient(
180deg,
#2f2f2f 0%,
#1a1a1a 45%,
#6f5412 100%
);

color:#f1d37a;

text-align:center;

font-size:24px;

font-weight:bold;

letter-spacing:.5px;

padding:22px;

text-shadow:
1px 1px 3px rgba(0,0,0,.8);

border-bottom:1px solid #8f6b19;

}

/* Conteúdo */

.farm-content{

padding:0;

background:#1e1e1e;

}

/* Linhas */

.farm-stat{

display:flex;

justify-content:space-between;

align-items:center;

padding:16px 18px;

border-bottom:1px solid rgba(212,175,55,.10);

transition:.2s;

}

.farm-stat:hover{

background:#262626;

}

/* Texto da esquerda */

.farm-stat span:first-child{

color:#c8c8c8;

font-weight:500;

}

/* Texto da direita */

.farm-stat span:last-child{

color:#f1d37a;

font-weight:bold;

}

/* Última linha */

.farm-stat:last-child{

border-bottom:none;

}

MediaWiki:Common.css

2026-06-10T14:43:00Z

Adm.mayuka:

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

/* =============================================
AJUSTE FINAL DO LOGO SIDEBAR
============================================= */

/* Força o tamanho no contêiner principal do logo */
#p-logo, .mw-wiki-logo, .ps-logo {
width: 140px ; /* Ajuste essa largura para caber na sua barra lateral */
height: auto ;
display: block ;
margin: 10px auto ;
padding: 0 ;
}

/* Força a imagem dentro do logo a não estourar */
#p-logo a, .mw-wiki-logo img {
background-size: contain ;
width: 100% ;
height: 140px ; /* Ajuste a altura proporcional aqui */
}

/* Se o logo estiver como imagem fixa na tag <img> */
#p-logo img {
max-width: 140px ;
height: auto ;
}
/* -----------------------------
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
----------------------------- */
.farmland-container {
max-width: 1200px; /* LARGURA MÁXIMA IGUAL AO PRINT */
margin: 0 auto; /* CENTRALIZA CONTAINER */
padding: 10px; /* ESPAÇAMENTO INTERNO PADRÃO */
}

/* =========================
BANNER PRINCIPAL
========================= */
.farmland-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
========================= */
.farmland-event-button {
text-align: center; /* CENTRALIZA O BOTÃO */
margin-bottom: 25px; /* ESPAÇAMENTO ABAIXO DO BOTÃO */
}

.farmland-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 */
}

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

/* =====================================
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 */
.farmland-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
========================= */
.farmland-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
========================= */
.farmland-guide {
display: flex; /* FLEX PARA ÍCONES + TEXTO */
align-items: center; /* CENTRALIZA VERTICALMENTE */
font-size: 14px; /* TAMANHO DA FONTE PADRÃO */
}

/* Ícones dentro das guias */
.farmland-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 */
}

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

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

/* Efeito hover do card */
.farmland-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 */
.farmland-card .img {
transition: transform 0.25s ease; /* TRANSIÇÃO SUAVE */
}

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

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

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

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

/* Item individual */
.farmland-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 */
.farmland-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 */
.farmland-exclusive-img {
height: 140px; /* ALTURA IGUAL AO PRINT */
background: #dcdcdc; /* FUNDO CINZA CLARO */
}

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

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

/* Container geral de cards */
.farmland-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 */
.farmland-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 */
.farmland-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 */
.farmland-card a {
display: block;
padding: 8px 4px; /* PADDING INTERNO */
font-weight: bold; /* TEXTO NEGRITO */
color: #0033cc; /* COR DO LINK */
text-decoration: none; /* REMOVE SUBLINHADO */
}

.farmland-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 – FARMLAND
=============================== */

/* 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 FARMLAND */
/* ================================================= */

/* -----------------------------
RESET E CONTAINER
----------------------------- */
.farmland-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
----------------------------- */
.farmland-page-title {
text-align: center; /* CENTRALIZA TEXTO */
margin-bottom: 40px; /* MARGEM INFERIOR */
padding-bottom: 20px; /* PADDING INFERIOR */
border-bottom: 2px solid #e0e0e0; /* LINHA SEPARADORA */
}

.farmland-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 */
}

.farmland-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)
----------------------------- */
.farmland-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) {
.farmland-main-grid {
grid-template-columns: repeat(2, 1fr); /* 2 COLUNAS EM TELAS MÉDIAS */
}
}

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

/* -----------------------------
CARD DA CLASSE (ESTILO SITE)
----------------------------- */
.farmland-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 */
}

.farmland-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 */
}

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

/* -----------------------------
IMAGEM DO CARD
----------------------------- */
.farmland-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
----------------------------- */
.farmland-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 */
}

.farmland-class-card:hover .farmland-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
----------------------------- */
.farmland-class-name {
padding: 20px; /* PADDING INTERNO */
text-align: center; /* CENTRALIZA TEXTO */
background: white; /* FUNDO BRANCO */
border-top: 1px solid #f1f1f1; /* LINHA SEPARADORA */
}

.farmland-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 */
}

.farmland-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 */
.farmland-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: farmlandSlideDown 0.4s ease-out; /* ANIMAÇÃO AO ABRIR */
}

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

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

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

/* Título da expansão */
.farmland-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 */
.farmland-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 */
.farmland-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 */
.farmland-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 */
.farmland-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 */
.farmland-subclass-image {
flex-shrink: 0; /* NÃO REDUZIR */
}

.farmland-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 */
.farmland-subclass-card:hover .farmland-subclass-img {
transform: scale(1.1); /* LEVE AMPLIAÇÃO */
}

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

/* Título da sub-classe */
.farmland-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 */
.farmland-subclass-info h3 a {
color: #2c3e50; /* COR PADRÃO */
text-decoration: none; /* SEM SUBLINHADO */
transition: color 0.2s; /* TRANSIÇÃO DE COR */
}

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

/* Descrição da sub-classe */
.farmland-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
----------------------------- */
.farmland-class-image {
position: relative; /* Necessário para pseudo-elemento de shimmer */
}

.farmland-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
----------------------------- */
.farmland-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)
----------------------------- */
.farmland-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;
}

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

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

/* TABLETS MENORES */
@media (max-width: 768px) {
.farmland-class-image {
height: 180px;
padding: 15px;
}

.farmland-img-hover {
max-height: 150px;
}

.farmland-expansion-content {
padding: 20px;
}

.farmland-subclass-card {
flex-direction: column;
text-align: center;
gap: 15px;
}
}

/* CELULARES */
@media (max-width: 480px) {
.farmland-classes-system {
padding: 0 10px;
}

.farmland-page-title h1 {
font-size: 24px;
}

.farmland-page-title p {
font-size: 14px;
}

.farmland-main-grid {
gap: 15px;
}

.farmland-class-image {
height: 150px;
}

.farmland-img-hover {
max-height: 120px;
}

.farmland-class-name {
padding: 15px;
}

.farmland-class-title {
font-size: 18px;
}

.farmland-subclasses-grid {
grid-template-columns: 1fr;
}
}

/* DARK MODE SUPPORT (OPCIONAL) */
@media (prefers-color-scheme: dark) {
.farmland-classes-system {
background: transparent;
}

.farmland-class-card,
.farmland-expansion-area,
.farmland-subclass-card {
background: #2d3748;
border-color: #4a5568;
}

.farmland-class-name,
.farmland-expansion-content {
background: #2d3748;
}

.farmland-class-title,
.farmland-expansion-title,
.farmland-subclass-info h3 a {
color: #e2e8f0;
}

.farmland-class-subtitle,
.farmland-expansion-description,
.farmland-subclass-info p {
color: #a0aec0;
}

.farmland-class-image {
background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
}

.farmland-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 – FARMLAND */
/* ================================================= */

/* 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 */
/* ================================================= */
.farmland-attr-table {
width: 100%;
border-collapse: collapse;
background: #ffffff;
margin: 20px 0 30px;
font-size: 14px;
}

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

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

/* Hover nas linhas da tabela */
.farmland-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 */
/* ================================================= */
.farmland-attr-table {
width: 100%;
border-collapse: collapse;
background: #ffffff;
margin: 20px 0 30px;
font-size: 14px;
}

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

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

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

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

/* Card individual */
.farmland-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 */
.farmland-card-img {
width: 100%;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

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

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

.farmland-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 */
.farmland-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 */
.farmland-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 */
.farmland-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 */
.farmland-carousel-track::-webkit-scrollbar {
display: none;
}

/* Imagens dentro do track */
.farmland-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);
}

.farmland-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-farmland {
width: 200px; /* Largura do container */
height: 300px; /* Altura ideal para artes de Ragnarok */
margin: 0 auto ; /* 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;
}

/* Container para centralizar os cards principais */
.farmland-main-cards-container {
display: flex;
justify-content: center; /* Centraliza horizontalmente */
align-items: center; /* Alinha verticalmente se houver alturas diferentes */
flex-wrap: wrap; /* Faz os cards pularem de linha em telas menores */
gap: 15px; /* Espaçamento entre os cards */
max-width: 1000px; /* MESMA LARGURA do seu hr-guides-wrapper */
margin: 20px auto; /* Centraliza o bloco na página e dá espaçamento vertical */
}

/* Garante que as imagens dentro dos cards fiquem responsivas */
.farmland-main-cards-container .img-hover img {
display: block;
height: auto;
border-radius: 4px; /* Opcional: deixa as bordas levemente arredondadas */
}

/* Container que agrupa o título e os cards de destaque */
.farmland-highlights-wrapper {
max-width: 1000px; /* Alinhado com o Painel de Conhecimento */
margin: 30px auto; /* Centraliza o bloco todo e dá espaçamento vertical */
}

/* Garante que o título "Destaques" alinhe à esquerda do bloco de 1000px ou centralize */
.farmland-highlights-wrapper .farmland-section-title {
text-align: left; /* Mantenha 'center' se preferir o título no meio */
margin-bottom: 15px;
padding-left: 5px;
}

/* Grid que centraliza os cards de destaque */
.farmland-highlights-grid {
display: flex;
gap: 15px;
flex-wrap: wrap;
justify-content: center; /* ESTA LINHA FAZ A CENTRALIZAÇÃO */
}

/* Ajuste fino para os cards de destaque */
.farmland-highlights-grid .img-hover img {
border-radius: 6px;
transition: transform 0.3s ease;
}

.farmland-main-cards-container {
display: flex;
justify-content: center; /* Tenta centralizar primeiro */
flex-wrap: wrap;
gap: 20px;
max-width: 1000px;
margin: 20px 25%; /* O 'auto' centraliza o bloco inteiro na página */

/* AJUSTE FINO: Se ainda parecer para a esquerda,
aumente o padding-left abaixo para empurrar para a direita */
padding-left: 10px;
box-sizing: border-box;
}
/* --- BOTAO SUBIR TOPO DA PAGINA --- */

/* Botão Voltar ao Topo */
#back-to-top {
display: none; /* Escondido por padrão */
position: fixed;
bottom: 20px;
right: 20px;
z-index: 100;
padding: 10px 15px;
background-color: #3366cc;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

#back-to-top:hover {
background-color: #2a4b8d;
text-decoration: none;
}
.hr-guides-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
margin-top: 10px;
}

.hr-guide-item {
background: linear-gradient(145deg, #1e1e1e, #2a2a2a);
border-radius: 12px;
padding: 12px;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.25s ease;
box-shadow: 0 4px 10px rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
}

.hr-guide-item img {
transition: transform 0.25s ease;
}

.hr-guide-item a {
color: #fff;
font-weight: 600;
text-decoration: none;
}

.hr-guide-item:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 10px 25px rgba(0,0,0,0.6);
background: linear-gradient(145deg, #2a2a2a, #3a3a3a);
border: 1px solid rgba(255,255,255,0.1);
}

.hr-guide-item:hover img {
transform: scale(1.15) rotate(5deg);
}

.hr-guide-item:hover a {
color: #00bfff;
}

/* --- END - CONTINUA --- */

/* =========================
GUIAS – Farmland
========================= */

/* 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;
}

/* TESTE PAGINA TESTE SCRIPTS*/

.ro-wave-wrapper {
text-align: center;
width: 100%;
margin: 80px auto;
display: block;
}

.ro-item-wave {
display: inline-block ;
vertical-align: top ;
margin: 0 -8px ;
}

.ro-circle-wave {
width: 80px ;
height: 80px ;
border: 3px solid #f38d5f ;
border-radius: 50% ;
background: #fff ;
overflow: hidden ;
position: relative ;
display: block ;
}

.ro-circle-wave img {
width: 100% ;
height: 100% ;
object-fit: cover ;
}

/* Ajustes de altura para o efeito de onda */
.ro-pos-1, .ro-pos-9, .ro-pos-10 { margin-top: 110px ; }
.ro-pos-2, .ro-pos-8 { margin-top: 70px ; }
.ro-pos-3, .ro-pos-7 { margin-top: 30px ; }
.ro-pos-4, .ro-pos-6 { margin-top: -10px ; }
.ro-pos-5 { margin-top: -50px ; }

/* Container de largura total controlada */
.everlight-nav-container {
display: flex;
justify-content: center;
flex-wrap: wrap; /* Permite quebrar linha se a tela for pequena */
gap: 8px; /* Espaço menor entre botões */
margin: 10px 0;
width: 100%; /* Garante que não ultrapasse o limite do conteúdo */
box-sizing: border-box;
}

/* Card Profissional Compacto */
.nav-card-compact {
background: linear-gradient(180deg, #1d1d1d 0%, #0a0a0a 100%);
border: 1px solid #333;
border-radius: 4px;
padding: 6px 12px; /* Reduzido para ficar do tamanho do anterior */
flex: 1; /* Distribui o espaço igualmente */
min-width: 110px; /* Tamanho mínimo para não esmagar o texto */
max-width: 160px; /* Tamanho máximo para não vazar */
transition: all 0.3s ease;
text-align: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.nav-card-compact a {
color: #efefef !important;
text-decoration: none !important;
font-weight: bold;
font-size: 0.85em; /* Fonte levemente menor para caber melhor */
display: block;
white-space: nowrap; /* Impede que o texto quebre linha dentro do botão */
}

/* Hover mais discreto para manter o profissionalismo */
.nav-card-compact:hover {
background: #252525;
transform: translateY(-2px);
border-color: #666;
box-shadow: 0 4px 8px rgba(0,0,0,0.6);
}

/* ===========================
CARROSSEL - EQUILÍBRIO (TOPO + BASE VISÍVEL)
=========================== */

#farmlandCarousel {
position: relative;
width: 100%;
max-width: 1280px;
margin: 25px auto;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.45);
background: transparent;
padding: 0;
border: none;
}

.carousel-wrapper,
.carousel-container {
width: 100%;
margin: 0;
padding: 0;
}

.carousel-container {
display: flex;
transition: transform 0.6s cubic-bezier(0.32, 0.72, 0, 1);
flex-wrap: nowrap;
}

/* Slide */
.carousel-slide {
flex: 0 0 100%;
min-width: 100%;
width: 100%;
height: 620px; /* ← Aumentei a altura (importante) */
display: flex;
align-items: center; /* Centralizado verticalmente (melhor equilíbrio) */
justify-content: center;
overflow: hidden;
position: relative;
background: #000;
}

/* Imagem - bom enquadramento */
.carousel-slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 25%; /* ← Ajuste fino: 20% ~ 35% */
display: block;
}

/* Setas */
.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.85);
color: #111;
border: none;
width: 56px;
height: 56px;
border-radius: 50%;
cursor: pointer;
z-index: 10;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
}

.carousel-arrow.left { left: 20px; }
.carousel-arrow.right { right: 20px; }

/* Dots */
.carousel-dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 20;
padding: 8px 20px;
background: rgba(0, 0, 0, 0.55);
border-radius: 30px;
display: flex;
gap: 8px;
}

.carousel-dots .dot {
width: 13px;
height: 13px;
background: rgba(255,255,255,0.75);
border-radius: 50%;
cursor: pointer;
}

.carousel-dots .dot.active {
background: #00eeff;
transform: scale(1.4);
}

/* === TRAVA A ALTURA DA CAIXA PRETA + ÍCONE GRANDE === */
.hr-guide-item {
display: flex !important;
align-items: center !important;
height: 54px !important; /* ← ALTURA FIXA da caixa preta */
min-height: 54px !important;
max-height: 54px !important;
padding: 6px 12px !important;
box-sizing: border-box !important;
overflow: hidden !important; /* evita estourar */
}

/* === IMAGEM MAIOR SEM BORRAR === */
.hr-guide-item img {
width: 64px !important; /* ← Tamanho da imagem */
height: 64px !important;
object-fit: contain !important;
flex-shrink: 0 !important;
margin-right: 12px !important;
margin-top: -5px !important; /* sobe um pouco a imagem */
image-rendering: auto !important;
-webkit-filter: contrast(1.08) !important; /* melhora nitidez */
}

.top-banner {
width: 100%;
max-width: 100%;
overflow: hidden;
}

.top-banner img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
display: block;
}

.farm-panel{

background:linear-gradient(
180deg,
#2a2a2a,
#1c1c1c
);

border:1px solid #5f4b17;

border-radius:12px;

overflow:hidden;

margin-bottom:25px;

box-shadow:0 4px 15px rgba(0,0,0,.25);

}

.farm-panel-header{

background:linear-gradient(
90deg,
#111,
#2c2c2c,
#6b5310
);

color:#f3d57b;

font-size:28px;

font-weight:bold;

padding:18px 25px;
}

.farm-panel-body{

padding:20px;

color:#ddd;
}
/* =======================================
FARMLAND DOCUMENTAÇÃO
======================================= */

.mw-parser-output{
max-width:1200px;
}

/* Titulo principal */

.firstHeading{
font-size:42px;
font-weight:700;
color:#2b2b2b;
border-bottom:4px solid #b8860b;
padding-bottom:10px;
}

/* Seções */

h2{
margin-top:50px;
padding-bottom:8px;
border-bottom:2px solid #d4af37;
}

/* Subseções */

h3{
color:#7d6117;
}

/* Imagens */

.thumb{
margin-bottom:20px !important;
}

.thumb img{
border-radius:8px;
box-shadow:0 3px 10px rgba(0,0,0,.15);
}

/* Tabelas */

.wikitable{
width:100%;
margin:20px 0;
border-collapse:collapse;
}

.wikitable th{
background:#272727 !important;
color:#d4af37 !important;
}

.wikitable td{
padding:10px;
}

/* TOC */

.toc{
border-radius:10px;
border:1px solid #ddd;
background:#fafafa;
}

MediaWiki:Common.css

2026-06-10T14:40:52Z

Adm.mayuka:

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

/* =============================================
AJUSTE FINAL DO LOGO SIDEBAR
============================================= */

/* Força o tamanho no contêiner principal do logo */
#p-logo, .mw-wiki-logo, .ps-logo {
width: 140px ; /* Ajuste essa largura para caber na sua barra lateral */
height: auto ;
display: block ;
margin: 10px auto ;
padding: 0 ;
}

/* Força a imagem dentro do logo a não estourar */
#p-logo a, .mw-wiki-logo img {
background-size: contain ;
width: 100% ;
height: 140px ; /* Ajuste a altura proporcional aqui */
}

/* Se o logo estiver como imagem fixa na tag <img> */
#p-logo img {
max-width: 140px ;
height: auto ;
}
/* -----------------------------
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
----------------------------- */
.farmland-container {
max-width: 1200px; /* LARGURA MÁXIMA IGUAL AO PRINT */
margin: 0 auto; /* CENTRALIZA CONTAINER */
padding: 10px; /* ESPAÇAMENTO INTERNO PADRÃO */
}

/* =========================
BANNER PRINCIPAL
========================= */
.farmland-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
========================= */
.farmland-event-button {
text-align: center; /* CENTRALIZA O BOTÃO */
margin-bottom: 25px; /* ESPAÇAMENTO ABAIXO DO BOTÃO */
}

.farmland-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 */
}

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

/* =====================================
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 */
.farmland-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
========================= */
.farmland-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
========================= */
.farmland-guide {
display: flex; /* FLEX PARA ÍCONES + TEXTO */
align-items: center; /* CENTRALIZA VERTICALMENTE */
font-size: 14px; /* TAMANHO DA FONTE PADRÃO */
}

/* Ícones dentro das guias */
.farmland-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 */
}

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

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

/* Efeito hover do card */
.farmland-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 */
.farmland-card .img {
transition: transform 0.25s ease; /* TRANSIÇÃO SUAVE */
}

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

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

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

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

/* Item individual */
.farmland-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 */
.farmland-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 */
.farmland-exclusive-img {
height: 140px; /* ALTURA IGUAL AO PRINT */
background: #dcdcdc; /* FUNDO CINZA CLARO */
}

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

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

/* Container geral de cards */
.farmland-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 */
.farmland-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 */
.farmland-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 */
.farmland-card a {
display: block;
padding: 8px 4px; /* PADDING INTERNO */
font-weight: bold; /* TEXTO NEGRITO */
color: #0033cc; /* COR DO LINK */
text-decoration: none; /* REMOVE SUBLINHADO */
}

.farmland-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 – FARMLAND
=============================== */

/* 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 FARMLAND */
/* ================================================= */

/* -----------------------------
RESET E CONTAINER
----------------------------- */
.farmland-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
----------------------------- */
.farmland-page-title {
text-align: center; /* CENTRALIZA TEXTO */
margin-bottom: 40px; /* MARGEM INFERIOR */
padding-bottom: 20px; /* PADDING INFERIOR */
border-bottom: 2px solid #e0e0e0; /* LINHA SEPARADORA */
}

.farmland-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 */
}

.farmland-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)
----------------------------- */
.farmland-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) {
.farmland-main-grid {
grid-template-columns: repeat(2, 1fr); /* 2 COLUNAS EM TELAS MÉDIAS */
}
}

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

/* -----------------------------
CARD DA CLASSE (ESTILO SITE)
----------------------------- */
.farmland-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 */
}

.farmland-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 */
}

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

/* -----------------------------
IMAGEM DO CARD
----------------------------- */
.farmland-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
----------------------------- */
.farmland-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 */
}

.farmland-class-card:hover .farmland-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
----------------------------- */
.farmland-class-name {
padding: 20px; /* PADDING INTERNO */
text-align: center; /* CENTRALIZA TEXTO */
background: white; /* FUNDO BRANCO */
border-top: 1px solid #f1f1f1; /* LINHA SEPARADORA */
}

.farmland-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 */
}

.farmland-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 */
.farmland-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: farmlandSlideDown 0.4s ease-out; /* ANIMAÇÃO AO ABRIR */
}

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

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

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

/* Título da expansão */
.farmland-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 */
.farmland-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 */
.farmland-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 */
.farmland-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 */
.farmland-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 */
.farmland-subclass-image {
flex-shrink: 0; /* NÃO REDUZIR */
}

.farmland-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 */
.farmland-subclass-card:hover .farmland-subclass-img {
transform: scale(1.1); /* LEVE AMPLIAÇÃO */
}

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

/* Título da sub-classe */
.farmland-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 */
.farmland-subclass-info h3 a {
color: #2c3e50; /* COR PADRÃO */
text-decoration: none; /* SEM SUBLINHADO */
transition: color 0.2s; /* TRANSIÇÃO DE COR */
}

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

/* Descrição da sub-classe */
.farmland-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
----------------------------- */
.farmland-class-image {
position: relative; /* Necessário para pseudo-elemento de shimmer */
}

.farmland-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
----------------------------- */
.farmland-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)
----------------------------- */
.farmland-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;
}

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

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

/* TABLETS MENORES */
@media (max-width: 768px) {
.farmland-class-image {
height: 180px;
padding: 15px;
}

.farmland-img-hover {
max-height: 150px;
}

.farmland-expansion-content {
padding: 20px;
}

.farmland-subclass-card {
flex-direction: column;
text-align: center;
gap: 15px;
}
}

/* CELULARES */
@media (max-width: 480px) {
.farmland-classes-system {
padding: 0 10px;
}

.farmland-page-title h1 {
font-size: 24px;
}

.farmland-page-title p {
font-size: 14px;
}

.farmland-main-grid {
gap: 15px;
}

.farmland-class-image {
height: 150px;
}

.farmland-img-hover {
max-height: 120px;
}

.farmland-class-name {
padding: 15px;
}

.farmland-class-title {
font-size: 18px;
}

.farmland-subclasses-grid {
grid-template-columns: 1fr;
}
}

/* DARK MODE SUPPORT (OPCIONAL) */
@media (prefers-color-scheme: dark) {
.farmland-classes-system {
background: transparent;
}

.farmland-class-card,
.farmland-expansion-area,
.farmland-subclass-card {
background: #2d3748;
border-color: #4a5568;
}

.farmland-class-name,
.farmland-expansion-content {
background: #2d3748;
}

.farmland-class-title,
.farmland-expansion-title,
.farmland-subclass-info h3 a {
color: #e2e8f0;
}

.farmland-class-subtitle,
.farmland-expansion-description,
.farmland-subclass-info p {
color: #a0aec0;
}

.farmland-class-image {
background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
}

.farmland-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 – FARMLAND */
/* ================================================= */

/* 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 */
/* ================================================= */
.farmland-attr-table {
width: 100%;
border-collapse: collapse;
background: #ffffff;
margin: 20px 0 30px;
font-size: 14px;
}

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

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

/* Hover nas linhas da tabela */
.farmland-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 */
/* ================================================= */
.farmland-attr-table {
width: 100%;
border-collapse: collapse;
background: #ffffff;
margin: 20px 0 30px;
font-size: 14px;
}

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

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

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

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

/* Card individual */
.farmland-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 */
.farmland-card-img {
width: 100%;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

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

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

.farmland-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 */
.farmland-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 */
.farmland-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 */
.farmland-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 */
.farmland-carousel-track::-webkit-scrollbar {
display: none;
}

/* Imagens dentro do track */
.farmland-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);
}

.farmland-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-farmland {
width: 200px; /* Largura do container */
height: 300px; /* Altura ideal para artes de Ragnarok */
margin: 0 auto ; /* 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;
}

/* Container para centralizar os cards principais */
.farmland-main-cards-container {
display: flex;
justify-content: center; /* Centraliza horizontalmente */
align-items: center; /* Alinha verticalmente se houver alturas diferentes */
flex-wrap: wrap; /* Faz os cards pularem de linha em telas menores */
gap: 15px; /* Espaçamento entre os cards */
max-width: 1000px; /* MESMA LARGURA do seu hr-guides-wrapper */
margin: 20px auto; /* Centraliza o bloco na página e dá espaçamento vertical */
}

/* Garante que as imagens dentro dos cards fiquem responsivas */
.farmland-main-cards-container .img-hover img {
display: block;
height: auto;
border-radius: 4px; /* Opcional: deixa as bordas levemente arredondadas */
}

/* Container que agrupa o título e os cards de destaque */
.farmland-highlights-wrapper {
max-width: 1000px; /* Alinhado com o Painel de Conhecimento */
margin: 30px auto; /* Centraliza o bloco todo e dá espaçamento vertical */
}

/* Garante que o título "Destaques" alinhe à esquerda do bloco de 1000px ou centralize */
.farmland-highlights-wrapper .farmland-section-title {
text-align: left; /* Mantenha 'center' se preferir o título no meio */
margin-bottom: 15px;
padding-left: 5px;
}

/* Grid que centraliza os cards de destaque */
.farmland-highlights-grid {
display: flex;
gap: 15px;
flex-wrap: wrap;
justify-content: center; /* ESTA LINHA FAZ A CENTRALIZAÇÃO */
}

/* Ajuste fino para os cards de destaque */
.farmland-highlights-grid .img-hover img {
border-radius: 6px;
transition: transform 0.3s ease;
}

.farmland-main-cards-container {
display: flex;
justify-content: center; /* Tenta centralizar primeiro */
flex-wrap: wrap;
gap: 20px;
max-width: 1000px;
margin: 20px 25%; /* O 'auto' centraliza o bloco inteiro na página */

/* AJUSTE FINO: Se ainda parecer para a esquerda,
aumente o padding-left abaixo para empurrar para a direita */
padding-left: 10px;
box-sizing: border-box;
}
/* --- BOTAO SUBIR TOPO DA PAGINA --- */

/* Botão Voltar ao Topo */
#back-to-top {
display: none; /* Escondido por padrão */
position: fixed;
bottom: 20px;
right: 20px;
z-index: 100;
padding: 10px 15px;
background-color: #3366cc;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

#back-to-top:hover {
background-color: #2a4b8d;
text-decoration: none;
}
.hr-guides-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
margin-top: 10px;
}

.hr-guide-item {
background: linear-gradient(145deg, #1e1e1e, #2a2a2a);
border-radius: 12px;
padding: 12px;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.25s ease;
box-shadow: 0 4px 10px rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
}

.hr-guide-item img {
transition: transform 0.25s ease;
}

.hr-guide-item a {
color: #fff;
font-weight: 600;
text-decoration: none;
}

.hr-guide-item:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 10px 25px rgba(0,0,0,0.6);
background: linear-gradient(145deg, #2a2a2a, #3a3a3a);
border: 1px solid rgba(255,255,255,0.1);
}

.hr-guide-item:hover img {
transform: scale(1.15) rotate(5deg);
}

.hr-guide-item:hover a {
color: #00bfff;
}

/* --- END - CONTINUA --- */

/* =========================
GUIAS – Farmland
========================= */

/* 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;
}

/* TESTE PAGINA TESTE SCRIPTS*/

.ro-wave-wrapper {
text-align: center;
width: 100%;
margin: 80px auto;
display: block;
}

.ro-item-wave {
display: inline-block ;
vertical-align: top ;
margin: 0 -8px ;
}

.ro-circle-wave {
width: 80px ;
height: 80px ;
border: 3px solid #f38d5f ;
border-radius: 50% ;
background: #fff ;
overflow: hidden ;
position: relative ;
display: block ;
}

.ro-circle-wave img {
width: 100% ;
height: 100% ;
object-fit: cover ;
}

/* Ajustes de altura para o efeito de onda */
.ro-pos-1, .ro-pos-9, .ro-pos-10 { margin-top: 110px ; }
.ro-pos-2, .ro-pos-8 { margin-top: 70px ; }
.ro-pos-3, .ro-pos-7 { margin-top: 30px ; }
.ro-pos-4, .ro-pos-6 { margin-top: -10px ; }
.ro-pos-5 { margin-top: -50px ; }

/* Container de largura total controlada */
.everlight-nav-container {
display: flex;
justify-content: center;
flex-wrap: wrap; /* Permite quebrar linha se a tela for pequena */
gap: 8px; /* Espaço menor entre botões */
margin: 10px 0;
width: 100%; /* Garante que não ultrapasse o limite do conteúdo */
box-sizing: border-box;
}

/* Card Profissional Compacto */
.nav-card-compact {
background: linear-gradient(180deg, #1d1d1d 0%, #0a0a0a 100%);
border: 1px solid #333;
border-radius: 4px;
padding: 6px 12px; /* Reduzido para ficar do tamanho do anterior */
flex: 1; /* Distribui o espaço igualmente */
min-width: 110px; /* Tamanho mínimo para não esmagar o texto */
max-width: 160px; /* Tamanho máximo para não vazar */
transition: all 0.3s ease;
text-align: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.nav-card-compact a {
color: #efefef !important;
text-decoration: none !important;
font-weight: bold;
font-size: 0.85em; /* Fonte levemente menor para caber melhor */
display: block;
white-space: nowrap; /* Impede que o texto quebre linha dentro do botão */
}

/* Hover mais discreto para manter o profissionalismo */
.nav-card-compact:hover {
background: #252525;
transform: translateY(-2px);
border-color: #666;
box-shadow: 0 4px 8px rgba(0,0,0,0.6);
}

/* ===========================
CARROSSEL - EQUILÍBRIO (TOPO + BASE VISÍVEL)
=========================== */

#farmlandCarousel {
position: relative;
width: 100%;
max-width: 1280px;
margin: 25px auto;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.45);
background: transparent;
padding: 0;
border: none;
}

.carousel-wrapper,
.carousel-container {
width: 100%;
margin: 0;
padding: 0;
}

.carousel-container {
display: flex;
transition: transform 0.6s cubic-bezier(0.32, 0.72, 0, 1);
flex-wrap: nowrap;
}

/* Slide */
.carousel-slide {
flex: 0 0 100%;
min-width: 100%;
width: 100%;
height: 620px; /* ← Aumentei a altura (importante) */
display: flex;
align-items: center; /* Centralizado verticalmente (melhor equilíbrio) */
justify-content: center;
overflow: hidden;
position: relative;
background: #000;
}

/* Imagem - bom enquadramento */
.carousel-slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 25%; /* ← Ajuste fino: 20% ~ 35% */
display: block;
}

/* Setas */
.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.85);
color: #111;
border: none;
width: 56px;
height: 56px;
border-radius: 50%;
cursor: pointer;
z-index: 10;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
}

.carousel-arrow.left { left: 20px; }
.carousel-arrow.right { right: 20px; }

/* Dots */
.carousel-dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 20;
padding: 8px 20px;
background: rgba(0, 0, 0, 0.55);
border-radius: 30px;
display: flex;
gap: 8px;
}

.carousel-dots .dot {
width: 13px;
height: 13px;
background: rgba(255,255,255,0.75);
border-radius: 50%;
cursor: pointer;
}

.carousel-dots .dot.active {
background: #00eeff;
transform: scale(1.4);
}

/* === TRAVA A ALTURA DA CAIXA PRETA + ÍCONE GRANDE === */
.hr-guide-item {
display: flex !important;
align-items: center !important;
height: 54px !important; /* ← ALTURA FIXA da caixa preta */
min-height: 54px !important;
max-height: 54px !important;
padding: 6px 12px !important;
box-sizing: border-box !important;
overflow: hidden !important; /* evita estourar */
}

/* === IMAGEM MAIOR SEM BORRAR === */
.hr-guide-item img {
width: 64px !important; /* ← Tamanho da imagem */
height: 64px !important;
object-fit: contain !important;
flex-shrink: 0 !important;
margin-right: 12px !important;
margin-top: -5px !important; /* sobe um pouco a imagem */
image-rendering: auto !important;
-webkit-filter: contrast(1.08) !important; /* melhora nitidez */
}

.top-banner {
width: 100%;
max-width: 100%;
overflow: hidden;
}

.top-banner img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
display: block;
}

.farm-panel{

background:linear-gradient(
180deg,
#2a2a2a,
#1c1c1c
);

border:1px solid #5f4b17;

border-radius:12px;

overflow:hidden;

margin-bottom:25px;

box-shadow:0 4px 15px rgba(0,0,0,.25);

}

.farm-panel-header{

background:linear-gradient(
90deg,
#111,
#2c2c2c,
#6b5310
);

color:#f3d57b;

font-size:28px;

font-weight:bold;

padding:18px 25px;
}

.farm-panel-body{

padding:20px;

color:#ddd;
}

MediaWiki:Common.css

2026-06-10T14:38:27Z

Adm.mayuka:

MediaWiki:Common.css

2026-06-10T14:37:22Z

Adm.mayuka:

MediaWiki:Common.css

2026-06-10T14:33:51Z

Adm.mayuka:

MediaWiki:Common.css

2026-06-10T14:26:43Z

Adm.mayuka:

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

/* =============================================
AJUSTE FINAL DO LOGO SIDEBAR
============================================= */

/* Força o tamanho no contêiner principal do logo */
#p-logo, .mw-wiki-logo, .ps-logo {
width: 140px ; /* Ajuste essa largura para caber na sua barra lateral */
height: auto ;
display: block ;
margin: 10px auto ;
padding: 0 ;
}

/* Força a imagem dentro do logo a não estourar */
#p-logo a, .mw-wiki-logo img {
background-size: contain ;
width: 100% ;
height: 140px ; /* Ajuste a altura proporcional aqui */
}

/* Se o logo estiver como imagem fixa na tag <img> */
#p-logo img {
max-width: 140px ;
height: auto ;
}
/* -----------------------------
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
----------------------------- */
.farmland-container {
max-width: 1200px; /* LARGURA MÁXIMA IGUAL AO PRINT */
margin: 0 auto; /* CENTRALIZA CONTAINER */
padding: 10px; /* ESPAÇAMENTO INTERNO PADRÃO */
}

/* =========================
BANNER PRINCIPAL
========================= */
.farmland-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
========================= */
.farmland-event-button {
text-align: center; /* CENTRALIZA O BOTÃO */
margin-bottom: 25px; /* ESPAÇAMENTO ABAIXO DO BOTÃO */
}

.farmland-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 */
}

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

/* =====================================
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 */
.farmland-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
========================= */
.farmland-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
========================= */
.farmland-guide {
display: flex; /* FLEX PARA ÍCONES + TEXTO */
align-items: center; /* CENTRALIZA VERTICALMENTE */
font-size: 14px; /* TAMANHO DA FONTE PADRÃO */
}

/* Ícones dentro das guias */
.farmland-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 */
}

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

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

/* Efeito hover do card */
.farmland-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 */
.farmland-card .img {
transition: transform 0.25s ease; /* TRANSIÇÃO SUAVE */
}

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

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

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

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

/* Item individual */
.farmland-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 */
.farmland-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 */
.farmland-exclusive-img {
height: 140px; /* ALTURA IGUAL AO PRINT */
background: #dcdcdc; /* FUNDO CINZA CLARO */
}

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

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

/* Container geral de cards */
.farmland-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 */
.farmland-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 */
.farmland-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 */
.farmland-card a {
display: block;
padding: 8px 4px; /* PADDING INTERNO */
font-weight: bold; /* TEXTO NEGRITO */
color: #0033cc; /* COR DO LINK */
text-decoration: none; /* REMOVE SUBLINHADO */
}

.farmland-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 – FARMLAND
=============================== */

/* 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 FARMLAND */
/* ================================================= */

/* -----------------------------
RESET E CONTAINER
----------------------------- */
.farmland-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
----------------------------- */
.farmland-page-title {
text-align: center; /* CENTRALIZA TEXTO */
margin-bottom: 40px; /* MARGEM INFERIOR */
padding-bottom: 20px; /* PADDING INFERIOR */
border-bottom: 2px solid #e0e0e0; /* LINHA SEPARADORA */
}

.farmland-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 */
}

.farmland-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)
----------------------------- */
.farmland-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) {
.farmland-main-grid {
grid-template-columns: repeat(2, 1fr); /* 2 COLUNAS EM TELAS MÉDIAS */
}
}

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

/* -----------------------------
CARD DA CLASSE (ESTILO SITE)
----------------------------- */
.farmland-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 */
}

.farmland-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 */
}

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

/* -----------------------------
IMAGEM DO CARD
----------------------------- */
.farmland-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
----------------------------- */
.farmland-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 */
}

.farmland-class-card:hover .farmland-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
----------------------------- */
.farmland-class-name {
padding: 20px; /* PADDING INTERNO */
text-align: center; /* CENTRALIZA TEXTO */
background: white; /* FUNDO BRANCO */
border-top: 1px solid #f1f1f1; /* LINHA SEPARADORA */
}

.farmland-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 */
}

.farmland-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 */
.farmland-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: farmlandSlideDown 0.4s ease-out; /* ANIMAÇÃO AO ABRIR */
}

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

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

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

/* Título da expansão */
.farmland-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 */
.farmland-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 */
.farmland-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 */
.farmland-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 */
.farmland-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 */
.farmland-subclass-image {
flex-shrink: 0; /* NÃO REDUZIR */
}

.farmland-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 */
.farmland-subclass-card:hover .farmland-subclass-img {
transform: scale(1.1); /* LEVE AMPLIAÇÃO */
}

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

/* Título da sub-classe */
.farmland-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 */
.farmland-subclass-info h3 a {
color: #2c3e50; /* COR PADRÃO */
text-decoration: none; /* SEM SUBLINHADO */
transition: color 0.2s; /* TRANSIÇÃO DE COR */
}

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

/* Descrição da sub-classe */
.farmland-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
----------------------------- */
.farmland-class-image {
position: relative; /* Necessário para pseudo-elemento de shimmer */
}

.farmland-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
----------------------------- */
.farmland-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)
----------------------------- */
.farmland-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;
}

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

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

/* TABLETS MENORES */
@media (max-width: 768px) {
.farmland-class-image {
height: 180px;
padding: 15px;
}

.farmland-img-hover {
max-height: 150px;
}

.farmland-expansion-content {
padding: 20px;
}

.farmland-subclass-card {
flex-direction: column;
text-align: center;
gap: 15px;
}
}

/* CELULARES */
@media (max-width: 480px) {
.farmland-classes-system {
padding: 0 10px;
}

.farmland-page-title h1 {
font-size: 24px;
}

.farmland-page-title p {
font-size: 14px;
}

.farmland-main-grid {
gap: 15px;
}

.farmland-class-image {
height: 150px;
}

.farmland-img-hover {
max-height: 120px;
}

.farmland-class-name {
padding: 15px;
}

.farmland-class-title {
font-size: 18px;
}

.farmland-subclasses-grid {
grid-template-columns: 1fr;
}
}

/* DARK MODE SUPPORT (OPCIONAL) */
@media (prefers-color-scheme: dark) {
.farmland-classes-system {
background: transparent;
}

.farmland-class-card,
.farmland-expansion-area,
.farmland-subclass-card {
background: #2d3748;
border-color: #4a5568;
}

.farmland-class-name,
.farmland-expansion-content {
background: #2d3748;
}

.farmland-class-title,
.farmland-expansion-title,
.farmland-subclass-info h3 a {
color: #e2e8f0;
}

.farmland-class-subtitle,
.farmland-expansion-description,
.farmland-subclass-info p {
color: #a0aec0;
}

.farmland-class-image {
background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
}

.farmland-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 – FARMLAND */
/* ================================================= */

/* 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 */
/* ================================================= */
.farmland-attr-table {
width: 100%;
border-collapse: collapse;
background: #ffffff;
margin: 20px 0 30px;
font-size: 14px;
}

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

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

/* Hover nas linhas da tabela */
.farmland-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 */
/* ================================================= */
.farmland-attr-table {
width: 100%;
border-collapse: collapse;
background: #ffffff;
margin: 20px 0 30px;
font-size: 14px;
}

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

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

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

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

/* Card individual */
.farmland-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 */
.farmland-card-img {
width: 100%;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

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

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

.farmland-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 */
.farmland-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 */
.farmland-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 */
.farmland-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 */
.farmland-carousel-track::-webkit-scrollbar {
display: none;
}

/* Imagens dentro do track */
.farmland-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);
}

.farmland-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-farmland {
width: 200px; /* Largura do container */
height: 300px; /* Altura ideal para artes de Ragnarok */
margin: 0 auto ; /* 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;
}

/* Container para centralizar os cards principais */
.farmland-main-cards-container {
display: flex;
justify-content: center; /* Centraliza horizontalmente */
align-items: center; /* Alinha verticalmente se houver alturas diferentes */
flex-wrap: wrap; /* Faz os cards pularem de linha em telas menores */
gap: 15px; /* Espaçamento entre os cards */
max-width: 1000px; /* MESMA LARGURA do seu hr-guides-wrapper */
margin: 20px auto; /* Centraliza o bloco na página e dá espaçamento vertical */
}

/* Garante que as imagens dentro dos cards fiquem responsivas */
.farmland-main-cards-container .img-hover img {
display: block;
height: auto;
border-radius: 4px; /* Opcional: deixa as bordas levemente arredondadas */
}

/* Container que agrupa o título e os cards de destaque */
.farmland-highlights-wrapper {
max-width: 1000px; /* Alinhado com o Painel de Conhecimento */
margin: 30px auto; /* Centraliza o bloco todo e dá espaçamento vertical */
}

/* Garante que o título "Destaques" alinhe à esquerda do bloco de 1000px ou centralize */
.farmland-highlights-wrapper .farmland-section-title {
text-align: left; /* Mantenha 'center' se preferir o título no meio */
margin-bottom: 15px;
padding-left: 5px;
}

/* Grid que centraliza os cards de destaque */
.farmland-highlights-grid {
display: flex;
gap: 15px;
flex-wrap: wrap;
justify-content: center; /* ESTA LINHA FAZ A CENTRALIZAÇÃO */
}

/* Ajuste fino para os cards de destaque */
.farmland-highlights-grid .img-hover img {
border-radius: 6px;
transition: transform 0.3s ease;
}

.farmland-main-cards-container {
display: flex;
justify-content: center; /* Tenta centralizar primeiro */
flex-wrap: wrap;
gap: 20px;
max-width: 1000px;
margin: 20px 25%; /* O 'auto' centraliza o bloco inteiro na página */

/* AJUSTE FINO: Se ainda parecer para a esquerda,
aumente o padding-left abaixo para empurrar para a direita */
padding-left: 10px;
box-sizing: border-box;
}
/* --- BOTAO SUBIR TOPO DA PAGINA --- */

/* Botão Voltar ao Topo */
#back-to-top {
display: none; /* Escondido por padrão */
position: fixed;
bottom: 20px;
right: 20px;
z-index: 100;
padding: 10px 15px;
background-color: #3366cc;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

#back-to-top:hover {
background-color: #2a4b8d;
text-decoration: none;
}
.hr-guides-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
margin-top: 10px;
}

.hr-guide-item {
background: linear-gradient(145deg, #1e1e1e, #2a2a2a);
border-radius: 12px;
padding: 12px;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.25s ease;
box-shadow: 0 4px 10px rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
}

.hr-guide-item img {
transition: transform 0.25s ease;
}

.hr-guide-item a {
color: #fff;
font-weight: 600;
text-decoration: none;
}

.hr-guide-item:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 10px 25px rgba(0,0,0,0.6);
background: linear-gradient(145deg, #2a2a2a, #3a3a3a);
border: 1px solid rgba(255,255,255,0.1);
}

.hr-guide-item:hover img {
transform: scale(1.15) rotate(5deg);
}

.hr-guide-item:hover a {
color: #00bfff;
}

/* --- END - CONTINUA --- */

/* =========================
GUIAS – Farmland
========================= */

/* 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;
}

/* TESTE PAGINA TESTE SCRIPTS*/

.ro-wave-wrapper {
text-align: center;
width: 100%;
margin: 80px auto;
display: block;
}

.ro-item-wave {
display: inline-block ;
vertical-align: top ;
margin: 0 -8px ;
}

.ro-circle-wave {
width: 80px ;
height: 80px ;
border: 3px solid #f38d5f ;
border-radius: 50% ;
background: #fff ;
overflow: hidden ;
position: relative ;
display: block ;
}

.ro-circle-wave img {
width: 100% ;
height: 100% ;
object-fit: cover ;
}

/* Ajustes de altura para o efeito de onda */
.ro-pos-1, .ro-pos-9, .ro-pos-10 { margin-top: 110px ; }
.ro-pos-2, .ro-pos-8 { margin-top: 70px ; }
.ro-pos-3, .ro-pos-7 { margin-top: 30px ; }
.ro-pos-4, .ro-pos-6 { margin-top: -10px ; }
.ro-pos-5 { margin-top: -50px ; }

/* Container de largura total controlada */
.everlight-nav-container {
display: flex;
justify-content: center;
flex-wrap: wrap; /* Permite quebrar linha se a tela for pequena */
gap: 8px; /* Espaço menor entre botões */
margin: 10px 0;
width: 100%; /* Garante que não ultrapasse o limite do conteúdo */
box-sizing: border-box;
}

/* Card Profissional Compacto */
.nav-card-compact {
background: linear-gradient(180deg, #1d1d1d 0%, #0a0a0a 100%);
border: 1px solid #333;
border-radius: 4px;
padding: 6px 12px; /* Reduzido para ficar do tamanho do anterior */
flex: 1; /* Distribui o espaço igualmente */
min-width: 110px; /* Tamanho mínimo para não esmagar o texto */
max-width: 160px; /* Tamanho máximo para não vazar */
transition: all 0.3s ease;
text-align: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.nav-card-compact a {
color: #efefef !important;
text-decoration: none !important;
font-weight: bold;
font-size: 0.85em; /* Fonte levemente menor para caber melhor */
display: block;
white-space: nowrap; /* Impede que o texto quebre linha dentro do botão */
}

/* Hover mais discreto para manter o profissionalismo */
.nav-card-compact:hover {
background: #252525;
transform: translateY(-2px);
border-color: #666;
box-shadow: 0 4px 8px rgba(0,0,0,0.6);
}

/* ===========================
CARROSSEL - EQUILÍBRIO (TOPO + BASE VISÍVEL)
=========================== */

#farmlandCarousel {
position: relative;
width: 100%;
max-width: 1280px;
margin: 25px auto;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.45);
background: transparent;
padding: 0;
border: none;
}

.carousel-wrapper,
.carousel-container {
width: 100%;
margin: 0;
padding: 0;
}

.carousel-container {
display: flex;
transition: transform 0.6s cubic-bezier(0.32, 0.72, 0, 1);
flex-wrap: nowrap;
}

/* Slide */
.carousel-slide {
flex: 0 0 100%;
min-width: 100%;
width: 100%;
height: 620px; /* ← Aumentei a altura (importante) */
display: flex;
align-items: center; /* Centralizado verticalmente (melhor equilíbrio) */
justify-content: center;
overflow: hidden;
position: relative;
background: #000;
}

/* Imagem - bom enquadramento */
.carousel-slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 25%; /* ← Ajuste fino: 20% ~ 35% */
display: block;
}

/* Setas */
.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.85);
color: #111;
border: none;
width: 56px;
height: 56px;
border-radius: 50%;
cursor: pointer;
z-index: 10;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
}

.carousel-arrow.left { left: 20px; }
.carousel-arrow.right { right: 20px; }

/* Dots */
.carousel-dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 20;
padding: 8px 20px;
background: rgba(0, 0, 0, 0.55);
border-radius: 30px;
display: flex;
gap: 8px;
}

.carousel-dots .dot {
width: 13px;
height: 13px;
background: rgba(255,255,255,0.75);
border-radius: 50%;
cursor: pointer;
}

.carousel-dots .dot.active {
background: #00eeff;
transform: scale(1.4);
}

/* === TRAVA A ALTURA DA CAIXA PRETA + ÍCONE GRANDE === */
.hr-guide-item {
display: flex !important;
align-items: center !important;
height: 54px !important; /* ← ALTURA FIXA da caixa preta */
min-height: 54px !important;
max-height: 54px !important;
padding: 6px 12px !important;
box-sizing: border-box !important;
overflow: hidden !important; /* evita estourar */
}

/* === IMAGEM MAIOR SEM BORRAR === */
.hr-guide-item img {
width: 64px !important; /* ← Tamanho da imagem */
height: 64px !important;
object-fit: contain !important;
flex-shrink: 0 !important;
margin-right: 12px !important;
margin-top: -5px !important; /* sobe um pouco a imagem */
image-rendering: auto !important;
-webkit-filter: contrast(1.08) !important; /* melhora nitidez */
}

.top-banner {
width: 100%;
max-width: 100%;
overflow: hidden;
}

.top-banner img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
display: block;
}

/* ==================================================
FARMLAND WIKI
================================================== */

:root{
--gold:#d4af37;
--gold-dark:#b8941f;
--panel:#1f232a;
--panel-light:#2b3038;
--border:#3d434d;
--success:#2f8f46;
--warning:#c78d1a;
}

.mw-body{
max-width:1400px;
}

/* Títulos */

h1{
border-bottom:3px solid var(--gold);
padding-bottom:10px;
margin-bottom:20px;
}

h2{
border-bottom:2px solid var(--gold);
padding-bottom:6px;
margin-top:40px;
}

h3{
color:var(--gold-dark);
}

/* TOC */

.toc{
border:1px solid var(--border);
border-radius:12px;
padding:15px;
background:#f8f8f8;
}

/* Tabelas */

.wikitable{
width:100%;
border-collapse:collapse;
margin:20px 0;
border-radius:10px;
overflow:hidden;
}

.wikitable th{
background:var(--gold);
color:#111;
padding:12px;
font-size:14px;
}

.wikitable td{
padding:12px;
}

/* Infobox */

.farm-infobox{
float:right;
width:320px;
margin-left:25px;
margin-bottom:20px;
border-radius:12px;
overflow:hidden;
border:1px solid var(--border);
background:#fff;
}

.farm-header{
background:var(--gold);
color:#111;
text-align:center;
font-size:20px;
font-weight:bold;
padding:15px;
}

.farm-content{
padding:15px;
}

.farm-stat{
display:flex;
justify-content:space-between;
padding:10px 0;
border-bottom:1px solid #eee;
}

/* Avisos */

.farm-warning{
background:#fff5db;
border-left:5px solid var(--warning);
padding:15px;
margin:20px 0;
border-radius:6px;
}

.farm-success{
background:#eaf9ed;
border-left:5px solid var(--success);
padding:15px;
margin:20px 0;
border-radius:6px;
}

/* Cards */

.farm-card{
background:#fafafa;
border:1px solid #ddd;
border-radius:10px;
padding:15px;
margin:15px 0;
}

/* Imagens */

.farm-image{
float:left;
margin-right:20px;
margin-bottom:20px;
}

.farm-image img{
border-radius:8px;
box-shadow:0 4px 12px rgba(0,0,0,.15);
}

.clearfix{
clear:both;
}

2026-06-10T13:40:20Z

Adm.mayuka:

Auto Ataque

2026-06-10T13:39:54Z

Adm.mayuka:

Auto Ataque

2026-06-10T13:39:18Z

Adm.mayuka: Página substituída por '{{TOC right}} = Sistema de Auto Ataque = right O Sistema de Auto Ataque permite automatizar o combate, coleta de itens e utilização de recursos durante o farm. {| class="wikitable" ! Requisito | Dispositivo Automático |- ! Penalidade | -20% EXP e DROP |- ! Compatibilidade | @afk |}'

Mega Nova

2026-06-02T02:54:01Z

Adm.mayuka: /* 14px Sistema Mega Nova */

= [[File:Losango_Amarelo.png|14px]] Sistema Mega Nova =

O '''Sistema Mega Nova''' do FarmLand é um sistema de mapas instanciados, criado para oferecer desafios progressivos com diferentes mapas, dificuldades, requisitos de entrada, monstros fortalecidos, chefes e recompensas finais.

A Mega Nova é acessada através do NPC '''Mega Nova''', localizado em Prontera.

[[File:meganova NPC.png|80px]]
<pre>
NPC: Mega Nova
Localização: prontera,236,133
</pre>
[[File:NPC LOC MEGANOVA.png|150px]]

Para participar, o jogador precisa estar em um grupo e o líder do grupo deve iniciar a instância.
Pode ser feito solo e em grupo, todos do grupo devem atender aos requisitos para acessar, caso contrário não será iniciado o evento.

----

== [[File:Losango_Amarelo.png|14px]] O que é a Mega Nova ==

A '''Mega Nova''' é uma instância de combate em grupo onde os jogadores enfrentam ondas de monstros e chefes especiais.

O sistema possui diferentes mapas temáticos e três níveis de dificuldade dentro de cada mapa:

<pre>
Normal
Difícil
Infernal
</pre>

Quanto maior a dificuldade, mais fortes serão os monstros, maior será o requisito de GearScore do personagem para acessar e melhores serão as recompensas.

----

== [[File:Losango_Amarelo.png|14px]] Requisitos básicos ==

Para iniciar uma Mega Nova, é necessário cumprir alguns requisitos.

* O jogador precisa estar em um grupo.
* Apenas o líder do grupo pode iniciar a instância.
* Todos os membros online precisam estar no nível mínimo exigido.
* Todos os membros precisam respeitar a diferença máxima de nível do grupo.
* Todos os membros precisam possuir o GearScore mínimo da dificuldade escolhida.
* O grupo pode ter no máximo 6 jogadores online.

----

== [[File:Losango_Amarelo.png|14px]] Nível mínimo ==

Todos os membros online do grupo precisam estar no nível mínimo exigido.

<pre>
Nível mínimo: 70
</pre>

Se algum membro estiver abaixo do nível 70, a instância não poderá ser iniciada.

----

== [[File:Losango_Amarelo.png|14px]] Requisito de GearScore ==

Cada dificuldade possui um requisito mínimo de GearScore.

{| class="wikitable"
! Dificuldade
! GearScore mínimo
|-
| Normal
| 20.000
|-
| Difícil
| 80.000
|-
| Infernal
| 240.000
|}

O sistema consulta o GearScore de cada personagem do grupo.

Se algum membro do grupo não possuir GearScore suficiente, a entrada será bloqueada.

----

== [[File:Losango_Amarelo.png|14px]] Dificuldades disponíveis ==

Ao iniciar a Mega Nova, o líder deve escolher uma das dificuldades:

<pre>
Normal
Difícil
Infernal
</pre>

A dificuldade escolhida afeta:

* Quantidade de monstros invocados.
* HP dos monstros.
* ATK e MATK dos monstros.
* EXP recebida ao derrotar monstros e chefes.
* Quantidade de recompensas finais.
* Custo de entrada.
* GearScore mínimo exigido.

----

== [[File:Losango_Amarelo.png|14px]] Quantidade de monstros por dificuldade ==

A dificuldade também aumenta a quantidade de monstros invocados.

{| class="wikitable"
! Dificuldade
! Multiplicador de spawn
|-
| Normal
| 1x quantidade base
|-
| Difícil
| 2x quantidade base
|-
| Infernal
| 3x quantidade base
|}

----

== [[File:Losango_Amarelo.png|14px]] Custo de entrada ==

A Mega Nova possui custo de entrada dividido entre os membros online do grupo.

O custo base configurado é:

<pre>
Zeny base: 100.000
Cash base: 2.000
</pre>

O valor final varia de acordo com a dificuldade e é dividido pela quantidade de membros online.
Exemplo com 2 jogadores no modo Normal:

<pre>
Custo total: 100.000 Zeny
Cada jogador paga: 50.000 Zeny
</pre>

Exemplo com 3 jogadores no modo Infernal:

<pre>
Custo total: 300.000 Zeny
Cada jogador paga: 100.000 Zeny
</pre>

O líder pode escolher pagar usando Zeny ou Cash.

Todos os membros online precisam possuir o valor necessário.

Caso algum membro não tenha Zeny ou Cash suficiente, a entrada será cancelada.

----

== [[File:Losango_Amarelo.png|14px]] Mapas disponíveis ==

O sistema possui 5 mapas de Mega Nova configurados.

{| class="wikitable"
! Instância
! Mapa base
|-
| Mega Nova Prontera
| mn_prontera
|-
| Mega Nova Payon
| mn_payon
|-
| Mega Nova Geffen
| mn_geffen
|-
| Mega Nova Izlude
| mn_izlude
|-
| Mega Nova Morocc
| mn_morocc
|}

[[File:painel meganova.png|250px]]

O líder escolhe o mapa antes de selecionar a dificuldade.

----

== [[File:Losango_Amarelo.png|14px]] Mega Nova Prontera ==

A Mega Nova Prontera possui monstros de dificuldade mais fáceis, é a porta de entrada para os jogadores no Mega Nova.

Recompensas finais:

<pre>
Adamantium
Mega Nova Prontera Key (Usada no sistema de Encantamentos de itens)
</pre>

----

== [[File:Losango_Amarelo.png|14px]] Mega Nova Payon ==

A Mega Nova Payon possui monstros mais fortes que a Mega Nova Prontera, mas ainda são considerados de dificuldade normal.

Recompensas finais:

<pre>
Adamantium
Mega Nova Payon Key (Usada no sistema de Upgrade de Encantamentos de itens)
</pre>

----

== [[File:Losango_Amarelo.png|14px]] Mega Nova Geffen ==

A Mega Nova Geffen possui monstros considerados difíceis e os jogadores precisarão estar com uma progressão de personagem melhor para conseguir concluir.

Recompensas finais:

<pre>
Adamantium
Mega Nova Geffen Key (Usada no sistema de Upgrade de Encantamentos de itens)
</pre>

----

== [[File:Losango_Amarelo.png|14px]] Mega Nova Izlude ==

A Mega Nova Izlude começa a ser um mapa com monstros mais end game, prepare bem o seu grupo para esse desafio.

Recompensas finais:

<pre>
Adamantium
Mega Nova Izlude Key (Usada no sistema de Upgrade de Encantamentos de itens)
</pre>

----

== [[File:Losango_Amarelo.png|14px]] Mega Nova Morocc ==

A Mega Nova Morocc é o mapa mais difícil de todas as Mega Novas, mas aqui você conseguirá a melhor Key para os upgrades finais de seus encantamentos.

Recompensas finais:

<pre>
Adamantium
Mega Nova Morocc Key (Usada no sistema de Upgrade de Encantamentos de itens)
</pre>

----

== [[File:Losango_Amarelo.png|14px]] Progressão dentro da Mega Nova ==

Após a criação da instância, os jogadores entram automaticamente no mapa escolhido.

O sistema anuncia:

<pre>
Mega Nova iniciará em 5 segundos
</pre>

Depois do início, os monstros são invocados automaticamente.

Conforme os monstros são derrotados, uma contagem é atualizada.

Quando restarem apenas 3 monstros, o sistema invoca o chefe do mapa.

Ao derrotar todos os chefes, a instância é finalizada e todos os jogadores do grupo que estão dentro do mapa recebem a recompensa final.

----

== [[File:Losango_Amarelo.png|14px]] Chefes da Mega Nova ==

Cada mapa possui um chefe principal.

O chefe é invocado próximo à posição do líder do grupo dentro da instância.

Se houver mais de um chefe, o próximo chefe é chamado após a morte do anterior.

----

== [[File:Losango_Amarelo.png|14px]] Recompensa final ==

Ao finalizar a instância, todos os membros online do grupo que ainda estiverem dentro do mapa de instância recebem a recompensa final.

A quantidade de recompensa varia conforme a dificuldade.

{| class="wikitable"
! Dificuldade
! Quantidade de cada item de recompensa
|-
| Normal
| 1 unidade
|-
| Difícil
| 3 unidades
|-
| Infernal
| 8 unidades
|}

A recompensa é entregue para cada item configurado na instância.

Exemplo:

<pre>
Mega Nova Prontera no Normal:
1x Adamantium
1x Item ID 50015

Mega Nova Prontera no Infernal:
8x Adamantium
8x Item ID 50015
</pre>

----

== [[File:Losango_Amarelo.png|14px]] Importante sobre a recompensa ==

A recompensa só é entregue ao personagem se ele estiver no mapa no momento da finalização.

Se o personagem estiver fora do mapa quando ela for concluída, ele não recebe a recompensa final.

----

== [[File:Losango_Amarelo.png|14px]] Tempo limite da instância ==

A Mega Nova possui tempo limite de 30 minutos.

Caso a instância não seja concluída dentro do tempo configurado, ela é encerrada automaticamente.

Ao finalizar ou expirar, os jogadores são enviados de volta para Prontera.

----

== [[File:Losango_Amarelo.png|14px]] Cooldown da Mega Nova ==

Cada Mapa do Mega Nova possui um tempo de espera de 8 horas para poder ser feita novamente.

Se algum membro do grupo ainda estiver em tempo de espera, o grupo não poderá iniciar aquela Mega Nova.

O tempo de espera é por mapa e não por dificuldade, ou seja, se você acessou o Mega Nova Prontera na dificuldade [Normal], não poderá iniciar ela novamente na dificuldade [Difícil], mas poderá acessar outra Mega Nova, como por exemplo a Mega Nova Payon.

----

== [[File:Losango_Amarelo.png|14px]] Dicas para completar a Mega Nova ==

* Monte um grupo equilibrado.
* Verifique se todos possuem o GearScore necessário.
* Confirme se todos estão dentro da faixa de nível permitida.
* Escolha a dificuldade de acordo com a força real do grupo.
* Leve classes de dano, suporte e resistência.
* Cuidado com o modo Infernal, pois os monstros possuem muito mais HP e dano.
* Permaneça dentro da instância até a finalização para receber a recompensa.
* Organize o pagamento antes de iniciar para evitar bloqueios.
* Derrote os monstros rapidamente para avançar até o chefe.

Mega Nova

2026-06-02T02:53:49Z

Adm.mayuka: /* 14px Sistema Mega Nova */

= [[File:Losango_Amarelo.png|14px]] Sistema Mega Nova =

O '''Sistema Mega Nova''' do FarmLand é um sistema de mapas instanciados, criado para oferecer desafios progressivos com diferentes mapas, dificuldades, requisitos de entrada, monstros fortalecidos, chefes e recompensas finais.

A Mega Nova é acessada através do NPC '''Mega Nova''', localizado em Prontera.
[[File:meganova NPC.png|80px]]
<pre>
NPC: Mega Nova
Localização: prontera,236,133
</pre>
[[File:NPC LOC MEGANOVA.png|150px]]

Para participar, o jogador precisa estar em um grupo e o líder do grupo deve iniciar a instância.
Pode ser feito solo e em grupo, todos do grupo devem atender aos requisitos para acessar, caso contrário não será iniciado o evento.

----

== [[File:Losango_Amarelo.png|14px]] O que é a Mega Nova ==

A '''Mega Nova''' é uma instância de combate em grupo onde os jogadores enfrentam ondas de monstros e chefes especiais.

O sistema possui diferentes mapas temáticos e três níveis de dificuldade dentro de cada mapa:

<pre>
Normal
Difícil
Infernal
</pre>

Quanto maior a dificuldade, mais fortes serão os monstros, maior será o requisito de GearScore do personagem para acessar e melhores serão as recompensas.

----

== [[File:Losango_Amarelo.png|14px]] Requisitos básicos ==

Para iniciar uma Mega Nova, é necessário cumprir alguns requisitos.

* O jogador precisa estar em um grupo.
* Apenas o líder do grupo pode iniciar a instância.
* Todos os membros online precisam estar no nível mínimo exigido.
* Todos os membros precisam respeitar a diferença máxima de nível do grupo.
* Todos os membros precisam possuir o GearScore mínimo da dificuldade escolhida.
* O grupo pode ter no máximo 6 jogadores online.

----

== [[File:Losango_Amarelo.png|14px]] Nível mínimo ==

Todos os membros online do grupo precisam estar no nível mínimo exigido.

<pre>
Nível mínimo: 70
</pre>

Se algum membro estiver abaixo do nível 70, a instância não poderá ser iniciada.

----

== [[File:Losango_Amarelo.png|14px]] Requisito de GearScore ==

Cada dificuldade possui um requisito mínimo de GearScore.

{| class="wikitable"
! Dificuldade
! GearScore mínimo
|-
| Normal
| 20.000
|-
| Difícil
| 80.000
|-
| Infernal
| 240.000
|}

O sistema consulta o GearScore de cada personagem do grupo.

Se algum membro do grupo não possuir GearScore suficiente, a entrada será bloqueada.

----

== [[File:Losango_Amarelo.png|14px]] Dificuldades disponíveis ==

Ao iniciar a Mega Nova, o líder deve escolher uma das dificuldades:

<pre>
Normal
Difícil
Infernal
</pre>

A dificuldade escolhida afeta:

* Quantidade de monstros invocados.
* HP dos monstros.
* ATK e MATK dos monstros.
* EXP recebida ao derrotar monstros e chefes.
* Quantidade de recompensas finais.
* Custo de entrada.
* GearScore mínimo exigido.

----

== [[File:Losango_Amarelo.png|14px]] Quantidade de monstros por dificuldade ==

A dificuldade também aumenta a quantidade de monstros invocados.

{| class="wikitable"
! Dificuldade
! Multiplicador de spawn
|-
| Normal
| 1x quantidade base
|-
| Difícil
| 2x quantidade base
|-
| Infernal
| 3x quantidade base
|}

----

== [[File:Losango_Amarelo.png|14px]] Custo de entrada ==

A Mega Nova possui custo de entrada dividido entre os membros online do grupo.

O custo base configurado é:

<pre>
Zeny base: 100.000
Cash base: 2.000
</pre>

O valor final varia de acordo com a dificuldade e é dividido pela quantidade de membros online.
Exemplo com 2 jogadores no modo Normal:

<pre>
Custo total: 100.000 Zeny
Cada jogador paga: 50.000 Zeny
</pre>

Exemplo com 3 jogadores no modo Infernal:

<pre>
Custo total: 300.000 Zeny
Cada jogador paga: 100.000 Zeny
</pre>

O líder pode escolher pagar usando Zeny ou Cash.

Todos os membros online precisam possuir o valor necessário.

Caso algum membro não tenha Zeny ou Cash suficiente, a entrada será cancelada.

----

== [[File:Losango_Amarelo.png|14px]] Mapas disponíveis ==

O sistema possui 5 mapas de Mega Nova configurados.

{| class="wikitable"
! Instância
! Mapa base
|-
| Mega Nova Prontera
| mn_prontera
|-
| Mega Nova Payon
| mn_payon
|-
| Mega Nova Geffen
| mn_geffen
|-
| Mega Nova Izlude
| mn_izlude
|-
| Mega Nova Morocc
| mn_morocc
|}

[[File:painel meganova.png|250px]]

O líder escolhe o mapa antes de selecionar a dificuldade.

----

== [[File:Losango_Amarelo.png|14px]] Mega Nova Prontera ==

A Mega Nova Prontera possui monstros de dificuldade mais fáceis, é a porta de entrada para os jogadores no Mega Nova.

Recompensas finais:

<pre>
Adamantium
Mega Nova Prontera Key (Usada no sistema de Encantamentos de itens)
</pre>

----

== [[File:Losango_Amarelo.png|14px]] Mega Nova Payon ==

A Mega Nova Payon possui monstros mais fortes que a Mega Nova Prontera, mas ainda são considerados de dificuldade normal.

Recompensas finais:

<pre>
Adamantium
Mega Nova Payon Key (Usada no sistema de Upgrade de Encantamentos de itens)
</pre>

----

== [[File:Losango_Amarelo.png|14px]] Mega Nova Geffen ==

A Mega Nova Geffen possui monstros considerados difíceis e os jogadores precisarão estar com uma progressão de personagem melhor para conseguir concluir.

Recompensas finais:

<pre>
Adamantium
Mega Nova Geffen Key (Usada no sistema de Upgrade de Encantamentos de itens)
</pre>

----

== [[File:Losango_Amarelo.png|14px]] Mega Nova Izlude ==

A Mega Nova Izlude começa a ser um mapa com monstros mais end game, prepare bem o seu grupo para esse desafio.

Recompensas finais:

<pre>
Adamantium
Mega Nova Izlude Key (Usada no sistema de Upgrade de Encantamentos de itens)
</pre>

----

== [[File:Losango_Amarelo.png|14px]] Mega Nova Morocc ==

A Mega Nova Morocc é o mapa mais difícil de todas as Mega Novas, mas aqui você conseguirá a melhor Key para os upgrades finais de seus encantamentos.

Recompensas finais:

<pre>
Adamantium
Mega Nova Morocc Key (Usada no sistema de Upgrade de Encantamentos de itens)
</pre>

----

== [[File:Losango_Amarelo.png|14px]] Progressão dentro da Mega Nova ==

Após a criação da instância, os jogadores entram automaticamente no mapa escolhido.

O sistema anuncia:

<pre>
Mega Nova iniciará em 5 segundos
</pre>

Depois do início, os monstros são invocados automaticamente.

Conforme os monstros são derrotados, uma contagem é atualizada.

Quando restarem apenas 3 monstros, o sistema invoca o chefe do mapa.

Ao derrotar todos os chefes, a instância é finalizada e todos os jogadores do grupo que estão dentro do mapa recebem a recompensa final.

----

== [[File:Losango_Amarelo.png|14px]] Chefes da Mega Nova ==

Cada mapa possui um chefe principal.

O chefe é invocado próximo à posição do líder do grupo dentro da instância.

Se houver mais de um chefe, o próximo chefe é chamado após a morte do anterior.

----

== [[File:Losango_Amarelo.png|14px]] Recompensa final ==

Ao finalizar a instância, todos os membros online do grupo que ainda estiverem dentro do mapa de instância recebem a recompensa final.

A quantidade de recompensa varia conforme a dificuldade.

{| class="wikitable"
! Dificuldade
! Quantidade de cada item de recompensa
|-
| Normal
| 1 unidade
|-
| Difícil
| 3 unidades
|-
| Infernal
| 8 unidades
|}

A recompensa é entregue para cada item configurado na instância.

Exemplo:

<pre>
Mega Nova Prontera no Normal:
1x Adamantium
1x Item ID 50015

Mega Nova Prontera no Infernal:
8x Adamantium
8x Item ID 50015
</pre>

----

== [[File:Losango_Amarelo.png|14px]] Importante sobre a recompensa ==

A recompensa só é entregue ao personagem se ele estiver no mapa no momento da finalização.

Se o personagem estiver fora do mapa quando ela for concluída, ele não recebe a recompensa final.

----

== [[File:Losango_Amarelo.png|14px]] Tempo limite da instância ==

A Mega Nova possui tempo limite de 30 minutos.

Caso a instância não seja concluída dentro do tempo configurado, ela é encerrada automaticamente.

Ao finalizar ou expirar, os jogadores são enviados de volta para Prontera.

----

== [[File:Losango_Amarelo.png|14px]] Cooldown da Mega Nova ==

Cada Mapa do Mega Nova possui um tempo de espera de 8 horas para poder ser feita novamente.

Se algum membro do grupo ainda estiver em tempo de espera, o grupo não poderá iniciar aquela Mega Nova.

O tempo de espera é por mapa e não por dificuldade, ou seja, se você acessou o Mega Nova Prontera na dificuldade [Normal], não poderá iniciar ela novamente na dificuldade [Difícil], mas poderá acessar outra Mega Nova, como por exemplo a Mega Nova Payon.

----

== [[File:Losango_Amarelo.png|14px]] Dicas para completar a Mega Nova ==

* Monte um grupo equilibrado.
* Verifique se todos possuem o GearScore necessário.
* Confirme se todos estão dentro da faixa de nível permitida.
* Escolha a dificuldade de acordo com a força real do grupo.
* Leve classes de dano, suporte e resistência.
* Cuidado com o modo Infernal, pois os monstros possuem muito mais HP e dano.
* Permaneça dentro da instância até a finalização para receber a recompensa.
* Organize o pagamento antes de iniciar para evitar bloqueios.
* Derrote os monstros rapidamente para avançar até o chefe.

Arquivo:Painel meganova.png

2026-06-02T02:53:29Z

Adm.mayuka: Arquivo enviado com MsUpload

Arquivo enviado com MsUpload

Arquivo:NPC LOC MEGANOVA.png

2026-06-02T02:51:47Z

Adm.mayuka: Arquivo enviado com MsUpload

Arquivo enviado com MsUpload