/* ============================================================
   COMMUNITY.CSS — Sección de comunidad y cierre de experiencia.
   ============================================================ */

.community {
  position: relative;
  overflow: hidden;
  padding: var(--space-4xl) var(--space-lg);
  /* En px, no en rem: el resto del sistema de espaciado (variables.css)
     usa px. Mezclar rem aquí con padding en px hacía que, ante zoom de
     accesibilidad (que solo escala el tamaño de fuente raíz), esta
     caja creciera a un ritmo distinto que su padding — el
     background-size:cover se recalculaba sobre esa caja desalineada
     y la imagen parecía "moverse"/ocupar más espacio del esperado. */
  min-height: 544px;
  background-color: transparent;
  /* El Navbar es fixed (~80px): sin esto, al llegar aquí (enlace
     "Comunidad" o el nuevo Discord -> #community) el título quedaría
     tapado. */
  scroll-margin-top: 80px;
}

.community::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(19, 29, 26, 0.08), rgba(19, 29, 26, 0.16)),
    url("../assets/images/general/image-community.png");
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  z-index: 0;
}

.community__media {
  display: none;
}

.community__content {
  position: relative;
  z-index: 1;
  max-width: var(--max-width-container);
  margin-inline: auto;
}

.community__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-button);
  background-color: var(--color-green);
  color: var(--color-bg-primary);
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-fast);
  background-image: url("../assets/icons/discord-icon.svg");
  background-repeat: no-repeat;
  background-position: var(--btn-icon-inset) center;
  background-size: var(--btn-icon-size) var(--btn-icon-size);
  padding-inline-start: calc(var(--btn-icon-inset) + var(--btn-icon-size) + var(--btn-icon-gap));
}

.community__btn:hover {
  transform: translateY(-1px) scale(1.01);
  background-color: var(--color-green-hover);
  box-shadow: var(--shadow-glow-green);
}

.community__email {
  display: none;
}

.community__eyebrow {
  margin-bottom: var(--space-sm);
}

.community__title {
  margin: 0;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  max-width: var(--max-width-narrow);
}

.community__description {
  margin: 0;
  max-width: var(--max-width-narrow);
  color: var(--color-text-secondary);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}

@media (max-width: 768px) {
  .community {
    padding: var(--space-2xl) var(--space-lg);
    min-height: 384px;
  }

  .community::before {
    background-position: center 20%;
  }

  .community__title {
    font-size: clamp(2rem, 6vw + 1rem, var(--fs-3xl));
  }
}