/* ============================================================
   BeeGroup — Fase 06: cierre de la landing
   Covers four blocks:
     1. .indicadores — orange card, 4-up KPI figures
     2. .cierre      — "BeeGroup. / Be Extraordinary." typographic bridge
     3. .contacto    — dark green bg with two card buttons + inline forms
     4. .site-footer — brand mark, nav column(s), orange legal pill
   ============================================================ */

/* ============================================================
   1. Indicadores — orange card floated on a light backdrop
   Fase 07A — the SECTION is on the shared light cream backdrop;
   only the inner card is orange. More section padding + the
   narrower default `.container` (1200 px) give the card clear
   breathing room on all four sides so the backdrop reads light.
   ============================================================ */
.indicadores {
  background: var(--bg-off-white);
  /* Fase 08 — balanced rhythm against the next sections. The bottom
     padding is intentionally slightly tighter than the top so the gap
     to the Cierre block stays compact. */
  padding-block: clamp(3rem, 5vw, 5rem) clamp(2.25rem, 3.5vw, 3.5rem);
}

.indicadores__card {
  background: var(--color-primary);  /* Orange Impact */
  color: var(--color-text-inv);
  border-radius: var(--radius-xl);
  /* Fase 10 — more generous vertical padding so the card stops reading
     as a thin strip (measured aspect 4.80:1 → closer to 3.5:1). */
  padding: clamp(2.25rem, 3.75vw, 3.5rem) clamp(1.25rem, 2.5vw, 2.5rem);
  box-shadow: var(--shadow-sm);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-inline: auto;
  max-width: var(--container-max);
}

.indicadores__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.indicadores__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(0.5rem, 1.5vw, 1.25rem) clamp(0.5rem, 1.75vw, 1.5rem);
  position: relative;
}
/* Vertical dividers between items (not on the first). */
.indicadores__item + .indicadores__item::before {
  content: "";
  position: absolute;
  top: 15%;
  bottom: 15%;
  left: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.45);
}
.indicadores__figure {
  margin: 0 0 clamp(0.6rem, 1vw, 0.9rem);
  font-weight: var(--fw-bold);
  /* Fase 10 — figures were measuring at 56 px on 1440; XD renders them
     ≈ 80 px. Bumped the clamp accordingly. */
  font-size: clamp(2.5rem, 5.5vw, 5rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-text-inv);
}
.indicadores__caption {
  margin: 0;
  /* Fase 10 — captions were measuring 14.4 px (barely readable); XD
     renders ≈ 17 px. */
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
  line-height: 1.4;
  color: var(--color-text-inv);
  max-width: 28ch;
}

/* ============================================================
   2. Cierre corporativo
   ============================================================ */
.cierre {
  background: var(--bg-off-white);
  /* Fase 08 — top padding tightened; Indicadores already contributes its
     own bottom padding so we don't need the full 5rem again on top. */
  padding-block: clamp(1.5rem, 3vw, 3rem) clamp(2.5rem, 4vw, 4rem);
}
.cierre > .container { max-width: var(--container-wide); }

.cierre__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.25rem, 0.6vw, 0.5rem);
}
.cierre__title-lead,
.cierre__title-mark {
  display: inline-block;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
}
.cierre__title-lead { color: var(--color-primary); }
.cierre__title-mark {
  color: var(--bg-green);
  text-decoration: underline;
  text-decoration-color: var(--bg-green);
  text-decoration-thickness: clamp(3px, 0.4vw, 6px);
  text-underline-offset: clamp(2px, 0.3vw, 6px);
}

/* ============================================================
   3. Contacto y Talento
   ============================================================ */
.contacto {
  background: var(--bg-green);         /* Green Forest */
  color: var(--color-text-inv);
  /* Fase 08 — slightly tighter top padding; the Cierre block now
     contributes its own bottom padding so the combined breathing room
     feels balanced instead of doubled. */
  padding-block: clamp(2rem, 4vw, 4rem) clamp(2.5rem, 5vw, 5rem);
  /* Rounded top corners so it reads as a sealed container that
     visually bridges into the footer (which is also green). */
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  position: relative;
  z-index: 1;
  /* Fase 08 — reduced from Fase 06 (2.5rem max). Cierre's bottom padding
     already draws a visible gap; this margin only separates the two
     coloured blocks. */
  margin-top: clamp(0.5rem, 1vw, 1rem);
}
.contacto > .container { max-width: var(--container-wide); }

.contacto__header {
  text-align: center;
  /* Fase 08 — slightly more breathing room between the two-line title
     and the pair of photographic cards, matching XD proportions. */
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}
.contacto__title {
  margin: 0;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--color-text-inv);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.1rem, 0.4vw, 0.4rem);
}
.contacto__title-line { font-size: clamp(2rem, 5vw, 3.5rem); }
/* Fase 07A — line 2 is split into prefix ("Y", white) + mark
   ("TALENTO", orange). Both share the same uppercase line-height. */
.contacto__title-pre  { color: var(--color-text-inv); }
.contacto__title-mark { color: var(--color-primary);  }

.contacto__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}

/* Each card is a <details>: the summary IS the clickable B/W tile,
   the hidden body contains the form. No JS required. */
.contacto__card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #0b0b0b;
}
.contacto__card-summary {
  position: relative;
  display: block;
  cursor: pointer;
  list-style: none;
  min-height: clamp(220px, 24vw, 320px);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--color-text-inv);
  outline-offset: 2px;
}
.contacto__card-summary::-webkit-details-marker { display: none; }
.contacto__card-summary::marker { content: ""; }

.contacto__card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1);
  z-index: 0;
}
.contacto__card-overlay {
  position: absolute;
  inset: 0;
  /* Fase 10.2 — slightly deeper darkening at the bottom edge where the
     label + CTA sit, giving the type a solid base without masking the
     photographic subject at the top of the card. */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0.5)  55%,
    rgba(0, 0, 0, 0.85) 100%
  );
  z-index: 1;
  pointer-events: none;
}
.contacto__card-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(0.25rem, 0.6vw, 0.5rem);
  justify-content: flex-end;
  min-height: inherit;
}
.contacto__card-label {
  display: inline-block;
  /* Fase 10.2 — tiny bump + letter-spacing so the label behaves like
     an eyebrow instead of body copy. */
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  font-weight: var(--fw-regular);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-inv);
  opacity: 0.95;
  /* Fase 10.2 — tighter blur so the glyphs read as a single edge
     instead of the "ghosted" double-image the 10 px blur produced. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.contacto__card-cta {
  display: inline-block;
  /* Fase 10.2 — CTA bumped on desktop so it holds its own against the
     widened card. */
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: var(--fw-bold);
  color: var(--color-text-inv);
  line-height: 1.15;
  /* Fase 10.2 — smaller offset + lower blur removes the ghost halo
     while still ensuring the glyph edge separates from the photo. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}

/* Open state: dim the photo slightly to signal the form is active. */
.contacto__card[open] .contacto__card-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.75));
}

.contacto__form-wrap {
  background: var(--bg-beige);
  color: var(--color-text);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

/* ---------- Forms ---------------------------------------- */
.beegroup-form { margin: 0; }
.beegroup-form__honeypot {
  position: absolute !important;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.beegroup-form__status {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  font-weight: var(--fw-medium);
}
.beegroup-form__status--ok    { background: rgba(0, 57, 31, 0.1);  color: var(--bg-green); }
.beegroup-form__status--error { background: rgba(243, 115, 33, 0.1); color: #a3400f; }

.beegroup-form__row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 0 var(--sp-4);
}
.beegroup-form__label {
  font-weight: var(--fw-medium);
  font-size: clamp(0.875rem, 1vw, 0.9375rem);
  color: var(--color-text);
}
.beegroup-form__req { color: var(--color-primary); }
.beegroup-form__input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: var(--bg-white);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font: inherit;
  min-height: 44px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.beegroup-form__input:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(243, 115, 33, 0.2);
}
.beegroup-form__input--textarea {
  min-height: 120px;
  resize: vertical;
}
.beegroup-form__actions { margin: 0; }
.beegroup-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2rem;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-text-inv);
  font-weight: var(--fw-semibold);
  font-size: clamp(0.9375rem, 1vw, 1rem);
  cursor: pointer;
  transition: filter var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.beegroup-form__submit:hover,
.beegroup-form__submit:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* ============================================================
   4. Footer (overrides components.css where needed)
   Fase 08 — scales up the signature, the nav typography and the
   orange legal pill so the footer finally reads as the
   "closing block" of the landing, matching the XD proportions.
   ============================================================ */
.site-footer {
  background: var(--bg-green);
  color: var(--color-text-inv);
  /* Fase 10.3 — top padding trimmed another ~0.5rem so the enlarged
     signature doesn't push the overall footer height up. The vertical
     distribution is now: tighter top gap → brand/nav row → generous
     room → orange pill. Bottom padding is unchanged. */
  padding-block: clamp(1.25rem, 2.5vw, 2.5rem) clamp(1rem, 1.75vw, 1.5rem);
}
.site-footer > .container { max-width: var(--container-wide); }

.site-footer__inner {
  display: grid;
  /* Fase 10.3 — brand column widened fractionally (1 → 1.1 vs 1.3)
     so the larger signature sits comfortably with the nav. */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  /* Fase 10.3 — more vertical breathing room between the brand/nav row
     and the orange legal pill so the pill reads as a distinct closing
     band, not as an extension of the nav row. */
  margin-bottom: clamp(1.5rem, 2.75vw, 2.5rem);
}

.site-footer__brand { min-width: 0; }
.site-footer__signature {
  display: block;
  /* Fase 10.3 — signature pushed to 360 px max (was 340 px) so the
     brand mark reads as the dominant element in the footer, matching
     the XD proportions. */
  width: clamp(260px, 24vw, 360px);
  height: auto;
  /* The source signature uses `#050605` fills; CSS inversion gives us
     the white variant the brandbook mandates. This filter is a pure
     colour map — it does NOT distort the geometry. */
  filter: brightness(0) invert(1);
}

.site-footer__nav { min-width: 0; }
/* Fase 07A — explicit 3-column grid; the 4th link ("Contacto") drops
   under the 3rd ("Premios y prensa") in the same column, matching XD. */
.site-footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  /* Fase 10.3 — row-gap enlarged so the 2-row grid feels like two
     distinct rows (the 4th link "Contacto" was sitting almost on top
     of "Premios y prensa"). Column-gap unchanged. */
  gap: clamp(1rem, 1.6vw, 1.5rem) clamp(1.75rem, 3vw, 2.75rem);
}
.site-footer__nav-list > li:nth-child(1) { grid-column: 1; grid-row: 1; }
.site-footer__nav-list > li:nth-child(2) { grid-column: 2; grid-row: 1; }
.site-footer__nav-list > li:nth-child(3) { grid-column: 3; grid-row: 1; }
.site-footer__nav-list > li:nth-child(4) { grid-column: 3; grid-row: 2; }
.site-footer__nav-list li { line-height: 1.4; }
.site-footer__nav-list a {
  color: var(--color-text-inv);
  /* Fase 10.1 — bumped from 18 → 20 px to recover legibility.
     Weight raised to medium so the links stop reading as body-copy. */
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease);
}
.site-footer__nav-list a:hover,
.site-footer__nav-list a:focus-visible {
  color: var(--color-text-inv);
  opacity: 0.75;
}

/* Orange legal pill — Fase 10.1 enlarged for legibility:
   larger font that holds its own against the nav links above, slightly
   roomier padding, and the full pill radius on every breakpoint. */
.site-footer__legal-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: clamp(0.85rem, 2vw, 1.75rem);
  padding: clamp(1.15rem, 1.85vw, 1.65rem) clamp(1.5rem, 3vw, 2.5rem);
  background: var(--color-primary);
  color: var(--color-text-inv);
  border-radius: var(--radius-pill);
  font-size: clamp(1rem, 1.2vw, 1.1875rem);
  font-weight: var(--fw-medium);
}
.site-footer__legal {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 2vw, 1.75rem);
  align-items: center;
}
.site-footer__legal a,
.site-footer__legal span { color: inherit; }

.site-footer__socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  align-items: center;
  justify-content: flex-end;
}
.site-footer__socials a {
  color: var(--color-text-inv);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .indicadores__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .indicadores__item + .indicadores__item::before { display: none; }
  .indicadores__item:nth-child(n+1) {
    border-bottom: 1px solid rgba(255,255,255,0.25);
  }
  .indicadores__item:nth-child(3),
  .indicadores__item:nth-child(4) { border-bottom: 0; }
  .indicadores__item:nth-child(2n) {
    border-left: 1px solid rgba(255,255,255,0.25);
  }

  .contacto__cards { grid-template-columns: minmax(0, 1fr); }

  /* Fase 08 — the signature + nav stack vertically; the nav collapses
     from 3-col to 2-col so columns stay comfortably wide; the per-item
     explicit grid-column rules are released so items flow left-to-right. */
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .site-footer__signature { width: clamp(200px, 36vw, 280px); }
  .site-footer__nav-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }
  .site-footer__nav-list > li:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  .indicadores__list { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .indicadores__item { border-left: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.25); padding-block: 1rem; }
  .indicadores__item:last-child { border-bottom: 0; }

  .cierre__title-lead,
  .cierre__title-mark { font-size: clamp(2rem, 10vw, 3rem); }
  .contacto__title-line { font-size: clamp(1.75rem, 8vw, 2.75rem); }

  /* Fase 08 — the pill KEEPS its fully-round shape even when it wraps
     to multiple lines; just stack the two inner groups vertically so
     the text has room to breathe. */
  .site-footer__legal-bar { padding: clamp(1rem, 4vw, 1.25rem) clamp(1.25rem, 5vw, 1.75rem); }
  .site-footer__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
  .site-footer__socials {
    justify-content: flex-start;
    width: 100%;
  }
}