/* ============================================================
   PÁGINA DE GUIA
   Reaproveita as variáveis de css/style.css. Aqui só ficam os
   estilos exclusivos: busca, abas, cards de sistema, acordeão
   de títulos com raridades, tutoriais e cards de build.
   ============================================================ */

.guide-page{
padding-top:0;
}

.guide-hero{
padding-bottom:2.5rem;
}

.guide-search{
position:relative;
max-width:520px;
margin:2.2rem auto 0;
z-index:2;
}

.guide-search i{
position:absolute;
left:18px;
top:50%;
transform:translateY(-50%);
color:var(--muted);
}

.guide-search input{
width:100%;
padding:1rem 1rem 1rem 48px;
background:var(--card-bg);
border:1px solid var(--border);
border-radius:10px;
color:var(--text);
font-family:'Manrope', sans-serif;
font-size:0.95rem;
backdrop-filter:blur(20px);
transition:0.25s;
}

.guide-search input:focus{
outline:none;
border-color:var(--sky);
box-shadow:0 0 0 3px rgba(139,108,247,0.18);
}

.guide-search input::placeholder{
color:var(--muted);
}

/* ABAS PRINCIPAIS */

.guide-tabs{
display:flex;
gap:10px;
justify-content:center;
flex-wrap:wrap;
margin:0 0 3rem;
}

.guide-tab{
display:inline-flex;
align-items:center;
gap:8px;
background:var(--card-bg);
border:1px solid var(--border);
color:var(--muted);
padding:0.85rem 1.4rem;
border-radius:10px;
font-family:'Manrope', sans-serif;
font-weight:600;
font-size:0.92rem;
cursor:pointer;
transition:0.25s;
backdrop-filter:blur(20px);
}

.guide-tab:hover{
color:var(--text);
border-color:var(--sky);
}

.guide-tab.active{
background:rgba(139,108,247,0.14);
color:var(--sky);
border-color:var(--sky);
}

.guide-panel{
display:none;
animation:fade 0.4s ease;
}

.guide-panel.active{
display:block;
}

/* NAVEGAÇÃO RÁPIDA (chips) */

.guide-quicknav{
display:flex;
gap:8px;
flex-wrap:wrap;
justify-content:center;
margin-bottom:2.5rem;
}

.guide-quicknav a{
text-decoration:none;
font-size:0.82rem;
color:var(--muted);
border:1px solid var(--border);
padding:0.5rem 0.9rem;
border-radius:20px;
transition:0.2s;
}

.guide-quicknav a:hover{
color:var(--gold);
border-color:var(--gold);
}

.guide-empty{
text-align:center;
padding:4rem 1rem;
color:var(--muted);
}

.guide-empty i{
font-size:2.2rem;
opacity:0.5;
margin-bottom:0.8rem;
display:block;
}

.guide-intro-block{
text-align:center;
max-width:640px;
margin:0 auto 2.5rem;
}

.guide-intro-block h3{
color:var(--text);
font-size:1.6rem;
margin-bottom:0.6rem;
}

.guide-intro-block p{
color:var(--muted);
line-height:1.6;
}

/* CARD DE SISTEMA */

.system-card{
background:var(--card-bg);
border:1px solid var(--border);
border-radius:12px;
padding:1.8rem 2rem 2.2rem;
margin-bottom:2rem;
backdrop-filter:blur(20px);
scroll-margin-top:110px;
}

.system-card-header{
display:flex;
align-items:center;
gap:14px;
flex-wrap:wrap;
padding-bottom:1.2rem;
margin-bottom:1.2rem;
border-bottom:1px solid var(--border);
}

.system-icon{
width:48px;
height:48px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
border-radius:10px;
background:rgba(139,108,247,0.12);
color:var(--sky);
font-size:1.25rem;
}

.system-eyebrow{
display:block;
font-size:0.72rem;
letter-spacing:1.5px;
text-transform:uppercase;
color:var(--gold);
font-weight:700;
margin-bottom:2px;
}

.system-card-header h3{
color:var(--text);
font-size:1.3rem;
}

.system-card-header > div:nth-child(2){
flex:1;
min-width:180px;
}

.system-card-body p{
color:var(--muted);
line-height:1.7;
margin-bottom:1rem;
}

.system-card-body p:last-child{
margin-bottom:0;
}

/* BOTÃO DE VÍDEO */

.video-btn{
display:inline-flex;
align-items:center;
gap:8px;
text-decoration:none;
background:rgba(255,0,0,0.08);
border:1px solid rgba(255,0,0,0.25);
color:#ff6b6b;
padding:0.55rem 1rem;
border-radius:8px;
font-size:0.85rem;
font-weight:600;
white-space:nowrap;
transition:0.2s;
}

.video-btn:hover{
background:rgba(255,0,0,0.15);
transform:translateY(-2px);
}

/* LISTA DE CHECK */

.check-list{
list-style:none;
display:flex;
flex-direction:column;
gap:8px;
margin-bottom:1.2rem;
}

.check-list li{
color:var(--text);
font-size:0.92rem;
display:flex;
align-items:flex-start;
gap:10px;
}

.check-list i{
color:var(--gold);
margin-top:3px;
font-size:0.8rem;
}

/* CALLOUT */

.callout{
display:flex;
align-items:center;
gap:14px;
background:rgba(139,108,247,0.08);
border:1px solid rgba(139,108,247,0.2);
border-radius:10px;
padding:1rem 1.2rem;
flex:1;
min-width:200px;
}

.callout i{
color:var(--sky);
font-size:1.1rem;
flex-shrink:0;
}

.callout strong{
display:block;
color:var(--text);
font-size:0.9rem;
margin-bottom:2px;
}

.callout p{
color:var(--muted);
font-size:0.85rem;
margin:0 !important;
}

.callout-row{
display:flex;
gap:1rem;
flex-wrap:wrap;
margin-bottom:1.4rem;
}

.coord-tag{
margin-left:auto;
background:rgba(0,0,0,0.3);
border:1px solid var(--border);
color:var(--gold-soft);
padding:0.4rem 0.8rem;
border-radius:6px;
font-size:0.8rem;
font-weight:700;
white-space:nowrap;
}

/* COMPARATIVO ANTES/AGORA */

.mini-compare{
display:grid;
grid-template-columns:1fr 1fr;
gap:1rem;
margin-bottom:1.4rem;
}

.mini-compare-item{
border-radius:10px;
padding:1rem 1.2rem;
border:1px solid var(--border);
}

.mini-compare-old{
background:rgba(255,107,107,0.06);
}

.mini-compare-new{
background:rgba(126,231,135,0.06);
}

.mini-compare-label{
display:flex;
align-items:center;
gap:6px;
font-size:0.78rem;
font-weight:700;
letter-spacing:0.5px;
text-transform:uppercase;
margin-bottom:6px;
}

.mini-compare-old .mini-compare-label{
color:#ff6b6b;
}

.mini-compare-new .mini-compare-label{
color:#7ee787;
}

.mini-compare-item p{
color:var(--muted) !important;
font-size:0.88rem;
margin:0 !important;
}

@media(max-width:640px){
.mini-compare{
grid-template-columns:1fr;
}
}

/* TUTORIAL PASSO A PASSO */

.sub-heading{
color:var(--text);
font-family:'Cinzel', serif;
font-size:1.05rem;
margin:1.8rem 0 0.4rem;
}

.sub-heading-note{
font-size:0.85rem !important;
margin-bottom:1rem !important;
}

.tutorial-steps{
list-style:none;
counter-reset:tuto;
display:flex;
flex-direction:column;
gap:12px;
margin-bottom:1rem;
}

.tutorial-steps li{
counter-increment:tuto;
position:relative;
padding-left:38px;
color:var(--text);
font-size:0.92rem;
line-height:1.6;
}

.tutorial-steps li::before{
content:counter(tuto);
position:absolute;
left:0;
top:0;
width:26px;
height:26px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg, var(--gold-soft), var(--gold));
color:#241505;
font-weight:700;
font-size:0.8rem;
border-radius:50%;
}

.discord-note{
display:flex;
align-items:center;
gap:10px;
background:rgba(88,101,242,0.08);
border:1px solid rgba(88,101,242,0.25);
border-radius:10px;
padding:0.9rem 1.1rem;
font-size:0.88rem !important;
color:var(--muted);
}

.discord-note i{
color:#5865f2;
font-size:1.2rem;
flex-shrink:0;
}

/* ACORDEÃO DE TÍTULOS */

.title-accordion{
display:flex;
flex-direction:column;
gap:10px;
}

.title-set{
border:1px solid var(--border);
border-radius:10px;
overflow:hidden;
background:rgba(0,0,0,0.15);
}

.title-set summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:0.9rem 1.2rem;
cursor:pointer;
list-style:none;
font-size:0.92rem;
color:var(--text);
flex-wrap:wrap;
}

.title-set summary::-webkit-details-marker{
display:none;
}

.title-set summary::after{
content:"\f078";
font-family:"Font Awesome 6 Free";
font-weight:900;
color:var(--muted);
font-size:0.75rem;
transition:transform 0.25s;
margin-left:auto;
}

.title-set[open] summary::after{
transform:rotate(180deg);
}

.set-name{
font-weight:700;
}

.set-name em{
color:var(--muted);
font-style:normal;
font-weight:400;
font-size:0.85rem;
}

.set-tag{
font-size:0.78rem;
color:var(--sky);
background:rgba(139,108,247,0.1);
padding:3px 10px;
border-radius:20px;
}

.title-table{
width:100%;
border-collapse:collapse;
border-top:1px solid var(--border);
}

.title-table td{
padding:10px 1.2rem;
border-bottom:1px solid var(--border);
font-size:0.88rem;
color:var(--text);
text-align:left;
}

.title-table tr:last-child td{
border-bottom:none;
}

.title-table td:last-child{
text-align:right;
color:var(--gold-soft);
font-weight:600;
white-space:nowrap;
}

.rarity{
display:inline-block;
padding:3px 10px;
border-radius:20px;
font-size:0.74rem;
font-weight:700;
white-space:nowrap;
}

.rarity-branco{ background:rgba(230,230,230,0.12); color:#e8e8e8; }
.rarity-verde{ background:rgba(74,222,128,0.12); color:#4ade80; }
.rarity-azul{ background:rgba(56,189,248,0.12); color:#38bdf8; }
.rarity-laranja{ background:rgba(249,115,22,0.14); color:#fb923c; }
.rarity-amarelo{ background:rgba(234,179,8,0.14); color:#facc15; }
.rarity-roxo{ background:rgba(168,85,247,0.14); color:#c084fc; }

/* GUIA DO NOVATO — cards de dica */

.tip-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:1.4rem;
margin-bottom:2.5rem;
}

.tip-card{
background:var(--card-bg);
border:1px solid var(--border);
border-radius:12px;
padding:1.6rem;
backdrop-filter:blur(20px);
transition:0.3s;
}

.tip-card:hover{
transform:translateY(-4px);
border-color:var(--sky);
}

.tip-num{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
border:1px solid var(--gold);
color:var(--gold);
font-family:'Cinzel', serif;
font-weight:700;
font-size:0.85rem;
margin-bottom:0.9rem;
}

.tip-card h4{
color:var(--text);
font-family:'Cinzel', serif;
font-size:1rem;
margin-bottom:0.5rem;
}

.tip-card p{
color:var(--muted);
font-size:0.88rem;
line-height:1.6;
}

.tip-card a{
color:var(--sky);
text-decoration:none;
}

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

.video-banner{
display:flex;
align-items:center;
gap:16px;
background:rgba(232,182,76,0.06);
border:1px solid var(--border);
border-radius:12px;
padding:1.4rem 1.6rem;
flex-wrap:wrap;
}

.video-banner i{
font-size:2rem;
color:#ff6b6b;
}

.video-banner strong{
display:block;
color:var(--text);
margin-bottom:2px;
}

.video-banner p{
color:var(--muted);
font-size:0.85rem;
}

.video-banner > div{
flex:1;
min-width:200px;
}

/* BUILDS INICIANTES */

.build-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:1.6rem;
}

.build-card{
background:var(--card-bg);
border:1px dashed var(--border);
border-radius:12px;
padding:1.8rem;
backdrop-filter:blur(20px);
}

.build-card-top{
display:flex;
align-items:center;
gap:14px;
margin-bottom:1rem;
}

.build-card-top i{
font-size:1.6rem;
color:var(--sky);
width:44px;
height:44px;
display:flex;
align-items:center;
justify-content:center;
border-radius:10px;
background:rgba(139,108,247,0.12);
flex-shrink:0;
}

.build-card-top h4{
color:var(--text);
font-family:'Cinzel', serif;
font-size:1.05rem;
}

.build-card > p{
color:var(--muted);
font-size:0.9rem;
line-height:1.6;
margin-bottom:1rem;
}

/* RESPONSIVO */

@media(max-width:768px){

.system-card{
padding:1.4rem 1.3rem 1.8rem;
}

.system-card-header{
gap:10px;
}

.video-btn{
margin-left:0;
}

.callout-row{
flex-direction:column;
}

}