/* =========================================================
   COMMUNITY — bloque en solitario
   Mismo lenguaje visual que changelogs.css / info-basica.css:
   header centrado con líneas doradas a los costados, CTA
   angular con barrido de luz. El widget de Discord vive
   dentro de un panel sutil (única diferencia, ya que el
   iframe necesita un marco para no quedar "pelado").
   Requiere las variables de :root definidas en style.min.css
   (--gold, --gold-light, --gold-dark, --gold-glow).
   ========================================================= */

.community-section {
  background: #000;
  padding: 80px 0;
}

/* ---------- encabezado (centrado) ---------- */

.community-header {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 40px;
  text-align: center;
}

.community-eyebrow {
  color: var(--gold);
  font-family: Cinzel, serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
}

.community-title-row {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: center;
  width: 100%;
}

.community-title-row:before,
.community-title-row:after {
  background: linear-gradient(90deg, transparent, var(--gold-glow));
  content: "";
  height: 1px;
  max-width: 100px;
  width: 100%;
}

.community-title-row:after {
  background: linear-gradient(270deg, transparent, var(--gold-glow));
}

.community-title {
  color: #f8f9fa;
  font-family: Cinzel, serif;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: 4px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- panel del widget ---------- */

.community-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 40%), #0a0a0a;
  border: 1px solid rgba(221, 171, 94, .15);
  border-radius: 12px;
  border-top: 3px solid rgba(221, 171, 94, .5);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
  opacity: 0;
  overflow: hidden;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease, border-top-color .3s ease, box-shadow .3s ease;
}

.community-panel.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.community-panel:hover {
  border-top-color: var(--gold);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .45);
}

.community-panel-top {
  align-items: center;
  border-bottom: 1px solid rgba(221, 171, 94, .15);
  color: #e4e4e7;
  display: flex;
  font-family: Cinzel, serif;
  font-size: .82rem;
  font-weight: 700;
  gap: 10px;
  letter-spacing: 1.2px;
  padding: 16px 22px;
  text-transform: uppercase;
}

.community-panel-top i {
  color: var(--gold);
  font-size: 1rem;
}

.community-status-dot {
  background: #3ba55c;
  border-radius: 50%;
  box-shadow: 0 0 8px #3ba55c, 0 0 14px rgba(59, 165, 92, .5);
  flex-shrink: 0;
  height: 8px;
  margin-left: auto;
  width: 8px;
}

.community-widget {
  background: #000;
  line-height: 0;
}

.community-widget iframe {
  border: 0;
  display: block;
  width: 100%;
}

/* ---------- acciones (centrado) ---------- */

.community-actions {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

.community-btn {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(221, 171, 94, .5);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  color: var(--gold-light);
  display: inline-flex;
  font-family: Cinzel, serif;
  font-size: .85rem;
  font-weight: 700;
  gap: 11px;
  isolation: isolate;
  letter-spacing: 1.8px;
  overflow: hidden;
  padding: 15px 30px;
  position: relative;
  text-decoration: none;
  transition: color .25s ease, letter-spacing .25s ease, transform .18s ease, box-shadow .3s ease, border-color .25s ease;
  white-space: nowrap;
}

.community-btn span,
.community-btn i {
  position: relative;
  z-index: 1;
}

.community-btn-arrow {
  font-size: .72rem;
  transition: transform .25s ease;
}

.community-btn:hover .community-btn-arrow {
  transform: translateX(5px);
}

.community-btn:active {
  transform: translateY(1px);
}

.community-btn:before {
  background: linear-gradient(100deg, transparent 0%, rgba(221, 171, 94, .28) 50%, transparent 100%);
  content: "";
  inset: 0;
  position: absolute;
  transform: translateX(-130%) skewX(-20deg);
  transition: transform .55s ease;
  z-index: 0;
}

.community-btn:hover:before {
  transform: translateX(130%) skewX(-20deg);
}

.community-btn:hover {
  border-color: var(--gold-light);
  box-shadow: 0 0 0 2px rgba(221, 171, 94, .08), 0 0 18px rgba(221, 171, 94, .25);
  color: #fff;
  letter-spacing: 2.4px;
  transform: translateY(-2px);
}

/* ---------- responsive ---------- */

@media (max-width: 767px) {
  .community-widget iframe {
    height: 560px;
  }
}

@media (max-width: 576px) {
  .community-section {
    padding: 56px 0;
  }

  .community-title {
    font-size: 1.5rem;
    letter-spacing: 3px;
  }

  .community-title-row {
    gap: 12px;
  }

  .community-title-row:before,
  .community-title-row:after {
    max-width: 36px;
  }

  .community-panel-top {
    font-size: .74rem;
    padding: 14px 16px;
  }

  .community-widget iframe {
    height: 480px;
  }

  .community-btn {
    justify-content: center;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .community-panel {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .community-btn:before {
    transition: none;
  }
}