/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

#header {
	height: 90px;
	padding: 25px 0;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	transition: all 0.5s;
	z-index: 998;
}
#header.header-interna {
	background: rgb(125, 125, 125);
	height: 90px;
	padding: 25px 0;
	transition: all 0.5s;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 998;
}
#header.header-interna2 {
	background: rgba(0, 0, 0, 0.53);
	height: 90px;
	padding: 25px 0;
	transition: all 0.5s;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 998;
}

/* Header visible al hacer scroll (fixed para no desaparecer) */
#header.header-scrolled,
#header.header-fixed {
	background: rgba(37, 37, 37, 0.7);
	height: 70px;
	padding: 15px 0;
	transition: all 0.5s;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1002;
}

/* Botón: no usar sticky; su posición se controla por media-queries */
#mobile-nav-toggle.menu-scrolled {
	/* intencionalmente vacío */
}

/* Logo */
#header #logo h1 {
	font-size: 36px;
	margin: 0;
	padding: 6px 0;
	line-height: 1;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
}
#header #logo h1 span {
	color: #ff5800;
}
#header #logo h1 a,
#header #logo h1 a:hover {
	color: #fff;
}
#header #logo img {
	padding: 0;
	margin: 0;
	max-height: 40px;
}
#header #logo {
	font-size: 24px;
}
#header #logo a {
	color: #fff !important;
	text-decoration: none;
}
#header #logo a:hover {
	color: #ff5800 !important;
	text-decoration: none;
}

/* Contenedor de nav (no scrolleado) */
#header #nav-menu-container.nav-scrolled {
	background: rgba(37, 37, 37, 0.5);
	border-radius: 5px;
	box-shadow: 2px 2px 2px #373737;
}

/*--------------------------------------------------------------
# Navigation Menu (desktop)
--------------------------------------------------------------*/

#menu-central {
	text-align: center;
	padding: 5px 5px 15px;
	border-bottom: 2px solid #d7d7d7;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 600;
}
#menu-central .barrita {
	padding: 0 10px;
	color: #ccc;
}

.nav-menu,
.nav-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav-menu ul {
	position: absolute;
	display: none;
	top: 100%;
	left: 0;
	z-index: 99;
}
.nav-menu li {
	position: relative;
	white-space: nowrap;
}
.nav-menu > li {
	float: left;
}

.nav-menu li:hover > ul,
.nav-menu li.sfHover > ul {
	display: block;
}
.nav-menu ul ul {
	top: 0;
	left: 100%;
}
.nav-menu ul li {
	min-width: 180px;
}

/* Ícono de dropdown para items con submenú */
.nav-menu .menu-item-has-children > a i {
	margin-left: 5px;
	font-size: 12px;
	transition: transform 0.3s ease;
}

.nav-menu .menu-item-has-children:hover > a i,
.nav-menu .menu-item-has-children.dvi_submenu_active > a i {
	transform: rotate(180deg);
}

#nav-menu-container {
	float: right;
	margin: 0;
	position: relative;
}

.nav-menu a {
	padding: 8px 15px;
	text-decoration: none;
	display: inline-block;
	color: rgba(224, 224, 224, 0.9);
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 14px;
	outline: none;
}
.nav-menu .menu-active a,
.nav-menu a:hover {
	color: #fff;
}

.nav-menu > li {
	margin-left: 4px;
	padding: 0 16px;
}

.nav-menu > li > a:before {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #ff5800;
	visibility: hidden;
	transition: all 0.3s ease-in-out;
}
.nav-menu a:hover:before,
.nav-menu li:hover > a:before,
.nav-menu .menu-active > a:before {
	visibility: visible;
	width: 100%;
}

.nav-menu li.btn-extra a {
	color: #fff;
	background: #5f5f5f;
	padding: 7px 7px;
	border: 2px solid #5f5f5f;
	transition: all 0.3s ease-in-out;
	font-weight: 600;
	margin-left: 8px;
	margin-top: 2px;
	line-height: 1;
	font-size: 13px;
}
.nav-menu li.btn-extra a:hover {
	background: none;
}
.nav-menu li.btn-extra:hover a:before,
.nav-menu li.btn-extra.menu-active a:before {
	visibility: hidden;
}

/* Estilo del submenú Desktop - Fondo negro 70% transparencia */
.nav-menu ul {
	margin: 4px 0 0;
	padding: 10px;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
	background: rgba(0, 0, 0, 0.7); /* Negro con 70% de opacidad */
	backdrop-filter: blur(10px);
	border-radius: 3px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	/* Mantener visible al mover mouse sobre submenú */
	pointer-events: auto;
}
.nav-menu ul li {
	transition: 0.3s;
}
.nav-menu ul li a {
	padding: 10px 15px;
	color: #fff; /* Texto blanco */
	transition: 0.3s;
	display: block;
	font-size: 13px;
	text-transform: none;
	border-radius: 3px;
}
/* Hover en submenú - Fondo naranja con texto blanco */
.nav-menu ul li:hover > a {
	background: #ff5800; /* Fondo naranja */
	color: #fff; /* Texto blanco */
}
.nav-menu ul ul {
	margin: 0;
}

/* Transición suave para mostrar/ocultar submenú */
.nav-menu > li > ul {
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease;
}
.nav-menu > li:hover > ul,
.nav-menu > li.dvi_submenu_active > ul {
	opacity: 1;
	visibility: visible;
	display: block;
}

/*--------------------------------------------------------------
# Mobile Nav Toggle (botón hamburguesa DVI) - ULTRA ESPECÍFICO
--------------------------------------------------------------*/

#header .dvi_mobile_nav_toggle {
	position: absolute !important;
	right: 0;
	top: 0;
	z-index: 999;
	margin: 15px 15px 0 0;
	border: 0;
	background: none;
	font-size: 24px;
	display: none !important; /* Oculto por defecto */
	transition: all 0.4s;
	outline: none;
	cursor: pointer;
}
#header .dvi_mobile_nav_toggle i {
	color: #fff;
}

/*--------------------------------------------------------------
# Mobile Nav DVI (panel off-canvas) - ULTRA ESPECÍFICO
--------------------------------------------------------------*/

.dvi_mobile_nav_panel {
	position: fixed !important;
	top: 0;
	bottom: 0;
	left: -260px;
	width: 260px;
	padding-top: 18px;
	overflow-y: auto;
	background: rgba(32, 32, 32, 0.98);
	transition: 0.4s;
	z-index: 1003;
	display: none !important; /* Oculto por defecto */
}
.dvi_mobile_nav_panel ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
.dvi_mobile_nav_panel ul li {
	position: relative;
}
.dvi_mobile_nav_panel ul li a {
	color: #fff;
	font-size: 17px;
	overflow: hidden;
	padding: 10px 22px 10px 15px;
	position: relative;
	text-decoration: none;
	width: 100%;
	display: block;
	outline: none;
}
.dvi_mobile_nav_panel ul li a:hover {
	color: #ff5800;
}

/* Submenús móviles - Indentación y estilo */
.dvi_mobile_nav_panel ul li li {
	padding-left: 0;
}
.dvi_mobile_nav_panel ul li li a {
	padding-left: 35px;
	font-size: 15px;
	background: rgba(0, 0, 0, 0.3);
}
.dvi_mobile_nav_panel ul li li a:hover {
	background: #ff5800;
	color: #fff;
}

/* Ícono de toggle para items con submenú en móvil */
.dvi_mobile_nav_panel ul .menu-has-children > a {
	padding-right: 45px;
	position: relative;
}

.dvi_mobile_nav_panel ul .menu-has-children > i {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 99;
	padding: 15px;
	cursor: pointer;
	color: #fff;
	font-size: 14px;
	pointer-events: none;
}
.dvi_mobile_nav_panel ul .menu-has-children.dvi_submenu_open > i {
	color: #ff5800;
	transform: rotate(180deg);
	transition:
		transform 0.3s ease,
		color 0.3s ease;
}

.dvi_mobile_nav_panel ul .menu-has-children > i {
	transition:
		transform 0.3s ease,
		color 0.3s ease;
}

/* Submenú colapsado por defecto */
.dvi_mobile_nav_panel ul .menu-has-children > ul {
	display: none;
	background: rgba(0, 0, 0, 0.2);
	margin: 5px 0;
	border-left: 3px solid #ff5800;
}

.dvi_mobile_nav_panel ul .menu-item-active {
	color: #ff5800;
}

.dvi_mobile_body_overly {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(32, 32, 32, 0.98);
	display: none !important; /* Oculto por defecto */
	z-index: 1002;
}

/* Clases de estado específicas para DVI */
body.dvi_mobile_nav_active,
#mainweb.dvi_mobile_nav_active {
	overflow: hidden;
}
body.dvi_mobile_nav_active .dvi_mobile_nav_panel,
#mainweb.dvi_mobile_nav_active .dvi_mobile_nav_panel {
	left: 0 !important;
	display: block !important;
}
body.dvi_mobile_nav_active #header .dvi_mobile_nav_toggle,
#mainweb.dvi_mobile_nav_active #header .dvi_mobile_nav_toggle {
	color: #fff;
}

/*--------------------------------------------------------------
# Breakpoints / Responsive
--------------------------------------------------------------*/

@media (max-width: 1199px) {
	#header .container {
		max-width: 100%;
	}
	.nav-menu a {
		padding: 8px 4px;
	}
}

/* Logo izquierda + hamburguesa derecha en mobile */
@media (max-width: 991px) {
	#header {
		background: rgba(32, 32, 32, 0.48);
		height: 60px;
		padding: 15px 0;
		transition: all 0.5s;
	}
	#header .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		text-align: initial;
	}
	#header #logo {
		flex: 0 0 auto;
		margin-left: 10px;
		text-align: left;
	}
	#header #logo a,
	#header #logo img {
		display: block;
	}
	#header #nav-menu-container {
		display: none;
	}

	/* MOSTRAR botón hamburguesa DVI en mobile */
	#header .dvi_mobile_nav_toggle {
		display: block !important; /* Forzar display */
		position: absolute !important;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
		margin: 0;
		z-index: 1001;
	}
	#header .dvi_mobile_nav_toggle.menu-scrolled {
		position: absolute !important;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
	}

	/* Panel ocupa pantalla completa en mobile */
	.dvi_mobile_nav_panel {
		width: 100vw !important;
		left: -100vw !important;
		background: rgba(20, 20, 20, 0.96);
		backdrop-filter: saturate(120%) blur(2px);
		padding-top: 18px;
		padding-bottom: env(safe-area-inset-bottom, 16px);
		transition: left 0.35s ease;
	}
	body.dvi_mobile_nav_active .dvi_mobile_nav_panel,
	#mainweb.dvi_mobile_nav_active .dvi_mobile_nav_panel {
		left: 0 !important;
		display: block !important;
	}

	.dvi_mobile_nav_panel ul {
		padding: 8px 14px 14px;
		margin: 0;
	}
	.dvi_mobile_nav_panel ul li {
		margin: 2px 0;
		text-align: center;
	}
	.dvi_mobile_nav_panel ul li a {
		width: 100%;
		min-height: 44px;
		padding: 12px 18px;
		font-size: 16px;
		line-height: 1.25;
		border-radius: 10px;
		background: transparent;
		color: #f3f3f3;
		transition:
			background-color 0.18s ease,
			color 0.18s ease,
			transform 0.18s ease;
	}
	.dvi_mobile_nav_panel ul li:not(:last-child) a {
		box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
	}
	.dvi_mobile_nav_panel ul li a:hover,
	.dvi_mobile_nav_panel ul li a:focus-visible {
		background: rgba(255, 255, 255, 0.1);
		color: #ff5800;
		outline: 2px solid rgba(255, 255, 255, 0.25);
		outline-offset: 2px;
	}
	.dvi_mobile_nav_panel ul .menu-item-active > a {
		background: rgba(255, 88, 0, 0.16);
		color: #ffae7a;
	}

	/* Submenús en móvil - ajuste específico */
	.dvi_mobile_nav_panel ul li li a {
		padding-left: 35px;
		font-size: 15px;
		border-radius: 8px;
		background: rgba(0, 0, 0, 0.3);
		margin: 3px 0;
	}
	.dvi_mobile_nav_panel ul li li a:hover {
		background: #ff5800;
		color: #fff;
	}

	.dvi_mobile_nav_panel ul .menu-has-children > i {
		right: 6px;
		padding: 12px;
	}
}

/* Hover con puntero en móviles con hover disponible */
@media (hover: hover) and (max-width: 991px) {
	.dvi_mobile_nav_panel ul li a:hover {
		transform: translateX(2px);
	}
}

/* Motion reduce */
@media (prefers-reduced-motion: reduce) {
	.dvi_mobile_nav_panel,
	.dvi_mobile_nav_panel ul li a {
		transition: none !important;
	}
}

/*--------------------------------------------------------------
# Compensación de layout (cuando header está fijo)
--------------------------------------------------------------*/

#mainweb:has(#header.header-scrolled),
#mainweb:has(#header.header-fixed) {
	padding-top: 70px;
}

@supports not (selector(:has(*))) {
	/* Activa si detectas solapamiento en navegadores sin :has */
}

/* Mejora de rendimiento del header en transición */
#header {
	will-change: transform, background-color;
}

/*--------------------------------------------------------------
# Botón "✕ Cerrar" dentro del menú móvil DVI
--------------------------------------------------------------*/

@media (max-width: 991px) {
	.dvi_mobile_nav_panel .dvi_close_item {
		position: sticky;
		top: 0;
		z-index: 1;
		margin: 0 0 8px 0;
		box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
	}

	.dvi_mobile_nav_panel .dvi_close_btn {
		display: block;
		width: 100%;
		max-width: 65px;
		margin: 10px auto;
		min-height: 35px;
		padding: 10px 25px;
		text-align: left;
		font-weight: bold;
		font-size: 14px;
		color: #fff;
		background: rgba(220, 53, 69, 0.2);
		border: 0;
		border-radius: 10px;
		cursor: pointer;
		transition:
			background-color 0.18s ease,
			transform 0.18s ease,
			box-shadow 0.18s ease;
	}

	.dvi_mobile_nav_panel .dvi_close_btn::first-letter {
		margin-right: 25px;
		display: inline-block;
	}

	.dvi_mobile_nav_panel .dvi_close_btn:hover,
	.dvi_mobile_nav_panel .dvi_close_btn:focus-visible {
		background: rgba(220, 53, 69, 0.65);
		outline: 2px solid rgba(255, 255, 255, 0.25);
		outline-offset: 2px;
		transform: translateY(-1px);
	}

	.dvi_mobile_nav_panel {
		z-index: 10010 !important;
	}
	.dvi_mobile_body_overly {
		z-index: 10005 !important;
	}

	body.dvi_mobile_nav_active #header .dvi_mobile_nav_toggle,
	#mainweb.dvi_mobile_nav_active #header .dvi_mobile_nav_toggle {
		position: fixed !important;
		top: 16px;
		right: 16px;
		transform: none;
		z-index: 11000;
	}
}
/* ============================================
SECCIÓN: Programas y Proyectos (dvi_pp)
============================================ */
.dvi_pp {
	--dvi-pp-bg: #111314;
	--dvi-pp-panel: #17191a;
	--dvi-pp-text: #e9eef2;
	--dvi-pp-text-dim: #c9d1d9;
	--dvi-pp-border: #2a2e31;
	--dvi-pp-accent: #ff6a1a; /* Naranja UAEH */
	--dvi-pp-accent-600: #ff7e3b;
	--dvi-pp-radius: 16px;
	--dvi-pp-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
	--dvi-pp-timeline-w: 4px;
	--dvi-pp-card-gap: clamp(16px, 2.4vw, 24px);
	color: var(--dvi-pp-text);
	background: #2b2b2b;
}
.dvi_pp_h3 {
	font-size: clamp(22px, 2.6vw + 8px, 40px);
	line-height: 1.15;
	margin: 0 0 clamp(18px, 2.8vw, 28px) 0;
	color: #0f0f0f;
}

/* Layout base */
.dvi_pp_section {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(20px, 2vw, 28px);
	padding: clamp(16px, 3vw, 32px);
	position: relative;
}

/* Media / Encabezado */
.dvi_pp_media {
	position: relative;
	overflow: hidden;
	border-radius: calc(var(--dvi-pp-radius) + 8px);
	background: #0e1011;
	box-shadow: var(--dvi-pp-shadow);
	isolation: isolate;
}
.dvi_pp_media-img {
	width: 100%;
	height: clamp(220px, 42vw, 420px);
	object-fit: cover;
	display: block;
	transform: scale(1.02);
	transition: transform 0.8s ease;
	filter: saturate(1.05) contrast(1.02);
}
.dvi_pp_media:hover .dvi_pp_media-img {
	transform: scale(1.06);
}
.dvi_pp_heading {
	position: absolute;
	inset: auto 0 0 0;
	margin: 0;
	padding: clamp(16px, 4vw, 40px) clamp(16px, 4vw, 40px) clamp(20px, 5vw, 56px);
	font-size: clamp(28px, 4.8vw, 48px);
	font-weight: 800;
	line-height: 1.15;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.7) 60%,
		rgba(0, 0, 0, 0.9) 100%
	);
}

/* Timeline + Cards */
.dvi_pp_timeline {
	position: relative;
	display: grid;
	gap: var(--dvi-pp-card-gap);
	padding-inline: clamp(4px, 1vw, 8px);
}

/* Línea vertical del timeline (mobile y desktop) */
.dvi_pp_timeline::before {
	content: '';
	position: absolute;
	left: 20px;
	top: 0;
	bottom: 0;
	width: var(--dvi-pp-timeline-w);
	background: linear-gradient(180deg, var(--dvi-pp-accent), transparent);
	border-radius: 999px;
	opacity: 0.8;
}

/* Card */
.dvi_pp_card {
	position: relative;
	margin-left: 44px; /* deja espacio para el timeline y el punto */
	background: var(--dvi-pp-panel);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--dvi-pp-radius);
	padding: clamp(16px, 2.2vw, 24px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.04),
		0 8px 24px rgba(0, 0, 0, 0.35);
	transition:
		transform 0.45s ease,
		border-color 0.35s ease,
		box-shadow 0.35s ease;
	will-change: transform;
	outline: none;
}

/* Punto naranja y contorno sutil alrededor de la card */
.dvi_pp_card-deco {
	position: absolute;
	left: -34px;
	top: 28px;
	width: 14px;
	height: 14px;
	background: var(--dvi-pp-accent);
	border-radius: 50%;
	box-shadow: 0 0 0 6px rgba(255, 106, 26, 0.15);
}
.dvi_pp_card::after {
	/* contorno ancho como en la ref */
	content: '';
	position: absolute;
	inset: -8px;
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: calc(var(--dvi-pp-radius) + 6px);
	pointer-events: none;
}

/* Headings y texto */
.dvi_pp_card-subtitle {
	font-size: clamp(16px, 2.2vw, 20px);
	font-weight: 700;
	margin: 0 0 8px 0;
	text-align: right; /* similar a maqueta */
	color: var(--dvi-pp-text);
	opacity: 0.9;
}
.dvi_pp_card-kicker {
	font-weight: 700;
	margin: 0 0 6px 0;
	color: var(--dvi-pp-text);
}
.dvi_pp_card-text {
	margin: 0;
	color: var(--dvi-pp-text-dim);
	line-height: 1.6;
}

/* CTA */
.dvi_pp_card-cta {
	margin-top: clamp(12px, 2vw, 16px);
}
.dvi_pp_btn {
	--btn-pad-y: 12px;
	--btn-pad-x: 18px;
	display: inline-flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	padding: var(--btn-pad-y) var(--btn-pad-x);
	border: 1px solid var(--dvi-pp-accent);
	color: var(--dvi-pp-accent);
	text-decoration: none;
	font-weight: 700;
	letter-spacing: 0.2px;
	transform: translateZ(0);
	transition:
		transform 0.28s ease,
		background-color 0.25s ease,
		color 0.25s ease,
		border-color 0.25s ease;
}
.dvi_pp_btn:focus-visible {
	outline: 2px solid var(--dvi-pp-accent);
	outline-offset: 2px;
}
.dvi_pp_btn:hover,
.dvi_pp_btn:focus-visible {
	background: var(--dvi-pp-accent);
	color: #fff;
	transform: scale(1.035);
	border-color: var(--dvi-pp-accent-600);
}

/* Icono flecha */
.dvi_pp_btn-icon {
	display: inline-block;
	transform: translateX(0);
	transition: transform 0.25s ease;
}
.dvi_pp_btn:hover .dvi_pp_btn-icon,
.dvi_pp_btn:focus-visible .dvi_pp_btn-icon {
	transform: translateX(2px);
}

/* Interacciones: zoom-in/zoom-out en cards */
.dvi_pp_card:hover {
	transform: translateY(-2px) scale(1.02);
	border-color: rgba(255, 255, 255, 0.16);
	box-shadow: 0 12px 36px rgba(255, 106, 26, 0.31);
}
.dvi_pp_card:active {
	transform: scale(0.995);
}
/* Crossfade suave al cambiar src */
.dvi_pp .dvi_pp_media {
	position: relative;
}
.dvi_pp .dvi_pp_media-img {
	transition:
		opacity 0.36s ease,
		transform 0.8s ease;
	opacity: 1;
}
.dvi_pp .dvi_pp_media-img.is-changing {
	opacity: 0; /* fade-out breve antes de cambiar */
	transform: scale(1.02); /* leve zoom para dar “aparición” */
}

/* (opcional) marcar visualmente la card activa con borde/acento */
.dvi_pp .dvi_pp_card[aria-current='true'] {
	border-color: rgba(255, 106, 26, 0.45);
	box-shadow: 0 12px 36px rgba(255, 106, 26, 0.28);
}

/* ======= Vista de ESCRITORIO (referencia imagen 1) ======= */
@media (min-width: 992px) {
	.dvi_pp_section {
		grid-template-columns: 1.05fr 1.2fr; /* imagen izquierda, cards derecha */
		align-items: start;
		padding: clamp(24px, 3vw, 40px) clamp(24px, 4vw, 64px);
	}
	.dvi_pp_media {
		height: 100%;
		max-height: 820px;
	}
	.dvi_pp_media-img {
		height: 100%;
	}
	.dvi_pp_heading {
		position: absolute;
		background: none;
		padding: 0 0 25px;
		margin: 0px;
		/*! margin-bottom: clamp(12px, 1.2vw, 16px); */
		font-size: clamp(32px, 3.4vw, 52px);
		background: linear-gradient(
			180deg,
			rgba(0, 0, 0, 0) 0%,
			rgba(0, 0, 0, 0.7) 60%,
			rgba(0, 0, 0, 0.9) 100%
		);
	}
	/* Guía vertical al borde izquierdo de las cards (estilo maqueta escritorio) */
	.dvi_pp_timeline {
		padding-right: clamp(8px, 2vw, 12px);
		position: relative;
	}
	.dvi_pp_timeline::before {
		left: 32px;
		background: linear-gradient(
			180deg,
			var(--dvi-pp-accent),
			rgba(255, 106, 26, 0.05)
		);
	}
	.dvi_pp_card {
		margin-left: 60px;
	}
	.dvi_pp_card-deco {
		left: -44px;
		top: 36px;
	}
	.dvi_pp_card-subtitle {
		text-align: right;
	}
}

/* ======= Accesibilidad: respeta 'prefers-reduced-motion' ======= */
@media (prefers-reduced-motion: reduce) {
	.dvi_pp_media-img,
	.dvi_pp_card,
	.dvi_pp_btn,
	.dvi_pp_btn-icon {
		transition: none !important;
	}
}

/* ============================================
   SECCIÓN: Vínculate con la UAEH (dos filas alternadas)
   ============================================ */
.dvi_vinc {
	--dvi-vinc-accent: #ff5800; /* acento institucional */
	--dvi-vinc-dark: #2b0f17; /* panel oscuro fila 1 (ajústalo a tu paleta) */
	--dvi-vinc-dark-fg: #fff;
	--dvi-vinc-light: #0c1c39; /* panel oscuro/azul fila 1 mobile de referencia */
	--dvi-vinc-soft: #f2f2f2; /* panel claro fila 2 */
	--dvi-radius: 14px;

	padding: clamp(24px, 4vw, 48px) 0;
	background: #fff; /* ajusta fondo general si lo necesitas */
	color: #1b1b1b;
}

.dvi_vinc__wrap {
	width: min(1200px, 92%);
	margin: 0 auto;
	display: grid;
	gap: clamp(24px, 3vw, 40px);
}

/* ===== Fila base ===== */
.dvi_vinc__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(16px, 2.5vw, 32px);
	align-items: stretch;
	min-height: clamp(380px, 52vh, 520px);
}

/* Columnas */
.dvi_vinc__col {
	position: relative;
	border-radius: var(--dvi-radius);
	overflow: clip;
}

/* Paneles de texto */
.dvi_vinc__panel {
	padding: clamp(20px, 3.2vw, 32px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}
.dvi_vinc__panel--dark {
	background: var(--dvi-vinc-dark);
	color: var(--dvi-vinc-dark-fg);
}
.dvi_vinc__panel--light {
	background: #fff;
	color: #222;
	border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Imagen */
.dvi_vinc__figure {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transform: scale(1.01);
	transition: transform 0.4s ease;
}
.dvi_vinc__col--media:hover .dvi_vinc__figure {
	transform: scale(1.03);
}

/* Tipografía */
.dvi_vinc__title {
	font-size: clamp(26px, 2.2vw + 8px, 40px);
	line-height: 1.15;
	margin: 0 0 0.6rem 0;
}
.dvi_vinc__subtitle {
	font-size: clamp(22px, 1.2vw + 8px, 30px);
	line-height: 1.25;
	margin: 0 0 0.5rem 0;
}
.dvi_vinc__desc {
	font-size: clamp(15px, 0.2vw + 14px, 18px);
	line-height: 1.6;
	margin: 0.5rem 0 1.25rem 0;
	max-width: 60ch;
}

/* Botón primario */
.dvi_btn {
	--btn-accent: var(--dvi-vinc-accent);
	--btn-fg: #fff;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 12px 20px;
	border-radius: 12px;
	font-weight: 700;
	text-decoration: none;
	border: 2px solid color-mix(in srgb, var(--btn-accent) 60%, #fff 40%);
	color: var(--btn-fg);
	background: color-mix(in srgb, var(--btn-accent) 35%, transparent);
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		background-color 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease;
	width: fit-content;
}
.dvi_btn__ico {
	flex: 0 0 auto;
}
.dvi_btn:hover,
.dvi_btn:focus-visible {
	background: color-mix(in srgb, var(--btn-accent) 55%, transparent);
	border-color: color-mix(in srgb, var(--btn-accent) 80%, #fff 20%);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
	transform: translateY(-1px);
	outline: none;
}
.dvi_btn:active {
	transform: translateY(0);
}

/* Variante ghost (para panel claro) */
.dvi_btn--ghost {
	background: transparent;
	color: #111;
	border-color: rgba(0, 0, 0, 0.25);
}
.dvi_btn--ghost:hover,
.dvi_btn--ghost:focus-visible {
	color: #fff;
	background: var(--btn-accent);
	border-color: var(--btn-accent);
}

/* ===== Responsive ===== */
@media (max-width: 991px) {
	.dvi_vinc__row {
		grid-template-columns: 1fr;
		min-height: unset;
		gap: 12px;
	}

	/* Orden móvil: imagen arriba, texto abajo (en ambas filas) */
	.dvi_vinc__row--text-left .dvi_vinc__col--media {
		order: 0;
		min-height: 40vh;
	}
	.dvi_vinc__row--text-left .dvi_vinc__col--text {
		order: 1;
	}

	.dvi_vinc__row--text-right .dvi_vinc__col--media {
		order: 0;
		min-height: 40vh;
	}
	.dvi_vinc__row--text-right .dvi_vinc__col--text {
		order: 1;
	}

	.dvi_vinc__panel {
		border-radius: 12px;
	}
	.dvi_btn {
		width: 100%;
		justify-content: center;
		padding: 14px 18px;
	}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
	.dvi_vinc__figure,
	.dvi_btn {
		transition: none !important;
	}
}
/* ============================================
   SECCIÓN: Vínculate con la UAEH (dos filas alternadas)
   ============================================ */
.dvi_vinc {
	--dvi-vinc-accent: #ff5800; /* solo por si quieres usarlo después */
	--dvi-vinc-dark: #2b0f17; /* panel oscuro */
	--dvi-vinc-dark-fg: #ffffff;
	--dvi-vinc-light: #ffffff; /* panel claro */
	--dvi-vinc-light-fg: #1b1b1b;
	--dvi-radius: 0; /* bordes rectos para unión perfecta */
	background: #ffffff;
	color: #1b1b1b;
	padding: clamp(24px, 4vw, 48px) 0;
}

.dvi_vinc__wrap {
	width: min(1200px, 94%);
	margin: 0 auto;
}

/* Título fuera de filas */
.dvi_vinc__heading {
	font-size: clamp(22px, 2.6vw + 8px, 40px);
	line-height: 1.15;
	margin: 0 0 clamp(18px, 2.8vw, 28px) 0;
	color: #0f0f0f;
}

/* ===== Row base 100% sin separación ===== */
.dvi_vinc__row {
	display: grid;
	grid-template-columns: 60% 40%; /* distribución solicitada */
	gap: 0; /* SIN separación */
	min-height: clamp(380px, 56vh, 560px);
	margin-bottom: clamp(14px, 2vw, 20px);
}

.dvi_vinc__row--text-right {
	grid-template-columns: 40% 60%;
}

/* Columnas contiguas */
.dvi_vinc__col {
	position: relative;
	border-radius: var(--dvi-radius);
	overflow: clip;
}

/* Texto (panel) */
.dvi_vinc__panel {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(18px, 3.4vw, 36px);
}
.dvi_vinc__panel--dark {
	background: var(--dvi-vinc-dark);
	color: var(--dvi-vinc-dark-fg);
}
.dvi_vinc__panel--light {
	background: var(--dvi-vinc-light);
	color: var(--dvi-vinc-light-fg);
}

/* Imagen a cover */
.dvi_vinc__col--media {
	min-height: 280px;
}
.dvi_vinc__figure {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transform: scale(1.01);
	transition: transform 0.35s ease;
}
.dvi_vinc__col--media:hover .dvi_vinc__figure {
	transform: scale(1.03);
}

/* Tipografía */
.dvi_vinc__subtitle {
	font-size: clamp(22px, 1.1vw + 10px, 30px);
	line-height: 1.25;
	margin: 0 0 0.6rem 0;
}
.dvi_vinc__desc {
	font-size: clamp(15px, 0.25vw + 14px, 18px);
	line-height: 1.65;
	margin: 0.5rem 0 1.4rem 0;
	max-width: 70ch;
}

/* ===== Botón outline blanco (sin fondo) ===== */
.dvi_btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 12px 20px;
	border-radius: 12px;
	font-weight: 700;
	text-decoration: none;
	transition:
		background-color 0.18s ease,
		color 0.18s ease,
		border-color 0.18s ease,
		transform 0.18s ease;
	width: fit-content;
	line-height: 1;
}
.dvi_btn__ico {
	flex: 0 0 auto;
}

/* Variante que pediste */
.dvi_btn--outline-white {
	color: #ffffff;
	background: transparent;
	border: 2px solid #ffffff;
}
.dvi_btn--outline-white:hover,
.dvi_btn--outline-white:focus-visible {
	background: #ffffff;
	color: #000000;
	border-color: transparent; /* “sin bordes” al hacer rollover */
	transform: translateY(-1px);
	outline: none;
}
.dvi_btn--outline-white:active {
	transform: translateY(0);
}

/* ===== Responsive ===== */
@media (max-width: 991px) {
	.dvi_vinc__row,
	.dvi_vinc__row--text-right {
		grid-template-columns: 1fr; /* una sola columna */
		min-height: unset;
	}

	/* En móvil: imagen arriba, texto abajo en ambas filas */
	.dvi_vinc__row .dvi_vinc__col--media {
		order: 0;
		min-height: 42vh;
	}
	.dvi_vinc__row .dvi_vinc__col--text {
		order: 1;
	}

	.dvi_btn {
		width: 100%;
		justify-content: center;
		padding: 14px 18px;
	}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
	.dvi_vinc__figure,
	.dvi_btn {
		transition: none !important;
	}
}
/* ============================================
   SECCIÓN: Vínculate con la UAEH (dos filas alternadas) — Ajustes
   ============================================ */
.dvi_vinc {
	--dvi-vinc-dark: #2b0f17;
	--dvi-vinc-dark-fg: #ffffff;
	--dvi-vinc-light: #ffffff;
	--dvi-vinc-light-fg: #1b1b1b;
	background: #ffffff;
	color: #1b1b1b;
	padding: clamp(24px, 4vw, 48px) 0;
}

.dvi_vinc__wrap {
	width: 100%; /* 100% solicitado */
	margin: 0 auto;
}

/* Título fuera de filas */
.dvi_vinc__heading {
	font-size: clamp(22px, 2.6vw + 8px, 40px);
	line-height: 1.15;
	margin: 0 0 clamp(18px, 2.8vw, 28px) 0;
	color: #0f0f0f;
}

/* ===== Rows 100% SIN separación ===== */
.dvi_vinc__row {
	display: grid;
	grid-template-columns: 60% 40%; /* texto 60 / imagen 40 */
	gap: 0; /* sin separación entre columnas */
	min-height: clamp(380px, 56vh, 560px);
	margin: 0; /* sin separación entre rows */
}
.dvi_vinc__row--text-right {
	grid-template-columns: 40% 60%; /* imagen 40 / texto 60 */
}

.dvi_vinc__col {
	position: relative;
	border-radius: 0; /* cantos rectos, unión perfecta */
	overflow: clip;
}

/* Panel de texto */
.dvi_vinc__panel {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(18px, 3.4vw, 36px);
}
.dvi_vinc__panel--dark {
	background: var(--dvi-vinc-dark);
	color: var(--dvi-vinc-dark-fg);
}
.dvi_vinc__panel--light {
	background: var(--dvi-vinc-light);
	color: var(--dvi-vinc-light-fg);
}

/* Imagen cover */
.dvi_vinc__col--media {
	min-height: 280px;
}
.dvi_vinc__figure {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transform: scale(1.01);
	transition: transform 0.35s ease;
}
.dvi_vinc__col--media:hover .dvi_vinc__figure {
	transform: scale(1.03);
}

/* Tipografía */
.dvi_vinc__subtitle {
	font-size: clamp(22px, 1.1vw + 10px, 30px);
	line-height: 1.25;
	margin: 0 0 0.6rem 0;
}
.dvi_vinc__desc {
	font-size: clamp(15px, 0.25vw + 14px, 18px);
	line-height: 1.65;
	margin: 6.5rem 0 1.4rem 0;
	max-width: 70ch;
	text-align: justify;
}

/* ===== Botones: abajo-derecha, sin borde redondeado ===== */
.dvi_btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	border-radius: 0; /* sin bordes redondeados */
	font-weight: 700;
	text-decoration: none;
	line-height: 1;
	transition:
		background-color 0.18s ease,
		color 0.18s ease,
		border-color 0.18s ease,
		transform 0.18s ease;
	/* alineación abajo-derecha dentro del panel (flex container) */
	margin-top: auto; /* empuja hacia abajo */
	align-self: flex-end; /* alinea a la derecha */
	margin-right: clamp(14px, 2vw, 24px); /* respiración lateral */
	margin-bottom: clamp(14px, 2vw, 24px); /* respiración inferior */
}

/* Botón fila 1 (panel oscuro): borde blanco, texto blanco; hover invertido */
.dvi_btn--outline-white {
	color: #ffffff;
	background: transparent;
	border: 2px solid #ffffff;
}
.dvi_btn--outline-white:hover,
.dvi_btn--outline-white:focus-visible {
	background: #ffffff;
	color: #000000;
	border-color: transparent; /* sin borde en hover */
	transform: translateY(-1px);
	outline: none;
}

/* Botón fila 2 (panel claro): borde negro y texto negro; hover invertido con borde blanco */
.dvi_btn--outline-black {
	color: #000000;
	background: transparent;
	border: 2px solid #000000;
}
.dvi_btn--outline-black:hover,
.dvi_btn--outline-black:focus-visible {
	background: #000000;
	color: #ffffff;
	border-color: #ffffff; /* borde blanco en hover */
	transform: translateY(-1px);
	outline: none;
}

/* ===== Responsive ===== */
@media (max-width: 991px) {
	.dvi_vinc__row,
	.dvi_vinc__row--text-right {
		grid-template-columns: 1fr; /* una columna en móvil */
		min-height: unset;
	}

	/* Imagen arriba, texto abajo en ambas filas */
	.dvi_vinc__row .dvi_vinc__col--media {
		order: 0;
		min-height: 42vh;
	}
	.dvi_vinc__row .dvi_vinc__col--text {
		order: 1;
	}

	/* Botón a lo ancho en móvil, manteniendo margen de respiración */
	.dvi_btn {
		width: calc(100% - clamp(14px, 2vw, 24px) * 2);
		margin-left: clamp(14px, 2vw, 24px);
		justify-content: center;
	}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
	.dvi_vinc__figure,
	.dvi_btn {
		transition: none !important;
	}
}
/* ============================================
   SECCIÓN: Noticias (scope estricto)
   ============================================ */

.dvi_scope-news.dvi_news {
	--dvi-news-accent: #ff5800;
	--dvi-news-bg: #fff;
	--dvi-news-fg: #121212;
	--dvi-news-radius: 18px;
	background: var(--dvi-news-bg);
	color: var(--dvi-news-fg);
	padding: clamp(24px, 4vw, 48px) 0;
}

.dvi_scope-news .dvi_news__wrap {
	width: min(1900px, 94%);
	margin: 0 auto;
}

.dvi_scope-news .dvi_news__heading {
	font-size: clamp(22px, 2.2vw + 10px, 36px);
	line-height: 1.15;
	margin: 0 0 clamp(16px, 2.2vw, 24px);
}

.dvi_scope-news .dvi_news__grid {
	display: grid;
	gap: clamp(12px, 1.5vw, 20px);
	grid-template-columns: repeat(1, 1fr);
}

/* 2 → 3 → 4 columnas */
@media (min-width: 600px) {
	.dvi_scope-news .dvi_news__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 992px) {
	.dvi_scope-news .dvi_news__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (min-width: 1280px) {
	.dvi_scope-news .dvi_news__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.dvi_scope-news .dvi_news__card {
	border-radius: 18px;
	overflow: clip;
	background: #f4f4f4;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
	transition:
		transform 0.24s ease,
		box-shadow 0.24s ease;
}
.dvi_scope-news .dvi_news__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

/* Media + overlay */
.dvi_scope-news .dvi_news__link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.dvi_scope-news .dvi_news__media {
	position: relative;
	aspect-ratio: 16/9;
	margin: 0;
}
.dvi_scope-news .dvi_news__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Overlay SIEMPRE visible + hover animado (solo dentro de noticias) */
.dvi_scope-news .dvi_news__overlay {
	position: absolute;
	inset: 0;
	display: grid;
	align-content: end;
	padding: clamp(12px, 1.6vw, 18px);
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.88) 0%,
		rgba(0, 0, 0, 0.65) 35%,
		rgba(0, 0, 0, 0.42) 65%,
		rgba(0, 0, 0, 0) 100%
	);
	color: #fff;
	opacity: 1;
	transition:
		opacity 0.28s ease,
		background-color 0.28s ease;
}

/* Meta y título (texto) */
.dvi_scope-news .dvi_news__overlay-meta {
	font-size: 0.9rem;
	letter-spacing: 0.08em;
	opacity: 0.9;
	margin-bottom: 0.25rem;
	transition:
		opacity 0.24s ease,
		transform 0.24s ease;
}
.dvi_scope-news .dvi_news__title {
	margin: 0 auto 15px;
	line-height: 1.25;
	/*! max-width: 30ch; */
	font-size: clamp(1.5rem, 0.3vw + 1rem, 1.5rem);
	transition:
		opacity 0.24s ease,
		transform 0.24s ease;
}

/* Flecha (icono) en esquina por defecto */
.dvi_scope-news .dvi_news__cta {
	position: absolute;
	right: clamp(10px, 1.4vw, 14px);
	top: clamp(10px, 1.4vw, 14px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.16);
	backdrop-filter: saturate(120%) blur(2px);
	transform: translateY(0) scale(1);
	transition:
		transform 0.28s ease,
		background-color 0.22s ease,
		top 0.28s ease,
		left 0.28s ease,
		right 0.28s ease,
		bottom 0.28s ease;
	will-change: transform, top, left, right, bottom;
}
.dvi_scope-news .dvi_news__cta svg {
	display: block;
}

/* HOVER: oculta texto y centra icono con loop de pulso */
.dvi_scope-news .dvi_news__card:hover .dvi_news__overlay-meta,
.dvi_scope-news .dvi_news__card:hover .dvi_news__title {
	opacity: 0;
	transform: translateY(6px);
}
.dvi_scope-news .dvi_news__card:hover .dvi_news__cta {
	right: auto;
	top: 50%;
	left: 50%;
	bottom: auto;
	transform: translate(-50%, -50%) scale(1.2);
	background: rgba(255, 255, 255, 0.22);
	animation: dvi_news_pulse 1.4s ease-in-out 0.12s infinite;
}

/* Pie opcional */
.dvi_scope-news .dvi_news__meta {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 10px 12px 14px;
}

/* Keyframes y accesibilidad (scopeados) */
@keyframes dvi_news_pulse {
	0% {
		transform: translate(-50%, -50%) scale(1.2);
	}
	50% {
		transform: translate(-50%, -50%) scale(1.32);
	}
	100% {
		transform: translate(-50%, -50%) scale(1.2);
	}
}
@media (prefers-reduced-motion: reduce) {
	.dvi_scope-news .dvi_news__overlay,
	.dvi_scope-news .dvi_news__overlay-meta,
	.dvi_scope-news .dvi_news__title,
	.dvi_scope-news .dvi_news__cta,
	.dvi_scope-news .dvi_news__card {
		transition: none !important;
		animation: none !important;
	}
}
/* ===============================
   ¿Quiénes somos? / About (scope)
   =============================== */
.dvi_scope-about.dvi_about {
	background: #f3f5f6;
	color: #111;
}

.dvi_scope-about .dvi_about__wrap {
	width: min(1200px, 94%);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(16px, 2.5vw, 32px);
	/* CAMBIO: Eliminar align-items: center y usar align-items: start */
	align-items: start; /* Esto alinea ambos elementos al top */
	padding: clamp(20px, 4vw, 52px) 0;
}

/* Imagen */
.dvi_scope-about .dvi_about__media {
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	grid-column: 1/2;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
	/* CAMBIO: Asegurar que el contenedor muestre desde el top */
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	height: 100%;
}
.dvi_scope-about .dvi_about__media img {
	width: 100%;
	height: 100%;
	max-height: 110vh;
	object-fit: cover;
	/* CAMBIO CRUCIAL: Alinear la imagen al top del contenedor */
	object-position: top center; /* Esto fuerza la imagen a mostrarse desde arriba */
	display: block;
}

/* Columna derecha: texto + botones */
.dvi_scope-about .dvi_about__content {
	grid-column: 2/3;
	/* CAMBIO: Asegurar que el contenido también empiece desde el top */
	align-self: start;
	/*! padding-top: 100px; */
}
.dvi_scope-about .dvi_about__title {
	font-family: 'Georgia', serif;
	font-weight: 700;
	font-size: clamp(28px, 3.4vw, 56px);
	line-height: 1.05;
	margin: 4em 0 0.6em;
}
.dvi_scope-about .dvi_about__lead {
	font-size: clamp(15px, 1vw, 18px);
	line-height: 1.7;
	margin: 0 0 1.2em;
	color: #222;
}

.dvi_scope-about .dvi_aboutTriggers {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Botones */
.dvi_scope-about .dvi_btn {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.9rem 1.1rem;
	border-radius: 999px;
	font-weight: 700;
	border: 2px solid #111;
	cursor: pointer;
	transition:
		transform 0.15s ease,
		background-color 0.2s ease,
		color 0.2s ease;
}
.dvi_scope-about .dvi_btn--solid {
	background: #111;
	color: #fff;
}
.dvi_scope-about .dvi_btn--solid:hover {
	transform: translateY(-1px);
	background: #000;
}
.dvi_scope-about .dvi_btn--ghost {
	background: transparent;
	color: #111;
}
.dvi_scope-about .dvi_btn--ghost:hover {
	transform: translateY(-1px);
	background: #111;
	color: #fff;
}

/* Responsive */
@media (max-width: 900px) {
	.dvi_scope-about .dvi_about__wrap {
		grid-template-columns: 1fr;
		/* Mantener alineación al top en móvil */
		align-items: start;
	}
	.dvi_scope-about .dvi_about__media {
		grid-column: 1/-1;
		max-height: 42vh;
	}
	.dvi_scope-about .dvi_about__content {
		grid-column: 1/-1;
	}
}
/* ===============================
   MODAL About (sin tabs funcionales)
   =============================== */
.dvi_scope-about .dvi_aboutModal {
	max-width: min(920px, 92vw);
	padding: 10px 10px 6px;
}
.dvi_scope-about .dvi_aboutTabs {
	display: flex;
	gap: 18px;
	align-items: center;
	margin: 0 0 16px;
}
.dvi_scope-about .dvi_aboutTab {
	position: relative;
	border: 0;
	background: transparent;
	color: #6a6a6a;
	font:
		600 16px/1.2 'Montserrat',
		system-ui,
		sans-serif;
	padding: 12px 18px;
	pointer-events: none; /* ya no son clickeables */
}
.dvi_scope-about .dvi_aboutTab--active {
	color: #fff;
	background: #222;
	clip-path: polygon(0 0, 88% 0, 100% 100%, 0% 100%);
	padding-right: 34px;
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}
.dvi_scope-about .dvi_aboutPane--active {
	display: block;
}
.dvi_scope-about .dvi_aboutContent {
	color: #1b1b1b;
	line-height: 1.7;
	font-size: 16px;
	max-width: 78ch;
}
.dvi_scope-about .dvi_aboutContent p {
	margin: 0 0 1em;
	text-align: justify;
}
/* ============================================
   Acordeón (scope .dvi_scope-acc)
   ============================================ */
.dvi_scope-acc.dvi_acc {
	background: #f5f6f7;
	color: #1b1b1b;
}
.dvi_scope-acc .dvi_acc__wrap {
	width: min(1100px, 94%);
	margin: 0 auto;
	padding: clamp(28px, 4vw, 56px) 0;
}
.dvi_scope-acc .dvi_acc__heading {
	font-family: 'Georgia', serif;
	font-weight: 700;
	letter-spacing: 0.2px;
	font-size: clamp(30px, 3vw, 54px);
	line-height: 1.1;
	margin: 0 0 0.25em;
}
.dvi_scope-acc .dvi_acc__subnav {
	margin: 0.2rem 0 2.4rem;
	color: #666;
	font-weight: 700;
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}
.dvi_scope-acc .dvi_acc__subnav a {
	color: inherit;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.dvi_scope-acc .dvi_acc__subnav a:hover {
	border-color: #bbb;
}
.dvi_scope-acc .dvi_acc__subnav .is-active {
	border-color: #111;
	color: #111;
}

.dvi_scope-acc .dvi_acc__group {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
	overflow: hidden;
}
.dvi_scope-acc .dvi_acc__item {
	border-top: 1px solid #e6e6e6;
}
.dvi_scope-acc .dvi_acc__item:first-child {
	border-top: 0;
}

.dvi_scope-acc .dvi_acc__title {
	margin: 0;
}
.dvi_scope-acc .dvi_acc__trigger {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	text-align: left;
	background: #fff;
	color: #1b1b1b;
	border: 0;
	padding: 22px 64px 22px 16px;
	cursor: pointer;
	font-family: 'Georgia', serif;
	font-weight: 600;
	font-size: clamp(18px, 2.2vw, 24px);
	line-height: 1.25;
	position: relative;
}
.dvi_scope-acc .dvi_acc__trigger:hover {
	background: #fafafa;
}

/* Chevron circular a la derecha */
.dvi_scope-acc .dvi_acc__trigger::after {
	content: '';
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%) rotate(0deg);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px #cfcfcf;
	background: #fff;
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		background-color 0.25s ease;
}
.dvi_scope-acc .dvi_acc__trigger::before {
	content: '';
	position: absolute;
	right: 29px;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	width: 9px;
	height: 9px;
	border-right: 2px solid #333;
	border-bottom: 2px solid #333;
	transition: transform 0.25s ease;
	z-index: 2;
}
.dvi_scope-acc .dvi_acc__trigger[aria-expanded='true']::after {
	background: #111;
	box-shadow: inset 0 0 0 2px #111;
}
.dvi_scope-acc .dvi_acc__trigger[aria-expanded='true']::before {
	border-color: #fff;
	transform: translateY(-50%) rotate(225deg);
}

/* Panel (animación height/opacity manejada por JS) */
.dvi_scope-acc .dvi_acc__panel {
	overflow: hidden;
}
.dvi_scope-acc .dvi_acc__panel[hidden] {
	display: block;
	height: 0 !important;
	padding: 0 !important;
	overflow: hidden;
}
.dvi_scope-acc .dvi_acc__panel-inner {
	padding: 0 16px 20px 16px;
	max-width: 78ch;
	color: #333;
	line-height: 1.7;
	font-size: clamp(15px, 1vw, 18px);
}

/* Responsive */
@media (max-width: 640px) {
	.dvi_scope-acc .dvi_acc__trigger {
		padding: 18px 56px 18px 14px;
	}
	.dvi_scope-acc .dvi_acc__trigger::after {
		right: 12px;
		width: 32px;
		height: 32px;
	}
	.dvi_scope-acc .dvi_acc__trigger::before {
		right: 24px;
	}
}
/* ============================================
   SECCIÓN: Facts / Estadísticas (scope estricto)
   ============================================ */
.dvi_scope-facts.dvi_facts {
	--dvi-facts-bg: #0d0f12; /* fondo de sección */
	--dvi-facts-fg: #e9edf3; /* texto */
	--dvi-facts-accent: #ff7a70; /* número principal */
	--dvi-facts-card-bg: rgba(255, 255, 255, 0.02);
	--dvi-facts-card-br: 14px;
	--dvi-facts-grid-gap: clamp(12px, 2vw, 20px);
	background: var(--dvi-facts-bg);
	color: var(--dvi-facts-fg);
	padding: clamp(28px, 6vw, 72px) 0;
	position: relative;
}

.dvi_scope-facts .dvi_facts__wrap {
	width: min(1200px, 94%);
	margin: 0 auto;
}

.dvi_scope-facts .dvi_facts__heading {
	font-size: clamp(28px, 2.2vw + 14px, 48px);
	line-height: 1.1;
	text-align: center;
	margin: 0 0 clamp(20px, 3vw, 36px);
	color: #fff;
}

.dvi_scope-facts .dvi_facts__grid {
	display: grid;
	gap: var(--dvi-facts-grid-gap);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.dvi_scope-facts .dvi_facts__card {
	min-width: 220px; /* asegura tamaño mínimo */
	border-radius: var(--dvi-facts-card-br);
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: var(--dvi-facts-card-bg);
	backdrop-filter: blur(2px);
	padding: clamp(16px, 2.2vw, 22px);
	display: grid;
	align-content: center;
	gap: 8px;
	min-height: 150px;
	position: relative;
	overflow: hidden;
	transition:
		border-color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
	justify-content: center;
}
.dvi_scope-facts .dvi_facts__card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(
		120px 120px at 0% 0%,
		rgba(255, 255, 255, 0.08),
		transparent 60%
	);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.dvi_scope-facts .dvi_facts__card:hover {
	transform: translateY(-2px);
	border-color: rgba(255, 255, 255, 0.22);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
}
.dvi_scope-facts .dvi_facts__card:hover::after {
	opacity: 1;
}

.dvi_scope-facts .dvi_facts__icon {
	font-size: clamp(24px, 2.2vw, 34px);
	line-height: 1;
	color: #fff;
	opacity: 0.9;
	text-align: center;
}
.dvi_scope-facts .dvi_facts__label {
	margin: 0;
	font-weight: 700;
	opacity: 0.9;
	font-size: clamp(13px, 0.5vw + 12px, 16px);
}
.dvi_scope-facts .dvi_facts__num {
	font-weight: 800;
	color: var(--dvi-facts-accent);
	font-size: clamp(26px, 2.4vw + 10px, 30px);
	line-height: 1.1;
	letter-spacing: 0.3px;
	text-align: center;
}

/* Responsive tweaks */
@media (max-width: 768px) {
	.dvi_scope-facts .dvi_facts__grid {
		grid-template-columns: repeat(2, minmax(150px, 1fr));
	}
}
@media (max-width: 480px) {
	.dvi_scope-facts .dvi_facts__grid {
		grid-template-columns: 1fr;
	}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
	.dvi_scope-facts .dvi_facts__card {
		transition: none !important;
	}
}

/* ============================================
   INICIO: SECCIÓN #dvi-video
   ============================================ */
#dvi-video {
	padding: clamp(28px, 6vw, 72px) 0;
	background:
		radial-gradient(circle at 85% 15%, rgba(41, 73, 138, 0.18), transparent 45%),
		linear-gradient(180deg, #f7f9fc 0%, #eef3fa 100%);
}

#dvi-video .dvi-video__wrap {
	width: min(1100px, 92%);
	margin: 0 auto;
}

#dvi-video .dvi-video__frame {
	margin: 0;
	padding: clamp(14px, 2vw, 22px);
	border-radius: 20px;
	background: linear-gradient(145deg, #ffffff 0%, #f2f6ff 100%);
	border: 1px solid rgba(21, 35, 67, 0.1);
	box-shadow:
		0 18px 42px rgba(16, 31, 63, 0.15),
		0 4px 16px rgba(16, 31, 63, 0.08);
}

#dvi-video .dvi-video__player {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border-radius: 14px;
	background: #0a1224;
}

#dvi-video .dvi-video__caption {
	margin: clamp(10px, 1.6vw, 16px) 0 0;
	font-size: clamp(14px, 1.2vw, 18px);
	line-height: 1.45;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: #1b2a4a;
	text-align: center;
}

@media (max-width: 768px) {
	#dvi-video .dvi-video__wrap {
		width: min(100%, 94%);
	}

	#dvi-video .dvi-video__frame {
		padding: 12px;
		border-radius: 16px;
	}

	#dvi-video .dvi-video__player {
		border-radius: 12px;
	}
}

/* ============================================
   FIN: SECCIÓN #dvi-video
   ============================================ */