:root{
  --bg:#060606;
  --text:#ECE7DC;
  --muted:#B9B2A2;
  --gold:#F0D9AD;
  --gold2:#D7B675;
  --line:rgba(240,217,173,.35);
  --lineSoft:rgba(255,255,255,.09);
  --panel:rgba(8,10,13,.72);
  --shadow:0 20px 50px rgba(0,0,0,.45);
  --container:1180px;
  --radius:16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

/* No seu arquivo .css */
body {
    -webkit-user-select: none;  /* Chrome/Safari */
    -moz-user-select: none;     /* Firefox */
    -ms-user-select: none;      /* IE/Edge */
    user-select: none;          /* Padrão */
}

img {
    -webkit-user-drag: none;
    pointer-events: none;
}

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, "Gothic A1", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

.container{
  width:min(var(--container), calc(100% - 32px));
  margin:0 auto;
}

.bg-texture{
  position:fixed;
  inset:0;
  background:
    radial-gradient(900px 380px at 20% 0%, rgba(240,217,173,.10), transparent 55%),
    radial-gradient(900px 420px at 90% 10%, rgba(120,160,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.70), rgba(0,0,0,.88)),
    url("../images/cabal-hits-bg-site-2-2.png");
  background-size: contain;
  background-color: #050505;
  background-position: right center;
  background-position:center;
  background-repeat:no-repeat;
  filter:saturate(.92) contrast(1.05);
  z-index:-2;
}

/* Topbar */
.topbar{
  position:absolute;
  top:0; left:0; right:0;
  z-index:20;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0));
  border-bottom:0;
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 0;
}
.brand img{ height:38px; width:auto; }

.nav{
  display:flex;
  align-items:center;
  gap:20px;
}
.nav a{
  color: rgba(240,217,173,.92);
  text-decoration:none;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.14em;
}
.nav a:hover{ color: #fff; }

/* Botão login por imagem */
.btn-login{
  width: 140px;
  height: 44px;
  display:inline-block;
  background: url("../images/btn-login.png") center/contain no-repeat;
  border-radius: 8px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
.btn-login:hover{ transform: translateY(-1px); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:42px;
  padding:0 16px;
  border-radius:10px;
  text-decoration:none;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  border:1px solid transparent;
  transition:.18s ease;
  user-select:none;
  white-space:nowrap;
}
.btn span{ font-size:16px; margin-left:8px; transform:translateY(-1px); }
.btn:hover{ transform: translateY(-1px); }

/* Botão ENTRAR por imagem (navbar) */
.topbar__cta-img{
  width: 150px;            /* ajuste se precisar */
  height: 44px;
  display: inline-block;
  background: url("../images/btn-login.png") center/contain no-repeat;
}

.btn--gold{
  color:#1c150c;
  background: linear-gradient(180deg, rgba(240,217,173,.95), rgba(215,182,117,.90));
  border-color: rgba(240,217,173,.35);
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
.btn--outline{
  color: var(--gold);
  background: transparent;
  border-color: var(--line);
}
.btn--ghost{
  color: #fff;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}
.btn--outline:hover, .btn--ghost:hover{ border-color: rgba(240,217,173,.55); }

/* Hero */
.hero{
  position:relative;
  min-height: 620px;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hero__bg{
  position:absolute;
  inset:0;
  background: url("../images/background-6.png") center/cover no-repeat;
  filter: saturate(.98) contrast(1.03);
  z-index:-1;
}
.hero__fade{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 520px at 18% 22%, rgba(0,0,0,.05), rgba(0,0,0,.40) 55%, rgba(0,0,0,.70) 100%),
    linear-gradient(180deg, rgba(0,0,0,0) 78%, rgba(0,0,0,.70) 100%);
  pointer-events:none;
}
.hero__inner{
  position:relative;
  min-height: 620px;
  display:flex;
  align-items:flex-end;
  padding: 64px 0 54px;
}
.hero__copy{
  max-width: 520px;
  padding: 18px 0;
}
.hero__kicker{
  color: rgba(240,217,173,.85);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
  margin-bottom:10px;
}
.hero__title{
  font-family: Cinzel, serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size: clamp(34px, 4vw, 56px);
  line-height:.98;
  margin:0 0 10px;
}
.hero__sub{
  color: rgba(236,231,220,.80);
  line-height:1.55;
  margin:0 0 18px;
  font-size:14px;
}
.hero__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* invisible clickable area aligned with the “JOGAR AGORA” art */
.hero__cta{
  position:absolute;
  right: 18%;
  top: 44%;
  width: 260px;
  height: 66px;
  border-radius: 14px;
  transform: translate(0,-50%);
  outline: none;
}
.hero__cta:focus-visible{
  box-shadow: 0 0 0 3px rgba(240,217,173,.35);
}

/* Sections */
.section{ padding: 56px 0; }
.section--dark{ background: rgba(0,0,0,.35); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }

.section__head{ margin-bottom: 18px; }
.section__kicker{
  color: rgba(240,217,173,.78);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:11px;
  margin-bottom:8px;
}
.section__title{
  margin:0;
  font-family: Cinzel, serif;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height:1;
}


.section__head--news{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.section__title--news{
  max-width: 700px;
  line-height: .92;
}

.section__underline--news{
  width: min(290px, 36vw);
  height: 2px;
  margin-top: 18px;
  background: linear-gradient(90deg, rgba(251,206,160,.98) 0%, rgba(251,206,160,.72) 70%, rgba(251,206,160,.08) 100%);
  position: relative;
}

.section__underline--news::before{
  content: "";
  position:absolute;
  left: -7px;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 1.4px solid #FBCEA0;
  transform: translateY(-50%) rotate(45deg);
  background:#050505;
}

/* News */

.news-grid{
  margin-top: 26px;
}

.news-slider{
  position: relative;
}

.news-track-wrap{
  overflow: hidden;
  width: 100%;
}

.news-track{
  display: flex;
  gap: 18px;
  transition: transform .45s ease;
  will-change: transform;
}

.news-slide{
  flex: 0 0 calc((100% - 18px) / 2);
  min-width: 0;
}

.news-card{
  position: relative;
  min-height: 448px;
  background: #020202;
  overflow: hidden;
  isolation: isolate;
}

.news-card__frame,
.news-card__content{
  position: absolute;
  inset: 0;
}

.news-card__frame{
  pointer-events: none;
  z-index: 4;
}

.news-card__line{
  position: absolute;
  background: #FBCEA0;
  opacity: .96;
}

.news-card__line--top,
.news-card__line--bottom{
  left: 55.29px;
  width: calc(100% - 110.58px);
  height: 1.4px;
}

.news-card__line--top{ top: 0; }
.news-card__line--bottom{ bottom: 0; }

.news-card__line--left,
.news-card__line--right{
  top: 82.36px;
  width: 1.4px;
  height: calc(100% - 164.72px);
}

.news-card__line--left{ left: 0; }
.news-card__line--right{ right: 0; }

.news-card__corner{
  position: absolute;
  width: 131.58px;
  height: 131.58px;
  color: #FBCEA0;
}

.news-card__corner svg{
  display: block;
  width: 100%;
  height: 100%;
}

.news-card__corner--tl{ left: 0; top: 0; }
.news-card__corner--tr{ right: 0; top: 0; }
.news-card__corner--br{ right: 0; bottom: 0; }
.news-card__corner--bl{ left: 0; bottom: 0; }

.news-card__content{
  position: relative;
  z-index: 2;
  min-height: 448px;
}

.news-card__body{
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 3;
  width: min(46%, 360px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 52px 46px 52px 46px;
  background: transparent;
}

.news-card__media{
  position: absolute;
  inset: 0;
  min-height: 448px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
}

.news-card__media::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.72) 0%,
      rgba(0,0,0,.58) 16%,
      rgba(0,0,0,.36) 28%,
      rgba(0,0,0,.16) 38%,
      rgba(0,0,0,.04) 47%,
      rgba(0,0,0,0) 56%);
}

.news-card__meta{
  margin-bottom: 16px;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: rgba(255,245,232,.95);
}

.news-card__title{
  margin: 0 0 18px;
  font-family: 'Cinzel', serif;
  font-size: clamp(34px, 3.4vw, 58px);
  line-height: .96;
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #f5e6d2;
  text-wrap: balance;
}

.news-card__text{
  margin: 0 0 24px;
  max-width: 370px;
  color: rgba(235,231,227,.72);
  font-size: 14px;
  line-height: 1.45;
}

.news-card__link{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  color: #f4dcc0;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none;
}

.news-card__link::before{
  content: "";
  width: 30px;
  height: 8px;
  flex: 0 0 auto;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='8' viewBox='0 0 30 8' fill='none'%3E%3Cpath d='M0.5 4H29.5' stroke='%23FBCEA0' stroke-width='1.4'/%3E%3Cpath d='M0.5 4L4.5 0.5V7.5L0.5 4Z' fill='%23FBCEA0'/%3E%3C/svg%3E");
}

.news-card__link:hover{
  color: #fff;
}

.news-nav{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
}

.news-nav__more{
  grid-column: 1;
  justify-self: start;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.news-nav__more img{
  display:block;
  width:auto;
  height:auto;
  max-width: 180px;
}

.news-nav__pager{
  grid-column: 2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}

.news-nav__arrow{
  width: 32px;
  height: 44px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #FBCEA0;
  cursor: pointer;
  opacity: .9;
  transition: transform .18s ease, opacity .18s ease, filter .18s ease;
}

.news-nav__arrow svg{ width: 100%; height: 100%; display:block; }
.news-nav__arrow:hover{ opacity: 1; transform: scale(1.04); filter: drop-shadow(0 0 8px rgba(251,206,160,.2)); }
.news-nav__arrow[disabled]{ opacity:.35; cursor: default; transform:none; filter:none; }

.news-nav__dots{
  display: flex;
  align-items: center;
  gap: 10px;
}

.news-nav__dot{
  width: 18px;
  height: 18px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #FBCEA0;
  cursor: pointer;
  opacity: .58;
  transition: transform .18s ease, opacity .18s ease;
}

.news-nav__dot svg{ width:100%; height:100%; display:block; }
.news-nav__dot:hover{ opacity: .9; transform: scale(1.05); }
.news-nav__dot.is-active{ opacity: 1; }

@media (max-width: 1100px){
  .news-slide{ flex-basis: 100%; }
  .news-card__content{ grid-template-columns: 45% 55%; }
}

@media (max-width: 980px){
  .news-nav{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .news-nav__more,
  .news-nav__pager{
    grid-column: 1;
    justify-self: center;
  }
}

@media (max-width: 780px){
  .section__underline--news{
    width: 190px;
    margin-top: 14px;
  }

  .news-card{
    min-height: auto;
  }

  .news-card__content{
    min-height: 420px;
  }

  .news-nav{
    grid-template-columns: 1fr;
  }

  .news-nav__more{
    width: 100%;
    justify-self: center;
    margin: 0 0 8px;
  }

  .news-nav__pager{
    width:100%;
    justify-self:center;
    justify-content:center;
  }

  .news-card__body,
  .news-card__media{
    min-height: 260px;
  }

  .news-card__body{
    padding: 38px 28px 28px;
    justify-content: flex-start;
  }

  .news-card__title{
    font-size: clamp(28px, 8vw, 42px);
  }

  .news-card__line--top,
  .news-card__line--bottom{
    left: 42px;
    width: calc(100% - 84px);
  }

  .news-card__line--left,
  .news-card__line--right{
    top: 64px;
    height: calc(100% - 128px);
  }

  .news-card__corner{
    width: 96px;
    height: 96px;
  }
}
.classes{
  display:grid;
  grid-template-columns: 360px 1fr 120px;
  gap: 16px;
  align-items:stretch;
}
.classes__copy{ padding: 8px 0; }
.classes__text{
  margin: 10px 0 16px;
  color: rgba(236,231,220,.78);
  line-height:1.6;
  font-size: 13px;
}

.panel{
  margin-top: 18px;
  border: 1px solid rgba(240,217,173,.22);
  border-radius: 14px;
  padding: 14px;
  background: rgba(240,217,173,.04);
}
.panel__title{
  color: rgba(240,217,173,.92);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:11px;
  margin-bottom:10px;
}
.panel__list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: 8px;
  color: rgba(236,231,220,.80);
  font-size: 13px;
}

.classes__art{
  position:relative;
  border-radius: var(--radius);
  background: rgba(0,0,0,.35);
  overflow:hidden;
  min-height: 620px;
}

/* imagem cobre todo o quadro */
.classes__art #classMain{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position:center;
  filter: contrast(1.04) saturate(.96);
}

.classes__art-fade{
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 420px at 15% 10%, rgba(255,255,255,.05), transparent 50%),
    linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.55));
  pointer-events:none;
  z-index:2;
}

/* Play button */
.classes__play{
  position:absolute;
  right: 110px;
  top: 50%;
  transform: translateY(-50%);
  width: 88px;
  height: 88px;
  border-radius: 18px;
  border: 1px solid rgba(240,217,173,.35);
  background: rgba(240,217,173,.18);
  cursor:pointer;
  z-index: 5;
}
.classes__play::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-40%,-50%);
  width: 0; height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid rgba(255,255,255,.92);
}
.classes__play:hover{
  border-color: rgba(240,217,173,.60);
  background: rgba(240,217,173,.22);
}

/* UI overlay */
.class-ui{ position:absolute; inset:0; pointer-events:none; z-index:4; }

.class-ui__brief{
  position:absolute; right:22px; top:22px;
  width:min(340px, 38%);
  color: rgba(236,231,220,.82);
  font-size:13px; line-height:1.5;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}

.class-ui__panel{
  position:absolute;
  left: 26px;
  bottom: 22px;
  width: min(760px, calc(100% - 52px));
  display:grid;
  grid-template-columns: 1fr 240px;
  gap: 16px;
  padding: 14px;

  border-radius:16px;
  border:1px solid rgba(240,217,173,.18);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(14px);
  box-shadow: 0 25px 70px rgba(0,0,0,.55);
}

.class-ui__panel::before{
  content:"";
  position:absolute;
  left:18px; right:18px; top:10px;
  height:10px;
  background:
    url("../images/rectangle-361.png") left center/180px no-repeat,
    url("../images/rectangle-337.png") right center/180px no-repeat;
  opacity:.9;
  pointer-events:none;
}

.class-ui__panel-title{
  color: rgba(240,217,173,.92);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:11px;
  margin-bottom:10px;
}
.class-ui__traits-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:8px;
  color: rgba(236,231,220,.80);
  font-size:13px;
}

/* Triângulo */
.tri{ position:relative; display:grid; place-items:center; }
.tri__svg{ width:220px; max-width:100%; height:auto; }
.tri__poly{ fill: rgba(0,0,0,.05); stroke: rgba(240,217,173,.45); stroke-width:2; }
.tri__fill{ fill: rgba(240,217,173,.35); stroke: rgba(240,217,173,.55); stroke-width:1.5; }
.tri__line{ stroke: rgba(240,217,173,.18); stroke-width:1; }
.tri__point{ fill: rgba(240,217,173,.95); stroke: rgba(0,0,0,.35); stroke-width:2; }

.tri__label{
  position:absolute;
  font-family: Cinzel, serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:.08em;
  color: rgba(240,217,173,.92);
}
.tri__label--for{ top:8px; left:50%; transform:translateX(-50%); }
.tri__label--int{ bottom:8px; left:12px; }
.tri__label--des{ bottom:8px; right:12px; }

/* Thumbs / scroller */
.classes__thumbs{ position:relative; display:flex; justify-content:center; }
.classes__thumbs-wrap{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height: 520px;
  overflow: auto;
  scrollbar-width: none;
  padding-top: 74px;
  padding-bottom: 74px;
}
.classes__thumbs-wrap::-webkit-scrollbar{ display:none; }

.thumb{
  width: 96px;
  height: 118px;
  border-radius: 12px;
  border: 1px solid rgba(240,217,173,.20);
  background: rgba(0,0,0,.30);
  padding: 0;
  overflow:hidden;
  cursor:pointer;
  transition:.18s ease;
}
.thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position:center;
  filter: brightness(.45) saturate(.75) contrast(1.05);
  transition: filter .18s ease, transform .18s ease;
}
.thumb:hover{ border-color: rgba(240,217,173,.35); transform: translateY(-1px); }
.thumb--active{
  border-color: rgba(240,217,173,.60);
  box-shadow: 0 0 0 1px rgba(240,217,173,.25) inset, 0 10px 30px rgba(0,0,0,.45);
}
.thumb--active img{ filter:none; }

/* Setas por imagem */
.classes__scroll{
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: .9;
  transition: .15s ease;
}
.classes__scroll:hover{ opacity: 1; transform: translateX(-50%) translateY(-1px); }
.classes__scroll span{ display:none; }

.classes__scroll--up{
  top: 10px;
  background: url("../images/up-class.png") center/contain no-repeat;
}
.classes__scroll--down{
  bottom: 10px;
  background: url("../images/down.classe.png") center/contain no-repeat;
}

/* Shop */
.shop{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap: 18px;
  align-items:center;
  border-radius: var(--radius);
  border:1px solid rgba(240,217,173,.22);
  background: linear-gradient(180deg, rgba(6,7,9,.75), rgba(0,0,0,.55));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.shop__copy{ padding: 18px; }
.shop__text{
  margin: 10px 0 16px;
  color: rgba(236,231,220,.78);
  line-height:1.6;
  font-size: 13px;
}
.shop__art{ position:relative; min-height: 320px; }
.shop__art img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
  filter: contrast(1.05) saturate(.95);
}

/* Wallpapers */
.wall-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.wall-card{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
  box-shadow: var(--shadow);
}
.wall-card img{
  width:100%;
  height: 220px;
  object-fit: cover;
}
.wall-card__bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  padding: 12px 12px;
  border-top:1px solid rgba(255,255,255,.08);
}
.wall-card__bar span{
  color: rgba(236,231,220,.85);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size: 11px;
}
.wall-card__bar a{
  color: var(--gold);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size: 11px;
}
.wall-card__bar a:hover{ color:#fff; }

/* FAQ */
/* --- FAQ: Seção Individual --- */
.faq {
  position: relative;
  padding: 100px 0; /* Aumentado para dar mais respiro vertical */
  background-color: #060606;
  overflow: hidden;
  z-index: 1;
}

/* --- Imagem de Fundo Inteira --- */
.faq__bg {
  position: absolute;
  inset: 0;
  background-image: url("../images/node-563.png");
  background-repeat: no-repeat;
  /* 'cover' com 'top' garante que ela preencha a largura sem cortar o topo artístico */
  background-size: cover; 
  background-position: center top;
  opacity: 0.35;
  filter: saturate(0.9) contrast(1.1);
  z-index: 1;
}

/* --- Grid 3x3 (Esquerda e Direita) --- */
.faq-grid {
  position: relative;
  z-index: 5; /* Garante que os cards fiquem acima da imagem */
  display: grid;
  grid-template-columns: 1fr 1fr; /* Duas colunas iguais */
  gap: 20px;
  margin-top: 40px;
}

.faq-col {
  display: flex;
  flex-direction: column;
  gap: 15px; /* Espaço entre os 3 cards de cada lado */
}

/* --- Estilo dos Cards (Baseado na Imagem 1) --- */
.faq-item {
  position: relative;
  border: 1px solid rgba(240, 217, 173, 0.2);
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.55); /* Mais escuro para destacar do fundo */
  backdrop-filter: blur(8px);
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.faq-item:hover {
  border-color: rgba(240, 217, 173, 0.5);
}

.faq-q{
  width:100%;
  border:0;
  background:transparent;
  color: rgba(236,231,220,.92);
  padding: 14px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  text-align:left;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size: 12px;
}
.faq-q span{ color: var(--gold); font-size: 18px; transition: transform .18s ease; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .22s ease; }
.faq-a p{ margin:0; padding: 0 14px 14px; color: rgba(236,231,220,.78); line-height:1.6; font-size: 13px; }
.faq-item.is-open .faq-a{ max-height: 180px; }
.faq-item.is-open .faq-q span{ transform: rotate(180deg); }

/* --- Footer Section --- */
/* Espaçamento entre FAQ e Footer (O fundo preto que você pediu) */
/* --- Espaçamento entre FAQ e Footer --- */
.footer-divider {
  margin-top: 120px; /* Aumenta o espaço do fundo preto para o efeito visual */
  width: 100%;
  display: flex;
  justify-content: center;
  background: transparent;
  padding: 0 20px; /* Evita que os ornamentos toquem a borda extrema em telas menores */
}

.footer-divider__inner {
  width: 100%;
  /* Aumentado de 1300px para 100% ou um valor maior para a linha se estender lateralmente */
  max-width: 1300px; 
  display: flex;
  align-items: center;
}

.footer-divider__vector {
  flex: 0 0 30px;
  height: 6px;
  display: flex;
  align-items: center;
}

.footer-divider__line {
  flex: 1; /* Faz a linha central crescer até o limite do max-width acima */
  height: 6px;
  border-top: 1px solid #553C22;
  border-bottom: 1px solid #553C22;
  box-sizing: border-box;
  opacity: 0.8; /* Suaviza levemente conforme a imagem 1 */
}

/* --- Container do Footer (Centralizado) --- */
.footer-container {
  max-width: 1180px; /* Mantém o conteúdo do footer alinhado ao container principal do site */
  margin: 0 auto;
}

.footer-section {
  position: relative;
  z-index: 10;
  padding: 80px 0 40px; /* Mais espaço no topo do footer */
  background: #000;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 80px;
}

.footer-brand__title {
    font-family: 'Cinzel', serif;
    font-size: 42px; /* Mais próximo do tamanho da Imagem 1 */
    font-weight: 700;
    color: var(--gold);
    margin: 5px 0 25px;
    line-height: 1.1;
    letter-spacing: 0.02em;
}

.footer-nav {
    display: flex;
    gap: 100px; /* Espaço entre as colunas GAME e COMUNIDADE */
}

/* Adicionando o "+" nos links conforme Imagem 1 */
.footer-nav__col a {
    position: relative;
    padding-left: 14px;
    display: block;
    color: rgba(236, 231, 220, 0.6);
    text-decoration: none;
    font-size: 13px;
    margin-bottom: 12px;
    transition: color 0.2s ease;
}

.footer-nav__col a::before {
    content: "";
    position: absolute;
    left: 0;
    color: rgba(236, 231, 220, 0.4);
}

.footer-nav__col a:hover { color: #fff; }

/* Barra Inferior */
.footer-bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 40px;
}

.socials{
  display:flex;
  gap: 10px;
}

.social{
  width: 44px;
  height: 44px;
  display:inline-block;
  border-radius: 50%;
  border: 1px solid rgba(240,217,173,.30);
  background-color: rgba(240,217,173,.06);
  background-position: center;
  background-repeat: no-repeat;
  transition: .15s ease;
}

.social:hover{
  border-color: rgba(240,217,173,.60);
  transform: translateY(-1px);
}

/* imagens */
.social--ig{ background-image: url("../images/redes/instagram.png"); }
.social--fb{ background-image: url("../images/redes/facebook.png"); }
.social--dc{ background-image: url("../images/redes/discord.png"); }
.social--wa { background-image: url("../images/redes/whatsapp.png"); }

.footer__cols{
  display:flex;
  gap: 34px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.footer__col h4{
  margin:0 0 10px;
  color: rgba(240,217,173,.92);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size: 11px;
}
.footer__col a{
  display:block;
  color: rgba(236,231,220,.78);
  text-decoration:none;
  margin-bottom: 8px;
  font-size: 13px;
}
.footer__col a:hover{ color:#fff; }

.footer__bottom{
  grid-column: 1 / -1;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  color: rgba(236,231,220,.55);
  font-size: 12px;
}

/* Video modal */
.video-modal{
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
}
.video-modal[hidden]{ display:none; }
.video-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(6px);
}
.video-modal__panel{
  position: relative;
  width: min(980px, calc(100% - 32px));
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(240,217,173,.25);
  box-shadow: 0 30px 90px rgba(0,0,0,.65);
  background: #000;
  z-index: 2;
}
.video-modal__video{ width: 100%; height: 100%; display:block; }
.video-modal__close{
  position:absolute;
  right: 10px;
  top: 10px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(240,217,173,.30);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  z-index: 3;
}
.video-modal__close:hover{ border-color: rgba(240,217,173,.60); }

/* Responsive */
@media (max-width: 980px){
  .nav{ display:none; }
  .hero__inner{ padding: 50px 0 42px; }
  .hero{ min-height: 560px; }
  .hero__inner{ min-height: 560px; }
  .classes{ grid-template-columns: 1fr; }
  .classes__thumbs{ justify-content:flex-start; }
  .classes__thumbs-wrap{ flex-direction:row; max-height:none; overflow:auto; padding-top:0; padding-bottom:0; }
  .classes__scroll{ display:none; }
  .shop{ grid-template-columns: 1fr; }
  .shop__art{ min-height: 260px; }
  .news-grid, .wall-grid, .faq-grid{ grid-template-columns: 1fr; }
  .footer{ grid-template-columns: 1fr; }
  .footer__cols{ justify-content:flex-start; }
  .class-ui__brief{ display:none; }
  .class-ui__panel{ width: min(860px, calc(100% - 52px)); grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .hero__cta{ display:none; }
  .topbar__inner{ padding: 14px 0; }
  .brand img{ height: 32px; }
}

/* === Classes: botão Jogar (imagem) === */
.btn-jogar{
  width: 210px;
  height: 54px;
  display: inline-block;
  background: url("../images/jogar.png") center/contain no-repeat;
  border-radius: 12px;
  margin-top: 10px;
}
.btn-jogar:hover{ transform: translateY(-1px); filter: brightness(1.03); }

/* === Classes: bloco de detalhes (lado esquerdo) === */
.class-details{
  margin-top: 18px;
  padding: 16px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(10px);
}
.class-details__row{ margin: 10px 0; color: rgba(236,231,220,.82); line-height: 1.55; font-size: 13px; }
.class-details__row .k{ color: rgba(240,217,173,.92); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; margin-right: 6px; }
.class-details__row .v{ color: rgba(236,231,220,.82); }

/* === Painel dentro da arte: texto compacto + não encostar no play === */
.class-ui__panel{
  left: 24px;
  right: 24px;
  bottom: 22px;
  width: auto;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(240,217,173,.18);
  box-shadow: 0 25px 70px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
}
.class-ui__mini{ color: rgba(236,231,220,.84); font-size: 12.5px; line-height: 1.45; display: grid; gap: 8px; }
.class-ui__mini .k{ color: rgba(240,217,173,.90); text-transform: uppercase; letter-spacing: .10em; font-size: 10px; margin-right: 6px; }
.class-ui__mini .muted{ color: rgba(236,231,220,.72); }

/* === Triângulo com preenchimento === */
.tri__fill{
  fill: rgba(240,217,173,.35);
  stroke: rgba(240,217,173,.55);
  stroke-width: 1.5;
}
.tri__point{ display:none; } /* remove a bolinha */

/* === Thumbs: paginação (3 por vez) === */
.thumb.is-hidden{ display:none; }

/* thumbs tamanho/recorte mais parecido com Figma */
.thumb{
  width: 96px;
  height: 118px;
  border-radius: 12px;
}
.thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position:center;
  padding:0;
}

/* setas por imagem */
.classes__scroll span{ display:none; }
.classes__scroll{
  width:56px;
  height:56px;
  border:0;
  background: transparent;
  cursor:pointer;
  opacity:.92;
  transition:.15s ease;
}
.classes__scroll:hover{ opacity:1; transform:translateY(-1px); }

.classes__scroll--up{
  background: url("../images/up-class.png") center/contain no-repeat;
  top: 10px;
  bottom: auto;
}
.classes__scroll--down{
  background: url("../images/down.classe.png") center/contain no-repeat;
  bottom: 10px;
}

/* play: garante acima do painel e fora do triângulo */
.classes__play{
  z-index: 6;
  right: 190px;
  top: 55%;
}

/* responsivo */
@media (max-width: 980px){
  .btn-jogar{ width: 200px; height: 52px; }
  .classes__play{ right: 26px; top: 56%; }
}

/* =========================
   HOTFIXES (arrows + play)
   ========================= */

/* garante que as setas fiquem por cima das thumbs */
.classes__thumbs{ position: relative; }
.classes__thumbs-window{ position: relative; z-index: 1; }
.classes__thumbs-wrap{ position: relative; z-index: 1; }
.classes__scroll{
  position: relative;
  z-index: 50;
}

/* subir um pouco o botão de vídeo (play) */
.classes__play{
  top: 44% !important;
}

/* =========================
   CLASSES: setas maiores e posição correta
   ========================= */

/* aside vira “coluna” e vira referência para absolute */
.classes__thumbs{
  position: relative;
  width: 120px;              /* largura lateral */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* janela com 3 thumbs: reserva espaço em cima/baixo pras setas */
.classes__thumbs-window{
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;

  /* 3 thumbs visíveis */
  height: calc((118px * 3) + (12px * 2));
  overflow: hidden;

  /* espaço para as setas não ficarem em cima das thumbs */
  padding-top: 76px;
  padding-bottom: 76px;
  box-sizing: border-box;
}

/* setas: absolutas, grandes e sempre por cima */
.classes__scroll{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;               /* MAIOR */
  height: 72px;              /* MAIOR */
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 999;              /* na frente de tudo */
  opacity: .95;
  transition: .15s ease;
}
.classes__scroll:hover{
  opacity: 1;
  transform: translateX(-50%) translateY(-1px);
}

.classes__scroll--up{
  top: 0px;
  background: url("../images/up-class.png") center/contain no-repeat;
}
.classes__scroll--down{
  bottom: 0px;
  background: url("../images/down.classe.png") center/contain no-repeat;
}

/* thumbs (mantém do jeito certo) */
.thumb{
  width: 96px;
  height: 118px;
  border-radius: 12px;
  border: 1px solid rgba(240,217,173,.20);
  background: rgba(0,0,0,.30);
  overflow:hidden;
  padding:0;
}
.thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position:center;
}

/* =========================
   FAQ: corners Figma (SVG)
   ========================= */

.faq-item{
  position: relative;
  border: 1px solid rgba(240,217,173,.18);
  border-radius: 18px;
  background: rgba(0,0,0,.30);
  overflow: hidden;
}

/* cantos */
.faq-corner{
  position: absolute;
  width: 58px;
  height: 58px;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;                 /* fechado: some */
  pointer-events: none;
}

.faq-corner.tl{ top: 0; left: 0; }
.faq-corner.tr{ top: 0; right: 0; }
.faq-corner.bl{ bottom: 0; left: 0; }
.faq-corner.br{ bottom: 0; right: 0; }

/* aberto: aparece e usa os vetores que você passou */
.faq-item.is-open .faq-corner{ opacity: 1; }

.faq-item.is-open .faq-corner.tl{ background-image: url("../images/vector-470.svg"); }
.faq-item.is-open .faq-corner.tr{ background-image: url("../images/vector-471.svg"); }
.faq-item.is-open .faq-corner.bl{ background-image: url("../images/vector-477.svg"); }
.faq-item.is-open .faq-corner.br{ background-image: url("../images/vector-476.svg"); }

/* título e layout mais próximo do figma */
.faq-q{
  padding: 20px 64px 20px 20px;
  font-family: Cinzel, serif;
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 12px;
}

.faq-arrow{
  width: 50px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(240,217,173,.28);
  display: grid;
  place-items: center;

  /* imagem padrão (fechado) */
  background: rgba(0,0,0,.35) url("../images/faq/arrow-down.png") center/50px 54px no-repeat;
}

/* quando expandido, troca a imagem */
.faq-item.is-open .faq-arrow{
  background-image: url("../images/faq/arrow-up.png");
}

/* conteúdo expandido */
.faq-a p{
  padding: 0 20px 20px;
  color: rgba(236,231,220,.78);
  line-height: 1.6;
}


/* =========================
   Modal acima das setas (Classes)
   ========================= */
body.modal-open .classes__scroll{
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
body.modal-open .classes__thumbs{
  pointer-events: none !important;
}

/* =========================
   CLASSES: fundo full (igual Figma)
   ========================= */
#classes{
  position: relative;
  overflow: hidden;
}
/* imagem de fundo setada via JS: --class-bg */
#classes::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--class-bg, none) center/cover no-repeat;
  filter: saturate(1.02) contrast(1.05);
  z-index: 0;
}
/* vinheta/escurecimento */
#classes::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 520px at 55% 40%, rgba(0,0,0,.15), rgba(0,0,0,.72) 60%, rgba(0,0,0,.92) 100%),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.65));
  z-index: 1;
}
/* conteúdo acima */
#classes .container{ position: relative; z-index: 2; }

/* card central mais transparente para aparecer o fundo */
#classes .classes__art{
  background: transparent !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* a imagem interna não deve competir com o fundo full */
#classes .classes__art #classMain{
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =========================
   NEWS PAGE FIX (escopado)
   ========================= */

.page-news{
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* volta o espaço da topbar (ela é absolute) e não deixa sobra preta no final */
.page-news main.news-page{
  flex: 1;
  padding: 110px 0 0; /* ajuste fino: 100~120 conforme o seu gosto */
}

/* espaço ANTES do footer (não depois) */
.page-news #listView,
.page-news #detailView{
  padding-bottom: 60px;
}

/* garante que o detalhe não aparece na lista antes do JS */
.page-news #detailView{
  display: none;
}

/* opcional: se algum CSS sobrescrever .is-hidden */
.page-news .is-hidden{
  display: none !important;
}

/* ====== NEWS PAGE (mínimo extra pra ficar parecido com a imagem 2) ====== */
#listView, #detailView { padding-bottom: 60px; }

/* Hero/Featured */
/* ======================================================
   Hero/Featured (Capa da Notícia Mais Recente)
   ====================================================== */
.news-hero {
  position: relative;
  min-height: 480px;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  border: none;
  background: transparent;
  box-shadow: none;
}

.news-hero__bg {
  position: absolute; 
  inset: 0;
  /* Como o texto foi pra direita, a imagem foca na esquerda */
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  filter: saturate(1.05) contrast(1.05);
  z-index: 0;
}

.news-hero__shade {
  position: absolute; 
  inset: 0;
  z-index: 1;
  /* Removido o escurecimento preto da direita! 
     Deixei apenas uma sombrinha bem leve embaixo para dar leitura caso a imagem seja muito clara na área do botão. */
  background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, transparent 25%);
}

.news-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Reduzimos a largura máxima para o bloco ficar mais compacto */
  max-width: 580px; 
  
  /* Empurra para a direita e dá um respiro da borda */
  margin-left: auto; 
  margin-right: 40px; 
  padding: 40px 0;
  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.news-hero__title {
  font-family: 'Cinzel', serif;
  font-size: clamp(28px, 3.5vw, 44px); /* Fonte levemente ajustada */
  line-height: 1.1;
  margin: 0 0 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  /* Trava a largura do título para forçar a quebra de linha (ex: ficar em 2 linhas) */
  max-width: 580px; 
}

.news-hero__divider {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 24px;
  /* A linha agora vai acompanhar o tamanho reduzido do bloco */
}

.news-hero__excerpt {
  font-family: 'Inter', sans-serif;
  font-size: 16px; /* Texto descritivo um pouco menor */
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 24px;
  line-height: 1.5;
}

.news-hero__kicker {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.news-hero__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #E0CCB1 0%, #B78F6D 100%);
}

.news-hero__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 705px; /* Mesma largura da linha do Figma */
}

.news-hero__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 198px;
  height: 65px;
  color: #fff;
  font-family: 'Cinzel', serif;
  font-size: 23px; /* Igual ao Figma */
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  transition: filter 0.2s, transform 0.2s;
}

.news-hero__btn:hover {
  filter: brightness(1.2);
  transform: scale(1.02);
}

.news-hero__btn-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.news-hero__meta {
  font-family: 'Inter', sans-serif;
  font-size: 11.3px; /* Igual ao Figma */
  font-weight: 600;
  letter-spacing: 3px;
  color: #FBCEA0;
  text-transform: uppercase;
  text-align: right;
}

/* Ajuste para Celulares */
@media (max-width: 860px) {
  .news-hero {
    min-height: 600px;
    align-items: flex-end;
  }
  .news-hero__bg {
    background-position: center top;
  }
  .news-hero__shade {
    /* No celular o fundo escuro vem de baixo */
    background: linear-gradient(0deg, #060606 0%, #060606 50%, rgba(6,6,6,0.6) 80%, transparent 100%);
  }
  .news-hero__inner {
    max-width: 100%;
    padding: 30px 20px;
    align-items: center;
    text-align: center;
  }
  .news-hero__footer {
    flex-direction: column;
    gap: 20px;
    justify-content: center;
  }
  .news-hero__meta {
    text-align: center;
  }
}

/* Search + sort bar */
.news-controls {
  display:flex;
  gap:12px;
  align-items:center;
  justify-content: space-between;
  margin: 18px 0 26px;
  flex-wrap: wrap;
}
.news-search {
  display:flex;
  gap:10px;
  align-items:center;
  flex: 1 1 520px;
  min-width: 280px;
}
.news-search input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.32);
  color: #fff;
  outline: none;
}
.news-search button {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.32);
  color:#fff;
  cursor:pointer;
  white-space: nowrap;
}
.news-sort {
  flex: 0 0 auto;
  display:flex;
  gap:10px;
  align-items:center;
}
.news-sort select {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.32);
  color: #fff;
  outline:none;
  cursor:pointer;
}

/* Grid cards (reusa sua news-card/news-grid do style.css) */
.news-grid { margin-top: 6px; }

/* Pager */
.pager {
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:12px;
  margin-top: 26px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.24);
}
.pager .pager__btn {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.26);
  color:#fff;
  padding: 10px 14px;
  border-radius: 12px;
  cursor:pointer;
  white-space: nowrap;
}
.pager .pager__btn[disabled] { opacity:.45; cursor:not-allowed; }
.pager__pages {
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  flex:1;
  flex-wrap: wrap;
}
.pager__page {
  min-width: 34px;
  text-align:center;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color:#fff;
  cursor:pointer;
  user-select:none;
}
.pager__page.is-active {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
}
.pager__dots { opacity:.6; padding:0 6px; }

/* Detail view */
.news-detail { padding-top: 14px; }
.news-detail .news-title { margin: 12px 0 8px; }
.news-detail .news-meta { opacity:.75; margin-bottom: 18px; }
.news-detail .news-cover { width:100%; border-radius: 16px; overflow:hidden; margin: 18px 0; }
.news-detail .news-cover img { width:100%; display:block; max-height: 420px; object-fit: cover; }
.news-detail .news-content { line-height: 1.7; }
.news-detail .news-content img { max-width: 100%; border-radius: 12px; }
.news-detail .news-content pre { padding: 14px; border-radius: 12px; overflow:auto; }

/* hidden helper */
.is-hidden { display:none !important; }

.news-content .news-spoiler-block{
  border:1px dashed rgba(240,217,173,.28);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  margin:16px 0;
  overflow:hidden;
}

.news-content .news-spoiler-block__toggle{
  padding:12px 14px;
  background:rgba(240,217,173,.08);
  color:#F0D9AD;
  cursor:pointer;
  user-select:none;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:.78rem;
}

.news-content .news-spoiler-block__toggle:hover{
  background:rgba(240,217,173,.14);
}

.news-content .news-spoiler-block__content{
  display:none;
  padding:14px;
}

.news-content .news-spoiler-block[data-open="1"] .news-spoiler-block__content{
  display:block;
}

.news-table-wrap{
  width:100%;
  overflow-x:auto;
  margin:20px 0;
}

.news-content table{
  border-collapse:collapse;
  border-spacing:0;
  background:linear-gradient(180deg, rgba(20,24,34,.92), rgba(12,16,24,.92));
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  min-width:320px;
  max-width:100%;
  overflow:hidden;
}

.news-content th,
.news-content td{
  border:1px solid rgba(255,255,255,.12);
  padding:12px 16px;
  min-width:80px;
  text-align:left;
  vertical-align:top;
  color:#e8edf7;
  white-space:nowrap;
}

.news-content th{
  background:rgba(255,255,255,.05);
  font-weight:700;
}

.news-content tr:nth-child(even) td{
  background:rgba(255,255,255,.025);
}
/* =========================================================
   CLASSES: visual mais fiel ao Figma (personagens)
   - Mantém seu script.js (dados/seleção)
   ========================================================= */

/* fundo: mostra a arte inteira (sem cortar) */
#classes{
  position: relative;
  overflow: hidden;
}
#classes::before{
  content:"";
  position:absolute;
  inset:0;
  background-color:#000;
  background-image: var(--class-bg, none);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain; /* <- não corta */
  filter: saturate(1.03) contrast(1.06);
  z-index: 0;
}

/* máscara/textura do export (opcional) */
#classes .classes__bgmask{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("../images/figma/v723_1718.png") center/contain no-repeat;
  opacity: .9;
  z-index: 1;
}

/* vinheta/escurecimento por cima (mais leve) */
#classes::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1100px 560px at 55% 40%, rgba(0,0,0,.12), rgba(0,0,0,.58) 62%, rgba(0,0,0,.86) 100%),
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.55));
  z-index: 2;
}

#classes .container{ position: relative; z-index: 3; }

/* layout geral */
#classes .classes{
  grid-template-columns: 360px 1fr 132px;
  gap: 18px;
  align-items: stretch;
}

/* coluna esquerda (texto) */
#classes .classes__copy{
  padding-top: 52px;
}
#classes .classes__lore{
  max-width: 44ch;
}

/* área do meio vira “overlay” (sem card preto) */
#classes .classes__art{
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  min-height: 660px;
}

/* não usar a imagem interna (a arte vem do fundo full) */
#classes .classes__art #classMain{
  opacity: 0 !important;
  pointer-events: none !important;
}

/* remove o fade antigo (a vinheta já faz isso) */
#classes .classes__art-fade{ display:none; }

/* play do Figma: retângulo claro */
#classes .classes__play{
  width: 154px;
  height: 86px;
  border-radius: 10px;
  border: 1px solid rgba(240,217,173,.35);
  background: rgba(240,217,173,.22);
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  right: clamp(150px, 23%, 310px);
  top: 44%;
  transform: translateY(-50%);
}
#classes .classes__play::before{
  border-top-width: 12px;
  border-bottom-width: 12px;
  border-left-width: 18px;
}

/* sumir com a caixinha pequena do canto (não tem no figma) */
#classes .class-ui__brief{ display:none; }

/* painel inferior mais parecido */
#classes .class-ui__panel{
  left: 22px;
  right: 22px;
  bottom: 20px;
  width: auto;
  grid-template-columns: 1fr 260px;
  gap: 18px;
  border-radius: 18px;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(240,217,173,.28);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  backdrop-filter: blur(16px);
}
#classes .class-ui__panel-title{
  font-family: Cinzel, serif;
  letter-spacing: .16em;
}

/* thumbs: não recortar (as imagens já têm moldura) */
#classes .thumb{
  width: 112px;
  height: 138px;
  border: 0;
  background: transparent;
  border-radius: 0;
}
#classes .thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* <- mostra a moldura inteira */
  object-position: center;
}

/* setas ligeiramente menores pra combinar */
#classes .classes__scroll{
  width: 66px;
  height: 66px;
}

@media (max-width: 980px){
  #classes .classes{ grid-template-columns: 1fr; }
  #classes .classes__art{ min-height: 620px; }
  #classes .classes__play{ right: 26px; }
  #classes .classes__bgmask{ opacity: .7; }
}


/* ===== classes v7 refinado ===== */
#classes .classes{
  grid-template-columns: 340px 1fr 128px;
  gap: 26px;
  padding-top: 24px;
}

#classes .classes__copy{
  padding-top: 96px;
  align-self: start;
}

#classes .section__kicker{
  margin-bottom: 2px;
}

#classes .section__title{
  font-size: clamp(2.9rem, 4.2vw, 4.4rem);
  line-height: .92;
  margin-bottom: 14px;
}

#classes .classes__lore{
  max-width: 37ch;
  font-size: 13px;
  line-height: 1.38;
  text-shadow: 0 8px 26px rgba(0,0,0,.72);
}

#classes .btn-jogar{
  margin-top: 14px;
}

#classes .classes__art{
  min-height: 780px;
}

#classes .classes__play{
  width: 160px;
  height: 84px;
  right: 158px;
  top: 43%;
  border-radius: 0;
  border: 1px solid rgba(240,217,173,.52);
  background: rgba(240,217,173,.92);
  box-shadow: 0 18px 40px rgba(0,0,0,.34);
}

#classes .classes__play::before{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(0,0,0,.15);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.1);
  clip-path: none;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

#classes .classes__play::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-36%, -50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid rgba(255,255,255,.95);
}

#classes .class-ui{
  position: absolute;
  inset: 0;
}

#classes .class-ui__panel{
  left: 0;
  right: 0;
  bottom: 34px;
  min-height: 280px;
  padding: 22px 24px 18px;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 22px;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(16,13,12,.58), rgba(12,10,10,.47));
  border: 1px solid rgba(240,217,173,.46);
  backdrop-filter: blur(8px);
  box-shadow: 0 22px 60px rgba(0,0,0,.42);
}

#classes .class-ui__panel::before,
#classes .class-ui__panel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

#classes .class-ui__panel::before{
  background:
    linear-gradient(90deg, rgba(240,217,173,.66), rgba(240,217,173,.16) 18%, rgba(240,217,173,.16) 82%, rgba(240,217,173,.66)) top 0 left 18px / calc(100% - 36px) 1px no-repeat,
    linear-gradient(90deg, rgba(240,217,173,.66), rgba(240,217,173,.16) 18%, rgba(240,217,173,.16) 82%, rgba(240,217,173,.66)) bottom 0 left 18px / calc(100% - 36px) 1px no-repeat,
    linear-gradient(180deg, rgba(240,217,173,.66), rgba(240,217,173,.14) 18%, rgba(240,217,173,.14) 82%, rgba(240,217,173,.66)) top 18px left 0 / 1px calc(100% - 36px) no-repeat,
    linear-gradient(180deg, rgba(240,217,173,.66), rgba(240,217,173,.14) 18%, rgba(240,217,173,.14) 82%, rgba(240,217,173,.66)) top 18px right 0 / 1px calc(100% - 36px) no-repeat;
}

#classes .class-ui__panel::after{
  background:
    radial-gradient(circle at 0 0, transparent 20px, rgba(0,0,0,0) 21px),
    linear-gradient(135deg, rgba(240,217,173,.9) 0 1px, transparent 0) top left/28px 28px no-repeat,
    linear-gradient(225deg, rgba(240,217,173,.9) 0 1px, transparent 0) top right/28px 28px no-repeat,
    linear-gradient(45deg, rgba(240,217,173,.9) 0 1px, transparent 0) bottom left/28px 28px no-repeat,
    linear-gradient(-45deg, rgba(240,217,173,.9) 0 1px, transparent 0) bottom right/28px 28px no-repeat;
  opacity: .9;
}

#classes .class-ui__traits{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#classes .class-ui__panel-title{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 14px;
  color:#fff;
  font-family: Cinzel, serif;
  font-size: 17px;
  letter-spacing: .03em;
  line-height: .95;
}

#classes .class-ui__panel-title::before{
  content:"";
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  background: url("../images/figma/v723_1746.png") center/contain no-repeat;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.45));
}

#classes .class-ui__spec{
  display:flex;
  flex-direction:column;
  gap:6px;
  color: rgba(255,255,255,.92);
  font-size: 10px;
  line-height: 1.35;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}

#classes .class-ui__spec-row{
  margin:0;
}

#classes .class-ui__spec-row strong{
  color: rgba(240,217,173,.92);
  font-weight: 600;
}

#classes .class-ui__stats{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 236px;
}

#classes .tri{
  position: relative;
  width: 290px;
  height: 224px;
  display:flex;
  align-items:center;
  justify-content:center;
}

#classes .tri__svg{
  width: 290px;
  height: 224px;
  overflow: visible;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.2));
}

#classes .tri__grid{
  fill: none;
  stroke: rgba(255,255,255,.95);
  stroke-width: 1.7;
}

#classes .tri__grid--mid1,
#classes .tri__grid--mid2,
#classes .tri__grid--mid3{
  stroke-width: 1.35;
  opacity: .96;
}

#classes .tri__axis{
  stroke: rgba(255,255,255,.94);
  stroke-width: 1.35;
}

#classes .tri__fill{
  fill: rgba(240,217,173,.92);
  stroke: rgba(240,217,173,.98);
  stroke-width: 1.2;
}

#classes .tri__label{
  position:absolute;
  font-family: Cinzel, serif;
  font-size: 13px;
  letter-spacing:.04em;
  color: rgba(255,255,255,.96);
}

#classes .tri__label--for{ top: 2px; left: 50%; transform: translateX(-50%); }
#classes .tri__label--int{ left: 26px; bottom: 6px; }
#classes .tri__label--des{ right: 20px; bottom: 6px; }

@media (max-width: 1180px){
  #classes .class-ui__panel{
    grid-template-columns: 1fr;
  }
  #classes .class-ui__stats{
    min-height: 190px;
  }
}

@media (max-width: 980px){
  #classes .classes{
    grid-template-columns: 1fr;
  }
  #classes .classes__copy{
    padding-top: 20px;
  }
  #classes .classes__art{
    min-height: 720px;
  }
  #classes .class-ui__panel{
    min-height: 320px;
  }
}

/* ===== classes v8: sem escurecer o fundo + painel características igual ao export ===== */
#classes::before{
  filter:none;
  background-size: contain;
  background-position: center top;
}
#classes::after{ display:none; }
#classes .classes__bgmask{ display:none; }

#classes .classes{
  position:relative;
  min-height: 860px;
  padding-bottom: 330px;
}

#classes .classes__copy{
  position:relative;
  z-index:5;
}

#classes .section__kicker,
#classes .section__title,
#classes .classes__lore{
  text-shadow: 0 2px 10px rgba(0,0,0,.18);
}

#classes .classes__lore{
  max-width: 40ch;
}

#classes .classes__art{
  min-height: 720px;
  z-index:4;
}

#classes .classes__play{
  z-index: 8;
}

#classes .class-ui{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:visible;
}

#classes .class-ui__panel{
  position:absolute;
  left: calc(-1 * (340px + 26px));
  right: 0;
  bottom: 18px;
  min-height: 280px;
  padding: 34px 26px 22px;
  display:grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 22px;
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(10px);
  border: 0;
  border-radius: 0;
  box-shadow:none;
  overflow:visible;
}

#classes .class-ui__panel::before,
#classes .class-ui__panel::after{ content:none; }

#classes .class-panel__edge,
#classes .class-panel__divider,
#classes .class-panel__corner{
  position:absolute;
  pointer-events:none;
}

#classes .class-panel__edge svg,
#classes .class-panel__corner svg{
  display:block;
  width:100%;
  height:100%;
}

#classes .class-panel__edge--top,
#classes .class-panel__edge--bottom{
  left: 10px;
  right: 10px;
  height: 13px;
  border-top: 1px solid #32302C;
  border-bottom: 1px solid #32302C;
}
#classes .class-panel__edge--top{ top: -1px; }
#classes .class-panel__edge--bottom{ bottom: -1px; }
#classes .class-panel__edge--top svg,
#classes .class-panel__edge--bottom svg{
  width:17.18px;
  height:9px;
  margin:1px 0 0 0;
}

#classes .class-panel__edge--left,
#classes .class-panel__edge--right{
  top: 10px;
  bottom: 10px;
  width: 13px;
  border-left: 1px solid #B1906A;
  border-right: 1px solid #B1906A;
}
#classes .class-panel__edge--left{ left: -1px; }
#classes .class-panel__edge--right{ right: -1px; }
#classes .class-panel__edge--left svg,
#classes .class-panel__edge--right svg{
  width:9px;
  height:17.18px;
  margin:0 0 0 1px;
}

#classes .class-panel__divider{
  left: 60px;
  right: 60px;
  height:1px;
  background: linear-gradient(90deg, #B1906A 0%, #534C3F 50%, #B1906A 100%);
}
#classes .class-panel__divider--top{ top:0; }
#classes .class-panel__divider--bottom{ bottom:0; }

#classes .class-panel__corner{
  width:94px;
  height:94px;
  overflow:hidden;
}
#classes .class-panel__corner--tl{ left:0; top:0; }
#classes .class-panel__corner--tr{ right:0; top:0; transform: rotate(90deg); transform-origin:center; }
#classes .class-panel__corner--bl{ left:0; bottom:0; transform: rotate(270deg); transform-origin:center; }
#classes .class-panel__corner--br{ right:0; bottom:0; transform: rotate(180deg); transform-origin:center; }

#classes .class-ui__traits{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-width:0;
  padding-right: 8px;
}

#classes .class-ui__panel-title{
  display:flex;
  align-items:center;
  gap:14px;
  margin: 0 0 12px;
  color:#fff;
  font-family: "Palatino Linotype", Cinzel, serif;
  font-weight:700;
  font-size:18px;
  text-transform:uppercase;
  line-height: 1.1;
  letter-spacing:.02em;
}
#classes .class-ui__panel-title::before{
  width:64px;
  height:64px;
  flex: 0 0 64px;
  background: url("../images/figma/v723_1746.png") center/contain no-repeat;
  filter:none;
}

#classes .class-ui__spec{
  color:#fff;
  font-size:12px;
  line-height:1.25;
  text-shadow: 0 4px 10px rgba(0,0,0,.25);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  min-height: 162px;
}
#classes .class-ui__spec-row{
  margin:0;
}
#classes .class-ui__spec-row strong{
  color:#D7B07A;
  font-weight:700;
}

#classes .class-ui__stats{
  min-height: 220px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-right: 12px;
  z-index:2;
}

#classes .tri{
  width:278px;
  height:187px;
}
#classes .tri__svg{
  width:278px;
  height:187px;
  filter:none;
}
#classes .tri__grid,
#classes .tri__axis{
  stroke: rgba(255,255,255,.98);
}
#classes .tri__grid{ stroke-width: 1.55; }
#classes .tri__grid--mid1,
#classes .tri__grid--mid2,
#classes .tri__grid--mid3,
#classes .tri__axis{ stroke-width:1.2; }
#classes .tri__fill{
  fill:#F0D9AD;
  stroke:#F0D9AD;
  stroke-width:1.1;
}
#classes .tri__label{
  font-family: "Palatino Linotype", Cinzel, serif;
  font-size:13px;
  color:#fff;
  text-transform:uppercase;
}
#classes .tri__label--for{ top:0; }
#classes .tri__label--int{ left:18px; bottom:0; }
#classes .tri__label--des{ right:14px; bottom:0; }

@media (min-width: 1281px){
  #classes .class-ui__panel{
    bottom: 4px;
  }
}

@media (min-width: 1500px){
  #classes .class-ui__panel{
    bottom: -6px;
  }
}

@media (max-width: 1180px){
  #classes .class-ui__panel{
    left: 0;
    grid-template-columns: 1fr;
  }
  #classes .classes{ padding-bottom: 380px; }
}

@media (max-width: 980px){
  #classes .classes{
    min-height: auto;
    padding-bottom: 0;
  }
  #classes .class-ui{
    position:relative;
    inset:auto;
    margin-top: 24px;
  }
  #classes .class-ui__panel{
    position:relative;
    left:0;
    right:0;
    bottom:auto;
    min-height:280px;
  }
  #classes .classes__art{
    min-height: 520px;
  }
}

/* ===== classes v11: restaurar painel com vectors da v9 e descer a seção sem perder a largura ===== */
#classes{
  margin-top: 72px;
}

#classes .classes{
  min-height: 900px;
}

#classes .classes__copy{
  padding-top: 118px;
}

#classes .classes__art{
  min-height: 760px;
}

#classes .classes__play{
  top: 44.5%;
}

#classes .class-ui__panel{
  bottom: -8px;
}

@media (min-width: 1281px){
  #classes .class-ui__panel{
    bottom: -12px;
  }
}

@media (min-width: 1500px){
  #classes .class-ui__panel{
    bottom: -16px;
  }
}

@media (max-width: 1180px){
  #classes{
    margin-top: 44px;
  }
  #classes .classes__copy{
    padding-top: 96px;
  }
}

@media (max-width: 980px){
  #classes{
    margin-top: 24px;
  }
  #classes .classes{
    min-height: auto;
  }
  #classes .classes__copy{
    padding-top: 24px;
  }
  #classes .classes__art{
    min-height: 520px;
  }
}


/* ===== classes v12: setas mais próximas e thumbs maiores ===== */
#classes .classes{
  grid-template-columns: 360px 1fr 156px;
}

#classes .classes__thumbs{
  align-self: center;
  width: 156px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

#classes .classes__thumbs-window{
  width: 100%;
  height: calc((154px * 3) + (10px * 2));
  padding-top: 0;
  padding-bottom: 0;
  gap: 10px;
  overflow: hidden;
}

#classes .classes__scroll{
  position: static;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  transform: none;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  opacity: 1;
}

#classes .classes__scroll:hover{
  transform: translateY(-1px);
}

#classes .classes__scroll--up,
#classes .classes__scroll--down{
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

#classes .thumb{
  width: 126px;
  height: 154px;
}

#classes .thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 1180px){
  #classes .classes{
    grid-template-columns: 320px 1fr 138px;
  }

  #classes .classes__thumbs{
    width: 138px;
  }

  #classes .classes__thumbs-window{
    height: calc((138px * 3) + (8px * 2));
    gap: 8px;
  }

  #classes .thumb{
    width: 112px;
    height: 138px;
  }
}

@media (max-width: 980px){
  #classes .classes__thumbs{
    width: 100%;
    align-self: auto;
    gap: 10px;
  }

  #classes .classes__thumbs-window{
    width: 100%;
    height: auto;
    overflow: auto;
  }

  #classes .classes__scroll{
    display: none;
  }
}

/* ======================================================
   NEWS PAGE: CARDS VERTICAIS & PAGINAÇÃO (Nomes Únicos)
   ====================================================== */

/* --- Grid Exclusivo --- */
.news-vgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}

/* --- Card Vertical --- */
.news-vcard {
  height: 520px;
  position: relative;
  border-radius: 0;
  background: #000;
}

.news-vcard__content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.news-vcard__media {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
  border: none !important;
  
  /* ADICIONE ESTAS 3 LINHAS PARA AJUSTAR A IMAGEM: */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.news-vcard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.95) 100%);
  z-index: 2;
}

.news-vcard__body {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 40px 30px 30px !important;
  background: transparent !important;
  display: flex;
  flex-direction: column;
}

.news-vcard__meta {
  color: #FBCEA0;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.news-vcard__title {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 12px;
  text-transform: uppercase;
}

.news-vcard__text {
  color: rgba(255, 255, 255, 0.65);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-vcard__link {
  margin-top: auto;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.news-vcard__link::before {
  content: "";
  width: 24px;
  height: 2px;
  background: #FBCEA0;
  transition: width 0.3s;
}
.news-vcard__link:hover::before {
  width: 32px;
  background: #fff;
}

/* --- SVG Frame do Card Vertical --- */
.news-vcard__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}
.news-vcard__corner {
  position: absolute;
  width: 94px;
  height: 94px;
  color: #FBCEA0;
}
.news-vcard__corner--tl { top: 0; left: 0; }
.news-vcard__corner--tr { top: 0; right: 0; }
.news-vcard__corner--bl { bottom: 0; left: 0; }
.news-vcard__corner--br { bottom: 0; right: 0; }
.news-vcard__corner svg { width: 100%; height: 100%; display: block; }

.news-vcard__line {
  position: absolute;
  background: #FBCEA0;
  opacity: 0.6;
}
.news-vcard__line--top, .news-vcard__line--bottom { left: 30px; right: 30px; height: 1px; }
.news-vcard__line--left, .news-vcard__line--right { top: 30px; bottom: 30px; width: 1px; }
.news-vcard__line--top { top: 0; }
.news-vcard__line--bottom { bottom: 0; }
.news-vcard__line--left { left: 0; }
.news-vcard__line--right { right: 0; }


/* --- Pager Customizado (Com Contorno Fechado) --- */
.news-pager {
  position: relative;
  margin-top: 60px;
  height: 114px;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  background: rgba(0, 0, 0, 0.35); /* Fundo com opacidade */
}

.news-pager__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.news-pager__corner {
  position: absolute;
  width: 94px;
  height: 94px;
  color: #FBCEA0;
}
.news-pager__corner--tl { top: 0; left: 0; }
.news-pager__corner--tr { top: 0; right: 0; }
.news-pager__corner--bl { bottom: 0; left: 0; }
.news-pager__corner--br { bottom: 0; right: 0; }
.news-pager__corner svg { width: 100%; height: 100%; display: block; }

/* Linhas formando a caixa fechada */
.news-pager__line {
  position: absolute;
  background: linear-gradient(90deg, #B1906A, #534C3F, #B1906A);
}
.news-pager__line--left, .news-pager__line--right { background: linear-gradient(180deg, #B1906A, #534C3F, #B1906A); }

.news-pager__line--top, .news-pager__line--bottom { height: 1px; left: 30px; right: 30px; }
.news-pager__line--left, .news-pager__line--right { width: 1px; top: 30px; bottom: 30px; }

.news-pager__line--top { top: 0; }
.news-pager__line--bottom { bottom: 0; }
.news-pager__line--left { left: 0; }
.news-pager__line--right { right: 0; }

.news-pager__sep {
  position: absolute;
  width: 1px;
  top: 11px;
  bottom: 11px;
  background: #32302C;
}
.news-pager__sep--left { left: 220px; }
.news-pager__sep--right { right: 220px; }

.news-pager__content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 0 40px;
}

.news-pager__btn {
  background: transparent;
  border: none;
  color: #FBCEA0;
  font-family: 'Cinzel', serif; /* Fonte premium igual do figma */
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  width: 140px;
  justify-content: center;
  transition: opacity 0.2s, color 0.2s;
}
.news-pager__btn:hover { color: #fff; }
.news-pager__btn[disabled] { opacity: 0.3; cursor: default; pointer-events: none; }

.news-pager__arrow {
  width: 20px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
.news-pager__arrow svg { width: 100%; height: auto; display: block; }

.news-pager__pages {
  display: flex;
  align-items: center;
  gap: 24px;
}

.news-pager__page {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  color: rgba(251, 206, 160, 0.5); /* Cor normal */
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
}
.news-pager__page:hover { color: #FBCEA0; }
.news-pager__page.is-active {
  color: #fff; /* Página atual em BRANCO */
  font-weight: 700;
  transform: scale(1.15);
}
.news-pager__dots {
  color: rgba(251, 206, 160, 0.5);
  font-size: 20px;
}

/* Responsividade News Grid Vert */
@media (max-width: 1080px) {
  .news-vgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .news-vgrid { grid-template-columns: 1fr; }
  .news-vcard { height: 480px; }
  
  .news-pager__sep { display: none; }
  .news-pager__btn { width: auto; font-size: 0; gap: 0; } 
  .news-pager__content { padding: 0 20px; }
  .news-pager__pages { gap: 16px; }
}

/* ======================================================
   NEWS FILTER BAR (Pesquisa da página de notícias)
   ====================================================== */
.news-filter-bar {
  position: relative;
  margin: 18px 0 26px;
  height: 90px;
  background: rgba(0, 0, 0, 0.45);
  isolation: isolate;
  display: flex;
}

.news-filter-bar__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.news-filter-bar__corner {
  position: absolute;
  width: 70px;
  height: 70px;
  color: #FBCEA0;
}
.news-filter-bar__corner--tl { top: 0; left: 0; }
.news-filter-bar__corner--tr { top: 0; right: 0; }
.news-filter-bar__corner--bl { bottom: 0; left: 0; }
.news-filter-bar__corner--br { bottom: 0; right: 0; }
.news-filter-bar__corner svg { width: 100%; height: 100%; display: block; }

.news-filter-bar__line {
  position: absolute;
  background: linear-gradient(90deg, #B1906A, #534C3F, #B1906A);
}
.news-filter-bar__line--left, .news-filter-bar__line--right {
  background: linear-gradient(180deg, #B1906A, #534C3F, #B1906A);
}
.news-filter-bar__line--top, .news-filter-bar__line--bottom { left: 24px; right: 24px; height: 1px; }
.news-filter-bar__line--left, .news-filter-bar__line--right { top: 24px; bottom: 24px; width: 1px; }
.news-filter-bar__line--top { top: 0; }
.news-filter-bar__line--bottom { bottom: 0; }
.news-filter-bar__line--left { left: 0; }
.news-filter-bar__line--right { right: 0; }

.news-filter-bar__content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 0 30px;
}

.news-filter-bar__input {
  flex: 1;
  background: transparent;
  border: none;
  color: #FBCEA0;
  font-family: 'Cinzel', serif;
  font-size: 20px;
  outline: none;
}
.news-filter-bar__input::placeholder {
  color: rgba(251, 206, 160, 0.5);
}

.news-filter-bar__center {
  display: flex;
  align-items: center;
  height: 100%;
}

.news-filter-bar__sep {
  width: 1px;
  height: 60%;
  background: rgba(251, 206, 160, 0.2);
  margin: 0 16px;
}

.news-filter-bar__btn {
  background: transparent;
  border: none;
  color: #FBCEA0;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.2s, color 0.2s;
}
.news-filter-bar__btn:hover {
  color: #fff;
  transform: scale(1.1);
}

.news-filter-bar__sort {
  display: flex;
  align-items: center;
  gap: 12px;
}

.news-filter-bar__sort label {
  color: rgba(251, 206, 160, 0.8);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.news-filter-bar__select {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(251, 206, 160, 0.3);
  color: #FBCEA0;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 30px 10px 12px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  appearance: none;
  /* Seta customizada */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 3L5 6L8 3' stroke='%23FBCEA0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.2s;
}
.news-filter-bar__select:hover {
  border-color: rgba(251, 206, 160, 0.6);
}
.news-filter-bar__select option {
  background: #0b0f18;
  color: #FBCEA0;
}

/* Responsividade (Ajuste para Celular) */
@media (max-width: 860px) {
  .news-filter-bar {
    height: auto;
    flex-direction: column;
    padding: 20px 0;
  }
  .news-filter-bar__content {
    flex-direction: column;
    gap: 20px;
    padding: 0 20px;
  }
  .news-filter-bar__center {
    height: auto;
    width: 100%;
    justify-content: center;
  }
  .news-filter-bar__sep {
    height: 1px;
    width: 40%;
    background: rgba(251, 206, 160, 0.2);
    margin: 0 10px;
  }
  .news-filter-bar__sort {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .news-filter-bar__select {
    width: 100%;
    margin-right: 0 !important;
  }
}