/*
  profile.css
  Perfil: titular + presentación con fotografía, Enfoque (declaración), Capacidades
  (banda gris, 01-04), Trayectoria, Formación e idiomas y CV — siguiendo
  wireframes/png/10-perfil.png.
*/

.profile-hero {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-l);
}

.profile-hero h1 {
  max-width: 44rem;
  margin-top: var(--space-2xs);
}

.profile-intro {
  padding-top: 0;
  padding-bottom: var(--space-l);
}

.profile-intro__grid {
  display: grid;
  grid-template-columns: minmax(20rem, 1fr) 18rem;
  gap: var(--space-xl);
  align-items: start;
}

.profile-intro__text {
  max-width: none;
}

.profile-photo {
  border-radius: var(--radius-l);
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.profile-photo .media-placeholder {
  min-height: 100%;
}

.profile-photo .media-real {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Retrato cuadrado (1:1) dentro de una caja 3:4 en escritorio: el recorte solo
     afecta al ancho. object-position-x 41% centra mejor el rostro y el torso
     dentro del marco (ajuste pedido por Santiago el 7 de agosto de 2026 — con
     80% quedaba demasiado desplazado hacia la izquierda dentro del recorte). */
  object-position: 41% center;
}

.profile-focus {
  padding-top: 0;
  padding-bottom: var(--space-xl);
}

.profile-focus h2 {
  max-width: 42rem;
  margin-top: var(--space-2xs);
}

.profile-capacities {
  background: var(--color-surface);
  padding-block: var(--space-xl);
}

.capacity-grid {
  margin-top: var(--space-m);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-l) var(--space-xl);
}

.capacity-item {
  display: flex;
  gap: var(--space-m);
  align-items: baseline;
}

.capacity-item__index {
  font-size: var(--font-size-h2);
  font-weight: 500;
  color: var(--color-text);
  flex-shrink: 0;
  min-width: 3rem;
}

.capacity-item h3 {
  margin-bottom: var(--space-3xs);
  font-size: var(--font-size-body);
  font-weight: 600;
}

.capacity-item p {
  color: var(--color-text-muted);
  margin: 0;
}

.profile-trajectory {
  padding-bottom: var(--space-l);
}

.trajectory-list {
  list-style: none;
  margin: var(--space-m) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.trajectory-item {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: var(--space-m);
  padding: var(--space-m) 0;
  border-top: 1px solid var(--color-border);
  align-items: baseline;
}

.trajectory-item:first-child {
  border-top: none;
  padding-top: 0;
}

.trajectory-item__period {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.trajectory-item h3 {
  margin: 0;
  font-size: var(--font-size-h3);
  font-weight: 600;
}

.profile-education {
  padding-bottom: var(--space-l);
}

.profile-education p {
  max-width: none;
  color: var(--color-text);
}

.profile-cv {
  padding-top: 0;
  padding-bottom: var(--space-2xl);
}

.profile-cv .cta-block {
  display: inline-flex;
  max-width: 22rem;
}

.profile-cv .draft-note {
  display: block;
  margin-top: var(--space-s);
  max-width: var(--measure-max-width);
}

@media (max-width: 46rem) {
  .profile-intro__grid {
    grid-template-columns: 1fr;
  }

  .profile-photo {
    order: -1;
    aspect-ratio: 16 / 10;
  }

  .profile-photo .media-real {
    /* Caja 16:10 en móvil: el recorte ahora afecta a la altura (ventana ~62.5%
       de la imagen original). object-position-y 27% conserva la cabeza completa
       arriba y las manos entrelazadas abajo. */
    object-position: center 27%;
  }

  .capacity-grid {
    grid-template-columns: 1fr;
  }

  .trajectory-item {
    grid-template-columns: 1fr;
    gap: var(--space-2xs);
  }
}