/* ---------- 3. Nosotros ---------- */
/* La sección tiene tres bloques; este margen los separa entre sí */
.about-block + .about-block { margin-top: clamp(4rem, 8vw, 6rem); }

.about {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.about__body { display: grid; gap: var(--space-4); max-width: 40em; color: var(--color-text-muted); }
.about__lead { font-size: var(--text-lg); color: var(--color-text); }

.about__copy { display: grid; gap: var(--space-5); }


/* Los dos giros: naranja = talento, teal = infraestructura */
.pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
  list-style: none;
}
.pillar {
  --tone: var(--color-teal);
  padding-left: var(--space-5);
  border-left: 2px solid var(--tone);
}
.pillar--talent { --tone: var(--color-orange); }
.pillar__title { margin-bottom: var(--space-2); font-size: var(--text-lg); font-weight: 600; }
.pillar__text { color: var(--color-text-muted); }

/* Cómo trabajamos: pasos numerados con contador CSS */
.steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-5);
  list-style: none;
  counter-reset: step;
}
.step {
  --tone: var(--color-teal);
  counter-increment: step;
  padding-top: var(--space-4);
  border-top: 2px solid var(--tone);
}
.step--talent { --tone: var(--color-orange); }
.step::before {
  content: counter(step);
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--tone);
}
.step__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; line-height: var(--leading-snug); }

/* Expansión regional */
.regions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  list-style: none;
}
.region {
  padding: var(--space-5);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.region--live { border-color: var(--color-teal); }

.region__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.region__status::before {           /* aro = pendiente */
  content: "";
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
}
.region--live .region__status { color: var(--color-teal); }
.region--live .region__status::before { background-color: currentColor; }  /* punto lleno = activo */

.region__name { margin-top: var(--space-3); font-size: var(--text-xl); font-weight: 600; }
.region__note { color: var(--color-text-muted); }

/* Marco de imagen reutilizable (mismo estilo que el hero).
   object-fit: cover → cualquier imagen de reemplazo se ajusta sin deformarse. */
/* Marco de imagen: respeta la proporción real, nunca recorta */
.media {
  margin: 0;
  padding: var(--space-3);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.media img {
  width: 100%;
  height: auto;               /* la altura sale de width/height del HTML */
  border-radius: var(--radius-sm);
}
.media--wide { margin-bottom: var(--space-7); }
.media--wide { --ratio: 21 / 9; margin-bottom: var(--space-7); }

/* Encabezado + imagen lado a lado */
.split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  margin-bottom: var(--space-7);
}
.split .section__head { margin-bottom: 0; }

@media (max-width: 1000px) {
  .steps { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .about { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .pillars, .regions { grid-template-columns: 1fr; }
}