/* ==========================================================================
   ABOUT — intro, filosofía, timeline, datos, cierre
   ========================================================================== */

.about-hero {
  padding-top: clamp(7rem, 5.5rem + 6vw, 10rem);
  padding-bottom: var(--space-xl);
}

.about-hero__statement {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 1.6rem + 5.5vw, 6.4rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  max-width: 20ch;
  text-wrap: balance;
}
.about-hero__statement em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-emphasis);
}

.about-hero__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
  margin-top: var(--space-xl);
  align-items: end;
}
@media (min-width: 1080px) {
  .about-hero__grid { grid-template-columns: repeat(12, 1fr); }
}

.about-hero__portrait {
  grid-column: 1 / -1;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
@media (min-width: 1080px) {
  .about-hero__portrait { grid-column: 8 / span 5; }
}
.about-hero__portrait img { width: 100%; height: 100%; object-fit: cover; }

.about-hero__intro {
  grid-column: 1 / -1;
  margin-top: var(--space-md);
  font-size: var(--fs-md);
  color: var(--color-ink-soft);
  max-width: 46ch;
}
@media (min-width: 1080px) {
  .about-hero__intro { grid-column: 1 / span 6; margin-top: 0; }
}

/* ---------- Facts strip ---------- */
.facts {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
@media (min-width: 720px) {
  .facts { grid-template-columns: repeat(4, 1fr); }
}
.fact {
  padding: var(--space-md) var(--space-sm) var(--space-md) 0;
  border-top: 1px solid var(--color-line);
}
@media (min-width: 720px) {
  .fact { border-top: none; border-left: 1px solid var(--color-line); padding-left: var(--space-sm); }
  .fact:first-child { border-left: none; padding-left: 0; }
}
.fact:first-child { border-top: none; }
.fact__value {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.3rem + 2.2vw, 3rem);
  letter-spacing: var(--tracking-tight);
}
.fact__label {
  margin-top: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ---------- Philosophy (principios) ---------- */
.principle {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-line);
}
.principle:last-child { border-bottom: 1px solid var(--color-line); }
@media (min-width: 1080px) {
  .principle { grid-template-columns: 3fr 1fr 6fr; align-items: start; }
}
.principle__index {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-muted);
}
.principle__name {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.2rem + 3vw, 3.6rem);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
}
.principle__desc {
  font-size: var(--fs-md);
  color: var(--color-ink-soft);
  max-width: 46ch;
}

/* ---------- Timeline ---------- */
/* Bloque invertido (fondo dorado claro) — reescribe los tokens de texto/
   overlay, no solo background/color inline, así rgba(var(--overlay-rgb),X)
   en los hijos (fechas, detalle) sigue siendo legible. Mismo patrón que
   .case-block--dark en work.css. Antes esto vivía como style="" inline en
   el HTML, que solo pisaba background/color pero dejaba --overlay-rgb
   apuntando al valor claro de :root — texto casi invisible sobre el fondo
   claro (mismo tono contra mismo tono). */
.about-timeline {
  background: var(--color-inverse-bg);
  color: var(--color-inverse-ink);
  --color-ink: var(--color-inverse-ink);
  --color-bg-alt: #ecdba8;
  --color-ink-soft: #4a3a63;
  --color-muted: #6c5c85;
  --overlay-rgb: 23, 11, 41;
  --color-emphasis: var(--color-accent-text);
  --color-mask: var(--color-inverse-bg);
  --color-focus: var(--color-accent-text);
}
.timeline-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xs) var(--space-md);
  padding: var(--space-md) 0;
  border-top: 1px solid rgba(var(--overlay-rgb),0.16);
}
.timeline-row:last-child { border-bottom: 1px solid rgba(var(--overlay-rgb),0.16); }
@media (min-width: 720px) {
  .timeline-row { grid-template-columns: 6rem 1fr 1fr; align-items: baseline; }
}
.timeline-row__year {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: rgba(var(--overlay-rgb),0.5);
}
.timeline-row__role {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.9rem);
  text-transform: uppercase;
}
.timeline-row__detail {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(var(--overlay-rgb),0.5);
  text-align: left;
}
@media (min-width: 720px) {
  .timeline-row__detail { text-align: right; }
}

/* ---------- Closing CTA ---------- */
.about-cta {
  padding-block: var(--space-2xl);
}
.about-cta__headline {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.4rem + 5.5vw, 6.5rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  max-width: 18ch;
  text-wrap: balance;
}
.about-cta__headline em { font-style: italic; color: var(--color-emphasis); }
.about-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}