/* ==== CLASSES PAGES (header, hero, sections) ==== */
/* BG herda do site; só garantimos o overlay */
.page-bg{position:fixed;inset:0;z-index:-2}
.page-bg::before{content:"";position:absolute;inset:0;background-image:url('./assets/big_tree.png');background-size:cover;background-position:center;filter:blur(8px) saturate(1.05);transform:scale(1.05)}
.page-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.75))}

/* HEADER: só a abóbora (logo_no_tipo.png). Fixo, translúcido. */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:flex-start;
  padding:10px 16px;
  background:rgba(0,0,0,0.35);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.header-logo{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
}
.header-logo img{height:40px;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.header-logo span{display:none;} /* sem texto ao lado; só a abóbora */

/* HERO / CARD */
.cls-hero{min-height:52vh;display:grid;place-items:center;text-align:center;padding:100px 16px 16px}
.cls-card{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:22px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  max-width:820px;width:100%;margin:0 auto;backdrop-filter:blur(3px)
}
.cls-nav{
  display:flex;
  justify-content:center;
  margin:0 auto 32px;
  padding:0 16px;
}
.cls-nav .btn-discord{
  animation-duration:6s;
}
.cls-nav .btn-discord .icon{
  filter:none;
}
.cls-icon{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.55))}
.cls-title{font-family:'Alkhemikal','MedievalSharp','Montserrat',system-ui;font-size:clamp(28px,4.8vw,44px);margin:0;font-weight:500;}
.cls-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center}
.tag{font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.18)}
.tag-economia{background:rgba(147,112,219,.18);border-color:rgba(147,112,219,.35)}
.tag-combate{ background:rgba(156,100,60,.22); border-color:rgba(156,100,60,.38)}
.cls-desc{color:#e5e7eb;margin:6px 0 0;max-width:680px}
.crumb{font-size:12px;color:#cbd5e1;margin-top:6px}.crumb a{color:#cbd5e1}

/* CONTENT SECTIONS */
.cls-content{max-width:980px;margin:22px auto 120px;padding:0 16px;display:grid;gap:18px}
.cls-section{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px}
.cls-section h2{
  margin:0 0 8px;
  font-size:clamp(20px,2.6vw,30px);
  font-weight:500;
  letter-spacing:2px;
  font-family:'Alkhemikal','MedievalSharp','Montserrat',serif;
}
.cls-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cls-item{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px;min-height:68px}
@media (max-width:900px){.cls-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.cls-grid{grid-template-columns:1fr}}

/* FOOTER usa os estilos do styles.css (já existentes) */
/* ===== Layout sticky para páginas de classe ===== */
.page-class {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* o conteúdo cresce para empurrar o footer */
.page-class main {
  flex: 1 0 auto;
}

/* override do footer fixo do site para páginas de classe */
.page-class .footer {
  position: static;   /* cancela o fixed do styles.css */
  margin-top: auto;   /* gruda no fundo quando o conteúdo é menor que a tela */
}

.cls-skills { margin-top: 8px; }
    .cls-subtitle {
      margin: 8px 0 10px;
      font-size: clamp(18px, 2.2vw, 22px);
      font-weight: 500;
      letter-spacing: 2px;
      font-family: 'Alkhemikal', 'MedievalSharp', 'Montserrat', serif;
      color: #e5e7eb;
    }
    .skill-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }
    .skill-card {
      display: flex;
      gap: 12px;
      padding: 12px;
      border-radius: 14px;
      background: rgba(0,0,0,0.35);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 6px 18px rgba(0,0,0,0.30);
    }
    .skill-icon {
      width: 60px; height: 60px; object-fit: contain; flex: 0 0 auto;
      filter: drop-shadow(0 3px 8px rgba(0,0,0,0.55));
    }
    .skill-body { display: flex; flex-direction: column; gap: 8px; width: 100%; }
    .skill-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .skill-name {
      font-weight: 700; font-size: 15px; letter-spacing: .2px;
      font-family: 'Alkhemikal','MedievalSharp','Montserrat',system-ui;
    }
    .skill-level { width: 140px; }
    .skill-level-value { font-size: 12px; color: #cbd5e1; }
    .skill-desc { margin: 0; color: #d6d6d6; font-size: 13px; line-height: 1.35; }

    .skill-video {
      position: relative; width: 100%; border-radius: 10px; overflow: hidden;
      border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03);
      aspect-ratio: 16 / 9;
      display: grid; place-items: center;
    }
    .skill-video iframe, .skill-video img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }
    .skill-video .placeholder {
      width: 48px; height: 48px; opacity: .6; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
    }

    @media (max-width: 980px) { .skill-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
    @media (max-width: 560px) { .skill-grid { grid-template-columns: 1fr; } .cls-content { margin: 18px auto 24px; } }