/*
  Nosotros.

  Las medidas salen de dos fuentes, y las dos coinciden:

    docs/mockups/nosotros/Nosotros 1.jpg        escritorio, 1512 px de ancho
    docs/mockups/nosotros/Nosotros-movil 1.jpg  móvil, 360 px de ancho
    docs/media-pendiente/About us.svg           el diseño original, en vectores

  El mockup es el diseño original escalado × 1.039 (su tarjeta mide 1478.5 px
  y la del archivo 1423). Por eso las medidas de la cabecera se escriben en
  las unidades del archivo multiplicadas por --k: así se leen tal cual en
  `About us.svg` y a 1512 px caen exactamente sobre la captura.
*/

/* ---------- Cabecera ---------- */

.nosotros-header {
	--k: 1.039;

	/* El margen de la tarjeta, igual a los cuatro lados: 14 px en móvil, 16 en escritorio. */
	--margen: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);

	/*
	  layout.css sube la primera sección por debajo del navbar. Aquí se le
	  devuelve el alto de la barra más el margen: la foto empieza siempre
	  debajo del navbar, en todos los tamaños.
	*/
	--primera-seccion-pt: calc(var(--navbar-h) + var(--margen));

	padding-inline: var(--margen);
	padding-bottom: var(--margen);
}

/*
  La tarjeta. La foto, la línea, el botón y los círculos se colocan contra
  ella. `isolation` le da su propio apilado: la foto va en el fondo con
  z-index negativo y el texto queda encima sin tener que posicionarlo, que es
  lo que deja al botón colocarse contra la tarjeta y no contra el texto.
*/
.nosotros-header__tarjeta {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;

	max-width: 1480px;
	height: clamp(30rem, 38.2vw, 36.1rem); /* 577.6 px a 1512, como el mockup */
	margin-inline: auto;

	/* El texto arranca a 160 px del borde de una tarjeta de 1478.5. */
	padding-left: 10.86%;

	color: var(--text-1);
}

/*
  La foto y su recorte.

  La máscara es la foto entera menos el trazo de los escalones. El trazo es
  el de `About us.svg`, copiado sin tocar y trasladado para que su caja
  empiece en la esquina del recorte; se alarga 10 unidades por la derecha y
  por abajo para que el borde no deje una línea de un píxel de foto.

  Los escalones tienen tamaño fijo y se anclan a la esquina inferior
  derecha: lo que se estira al cambiar el ancho es el resto de la foto. Así
  las curvas nunca se deforman.
*/
.nosotros-header__foto {
	--recorte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 498.678 263.979'%3E%3Cpath d='M0 253.979C16.569 253.979 30 240.548 30 223.979V174.979C30 147.365 52.37 124.979 79.968 124.979C94.868 124.979 106.948 112.891 106.948 97.979V79.979C106.948 52.365 129.318 29.979 156.908 29.979H458.698C475.258 29.979 488.678 16.557 488.678 0H498.678V263.979H0Z'/%3E%3C/svg%3E");

	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;

	/* Esquinas del diseño: 30 arriba y 20 abajo a la izquierda. La de abajo a la derecha la tapa el recorte. */
	border-radius: calc(30px * var(--k)) calc(30px * var(--k)) 0 calc(20px * var(--k));

	-webkit-mask-image: linear-gradient(#000 0 0), var(--recorte);
	mask-image: linear-gradient(#000 0 0), var(--recorte);
	-webkit-mask-size: 100% 100%, calc(498.678px * var(--k)) calc(263.979px * var(--k));
	mask-size: 100% 100%, calc(498.678px * var(--k)) calc(263.979px * var(--k));
	-webkit-mask-position: 0 0, right calc(-10px * var(--k)) bottom calc(-10px * var(--k));
	mask-position: 0 0, right calc(-10px * var(--k)) bottom calc(-10px * var(--k));
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	/*
	  La foto menos el trazo. Con `exclude` la foto desaparecía entera en
	  Chrome: `subtract` dice lo mismo y funciona en todos.
	*/
	-webkit-mask-composite: source-out;
	mask-composite: subtract;
}

/*
  La línea de la izquierda: cuatro círculos huecos que se achican, unidos
  por un trazo de 1 px. En el mockup sus centros caen al 11.4 %, 39.2 %,
  66.2 % y 92.2 % del alto, a tramos casi iguales: por eso los tramos son
  flexibles y se reparten el alto que haya.
*/
.nosotros-header__linea {
	position: absolute;
	top: calc(11.4% - 10px);
	bottom: calc(7.8% - 3px);
	left: calc(5.41% - 10px);
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 20px;
}

.nosotros-header__linea span {
	flex: none;
	border: 3px solid var(--text-1);
	border-radius: 50%;
}

.nosotros-header__linea span:nth-of-type(1) { width: 20px; height: 20px; }
.nosotros-header__linea span:nth-of-type(2) { width: 14px; height: 14px; }
.nosotros-header__linea span:nth-of-type(3) { width: 10px; height: 10px; }
.nosotros-header__linea span:nth-of-type(4) { width: 6px;  height: 6px;  }

.nosotros-header__linea i {
	flex: 1;
	width: 1px;
	background-color: var(--text-1);
}

/*
  Título y subtítulo. 81 px y 21 px en el mockup de escritorio.

  En pantallas pequeñas el título no baja de 40 px (en el mockup de móvil
  eran 29, y se veía perdido): así cabe en una línea con unos 28 px de aire
  a cada lado a 360. El segundo término del min() es el seguro para
  teléfonos más angostos: nunca deja que el título pase de una línea.
*/
.nosotros-header__titulo {
	margin: 0;
	font-size: min(
		clamp(2.5rem, 1.646rem + 3.796vw, 5.0625rem),
		calc((100vw - 2 * var(--margen) - 3rem) / 6.95)
	);
	line-height: 1.2;
	white-space: nowrap;
}

.nosotros-header__subtitulo {
	margin: 1.25rem 0 0;
	font-size: clamp(1rem, 0.896rem + 0.463vw, 1.3125rem); /* 16 px … 21 px */
	line-height: 1.4;
	white-space: nowrap;
}

/* Colores medidos del mockup, que caen sobre los de la paleta. */
.nosotros-header__conocimiento,
.nosotros-header__innovacion {
	font-weight: 600;
}

.nosotros-header__conocimiento {
	color: var(--blue-mid);
}

.nosotros-header__innovacion {
	color: var(--hover-cyan);
}

/*
  El botón, en el escalón de arriba. En el mockup mide 357.5 de ancho, su
  borde derecho coincide con el de la foto y su centro queda a 188 px del
  pie de la tarjeta.
*/
.nosotros-header__boton {
	position: absolute;
	right: 0;
	bottom: calc(181.1px * var(--k) - var(--button-height) / 2);
	width: calc(344.1px * var(--k));
	gap: 1.15rem;
}

.nosotros-header__flecha {
	flex: none;
	width: 1.25rem;
	height: auto;
	transition: transform 0.25s ease;
}

/* Como en el diseño original: al pasar el cursor la flecha apunta hacia abajo. */
.nosotros-header__boton:hover .nosotros-header__flecha,
.nosotros-header__boton:focus-visible .nosotros-header__flecha {
	transform: rotate(90deg);
}

/*
  Los tres círculos de las membresías, en el escalón de abajo. Cada uno es
  un poco más pequeño que el anterior y se monta sobre él: el de la derecha
  queda delante, como en el mockup.
*/
.nosotros-header__membresias {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nosotros-header__membresia {
	position: absolute;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border-radius: 50%;
}

/* El isotipo ocupa el 29 % del círculo: 36 px en el de 123.5 del mockup. */
.nosotros-header__membresia svg {
	width: 29%;
	height: auto;
}

.nosotros-header__membresia--fundadores {
	right: calc(332.7px * var(--k));
	bottom: calc(5px * var(--k));
	width: calc(120px * var(--k));
	background-color: var(--membresia-fundadores);
}

.nosotros-header__membresia--honorarios {
	right: calc(248.7px * var(--k));
	bottom: calc(10px * var(--k));
	width: calc(110px * var(--k));
	background-color: var(--membresia-honorarios);
}

.nosotros-header__membresia--asociados {
	right: calc(165.1px * var(--k));
	bottom: calc(15px * var(--k));
	width: calc(100px * var(--k));
	background-color: var(--membresia-asociados);
}

/*
  Sin escalones.

  Los escalones se quedan mientras la curva de arriba no alcance al
  subtítulo, que es la línea más larga. Con los escalones fijos y el texto
  encogiéndose más despacio que la foto, se tocan cerca de los 1080 px: de
  ahí para abajo la foto queda como una tarjeta redondeada, sin círculos
  ni línea, y todo se centra.

  La tarjeta ocupa casi todo el alto de la pantalla, con el mismo margen a
  los cuatro lados, para que el texto tenga aire y se vea el borde de abajo
  antes de hacer scroll.
*/
@media (max-width: 1079px) {

	.nosotros-header__tarjeta {
		flex-direction: column;
		justify-content: center;
		height: calc(100vh - var(--navbar-h) - 2 * var(--margen));
		height: calc(100svh - var(--navbar-h) - 2 * var(--margen));
		min-height: 26rem;
		padding: 2rem 1.5rem;
		text-align: center;
	}

	.nosotros-header__foto {
		/* Como en el mockup de móvil: la cara a la derecha y la parte oscura del degradado detrás del texto. */
		object-position: 25% 50%;
		border-radius: clamp(0.875rem, 0.521rem + 1.574vw, 1.9375rem); /* 14 px … 31 px */
		-webkit-mask-image: none;
		mask-image: none;
	}

	.nosotros-header__linea,
	.nosotros-header__membresias {
		display: none;
	}

	.nosotros-header__texto {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.nosotros-header__subtitulo {
		max-width: 30rem;
		white-space: normal;
		text-wrap: balance;
	}

	/* Sobre la foto oscura, el botón pasa a contorno blanco. */
	.nosotros-header__boton {
		position: static;
		width: auto;
		margin-top: clamp(2.25rem, 1.8rem + 2vw, 3rem);
		padding-inline: 2rem;
		gap: 0.75rem;
		border-color: var(--text-1);
		color: var(--text-1);
	}

	.nosotros-header__boton:hover,
	.nosotros-header__boton:focus-visible {
		background-color: var(--text-1);
		color: var(--bg-dark);
	}
}

/* ---------- Párrafo de presentación ---------- */

/*
  Centrado en todos los tamaños. Medido a 1512: letra de 15.7 px, renglones
  de 25 y el más largo de 753 px. Arriba, 133 px desde la foto; abajo, 201
  hasta la banda. En el móvil, 66 y 54: cada clamp() une esos dos puntos.
*/
.nosotros-intro {
	padding-top: clamp(2.8125rem, 1.458rem + 6.019vw, 6.875rem);
	padding-bottom: clamp(3.2rem, 0.156rem + 13.61vw, 12.4rem);
}

.nosotros-intro__texto {
	text-align: center;
}

.nosotros-intro__texto p {
	max-width: 48.5em;
	margin-inline: auto;
	font-size: 0.979rem;
	line-height: 1.6;
}

/* ---------- Misión y Visión ---------- */

.nosotros-proposito {
	margin-bottom: clamp(3rem, 2.25rem + 2.3vw, 4.875rem);
}

/*
  Escritorio: texto a la izquierda y las dos tarjetas a la derecha, todo
  centrado en el alto de la banda (436 px a 1512). Las tarjetas miden el
  31.45 % y el 27.75 % del contenedor —424.5 y 374.5 px en el mockup— con
  16.5 px entre ellas.
*/
.nosotros-proposito__rejilla {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 31.45% 27.75%;
	column-gap: 1.22%;
	align-items: center;
	min-height: 27.25rem;
	padding: 2.5rem 0.34rem;
}

/*
  La banda sale del borde izquierdo de la pantalla y termina a media
  tarjeta de Misión: en el 55.47 % del contenedor. Va detrás de todo.
*/
.nosotros-proposito__rejilla::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: 44.53%;
	background-image: var(--grad-proposito);
}

.nosotros-proposito__texto {
	color: var(--text-1);
}

.nosotros-proposito__pildora {
	display: inline-flex;
	align-items: center;
	height: 1.9375rem;
	margin: 0;
	padding: 0 0.844rem;
	border-radius: var(--radius-pill);
	background-color: var(--hover-cyan);
	color: var(--text-1);
	font-size: 0.844rem; /* 13.5 px */
	line-height: 1;
}

/*
  31 px a 1512 y 22 en el móvil (el mockup de móvil tenía 19). El ancho
  máximo deja "de la Inteligencia Artificial en" en un renglón y baja
  "América Latina" al siguiente, como en el original.
*/
.nosotros-proposito__titulo {
	max-width: 14em;
	margin: 0.95rem 0 0;
	font-size: clamp(1.375rem, 1.183rem + 0.852vw, 1.95rem);
	font-weight: 600;
	line-height: 1.3;

	/* Sin el balance de base.css: ese reparto partía "en América Latina" y no es el del original. */
	text-wrap: wrap;
}

.nosotros-proposito__titulo span {
	display: block;
}

.nosotros-proposito__boton {
	margin-top: 2.2rem;
}

/* Las dos tarjetas. */
.nosotros-proposito__tarjeta {
	position: relative;
	border-radius: 20px;
	box-shadow: var(--sombra-tarjeta-clara);
	color: var(--bg-dark);
	text-align: center;
}

.nosotros-proposito__tarjeta p {
	margin: 1.29rem 0 0;
	font-size: 0.856rem; /* 13.7 px */
	line-height: 1.6;
}

/*
  Misión es de cristal: blanco al 37 % con desenfoque. Medido donde se
  monta sobre la banda: ahí deja ver el degradado difuminado, que es lo que
  hace que la tarjeta parezca pasar de azul a blanco.
*/
.nosotros-proposito__tarjeta--mision {
	padding: 3.7rem 1.53rem 2.6rem;
	background-color: rgba(251, 251, 251, 0.37);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

.nosotros-proposito__tarjeta--mision p {
	margin-top: 1.75rem;
}

/* Visión es opaca, un punto más clara que el fondo de la página. */
.nosotros-proposito__tarjeta--vision {
	/* 34 px a los lados: con 35 "red" ya no cabe en el primer renglón y los cortes dejan de ser los del original. */
	padding: 3.09rem 2.15rem 2.44rem;
	background-color: var(--bg-white);
}

/*
  El título se centra solo, sin contar el ícono: el ícono cuelga a su
  derecha. Así estaba en el original.
*/
.nosotros-proposito__tarjeta-titulo {
	position: relative;
	display: inline-block;
	margin: 0;
	font-size: 1.53rem; /* 24.5 px */
	font-weight: 600;
	line-height: 1.3;
}

.nosotros-proposito__tarjeta-titulo .icono {
	position: absolute;
}

/* La bombilla, inclinada a la derecha, con los rayos por encima del título. */
.nosotros-proposito__tarjeta-titulo .icono--bombilla {
	left: calc(100% + 12px);
	bottom: -15.5px;
	width: 40px;
	height: 64px;
	transform: rotate(20deg);
}

/* El cohete, inclinado a la izquierda. */
.nosotros-proposito__tarjeta-titulo .icono--cohete {
	left: calc(100% + 12.7px);
	bottom: -5.35px;
	width: 27.6px;
	height: 43.7px;
	transform: rotate(-20deg);
}

/*
  Con menú de hamburguesa: todo apilado y centrado, como en el mockup de
  móvil. La banda pasa a ocupar el ancho entero, desde 52 px por encima de
  la píldora hasta 42 px por debajo del borde de la tarjeta de Misión, que
  se monta sobre ella.
*/
@media (max-width: 991px) {

	.nosotros-proposito__rejilla {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 0;
		padding-block: 0;
	}

	.nosotros-proposito__rejilla::before {
		display: none;
	}

	.nosotros-proposito__texto {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding: 3.25rem 0 5.94rem;
		text-align: center;
	}

	/*
	  En el móvil el degradado se ve más estirado: la banda enseña su tramo
	  central, del azul noche al azul medio claro.
	*/
	.nosotros-proposito__texto::before {
		content: '';
		position: absolute;
		z-index: -1;
		inset: 0 calc(50% - 50vw);
		background-image: var(--grad-proposito);
		background-size: 200% 100%;
		background-position: 48% 0;
	}

	.nosotros-proposito__tarjeta--mision {
		width: min(26.53rem, 100% - 2.125rem);
		margin-top: -2.625rem;
	}

	.nosotros-proposito__tarjeta--vision {
		width: min(23.4rem, 100% - 3.125rem);
		margin-top: 1.125rem;
	}
}

/* ---------- Comité Directivo ---------- */

/*
  Medidas del mockup de 1512 (`Nosotros 4.jpg` y `Nosotros 7.jpg`): título de
  48 px en 600; fotos de 220.5 × 280 con radio de 12 y una sombra apenas
  visible; nombre de 16.4 px en 600 y cargo de 12.25 px en 500 y gris.
*/
.comite {
	padding-top: clamp(2.5rem, 1.75rem + 3.3vw, 6.125rem);
	padding-bottom: clamp(4rem, 3rem + 4vw, 7rem);
	color: var(--bg-dark);
	text-align: center;
}

.comite__titulo {
	margin: 0;
	font-size: clamp(1.875rem, 1.35rem + 2.3vw, 2.98rem); /* 30 px … 48 px */
	font-weight: 600;
	line-height: 1.3;
}

/* El equipo actual: cuatro tarjetas iguales, centradas. */
.comite__equipo {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 13.78rem));
	justify-content: center;
	gap: 3rem clamp(1.5rem, 0.5rem + 3.9vw, 4.56rem);
	margin: clamp(2.5rem, 1rem + 6.9vw, 8.7rem) 0 0;
	padding: 0;
	list-style: none;
}

.comite__foto {
	aspect-ratio: 220.5 / 280;
	overflow: hidden;
	border-radius: 12px;
	background-color: var(--warm-grey);
	box-shadow: var(--sombra-foto);
}

.comite__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.comite__nombre {
	margin: 1.06rem 0 0;
	font-size: 1.025rem; /* 16.4 px */
	font-weight: 600;
	line-height: 1.3;
}

.comite__cargo {
	margin: 0.25rem 0 0;
	color: var(--text-4);
	font-size: 0.766rem; /* 12.25 px */
	font-weight: 500;
	line-height: 1.27;
}

/* El período, en versalitas grises, como el "PERIODO NOV 2025 - NOV 2026" del original. */
.comite__periodo,
.presidencias__periodo {
	margin: 0.35rem 0 0;
	color: var(--text-4);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* "Ver biografía": un botón con aspecto de enlace. */
.comite__bio {
	margin: 0.6rem 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--cta);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
}

.comite__bio:hover {
	color: var(--blue-mid);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
  La línea de tiempo de las presidencias. Las fotos van en círculos, como
  los de la cabecera, unidas por un trazo de 1 px; la presidencia en curso
  lleva un anillo celeste y la marca "Actual".
*/
.presidencias {
	margin-top: clamp(4rem, 2.5rem + 6vw, 7.5rem);
}

.presidencias__titulo {
	margin: 0;
	font-size: 1.53rem; /* como los títulos de Misión y Visión */
	font-weight: 600;
	line-height: 1.3;
}

.presidencias__linea {
	--foto: 104px;
	--hueco: 2rem;

	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--hueco);
	max-width: 56rem;
	margin: clamp(2rem, 1.5rem + 2vw, 3rem) auto 0;
	padding: 0;
	list-style: none;
}

.presidencias__item {
	position: relative;
}

/* El trazo va de un círculo al siguiente, dejando 8 px de aire a cada lado. */
.presidencias__item:not(:last-child)::after {
	content: '';
	position: absolute;
	top: calc(var(--foto) / 2);
	left: calc(50% + var(--foto) / 2 + 8px);
	width: calc(100% + var(--hueco) - var(--foto) - 16px);
	height: 1px;
	background-color: var(--text-3);
}

.presidencias__foto {
	width: var(--foto);
	height: var(--foto);
	margin-inline: auto;
	overflow: hidden;
	border-radius: 50%;
	background-color: var(--warm-grey);
	box-shadow: var(--sombra-foto);
}

.presidencias__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 18%;
}

.presidencias__item--actual .presidencias__foto {
	outline: 2px solid var(--hover-cyan);
	outline-offset: 4px;
}

.presidencias__texto {
	margin-top: 1rem;
}

.presidencias__actual {
	display: inline-block;
	margin-left: 0.35rem;
	padding: 0.1rem 0.5rem;
	border-radius: var(--radius-pill);
	background-color: var(--hover-cyan);
	color: var(--text-1);
	font-size: 0.65rem;
	letter-spacing: 0.04em;
	vertical-align: 1px;
}

.presidencias__nombre {
	margin: 0.3rem 0 0;
	font-size: 1.025rem;
	font-weight: 600;
	line-height: 1.3;
}

.presidencias__cargo {
	margin: 0.2rem 0 0;
	color: var(--text-4);
	font-size: 0.766rem;
	font-weight: 500;
	line-height: 1.27;
}

/*
  La ventana de la biografía: foto a la izquierda y el texto completo a la
  derecha, que se desplaza solo si no cabe. La equis se queda siempre a la
  vista.
*/
.biografia {
	width: min(52rem, 100% - 2rem);
	max-height: min(85vh, 48rem);
	padding: 0;
	border: 0;
	border-radius: 20px;
	background-color: var(--bg-white);
	color: var(--bg-dark);
	box-shadow: 0 20px 60px rgba(10, 14, 34, 0.25);

	/* La sección va centrada; un texto largo se lee mejor alineado a la izquierda. */
	text-align: left;
}

.biografia[open] {
	display: grid;
	grid-template-columns: 15rem minmax(0, 1fr);
	gap: 2.5rem;
	padding: 2.5rem 1.5rem 2.5rem 2.5rem;
	overflow: hidden;
}

.biografia::backdrop {
	background-color: rgba(10, 14, 34, 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* Con una biografía abierta, la página de atrás no se desplaza. */
html:has(dialog.biografia[open]) {
	overflow: hidden;
}

.biografia__cerrar {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--text-3);
	border-radius: 50%;
	background-color: var(--bg-white);
	color: var(--bg-dark);
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.biografia__cerrar:hover {
	background-color: var(--bg-light);
}

.biografia__cerrar svg {
	width: 20px;
	height: 20px;
}

.biografia__foto {
	align-self: start;
	aspect-ratio: 220.5 / 280;
	overflow: hidden;
	border-radius: 12px;
	background-color: var(--warm-grey);
}

.biografia__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.biografia__texto {
	max-height: calc(min(85vh, 48rem) - 5rem);
	padding-right: 3rem; /* el hueco de la equis */
	overflow-y: auto;
	overscroll-behavior: contain;
}

.biografia__nombre {
	margin: 0;
	font-size: 1.53rem;
	font-weight: 600;
	line-height: 1.3;
}

.biografia__cargo {
	margin: 0.3rem 0 0;
	color: var(--text-4);
	font-size: 0.875rem;
	font-weight: 500;
}

.biografia__periodo {
	margin-left: 0.5rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.biografia__cuerpo p {
	margin: 0.9em 0 0;
	font-size: 0.9375rem;
	line-height: 1.65;
}

/* Tablet: el equipo en dos columnas. */
@media (max-width: 991px) {

	.comite__equipo {
		grid-template-columns: repeat(2, minmax(0, 13.78rem));
		column-gap: 1rem;
		row-gap: 2.5rem;
	}
}

/*
  Móvil: la línea de tiempo se pone en vertical, con la foto a la izquierda
  y el trazo bajando de un círculo al siguiente. La biografía pasa a una
  sola columna y la ventana entera se desplaza.
*/
@media (max-width: 767px) {

	.presidencias__linea {
		--foto: 72px;

		grid-template-columns: minmax(0, 1fr);
		max-width: 24rem;
		text-align: left;
	}

	.presidencias__item {
		display: grid;
		grid-template-columns: var(--foto) minmax(0, 1fr);
		column-gap: 1rem;
		align-items: center;
	}

	.presidencias__item:not(:last-child)::after {
		top: calc(var(--foto) + 8px);
		left: calc(var(--foto) / 2);
		width: 1px;
		height: calc(100% + var(--hueco) - var(--foto) - 16px);
	}

	.presidencias__foto {
		margin: 0;
	}

	.presidencias__texto {
		margin-top: 0;
	}

	.biografia[open] {
		display: block;
		padding: 1.5rem;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.biografia__cerrar {
		position: sticky;
		top: 0;
		float: right;
		margin: -0.5rem -0.5rem 0 0;
	}

	.biografia__foto {
		width: 7.5rem;
	}

	.biografia__texto {
		max-height: none;
		margin-top: 1.25rem;
		padding-right: 0;
		overflow: visible;
	}
}