/**
 * HOME PAGE - Mundo Universidad
 * Diseño profesional, limpio y moderno - Optimizado para conversión
 */

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.mu-hero {
	background: linear-gradient(135deg, #1E64B4 0%, #2B7CD3 100%);
	color: white;
	padding: 4rem 2rem;
	text-align: center;
	border-radius: 0 0 24px 24px;
}

.mu-hero h1 {
	font-size: clamp(2rem, 5vw, 3.5rem);
	margin: 0 0 1rem;
	font-weight: 800;
	line-height: 1.2;
}

.mu-hero__intro {
	font-size: 1.2rem;
	opacity: 0.95;
	max-width: 700px;
	margin: 0 auto 2rem;
	line-height: 1.6;
}

.mu-hero__intro p {
	margin: 0;
}

.mu-hero__buscador {
	max-width: 600px;
	margin: 2rem auto 0;
	display: flex;
	gap: 0.5rem;
	background: white;
	padding: 0.5rem;
	border-radius: 50px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.mu-hero__buscador input[type="search"] {
	flex: 1;
	border: none;
	padding: 1rem 1.5rem;
	font-size: 1rem;
	border-radius: 50px;
	background: transparent;
}

.mu-hero__buscador input[type="search"]:focus {
	outline: 2px solid #1E64B4;
	outline-offset: 2px;
}

.mu-hero__buscador button {
	background: #1E64B4;
	color: white;
	border: none;
	padding: 1rem 2.5rem;
	border-radius: 50px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s;
}

.mu-hero__buscador button:hover,
.mu-hero__buscador button:focus {
	background: #154a8a;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(30, 100, 180, 0.4);
	outline: 2px solid #154a8a;
	outline-offset: 2px;
}

/* ==========================================================================
   ESTADÍSTICAS — franja horizontal, continuación visual del hero (no otra
   "tarjeta con borde" más: son 3 números sueltos, no un grid de contenido).
   2026-09-08: eran 4 (incluía "Becas"); se quitó al aparcar la sección de
   becas. El grid móvil de abajo se ajustó de 2 a 3 columnas para no dejar
   un hueco con un elemento suelto en la última fila.
   ========================================================================== */
.mu-stats-strip {
	background: linear-gradient(135deg, #eaf2fc 0%, #f5f9ff 100%);
	padding: 2rem;
	margin-bottom: 4rem;
}

.mu-stats-strip__inner {
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.mu-stat-item {
	flex: 1 1 160px;
	text-align: center;
	padding: 0.25rem 1.75rem;
	border-right: 1px solid rgba(30, 100, 180, 0.18);
}

.mu-stat-item:last-child {
	border-right: none;
}

.mu-stat-item strong {
	display: block;
	font-size: 2.25rem;
	color: #1E64B4;
	font-weight: 800;
	line-height: 1;
	margin-bottom: 0.35rem;
}

.mu-stat-item span {
	font-size: 0.85rem;
	color: #475569;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
}

/* ==========================================================================
   POR QUÉ ELEGIR MUNDO UNIVERSIDAD
   ========================================================================== */
.mu-section.mu-why-us {
	/* 2026-09-15 (Óscar, en vivo): "el fondo azul queda raro tan ajustado al
	   contenido de dentro" -- diagnostico real, no solo estetico: esta regla
	   antes se llamaba ".mu-why-us" (una sola clase), MISMA especificidad que
	   ".mu-section" (tambien una sola clase) definida mas abajo en este mismo
	   archivo con "padding: 0 2rem" -- en CSS, a igual especificidad gana la
	   regla que aparece DESPUES en el archivo, asi que ese padding vertical de
	   3rem quedaba anulado en la practica (quedaba en "0 2rem", sin aire
	   arriba/abajo, solo margen del propio h2). Selector compuesto aqui
	   (dos clases = mas especificidad que ".mu-section" sola) para que este
	   padding gane siempre, sin depender del orden de declaracion. */
	background: linear-gradient(135deg, #f0f7ff 0%, #e0f0ff 100%);
	padding: 4rem 3.5rem;
	border-radius: 24px;
	margin-bottom: 4rem;
}

.mu-why-us h2 {
	text-align: center;
	margin-bottom: 3rem;
}

.mu-features-grid {
	display: grid;
	/* 2026-09-08: eran 4 tarjetas (2x2 dentro del ancho real de .site-main,
	   720px, no los 1200px del max-width del grid). Al quitar "Becas y
	   Ayudas" quedan 3: con auto-fit basado en minmax(250px,1fr) solo caben
	   2 columnas en ese ancho, dejando la 3ª tarjeta sola con un hueco al
	   lado. Se fuerza a 3 columnas iguales (por debajo de 250px de mínimo,
	   pero son solo 3 tarjetas fijas en este archivo, no un listado
	   dinámico) para que quede siempre en una sola fila. Ver
	   front-page.php.bak-2026-09-08-becas para el layout de 4 tarjetas. */
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	max-width: var(--wpst-wide-width, 1320px);
	margin: 0 auto;
}

.mu-feature {
	/* 2026-09-09 (CEO): el fondo de .mu-why-us es un degradado azul muy claro
	   y las tarjetas eran blanco plano sin sombra ni borde en reposo -- casi
	   la misma luminosidad, así que el cuadro azul y las tarjetas se
	   confundían (reporte directo del usuario). Sombra + borde visibles ya
	   en reposo, no solo al hover, para que la tarjeta se lea como elemento
	   elevado sobre el fondo. */
	background: white;
	padding: 2rem;
	border-radius: 16px;
	text-align: center;
	transition: all 0.3s;
	border: 1px solid #d7e6f7;
	box-shadow: 0 4px 16px rgba(30, 100, 180, 0.08);
}

.mu-feature:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 32px rgba(30, 100, 180, 0.15);
	border-color: #1E64B4;
}

.mu-feature__icon {
	/* 2026-09-17 (CEO, Diseñador Web): sustituidos los emojis (tofu box en
	   este VPS, ver auditoría de diseño) por iconos Lucide reales via
	   mu_icon() -- el tamaño de fuente ya no aplica a un SVG, se centra en
	   una insignia circular con el tinte de marca en vez de flotar suelto. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 1.25rem;
	background: #EBF4FF;
	border-radius: 16px;
	color: #1E64B4;
}

.mu-feature__icon .mu-icon {
	width: 30px;
	height: 30px;
}

.mu-feature h3 {
	font-size: 1.25rem;
	margin: 0 0 1rem;
	color: #1e293b;
}

.mu-feature p {
	color: #475569;
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0;
}

/* ==========================================================================
   SECCIONES
   ========================================================================== */
.mu-section {
	max-width: var(--wpst-wide-width, 1320px);
	margin: 0 auto 4rem;
	padding: 0 2rem;
}

.mu-section h2 {
	font-size: 2rem;
	margin: 0 0 2rem;
	font-weight: 700;
	color: #1e293b;
}

/* Áreas de estudio / Ciudades ahora usan .mu-chip-grid / .mu-chip (cards.css) */

/* .mu-ver-todas -> movido a cards.css (componente reutilizable) */


/* .mu-card-grid, .mu-card, .mu-badge (variantes nivel/area/publica/privada) y
   .mu-chip -> movidos a cards.css (componentes reutilizables en home + busqueda) */

/* ==========================================================================
   BANDAS DE FONDO ALTERNAS — rompen la monotonía de "todo blanco" sin
   inventar contenido nuevo; alternan blanco/gris muy claro entre secciones.
   Cuando envuelven una .mu-section, la banda asume el padding vertical y la
   sección interna no duplica su propio margen inferior.
   ========================================================================== */
.mu-band {
	width: 100%;
	padding: 3rem 0;
}

.mu-band--alt {
	background: var(--wpst-bg-alt, #f7fafc);
}

.mu-band > .mu-section {
	margin: 0 auto;
}

.mu-ad-band {
	text-align: center;
}

/* .mu-cta-becas y variantes — eliminadas el 2026-09-08 junto con la sección
   del front-page.php al aparcar Becas (ver front-page.php.bak-2026-09-08-becas
   para el HTML/CSS original si se recupera la sección). */

/* ==========================================================================
   AD SLOTS
   ========================================================================== */
.mu-ad-slot {
	max-width: 728px;
	margin: 3rem auto;
	padding: 2rem;
	text-align: center;
	background: #f8fafc;
	border-radius: 12px;
	border: 2px dashed #e5e7eb;
	min-height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mu-ad-placeholder {
	color: #94a3b8;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
	.mu-hero {
		padding: 3rem 1.5rem;
		border-radius: 0 0 16px 16px;
	}

	.mu-hero h1 {
		font-size: 2rem;
	}

	.mu-hero__intro {
		font-size: 1rem;
	}

	.mu-hero__buscador {
		flex-direction: column;
		border-radius: 16px;
		padding: 1rem;
	}

	.mu-hero__buscador input[type="search"],
	.mu-hero__buscador button {
		border-radius: 12px;
	}

	.mu-stats-strip {
		padding: 1.5rem 1rem;
		margin-bottom: 2.5rem;
	}

	.mu-stats-strip__inner {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1.25rem 0;
	}

	.mu-stat-item {
		border-right: none;
		padding: 0.25rem 0.5rem;
		/* 2026-09-15: bug real de "grid blowout" -- un item de grid, por
		   defecto, no encoge por debajo del ancho intrínseco de su
		   contenido (min-width: auto). "PROGRAMAS UNIVERSITARIOS" en
		   mayúsculas no encontraba dónde partir la línea a 1fr de un
		   grid de 3 columnas en 375px, así que el track se salía del
		   contenedor y desbordaba toda la franja (confirmado con
		   captura real, "UNIVERSIDADES" se veía cortado como
		   "IVERSIDADES"). min-width: 0 permite que el track encoja de
		   verdad y el texto envuelva dentro de su columna. */
		min-width: 0;
	}

	.mu-stat-item span {
		overflow-wrap: break-word;
	}

	.mu-stat-item strong {
		font-size: 1.75rem;
	}

	.mu-features-grid {
		grid-template-columns: 1fr;
	}

	.mu-section h2 {
		font-size: 1.5rem;
	}

	.mu-section.mu-why-us {
		padding: 2.5rem 1.75rem;
	}

	.mu-band {
		padding: 2rem 0;
	}
}

/* Mas aire vertical en escritorio (ver style.css seccion 15 para el resto
   de plantillas) — a 1440px las bandas se sentian apretadas ademas de
   estrechas, confirmado con captura real 2026-09-08. */
@media (min-width: 1024px) {
	.mu-band {
		padding: 4rem 0;
	}

	.mu-section {
		margin-bottom: 5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}