/**
 * Secciones de la portada y de las páginas interiores.
 */

/* Higiene de rejilla: por omisión un elemento de rejilla no puede encogerse
   por debajo del ancho intrínseco de su contenido, y eso arrastra la página.
   Se anula en todas las rejillas de sección del tema. */
.contacto > *,
.trabajo > *,
.destacado > *,
.destacado > .wp-block-group__inner-container > *,
.bloque-lista > .wp-block-group__inner-container > *,
.llamada > .wp-block-group__inner-container > *,
.mensaje-direccion__interior > *,
.ficha-directivo > *,
.sello-detalle > *,
.hito > *,
.evento > *,
.atributos > *,
.sellos > *,
.asignaturas > *,
.album__fotos > *,
.album__videos > * {
	min-width: 0;
}

/* Cuando el tema no trae theme.json, WordPress restaura dentro de cada bloque
   de grupo el contenedor interno que usaban las versiones anteriores
   (wp_restore_group_inner_container). Ese div se interpone entre la rejilla y
   sus elementos: el rótulo y el texto quedaban apilados en la primera columna
   y el resto de la fila, vacío. Se le quita la caja para que los hijos vuelvan
   a ser elementos de la rejilla. */
.destacado > .wp-block-group__inner-container,
.bloque-lista > .wp-block-group__inner-container,
.llamada > .wp-block-group__inner-container {
	display: contents;
}

/* ==========================================================================
   Hero de la portada
   ========================================================================== */

.hero {
	position: relative;
	display: grid;
	isolation: isolate;
	min-height: clamp(18rem, 14rem + 24vw, 30rem);
	background-color: var(--color-navy);
}

.hero__medio {
	position: absolute;
	inset: 0;
	z-index: -2;
}

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

/* La fotografía se muestra sin tinte, a petición del Servicio Local. Lo que
   sostiene el contraste es el panel que llevan detrás el título, el subtítulo
   y los botones de redes: con opacidad 0,62, el texto blanco mide 5,07:1
   incluso sobre una fotografía completamente blanca. Sin ese panel, la
   legibilidad dependería de qué imagen suba cada establecimiento y dejaría de
   ser auditable. */
.hero__interior {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: var(--e-2xs);
	padding-block: var(--e-xl) var(--e-lg);
	color: var(--color-texto-inverso);
}

.hero__titulo {
	color: var(--color-texto-inverso);
	font-size: var(--fs-800);
	font-weight: var(--peso-negro);
	line-height: var(--interlinea-titulo);
	margin: 0;
}

/* El Servicio Local pidió expresamente que el texto vaya sobre la fotografía
   sin ningún panel detrás, aceptando que pueda quedar poco legible. Queda la
   sombra, que no forma un fondo pero despega las letras del fondo claro.
   La salvedad está anotada en docs/DECISIONES.md, punto 30, y el informe de
   accesibilidad la recoge como excepción del criterio 1.4.3. */
.hero__titulo-texto {
	text-shadow: var(--sombra-texto-sobre-foto);
}

.hero__subtitulo {
	color: var(--color-texto-inverso);
	font-size: var(--fs-500);
	max-width: 32rem;
	margin: 0;
	text-shadow: var(--sombra-texto-sobre-foto);
}

/* Los botones de redes son contorno blanco sobre transparente. Sin panel, lo
   único que los sostiene sobre una fotografía clara es la sombra. */
.hero__redes .redes__enlace {
	box-shadow: var(--sombra-texto-sobre-foto);
}

.hero__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e-sm);
	margin-top: var(--e-2xs);
}

.hero__redes {
	margin-top: var(--e-sm);
}

@media (min-width: 64em) {
	.hero__interior {
		padding-block: var(--e-3xl) var(--e-2xl);
	}

	.hero__redes {
		align-self: center;
	}
}

/* ==========================================================================
   Cabecera de las páginas interiores
   ========================================================================== */

.cabecera-pagina {
	position: relative;
	display: grid;
	isolation: isolate;
	/* Más alta que antes: al lado del hero de la portada, la franja de 11 rem
	   se leía como una tira estrecha. */
	min-height: clamp(14rem, 10rem + 22vw, 26rem);
	background-color: var(--color-navy);
}

.cabecera-pagina__medio {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.cabecera-pagina__medio img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Se encuadra por el tercio superior: en una fotografía de grupo las caras
	   están arriba y centrar la recorta justo por los ojos. */
	object-position: center 28%;
}

.cabecera-pagina__interior {
	display: flex;
	align-items: flex-end;
	padding-block: var(--e-xl) var(--e-md);
}

/* La portada, las migas y el primer bloque de texto se seguían con demasiado
   aire entre medio. */
.cabecera-pagina + .contenedor .migas {
	padding-block: var(--e-2xs) 0;
}

.cabecera-pagina + .contenedor + .seccion,
.cabecera-pagina + .seccion {
	padding-top: var(--e-md);
}

/* La fotografía se muestra sin tinte, a petición del Servicio Local. El panel
   va solo detrás del título y no sobre toda la superficie: con la capa del
   banner retirada, sobre una fotografía clara el título blanco caía muy por
   debajo del mínimo, y esta banda lo mantiene en 5,07:1 incluso contra blanco.
   La opacidad es la misma 0,62 ya medida para el hero. */
.cabecera-pagina__titulo {
	color: var(--color-texto-inverso);
	font-size: var(--fs-700);
	font-weight: var(--peso-negro);
	line-height: var(--interlinea-titulo);
	margin: 0;
}

.cabecera-pagina__titulo-texto {
	text-shadow: var(--sombra-texto-sobre-foto);
}

/* ==========================================================================
   Sellos institucionales
   ========================================================================== */

.sellos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--e-md);
	padding: 0;
	margin: 0;
	list-style: none;
	justify-content: center;
}

@media (min-width: 48em) {
	.sellos {
		grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	}
}

.sello {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--e-2xs);
	text-align: center;
}

.sello__medallon {
	width: clamp(6.5rem, 5rem + 14vw, 10.5rem);
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background-color: var(--color-fondo-alterno);
}

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

.sello__titulo {
	font-size: var(--fs-300);
	font-weight: var(--peso-medio);
	margin: 0;
	color: var(--color-texto);
}

.lista-sellos {
	display: flex;
	flex-direction: column;
	gap: var(--e-lg);
	padding: 0;
	margin: 0;
	list-style: none;
}

/* Sellos con descripción, en la página Proyecto Educativo. */
.sello-detalle {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--e-sm);
	align-items: start;
}

@media (min-width: 40em) {
	.sello-detalle {
		grid-template-columns: 9rem 1fr;
		gap: var(--e-md);
	}

	/* Un sello sin medallón deja su única columna con el ancho reservado para
	   la imagen y el texto se estrangula en 9 rem. Sin medallón, el cuerpo
	   ocupa la fila entera. */
	.sello-detalle:not( :has( .sello-detalle__medallon ) ) {
		grid-template-columns: 1fr;
	}
}

.sello-detalle__medallon {
	width: 9rem;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background-color: var(--color-fondo-alterno);
}

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

.sello-detalle__titulo {
	font-size: var(--fs-500);
	color: var(--color-navy);
	margin-bottom: var(--e-3xs);
}

/* ==========================================================================
   Sección con fotografía lateral
   ========================================================================== */

/* La fotografía que cada página carga en su campo «Fotografía lateral». La
   pintan las plantillas de Documentos, Contacto y Proyecto Educativo, donde el
   diseño la pone junto a una sección que no se edita con bloques. */
.con-lateral {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--e-md);
	align-items: start;
}

.con-lateral > * {
	min-width: 0;
}

@media (min-width: 48em) {
	.con-lateral {
		grid-template-columns: 1.15fr 0.85fr;
		gap: var(--e-lg);
	}

	/* Sin fotografía cargada, el texto ocupa la fila entera en vez de dejar
	   media sección vacía. */
	.con-lateral--sola {
		grid-template-columns: 1fr;
	}
}

.con-lateral__medio {
	margin: 0;
}

.con-lateral__imagen {
	width: 100%;
	height: auto;
	border-radius: var(--radio-sm);
}

/* ==========================================================================
   Texto con fotografía al lado
   ========================================================================== */

/* El patrón de la página Quiénes Somos. La fotografía acompaña al texto en
   altura en vez de quedar suelta arriba, como en la maqueta. */
.texto-con-foto .wp-block-image {
	height: 100%;
	margin: 0;
}

.texto-con-foto .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radio-sm);
}

/* ==========================================================================
   Mensaje de la dirección
   ========================================================================== */

.mensaje-direccion {
	position: relative;
	isolation: isolate;
	background-color: var(--color-fondo-alterno);
}

/* En teléfono el bloque se veía partido en dos cajas, la fotografía sobre el
   texto, y el Servicio Local pidió que se leyera como una sola franja. Se
   resuelve con dos columnas, igual que «Trabaja con nosotros»: la fotografía a
   un lado y el texto al otro. Poner la fotografía de fondo también aquí era la
   otra opción, pero a este ancho el texto cae encima de la figura y queda
   ilegible —medido entre 1,07:1 y 3,73:1 según el encuadre—, así que no se
   sostiene ni siquiera con la salvedad de contraste ya aceptada. */
.mensaje-direccion--con-foto {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	align-items: stretch;
}

.mensaje-direccion--con-foto .mensaje-direccion__interior {
	max-width: none;
	padding-inline: var(--e-sm);
}

.mensaje-direccion__fondo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* En la columna estrecha del teléfono, este encuadre deja a la vista la
	   figura completa; centrado se veía solo el hombro. */
	object-position: 78% 25%;
	display: block;
}

.mensaje-direccion__capa {
	display: none;
}

.mensaje-direccion__interior {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--e-md);
	align-items: center;
	padding-block: var(--seccion-espacio);
}

@media (min-width: 48em) {
	.mensaje-direccion__interior {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--e-xl);
	}

	/* A partir de este ancho sí cabe el texto sobre la fotografía. */
	.mensaje-direccion--con-foto {
		display: block;
	}

	.mensaje-direccion--con-foto .mensaje-direccion__fondo {
		position: absolute;
		inset: 0;
		z-index: -2;
	}

	.mensaje-direccion__fondo img {
		object-position: right 20%;
	}

	.mensaje-direccion--con-foto .mensaje-direccion__interior {
		padding-inline: var(--margen-lateral);
	}

	/* El Servicio Local pidió que la fotografía se vea tal cual, sin ningún
	   velo detrás del texto. Queda solo la sombra clara, que despega las letras
	   pero no produce contraste medible: la legibilidad pasa a depender de qué
	   fotografía suba cada establecimiento. Anotado en docs/DECISIONES.md,
	   punto 30, y como excepción en el informe de accesibilidad. */
	.mensaje-direccion--con-foto .mensaje-direccion__cuerpo {
		text-shadow: var(--sombra-texto-sobre-foto-clara);
	}

	/* El texto arranca más adentro, como en la maqueta: pegado al margen se
	   leía descolgado del resto de la portada. */
	.mensaje-direccion--con-foto .mensaje-direccion__cuerpo {
		max-width: 34rem;
		margin-left: clamp(0rem, 5vw, 6rem);
	}

	/* Texto en blanco sobre la fotografía, a petición del Servicio Local. Solo
	   se aplica donde la fotografía está de fondo: en teléfono el bloque es de
	   dos columnas sobre fondo claro y el blanco desaparecería. Como el fondo
	   lo pone la fotografía de cada establecimiento, la legibilidad depende de
	   ella: sobre una pared clara el texto blanco se pierde. La salvedad está
	   en docs/DECISIONES.md, punto 30. */
	.mensaje-direccion--texto-claro .mensaje-direccion__cuerpo,
	.mensaje-direccion--texto-claro .mensaje-direccion__titulo,
	.mensaje-direccion--texto-claro .mensaje-direccion__texto,
	.mensaje-direccion--texto-claro .mensaje-direccion__firma,
	.mensaje-direccion--texto-claro .mensaje-direccion__cargo {
		color: var(--color-texto-inverso);
	}

	.mensaje-direccion--texto-claro .mensaje-direccion__cuerpo {
		text-shadow: var(--sombra-texto-sobre-foto);
	}

	.mensaje-direccion--con-foto .mensaje-direccion__interior {
		min-height: 26rem;
	}
}

.mensaje-direccion__titulo {
	font-size: var(--fs-600);
	font-family: var(--fuente-institucional);
	margin-bottom: var(--e-2xs);
}

.mensaje-direccion__subrayado {
	display: block;
	width: 4.5rem;
	height: var(--e-3xs);
	background-color: var(--color-acento-secundario);
	margin-bottom: var(--e-sm);
}

.mensaje-direccion__texto {
	max-width: 34rem;
}

.mensaje-direccion__firma {
	display: block;
	margin-top: var(--e-sm);
	font-family: var(--fuente-institucional);
	font-weight: var(--peso-fuerte);
}

.mensaje-direccion__cargo {
	display: block;
	font-weight: var(--peso-normal);
	font-size: var(--fs-200);
	color: var(--color-texto-suave);
}



/* ==========================================================================
   Atributos del establecimiento
   ========================================================================== */

.atributos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--e-md) var(--e-sm);
	padding: 0;
	margin: 0;
	list-style: none;
}

@media (min-width: 40em) {
	.atributos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.atributos {
		grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	}
}

.atributo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--e-2xs);
	text-align: center;
}

.atributo__circulo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(4.5rem, 3.5rem + 8vw, 7rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--color-acento-secundario);
}

.atributo__icono {
	width: 55%;
	height: 55%;
	object-fit: contain;
}

/* El texto va bajo el círculo, en color de texto normal: dentro del círculo
   no alcanzaría el contraste exigido con todos los colores de la paleta. */
.atributo__texto {
	font-size: var(--fs-200);
	font-weight: var(--peso-medio);
	color: var(--color-texto);
	max-width: 10rem;
}

/* ==========================================================================
   Bloque «Trabaja con nosotros»
   ========================================================================== */

/* Dos columnas desde el primer ancho: en teléfono el bloque se veía partido
   en dos cajas, la fotografía sobre el texto, y el Servicio Local pidió que se
   leyera como una sola franja, igual que en pantalla grande. */
.trabajo {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	grid-template-rows: 1fr auto;
}

.trabajo__medio {
	grid-row: 1 / span 2;
}

.trabajo__cuerpo {
	grid-column: 2;
	grid-row: 1;
}

.trabajo__franja {
	grid-column: 2;
	grid-row: 2;
}

@media (min-width: 48em) {
	.trabajo {
		grid-template-columns: 1fr 1.15fr;
	}
}

.trabajo__medio {
	min-height: 12rem;
}

@media (min-width: 48em) {
	/* La franja de la maqueta es apaisada y baja. Sin esta altura, la manda la
	   proporción de la fotografía que suba cada establecimiento y el bloque se
	   come media portada. */
	.trabajo__medio {
		height: clamp(12rem, 22vw, 19rem);
	}
}

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

.trabajo__cuerpo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: var(--e-sm);
	padding: var(--e-xl) var(--margen-lateral);
	background-color: var(--color-acento-secundario);
	color: var(--color-acento-secundario-texto);
}

.trabajo__titulo {
	color: inherit;
	font-family: var(--fuente-institucional);
	font-size: var(--fs-700);
	margin: 0;
}

.trabajo__texto {
	color: inherit;
	max-width: 30rem;
}

/* Franja multicolor del diseño, decorativa. */
.trabajo__franja {
	display: flex;
	height: var(--e-2xs);
}

.trabajo__franja span {
	flex: 1;
}

/* ==========================================================================
   Alianzas y redes
   ========================================================================== */

.alianza {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--e-2xs);
	text-align: center;
	height: 100%;
}

.alianza__logotipo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 7.5rem;
	padding: var(--e-2xs);
}

.alianza__logotipo img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
}

.alianza__titulo {
	font-size: var(--fs-300);
	margin: 0;
}

.alianza__texto {
	font-size: var(--fs-200);
	color: var(--color-texto-suave);
	max-width: 22rem;
}

/* ==========================================================================
   Bloques destacados: misión, visión y afines
   ========================================================================== */

.destacado {
	display: grid;
	grid-template-columns: 1fr;
	margin-block: var(--e-md);
}

@media (min-width: 48em) {
	.destacado {
		grid-template-columns: 18rem 1fr;
	}
}

.destacado__rotulo {
	display: flex;
	align-items: center;
	padding: var(--e-md) var(--e-lg);
	background-color: var(--color-acento);
	color: var(--color-acento-texto);
}

@media (min-width: 48em) {
	.destacado__rotulo {
		clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
		padding-right: var(--e-2xl);
	}
}

.destacado__titulo {
	color: inherit;
	font-size: var(--fs-700);
	font-weight: var(--peso-negro);
	margin: 0;
}

.destacado__cuerpo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--e-md) var(--e-lg);
	background-color: var(--color-fondo-alterno);
}

.destacado__cuerpo p {
	max-width: 40rem;
}

/* ==========================================================================
   Banda de sección a todo el ancho
   ========================================================================== */

/* La franja turquesa con el rótulo centrado, del diseño de Admisión. */
.banda {
	padding: var(--e-md) var(--margen-lateral);
	background-color: var(--color-turquesa);
	color: var(--color-texto-inverso);
	text-align: center;
}

.banda__titulo {
	max-width: var(--ancho-amplio);
	margin-inline: auto;
	color: inherit;
	font-family: var(--fuente-institucional);
	font-size: var(--fs-600);
	font-weight: var(--peso-fuerte);
}

.banda--navy {
	background-color: var(--color-navy);
}

.banda--acento {
	background-color: var(--color-acento);
	color: var(--color-acento-texto);
}

/* ==========================================================================
   Bloque con rótulo en píldora, panel y fotografía
   ========================================================================== */

/* Es el patrón del Programa de Integración Escolar y de Convivencia en la
   página Trayectoria: el rótulo rojo redondeado se monta sobre el panel gris
   que contiene la lista, y la fotografía ocupa la mitad derecha. */
.bloque-lista {
	display: grid;
	grid-template-columns: 1fr;
	margin-block: var(--e-xl);
}

/* El rótulo se monta sobre el panel. Necesita posición además del z-index:
   sobre un elemento de rejilla sin posicionar, el panel que viene después en
   el marcado termina pintándose encima y recorta el texto. */
.bloque-lista__rotulo {
	position: relative;
	z-index: var(--capa-contenido);
	margin: 0;
	padding: var(--e-md) var(--e-lg);
	background-color: var(--color-acento);
	color: var(--color-acento-texto);
	font-size: var(--fs-500);
	font-weight: var(--peso-fuerte);
	text-align: center;
	border-radius: var(--radio-pildora);
}

.bloque-lista__panel {
	padding: var(--e-lg) var(--e-md) var(--e-md);
	margin-top: calc(var(--e-sm) * -1);
	background-color: var(--color-fondo-alterno);
}

.bloque-lista__panel ul,
.bloque-lista__panel ol {
	max-width: none;
	padding-left: var(--e-md);
	list-style-type: disc;
}

.bloque-lista__panel li::marker {
	color: var(--color-acento);
}

.bloque-lista__panel li + li {
	margin-top: var(--e-2xs);
}

.bloque-lista__medio {
	margin: 0;
}

.bloque-lista__medio img {
	width: 100%;
	height: 100%;
	max-height: 26rem;
	object-fit: cover;
}

@media (min-width: 48em) {
	/* Con fotografía, el bloque se reparte en dos columnas como la maqueta.
	   Sin fotografía ocupa el ancho completo, en vez de dejar media página
	   vacía a la derecha. */
	.bloque-lista:has( .bloque-lista__medio ) {
		grid-template-columns: 1.05fr 0.95fr;
		grid-template-rows: auto 1fr;
		align-items: start;
	}

	.bloque-lista__rotulo {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		min-width: min(70%, 34rem);
		text-align: left;
	}

	.bloque-lista__panel {
		grid-column: 1;
		grid-row: 2;
		margin-top: calc(var(--e-md) * -1);
		padding: var(--e-xl) var(--e-lg) var(--e-lg);
		align-self: stretch;
	}

	/* La fotografía arranca por debajo del borde superior del rótulo, como en
	   la maqueta, y llega hasta el fondo del panel. */
	.bloque-lista__medio {
		grid-column: 2;
		grid-row: 1 / -1;
		align-self: stretch;
		margin-top: var(--e-xl);
	}

	.bloque-lista__medio img {
		max-height: none;
	}
}

/* ==========================================================================
   Llamada a la acción sobre fondo oscuro
   ========================================================================== */

.llamada {
	display: grid;
	grid-template-columns: 1fr;
	margin-block: var(--e-xl);
	background-color: var(--color-navy);
	color: var(--color-texto-inverso);
	border-radius: var(--radio-sm);
	overflow: hidden;
}

@media (min-width: 40em) {
	.llamada--con-imagen {
		grid-template-columns: 1fr auto;
		align-items: stretch;
	}
}

/* Fondo fotográfico opcional del bloque de vacantes. La capa se mantiene
   opaca en toda la superficie y no en degradado: sobre una fotografía blanca
   el texto queda en 5,10:1, mientras que una capa que empiece más clara lo
   deja por debajo del mínimo. Es el mismo criterio del hero. */
.llamada--fondo {
	position: relative;
	isolation: isolate;
}

.llamada__fondo {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
}

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

.llamada__capa {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--capa-interior);
}

.llamada__cuerpo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--e-sm);
	padding: var(--e-lg) var(--e-md);
	text-align: center;
}

.llamada__titulo {
	color: inherit;
	font-family: var(--fuente-institucional);
	font-size: var(--fs-500);
	font-weight: var(--peso-fuerte);
	margin: 0;
	max-width: 28rem;
}

.llamada__texto {
	color: inherit;
	max-width: 34rem;
	margin: 0;
}

.llamada__medio {
	margin: 0;
}

.llamada__medio img {
	width: 100%;
	height: 100%;
	max-height: 12rem;
	object-fit: cover;
}

@media (min-width: 40em) {
	.llamada__medio img {
		width: 12rem;
		max-height: none;
	}
}

/* ==========================================================================
   Equipo directivo
   ========================================================================== */

.equipo {
	display: flex;
	flex-direction: column;
	gap: var(--e-md);
	padding: 0;
	margin: 0;
	list-style: none;
}

.ficha-directivo {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--e-sm);
	align-items: stretch;
}

@media (min-width: 48em) {
	.ficha-directivo {
		grid-template-columns: 20rem 1fr;
		gap: var(--e-md);
	}

	/* Alternancia del diseño: la fotografía cambia de lado en cada ficha. */
	.ficha-directivo:nth-child(even) {
		grid-template-columns: 1fr 20rem;
	}

	.ficha-directivo:nth-child(even) .ficha-directivo__retrato {
		order: 2;
	}
}

.ficha-directivo__retrato {
	padding: var(--e-2xs);
	background-color: var(--color-fondo-alterno);
	border-radius: var(--radio-lg);
}

.ficha-directivo__retrato img {
	width: 100%;
	height: 100%;
	max-height: 26rem;
	object-fit: cover;
	border-radius: var(--radio-md);
}

.ficha-directivo__cuerpo {
	padding: var(--e-md);
	background-color: var(--color-fondo-alterno);
	border-radius: var(--radio-lg);
}

.ficha-directivo__nombre {
	font-size: var(--fs-500);
	font-weight: var(--peso-normal);
	color: var(--color-texto-suave);
	margin: 0;
}

.ficha-directivo__cargo {
	font-size: var(--fs-600);
	font-weight: var(--peso-negro);
	margin: 0 0 var(--e-2xs);
}

/* ==========================================================================
   Unidades y asignaturas
   ========================================================================== */

.nivel + .nivel {
	margin-top: var(--e-xl);
}

.nivel__titulo {
	font-size: var(--fs-600);
	margin-bottom: var(--e-sm);
}

.asignaturas {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--e-2xs);
	padding: 0;
	margin: 0;
	list-style: none;
}

@media (min-width: 40em) {
	.asignaturas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.asignaturas--compacta {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.asignatura {
	display: flex;
	align-items: center;
	min-height: 3.5rem;
	padding: var(--e-2xs) var(--e-md);
	background-color: var(--color-rosado-fuerte);
	color: var(--color-navy);
	font-weight: var(--peso-fuerte);
}

.asignatura--suave {
	background-color: var(--color-rosado-suave);
}

/* ==========================================================================
   Modalidades: tipo de educación
   ========================================================================== */

.modalidades {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-md);
	padding: 0;
	margin: 0;
	list-style: none;
}

.modalidad {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--e-2xs);
	text-align: center;
}

.modalidad__circulo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 9rem;
	aspect-ratio: 1;
	background-color: var(--color-fondo-alterno);
	border-radius: 50%;
}

.modalidad__circulo img {
	width: 55%;
	height: 55%;
	object-fit: contain;
}

.modalidad__titulo {
	font-size: var(--fs-500);
	font-weight: var(--peso-normal);
	margin: 0;
}

/* ==========================================================================
   Documentos
   ========================================================================== */

/* Con el nombre de la categoría oculto, la separación amplia entre grupos
   dejaba huecos sin explicación: la lista se lee como una sola. */
.grupo-documentos {
	margin-top: var(--e-sm);
}

.grupo-documentos + .grupo-documentos {
	margin-top: var(--e-2xs);
}

.grupo-documentos__titulo {
	font-size: var(--fs-500);
	margin-bottom: var(--e-sm);
}

.documentos {
	display: flex;
	flex-direction: column;
	gap: var(--e-2xs);
	padding: 0;
	margin: 0;
	list-style: none;
}

.documento {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-sm);
	min-height: var(--objetivo-minimo);
	padding: var(--e-2xs) var(--e-md);
	background-color: var(--color-fondo-alterno);
	color: var(--color-texto);
	border-radius: var(--radio-pildora);
	font-weight: var(--peso-fuerte);
	text-decoration: none;
}

.documento:hover,
.documento:focus-visible {
	background-color: var(--color-celeste);
	color: var(--color-texto);
}

.documento__meta {
	flex: 0 0 auto;
	font-size: var(--fs-100);
	font-weight: var(--peso-normal);
	color: var(--color-texto-suave);
}

.documento svg {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	fill: currentColor;
}

.buscador-documentos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2xs);
	margin-bottom: var(--e-lg);
}

.buscador-documentos .campo__control {
	flex: 1 1 14rem;
	width: auto;
}

/* ==========================================================================
   Noticias
   ========================================================================== */

.entrada__meta {
	font-size: var(--fs-200);
	color: var(--color-texto-suave);
	margin-bottom: var(--e-2xs);
}

.entrada__titulo {
	color: var(--color-acento-secundario);
	text-align: center;
	font-size: var(--fs-700);
}

.entrada__destacada {
	margin-block: var(--e-md);
	border-radius: var(--radio-sm);
	overflow: hidden;
}

.entrada__navegacion {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--e-sm);
	margin-top: var(--e-xl);
	padding-top: var(--e-md);
	border-top: var(--borde-fino) solid var(--color-borde);
}

/* ==========================================================================
   Calendario de admisión
   ========================================================================== */

.calendario {
	display: flex;
	flex-direction: column;
	gap: var(--e-md);
	padding: 0;
	margin: 0;
	list-style: none;
}

.calendario {
	gap: var(--e-lg);
}

.hito {
	display: grid;
	grid-template-columns: 5rem 1fr;
	gap: var(--e-sm) var(--e-md);
	align-items: center;
}

@media (min-width: 40em) {
	.hito {
		grid-template-columns: 9rem 1fr;
		gap: var(--e-md) var(--e-lg);
	}
}

.hito__icono {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
}

/* Círculo numerado del calendario, para el hito que no trae ícono propio.
   El número es parte de la maqueta aprobada, así que se dibuja aquí en vez de
   depender de una imagen: borrar el adjunto dejaba el hueco vacío y la fecha
   perdía su número. Los cuatro fondos alternan como en el diseño y todos
   están medidos sobre texto blanco por encima de 5:1. */
.hito__numero {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--color-navy);
	color: var(--color-texto-inverso);
	font-family: var(--fuente-institucional);
	font-size: var(--fs-700);
	font-weight: var(--peso-negro);
	line-height: 1;
}

.hito:nth-child(4n+2) .hito__numero {
	background-color: var(--color-turquesa);
}

.hito:nth-child(4n+3) .hito__numero {
	background-color: var(--color-acento-secundario);
}

.hito:nth-child(4n+4) .hito__numero {
	background-color: var(--color-acento);
}

.hito__titulo {
	font-size: var(--fs-600);
	font-family: var(--fuente-institucional);
	margin: 0 0 var(--e-3xs);
}

.hito__fechas {
	color: var(--color-acento);
	font-size: var(--fs-500);
	font-weight: var(--peso-fuerte);
	margin: 0;
	max-width: none;
}

.hito__accion {
	grid-column: 1 / -1;
	justify-self: center;
}

@media (min-width: 40em) {
	.hito__accion {
		grid-column: 2;
		justify-self: start;
	}
}

/* ==========================================================================
   Calendario institucional
   ========================================================================== */

.calendario-anual {
	display: flex;
	flex-direction: column;
	gap: var(--e-sm);
	padding: 0;
	margin: 0;
	list-style: none;
}

.evento {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--e-3xs);
	padding: var(--e-sm) var(--e-md);
	background-color: var(--color-fondo);
	border-left: var(--e-3xs) solid var(--color-acento);
	border-radius: var(--radio-sm);
}

@media (min-width: 40em) {
	.evento {
		grid-template-columns: 12rem 1fr;
		gap: var(--e-md);
		align-items: baseline;
	}
}

.evento__fecha {
	margin: 0;
	max-width: none;
	font-family: var(--fuente-institucional);
	font-weight: var(--peso-fuerte);
	color: var(--color-acento);
}

.evento__titulo {
	font-size: var(--fs-400);
	margin: 0;
}

.evento__detalle {
	margin: var(--e-3xs) 0 0;
	max-width: none;
	font-size: var(--fs-200);
	color: var(--color-texto-suave);
}

/* ==========================================================================
   Galería
   ========================================================================== */

.album__fotos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
	gap: var(--e-2xs);
	padding: 0;
	margin: 0;
	list-style: none;
}

.album__foto img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radio-sm);
}

.album__videos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
	gap: var(--e-md);
	padding: 0;
	margin: var(--e-lg) 0 0;
	list-style: none;
}

/* ==========================================================================
   Contacto
   ========================================================================== */

.contacto {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--e-xl);
}

@media (min-width: 64em) {
	.contacto {
		grid-template-columns: 1fr 1fr;
	}

	/* Sin formulario queda una sola columna: repartirla en dos dejaría la
	   mitad vacía y el mapa estrujado contra el borde. */
	.contacto--simple {
		grid-template-columns: 1fr;
	}
}

.contacto__datos {
	display: flex;
	flex-direction: column;
	gap: var(--e-md);
	padding: 0;
	margin: 0;
	list-style: none;
}

.contacto__dato {
	display: flex;
	align-items: center;
	gap: var(--e-md);
}

.contacto__marca {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 3.5rem;
	height: 3.5rem;
	background-color: var(--color-acento);
	color: var(--color-acento-texto);
	border-radius: 50%;
}

.contacto__marca svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: currentColor;
}

.contacto__texto {
	margin: 0;
	max-width: 22rem;
}

/* ==========================================================================
   Resultados de búsqueda
   ========================================================================== */

.resultados {
	display: flex;
	flex-direction: column;
	gap: var(--e-lg);
	padding: 0;
	margin: 0;
	list-style: none;
}

.resultado__tipo {
	display: inline-block;
	margin-bottom: var(--e-3xs);
	font-size: var(--fs-100);
	text-transform: uppercase;
	letter-spacing: var(--espaciado-letras-rotulo);
	color: var(--color-texto-suave);
}

.resultado__titulo {
	font-size: var(--fs-500);
	margin: 0 0 var(--e-3xs);
}

.resultado mark {
	background-color: var(--color-celeste);
	color: var(--color-texto);
	padding-inline: 0.15em;
	border-radius: var(--radio-xs);
}

/* ==========================================================================
   Mapa del sitio de la página 404
   ========================================================================== */

.mapa-sitio__lista,
.mapa-sitio__lista ul {
	padding-left: var(--e-md);
	margin: 0;
}

.mapa-sitio__lista a {
	display: inline-flex;
	align-items: center;
	min-height: var(--objetivo-minimo);
}

/* ==========================================================================
   Sección sin contenido, visible solo en el administrador
   ========================================================================== */

.aviso-editor {
	margin-block: var(--e-md);
	padding: var(--e-sm) var(--e-md);
	background-color: var(--color-aviso-fondo);
	border-left: var(--e-3xs) solid var(--color-acento);
	border-radius: var(--radio-sm);
	font-size: var(--fs-200);
}