/* =============================================================
   single-investigadora.css — perfil completo de una investigadora.

   Estructura: hero violeta full-width inmersivo + contenido con
   bio/líneas/proyectos/publicaciones sobre fondo blanco.

   Solo se carga en is_singular('investigadora').
   ============================================================= */

/* Wrapper: clipa overflow generado por la negative margin del hero
   para evitar scroll horizontal (mismo patrón que page-quienes-somos
   y page-investigadoras). */
.single-investigadora {
	overflow-x: hidden;
	overflow-x: clip;
}

/* === HERO VIOLETA (full-width via negative margin) === */

.single-hero {
	background: var(--color-primary);
	color: var(--color-white);
	padding-block: var(--space-4) var(--space-7);
	margin-inline: calc(-1 * var(--container-padding));
	padding-inline: var(--container-padding);
}

.single-hero .container {
	max-width: var(--container-max);
}

/* --- Botón volver --- */

.single-hero__volver {
	margin-bottom: var(--space-5);
}

.btn-pill--volver {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-3);
	background: var(--color-accent);
	color: var(--color-primary);
	border: 2px solid var(--color-accent);
	border-radius: var(--radius-pill);
	text-decoration: none;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	transition: all var(--transition-base);
}

.btn-pill--volver:hover {
	background: transparent;
	color: var(--color-accent);
	border-color: var(--color-accent);
	transform: translateX(-3px);
}

/* --- Layout 2 columnas --- */

.single-hero__layout {
	display: grid;
	grid-template-columns: minmax(280px, 380px) 1fr;
	gap: var(--space-5);
	align-items: start;
}

@media (max-width: 768px) {
	.single-hero__layout {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}
}

/* --- Media (foto en tarjeta de color) --- */

.single-hero__media {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-xl);
	overflow: visible;
	/* La foto sobresale 20% de la altura del media (4/5 → 0.2 × 1.25 = 25%
	   del ancho). Margen proporcional para que no toque el botón "Volver". */
	margin-top: calc(25% + var(--space-2));
}

.single-hero__media--violeta {
	background: var(--color-primary-light);
}

.single-hero__media--verde {
	background: var(--color-accent);
}

.single-hero__foto {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 120%;
	object-fit: cover;
	object-position: bottom center;
	border-bottom-left-radius: var(--radius-xl);
	border-bottom-right-radius: var(--radius-xl);
}

/* --- Datos --- */

.single-hero__datos {
	padding-block: var(--space-2);
}

.single-hero__nombre {
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);
	font-weight: var(--weight-bold);
	color: var(--color-white);
	line-height: var(--leading-tight);
	letter-spacing: -0.02em;
	margin: 0 0 var(--space-3) 0;
}

.single-hero__cargo {
	font-size: var(--text-md);
	font-weight: var(--weight-semibold);
	color: var(--color-accent);
	margin: 0 0 var(--space-2) 0;
}

.single-hero__disciplina {
	font-size: var(--text-base);
	color: var(--color-white);
	margin: 0 0 var(--space-3) 0;
	opacity: 0.95;
}

.single-hero__label {
	font-weight: var(--weight-semibold);
	color: var(--color-accent);
}

.single-hero__email {
	margin: 0 0 var(--space-3) 0;
}

.single-hero__email a {
	color: var(--color-white);
	text-decoration: underline;
	font-weight: var(--weight-medium);
}

.single-hero__email a:hover {
	color: var(--color-accent);
}

/* --- Enlaces como pills verdes sobre fondo violeta --- */

.single-hero__enlaces {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}

.btn-pill--enlace-hero {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-3);
	background: var(--color-accent);
	color: var(--color-primary);
	border: 2px solid var(--color-accent);
	border-radius: var(--radius-pill);
	text-decoration: none;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	transition: all var(--transition-base);
}

.btn-pill--enlace-hero:hover {
	background: transparent;
	color: var(--color-accent);
	border-color: var(--color-accent);
	transform: translateY(-2px);
}

/* === CONTENIDO PRINCIPAL (fondo blanco) === */

.single-contenido {
	background: var(--color-white);
	padding-block: var(--space-7);
}

.single-contenido .container {
	max-width: var(--container-max);
}

.single-seccion-titulo {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
	font-weight: var(--weight-bold);
	color: var(--color-primary);
	margin: 0 0 var(--space-3) 0;
	line-height: var(--leading-tight);
	letter-spacing: -0.02em;
}

/* --- Bio --- */

.single-bio {
	margin-bottom: var(--space-7);
}

.single-bio__texto {
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--color-gray-700);
	max-width: 75ch;
}

.single-bio__texto p {
	margin: 0 0 var(--space-2) 0;
}

.single-bio__texto p:last-child {
	margin-bottom: 0;
}

/* --- Líneas --- */

.single-lineas {
	margin-top: var(--space-4);
}

.single-lineas__titulo {
	font-family: var(--font-display);
	font-size: var(--text-md);
	font-weight: var(--weight-bold);
	color: var(--color-primary);
	margin: 0 0 var(--space-2) 0;
}

.single-lineas__lista {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}

.single-linea-chip {
	display: inline-flex;
	align-items: center;
	padding: var(--space-1) var(--space-2);
	background: var(--color-accent-soft);
	color: var(--color-primary);
	border: 1.5px solid var(--color-primary);
	border-radius: var(--radius-pill);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	font-family: var(--font-body);
}

/* --- Proyectos y publicaciones --- */

.single-proyectos,
.single-publicaciones {
	margin-bottom: var(--space-7);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-gray-300);
}

.single-publicaciones {
	margin-bottom: 0;
}