/* =========================================================================
   Fichas del equipo (/equipo/<slug>/) · WordPress cmsmasters_singular#112 (post-112.css), medido a 1440 px.
   Clases con prefijo perfil-.
   ========================================================================= */

/* ---------- Cabecera: datos a la izquierda, foto a la derecha, sobre el fondo claro ---------- */
.perfil-portada {
  margin-bottom: 150px;
  /* La barra de navegación va superpuesta (como en WordPress): el hueco superior la incluye */
  padding: 215px var(--margen) 0;
  background: url('/assets/img/perfil-fondo-cabecera.webp') center / cover no-repeat;
}
.perfil-portada__rejilla {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 1280px);
  min-height: 730px;
  margin: 0 auto;
}
/* En WordPress la columna va centrada en los 730 px de la foto con 434 px de contenido (cargo, nombre, contacto y
   la fila de redes), así que el cargo empieza 148 px más abajo que la foto. Aquí se quitaron las redes de demo y,
   en 2 fichas, el contacto de ejemplo: centrada, la columna bajaba 50-150 px. Se fija arriba con ese mismo hueco
   para que cargo y nombre queden donde estaban. */
.perfil-portada__datos {
  display: flex;
  flex: 0 0 53%;
  flex-direction: column;
  align-self: flex-start;
  gap: 30px;
  min-width: 0;
  padding: 148px 100px 0 0;
}
.perfil-portada__foto {
  position: relative;
  flex: 0 0 47%;
  align-self: stretch;
  min-width: 0;
  min-height: 730px;
  overflow: hidden;
  border-radius: var(--radio);
}
.perfil-portada__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Píldora grafito con los cargos (taxonomía: Manrope 13 px, 700, mayúsculas) */
.perfil-cargo {
  display: inline-flex;
  flex-wrap: wrap;
  align-self: flex-start;
  column-gap: 10px;
  margin: 0;
  padding: 3px 12px;
  border-radius: 30px;
  background: var(--c-grafito);
  color: #fff;
  font-size: var(--t-etiqueta);
  font-weight: 700;
  line-height: 1.55;
  text-transform: uppercase;
  transition: background var(--transicion);
}
.perfil-cargo:hover { background: var(--c-arena); }

.perfil-portada__nombre {
  margin-bottom: 20px;
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -2px;
}

.perfil-contacto {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 0 0 15px;
  list-style: none;
  color: var(--c-grafito);
}
.perfil-contacto__etiqueta { margin-right: 1px; }
.perfil-contacto a { color: var(--c-grafito); }
.perfil-contacto a:hover,
.perfil-contacto a:focus-visible { color: var(--c-primario); }

.perfil-redes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 30px;
  padding: 0;
  list-style: none;
}
.perfil-redes__enlace {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-borde);
  color: var(--c-grafito);
  transition: background var(--transicion), color var(--transicion);
}
.perfil-redes__enlace:hover,
.perfil-redes__enlace:focus-visible { background: var(--c-arena); color: var(--c-fondo); }
.perfil-redes .perfil-icono { width: 16px; height: 16px; }

/* ---------- Biografía breve (solo la de Jero es real) ---------- */
.perfil-bio {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: min(100% - 2 * var(--margen), 1280px);
  margin: 0 auto 150px;
}
.perfil-bio > * { max-width: 1264px; }
.perfil-bio__titulo {
  font-size: var(--t-h3);
  line-height: 1.15;
  letter-spacing: -1px;
}
.perfil-bio__texto p { margin: 0 0 27px; }
.perfil-bio__texto p:last-child { margin-bottom: 0; }
.perfil-bio__texto strong { color: var(--c-texto); }

/* ---------- Anterior / siguiente ---------- */
.perfil-navegacion {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 30px;
  width: min(100% - 2 * var(--margen), 1280px);
  margin: 0 auto;
}
.perfil-navegacion__enlace {
  display: inline-flex;
  align-items: center;
  gap: 25px;
  min-width: 0;
  color: var(--c-grafito);
}
.perfil-navegacion__icono {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 30px;
  background: var(--c-arena);
  color: var(--c-fondo);
  transition: background var(--transicion), color var(--transicion);
}
.perfil-navegacion .perfil-icono { width: 18px; height: 18px; }
.perfil-navegacion__nombre {
  overflow: hidden;
  font-family: var(--f-titulos);
  font-size: var(--t-h5);
  line-height: 1.35;
  letter-spacing: -1px;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color var(--transicion);
}
.perfil-navegacion__enlace:hover .perfil-navegacion__nombre,
.perfil-navegacion__enlace:focus-visible .perfil-navegacion__nombre { color: var(--c-arena); }
.perfil-navegacion__enlace:hover .perfil-navegacion__icono,
.perfil-navegacion__enlace:focus-visible .perfil-navegacion__icono { background: var(--c-borde); color: var(--c-grafito); }

/* ---------- Tableta ---------- */
@media (max-width: 1180px) {
  .perfil-portada { margin-bottom: 100px; padding-top: 160px; }
  .perfil-portada__rejilla { flex-direction: column; align-items: stretch; gap: 60px; min-height: 0; }
  .perfil-portada__datos,
  .perfil-portada__foto { flex-basis: auto; width: 100%; padding-right: 0; }
  .perfil-portada__datos { align-self: auto; padding-top: 0; }
  .perfil-portada__foto { min-height: 600px; }
  .perfil-portada__foto img { object-position: top center; }
  .perfil-contacto { gap: 32px; }
  .perfil-redes { margin-top: 20px; }
  .perfil-bio { gap: 30px; margin-bottom: 100px; }
}

/* ---------- Móvil ---------- */
@media (max-width: 767px) {
  .perfil-portada { margin-bottom: 80px; padding-top: 140px; }
  .perfil-portada__rejilla { gap: 50px; }
  .perfil-portada__nombre { margin-bottom: 10px; }
  .perfil-portada__foto { min-height: 400px; }
  .perfil-contacto { gap: 28px; }
  .perfil-redes { margin-top: 10px; }
  .perfil-bio { margin-bottom: 80px; }
  .perfil-bio__titulo { text-align: center; }
  .perfil-navegacion__enlace { flex: 0 0 100%; }
  .perfil-navegacion__enlace--siguiente { justify-content: flex-end; }
}