.perfil {
  position: relative;
  --perfil-accent:     var(--nexo-purple);
  --perfil-hero-h:     min(40rem, 92svh);
  --perfil-photo-w:    clamp(19rem, 30vw, 26rem);
  --perfil-photo-hang: clamp(4rem, 9vh, 6rem);
  --perfil-cuerpo-pad: clamp(var(--space-12), 8vh, var(--space-24));
}

.hero.perfil-hero { min-height: var(--perfil-hero-h); }


/* Nombre + editar = título del hero (abajo-izquierda, sobre el banner).
   Se limita a la mitad izquierda para no cruzarse con la tarjeta del logo
   (que arranca en el 50%): los nombres largos parten en varias líneas. */
.perfil-hero__id {
  align-self: end;
  position:   relative;
  z-index:    1;
  max-width:  calc(50% - clamp(2rem, 4vw, 4rem));
}

/* Talla única para todos los perfiles: dimensionada para que incluso una
   palabra larga sin partición posible ("Neuroarquitectura") quepa en la
   mitad izquierda. */
.perfil-hero__name {
  font-family: var(--font-heading);
  font-size:   clamp(2rem, 4vw, 4rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-none);
  text-wrap:   balance;
  overflow-wrap: break-word;
  color:       var(--nexo-dark);
  margin-block-end: var(--space-3);
}

.perfil-hero__edit {
  display:     inline-flex;
  align-items: center;
  gap:         var(--space-2);
  font-weight: var(--fw-semibold);
  color:       var(--nexo-dark);
}
.perfil-hero__edit:hover { opacity: 0.75; }

/* Foto sobrepuesta al banner por la derecha. Va FUERA del .hero (es hermana del
   banner), así el overflow:hidden del .hero no la recorta. Tarjeta de proporción
   fija (16/10, logo contenido) para que cualquier logo se vea igual de grande, y
   con el borde inferior siempre colgando --perfil-photo-hang bajo el banner. */
.perfil__photo {
  position:    absolute;
  z-index:     2;
  inset-block-start:  calc(var(--perfil-hero-h) - var(--perfil-photo-w) * 0.625 + var(--perfil-photo-hang));
  inset-inline-start: 50%;
  width:       var(--perfil-photo-w);
  aspect-ratio: 16 / 10;
  padding:     clamp(1.25rem, 2vw, 2rem);
  margin:      0;
  background:  var(--media-logo-bg, var(--nexo-white));
  box-shadow:  0 30px 60px rgba(21, 7, 31, 0.25);
}
.perfil__photo img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Logos claros (blancos/muy luminosos): tarjeta oscura para que no desaparezcan. */
.perfil__photo--oscura { background: var(--nexo-dark); }

.perfil-cuerpo {
  position:              relative;
  z-index:               1;
  background:            var(--nexo-bg);
  color:                 var(--nexo-dark);
  display:               grid;
  grid-template-columns: minmax(220px, 1fr) 2.4fr;
  gap:                   clamp(var(--space-8), 5vw, var(--space-16));
  align-items:           start;
  padding-block:         var(--perfil-cuerpo-pad);
}

.perfil-aside {
  position: sticky;
  top:      clamp(var(--space-6), 6vh, var(--space-12));
}

.perfil-aside__brand { display: block; margin-block-end: clamp(var(--space-6), 3vh, var(--space-8)); }
.perfil-aside__brand img { width: clamp(150px, 90%, 230px); height: auto; }

.perfil-links { display: flex; flex-direction: column; gap: var(--space-4); }
.perfil-links a,
.perfil-links span {
  display:     inline-flex;
  align-items: center;
  gap:         var(--space-3);
  font-weight: var(--fw-semibold);
  color:       var(--nexo-dark);
}
.perfil-links a:hover { color: var(--perfil-accent); }
.perfil-links svg { flex-shrink: 0; }

/* El padding del cuerpo ya cuenta como separación bajo la tarjeta: se descuenta
   para que el hueco tarjeta→texto quede en ~2.5rem totales. */
.perfil-main {
  min-width: 0;
  padding-block-start: max(0rem, calc(var(--perfil-photo-hang) + clamp(2rem, 3vh, 2.5rem) - var(--perfil-cuerpo-pad)));

  --perfil-flow: clamp(var(--space-8), 4vh, var(--space-12));
}

.perfil--sin-foto .perfil-main { padding-block-start: 0; }

.perfil-main__title,
.perfil-contacto__title {
  font-family: var(--font-heading);
  font-size:   var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-none);
  margin-block-end: clamp(var(--space-4), 2.5vh, var(--space-6));
}

/* wpautop deja <p> vacíos al final del campo: duplican el hueco entre secciones. */
.perfil-main p:empty { display: none; }

.perfil-acerca { max-width: 78ch; margin-block-end: var(--perfil-flow); }
.perfil-acerca p { font-size: var(--fs-md); line-height: var(--lh-relaxed); }

/* Galería = carrusel arrastrable horizontal (mismo gesto que .programa-sobre__gallery,
   estilos propios). 2 por vista en desktop; con 3+ asoma la siguiente y se vuelve
   carrusel. Con overflow-x:auto solo hay scroll si las imágenes desbordan. */
.perfil-galeria {
  --gallery-gap:  clamp(var(--space-4), 2vw, var(--space-6));
  --gallery-peek: clamp(2rem, 7vw, 4.5rem);

  display:                    flex;
  gap:                        var(--gallery-gap);
  overflow-x:                 auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior:            auto;
  cursor:                     grab;
  scrollbar-width:            none;
  margin-block-end:           var(--perfil-flow);
}
.perfil-galeria::-webkit-scrollbar { display: none; }
.perfil-galeria.is-dragging { cursor: grabbing; user-select: none; }
.perfil-galeria img { -webkit-user-drag: none; user-select: none; }

.perfil-galeria__item {
  margin:       0;
  display:      block;
  overflow:     hidden;
  aspect-ratio: 16 / 10;
  background:   var(--nexo-dark);
  flex:         0 0 calc((100% - var(--gallery-gap)) / 2);
}
/* Con 3 o más: deja a la vista un trozo de la siguiente (affordance de carrusel). */
.perfil-galeria:has(> :nth-child(3)) .perfil-galeria__item {
  flex-basis: calc((100% - 2 * var(--gallery-gap) - var(--gallery-peek)) / 2);
}
.perfil-galeria__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--duration-base) var(--ease-out-expo); }
.perfil-galeria__item:hover img { transform: scale(1.04); }
.perfil-galeria.is-dragging .perfil-galeria__item img { transform: none; }

.perfil-persona {
  display:               grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap:                   clamp(var(--space-6), 3vw, var(--space-12));
  align-items:           start;
}
.perfil-persona__foto { margin: 0; overflow: hidden; aspect-ratio: 1 / 1; background: var(--nexo-dark); }
.perfil-persona__foto img { width: 100%; height: 100%; object-fit: cover; }

.perfil-persona__nombre {
  font-family: var(--font-heading);
  font-size:   var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
.perfil-persona__rol { font-weight: var(--fw-bold); margin-block: var(--space-3) var(--space-5); }
.perfil-persona__bio { font-size: var(--fs-md); line-height: var(--lh-relaxed); max-width: 60ch; }
.perfil-persona__bio p { margin-block-end: var(--space-3); }
.perfil-persona__bio p:last-child { margin-block-end: 0; }

/* Bio larga: colapsada a 6 líneas; el botón "Ver más" (JS) despliega el resto. */
.perfil-persona__bio.is-clamped {
  display:            -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

.perfil-persona__more {
  margin-block-start: var(--space-2);
  border:             0;
  padding:            0;
  background:         none;
  cursor:             pointer;
  font-weight:        var(--fw-semibold);
  color:              var(--nexo-dark);
  text-decoration:    underline;
}
.perfil-persona__more:hover { color: var(--perfil-accent); }

.perfil-persona__info .perfil-links { margin-block-start: var(--space-5); }

@media (max-width: 1024px) {
  .perfil {
    --perfil-hero-h:     min(30rem, 78svh);
    --perfil-photo-w:    clamp(14rem, 34vw, 19rem);
    --perfil-photo-hang: clamp(3.5rem, 8vh, 5.5rem);
  }
  .perfil__photo {
    inset-inline-start: auto;
    inset-inline-end:   var(--container-pad);
  }
  .perfil-cuerpo { grid-template-columns: minmax(180px, 0.9fr) 2fr; }
}

@media (max-width: 768px) {
  /* Banner con sitio para apilar foto (arriba, grande) → nombre (abajo). Se quita
     el contexto de apilamiento del hero para poder poner el logo POR ENCIMA de la
     foto: foto (z1) bajo el contenido/logo (z2). */
  .hero.perfil-hero { min-height: min(34rem, 92svh); isolation: auto; }
  .perfil-hero .hero__content { z-index: 2; }
  .perfil-hero__id { max-width: none; }

  /* Foto: grande y arriba, cruzando POR DETRÁS del logo (el logo queda encima).
     La variante oscura baja hasta librar el logo (oscuro sobre oscuro se pierde). */
  .perfil__photo {
    inset-block-start:  clamp(7.5rem, 24vw, 11rem);
    inset-inline-start: auto;
    inset-inline-end:   var(--container-pad);
    width:              clamp(15rem, 72vw, 20rem);
    z-index:            1;
  }
  .perfil__photo--oscura { inset-block-start: clamp(12.5rem, 24vw + 5rem, 15rem); }

  .perfil-cuerpo  { grid-template-columns: 1fr; gap: clamp(var(--space-8), 6vw, var(--space-12)); }
  .perfil-main    { padding-block-start: 0; }
  .perfil-aside   { position: static; }
}

/* Tablet: igual que mobile (1 columna en el cuerpo), pero la foto del hero cruza
   a la crema (sobrepuesta) y el contacto se queda en 2 columnas (normal). */
@media (min-width: 641px) and (max-width: 768px) {
  .hero.perfil-hero { min-height: min(25rem, 80svh); }  /* baja el banner → la foto cruza */
  .perfil__photo    { z-index: 2; }                     /* sobre el cuerpo, para verse cruzando */
}

@media (max-width: 640px) {
  /* Móvil: contacto en una columna y galería de a una imagen por vista (swipe). */
  .perfil-persona { grid-template-columns: 1fr; }

  .perfil-galeria__item,
  .perfil-galeria:has(> :nth-child(3)) .perfil-galeria__item {
    flex-basis: 84%;
  }
}