/* ============================================================
   BeeGroup — Fase 05: Experiencias y operación
   Covers three sections:
     1. .creamos  — Creamos memorias
     2. .mueve    — Lo que nos mueve  (dark Green Forest, two cards)
     3. .como     — Cómo lo hacemos    (photo + pillars list)
   The three share --bg-off-white with Somos/Marcas so the backdrop
   continuity is preserved. The Creamos photo overlaps downward into
   .mueve; `.mueve` reserves the right amount of top padding to host
   that overlap without hiding the title or cards.
   ============================================================ */

/* ============================================================
   1. Creamos memorias
   ============================================================ */
.creamos {
  /* Fase 10 — overlap bumped so the photo physically extends into the
     green area the way the XD shows it (≈ 35% of photo height on
     desktop). The same token drives `.mueve { padding-top }` so Mueve
     grows vertically in sync and the Misión / Visión cards keep their
     breathing room — no `min-height` needed. */
  --creamos-overlap: clamp(140px, 20vw, 320px);
  background: var(--bg-off-white);
  color: var(--color-text);
  padding-block: clamp(2.5rem, 5vw, 5rem) 0;
  position: relative;
  /* Fase 10.1 — `isolation: isolate` + `z-index: 1` had Creamos winning
     the sides of the overlap zone. Because the figure's negative
     `margin-bottom` collapses through a zero-padding-bottom parent,
     Creamos's border-box ACTUALLY extends to `photo.bottom`, not to
     `mueve.top` as `getBoundingClientRect` suggests. With `z-index: 1`
     Creamos's cream background was painted on top of Mueve's green on
     both sides of the photo — the eye saw a flat line instead of a
     photo floating on green. Removing the stacking promotion lets
     Mueve's green win at the sides; the photo (positioned, z-index: 2)
     still paints above Mueve in the centre, producing the real
     overlap effect from the XD. */
  overflow: visible;
}
.creamos > .container {
  max-width: var(--container-wide);
  position: relative;
  z-index: 1;
}
/* Fase 07A — decorative wavy shapes behind the heading, same source
   as Somos (keeps brandbook rhythm). Low opacity so the photo + text
   stay dominant. */
.creamos__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../images/somos-decor.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  opacity: 0.6;
  pointer-events: none;
}

.creamos__header {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.creamos__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1.08;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.25rem, 0.6vw, 0.5rem);
}
.creamos__title-line {
  display: inline-block;
}
.creamos__title-lead,
.creamos__title-joint {
  color: var(--bg-green);
  font-size: clamp(1.75rem, 3.8vw, 3rem);
}
.creamos__title-mark {
  color: var(--color-primary);     /* Orange Impact */
  font-size: clamp(2rem, 4.6vw, 3.5rem);
}

/* Hero-wide B/W photo, overlaps downward into the next section. */
.creamos__photo {
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  background: #0b0b0b;
  position: relative;
  z-index: 2;
  /* Pull the photo DOWN so it visually bridges into `.mueve`. */
  margin-bottom: calc(-1 * var(--creamos-overlap));
  filter: grayscale(1);
}
.creamos__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ============================================================
   2. Lo que nos mueve
   ============================================================ */
.mueve {
  /* Fase 10 — match `.creamos` so the mueve top padding stays in sync
     with the photo overflow; otherwise Mueve would collapse under the
     photo. */
  --creamos-overlap: clamp(140px, 20vw, 320px);
  position: relative;
  isolation: isolate;
  background: var(--bg-green);
  color: var(--color-text-inv);
  /* Top padding accommodates the overlapping Creamos photo (overlap
     amount + a content-gap). Fase 10.3 — the content-gap was too
     tight (max 1.5rem) and the cards appeared to kiss the photo's
     lower edge; bumped to clamp(1.75rem, 3vw, 3rem) so the Misión /
     Visión cards and the LO QUE NOS MUEVE title breathe below the
     photo. `--creamos-overlap` itself is untouched. */
  padding-block:
    calc(var(--creamos-overlap) + clamp(1.75rem, 3vw, 3rem))
    clamp(2.75rem, 5.25vw, 5rem);
  overflow: hidden;
}
.mueve > .container {
  max-width: var(--container-wide);
  position: relative;
  z-index: 1;
}

/* Decorative wavy pattern (client-supplied PNG) painted behind. */
.mueve__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../images/whatmovesus-bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.18;
  pointer-events: none;
}

.mueve__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 1fr);
  /* Fase 10.3 — row gap enlarged (grid is single-row at desktop, so
     this only kicks in on tablet when the title drops above the cards)
     and column gap a touch more generous to separate title from cards. */
  gap: clamp(1.75rem, 3.25vw, 3.25rem);
  align-items: stretch;
}

.mueve__title-col {
  display: flex;
  align-items: center;
}
.mueve__title {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-text-inv);
  display: flex;
  flex-direction: column;
  gap: clamp(0.1rem, 0.3vw, 0.3rem);
  text-align: right;
}
.mueve__title-line {
  display: inline-block;
}
.mueve__title-mark {
  color: var(--color-primary);
}

/* Light-cream cards for Misión & Visión 2030. */
.mueve__card {
  background: var(--bg-beige);
  color: var(--color-text);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 2.5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  box-shadow: var(--shadow-sm);
}
.mueve__card-label {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  color: var(--color-text);
  letter-spacing: 0.01em;
}
.mueve__card-quote {
  margin: 0;
  font-weight: var(--fw-semibold);
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  line-height: 1.3;
  color: var(--color-text);
}
.mueve__card-body {
  margin: 0;
  font-size: clamp(0.9375rem, 1vw, 1rem);
  line-height: 1.6;
  color: var(--color-text);
}

/* ============================================================
   3. Cómo lo hacemos
   ============================================================ */
.como {
  background: var(--bg-off-white);
  color: var(--color-text);
  padding-block: clamp(3rem, 5.5vw, 5.5rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.como > .container {
  max-width: var(--container-wide);
  position: relative;
  z-index: 1;
}
/* Fase 07A — decorative wavy shapes behind the content, same source
   as Somos / Creamos. Low opacity so the pillars + photo stay
   dominant. */
.como__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.5;
  pointer-events: none;
}

.como__header {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.como__title {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.como__title-lead { color: var(--color-primary); }
.como__title-rest { color: var(--bg-green);      }

.como__body {
  display: grid;
  /* Fase 10.1 — slightly favour the pillars column so the list stops
     feeling compact against the vertical video. XD proportion ≈ 1:2. */
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.55fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: stretch;
}

.como__photo {
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  background: #0b0b0b;
}
.como__photo img,
.como__photo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Image placeholder keeps the Fase 08 top-anchored crop so the
   "Talento — Quiero unirme a BeeGroup" overlay stays clipped out. */
.como__photo > img  { object-position: center top; }
/* The actual client video (portrait 9:16) sits naturally centred
   inside the 4:5 frame — only a modest side-crop, no deformation. */
.como__photo > video { object-position: center; }

/* Fase 09 — the video wrap retains the same frame, so it inherits
   the aspect-ratio + rounded corners + shadow from `.como__photo`. */
.como__photo--video {
  background: #0b0b0b;
}

/* Pillars list on the right — grid-based rows: name | description. */
.como__pillars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Fase 10.3 — slightly larger row gap so the alternating fills read
     as individual pillars rather than a tight stacked panel. */
  gap: clamp(0.75rem, 1.35vw, 1.15rem);
}
.como__pillar {
  display: grid;
  /* Fase 10.3 — name column widened so the pillar titles have more
     room before wrapping; the description column keeps its emphasis
     through the slightly higher ratio and the enlarged inner gap. */
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 2.25vw, 2rem);
  /* Fase 10.3 — padding grown horizontally so names breathe inside the
     coloured tile and don't kiss the left edge. Vertical padding kept
     from Fase 10.1 so the overall pillar list height stays close to
     the video frame on desktop. */
  padding: clamp(1.25rem, 2.25vw, 1.75rem) clamp(1.5rem, 2.5vw, 2.25rem);
  border-radius: var(--radius-md);
  align-items: start;
}
/* Fase 10.1 — alternating backgrounds with greater contrast. Odd rows
   now paint pure white (--bg-white) so the beige of even rows reads
   as a distinct tint rather than a 7-point delta against the section's
   --bg-off-white backdrop. */
.como__pillar:nth-child(odd)  { background: var(--bg-white); }
.como__pillar:nth-child(even) { background: var(--bg-beige); }
.como__pillar-name {
  margin: 0;
  font-weight: var(--fw-semibold);
  /* Fase 10.1 — bumped from 19 → 20 px on 1440 so pillar titles have
     visible authority against descriptions. */
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.3;
  color: var(--color-text);
}
.como__pillar-desc {
  margin: 0;
  /* Fase 10.1 — descriptions bumped from 17 → 18 px on 1440. */
  font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
  line-height: 1.55;
  color: var(--color-text);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .mueve__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 2.5vw, 2rem);
  }
  .mueve__title-col {
    grid-column: 1 / -1;
    justify-content: center;
  }
  .mueve__title { text-align: center; align-items: center; }

  .como__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: clamp(1.25rem, 2.5vw, 2rem);
  }
}

@media (max-width: 768px) {
  .creamos { --creamos-overlap: clamp(32px, 8vw, 80px); }
  .mueve   { --creamos-overlap: clamp(32px, 8vw, 80px); }

  .creamos__photo { aspect-ratio: 4 / 3; }

  .mueve__grid { grid-template-columns: minmax(0, 1fr); }
  .mueve__title-col { justify-content: flex-start; }
  .mueve__title { text-align: left; align-items: flex-start; }

  .como__body {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 2rem);
  }
  .como__photo {
    aspect-ratio: 16 / 10;
    max-width: 420px;
    margin-inline: auto;
  }
  .como__pillar {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(0.35rem, 1vw, 0.6rem);
  }
}

@media (max-width: 480px) {
  .creamos__title-lead,
  .creamos__title-joint,
  .creamos__title-mark {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }
  .mueve__title { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  .como__title  { font-size: clamp(1.75rem, 7.5vw, 2.5rem); }
}