/* COMUNIDAD — estilos y responsive en un solo lugar */
.community {
  .community-intro {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 75px;

    .community-description {
      > p:not(.eyebrow) {
        color: #625e70;
      }
      .large-copy {
        font-size: 1.3rem;
        color: #393445;
      }

      > button.text-link {
        padding: 0;
        border-top: 0;
        border-right: 0;
        border-left: 0;
        background: transparent;
        font: inherit;
        cursor: pointer;
      }
    }
    .community-quote {
      background: #21172f;
      color: #fff;
      padding: clamp(28px, 5vw, 65px);
      border-radius: 24px;

      .quote-mark {
        display: block;
        font-size: 5rem;
        color: #bd8df8;
        line-height: 1;
      }
      blockquote {
        font-size: clamp(1.5rem, 2.6vw, 2.4rem);
        line-height: 1.3;
        font-weight: 650;
        margin: 0 0 25px;
      }
      > p {
        color: #c4b7d2;
      }
    }
  }
  .community-people {
    margin-top: clamp(65px, 9vw, 120px);
    .community-heading {
      max-width: 760px;
      margin-bottom: 50px;
      h3 {
        font-size: clamp(1.7rem, 3vw, 2.5rem);
        line-height: 1.2;
        margin-bottom: 16px;
      }
      p {
        color: #625e70;
      }
    }
    .community-group {
      margin-top: 48px;
      h4 {
        font-size: 1.3rem;
        margin-bottom: 22px;
      }
      .community-group-description {
        max-width: 680px;
        color: #625e70;
        margin-bottom: 24px;
      }
      .community-cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        .community-person {
          display: flex;
          align-items: flex-start;
          gap: 20px;
          padding: 24px;
          border: 1px solid #e5e0ec;
          border-radius: 20px;
          background: #fff;
          > img {
            width: 100px;
            height: 100px;
            flex-shrink: 0;
            border-radius: 18px;
            object-fit: cover;
          }
          .community-person-info {
            min-width: 0;
            h5 {
              font-size: 1.15rem;
              margin-bottom: 5px;
            }
            p {
              color: #625e70;
              font-size: 0.92rem;
              margin-bottom: 8px;
            }
            .community-role {
              color: #6e3eaf;
              font-weight: 700;
            }
            a {
              display: inline-block;
              margin-top: 8px;
              color: #6e3eaf;
              font-size: 0.9rem;
              font-weight: 700;
              text-decoration: none;
              &:hover {
                text-decoration: underline;
              }
              &:focus-visible {
                outline: 2px solid #6e3eaf;
                outline-offset: 4px;
              }
            }
          }
        }
      }
    }
    .community-history {
      padding-top: 35px;
      border-top: 1px solid #e5e0ec;
    }
  }
  @media (max-width: 900px) {
    .community-intro {
      grid-template-columns: 1fr;
      gap: 35px;
    }
    .community-people .community-group .community-cards {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 480px) {
    .community-people .community-group .community-cards .community-person {
      flex-direction: column;
      > img {
        width: 90px;
        height: 90px;
      }
    }
  }
}