/* ==========================================================================
   INDI · child theme de Extendable
   --------------------------------------------------------------------------
   Sólo lo que theme.json y los bloques no resuelven: composiciones propias
   (marca, hero, fichas del equipo, pie) y algunos detalles de ritmo. Los
   colores, tipografías, tamaños y anchos salen de theme.json.

   Los valores vienen del sitio estático anterior (legacy/estilo.css).
   ========================================================================== */

:root {
	--indi-regla: color-mix(in srgb, currentColor 14%, transparent);
	--indi-regla-fuerte: color-mix(in srgb, currentColor 30%, transparent);
}

/* ------------------------------ piezas comunes ------------------------------ */

/* Rótulo en versalitas: eyebrow del sitio anterior. */
.indi-rotulo {
	margin-bottom: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--karla);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.65;
}

h2.indi-rotulo {
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	opacity: 0.6;
}

.indi-bajada {
	max-width: var(--wp--style--global--content-size, 42rem);
	margin-top: var(--wp--preset--spacing--30);
	font-size: 1.25rem;
}

/* -------------------------------- cabecera -------------------------------- */

.indi-cabecera {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--indi-regla);
}

.admin-bar .indi-cabecera {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Sello circular de la marca (IND), como en el sitio anterior. */
.indi-marca__sello {
	flex: none;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	font-family: var(--wp--preset--font-family--noto-serif-display);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.indi-marca .wp-block-site-tagline {
	margin: 0.3rem 0 0;
	opacity: 0.65;
}

/* El nombre y la bajada institucional se leen como un solo bloque de marca. */
.indi-marca__texto {
	display: grid;
}

.indi-cabecera .wp-block-navigation__responsive-container-open,
.indi-cabecera .wp-block-navigation__responsive-container-close {
	color: inherit;
}

/* Navegación: la marca de página actual y el hover son una regla fina bajo el
   ítem, como en el sitio anterior, no un subrayado de texto. */
.indi-cabecera .wp-block-navigation-item__content {
	padding-block: 0.4rem;
	border-bottom: 1px solid transparent;
}

.indi-cabecera .wp-block-navigation-item__content:hover,
.indi-cabecera .wp-block-navigation-item__content:focus-visible,
.indi-cabecera .wp-block-navigation-item__content[aria-current],
.indi-cabecera [aria-current] > .wp-block-navigation-item__content {
	border-bottom-color: currentColor;
	text-decoration: none;
}

/* El caret del submenú respira, como en la maqueta. */
.indi-cabecera .wp-block-navigation__submenu-icon {
	margin-left: 0.35rem;
}

/*
 * En la maqueta el menú pasa a botón por debajo de 960 px; el bloque
 * Navegación de WordPress lo hace a 600 px. Acá se replica su estado cerrado
 * en la franja intermedia, sin tocar el bloque.
 */
@media (min-width: 601px) and (max-width: 960px) {
	.indi-cabecera .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.indi-cabecera .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.indi-cabecera .indi-cabecera__cta {
		display: none;
	}
}

.indi-cabecera__cta .wp-block-button__link {
	padding: 0.6em 1.2em;
}

@media (max-width: 600px) {
	/*
	 * Con el selector suelto perdía frente a la clase de layout del bloque
	 * Botones (.wp-block-buttons-is-layout-flex), que WordPress imprime
	 * después. En móvil el contacto vive en el pie y en el menú.
	 */
	.indi-cabecera .indi-cabecera__cta {
		display: none;
	}

	/*
	 * La marca y el menú comparten fila: la bajada institucional pasa a dos
	 * líneas, como en la maqueta, en lugar de empujar el menú a otro renglón.
	 */
	.indi-cabecera__fila,
	.indi-marca,
	.indi-marca__texto {
		min-width: 0;
	}
}

/* ---------------------------------- hero ---------------------------------- */

.indi-hero {
	border-bottom: 1px solid var(--indi-regla);
}

.indi-hero__titulo {
	max-width: 18ch;
	margin: 0;
	text-transform: uppercase;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* ------------------------- banda del explorador ------------------------- */

.indi-banda {
	border-top: 1px solid var(--indi-regla);
}

.indi-banda__cabecera {
	margin-bottom: var(--wp--preset--spacing--30);
}

.indi-banda__titulo {
	max-width: 22ch;
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

/*
 * El explorador (plugin INDI Interactivo) hereda los colores del theme. En las
 * bandas de fondo crema se le pasa el papel blanco para que el marco se
 * despegue, como en la maqueta anterior.
 */
.indi-banda .indi-explorer,
.indi-banda .indi-componente {
	--indi-bg: var(--wp--preset--color--tertiary);
	--indi-alt: var(--wp--preset--color--background);
}

/*
 * Banda de «Datos y evolución»: misma composición que la del explorador, pero
 * sin fondo propio —la sección continúa el papel de la página, que es lo que
 * evita que parezca otro sitio—. El panel del plugin trae sus propias reglas
 * finas, así que acá sólo se le da aire y se ajusta el ancho de la bajada.
 */
.indi-banda--datos .indi-banda__cabecera {
	margin-bottom: var(--wp--preset--spacing--40);
}

.indi-banda--datos .indi-bajada {
	font-size: 1.125rem;
}

/* ---------------------------------- cita ---------------------------------- */

.indi-cita__texto {
	max-width: 52ch;
	margin: 0;
}

.indi-cita__texto p {
	margin: 0;
}

.indi-cita__fuente {
	max-width: 52ch;
	margin-top: var(--wp--preset--spacing--30);
	font-size: 0.9375rem;
	opacity: 0.75;
}

/* --------------------------------- apoyos --------------------------------- */

.indi-apoyos .indi-rotulo {
	margin-bottom: 0;
	flex: none;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	opacity: 0.6;
}

.indi-apoyos__logo {
	margin: 0;
}

.indi-apoyos__logo img {
	max-height: 60px;
	width: auto;
	mix-blend-mode: multiply;
}

/* ------------------------------ título de página ------------------------------ */

.indi-titulo-pagina {
	border-bottom: 1px solid var(--indi-regla);
}

.indi-titulo-pagina .wp-block-post-title {
	max-width: 18ch;
	margin: 0;
	text-transform: uppercase;
}

/* --------------------------------- equipo --------------------------------- */

.indi-equipo {
	max-width: var(--wp--style--global--wide-size, 80rem);
	margin-inline: auto;
}

.indi-persona {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--indi-regla);
}

.indi-persona:last-child {
	border-bottom: 1px solid var(--indi-regla);
}

.indi-persona__foto {
	margin: 0;
}

.indi-persona__foto img {
	width: 104px;
	height: 104px;
	object-fit: cover;
	border-radius: 0.25rem;
	background: var(--wp--preset--color--tertiary);
}

.indi-persona__texto {
	max-width: 60ch;
}

/* El rol usa la variante chica del rótulo, como en la maqueta (12 px). */
.indi-persona__texto .indi-rotulo {
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	margin-bottom: 0.35rem;
	opacity: 0.55;
}

.indi-persona__texto > * + * {
	margin-top: 0.75em;
}

.indi-persona__nombre {
	margin: 0;
	font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.7rem);
}

.indi-persona__texto p {
	font-size: 1rem;
}

/* Gana a la regla de párrafo de la ficha, que si no lo lleva a 16 px. */
.indi-persona__texto .indi-persona__correo {
	font-size: 0.8125rem;
}

.indi-persona__correo a {
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid var(--indi-regla-fuerte);
	padding-bottom: 2px;
}

.indi-persona__correo a:hover {
	border-bottom-color: currentColor;
}

@media (max-width: 640px) {
	body {
		font-size: 1.0625rem;
	}

	.indi-persona {
		grid-template-columns: 84px minmax(0, 1fr);
		gap: var(--wp--preset--spacing--20);
	}

	.indi-persona__foto img {
		width: 84px;
		height: 84px;
	}
}

/* ----------------------------------- pie ----------------------------------- */

.indi-pie {
	border-top: 1px solid var(--indi-regla);
}

/*
 * La grilla del pie es la de la maqueta: una columna ancha y tres iguales,
 * dos columnas por debajo de 960 px y una sola por debajo de 640 px.
 */
.indi-pie .wp-block-columns {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}

@media (max-width: 960px) {
	.indi-pie .wp-block-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.indi-pie .wp-block-columns {
		grid-template-columns: 1fr;
	}
}

.indi-pie__bajada {
	max-width: 34ch;
	margin-top: 1rem;
	font-size: 0.9375rem;
	opacity: 0.75;
}

.indi-pie__lista {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

.indi-pie__lista a {
	opacity: 0.85;
}

.indi-pie__lista a:hover {
	opacity: 1;
}

.indi-pie__base {
	border-top: 1px solid var(--indi-regla);
	font-size: 0.8125rem;
	opacity: 0.6;
}

/* ------------------- textos: artículos y páginas del equipo ------------------- */

/* Subtítulo dentro de un texto (cuatrimestres, bloques de proyectos): serif
   mediano sobre una regla fina, no el h2 de portada. */
.indi-apartado {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--indi-regla-fuerte);
	font-size: var(--wp--preset--font-size--large);
}

/* Listas de personas: una por renglón, separadas por reglas. */
.indi-apartado + .wp-block-list {
	padding-left: 0;
	list-style: none;
}

.indi-apartado + .wp-block-list li {
	padding-block: 0.65rem;
	border-bottom: 1px solid var(--indi-regla);
}

/* Procedencia del texto (sitio anterior). */
.indi-nota-fuente {
	font-size: 0.875rem;
	letter-spacing: 0.01em;
	opacity: 0.7;
}

/* Lo que no se pudo recuperar o falta documentar. */
.indi-pendiente {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: 1px dashed var(--indi-regla-fuerte);
	font-size: 0.9375rem;
	opacity: 0.8;
}

/* «Encontrá más en…»: la referencia bibliográfica cierra el texto. */
.indi-referencia {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--indi-regla);
	font-size: 0.9375rem;
}

.indi-referencia cite {
	font-style: normal;
}

.indi-referencia a,
.indi-articulo .wp-block-post-content p a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* Proyectos: ficha con código, título, período e institución. */
.indi-proyecto {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--indi-regla);
}

.indi-proyecto > * {
	margin-block: 0;
}

.indi-proyecto > * + * {
	margin-top: var(--wp--preset--spacing--20);
}

.indi-proyecto__codigo {
	font-family: var(--wp--preset--font-family--karla);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.75;
}

.indi-proyecto__titulo {
	font-family: var(--wp--preset--font-family--noto-serif-display);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.35;
}

.indi-proyecto__periodo {
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.06em;
	opacity: 0.75;
}

.indi-proyecto-anterior {
	box-sizing: border-box;
	padding-left: var(--wp--preset--spacing--30);
	border-left: 1px solid var(--indi-regla-fuerte);
}

/* Cabecera de artículo: sección, título, autoría y fecha. */
.indi-articulo__seccion {
	margin: 0 0 var(--wp--preset--spacing--20);
}

.indi-articulo__seccion a {
	text-decoration: none;
}

.indi-articulo__cabecera .indi-articulo__titulo {
	max-width: 22ch;
}

.indi-titulo-pagina .wp-block-query-title {
	margin: 0;
	text-transform: uppercase;
}

.indi-articulo__firma {
	gap: 0 0.6rem;
	margin-top: var(--wp--preset--spacing--30);
	font-size: 0.9375rem;
}

.indi-articulo__firma > * {
	margin: 0;
}

.indi-articulo__autoria:empty {
	display: none;
}

.indi-articulo__autoria:not(:empty) + .indi-articulo__fecha::before {
	content: "·";
	margin-right: 0.6rem;
}

.indi-articulo__fecha {
	font-variant-numeric: tabular-nums;
	opacity: 0.7;
}

/* Cuerpo del artículo. */
.indi-articulo .has-drop-cap:not(:focus)::first-letter {
	font-family: var(--wp--preset--font-family--noto-serif-display);
	font-weight: 500;
}

.indi-articulo .wp-block-quote {
	margin-block: var(--wp--preset--spacing--50);
	padding-left: var(--wp--preset--spacing--30);
	border-left: 1px solid var(--indi-regla-fuerte);
}

.indi-articulo__imagen {
	max-width: var(--wp--style--global--content-size, 42rem);
	margin-inline: auto;
}

.indi-articulo__imagen .wp-element-caption,
.indi-articulo .wp-element-caption {
	margin-top: var(--wp--preset--spacing--20);
	font-size: 0.875rem;
	opacity: 0.75;
}

.indi-articulo__pie {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--indi-regla);
	font-size: 0.875rem;
}

.indi-articulo__etiquetas {
	opacity: 0.75;
}

.indi-articulo__volver {
	margin-top: var(--wp--preset--spacing--20);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Archivo de una categoría: lista de artículos con reglas, imagen a la derecha. */
.indi-articulos__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.indi-articulos__item {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--indi-regla);
}

.indi-articulos__lista > li:first-child .indi-articulos__item {
	padding-top: 0;
}

.indi-articulos__texto > * {
	margin-block: 0;
}

.indi-articulos__texto > * + * {
	margin-top: var(--wp--preset--spacing--20);
}

.indi-articulos__titulo {
	font-size: var(--wp--preset--font-size--large);
}

.indi-articulos__titulo a {
	text-decoration: none;
}

.indi-articulos__extracto .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--20);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-bottom: 1px solid currentColor;
}

.indi-articulos__vacio {
	opacity: 0.75;
}

@media (min-width: 768px) {
	.indi-articulos__item:has(.indi-articulos__imagen) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
		align-items: start;
	}
}

/* --------------------------------- detalles --------------------------------- */

/* Foco visible con la tinta del sitio, también sobre las bandas oscuras. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}