/* NOSOTROS — composiciones propias (sistema en css/core.css) */

/* ---- 00 · APERTURA — Sevilla a plena potencia + h1 superpuesto ---- */
.about-open { padding-top: calc(var(--header-h) + clamp(1rem, 3vh, 2rem)); }
.about-open .spec-line { margin-bottom: clamp(1.25rem, 3vw, 2rem); }

.about-open__media { min-height: 340px; }
.about-open__media.frame-marks::before { top: 14px; left: 14px; z-index: 2; }
.about-open__media.frame-marks::after { bottom: 14px; right: 14px; z-index: 2; }
/* La esquina inferior queda bajo el h1: el pie sube a la esquina superior derecha */
.about-open__media .media__caption {
  top: 0;
  bottom: auto;
  left: auto;
  right: 0;
  border-top: none;
  border-right: none;
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.about-open__head { position: relative; z-index: 2; }
.about-open__title {
  display: flex;
  flex-direction: column;
  margin-top: -1.05em;          /* tipo sobre foto: la primera línea muerde la imagen */
  margin-left: -0.04em;
  text-transform: uppercase;
}
.about-open__title em { letter-spacing: -0.01em; text-transform: none; }

.about-open__sub {
  margin-top: clamp(1.5rem, 4vh, 3rem);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
  max-width: 56ch;
}
@media (min-width: 900px) { .about-open__sub { margin-left: 41.666%; } }

/* ---- 01 · MISIÓN — susurro grande + datos grabados ---- */
.about-mission__lead {
  font-size: clamp(2rem, 4.5vw, 4rem);
  line-height: 1.2;
  max-width: 24ch;
}
.about-mission__body { margin-top: clamp(2.5rem, 6vw, 5rem); }
.about-mission__data {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-strong);
  align-self: start;
}

/* ---- 02 · EQUIPO — dos firmas asimétricas ---- */
.about-member {
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.about-member:first-of-type { border-top-color: var(--line-strong); }

/* Hueco de retrato: fondo --bg1 (base .media), marcas de visor, listo para foto real */
.about-member__portrait {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 460px;
}
.about-member--flip .about-member__portrait { justify-self: end; }
.about-member__monogram {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  letter-spacing: -0.03em;
  color: var(--line-strong);
  user-select: none;
}

.about-member__name {
  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
  text-transform: uppercase;
  margin-block: var(--s-3) var(--s-2);
}
.about-member__role { display: block; margin-bottom: var(--s-6); }
.about-member__bio { max-width: 52ch; margin-bottom: var(--s-8); }
.about-member__info .spec-list { max-width: 52ch; }

/* ---- 03 · LA DIFERENCIA — tabla brutal, pieza central ---- */
.about-diff__scroll { overflow-x: auto; }
.about-diff .table-brutal { min-width: 620px; }
.about-diff .table-brutal th { width: 50%; }
.about-diff .table-brutal td {
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  line-height: 1.55;
}
.about-diff .table-brutal th:last-child,
.about-diff .table-brutal td:last-child { border-left: 1px solid var(--line-strong); }
.about-diff .table-brutal td:last-child { background: var(--bg1); }

.about-diff__note {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 0.9375rem;
  max-width: none;
}

/* ---- 04 · VALORES — lista editorial numerada ---- */
.about-values__list { border-top: 1px solid var(--line-strong); }
.about-values__item {
  display: grid;
  gap: var(--s-4);
  padding-block: clamp(1.75rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) {
  .about-values__item { grid-template-columns: 8rem minmax(0, 1fr); gap: var(--s-8); align-items: start; }
}
.about-values__item h3 { margin-bottom: var(--s-2); text-transform: uppercase; }

/* ---- 06 · CTA FINAL ---- */
.about-cta__title { font-size: clamp(2.75rem, 8vw, 7rem); max-width: 16ch; }
.about-cta__title span { display: block; }
.about-cta__text { margin-top: clamp(1.5rem, 4vw, 2.5rem); max-width: 56ch; }
.about-cta__actions { margin-top: clamp(2rem, 5vw, 3.5rem); }