/*
 * Hermandad — Cuaresma y Madrugada
 * Maquetación calcada de «Especificación visual Cuaresma»: marfil de
 * base, una banda verde a mitad de recorrido (cultos) y el verde más
 * oscuro reservado al hero, a la Estación de Penitencia y al visor de
 * galería. Cero radio de esquina y cero sombra en todo el archivo: la
 * estructura la llevan los filetes, no las cajas. Cormorant Garamond
 * para titulares (400, nunca negrita), Instrument Sans para texto e
 * interfaz. Cifras (años, fechas, horas, recuentos) siempre con
 * tabular-nums.
 *
 * Dos clases de errores conocidos de proyectos anteriores se evitan a
 * propósito en todo este archivo:
 *   1) [hidden] es un atributo HTML, no una propiedad CSS: si algún
 *      estilo de tema define `display` sobre el mismo selector con más
 *      especificidad, [hidden] no basta por sí solo. Por eso cada
 *      elemento que el JS oculta/muestra tiene aquí su propia regla
 *      `[hidden] { display: none; }`.
 *   2) el color de texto se declara con !important en cada elemento
 *      propio, en vez de confiar en que herede del contenedor: los temas
 *      de Divi suelen fijar el color en el propio párrafo/enlace con más
 *      especificidad que una regla heredada, y ese color "propio" ganaría.
 */

.hc-scope {
	--hc-verde-profundo: #081913;
	--hc-verde: #0e2a20;
	--hc-marfil: #f4f0e7;
	--hc-marfil-texto: rgba(244, 240, 231, .84);
	--hc-marfil-texto-suave: rgba(244, 240, 231, .62);
	--hc-marfil-filete: rgba(244, 240, 231, .2);
	--hc-tinta: #1b1a17;
	--hc-tinta-suave: rgba(27, 26, 23, .7);
	--hc-tinta-filete: rgba(27, 26, 23, .14);
	--hc-dorado: #d8b26a;
	--hc-dorado-oscuro: #b68235;
	--hc-dorado-texto: #7d5411;
	--hc-cartel-fondo: #e8e2d4;
	--hc-fuente-titular: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--hc-fuente-texto: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--hc-margen: clamp(20px, 5vw, 80px);
	--hc-relleno-seccion: clamp(44px, 7vw, 110px);
	/* Altura del menú fijo del tema (si lo hay): un solo valor que mueve a
	   la vez la barra de índice sticky y el desfase de los anclajes. Si el
	   tema del sitio tiene una cabecera fija de otra altura, sobrescribe
	   esta variable en el CSS del propio tema. */
	--hc-alto-cabecera: 61px;
	--hc-alto-barra-indice: 65px;

	font-family: var(--hc-fuente-texto);
	color: var(--hc-tinta) !important;
	background: var(--hc-marfil);
	box-sizing: border-box;
	font-variant-numeric: normal;
}

.hc-scope *,
.hc-scope *::before,
.hc-scope *::after {
	box-sizing: inherit;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.hc-scope img {
	max-width: 100%;
	display: block;
}

.hc-scope a {
	color: inherit;
	text-decoration: none;
}

/* Reseteo de listas: los temas (sobre todo constructores como Divi) suelen
   fijar list-style/margin/padding en `.entry-content ul` con una
   especificidad mayor que una clase simple nuestra, así que sin !important
   esas reglas del tema ganan y las listas del plugin heredan viñetas y
   sangrías que no pintamos aquí. */
.hc-scope ul,
.hc-scope ol {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.hc-scope :focus-visible {
	outline: 2px solid var(--hc-dorado-oscuro);
	outline-offset: 2px;
}

.hc-scope button {
	font-family: inherit;
	cursor: pointer;
	background: none;
	border: 0;
	color: inherit;
	text-align: left;
	padding: 0;
}

.hc-icono {
	width: 15px;
	height: 15px;
	flex: none;
}

/* Cifras siempre alineadas: años, fechas, horas, recuentos. */
.hc-anio,
.hc-cuenta__unidad span,
.hc-fila-concierto__fecha,
.hc-fila-ensayo__fecha,
.hc-fila-ensayo__hora,
.hc-fila-itinerario__hora,
.hc-cifra__numero,
.hc-tarjeta-anio__anio,
.hc-portada__indice-cuenta,
.hc-seccion__numero,
.hc-indice-fija__numero,
.hc-galeria-estacion__numero {
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ *
 * Epígrafes, botones y elementos de texto compartidos.
 * ------------------------------------------------------------------ */

.hc-epigrafe,
.hc-eyebrow {
	font-family: var(--hc-fuente-texto);
	font-size: 10px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--hc-dorado);
	margin: 0 0 14px;
}
.hc-seccion--marfil .hc-eyebrow,
.hc-seccion--marfil .hc-epigrafe {
	color: var(--hc-dorado-texto) !important;
}

.hc-boton-dorado {
	display: inline-block;
	margin-top: 22px;
	padding: 15px 30px;
	background: var(--hc-dorado) !important;
	color: var(--hc-verde-profundo) !important;
	font-family: var(--hc-fuente-texto);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	min-height: 44px;
}
.hc-boton-dorado:hover {
	background: var(--hc-marfil) !important;
}

.hc-boton-perfilado {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	padding: 12px 20px;
	border: 1px solid var(--hc-dorado-oscuro);
	color: var(--hc-dorado-texto) !important;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	min-height: 44px;
}
.hc-seccion--verde-profundo .hc-boton-perfilado,
.hc-seccion--verde .hc-boton-perfilado {
	color: var(--hc-dorado) !important;
	border-color: rgba(216, 178, 106, .5);
}
.hc-boton-perfilado:hover {
	background: rgba(182, 130, 53, .1);
}

.hc-boton-galeria {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hc-dorado-texto) !important;
	min-height: 44px;
}
.hc-seccion--verde .hc-boton-galeria {
	color: var(--hc-dorado) !important;
}

.hc-enlace-subrayado {
	display: inline-block;
	margin-top: 10px;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hc-tinta) !important;
	border-bottom: 1px solid var(--hc-tinta);
	padding-bottom: 2px;
}

/* Ficha de datos clave/valor, reutilizada en carteles, cultos y pregones. */
.hc-ficha-datos {
	margin: 14px 0 0;
	display: grid;
	grid-template-columns: 120px 1fr;
}
.hc-ficha-datos--ancha {
	grid-template-columns: 150px 1fr;
}
.hc-ficha-datos > div {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: subgrid;
	border-top: 1px solid var(--hc-tinta-filete);
	padding: 9px 0;
}
.hc-seccion--verde .hc-ficha-datos > div,
.hc-seccion--verde-profundo .hc-ficha-datos > div {
	border-top-color: var(--hc-marfil-filete);
}
.hc-ficha-datos dt {
	font-size: 9.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hc-dorado-texto) !important;
	font-weight: 500;
}
.hc-seccion--verde .hc-ficha-datos dt,
.hc-seccion--verde-profundo .hc-ficha-datos dt {
	color: var(--hc-dorado) !important;
}
.hc-ficha-datos dd {
	margin: 0;
	font-size: 13.5px;
	color: var(--hc-tinta) !important;
}
.hc-seccion--verde .hc-ficha-datos dd,
.hc-seccion--verde-profundo .hc-ficha-datos dd {
	color: var(--hc-marfil-texto) !important;
}

/* ------------------------------------------------------------------ *
 * Estructura de sección: a sangre, con relleno lateral uniforme.
 * ------------------------------------------------------------------ */

.hc-seccion {
	padding: var(--hc-relleno-seccion) var(--hc-margen);
	scroll-margin-top: calc(var(--hc-alto-cabecera) + var(--hc-alto-barra-indice) + 16px);
}
.hc-seccion--marfil {
	background: var(--hc-marfil);
	color: var(--hc-tinta) !important;
}
.hc-seccion--verde {
	background: var(--hc-verde);
	color: var(--hc-marfil-texto) !important;
}
.hc-seccion--verde-profundo {
	background: var(--hc-verde-profundo);
	color: var(--hc-marfil-texto) !important;
	padding-top: clamp(48px, 8vw, 130px);
	padding-bottom: clamp(48px, 8vw, 130px);
}

.hc-seccion__cabecera {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: clamp(26px, 3.4vw, 44px);
}
.hc-seccion__cabecera--con-categoria {
	flex-wrap: wrap;
	justify-content: space-between;
}
.hc-seccion__numero {
	font-family: var(--hc-fuente-texto);
	font-size: 12px;
	color: var(--hc-dorado-oscuro) !important;
	margin: 0;
}
.hc-seccion--verde .hc-seccion__numero,
.hc-seccion--verde-profundo .hc-seccion__numero {
	color: var(--hc-dorado) !important;
}
.hc-seccion__titulo {
	font-family: var(--hc-fuente-titular);
	font-weight: 400;
	font-size: clamp(28px, 3.6vw, 42px);
	margin: 0;
	color: inherit !important;
}
.hc-seccion__titulo--pagina {
	font-size: clamp(34px, 4.6vw, 54px);
}
.hc-noticias__categoria {
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hc-tinta-suave) !important;
	margin: 0 0 0 auto;
}

/* ------------------------------------------------------------------ *
 * Portada
 * ------------------------------------------------------------------ */

.hc-portada {
	background: var(--hc-verde-profundo);
	color: var(--hc-marfil-texto) !important;
	padding: clamp(48px, 8vw, 120px) var(--hc-margen);
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(40px, 6vw, 90px);
	min-height: 84vh;
	align-items: center;
}
.hc-portada__titulo {
	font-family: var(--hc-fuente-titular);
	font-weight: 400;
	font-size: clamp(40px, 7vw, 104px);
	line-height: .9;
	letter-spacing: -.02em;
	margin: 0 0 22px;
	color: var(--hc-marfil) !important;
}
.hc-portada__texto {
	max-width: 46ch;
	font-size: 15px;
	line-height: 1.6;
	color: var(--hc-marfil-texto) !important;
	margin: 0;
}
.hc-anio--portada {
	font-family: var(--hc-fuente-titular);
	font-weight: 400;
	font-size: clamp(56px, 9vw, 132px);
	line-height: 1;
	color: var(--hc-dorado) !important;
	margin: 0 0 6px;
}
.hc-portada__indice {
	margin: 26px 0 0 !important;
	border-top: 1px solid var(--hc-marfil-filete);
}
.hc-portada__indice li {
	border-bottom: 1px solid var(--hc-marfil-filete);
}
.hc-portada__indice a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 14px 0;
	min-height: 44px;
	font-size: 14px;
	color: var(--hc-marfil-texto) !important;
	transition: transform .15s ease;
}
.hc-portada__indice a:hover,
.hc-portada__indice a:focus-visible {
	transform: translateX(8px);
	color: var(--hc-marfil) !important;
}
.hc-portada__indice-cuenta {
	color: var(--hc-dorado) !important;
	font-family: var(--hc-fuente-titular);
	font-size: 17px;
}

/* ------------------------------------------------------------------ *
 * Cuenta atrás (portada, hero, Estación: siempre sobre verde profundo).
 * ------------------------------------------------------------------ */

.hc-cuenta__texto-alt {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.hc-cuenta__reloj {
	display: flex;
	gap: clamp(14px, 2vw, 28px);
	margin: 18px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--hc-marfil-filete);
}
.hc-cuenta__reloj[hidden] {
	display: none;
}
.hc-cuenta__unidad {
	text-align: left;
}
.hc-cuenta__unidad span {
	display: block;
	font-family: var(--hc-fuente-titular);
	font-weight: 400;
	font-size: clamp(28px, 3.4vw, 46px);
	line-height: 1;
	color: var(--hc-marfil) !important;
}
.hc-cuenta__unidad small {
	display: block;
	font-size: 9px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--hc-marfil-texto-suave) !important;
	margin-top: 6px;
}
.hc-cuenta__celebrada {
	margin: 18px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--hc-marfil-filete);
}
.hc-cuenta__celebrada[hidden] {
	display: none;
}
.hc-cuenta__celebrada p {
	max-width: 46ch;
	font-size: 14px;
	line-height: 1.6;
	color: var(--hc-marfil-texto) !important;
	margin: 0 0 10px;
}
.hc-cuenta__celebrada a {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hc-dorado) !important;
	border-bottom: 1px solid var(--hc-dorado);
	padding-bottom: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.hc-cuenta__unidad--segundos {
		display: none;
	}
}

.hc-cuenta-suelta {
	display: inline-block;
	background: var(--hc-verde-profundo);
	padding: 20px 26px;
}

/* ------------------------------------------------------------------ *
 * Hero de la edición
 * ------------------------------------------------------------------ */

/* Dos columnas, igual que la portada: texto en verde profundo a la
   izquierda, imagen a la derecha. Con la imagen de fondo y el texto
   superpuesto no se leía bien, así que aquí ya no se solapan nunca. */
/* Altura fija de 50vh: la imagen ocupa toda la columna derecha de borde a
   borde (arriba, abajo y a la derecha), sin ningún margen verde alrededor;
   el texto lleva su propio relleno a la izquierda para no tocar el borde. */
.hc-hero {
	background: var(--hc-verde-profundo);
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(30px, 5vw, 70px);
	align-items: stretch;
	/* min-height, no height: la caja mide 50vh como mínimo, pero crece si
	   el texto de la izquierda necesita más sitio (pantallas muy anchas,
	   lemas largos), para no desbordar. */
	min-height: 50vh;
}
.hc-hero__contenido {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: clamp(36px, 5vw, 64px) 0 clamp(36px, 5vw, 64px) var(--hc-margen);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.hc-hero--sin-imagen {
	grid-template-columns: 1fr;
}
.hc-hero--sin-imagen .hc-hero__contenido {
	padding-right: var(--hc-margen);
}
.hc-hero__imagen-columna {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 0;
	overflow: hidden;
	background: var(--hc-cartel-fondo);
}
/* La foto va en posición absoluta a propósito: overflow:hidden por sí solo
   no basta, porque al calcular el alto de la fila el grid puede seguir
   teniendo en cuenta la proporción intrínseca de la imagen (una foto muy
   vertical podría "pedir" ella sola una fila enorme). Sacándola del flujo
   con position:absolute queda completamente fuera de ese cálculo: la
   altura de la cabecera la marca solo el texto de la izquierda (mínimo
   50vh), y la foto simplemente rellena, recortada y centrada, el hueco
   que quede a la derecha. */
.hc-hero__imagen {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.hc-hero__linea {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: clamp(16px, 3vw, 40px);
}
.hc-anio--hero {
	font-family: var(--hc-fuente-titular);
	font-weight: 400;
	font-size: clamp(64px, 16vw, 240px);
	line-height: .82;
	letter-spacing: -.03em;
	color: var(--hc-marfil) !important;
	margin: 0;
}
.hc-hero__lema-bloque {
	padding-bottom: .3em;
}
.hc-hero__lema {
	font-family: var(--hc-fuente-titular);
	font-weight: 400;
	font-size: clamp(22px, 2.6vw, 36px);
	max-width: 24ch;
	line-height: 1.15;
	color: var(--hc-marfil) !important;
	margin: 0 0 10px;
}
.hc-hero__periodo {
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--hc-marfil-texto-suave) !important;
	margin: 0;
}

.hc-banda-archivada {
	background: #efe8d8;
	color: var(--hc-tinta) !important;
	padding: 18px var(--hc-margen);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}
.hc-banda-archivada p {
	margin: 0;
	font-size: 13.5px;
	color: var(--hc-tinta) !important;
	max-width: 62ch;
}
.hc-banda-archivada .hc-eyebrow {
	display: inline;
	margin: 0 8px 0 0;
	color: var(--hc-dorado-texto) !important;
}
.hc-banda-archivada a {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hc-tinta) !important;
	border-bottom: 1px solid var(--hc-tinta);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Barra de índice fija
 * ------------------------------------------------------------------ */

.hc-indice-fija {
	position: sticky;
	top: var(--hc-alto-cabecera);
	z-index: 20;
	background: rgba(244, 240, 231, .95);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--hc-tinta-filete);
	overflow-x: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.hc-indice-fija::-webkit-scrollbar {
	display: none;
}
.hc-indice-fija ul {
	display: flex;
	/* !important: gana al reseteo `.hc-scope ul` (mismo peso, pero ese es
	   !important) para que este margen lateral sí se aplique.
	   El propio enlace ya lleva 18px de relleno horizontal (para ampliar
	   su zona táctil): se resta aquí para que el texto del primer y el
	   último enlace quede a la misma distancia del borde que el resto
	   del contenido de la página, en vez de acumular ambos rellenos. */
	padding: 0 calc(var(--hc-margen) - 18px) !important;
	min-width: max-content;
}
.hc-indice-fija a {
	display: flex;
	align-items: baseline;
	gap: 7px;
	padding: 20px 18px;
	min-height: 44px;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	color: var(--hc-tinta) !important;
}
.hc-indice-fija a:hover,
.hc-indice-fija a:focus-visible {
	border-bottom-color: var(--hc-dorado-oscuro);
}
.hc-indice-fija__numero {
	font-size: 12px;
	color: var(--hc-dorado-texto) !important;
}
.hc-indice-fija__etiqueta {
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hc-tinta) !important;
}

/* ------------------------------------------------------------------ *
 * 01 · Carteles
 * ------------------------------------------------------------------ */

.hc-carteles__lista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(26px, 4vw, 72px);
}
.hc-cartel__imagen-boton {
	display: block;
	width: 100%;
	/* Más pequeño que el ancho de la columna a propósito: como cartel,
	   se lee mejor en un tamaño moderado que a toda anchura. */
	max-width: 280px;
	aspect-ratio: 3 / 4;
	/* !important: la regla de reseteo `.hc-scope button` (más específica
	   por llevar el selector de tipo `button`) pondría `background: none`
	   por encima de esta si no se fuerza aquí. */
	background: var(--hc-cartel-fondo) !important;
}
.hc-cartel__imagen {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.hc-cartel__etiqueta {
	margin: 20px 0 6px;
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--hc-dorado-texto) !important;
}
.hc-cartel__titulo {
	font-family: var(--hc-fuente-titular);
	font-weight: 400;
	font-size: clamp(21px, 2.4vw, 31px);
	margin: 0;
	color: var(--hc-tinta) !important;
}

/* ------------------------------------------------------------------ *
 * 02 · Cultos
 * ------------------------------------------------------------------ */

.hc-cultos__cabecera {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin-bottom: clamp(20px, 2.6vw, 32px);
}
.hc-cultos__cabecera .hc-seccion__cabecera {
	margin-bottom: 0;
}
.hc-conmutador {
	display: flex;
	gap: 10px;
}
.hc-conmutador__boton {
	/* !important: ver la nota sobre `.hc-scope button` en la cabecera del
	   archivo — su `padding: 0` (más específico, por el selector de tipo
	   `button`) gana si no se fuerza aquí. */
	padding: 11px 18px !important;
	min-height: 44px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	/* !important: idem el padding de arriba — `.hc-scope button` también
	   fija `border: 0`. */
	border: 1px solid var(--hc-marfil-filete) !important;
	color: var(--hc-marfil-texto) !important;
}
.hc-conmutador__boton--activo {
	background: var(--hc-dorado) !important;
	color: var(--hc-verde-profundo) !important;
	border-color: var(--hc-dorado) !important;
}
.hc-cultos__nota {
	max-width: 60ch;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--hc-marfil-texto-suave) !important;
	margin: 0 0 30px;
}
.hc-cultos__panel[hidden] {
	display: none;
}
.hc-fila-culto {
	display: grid;
	grid-template-columns: minmax(220px, .8fr) minmax(0, 1.8fr);
	gap: clamp(20px, 3vw, 48px);
	padding: clamp(26px, 3vw, 38px) 0;
	border-top: 1px solid var(--hc-marfil-filete);
}
.hc-fila-culto__tipo {
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--hc-dorado) !important;
	margin: 0 0 8px;
}
.hc-fila-culto__titulo {
	font-family: var(--hc-fuente-titular);
	font-weight: 400;
	font-size: clamp(22px, 2.4vw, 30px);
	margin: 0 0 10px;
	color: var(--hc-marfil) !important;
}
.hc-fila-culto__fecha {
	font-family: var(--hc-fuente-titular);
	font-size: 18px;
	color: var(--hc-dorado) !important;
	margin: 0;
}
.hc-fila-culto__hora {
	font-size: 13px;
	color: var(--hc-marfil-texto-suave) !important;
	margin: 4px 0 0;
}

.hc-galeria-bloque {
	margin-top: 18px;
}
.hc-galeria-mini {
	display: flex;
	gap: 8px;
}
.hc-galeria-mini__item {
	/* Las tres miniaturas se repartan siempre el ancho entero de la fila
	   (antes se reservaba un 25% por si hubiera una cuarta, y sobraba un
	   hueco vacío). Proporción 4:5, más vertical que el 4:3 anterior, para
	   no recortar tanto las fotos de la Estación, casi siempre en vertical. */
	flex: 1 1 0;
	min-width: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}
.hc-galeria-mini--1-1 .hc-galeria-mini__item {
	aspect-ratio: 1 / 1;
}
.hc-galeria-mini__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ------------------------------------------------------------------ *
 * 03 · Pregones
 * ------------------------------------------------------------------ */

.hc-pregones__lista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(26px, 4vw, 72px);
}
.hc-pregon {
	border-top: 2px solid var(--hc-dorado-oscuro);
	padding-top: clamp(18px, 2.4vw, 28px);
}
.hc-pregon__etiqueta {
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--hc-dorado-texto) !important;
	margin: 0 0 8px;
}
.hc-pregon__titulo {
	font-family: var(--hc-fuente-titular);
	font-weight: 400;
	font-size: clamp(22px, 2.6vw, 34px);
	margin: 0;
	color: var(--hc-tinta) !important;
}

/* ------------------------------------------------------------------ *
 * 04 · Conciertos
 * ------------------------------------------------------------------ */

.hc-filas-concierto {
	display: flex;
	flex-direction: column;
}
.hc-fila-concierto {
	display: grid;
	/* Dos columnas: galería (izquierda) · texto (derecha). La galería es la
	   columna más ancha de las dos a propósito, para que las fotos tengan
	   presencia real y no queden como un adorno pequeño al margen. */
	grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 40px);
	align-items: start;
	padding: clamp(24px, 3vw, 34px) 0;
	border-top: 1px solid var(--hc-tinta-filete);
}
.hc-fila-concierto--sin-galeria {
	grid-template-columns: minmax(0, 1fr);
}
.hc-fila-concierto__cabecera {
	/* Fecha y título a la misma altura, alineados por la línea base — igual
	   que el resto de cabeceras con numeral/fecha + título de este plugin. */
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: clamp(10px, 1.6vw, 18px);
}
.hc-fila-concierto__fecha {
	font-family: var(--hc-fuente-titular);
	font-size: clamp(19px, 2vw, 26px);
	color: var(--hc-dorado-oscuro) !important;
	margin: 0;
	flex: none;
}
.hc-fila-concierto__banda {
	font-family: var(--hc-fuente-titular);
	font-weight: 400;
	font-size: clamp(26px, 3.2vw, 38px);
	margin: 0;
	color: var(--hc-tinta) !important;
}
.hc-fila-concierto__detalle {
	font-size: 13px;
	color: var(--hc-tinta-suave) !important;
	margin: 10px 0 0;
}
.hc-fila-concierto__galeria .hc-galeria-mini {
	margin-bottom: 4px;
}

/* ------------------------------------------------------------------ *
 * 05 · Ensayos
 * ------------------------------------------------------------------ */

.hc-ensayos__cuerpo {
	display: grid;
	grid-template-columns: minmax(240px, .8fr) minmax(0, 1.9fr);
	gap: clamp(30px, 4vw, 60px);
}
.hc-ensayos__explicacion p {
	font-size: 14px;
	line-height: 1.65;
	color: var(--hc-tinta-suave) !important;
	margin: 0 0 16px;
}
.hc-filas-ensayo {
	display: flex;
	flex-direction: column;
}
.hc-fila-ensayo {
	display: grid;
	grid-template-columns: 96px minmax(0, 2fr) 80px 110px;
	gap: 14px;
	align-items: baseline;
	padding: 16px 0;
	border-top: 1px solid var(--hc-tinta-filete);
}
.hc-fila-ensayo__fecha {
	font-family: var(--hc-fuente-titular);
	font-size: 19px;
	color: var(--hc-dorado-oscuro) !important;
	margin: 0;
}
.hc-fila-ensayo__cuadrilla p {
	margin: 0;
	font-size: 14px;
	color: var(--hc-tinta) !important;
}
.hc-fila-ensayo__nota {
	font-size: 12px;
	font-weight: 500;
	color: var(--hc-dorado-texto) !important;
	margin-top: 4px !important;
}
.hc-fila-ensayo--aviso {
	border-top-color: var(--hc-dorado-oscuro);
}
.hc-fila-ensayo__hora {
	font-size: 11px;
	letter-spacing: .04em;
	color: var(--hc-tinta-suave) !important;
	margin: 0;
}
.hc-fila-ensayo__tipo {
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hc-dorado-texto) !important;
	margin: 0;
}

/* ------------------------------------------------------------------ *
 * 06 · Estación de Penitencia
 * ------------------------------------------------------------------ */

.hc-estacion__cabecera {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 60px);
	align-items: end;
	margin-bottom: clamp(30px, 4vw, 50px);
}
.hc-estacion__titulo {
	font-family: var(--hc-fuente-titular);
	font-weight: 400;
	font-size: clamp(38px, 6.4vw, 104px);
	line-height: .92;
	color: var(--hc-marfil) !important;
	margin: 0;
}
.hc-estacion__entradilla {
	font-size: 15px;
	line-height: 1.65;
	color: var(--hc-marfil-texto) !important;
	margin: 0;
	max-width: 48ch;
}
.hc-estacion .hc-cuenta {
	margin-bottom: clamp(30px, 4vw, 50px);
}
.hc-estacion__dos-columnas {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(30px, 4vw, 60px);
	margin-bottom: clamp(30px, 4vw, 50px);
}
.hc-filas-itinerario {
	border-top: 1px solid var(--hc-marfil-filete);
}
.hc-fila-itinerario {
	display: grid;
	grid-template-columns: 82px 1fr;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid var(--hc-marfil-filete);
}
.hc-fila-itinerario__hora {
	font-family: var(--hc-fuente-titular);
	font-size: 20px;
	color: var(--hc-dorado) !important;
	margin: 0;
}
.hc-fila-itinerario__lugar {
	font-size: 14px;
	color: var(--hc-marfil) !important;
	margin: 0;
}
.hc-fila-itinerario__nota {
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--hc-marfil-texto-suave) !important;
	margin: 4px 0 0;
}
.hc-lista-info {
	margin: 0;
}
.hc-lista-info > div {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--hc-marfil-filete);
}
.hc-lista-info dt {
	font-size: 9.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hc-dorado) !important;
	font-weight: 500;
	margin: 0;
}
.hc-lista-info dd {
	margin: 0;
	font-size: 13.5px;
	color: var(--hc-marfil-texto) !important;
}

.hc-acceso__texto {
	display: flex;
	flex-direction: column;
	margin-top: 20px;
}
.hc-acceso__intro {
	font-size: 14px;
	line-height: 1.65;
	color: var(--hc-marfil) !important;
	margin: 0;
}
.hc-acceso__grupo {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.hc-acceso__grupo + .hc-acceso__grupo {
	/* Filete + hueco generoso, como el resto del sitio marca la
	   estructura: que "Acceso a la Estación", "Horario de acceso",
	   "Calles y tramos" y "Reparto de cirios" se lean como secciones
	   distintas, no como un único bloque continuo. */
	margin-top: clamp(32px, 4vw, 46px);
	padding-top: clamp(24px, 3vw, 32px);
	border-top: 1px solid var(--hc-marfil-filete);
}
.hc-acceso__subtitulo {
	font-size: 9.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hc-dorado) !important;
	font-weight: 500;
	margin: 0 0 6px;
}
.hc-lista-horarios,
.hc-lista-calles {
	margin: 0;
	border-top: 1px solid var(--hc-marfil-filete);
}
.hc-lista-horarios li,
.hc-lista-calles li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--hc-marfil-filete);
	font-size: 13.5px;
	color: var(--hc-marfil) !important;
}
.hc-lista-horarios li > span,
.hc-lista-calles li > span {
	/* Sin esto, un `span` flex conserva su ancho mínimo de contenido
	   (min-width:auto) y el texto largo desborda la fila en vez de
	   envolver — más notorio ahora que la hora usa Cormorant a 20px. */
	min-width: 0;
}
.hc-lista-horarios__hora {
	/* Cormorant, como las horas del itinerario, pero en blanco: aquí el
	   dorado se reserva solo para el título de cada apartado. */
	font-family: var(--hc-fuente-titular);
	font-size: 20px;
	color: var(--hc-marfil) !important;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	/* flex-shrink:0 para que conserve su ancho de contenido (no puede
	   envolver, por el nowrap): sin esto, en móvil se encoge por debajo
	   de ese ancho y el texto se solapa con el span de al lado. */
	flex-shrink: 0;
}
.hc-lista-calles__calle {
	color: var(--hc-marfil) !important;
}
.hc-acceso__rezo {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--hc-marfil-texto) !important;
	margin: 0;
}
.hc-acceso__rezo strong {
	color: var(--hc-dorado) !important;
	font-weight: 500;
}
.hc-lista-avisos {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.hc-lista-avisos li {
	position: relative;
	padding-left: 16px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--hc-marfil-texto-suave) !important;
}
.hc-lista-avisos li::before {
	content: '—';
	position: absolute;
	left: 0;
	color: var(--hc-dorado) !important;
}
.hc-acceso__notas .hc-acceso__rezo {
	margin-bottom: clamp(24px, 3vw, 34px);
}
.hc-estacion__momentos-visitas {
	display: flex;
	flex-direction: column;
}
.hc-estacion__momentos-visitas > div + div {
	/* Mismo tratamiento que `.hc-acceso__grupo`: filete + hueco generoso
	   para separar claramente "Momentos destacados" de "Visitas
	   institucionales". */
	margin-top: clamp(32px, 4vw, 46px);
	padding-top: clamp(24px, 3vw, 32px);
	border-top: 1px solid var(--hc-marfil-filete);
}

.hc-repertorio {
	border: 1px solid rgba(216, 178, 106, .4);
	padding: clamp(22px, 3vw, 34px);
}
.hc-repertorio__titulo {
	font-family: var(--hc-fuente-titular);
	font-weight: 400;
	font-size: 24px;
	margin: 0 0 10px;
	color: var(--hc-marfil) !important;
}
.hc-repertorio__nota {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--hc-marfil-texto) !important;
	margin: 0 0 16px;
}
.hc-lista-marchas {
	/* !important: gana al reseteo `.hc-scope ul` (mismo peso, pero ese es
	   !important) para conservar el hueco antes del enlace de Spotify. */
	margin: 0 0 20px !important;
	border-top: 1px solid var(--hc-marfil-filete);
}
.hc-lista-marchas li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--hc-marfil-filete);
	font-size: 14px;
	color: var(--hc-marfil) !important;
}
.hc-lista-marchas li > span {
	min-width: 0; /* idem `.hc-lista-horarios li > span`: evita el desbordamiento con títulos largos. */
}
.hc-lista-marchas__autor {
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hc-marfil-texto-suave) !important;
}

.hc-momentos {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.hc-momento h5 {
	font-family: var(--hc-fuente-titular);
	font-weight: 400;
	font-size: clamp(22px, 2.6vw, 28px);
	margin: 0 0 6px;
	color: var(--hc-marfil) !important;
}
.hc-momento p {
	margin: 0;
	font-size: 13.5px;
	color: var(--hc-marfil-texto-suave) !important;
}
.hc-lista-visitas {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--hc-marfil-filete);
}
.hc-lista-visitas li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--hc-marfil-filete);
	font-size: 13.5px;
	color: var(--hc-marfil-texto) !important;
}
.hc-lista-visitas li > span {
	min-width: 0; /* idem `.hc-lista-horarios li > span`: evita el desbordamiento con nombres largos. */
}
.hc-lista-visitas__hora {
	color: var(--hc-dorado) !important;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	flex-shrink: 0; /* idem `.hc-lista-horarios__hora`: no se encoge por debajo de su ancho. */
}

.hc-estacion__bloque {
	margin-bottom: clamp(30px, 4vw, 50px);
}
.hc-cifras {
	display: grid;
	/* auto-fit, no auto-fill: con auto-fill sobra una columna fantasma
	   vacía cuando el número de cifras no llena una fila entera. */
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	background: var(--hc-marfil-filete);
	border: 1px solid var(--hc-marfil-filete);
}
.hc-cifra {
	background: var(--hc-verde-profundo);
	padding: 18px 14px;
}
.hc-cifra__numero {
	display: block;
	font-family: var(--hc-fuente-titular);
	font-size: 30px;
	color: var(--hc-dorado) !important;
	line-height: 1.1;
}
.hc-cifra__etiqueta {
	display: block;
	font-size: 11px;
	color: var(--hc-marfil-texto-suave) !important;
	margin-top: 6px;
}

.hc-galeria-estacion {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}
.hc-galeria-estacion__foto {
	margin: 0;
}
.hc-galeria-estacion__boton {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}
.hc-galeria-estacion__boton img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hc-galeria-estacion__foto figcaption {
	margin-top: 8px;
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hc-marfil-texto-suave) !important;
}
.hc-galeria-estacion__cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 8px;
	aspect-ratio: 3 / 4;
	/* !important: idem `.hc-conmutador__boton` — reseteo de `.hc-scope button`
	   (padding y border). */
	border: 1px solid rgba(216, 178, 106, .5) !important;
	padding: 16px !important;
	color: var(--hc-marfil) !important;
}
.hc-galeria-estacion__numero {
	font-family: var(--hc-fuente-titular);
	font-size: 40px;
	color: var(--hc-dorado) !important;
	line-height: 1;
}
.hc-galeria-estacion__cta span:last-child {
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hc-marfil-texto) !important;
}

/* ------------------------------------------------------------------ *
 * 07 · Noticias relacionadas
 * ------------------------------------------------------------------ */

.hc-noticias__lista {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 48px);
	margin-bottom: 10px;
}
.hc-noticia {
	border-top: 1px solid var(--hc-tinta-filete);
	padding-top: 18px;
}
.hc-noticia__imagen-enlace {
	display: block;
}
.hc-noticia__imagen,
.hc-noticia__imagen--vacia {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
}
.hc-noticia__imagen {
	object-fit: cover;
}
.hc-noticia__imagen--vacia {
	background: var(--hc-cartel-fondo);
}
.hc-noticia__meta {
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hc-tinta-suave) !important;
	margin: 14px 0 6px;
}
.hc-noticia__titulo {
	font-family: var(--hc-fuente-titular);
	font-weight: 400;
	font-size: clamp(19px, 2vw, 26px);
	margin: 0;
}
.hc-noticia__titulo a {
	color: var(--hc-tinta) !important;
}

/* ------------------------------------------------------------------ *
 * 08 · Otros años / archivo
 * ------------------------------------------------------------------ */

.hc-otros-anios__recuento {
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hc-tinta-suave) !important;
	margin: 0;
}
.hc-tarjetas-anio {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 40px);
}
.hc-tarjeta-anio {
	display: block;
	border: 1px solid var(--hc-tinta-filete);
	color: var(--hc-tinta) !important;
}
.hc-tarjeta-anio__imagen,
.hc-tarjeta-anio__imagen--vacia {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
}
.hc-tarjeta-anio__imagen {
	object-fit: cover;
}
.hc-tarjeta-anio__imagen--vacia {
	background: var(--hc-cartel-fondo);
}
.hc-tarjeta-anio__cuerpo {
	display: block;
	padding: 20px;
}
.hc-tarjeta-anio__anio {
	display: block;
	font-family: var(--hc-fuente-titular);
	font-weight: 400;
	font-size: clamp(28px, 3.2vw, 42px);
	color: var(--hc-tinta) !important;
	margin-bottom: 8px;
}
.hc-tarjeta-anio--vigente {
	border-color: var(--hc-dorado-oscuro);
}
.hc-tarjeta-anio--vigente .hc-tarjeta-anio__anio {
	color: var(--hc-dorado-texto) !important;
}
.hc-tarjeta-anio__resumen {
	display: block;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--hc-tinta-suave) !important;
	margin-bottom: 10px;
}
.hc-tarjeta-anio__estado {
	display: block;
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hc-tinta-suave) !important;
}
.hc-tarjeta-anio--vigente .hc-tarjeta-anio__estado {
	color: var(--hc-dorado-texto) !important;
}
.hc-otros-anios__vacio {
	color: var(--hc-tinta-suave) !important;
}
.hc-otros-anios__nota {
	margin-top: clamp(30px, 4vw, 50px);
	padding-top: 24px;
	border-top: 1px solid var(--hc-tinta-filete);
	max-width: none;
	font-size: 13px;
	color: var(--hc-tinta-suave) !important;
}
.hc-otros-anios__nota a {
	margin-left: 6px;
	font-weight: 500;
	color: var(--hc-dorado-texto) !important;
	border-bottom: 1px solid var(--hc-dorado-texto);
}

/* ------------------------------------------------------------------ *
 * Visor de galería: diálogo a pantalla completa, rejilla de fotos.
 * ------------------------------------------------------------------ */

.hc-visor {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--hc-verde-profundo);
	color: var(--hc-marfil-texto) !important;
	display: flex;
	flex-direction: column;
}
.hc-visor[hidden],
.hc-visor:not([open]) {
	display: none;
}
.hc-visor::backdrop {
	background: rgba(0, 0, 0, .8);
}
.hc-visor__cabecera {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
	padding: clamp(20px, 3vw, 34px) var(--hc-margen);
	border-bottom: 1px solid var(--hc-marfil-filete);
	flex: none;
}
.hc-visor__epigrafe {
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--hc-dorado) !important;
	margin: 0 0 6px;
}
.hc-visor__titulo {
	font-family: var(--hc-fuente-titular);
	font-weight: 400;
	font-size: clamp(20px, 2.4vw, 30px);
	margin: 0;
	color: var(--hc-marfil) !important;
}
.hc-visor__cerrar {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	/* !important: idem `.hc-conmutador__boton` — reseteo de `.hc-scope button`
	   (padding y border). */
	padding: 10px 16px !important;
	border: 1px solid var(--hc-marfil-filete) !important;
	color: var(--hc-marfil-texto) !important;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	flex: none;
}
.hc-visor__cerrar:hover {
	border-color: var(--hc-dorado) !important;
	color: var(--hc-dorado) !important;
}
.hc-visor__cuerpo {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: clamp(20px, 3vw, 34px) var(--hc-margen) clamp(40px, 5vw, 70px);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	align-content: start;
}
.hc-visor__foto {
	margin: 0;
}
.hc-visor__foto img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	cursor: pointer;
}
.hc-visor__foto figcaption {
	margin-top: 8px;
	font-size: 11px;
	color: var(--hc-marfil-texto-suave) !important;
}

/* Foto suelta a pantalla completa dentro del propio visor: se pincha una
   miniatura de la rejilla y se abre esto por encima, con flechas para
   recorrer toda la galería sin volver antes a la rejilla. */
.hc-visor__foto-completa {
	position: absolute;
	inset: 0;
	background: var(--hc-verde-profundo);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(20px, 4vw, 60px) clamp(60px, 9vw, 110px);
}
.hc-visor__foto-completa[hidden] {
	display: none;
}
.hc-visor__foto-completa-figura {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.hc-visor__foto-completa-figura img {
	display: block;
	max-width: 100%;
	max-height: 76vh;
	width: auto;
	height: auto;
	object-fit: contain;
}
.hc-visor__foto-completa-figura figcaption {
	font-size: 13px;
	color: var(--hc-marfil-texto) !important;
	text-align: center;
}
.hc-visor__foto-completa-figura figcaption:empty {
	display: none;
}
.hc-visor__foto-cerrar {
	position: absolute;
	top: clamp(16px, 3vw, 30px);
	right: clamp(16px, 4vw, 40px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--hc-marfil-texto) !important;
}
.hc-visor__foto-cerrar:hover {
	color: var(--hc-dorado) !important;
}
.hc-visor__foto-flecha {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	font-size: 32px;
	line-height: 1;
	/* !important: idem `.hc-conmutador__boton` — reseteo de `.hc-scope button`. */
	border: 1px solid var(--hc-marfil-filete) !important;
	color: var(--hc-marfil-texto) !important;
}
.hc-visor__foto-flecha:hover {
	border-color: var(--hc-dorado) !important;
	color: var(--hc-dorado) !important;
}
.hc-visor__foto-flecha--anterior {
	left: clamp(8px, 2vw, 30px);
}
.hc-visor__foto-flecha--siguiente {
	right: clamp(8px, 2vw, 30px);
}

/* ------------------------------------------------------------------ *
 * Puntos de ruptura
 * ------------------------------------------------------------------ */

@media (max-width: 900px) {
	.hc-portada {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.hc-hero {
		grid-template-columns: 1fr;
		min-height: 0;
		height: auto;
	}
	.hc-hero__contenido {
		height: auto;
		padding: 30px var(--hc-margen);
	}
	.hc-hero__imagen-columna {
		order: -1;
		height: auto;
		aspect-ratio: 16 / 10;
	}
	.hc-hero__linea {
		flex-direction: column;
		align-items: flex-start;
	}
	.hc-carteles__lista,
	.hc-pregones__lista,
	.hc-noticias__lista,
	.hc-tarjetas-anio,
	.hc-estacion__cabecera,
	.hc-estacion__dos-columnas,
	.hc-ensayos__cuerpo,
	.hc-cifras {
		grid-template-columns: 1fr;
	}
	.hc-galeria-estacion {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.hc-visor__cuerpo {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.hc-fila-culto,
	.hc-fila-ensayo {
		grid-template-columns: 1fr;
		gap: 6px;
	}
	.hc-fila-concierto {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.hc-fila-concierto__galeria {
		max-width: 320px;
	}
}

@media (max-width: 760px) {
	.hc-indice-fija ul {
		padding: 0 calc(var(--hc-margen) - 18px) !important;
	}
}

@media (max-width: 620px) {
	.hc-anio--hero {
		font-size: clamp(56px, 22vw, 96px);
	}
	.hc-cuenta__reloj {
		gap: 10px;
	}
	.hc-cuenta__unidad span {
		font-size: 26px;
	}
	.hc-visor__foto-completa {
		padding: 70px 46px;
	}
	.hc-visor__foto-flecha {
		width: 38px;
		height: 38px;
		font-size: 24px;
	}
	.hc-visor__foto-flecha--anterior {
		left: 4px;
	}
	.hc-visor__foto-flecha--siguiente {
		right: 4px;
	}
}