/* ============================================================
   BeeGroup — Section: Somos BeeGroup (Fase 03)
   Composition (per Adobe XD):
     - Light beige backdrop with soft wavy decoration behind.
     - Centered white rounded card.
     - Two columns on desktop: text (left) + photo + stamp (right).
     - Single column on mobile.
   ============================================================ */

.somos {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3rem, 7vw, 7rem);
  background: var(--bg-off-white);
  color: var(--color-text);
  overflow: hidden;
}

/* --- Decorative wavy backdrop (behind the card) ----------- */
.somos__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../images/somos-decor.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.9;
  pointer-events: none;
}

/* --- White card with rounded corners --------------------- */
.somos__card {
  position: relative;
  z-index: 1;
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: clamp(1.75rem, 4vw, 3.75rem) clamp(1.5rem, 4vw, 4rem);
  display: grid;
  /* Fase 03.1 — slightly more generous visuals column so the photo gets
     more presence without crowding the text. */
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

/* ---------- Content column (left) ------------------------ */
.somos__content {
  min-width: 0;
}

.somos__title {
  margin: 0 0 var(--sp-3);
  /* Fase 03.1 — the title is composed of two words with different weights;
     the per-span rules below override. The base weight here applies to
     the mark span by default. */
  font-weight: var(--fw-bold);
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
/* "SOMOS" — Green Forest (brandbook), Poppins Medium. */
.somos__title-lead {
  color: var(--bg-green);
  font-weight: var(--fw-medium);
}
/* "BEEGROUP." — Orange Impact (brandbook), Poppins Bold. */
.somos__title-mark {
  color: var(--color-primary);
  font-weight: var(--fw-bold);
}

.somos__subtitle {
  margin: 0 0 clamp(1.5rem, 2.2vw, 2rem);
  /* Fase 03.1 — Poppins Regular, slightly bigger than before, dark grey.
     Clearly secondary to the title but ahead of the body copy. */
  font-weight: var(--fw-regular);
  font-size: clamp(1.25rem, 1.9vw, 1.625rem);
  line-height: 1.3;
  color: var(--color-text);
}

.somos__body {
  color: var(--color-text);
  /* Fase 03.1 — larger body copy + more airy line-height to match XD. */
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.75;
  /* Cap the measure for comfortable reading without touching the grid. */
  max-width: 60ch;
}
.somos__body > p { margin: 0 0 var(--sp-5); }
.somos__body > p:last-child { margin-bottom: 0; }
.somos__body strong { font-weight: var(--fw-semibold); color: var(--color-text); }

/* ---------- Visual column (right) ------------------------
   Fase 03.1 — photo gets more presence, stamp grows and shifts
   from the right edge toward the column centre, matching XD. */
.somos__visuals {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  min-width: 0;
}

.somos__photo {
  margin: 0;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 3 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.somos__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.somos__stamp {
  margin: 0;
  width: clamp(120px, 13vw, 180px);
  /* Centred horizontally in the column (XD places it near the middle,
     noticeably left of the photo's right edge — not pinned to the
     corner). No arbitrary margin offsets. */
  align-self: center;
}
.somos__stamp img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width: 1025px) {
  /* Enough room for "SOMOS BEEGROUP." to live on one line. */
  .somos__title { white-space: nowrap; }
}

@media (max-width: 1024px) {
  .somos__card {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
  }
  .somos__photo { max-width: 340px; }
  .somos__stamp { width: clamp(104px, 12vw, 150px); }
}

@media (max-width: 768px) {
  .somos__card {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 2.25rem);
    padding: clamp(1.25rem, 5vw, 2rem);
    text-align: left;
  }
  .somos__body { max-width: none; }
  .somos__visuals {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: clamp(1rem, 3vw, 1.75rem);
  }
  .somos__photo {
    max-width: 260px;
    aspect-ratio: 3 / 4;
    flex: 1 1 auto;
  }
  .somos__stamp {
    width: clamp(96px, 22vw, 140px);
    align-self: flex-end;
    flex: 0 0 auto;
  }
  .somos__title { font-size: clamp(1.5rem, 6vw, 2rem); }
}

@media (max-width: 480px) {
  .somos__visuals {
    flex-direction: column;
    align-items: center;
  }
  .somos__photo {
    max-width: 100%;
    aspect-ratio: 4 / 5;
  }
  .somos__stamp {
    width: clamp(112px, 28vw, 144px);
    align-self: center;
  }
}