/* ============================================
Tercer Informe - HERO (Storydoc + Mosaic)
Prefijo: Tinforme_
Requisitos:
- Texto izquierda, mosaic derecha
- Mosaic: video + imagen (mismo alto) + 2 sólidos
- Mobile: sólidos más bajos, video/imagen más altos (masonry)
============================================ */

/* Carrusel / slides */
.Tinforme_hero {
	position: relative;
}
.Tinforme_heroCarousel {
	background: #fff;
}

.Tinforme_heroInner {
	position: relative;
}
.Tinforme_heroItem {
	position: relative;
	background: #fff;
	min-height: clamp(640px, 86vh, 920px);
}

/* Layout 2 columnas (Storydoc) */
.Tinforme_heroLayout {
	height: 100%;
	min-height: inherit;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(18px, 3vw, 34px);
	align-items: center;
	padding: clamp(18px, 4vw, 46px);
	width: min(1220px, 96%);
	margin: 0 auto;
}

/* Izquierda: texto */
.Tinforme_heroLeft {
	border-radius: 22px;
	padding: 15px;
	backdrop-filter: blur(6px);
	background: rgba(229, 31, 69, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.16);
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

.Tinforme_heroText {
	max-width: 640px;
	padding: clamp(6px, 1vw, 10px);
}

.Tinforme_heroKicker {
	color: rgba(0, 0, 0, 0.62);
	font-weight: 800;
	letter-spacing: 0.4px;
	margin-bottom: 10px;
	font-size: 13px;
	text-transform: uppercase;
}

.Tinforme_heroTitle {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 12px;
	color: #111;
}

.Tinforme_heroTitleBig {
	font-size: clamp(62px, 8vw, 112px);
	font-weight: 900;
	line-height: 0.9;
}

.Tinforme_heroTitleWord {
	font-size: clamp(30px, 4vw, 56px);
	font-weight: 900;
	letter-spacing: 0.6px;
}

.Tinforme_heroMeta {
	margin-top: 8px;
	color: #222;
}

.Tinforme_heroRector {
	font-weight: 900;
	font-size: 18px;
}

.Tinforme_heroRole {
	font-size: 12px;
	letter-spacing: 0.7px;
	opacity: 0.8;
	text-transform: uppercase;
}

.Tinforme_heroMotto {
	margin-top: 10px;
	font-weight: 800;
	opacity: 0.9;
}

.Tinforme_heroSubtitle {
	margin: 0 0 10px;
	color: #111;
	font-weight: 900;
	font-size: clamp(22px, 3.2vw, 34px);
}

.Tinforme_heroLead {
	margin: 0 0 14px;
	color: rgba(0, 0, 0, 0.72);
	line-height: 1.55;
	font-size: 15px;
}

.Tinforme_heroActions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.Tinforme_btnPrimary,
.Tinforme_btnSecondary {
	font-weight: 900;
	border-radius: 14px;
	padding: 10px 14px;
}

/* Derecha: mosaic */
.Tinforme_heroRight {
	display: flex;
	justify-content: center;
}

/* ============================================
MOSAIC (unificado)
HTML esperado:
.Tinforme_mosaic
  .Tinforme_mosaicItem.Tinforme_mosaicVideo.Tinforme_mosaicA (video)
  .Tinforme_mosaicItem.Tinforme_mosaicSolid.Tinforme_mosaicB (solid)
  .Tinforme_mosaicItem.Tinforme_mosaicSolid.Tinforme_mosaicC (solid)
  .Tinforme_mosaicItem.Tinforme_mosaicImg.Tinforme_mosaicD (image)
============================================ */
.Tinforme_mosaic {
	width: min(460px, 92vw);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.Tinforme_mosaicItem {
	border-radius: 28px;
	overflow: hidden; /* máscara */
	position: relative;
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
}

.Tinforme_mosaicVideo .Tinforme_mosaicMedia {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.Tinforme_mosaicImg {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.Tinforme_mosaicSolid {
	background: #e51f45;
}

/* ============ DESKTOP (>=992px) ============ */
/* Video e imagen del mismo alto (2 filas). Sólidos chicos. */
@media (min-width: 992px) {
	.Tinforme_mosaic {
		grid-template-rows: 200px 200px 200px; /* 3 filas */
	}

	/* VIDEO grande (col 1, ocupa 2 filas) */
	.Tinforme_mosaicA {
		grid-column: 1;
		grid-row: 1 / span 2;
		min-height: calc(200px * 2 + 18px);
	}

	/* Sólido chico (arriba derecha) */
	.Tinforme_mosaicB {
		grid-column: 2;
		grid-row: 1;
		min-height: 200px;
	}

	/* Sólido chico (abajo izquierda) */
	.Tinforme_mosaicC {
		grid-column: 1;
		grid-row: 3;
		min-height: 200px;
	}

	/* IMAGEN grande (col 2, ocupa 2 filas) */
	.Tinforme_mosaicD {
		grid-column: 2;
		grid-row: 2 / span 2;
		min-height: calc(200px * 2 + 18px);
	}
}

/* ============ TABLET (<=991px) ============ */
@media (max-width: 991px) {
	.Tinforme_heroLayout {
		grid-template-columns: 1fr;
		gap: 22px;
		padding: 18px;
	}

	.Tinforme_mosaic {
		width: min(560px, 96vw);
		grid-template-rows: 220px 220px 220px;
	}

	.Tinforme_mosaicA {
		grid-column: 1;
		grid-row: 1 / span 2;
		min-height: calc(220px * 2 + 18px);
	}

	.Tinforme_mosaicB {
		grid-column: 2;
		grid-row: 1;
		min-height: 220px;
	}

	.Tinforme_mosaicC {
		grid-column: 1;
		grid-row: 3;
		min-height: 220px;
	}

	.Tinforme_mosaicD {
		grid-column: 2;
		grid-row: 2 / span 2;
		min-height: calc(220px * 2 + 18px);
	}
}

/* ============ MOBILE (<=575px) ============ */
/* Efecto masonry como tu captura: sólidos a la mitad, media grande */
@media (max-width: 575px) {
	.Tinforme_mosaic {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 160px 160px 120px;
		gap: 16px;
	}

	.Tinforme_mosaicA {
		grid-column: 1;
		grid-row: 1 / span 2;
		min-height: calc(160px * 2 + 16px);
	}

	.Tinforme_mosaicB {
		grid-column: 2;
		grid-row: 1;
		min-height: 110px; /* sólido reducido */
	}

	.Tinforme_mosaicC {
		grid-column: 1;
		grid-row: 3;
		min-height: 110px; /* sólido reducido */
	}

	.Tinforme_mosaicD {
		grid-column: 2;
		grid-row: 2 / span 2;
		min-height: calc(160px * 2 + 16px);
	}

	.Tinforme_mosaicItem {
		border-radius: 26px;
	}

	.Tinforme_heroActions .btn {
		width: 100%;
	}
}

/* Indicadores (dots) para fondo blanco */
.Tinforme_heroIndicators [data-bs-target] {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background-color: rgba(0, 0, 0, 0.35);
}
.Tinforme_heroIndicators .active {
	background-color: rgba(0, 0, 0, 0.75);
}
/* ============================================
Hero - Color institucional + Botones
============================================ */
:root {
	--Tinforme_primary: #e51f45;
	--Tinforme_grayBtn: #3c3c3b;
	--Tinforme_grayBtn2: #5a5a58;
}

/* Kicker y Rector en color primario */
.Tinforme_heroKicker {
	color: var(--Tinforme_primary);
}
.Tinforme_heroRector {
	color: var(--Tinforme_primary);
}

/* Botón primario (rojo) */
.Tinforme_btnPrimary {
	background: var(--Tinforme_primary) !important;
	border-color: var(--Tinforme_primary) !important;
	color: #fff !important;
}
.Tinforme_btnPrimary:hover {
	filter: brightness(0.95);
}
.Tinforme_btnPrimary:focus {
	box-shadow: 0 0 0 0.2rem rgba(229, 31, 69, 0.35) !important;
}

/* Botón secundario (gris) */
.Tinforme_btnSecondary {
	background: var(--Tinforme_grayBtn) !important;
	border-color: var(--Tinforme_grayBtn) !important;
	color: #fff !important;
}
.Tinforme_btnSecondary:hover {
	background: var(--Tinforme_grayBtn2) !important;
	border-color: var(--Tinforme_grayBtn2) !important;
}
.Tinforme_btnSecondary:focus {
	box-shadow: 0 0 0 0.2rem rgba(60, 60, 59, 0.35) !important;
}
/* ============================================
Fondo por slide (opcional)
============================================ */
.Tinforme_heroItem {
	/* fallback si no se define variable */
	--Tinforme_slideBg: none;
}

/* capa de fondo (patrón/detalles) */
.Tinforme_heroItem::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--Tinforme_slideBg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover; /* si es un fondo completo */
	opacity: 1;
	pointer-events: none;
	z-index: 0;
}

/* Aseguramos que el contenido quede encima */
.Tinforme_heroLayout {
	position: relative;
	z-index: 1;
}
/* ============================================
Fix mobile: margen horizontal uniforme
============================================ */
@media (max-width: 575px) {
	.Tinforme_heroLayout {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	/* Asegura que el mosaic no se “pegue” al borde */
	.Tinforme_heroRight {
		padding-left: 0;
		padding-right: 0;
	}

	.Tinforme_mosaic {
		margin-left: auto;
		margin-right: auto;
	}
}
/* ============================================
Fix definitivo mobile: padding 15px simétrico
y evitar "margin:0 auto" + width 96% en móviles
============================================ */
@media (max-width: 575px) {
	.Tinforme_heroLayout {
		width: 100% !important; /* ocupa todo el viewport */
		margin: 0 !important; /* quita el centrado */
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	/* Asegura que nada genere scroll horizontal */
	.Tinforme_hero,
	.Tinforme_heroCarousel,
	.Tinforme_heroInner,
	.Tinforme_heroItem {
		overflow-x: hidden;
	}
}
/* ============================================
Fancybox opcional: overlay de interacción
============================================ */
.Tinforme_mosaicLink {
	display: block;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.Tinforme_mosaicLink::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	transition: background 0.18s ease;
}

.Tinforme_mosaicLink:hover::after {
	background: rgba(0, 0, 0, 0.12);
}

.Tinforme_mosaicPlay,
.Tinforme_mosaicZoom {
	position: absolute;
	right: 14px;
	top: 14px;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
	transform: translateY(0);
	transition:
		transform 0.18s ease,
		background 0.18s ease;
	z-index: 2;
}

.Tinforme_mosaicLink:hover .Tinforme_mosaicPlay,
.Tinforme_mosaicLink:hover .Tinforme_mosaicZoom {
	transform: translateY(-2px);
	background: rgba(0, 0, 0, 0.65);
}

/* Accesibilidad: focus visible */
.Tinforme_mosaicLink:focus {
	outline: 3px solid rgba(229, 31, 69, 0.55);
	outline-offset: 3px;
	border-radius: 28px;
}
/* ============================================
Fancybox video: overlay sin afectar el layout
============================================ */
.Tinforme_mosaicOverlayLink {
	position: absolute;
	inset: 0;
	z-index: 3; /* encima del video */
	display: block;
	text-decoration: none;
	cursor: pointer;
}

/* Hover/feedback */
.Tinforme_mosaicOverlayLink::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	transition: background 0.18s ease;
}

.Tinforme_mosaicOverlayLink:hover::after {
	background: rgba(0, 0, 0, 0.12);
}

/* Icono play ya lo tienes, pero nos aseguramos que esté arriba */
.Tinforme_mosaicPlay {
	position: absolute;
	right: 14px;
	top: 14px;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
	transform: translateY(0);
	transition:
		transform 0.18s ease,
		background 0.18s ease;
	z-index: 4;
}

.Tinforme_mosaicOverlayLink:hover .Tinforme_mosaicPlay {
	transform: translateY(-2px);
	background: rgba(0, 0, 0, 0.65);
}

/* Accesibilidad */
.Tinforme_mosaicOverlayLink:focus {
	outline: 3px solid rgba(229, 31, 69, 0.55);
	outline-offset: 3px;
	border-radius: 28px;
}
/* ============================================
Breath FLUIDO (sin pausas) + Halo rojo
- NO anima box-shadow ni filter (evita stutter)
- Zoom IN rápido / OUT suave (asimétrico)
- Halo con ::after animando solo opacity
============================================ */

/* Forzar GPU (suaviza transform en video/img) */
.Tinforme_mosaicA,
.Tinforme_mosaicD {
	transform: translateZ(0);
	backface-visibility: hidden;
	will-change: transform;
}

/* Halo rojo fijo (solo cambia opacity) */
.Tinforme_mosaicA::after,
.Tinforme_mosaicD::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	/* halo visible como “contorno” */
	box-shadow: 0 0 0 14px rgba(229, 31, 69, 0.18);
	z-index: 2;
}

/* Keyframes suaves con más puntos (sin escalones)
   IN rápido (hasta ~30%)
   OUT largo y continuo (resto)
   IMPORTANTE: solo transform */
@keyframes Tinforme_breathScale {
	0% {
		transform: translateZ(0) scale(1);
	}
	10% {
		transform: translateZ(0) scale(1.02);
	}
	20% {
		transform: translateZ(0) scale(1.04);
	}
	30% {
		transform: translateZ(0) scale(1.055);
	} /* pico temprano (IN rápido) */
	42% {
		transform: translateZ(0) scale(1.048);
	}
	55% {
		transform: translateZ(0) scale(1.038);
	}
	70% {
		transform: translateZ(0) scale(1.024);
	}
	85% {
		transform: translateZ(0) scale(1.012);
	}
	100% {
		transform: translateZ(0) scale(1);
	}
}

/* Halo acompaña el respiro (solo opacity, ultra fluido) */
@keyframes Tinforme_breathHalo {
	0% {
		opacity: 0;
	}
	12% {
		opacity: 1;
	}
	70% {
		opacity: 0.9;
	}
	100% {
		opacity: 0;
	}
}

/* Clase aplicada por tu JS */
.Tinforme_breathOn {
	animation: Tinforme_breathScale 2.2s linear 1; /* linear evita “pausa” por easing */
}

/* Halo durante la animación */
.Tinforme_breathOn::after {
	animation: Tinforme_breathHalo 2.2s linear 1;
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
	.Tinforme_breathOn,
	.Tinforme_breathOn::after {
		animation: none !important;
	}
}
/* ============================================
Transmisión (Storydoc style)
============================================ */
.Tinforme_live {
	padding: clamp(34px, 6vw, 84px) 0;
	background: transparent;
}

.Tinforme_liveWrap {
	width: min(1220px, 96%);
	margin: 0 auto;
	padding: 0 15px; /* seguridad mobile */
}

.Tinforme_liveGrid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(18px, 3vw, 34px);
	align-items: center;
}

.Tinforme_liveKicker {
	color: var(--Tinforme_primary);
	font-weight: 900;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	font-size: 13px;
	margin-bottom: 10px;
}

.Tinforme_liveTitle {
	margin: 0 0 10px;
	font-weight: 900;
	color: #111;
	font-size: clamp(26px, 3.2vw, 38px);
}

.Tinforme_liveDesc {
	margin: 0 0 16px;
	color: rgba(0, 0, 0, 0.72);
	line-height: 1.6;
	font-size: 15px;
	max-width: 56ch;
}

.Tinforme_liveActions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

.Tinforme_liveStatus {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	font-weight: 900;
	color: rgba(0, 0, 0, 0.7);
}

.Tinforme_liveDot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: var(--Tinforme_primary);
	box-shadow: 0 0 0 6px rgba(229, 31, 69, 0.12);
}

/* Visor */
.Tinforme_liveFrame {
	position: relative;
	border-radius: 28px;
	overflow: hidden; /* máscara */
	background: #111;
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.14);
	aspect-ratio: 16 / 9;
}

.Tinforme_liveVideo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: translateZ(0) scale(1.02);
}

.Tinforme_liveOverlay {
	position: absolute;
	inset: 0;
	display: grid;
	align-content: end;
	gap: 10px;
	padding: 16px;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 40%,
		rgba(0, 0, 0, 0.62) 100%
	);
}

/* Overlay compacto no intrusivo */
.Tinforme_liveOverlay.is-live {
	inset: 12px auto auto 12px;
	display: block;
	padding: 0;
	background: none;
	pointer-events: none;
}

.Tinforme_liveOverlayBadge {
	display: inline-flex;
	width: fit-content;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-weight: 900;
	font-size: 12px;
	letter-spacing: 0.3px;
}

.Tinforme_liveOverlayBtn {
	width: fit-content;
	border: 0;
	border-radius: 14px;
	padding: 10px 14px;
	font-weight: 900;
	color: #fff;
	background: rgba(229, 31, 69, 0.92);
}

.Tinforme_liveOverlayBtn:hover {
	filter: brightness(0.95);
}

.Tinforme_liveHint {
	margin-top: 10px;
	color: rgba(0, 0, 0, 0.55);
	font-size: 12px;
}

/* iframe live */
.Tinforme_liveIframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Responsive */
@media (max-width: 991px) {
	.Tinforme_liveGrid {
		grid-template-columns: 1fr;
	}
}
/* ============================================
Indicador LIVE / Institucional
============================================ */
.Tinforme_liveOverlayBadge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	padding: 6px 12px;
	border-radius: 999px;
	font-weight: 900;
	font-size: 12px;
	letter-spacing: 0.4px;
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
}

/* Estado EN VIVO */
.Tinforme_liveFrame.is-live-active .Tinforme_liveOverlayBadge {
	background: var(--Tinforme_primary);
	box-shadow: 0 0 0 6px rgba(229, 31, 69, 0.22);
}

/* Puntito animado LIVE */
.Tinforme_liveFrame.is-live-active .Tinforme_liveOverlayBadge::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35);
	animation: Tinforme_livePulse 1.2s infinite;
}

@keyframes Tinforme_livePulse {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.4);
		opacity: 0.6;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}
/* ============================================
Descargas por etapas
- Por defecto, botones con data-enabled="0" se ocultan
============================================ */
.Tinforme_dlBtn[data-enabled='0'] {
	display: none;
}
/* ============================================
Transmisión: invertir columnas
Video izquierda | Texto derecha
============================================ */
.Tinforme_liveGrid {
	grid-template-areas: 'video text';
}

/* Asignación de áreas */
.Tinforme_liveRight {
	grid-area: video;
}

.Tinforme_liveLeft {
	grid-area: text;
}

/* Mobile: apilar normal (texto arriba, video abajo) */
@media (max-width: 991px) {
	.Tinforme_liveGrid {
		grid-template-areas:
			'text'
			'video';
	}
}
/* ============================================
Texto Transmisión – Estilo institucional
============================================ */
.Tinforme_liveOrg {
	font-weight: 900;
	letter-spacing: 0.18em;
	font-size: 18px;
	margin-bottom: 18px;
	color: #111;
}

.Tinforme_liveSubtitle {
	font-weight: 700;
	letter-spacing: 0.14em;
	font-size: 16px;
	color: #777;
	margin-bottom: 26px;
}

.Tinforme_liveRector {
	font-size: clamp(28px, 3.2vw, 38px);
	font-weight: 900;
	margin-bottom: 6px;
}

.Tinforme_liveRectorName {
	color: var(--Tinforme_primary);
}

.Tinforme_liveRectorLast {
	color: #111;
}

.Tinforme_livePeriod {
	font-size: 18px;
	font-weight: 700;
	color: #777;
	margin-bottom: 24px;
}

.Tinforme_livePeriod span {
	color: var(--Tinforme_primary);
}

.Tinforme_liveDate {
	font-size: 20px;
	font-weight: 700;
	color: #555;
	margin-bottom: 28px;
}
/* ============================================
Avances y resultados (Masonry) — GLASS (reversible)
Activa el modo glass agregando: .Tinforme_mhGlass al section
AJUSTES solicitados:
- Icono SIN fondo ni borde
- Título con “pill” glass (padding 7px 20px)
- Botón centrado + padding 5px 25px
============================================ */
:root {
	--Tinforme_primary: #e51f45;
}

/* Sección */
.Tinforme_avances {
	background: rgb(60, 60, 59);
	padding: clamp(40px, 6vw, 86px) 0;
}

.Tinforme_avancesWrap {
	width: min(1220px, 96%);
	margin: 0 auto;
	padding: 0 15px;
}

.Tinforme_avancesKicker {
	color: var(--Tinforme_primary);
	font-weight: 900;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-size: 12px;
	margin-bottom: 10px;
}

.Tinforme_avancesTitle {
	color: #fff;
	font-weight: 900;
	margin: 0 0 10px;
	font-size: clamp(26px, 3.2vw, 42px);
}

.Tinforme_avancesDesc {
	color: rgba(255, 255, 255, 0.78);
	margin: 0 0 26px;
	max-width: 70ch;
}

/* ============================================
Masonry base
============================================ */
.Tinforme_mhGrid {
	position: relative;
}

.Tinforme_mhSizer {
	width: calc(33.333% - 12px);
}
.Tinforme_mhGutter {
	width: 18px;
}

.Tinforme_mhItem {
	width: calc(33.333% - 12px);
	background: transparent !important;
	margin-bottom: 18px;
	box-sizing: border-box;
}

/* ============================================
CARD base (soporta imagen o color)
============================================ */
.Tinforme_mhCard {
	/* Si no defines imagen, queda solo overlay */
	--Tinforme_cardBg: none;

	/* Control de overlay (normal) */
	--Tinforme_cardOverlay: rgba(0, 0, 0, 0.42);

	height: 100%;
	border-radius: 22px;
	overflow: hidden;
	padding: 20px;

	display: flex;
	flex-direction: column;
	gap: 12px;

	position: relative;
	isolation: isolate;

	background-image:
		linear-gradient(var(--Tinforme_cardOverlay), var(--Tinforme_cardOverlay)),
		var(--Tinforme_cardBg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
	transition:
		transform 0.25s ease,
		filter 0.25s ease;
}

.Tinforme_mhItem:hover .Tinforme_mhCard {
	transform: translateY(-4px);
	filter: brightness(1.08);
}

/* ============================================
MODO GLASS (solo si .Tinforme_mhGlass está presente)
============================================ */
.Tinforme_mhGlass .Tinforme_mhCard {
	--Tinforme_cardOverlay: rgba(229, 31, 69, 0.18);
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
}

/* Capa 1: background desenfocado */
.Tinforme_mhGlass .Tinforme_mhCard::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;

	background-image: var(--Tinforme_cardBg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	/* blur ligero (mejor legibilidad) */
	filter: blur(2px) saturate(1.05);
	transform: scale(1.04);
	opacity: 0.95;
}

/* Capa 2: overlay institucional + viñeta */
.Tinforme_mhGlass .Tinforme_mhCard::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;

	background:
		radial-gradient(
			900px 260px at 10% 10%,
			rgba(255, 255, 255, 0.08),
			rgba(255, 255, 255, 0) 60%
		),
		linear-gradient(135deg, rgba(229, 31, 69, 0.18), rgba(0, 0, 0, 0.86));
	opacity: 1;
}

/* Contenido encima */
.Tinforme_mhGlass .Tinforme_mhCard > * {
	position: relative;
	z-index: 2;
}

/* Panel glass del card (suave) */
.Tinforme_mhGlass .Tinforme_mhCard {
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.14);
}

/* ============================================
Fallback (si NO hay imagen)
============================================ */
.Tinforme_mhItem.Tinforme_toneA .Tinforme_mhCard {
	--Tinforme_cardBg: none;
	background-color: #4b4b4a;
}
.Tinforme_mhItem.Tinforme_toneB .Tinforme_mhCard {
	--Tinforme_cardBg: none;
	background-color: #585856;
}
.Tinforme_mhItem.Tinforme_toneC .Tinforme_mhCard {
	--Tinforme_cardBg: none;
	background-color: #666664;
}

/* ============================================
Imágenes por rubro (ejemplos)
AJUSTA RUTAS
============================================ */
.Tinforme_mhItem.Docencia .Tinforme_mhCard {
	--Tinforme_cardBg: url('../images/avances/docencia.jpg');
}
.Tinforme_mhItem.Innovacion .Tinforme_mhCard {
	--Tinforme_cardBg: url('../images/avances/innovacion.jpg');
}
.Tinforme_mhItem.Cultura .Tinforme_mhCard {
	--Tinforme_cardBg: url('../images/avances/cultura.jpg');
}
.Tinforme_mhItem.Vinculacion .Tinforme_mhCard {
	--Tinforme_cardBg: url('../images/avances/vinculacion.jpg');
}
.Tinforme_mhItem.Infraestructura .Tinforme_mhCard {
	--Tinforme_cardBg: url('../images/avances/infraestructura.jpg');
}
.Tinforme_mhItem.Gestion .Tinforme_mhCard {
	--Tinforme_cardBg: url('../images/avances/gestion.jpg');
}

/* ============================================
Contenido (AJUSTADO)
============================================ */

/* 1) ICONO: sin fondo ni borde */
.Tinforme_mhIcon {
	width: 100%;
	height: 80px;
	display: grid;
	place-items: center;

	background: transparent; /* <- quitado */
	border: 0; /* <- quitado */
	border-radius: 0; /* <- por si acaso */
	box-shadow: none; /* <- por si acaso */

	color: #fff;
	font-size: 90px;
}

/* 2) TÍTULO: pill glass */
.Tinforme_mhTitle {
	color: #fff;
	font-weight: 900;
	margin: 6px 0 2px;
	font-size: 18px;
	line-height: 1.25;
	text-align: center;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);

	/* pill glass */
	display: inline-block;
	align-self: center; /* centra el pill */
	padding: 7px 20px; /* <- solicitado */
	border-radius: 999px;

	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* 3) BOTÓN: centrado + padding solicitado */
.Tinforme_mhBtn {
	margin-top: auto;
	align-self: center; /* <- centro */
	display: inline-flex;
	width: fit-content;

	padding: 5px 25px; /* <- solicitado */
	border-radius: 999px;
	font-weight: 900;
	text-decoration: none;

	background: rgba(229, 31, 69, 0.95);
	color: #fff;

	box-shadow: 0 10px 18px rgba(0, 0, 0, 0.25);
}

.Tinforme_mhBtn:hover {
	filter: brightness(0.95);
}

/* Alturas variables */
.Tinforme_mhNormal .Tinforme_mhCard {
	min-height: 220px;
}
.Tinforme_mhWide .Tinforme_mhCard {
	min-height: 260px;
}
.Tinforme_mhTall .Tinforme_mhCard {
	min-height: 310px;
}

/* Responsive */
@media (max-width: 991px) {
	.Tinforme_mhSizer {
		width: calc(50% - 9px);
	}
	.Tinforme_mhItem {
		width: calc(50% - 9px);
	}
}

@media (max-width: 575px) {
	.Tinforme_mhSizer,
	.Tinforme_mhItem {
		width: 100%;
	}
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce) {
	.Tinforme_mhCard {
		transition: none !important;
	}
	.Tinforme_mhItem:hover .Tinforme_mhCard {
		transform: none !important;
		filter: none !important;
	}
}

/* ============================================
Informes anteriores (Timeline alternado)
Prefijo: Tinforme_
- Línea central
- Items alternados izquierda/derecha
- Card máx 500px (200 img + 300 texto)
- Mobile: img 190px centrada, texto debajo
============================================ */

.Tinforme_prev {
	background: #fff;
	padding: clamp(44px, 6vw, 90px) 0;
}

.Tinforme_prevWrap {
	width: min(1220px, 96%);
	margin: 0 auto;
	padding: 0 15px;
}

/* Encabezado */
.Tinforme_prevHead {
	max-width: 70ch;
	margin-bottom: 22px;
}

.Tinforme_prevKicker {
	color: #e51f45;
	font-weight: 900;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-size: 12px;
	margin-bottom: 10px;
}

.Tinforme_prevTitle {
	color: #111;
	font-weight: 900;
	margin: 0 0 10px;
	font-size: clamp(26px, 3.2vw, 42px);
}

.Tinforme_prevDesc {
	color: rgba(0, 0, 0, 0.68);
	margin: 0;
}

/* Timeline con línea central */
.Tinforme_prevTimeline {
	position: relative;
	display: grid;
	gap: 22px;
	padding: 18px 0;
}

/* Línea central */
.Tinforme_prevTimeline::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	background: rgba(0, 0, 0, 0.1);
	border-radius: 2px;
}

/* Item: grid 2 columnas (izq | der) para alternar */
.Tinforme_prevItem {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	min-height: 1px;
}

/* Card base (máximo 500px) */
.Tinforme_prevCard {
	width: min(500px, 100%);
	background: #fff;
	border-radius: 24px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 200px 300px; /* requerido */
	max-width: 500px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Thumbnail */
.Tinforme_prevThumb {
	width: 200px;
	background: #f4f4f4;
	display: grid;
	place-items: center;
}

.Tinforme_prevThumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 12px;
	display: block;
}

/* Contenido */
.Tinforme_prevContent {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.Tinforme_prevItemTitle {
	margin: 0;
	font-size: 20px;
	font-weight: 900;
	color: #111;
	line-height: 1.2;
}

.Tinforme_prevItemText {
	margin: 0;
	color: rgba(0, 0, 0, 0.68);
	line-height: 1.55;
	font-size: 14px;
}

/* Botón */
.Tinforme_prevBtn {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 11px 16px;
	border-radius: 16px;
	font-weight: 900;
	text-decoration: none;
	background: #e51f45;
	color: #fff;
	box-shadow: 0 14px 24px rgba(229, 31, 69, 0.22);
	transition:
		transform 0.2s ease,
		filter 0.2s ease;
}

.Tinforme_prevBtn:hover {
	transform: translateY(-2px);
	filter: brightness(0.96);
}

/* Dot centrado sobre la línea */
.Tinforme_prevDot {
	position: absolute;
	left: 50%;
	top: 26px;
	transform: translateX(-50%);
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: #e51f45;
	box-shadow: 0 0 0 6px rgba(229, 31, 69, 0.14);
	display: grid;
	place-items: center;
	z-index: 2;
}

.Tinforme_prevDotNum {
	color: #fff;
	font-weight: 900;
	font-size: 12px;
	letter-spacing: 0.06em;
}

/* Alternancia */
/* Impares: card a la izquierda */
.Tinforme_prevItem:nth-child(odd) .Tinforme_prevCard {
	grid-column: 1;
	justify-self: end;
	margin-right: 26px; /* separa de la línea */
}

/* Pares: card a la derecha */
.Tinforme_prevItem:nth-child(even) .Tinforme_prevCard {
	grid-column: 2;
	justify-self: start;
	margin-left: 26px; /* separa de la línea */
}

/* Hover */
.Tinforme_prevCard {
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		filter 0.25s ease;
}
.Tinforme_prevItem:hover .Tinforme_prevCard {
	transform: translateY(-3px);
	box-shadow: 0 22px 46px rgba(0, 0, 0, 0.14);
}

/* ===========================
Responsive
=========================== */

/* Cuando no hay espacio para alternar: apilar (tablet/móvil) */
@media (max-width: 991px) {
	/* Línea pasa al lado izq */
	.Tinforme_prevTimeline::before {
		left: 12px;
		transform: none;
	}

	/* Ya no necesitamos empujar tanto todo el item */
	.Tinforme_prevItem {
		grid-template-columns: 1fr;
		padding-left: 0; /* <- quitamos el empuje */
	}

	/* Dot sigue alineado a la línea */
	.Tinforme_prevDot {
		left: 12px;
		transform: none;
		top: 18px;
	}

	/* ✅ Card centrada en breakpoint 991 */
	.Tinforme_prevItem:nth-child(odd) .Tinforme_prevCard,
	.Tinforme_prevItem:nth-child(even) .Tinforme_prevCard {
		grid-column: 1;
		justify-self: center; /* <- centra en la columna */
		margin: 0 auto; /* <- centra visualmente */
		width: min(500px, 92%); /* <- evita que quede muy ancho */
	}

	/* Para que el dot no se monte sobre la card */
	.Tinforme_prevCard {
		margin-left: 34px; /* deja “respiro” por la línea/dot */
	}
}

/* Mobile: imagen 190px, texto debajo */
@media (max-width: 575px) {
	.Tinforme_prevCard {
		grid-template-columns: 1fr;
		max-width: 100%;
	}

	.Tinforme_prevThumb {
		width: 190px; /* requerido */
		height: 190px;
		margin: 14px auto 0; /* centrada */
		border-radius: 18px;
		overflow: hidden;
	}

	.Tinforme_prevThumb img {
		padding: 10px;
	}

	.Tinforme_prevContent {
		padding: 14px;
	}

	.Tinforme_prevBtn {
		width: 100%;
		align-self: stretch;
	}
}

/*colores alternos para sliders */
.cBlanco {
	color: #fff !important;
}

/* ============================================
Sección: Galería (clon home-target)
Reglas aisladas con prefijo Tinforme_galeria
============================================ */
.Tinforme_galeria {
	position: relative;
	padding: 86px 0 108px;
	background: #f3f0ee;
	overflow: hidden;
}

.Tinforme_galeria::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	height: 300px;
	background: #e4dedb;
	transform: skew(-20deg, 0deg);
	transform-origin: left bottom;
}

.Tinforme_galeriaWrap {
	position: relative;
	z-index: 1;
	width: min(1240px, 92%);
	margin: 0 auto;
}

.Tinforme_galeriaTitle {
	margin: 0 0 36px;
	font-size: clamp(36px, 5.2vw, 78px);
	font-weight: 300;
	line-height: 0.92;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #111;
}

.Tinforme_galeriaLine {
	display: block;
}

.Tinforme_galeriaLineSub {
	color: #9e877f;
}

.Tinforme_galeriaLineMask {
	display: block;
	overflow: hidden;
}

.Tinforme_galeriaGrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}

.Tinforme_galeriaCol {
	min-width: 0;
}

.Tinforme_galeriaCard {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding-top: 45px;
	text-decoration: none;
	color: #111;
}

.Tinforme_galeriaCta {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	width: 90px;
	height: 90px;
	margin: auto;
	border-radius: 999px;
	border: 0;
	background: #000;
	cursor: pointer;
	transition: background-color 0.6s ease;
}

.Tinforme_galeriaCta::before,
.Tinforme_galeriaCta::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	background: #fff;
}

.Tinforme_galeriaCta::before {
	width: 1px;
	height: 40px;
}

.Tinforme_galeriaCta::after {
	width: 40px;
	height: 1px;
}

.Tinforme_galeriaCardBody {
	height: 100%;
	padding: 70px 45px 40px;
	background: #fff;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}

.Tinforme_galeriaCardTitle {
	padding-bottom: 10px;
	text-align: center;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.42em;
	color: #111;
}

.Tinforme_galeriaCardSwiper {
	position: relative;
}

.Tinforme_galeriaCardSwiper::after {
	content: '';
	display: block;
	padding-top: 120%;
}

.Tinforme_galeriaCardSwiper .swiper-container {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.Tinforme_galeriaCardSwiper .swiper-slide {
	height: 100%;
}

.Tinforme_galeriaMediaBtn {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: zoom-in;
}

.Tinforme_galeriaMediaBtn:focus-visible,
.Tinforme_galeriaCta:focus-visible {
	outline: 2px solid #111;
	outline-offset: 3px;
}

.Tinforme_galeriaImage {
	width: 100%;
	height: 100%;
	background-color: #f2f2f2;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: contain;
}

/* Interruptor por imagen: crop (cover centrado) */
.Tinforme_galeriaImage[data-tinforme-fit='crop'] {
	background-size: cover;
}

.Tinforme_galeriaCard:hover .Tinforme_galeriaCta {
	background: #9e877f;
}

.Tinforme_galeria [data-tinforme-galeria-item='fadeInUp.parallax'] {
	will-change: transform, opacity;
}

@media (max-width: 1199px) {
	.Tinforme_galeriaCardBody {
		padding: 66px 28px 30px;
	}
}

@media (max-width: 991px) {
	.Tinforme_galeria {
		padding: 64px 0 78px;
	}

	.Tinforme_galeria::before {
		height: 190px;
	}

	.Tinforme_galeriaTitle {
		margin-bottom: 26px;
	}

	.Tinforme_galeriaGrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
	}

	.Tinforme_galeriaCta {
		width: 74px;
		height: 74px;
	}

	.Tinforme_galeriaCta::before {
		height: 26px;
	}

	.Tinforme_galeriaCta::after {
		width: 26px;
	}

	.Tinforme_galeriaCardBody {
		padding: 56px 18px 20px;
	}

	.Tinforme_galeriaCardTitle {
		font-size: 15px;
		letter-spacing: 0.24em;
	}
}

@media (max-width: 640px) {
	.Tinforme_galeriaGrid {
		grid-template-columns: 1fr;
	}
}