/* ==========================================================================
   Sobre nosotros — estilos propios de página (.about-)  ·  CONTRACT-V2 §6.3
   Solo layout/decoración de esta página. Componentes y mockups: core.
   ========================================================================== */

/* ---- Hero --------------------------------------------------------------- */
.about-hero {
  position: relative;
  padding-top: clamp(48px, 7vw, 96px);
  overflow-x: clip;
}
.about-hero__aura {
  position: absolute;
  inset: -22% -12% auto -12%;
  height: 75%;
  background: radial-gradient(52% 62% at 50% 22%, rgba(46, 232, 105, .14), transparent 70%);
  filter: blur(24px);
  pointer-events: none;
}
.about-hero__inner { position: relative; z-index: 1; }
.about-hero__title { max-width: 18ch; }
.about-hero .lead { max-width: 62ch; }
.about-hero__pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.about-hero__pills .pill .dts-ico { color: var(--brand); }

/* ---- 01 · Historia ------------------------------------------------------- */
.about-historia__grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
}
.about-historia__firma {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  color: var(--ink-mute);
}
.about-historia__firma::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--brand);
  flex: none;
}
.about-historia__card { display: grid; gap: 16px; align-content: start; }
.about-historia__lab,
.about-why__lab,
.about-team__rol {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
}
.about-historia__chips { display: flex; flex-wrap: wrap; gap: 9px; }
.about-historia__chips .pill .dts-ico { color: var(--brand); }
.about-historia__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

/* ---- 02 · Manifiesto ------------------------------------------------------ */
.about-manifesto__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.about-manifesto__grid .card { display: grid; gap: 13px; align-content: start; }
.about-manifesto__grid .card__title { margin-bottom: 0; }
.about-manifesto__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--brand);
}

/* ---- 03 · Sala de máquinas ------------------------------------------------- */
.about-engine__grid {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: clamp(18px, 3vw, 28px);
  align-items: start;
}
.about-engine__side { display: grid; gap: 14px; align-content: start; }
/* Los toasts rotan de uno en uno (data-notify): se apilan en la misma celda. */
.about-engine__toasts { display: grid; min-height: 68px; }
.about-engine__toasts .mk-toast { grid-area: 1 / 1; }

/* ---- 04 · Equipo ------------------------------------------------------------ */
.about-team__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.about-team__grid .card { display: grid; gap: 12px; align-content: start; }
.about-team__grid .card__title { margin-bottom: 0; }

/* ---- 05 · El porqué ---------------------------------------------------------- */
.about-why__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(30px, 5vw, 60px);
  align-items: center;
}
.about-why__card { display: grid; gap: 16px; align-content: start; }

/* ---- CTA final ----------------------------------------------------------------- */
.about-band {
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: clamp(20px, 4vw, 44px);
  align-items: center;
}
.about-band h2 { max-width: 22ch; }
.about-band p { max-width: 52ch; font-size: var(--fs-sm); }

/* ==========================================================================
   Responsive (mobile-first ya en base; aquí solo colapsos)
   ========================================================================== */
@media (max-width: 1024px) {
  .about-manifesto__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
  .about-historia__grid,
  .about-why__grid,
  .about-engine__grid,
  .about-band { grid-template-columns: 1fr; }
  .about-historia__grid,
  .about-why__grid { gap: 32px; }
  .about-team__grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}

@media (max-width: 640px) {
  .about-manifesto__grid { grid-template-columns: 1fr; }
  .about-hero__pills .pill { font-size: .72rem; }
}