/* =========================================================================
   COMUNIDAD - BLOCKOUT SUIZO
   ========================================================================= */

/* 1. HERO COMUNIDAD (CRIMSON BRUTALISTA) */
.community-hero {
  background-color: var(--c-crimson);
  color: var(--c-cream);
  /* C1 fix: horizontal padding removed — .container hijo maneja el padding lateral.
     Antes: var(--spacing-xl) var(--spacing-lg) = doble-padding con .container */
  padding: var(--spacing-xl) 0;
  border-bottom: var(--border-weight) solid var(--c-navy);
}

.community-hero h1 {
  font-size: var(--text-hero);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-hero);
  line-height: 0.9;
  margin-bottom: var(--spacing-md);
}

.community-hero .subtitle {
  font-size: var(--text-h2);
  font-weight: 900;
  margin-bottom: var(--spacing-md);
  text-transform: uppercase;
  letter-spacing: -2px;
}

.community-hero .intro {
  font-size: var(--text-lg);
  max-width: 900px;
}

/* 2. FEATURES DE COMUNIDAD (Grid crudo) */
.community-features {
  background-color: var(--c-cream);
  color: var(--c-navy);
  padding: 0;
}

.feature-block {
  padding: var(--spacing-lg) var(--spacing-md);
  border-bottom: var(--border-weight) solid var(--c-navy);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.feature-block h2 {
  font-size: var(--text-h3);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  margin: 0;
  color: var(--c-navy);  /* Standard heading on light bg */
}
.feature-block h2::after {
  display: none;
}

.feature-block.intro {
    background-color: transparent;
}

.feature-block p {
  font-size: var(--text-p);
  max-width: 1000px;
  margin: 0;
}

/* 3. CTA Y FORMULARIO (NAVY) */
.community-cta {
  background-color: var(--c-navy);
  color: var(--c-cream);
  /* C1 fix: horizontal padding removed — .container maneja el padding */
  padding: var(--spacing-xl) 0;
}

.community-cta h2 {
  font-size: var(--text-h1);
  text-transform: uppercase;
  letter-spacing: -3px;
  color: var(--c-cream);  /* Big heading on dark bg */
  margin-bottom: var(--spacing-md);
}
.community-cta h2::after { display: none; }

.community-form {
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.form-group {
    text-align: left;
}

.form-group label {
  display: block;
  font-weight: 900;
  font-size: var(--text-p);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  color: var(--c-cream);
}

.community-form input {
  width: 100%;
  padding: 1.5rem;
  font-size: 1.25rem;
  font-family: var(--font);
  font-weight: bold;
  background-color: transparent;
  border: var(--border-weight) solid var(--c-cream);
  color: var(--c-cream);
  border-radius: 0;
}

.community-form input::placeholder {
  color: rgba(250, 247, 242, 0.4);
}

.community-form input:focus {
  outline: none;
  background-color: var(--c-cream);
  color: var(--c-navy);
}

.form-submit .microcopy {
  margin-top: 1rem;
  text-align: left;
  font-weight: bold;
  color: rgba(250, 247, 242, 0.6);
}

@media (max-width: 768px) {
  .community-hero,
  .community-cta {
    /* M1 fix: solo vertical padding reducido — horizontal via .container */
    padding: var(--spacing-md) 0;
  }

  .feature-block {
    padding: var(--spacing-md);
  }

  /* C2 fix: letter-spacing -3px causa solapamiento en Gobold condensed a 2.5rem */
  .community-cta h2 {
    letter-spacing: -1px;
  }

  /* A1 fix: inputs demasiado altos (68px) — reducir padding */
  .community-form input {
    padding: 1rem;
    font-size: 1rem;
  }
}