/* Páginas de integrantes del equipo (portafolio). Se apoya en paginas-de-taller.css. */

/* Columna izquierda: foto + lista, juntas y fijas mientras se lee la bio */
.perfil__lateral {
  position: sticky;
  top: calc(var(--marco) + 4vh);
}
.perfil__foto { position: static; }          /* la columna ya es fija, no la foto sola */
.perfil__foto img { aspect-ratio: 1; object-fit: cover; }

/* Lista bajo la foto: misma disposición que la ficha técnica de "Hecho en Espora" */
.perfil__lista {
  list-style: none;
  margin: 3.5vh 0 0; padding: 0;
  font-size: clamp(.85rem, 1.05vw, 1.3rem);
  line-height: 1.45;
}
.perfil__lista li { font-weight: 600; color: var(--negro); margin-top: 1.4em; }
.perfil__lista li:first-child { margin-top: 0; }

/* Los ítems de la lista del perfil son enlaces externos: letra light, se tachan al pasar el cursor */
.perfil__lista a { font-weight: 300; }
.perfil__lista a:hover { text-decoration: line-through; text-decoration-thickness: .08em; }

/* Responsivo (móvil): la foto y los enlaces ya no acompañan la lectura; van arriba, en una sola columna */
@media (max-width: 767px) {
  .perfil__lateral { position: static; margin-bottom: 4vh; }
  .perfil__lista { margin-top: 2.5vh; font-size: .95rem; }

  /* El enlace "← Equipo" sube al principio de la página; después van la foto con sus enlaces, el nombre y la biografía.
     "display: contents" deja que los elementos de la columna de texto se ordenen junto con la foto. */
  .taller:has(.perfil__lateral) { gap: 0; }
  .taller:has(.perfil__lateral) .taller__info { display: contents; }
  .taller:has(.perfil__lateral) .taller__volver { order: -1; justify-self: start; }
}

/* Revisión general (tablet y móvil): los enlaces del portafolio tienen una zona de toque más alta. */
@media (max-width: 1100px) {
  .perfil__lista a { display: inline-block; padding: .5em 0; margin: -.5em 0; }
}