/*
Theme Name: Mundo Universidad
Description: Tema optimizado para el portal universitario líder de España. Mobile-first, accesible, rápido.
Author: Dideso
Version: 2.1.0
License: GPL v2 or later
Text Domain: mundouniversidad
Requires at least: 6.0
Requires PHP: 7.4
*/

/* ==========================================================================
   1. Variables CSS — Diseño mejorado con mejor contraste y legibilidad
   ========================================================================== */
:root {
	/* Colores principales */
	--wpst-accent: #1E64B4;
	--wpst-accent-dark: #154a8a;
	--wpst-accent-light: #3b82f6;
	--wpst-accent-contrast: #ffffff;

	/* Texto con mejor contraste */
	--wpst-text: #1a1a1a;
	--wpst-text-muted: #4a5568;
	--wpst-text-light: #718096;

	/* Fondos */
	--wpst-bg: #ffffff;
	--wpst-bg-alt: #f7fafc;
	--wpst-bg-accent: #ebf4ff;

	/* Bordes */
	--wpst-border: #e2e8f0;
	--wpst-border-dark: #cbd5e0;

	/* Tipografía mejorada
	   2026-09-17 (CEO, Diseñador Web): identidad ya definida por
	   mu-disenador-marca, cargada via Google Fonts en functions.php
	   (wpst_scripts). Inter para cuerpo/UI (toda la interfaz), Source Serif 4
	   solo para los H1/H2 de fichas y páginas de contenido largo
	   (--wpst-font-serif, aplicado puntualmente más abajo a .entry-title,
	   .page-title, h2.mu-h2-accent, .oferta-title -- no a los H1/H2 de
	   secciones de home/hub, que siguen en Inter como el resto de la UI). */
	--wpst-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--wpst-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--wpst-font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

	/* Espaciado y diseño */
	--wpst-radius: 12px;
	--wpst-radius-sm: 6px;
	--wpst-radius-lg: 16px;
	--wpst-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
	--wpst-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	--wpst-shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.15);
	--wpst-content-width: 720px;
	--wpst-wide-width: 1320px; /* 2026-09-08: antes 1200px — a 1440px de viewport dejaba ~120px de blanco sin usar a cada lado (confirmado con captura real), ver informe de diseño. */
	--wpst-header-height: 84px; /* 2026-09-08: altura real medida del .site-header (sticky, ver sección 5) — usada para compensar el offset de cualquier sidebar con position:sticky, ver hallazgo de diseño del mismo día (sidebar de titulación cortado a la mitad por el header). */

	/* Transiciones */
	--wpst-transition: 0.2s ease;
}

/* ==========================================================================
   2. Reset mejorado con mejor accesibilidad
   ========================================================================== */
*, *::before, *::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--wpst-font-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--wpst-text);
	background: var(--wpst-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg, video {
	max-width: 100%;
	height: auto;
	display: block;
}

ul, ol {
	padding-left: 1.5em;
}

a {
	color: var(--wpst-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: var(--wpst-transition);
}

a:hover {
	color: var(--wpst-accent-dark);
	text-decoration-thickness: 2px;
}

button, input, select, textarea {
	font-family: inherit;
	font-size: 1rem;
}

/* ==========================================================================
   3. Tipografía mejorada con mejor jerarquía visual
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--wpst-font-heading);
	line-height: 1.2;
	margin: 0 0 0.75em;
	font-weight: 700;
	color: var(--wpst-text);
	letter-spacing: -0.02em;
}

h1 {
	font-size: clamp(2rem, 5vw, 3rem);
	margin-bottom: 1rem;
}

h2 {
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	margin-bottom: 0.875rem;
}

/* 2026-09-17 (CEO, Diseñador Web): Source Serif 4 (600/700) solo en los
   titulares de ficha/contenido largo -- entry-title (fichas de
   titulacion/universidad/master), page-title (paginas hub/archivo), y
   h2.mu-h2-accent (subtitulos dentro del contenido editorial largo, "Qué es
   el Grado en...", "Plan de estudios"...). El resto de H1/H2 de la UI
   (hero de home, secciones de home/hub como "Por qué elegir...") se queda
   en Inter -- no es contenido largo, es interfaz. */
.entry-title,
.page-title,
.oferta-title,
h2.mu-h2-accent {
	font-family: var(--wpst-font-serif);
	font-weight: 700;
}

h3 {
	font-size: clamp(1.25rem, 3vw, 1.75rem);
}

h4 {
	font-size: 1.25rem;
}

h5 {
	font-size: 1.125rem;
}

h6 {
	font-size: 1rem;
}

p {
	margin: 0 0 1.5em;
}

strong, b {
	font-weight: 600;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	padding: 16px 24px;
	background: var(--wpst-text);
	color: #fff;
	z-index: 100000;
	clip: auto;
	border-radius: var(--wpst-radius);
	font-weight: 600;
	box-shadow: var(--wpst-shadow-lg);
}

/* ==========================================================================
   4. Layout principal
   ========================================================================== */
#page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main {
	max-width: var(--wpst-content-width);
	margin-inline: auto;
	padding: 2rem 1.25rem 4.5rem;
	width: 100%;
	flex: 1;
}

.site-header,
.site-footer {
	width: 100%;
}

.alignwide {
	max-width: var(--wpst-wide-width);
	margin-left: auto;
	margin-right: auto;
}

.alignfull {
	max-width: 100%;
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* ==========================================================================
   5. Header mejorado con mejor contraste
   ========================================================================== */
.site-header {
	background: var(--wpst-bg);
	border-bottom: 2px solid var(--wpst-border);
	position: sticky;
	top: 0;
	z-index: 999;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.header-container {
	max-width: var(--wpst-wide-width);
	margin: 0 auto;
	padding: 1rem 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.custom-logo {
	max-height: 48px;
	width: auto;
}

.site-title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.03em;
}

.site-title a {
	color: var(--wpst-accent);
	text-decoration: none;
	transition: var(--wpst-transition);
}

.site-title a:hover {
	color: var(--wpst-accent-dark);
}

/* 2026-09-17 (CEO, Diseñador Web): logotipo minimo real -- antes era el
   emoji 🎓 suelto delante del texto (tofu box en este VPS, hallazgo nº1 de
   la auditoria de diseño). Icono Lucide graduation-cap + texto en
   tipografia serif de marca (Source Serif 4), mismo azul de acento. */
.mu-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.mu-logo__icon {
	flex-shrink: 0;
	color: var(--wpst-accent);
}

.mu-logo__text {
	font-family: 'Source Serif 4', Georgia, serif;
	font-weight: 700;
}

.search-submit .mu-icon {
	display: block;
}

.site-description {
	margin: 0;
	color: var(--wpst-text-muted);
	font-size: 0.875rem;
}

/* Navegación mejorada */
.main-navigation {
	display: flex;
}

.nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.5rem;
}

.menu-item > a {
	display: block;
	padding: 0.75rem 1rem;
	color: var(--wpst-text);
	text-decoration: none;
	font-weight: 600;
	border-radius: var(--wpst-radius-sm);
	transition: var(--wpst-transition);
	font-size: 0.9375rem;
}

.menu-item > a:hover,
.menu-item > a:focus {
	background: var(--wpst-bg-accent);
	color: var(--wpst-accent);
}

.current-menu-item > a {
	background: var(--wpst-bg-accent);
	color: var(--wpst-accent);
	box-shadow: inset 0 -3px 0 var(--wpst-accent);
}

/* Submenú
   2026-09-09 (CEO, encargo Óscar "a veces no te deja seleccionar el
   desplegable"): el hueco real era el CSS, no el JS. El submenú vivía a
   top:100% + margin-top:0.5rem -- una franja de 8px entre el borde
   inferior del <li> (lo que dispara :hover) y el propio .sub-menu. Al
   bajar el ratón en diagonal desde "Grados" hacia una opción del
   desplegable, cruzar esa franja sin li NI submenu bajo el puntero
   apagaba el :hover y el menú se cerraba antes de poder pulsar nada --
   reproducible, no intermitente de verdad, solo dependia de la trayectoria
   del raton. Arreglado quitando el margen (el submenu queda pegado al
   item, sin zona muerta) y devolviendo el aire visual con padding-top
   DENTRO del propio submenu, que sí cuenta como área de hover continua. */
.menu-item-has-children {
	position: relative;
}

.sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--wpst-bg);
	box-shadow: var(--wpst-shadow-lg);
	border-radius: var(--wpst-radius);
	min-width: 200px;
	padding: 0.75rem 0 0.5rem;
	margin-top: 0;
	list-style: none;
	z-index: 1000;
}

.menu-item-has-children:hover .sub-menu,
.menu-item-has-children:focus-within .sub-menu {
	display: block;
}

.sub-menu li a {
	display: block;
	padding: 0.625rem 1rem;
	color: var(--wpst-text);
	text-decoration: none;
	font-size: 0.875rem;
}

.sub-menu li a:hover {
	background: var(--wpst-bg-alt);
	color: var(--wpst-accent);
}

/* Botón menú móvil */
.menu-toggle {
	display: none;
	background: var(--wpst-accent);
	color: var(--wpst-accent-contrast);
	border: none;
	padding: 0.75rem 1rem;
	border-radius: var(--wpst-radius-sm);
	cursor: pointer;
	font-weight: 600;
	transition: var(--wpst-transition);
}

.menu-toggle:hover,
.menu-toggle:focus {
	background: var(--wpst-accent-dark);
}

.hamburger {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.hamburger span {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--wpst-accent-contrast);
	border-radius: 2px;
}

/* Buscador header */
.header-search {
	flex-shrink: 0;
}

.search-form {
	display: flex;
	gap: 0.5rem;
}

.search-field {
	padding: 0.75rem 1rem;
	border: 2px solid var(--wpst-border);
	border-radius: var(--wpst-radius-sm);
	font-size: 0.9375rem;
	min-width: 200px;
	transition: var(--wpst-transition);
}

.search-field:focus {
	outline: none;
	border-color: var(--wpst-accent);
	box-shadow: 0 0 0 3px var(--wpst-bg-accent);
}

.search-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1rem;
	background: var(--wpst-accent);
	color: var(--wpst-accent-contrast);
	border: none;
	border-radius: var(--wpst-radius-sm);
	cursor: pointer;
	font-size: 1.125rem;
	transition: var(--wpst-transition);
	font-weight: 600;
}

.search-submit:hover,
.search-submit:focus {
	background: var(--wpst-accent-dark);
	transform: translateY(-1px);
}

/* ==========================================================================
   6. Footer mejorado
   ========================================================================== */
.site-footer {
	background: #1a202c;
	color: #a0aec0;
	padding: 3rem 0 1.5rem;
	margin-top: auto;
}

.footer-container {
	max-width: var(--wpst-wide-width);
	margin: 0 auto;
	padding: 0 1.25rem;
}

.footer-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 3rem;
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid #2d3748;
}

.footer-column h3 {
	color: #fff;
	margin-top: 0;
	margin-bottom: 1rem;
	font-size: 1.125rem;
	font-weight: 700;
}

.footer-column p {
	line-height: 1.6;
	color: #cbd5e0;
}

.footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-links li {
	margin-bottom: 0.625rem;
}

.footer-links a {
	color: #a0aec0;
	text-decoration: none;
	transition: var(--wpst-transition);
}

.footer-links a:hover {
	color: #fff;
}

.site-info {
	text-align: center;
	/* 2026-09-14: era #718096 sobre el fondo oscuro del footer (#1a202c) ->
	   4.06:1, no llega al 4.5:1 de WCAG AA para texto normal de 14px. #a0aec0
	   es el mismo tono que ya usa el resto del footer (.site-footer,
	   .footer-links) y da 7.23:1 sobre el mismo fondo. Auditoría de contraste. */
	color: #a0aec0;
	font-size: 0.875rem;
}

.site-info p {
	margin: 0;
}

.site-info-disclaimer {
	margin-top: 8px !important;
	font-size: 0.8rem;
	opacity: 0.85;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.site-info-disclaimer a {
	color: inherit;
	text-decoration: underline;
}

/* ==========================================================================
   7. Formularios y botones con mejor accesibilidad
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
textarea,
select {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 2px solid var(--wpst-border);
	border-radius: var(--wpst-radius-sm);
	background: var(--wpst-bg);
	color: var(--wpst-text);
	font-size: 1rem;
	transition: var(--wpst-transition);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--wpst-accent);
	box-shadow: 0 0 0 3px var(--wpst-bg-accent);
}

.wp-block-button__link,
button,
input[type="submit"],
.btn {
	display: inline-block;
	background: var(--wpst-accent);
	color: var(--wpst-accent-contrast);
	border: none;
	border-radius: var(--wpst-radius-sm);
	padding: 0.875rem 1.5rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	font-size: 1rem;
	transition: var(--wpst-transition);
	line-height: 1.2;
}

.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover,
.btn:hover {
	background: var(--wpst-accent-dark);
	transform: translateY(-2px);
	box-shadow: var(--wpst-shadow);
}

.wp-block-button__link:focus,
button:focus,
input[type="submit"]:focus,
.btn:focus {
	outline: 2px solid var(--wpst-accent);
	outline-offset: 2px;
}

/* ==========================================================================
   8. Badges de taxonomía mejorados
   ========================================================================== */
.mu-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.75rem 0 1.25rem;
}

.mu-badge {
	display: inline-block;
	padding: 0.375rem 0.875rem;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 600;
	background: var(--wpst-bg-alt);
	color: var(--wpst-text);
	text-decoration: none;
	transition: var(--wpst-transition);
	line-height: 1.2;
}

.mu-badge:hover {
	background: var(--wpst-bg-accent);
	color: var(--wpst-accent);
	transform: translateY(-1px);
}

.mu-badge--nivel_academico {
	background: var(--wpst-accent);
	color: var(--wpst-accent-contrast);
}

.mu-badge--nivel_academico:hover {
	background: var(--wpst-accent-dark);
	color: var(--wpst-accent-contrast);
}

.mu-badge--area_estudio {
	background: #f0fdf4;
	color: #15803d;
	border: 1px solid #bbf7d0;
}

.mu-badge--modalidad {
	background: #fef3c7;
	color: #92400e;
	border: 1px solid #fde68a;
}

.mu-badge--ciudad,
.mu-badge--comunidad_autonoma {
	background: var(--wpst-bg-accent);
	color: var(--wpst-accent);
	border: 1px solid #bfdbfe;
}

.mu-badge--tipo_universidad {
	border: 2px solid var(--wpst-border);
	background: transparent;
}

/* Acabado con relleno para los valores concretos de tipo de universidad —
   sustituye el contorno neutro de arriba cuando el slug es conocido (ver
   mu_taxonomy_badges() en functions.php, que añade este modificador). */
.mu-badge--tipo_universidad-publica {
	border: none;
	background: #d1fae5;
	color: #065f46;
}

.mu-badge--tipo_universidad-privada {
	border: none;
	background: #fee2e2;
	color: #991b1b;
}

.mu-badge--small {
	font-size: 0.75rem;
	padding: 0.25rem 0.625rem;
}

/* 2026-09-09 (CEO): hallazgo del agente de diseño -- a ~1024px (tablet
   apaisada) el buscador del header se salía del viewport, sitewide (pasa
   igual en la home, no es algo de una plantilla concreta). .header-search
   tiene flex-shrink:0 y .search-field un min-width:200px fijos, y por
   debajo de 900px el layout ya cambia a apilado -- entre medias (901-1180px)
   no había ningún margen para que menú + logo + buscador cupieran juntos.
   Aprieta gaps/paddings y reduce el ancho mínimo del buscador solo en esa
   franja, sin tocar el layout de escritorio ni el móvil ya apilado. */
@media (min-width: 901px) and (max-width: 1180px) {
	.header-container {
		gap: 1rem;
	}

	.nav-menu {
		gap: 0.125rem;
	}

	.menu-item > a {
		padding: 0.75rem 0.625rem;
		font-size: 0.875rem;
	}

	.search-field {
		min-width: 120px;
	}
}

/* ==========================================================================
   9. Responsive móvil
   ========================================================================== */
@media (max-width: 900px) {
	.header-container {
		flex-wrap: wrap;
	}

	.menu-toggle {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		order: 3;
	}

	.main-navigation {
		display: none;
		order: 4;
		width: 100%;
	}

	.main-navigation.toggled {
		display: block;
	}

	.nav-menu {
		flex-direction: column;
		gap: 0;
		background: var(--wpst-bg);
		border: 2px solid var(--wpst-border);
		border-radius: var(--wpst-radius);
		overflow: hidden;
		margin-top: 1rem;
		box-shadow: var(--wpst-shadow);
	}

	.menu-item {
		border-bottom: 1px solid var(--wpst-border);
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-item > a {
		padding: 1rem;
		border-radius: 0;
	}

	.sub-menu {
		position: static;
		box-shadow: none;
		background: var(--wpst-bg-alt);
		display: none;
		margin: 0;
		padding: 0;
		border-radius: 0;
	}

	.menu-item-has-children.active .sub-menu {
		display: block;
	}

	.sub-menu li a {
		padding: 0.875rem 1.5rem;
	}

	/* 2026-09-22 (CEO, feedback de Óscar en vivo desde el móvil: el header
	   "tenía demasiado protagonismo" -- logo, botón Menú y buscador cada uno
	   en su propia fila antes de llegar al contenido. El buscador ahora se
	   oculta por defecto en móvil y se cuelga del mismo interruptor que abre
	   el menú (ver menu-mobile.js): sigue siendo accesible con un toque, pero
	   ya no ocupa espacio fijo en cada página. */
	.header-search {
		display: none;
		order: 5;
		width: 100%;
		margin-top: 1rem;
	}

	.header-search.toggled {
		display: block;
	}

	.search-field {
		flex: 1;
		min-width: 0;
	}

	.menu-toggle {
		padding: 0.625rem 0.875rem;
	}
}

@media (max-width: 600px) {
	.site-title {
		font-size: 1.25rem;
	}

	.header-container {
		padding: 0.875rem 1rem;
	}

	.site-main {
		padding: 1.5rem 1rem 2.5rem;
	}
}

/* ==========================================================================
   Footer - Redes Sociales
   ========================================================================== */
.footer-stats {
	font-size: 0.95rem;
	margin-top: 0.5rem;
}

.footer-social {
	margin-top: 1.5rem;
}

.footer-social h4 {
	color: #fff;
	font-size: 1rem;
	margin: 0 0 0.75rem;
	font-weight: 600;
}

.social-links {
	display: flex;
	gap: 1rem;
}

.social-links a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: #2d3748;
	border-radius: 50%;
	color: #a0aec0;
	transition: all 0.3s;
	text-decoration: none;
}

.social-links a:hover,
.social-links a:focus {
	background: var(--wpst-accent);
	color: white;
	transform: translateY(-3px);
	box-shadow: 0 4px 12px rgba(30, 100, 180, 0.4);
	outline: 2px solid var(--wpst-accent);
	outline-offset: 2px;
}

.social-links svg {
	width: 20px;
	height: 20px;
}

/* Footer responsive */
@media (max-width: 768px) {
	.footer-widgets {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	
	.site-footer {
		padding: 2rem 0 1rem;
	}
}

/* ==========================================================================
   10. Archivos de Universidad / Oferta / Beca (grids y tarjetas genéricas)
   Antes sin CSS propio — plantillas archive-*.php y single-oferta/beca.php
   usan estas clases genéricas (.card-*, .badge-*, .btn-*) directamente.
   ========================================================================== */
.container {
	max-width: var(--wpst-wide-width);
	margin-inline: auto;
	padding: 0 1.25rem;
}

.site-main .page-header {
	margin: 2rem 0 1.5rem;
}

.site-main .page-title {
	margin-bottom: 0.5rem;
}

.site-main .archive-description {
	color: var(--wpst-text-muted);
	margin-bottom: 1.5rem;
}

/* Filtros de archivo (ofertas) */
.archive-filters {
	margin: 1.5rem 0 2rem;
	padding: 20px;
	background: var(--wpst-bg-alt);
	border-radius: var(--wpst-radius);
	border: 1px solid var(--wpst-border);
}

.filters-form {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 16px;
}

.filter-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.filter-group label {
	font-weight: 600;
	font-size: 0.9rem;
}

.filter-group select {
	padding: 10px 12px;
	border: 1px solid var(--wpst-border);
	border-radius: var(--wpst-radius);
	background: var(--wpst-bg);
	font-size: 0.95rem;
	min-width: 200px;
}

/* Botones genéricos btn-* (usados en archive-oferta, archive-beca, single-oferta, single-beca) */
.btn-primary {
	display: inline-block;
	background: var(--wpst-accent);
	color: var(--wpst-accent-contrast);
	border: none;
	border-radius: var(--wpst-radius-sm);
	padding: 0.75rem 1.5rem;
	font-weight: 600;
	text-decoration: none;
	transition: var(--wpst-transition);
}

.btn-primary:hover,
.btn-primary:focus {
	background: var(--wpst-accent-dark);
	color: var(--wpst-accent-contrast);
	transform: translateY(-1px);
}

.btn-secondary {
	display: inline-block;
	background: transparent;
	color: var(--wpst-accent);
	border: 2px solid var(--wpst-accent);
	border-radius: var(--wpst-radius-sm);
	padding: calc(0.75rem - 2px) calc(1.5rem - 2px);
	font-weight: 600;
	text-decoration: none;
	transition: var(--wpst-transition);
}

.btn-secondary:hover,
.btn-secondary:focus {
	background: var(--wpst-bg-accent);
}

.btn-block {
	display: block;
	text-align: center;
	width: 100%;
}

/* Badges genéricos badge-* */
.badge {
	display: inline-block;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	background: var(--wpst-bg-alt);
	color: var(--wpst-text);
}

.badge-modalidad {
	background: #fef3c7;
	color: #92400e;
}

.badge-area {
	background: #f0fdf4;
	color: #15803d;
}

.badge-tipo {
	background: var(--wpst-bg-accent);
	color: var(--wpst-accent);
}

/* Grids de tarjetas (universidades / ofertas / becas) — mobile: 1 columna */
.universidades-grid,
.ofertas-grid,
.becas-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin: 2rem 0 3rem;
}

.universidad-card,
.oferta-card,
.beca-card {
	background: var(--wpst-bg);
	border: 1px solid var(--wpst-border);
	border-radius: var(--wpst-radius);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.universidad-card:hover,
.oferta-card:hover,
.beca-card:hover {
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
	transform: translateY(-4px);
	border-color: var(--wpst-accent);
}

.beca-card-icon {
	font-size: 2rem;
	line-height: 1;
}

.card-badges {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.card-title {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.3;
}

.card-title a {
	color: var(--wpst-text);
	text-decoration: none;
}

.card-title a:hover {
	color: var(--wpst-accent);
}

.card-location,
.card-universidad,
.beca-plazo {
	margin: 0;
	font-size: 0.9rem;
	color: var(--wpst-text-muted);
}

.card-excerpt {
	color: var(--wpst-text-muted);
	font-size: 0.95rem;
	line-height: 1.6;
	flex: 1;
	margin: 0;
}

.universidad-card .btn-secondary,
.oferta-card .btn-primary,
.beca-card .btn-primary {
	align-self: flex-start;
	margin-top: 0.5rem;
}

/* Info adicional sobre tipos de becas (archive-beca.php) */
.becas-info {
	margin: 3rem 0;
	padding-top: 2rem;
	border-top: 1px solid var(--wpst-border);
}

.becas-tipos-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin-top: 1.5rem;
}

.tipo-card {
	background: var(--wpst-bg-alt);
	border-radius: var(--wpst-radius);
	padding: 1.25rem;
}

.tipo-card h3 {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
}

.tipo-card p {
	margin: 0;
	color: var(--wpst-text-muted);
	font-size: 0.9rem;
}

.no-results {
	text-align: center;
	padding: 3rem 1rem;
}

.no-results p {
	color: var(--wpst-text-muted);
	margin-bottom: 1.5rem;
}

/* ==========================================================================
   11. Fichas individuales de Oferta y Beca (single-oferta.php / single-beca.php)
   ========================================================================== */
.breadcrumbs {
	font-size: 0.85rem;
	color: var(--wpst-text-muted);
	margin: 1.5rem 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
}

.breadcrumbs a {
	color: var(--wpst-accent);
	text-decoration: none;
}

.breadcrumbs a:hover {
	text-decoration: underline;
}

.breadcrumbs .sep {
	color: var(--wpst-border-dark);
}

.breadcrumbs .current {
	color: var(--wpst-text);
}

.oferta-layout,
.beca-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	margin-bottom: 3rem;
}

.oferta-content,
.beca-content {
	min-width: 0;
}

.oferta-title,
.beca-title {
	margin-bottom: 0.5rem;
}

.oferta-badges,
.beca-meta {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.oferta-meta {
	margin-bottom: 1rem;
}

.oferta-universidad {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	color: var(--wpst-text-muted);
}

.oferta-universidad .mu-icon {
	color: var(--wpst-accent);
}

.oferta-body,
.beca-body {
	line-height: 1.7;
}

.oferta-info-box,
.beca-highlight {
	margin-top: 2rem;
	padding: 20px;
	background: var(--wpst-bg-alt);
	border-radius: var(--wpst-radius);
	border: 1px solid var(--wpst-border);
}

.oferta-info-box h3,
.beca-highlight h3 {
	margin-top: 0;
	font-size: 1.05rem;
}

.info-list {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.info-list li {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--wpst-border);
	font-size: 0.9rem;
}

.info-list li:last-child {
	border-bottom: none;
}

/* 2026-09-17 (CEO, Diseñador Web): variante compacta de .mu-stats para la
   caja "Información del máster" del sidebar -- mismo patrón de tarjeta que
   .mu-stat (sección 12), pero mas pequeña porque aquí conviven 2-3 tarjetas
   en una columna estrecha, no 4 en el ancho completo de una ficha. */
.mu-stats--sidebar {
	margin: 0 0 1rem;
}

.mu-stats--sidebar .mu-stat {
	flex: 1 1 100px;
	padding: 12px 10px;
}

.mu-stats--sidebar .mu-stat strong {
	font-size: 1.05rem;
}

.mu-stats--sidebar .mu-stat span {
	font-size: 0.7rem;
}

.oferta-info-box__titulacion {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 0;
	padding-top: 0.875rem;
	border-top: 1px solid var(--wpst-border);
	font-size: 0.875rem;
	color: var(--wpst-text-muted);
}

.oferta-info-box__titulacion .mu-icon {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--wpst-accent);
}

.cta-box {
	margin-top: 1.25rem;
	text-align: center;
}

.cta-box p {
	margin: 0 0 0.75rem;
}

.oferta-sidebar,
.beca-sidebar {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.sidebar-widget {
	background: var(--wpst-bg);
	border: 1px solid var(--wpst-border);
	border-radius: var(--wpst-radius);
	padding: 20px;
	box-shadow: var(--wpst-shadow-sm);
}

.sidebar-widget h3 {
	margin-top: 0;
	margin-bottom: 0.875rem;
	font-size: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--wpst-border);
}

/* Lista de enlaces relacionados (Otras ofertas / Otras becas): antes una
   lista plana de enlaces azules subrayados — ahora filas con acento a la
   izquierda que aparece al pasar el ratón, coherente con .mu-block-item. */
.related-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.related-list li {
	border-bottom: none;
	padding: 0;
}

.related-list a {
	display: block;
	color: var(--wpst-text);
	text-decoration: none;
	font-size: 0.9rem;
	line-height: 1.4;
	padding: 10px 12px;
	border-left: 3px solid transparent;
	border-radius: 0 var(--wpst-radius-sm) var(--wpst-radius-sm) 0;
	background: var(--wpst-bg-alt);
	transition: var(--wpst-transition);
}

.related-list a:hover,
.related-list a:focus {
	color: var(--wpst-accent);
	border-left-color: var(--wpst-accent);
	background: var(--wpst-bg-accent);
}

/* Fila con título + segunda línea de contexto (universidad o modalidad) —
   da al usuario una razón real para seguir navegando en vez de un enlace
   suelto sin pista de a dónde lleva. */
.related-list__title {
	display: block;
	font-weight: 600;
}

.related-list__meta {
	display: block;
	margin-top: 2px;
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--wpst-text-muted);
}

.related-list a:hover .related-list__meta,
.related-list a:focus .related-list__meta {
	color: inherit;
	opacity: 0.85;
}

.info-widget p {
	margin: 0;
	font-size: 0.85rem;
	color: var(--wpst-text-muted);
}

/* Tablet+: grids a 2 columnas, fichas con sidebar a la derecha */
@media (min-width: 640px) {
	.universidades-grid,
	.ofertas-grid,
	.becas-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.becas-tipos-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.filters-form {
		flex-wrap: nowrap;
	}
}

@media (min-width: 900px) {
	.universidades-grid,
	.ofertas-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.oferta-layout,
	.beca-layout {
		grid-template-columns: 1fr 300px;
		align-items: start;
	}

	.oferta-sidebar,
	.beca-sidebar {
		position: sticky;
		top: calc(var(--wpst-header-height) + 20px);
	}
}

/* ==========================================================================
   11-bis. Fichas de Máster (single-master.php) — 2026-09-14
   Rediseño pedido por Óscar: hasta hoy single-master.php copiaba el patrón
   de single-grado.php sin ningún matiz propio. `.single-master` se añade en
   <main> (ver single-master.php) para poder dar tratamiento propio sin
   tocar single-grado.php ni las clases .oferta-* que comparten ambas.
   ========================================================================== */

/* Tarjeta "Sobre la universidad" del sidebar — sustituye el hueco en blanco
   que quedaba cuando no había másteres relacionados (catálogo aún pequeño,
   6 másteres en total) ni AdSense activo: datos reales ya existentes
   (tipo de universidad, ciudad), nunca inventados. */
.mu-uni-card__name {
	font-weight: 700;
	margin: 0 0 0.75rem;
	color: var(--wpst-text);
}

.mu-uni-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.mu-uni-card .mu-card__link {
	margin-top: 0.25rem;
}

/* Fallback defensivo: si pese a la tarjeta de universidad el sidebar
   quedara vacío de verdad (universidad sin ciudad/tipo conocidos, sin
   másteres relacionados y sin AdSense), la columna colapsa a una sola en
   vez de dejar 300px de hueco en blanco (bug real visto en captura, UCM
   2026-09-14: sidebar completamente vacío). Scopeado a .single-master para
   no tocar el comportamiento ya existente de grado/beca. */
.single-master .oferta-sidebar:empty {
	display: none;
}

@media (min-width: 900px) {
	.single-master .oferta-layout:has(.oferta-sidebar:empty) {
		grid-template-columns: 1fr;
	}
}

/* El párrafo de "Acceso" (grado previo + precio, a veces plazas) hoy es
   texto corrido sin ninguna jerarquía visual — queja directa de Óscar.
   Mientras el post_content no se restructura (ver propuesta .mu-access-*
   más abajo, aún sin usar), se le da al menos tratamiento de tarjeta para
   que no compita en peso visual con un párrafo cualquiera del cuerpo. */
.single-master .oferta-body h2.mu-h2-accent + p {
	background: var(--wpst-bg-alt);
	border: 1px solid var(--wpst-border);
	border-left: 4px solid var(--wpst-accent);
	border-radius: var(--wpst-radius-sm);
	padding: 1rem 1.25rem;
	margin: 0 0 1.5rem;
}

/* --------------------------------------------------------------------------
   PROPUESTA, aún no usada por ningún contenido publicado (2026-09-14).
   Pensada para cuando se restructure el HTML que genera mu_ficha() para
   'master': separar "requisito de acceso" y "precio orientativo" en datos
   con etiqueta, en vez de una frase corrida, y destacar la habilitación
   (cuando el máster es habilitante) cerca del titular en vez de enterrarla
   en la 4ª tarjeta de .mu-stats. Ver informe de diseño para el HTML de
   ejemplo. No se aplica a ninguna ficha real todavía.
   -------------------------------------------------------------------------- */
.mu-master-highlight {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	background: var(--wpst-accent);
	color: var(--wpst-accent-contrast);
	border-radius: var(--wpst-radius);
	padding: 1rem 1.25rem;
	margin: 0 0 1.5rem;
	font-weight: 600;
}

.mu-master-highlight__icon {
	font-size: 1.375rem;
	line-height: 1;
}

.mu-master-highlight__text {
	line-height: 1.5;
}

.mu-master-highlight__text small {
	display: block;
	font-weight: 400;
	font-size: 0.8125rem;
	opacity: 0.85;
	margin-top: 0.2rem;
}

.mu-access-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 0 0 1.5rem;
}

.mu-access-item {
	background: var(--wpst-bg-alt);
	border: 1px solid var(--wpst-border);
	border-radius: var(--wpst-radius-sm);
	padding: 14px 18px;
}

.mu-access-item__label {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wpst-text-muted);
	margin-bottom: 0.25rem;
}

.mu-access-item__value {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	color: var(--wpst-text);
}

@media (min-width: 640px) {
	.mu-access-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   12. Contenido de fichas (titulacion/universidad/oferta/beca)
   Normaliza el HTML del lote de importación masiva, que llegó con estilos
   inline generados por IA (colores distintos por categoría: rojo en
   veterinaria, naranja en becas, verde en informática...). El script de
   limpieza quitó esos style="" y los sustituyó por estas clases semánticas,
   que usan siempre el acento único de marca (--wpst-accent) para que todas
   las fichas se vean coherentes entre sí.
   ========================================================================== */
.mu-ficha {
	width: 100%;
}

.mu-lead {
	font-size: 1.15rem;
	line-height: 1.6;
	font-weight: 500;
	color: var(--wpst-text);
	margin: 0 0 1.25rem;
}

/* Fila de estadísticas destacadas (duración, créditos, nota de corte...) */
.mu-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 2rem;
}

.mu-stat {
	flex: 1 1 140px;
	background: var(--wpst-bg-alt);
	border: 1px solid #d7e6f7;
	border-radius: var(--wpst-radius-sm);
	padding: 18px;
	text-align: center;
	box-shadow: 0 4px 16px rgba(30, 100, 180, 0.06);
}

.mu-stat strong {
	display: block;
	font-size: 1.5rem;
	color: var(--wpst-accent);
}

.mu-stat span {
	font-size: 0.8125rem;
	color: var(--wpst-text-muted);
}

.mu-stat--accent {
	background: var(--wpst-accent);
	border-color: var(--wpst-accent);
}

.mu-stat--accent strong {
	color: var(--wpst-accent-contrast);
}

.mu-stat--accent span {
	color: rgba(255, 255, 255, 0.8);
}

/* Estadística "desnuda" anidada dentro de un aviso ya coloreado (.mu-callout):
   no necesita su propia tarjeta, hereda el fondo y el texto blanco del padre. */
.mu-callout .mu-stats {
	margin: 0.5rem 0 0;
}

.mu-callout .mu-stat {
	background: transparent;
	border: none;
	padding: 0;
}

.mu-callout .mu-stat strong,
.mu-callout .mu-stat span {
	color: var(--wpst-accent-contrast);
}

.mu-callout .mu-stat span {
	color: rgba(255, 255, 255, 0.8);
}

/* Panel de contenido con fondo claro (plan de estudios, contacto...) */
.mu-box {
	background: var(--wpst-bg-alt);
	border-radius: var(--wpst-radius);
	padding: 1.75rem;
	margin-bottom: 1.5rem;
}

.mu-box h2,
.mu-box h3 {
	color: var(--wpst-accent);
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
}

.mu-box p:last-child {
	margin-bottom: 0;
}

/* Bloques de plan de estudios / pasos, con acento a la izquierda */
.mu-block-item {
	background: var(--wpst-bg);
	border-left: 4px solid var(--wpst-accent);
	border-radius: var(--wpst-radius-sm);
	padding: 14px 18px;
}

.mu-block-item + .mu-block-item {
	margin-top: 10px;
}

.mu-block-item strong {
	color: var(--wpst-text);
}

.mu-block-item span {
	color: var(--wpst-text-muted);
}

/* Encabezado de sección con acento a la izquierda */
h2.mu-h2-accent {
	color: var(--wpst-accent);
	border-left: 4px solid var(--wpst-accent);
	padding-left: 12px;
	margin: 1.75rem 0 0.75rem;
}

/* Aviso / dato destacado con fondo de color sólido (acento de marca) */
.mu-callout {
	background: var(--wpst-accent);
	color: var(--wpst-accent-contrast);
	border-radius: var(--wpst-radius);
	padding: 1.5rem 1.75rem;
	margin: 1.5rem 0;
}

.mu-callout h2,
.mu-callout h3 {
	color: var(--wpst-accent-contrast);
	margin: 0 0 0.625rem;
	font-size: 1.15rem;
}

.mu-callout p {
	color: rgba(255, 255, 255, 0.9);
	margin: 0;
}

.mu-callout a {
	color: var(--wpst-accent-contrast);
	text-decoration: underline;
}

/* Lista de píldoras / etiquetas (universidades donde se imparte, tags...) */
.mu-pill-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 1rem;
}

.mu-pill-list a,
.mu-pill-list span {
	display: inline-block;
	background: var(--wpst-bg-accent);
	color: var(--wpst-accent);
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.4;
}

.mu-pill-list a:hover {
	background: var(--wpst-accent);
	color: var(--wpst-accent-contrast);
}

/* Preguntas frecuentes */
.mu-faq-item {
	background: var(--wpst-bg-alt);
	border-left: 3px solid var(--wpst-accent);
	border-radius: 0 8px 8px 0;
	padding: 14px 18px;
}

.mu-faq-item + .mu-faq-item {
	margin-top: 12px;
}

.mu-faq-item p:first-child {
	font-weight: 700;
	color: var(--wpst-text);
	margin: 0 0 4px;
}

.mu-faq-item p:last-child {
	color: var(--wpst-text-muted);
	margin: 0;
}

/* Fila de filtros (selects de comparación dentro del contenido) */
.mu-filter-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 1rem;
}

.mu-filter-row select {
	flex: 1 1 200px;
	width: auto;
}

/* Tabla comparativa dentro de una ficha (envuelta para scroll horizontal) */
.mu-table-wrap {
	overflow-x: auto;
	margin: 0 0 1.5rem;
}

.mu-table-wrap table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.mu-table-wrap thead tr {
	background: var(--wpst-accent);
	color: var(--wpst-accent-contrast);
	text-align: left;
}

.mu-table-wrap th,
.mu-table-wrap td {
	padding: 10px 12px;
}

.mu-table-wrap tbody tr {
	border-bottom: 1px solid var(--wpst-border);
}

.mu-table-wrap tbody td:first-child {
	font-weight: 600;
	color: var(--wpst-text);
}

/* Mapas y otros iframes incrustados en el contenido */
.entry-content iframe,
.oferta-body iframe,
.beca-body iframe {
	width: 100%;
	max-width: 100%;
	border: 0;
	border-radius: var(--wpst-radius);
	margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
	.mu-stat {
		flex: 1 1 160px;
	}
}

/* ==========================================================================
   13. Correcciones de revisión UX/móvil 2026-09-08
   ========================================================================== */

/* Red de seguridad: alguna ficha (4 en el lote actual) trae una tabla <table>
   "desnuda" en el contenido importado, sin el wrapper .mu-table-wrap que sí
   llevan las demás. Sin esto, una tabla ancha desborda horizontalmente en
   movil y descoloca el resto de la pagina. Se aplica de forma generica a
   cualquier tabla del contenido, lleve o no el wrapper (no hace nada si ya
   esta envuelta y con scroll propio). */
.entry-content table,
.oferta-body table,
.beca-body table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* archive-universidad.php, archive-oferta.php, archive-beca.php y
   taxonomy-ciudad.php anidan su propio ".container" (max-width 1200px)
   directamente dentro de "site-main", que ya trae su propio max-width de
   720px (pensado para paginas de texto tipo pagina/entrada). El resultado
   sin esto: el "container" nunca llega a sus 1200px porque su padre ya lo
   estrangula a 720px, y el grid de tarjetas queda mas estrecho de lo
   previsto en pantallas grandes. No afecta a movil (720px ya es mas ancho
   que cualquier movil), pero es una inconsistencia real de maquetacion que
   se corrige aqui en vez de en cada plantilla.

   CORREGIDO 2026-09-15 (CEO, aviso directo de Óscar viendo /universidad/
   en vivo: "necesitamos distancia entre la ficha y donde empieza el
   footer" -- y luego, explícito, "aplicalo a todas las paginas si no esta
   hecho ya"): el `padding: 0` de aqui anulaba TAMBIEN el padding
   vertical, no solo el horizontal que de verdad hacia falta anular (el
   horizontal ya lo pone `.container` por su cuenta, duplicarlo si se
   deja aqui). Medido con Puppeteer contra la pagina real (no a ojo): el
   hueco entre el final de la rejilla de tarjetas y el footer daba
   exactamente 0px en CUALQUIERA de las 17 plantillas que usan este mismo
   patron site-main > .container (confirmado, no solo /universidad/) --
   la regla de mas abajo (".site-main", con padding-bottom real) nunca
   llegaba a aplicarse porque esta, con mayor especificidad por el
   `:has()`, la pisaba entera. Separado en `padding-inline`/`padding-
   block` para anular SOLO lo horizontal (que si hace falta, evita duplicar
   el padding de `.container`) y mantener el vertical iguales a la
   `.site-main` de base. */
.site-main:has(> .container) {
	max-width: none;
	padding-inline: 0;
	padding-block: 2rem 4.5rem;
}

@media (min-width: 1024px) {
	.site-main:has(> .container) {
		padding-block: 2.5rem 7rem;
	}
}

/* page.php, archive.php e index.php (2026-09-08, ver informe de diseño):
   quitado el sidebar por defecto y aplicado el mismo patron ".container"
   de arriba para que estas plantillas tambien usen el ancho completo en vez
   de quedar encajonadas a los 720px de .site-main + una columna de sidebar
   sin estilo. El TEXTO de las paginas de solo-prosa (legales, etc.) sigue
   teniendo un ancho de lectura comodo: es .entry-content quien lo limita,
   no el contenedor exterior, para no producir lineas de texto absurdamente
   largas en pantallas grandes. Las paginas hub que necesitan mas anchura
   para contenido no-prosa (p.ej. /grados/, ID 413) la consiguen ellas
   mismas rompiendo este limite desde su propio contenido (mismo truco de
   margen negativo a 100vw que ya usa el hero de esa pagina), sin tocar esta
   regla generica ni depender de un selector por ID aqui. */
.page .container > article {
	max-width: var( --wpst-content-width );
	margin-inline: auto;
}

/* /grados/ (página 413) se excluye: rompe este límite ella misma desde su
   propio contenido (wrapper .mu-grados-page a 100vw), forzar aquí un
   max-width en el ancestro dejaría un padding fantasma a los lados de ese
   full-bleed. Ver template-parts/content-page.php + contenido de la página. */
.page-id-413 .container > article {
	max-width: none;
}

/* ==========================================================================
   14. Ficha de universidad (single-universidad.php) — jerarquía visual real
   2026-09-08: antes era "h2 tras h2" sin ninguna tarjeta, banda ni color —
   confirmado con captura real. Esta sección da: bandas/tarjetas reales, y
   donde la ficha trae el color de --uni-area-color (inline, ver PHP), un
   acento de identidad ligado al área de estudio predominante de la
   universidad, sin tocar el acento de marca en el resto del sitio.
   ========================================================================== */
.mu-single-universidad {
	max-width: var(--wpst-wide-width);
	margin-inline: auto;
}

.mu-ficha--universidad .mu-breadcrumb {
	font-size: 0.85rem;
	color: var(--wpst-text-muted);
	margin: 0 0 1.5rem;
}

.mu-ficha--universidad .mu-breadcrumb a {
	color: var(--wpst-accent);
	text-decoration: none;
}

.mu-ficha--universidad .mu-breadcrumb a:hover {
	text-decoration: underline;
}

/* Cabecera: banda con tinte del área predominante (o gris neutro si no hay
   ninguna oferta con área conocida) + acento superior de 4px. */
.mu-uni-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	background: linear-gradient(135deg, var(--uni-area-tint, var(--wpst-bg-alt)) 0%, var(--wpst-bg) 70%);
	border: 1px solid var(--wpst-border);
	border-top: 4px solid var(--uni-area-color, var(--wpst-accent));
	border-radius: var(--wpst-radius-lg);
	padding: 2rem;
	margin-bottom: 2rem;
}

.mu-uni-hero__logo {
	flex-shrink: 0;
	width: 96px;
	height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wpst-bg);
	border: 1px solid var(--wpst-border);
	border-radius: var(--wpst-radius);
	overflow: hidden;
	padding: 8px;
}

.mu-uni-hero__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.mu-uni-hero__body {
	flex: 1 1 320px;
	min-width: 0;
}

.mu-uni-hero .entry-title {
	margin: 0 0 0.75rem;
}

/* Chip que nombra el área predominante — informativo, no interactivo (no es
   un enlace: es un dato calculado, no una taxonomía propia de universidad). */
.mu-uni-area-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--uni-area-tint, var(--wpst-bg-accent));
	color: var(--uni-area-color, var(--wpst-accent));
	font-weight: 700;
	font-size: 0.8125rem;
	padding: 0.375rem 0.875rem;
	border-radius: 999px;
	margin: 0 0 0.75rem;
}

.mu-universidad-layout {
	display: block;
}

.mu-universidad-layout.has-sidebar {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

.mu-universidad-main {
	min-width: 0;
}

/* Contenido importado: algunas fichas traen su fila de "datos clave" y su
   mapa embebido sin las clases mu-stats/mu-stat (se perdieron en el lote de
   importación — ver hallazgo de diseño 2026-09-08, pendiente de que
   mu-redactor-seo/mu-editor-jefe las añadan en origen). Selector estructural
   de respaldo: si un div directo del contenido solo contiene divs con
   <strong> + <span>, se trata visualmente como fila de estadísticas aunque
   no lleve la clase. Se apoya en :has(), ya usado en este mismo archivo. */
.mu-ficha--universidad .entry-content .mu-ficha > div:has(> div > strong):not(.mu-stats):not(.mu-badges) {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 2rem;
}

.mu-ficha--universidad .entry-content .mu-ficha > div:has(> div > strong):not(.mu-stats):not(.mu-badges) > div {
	flex: 1 1 150px;
	background: var(--wpst-bg-alt);
	border: 1px solid var(--wpst-border);
	border-radius: var(--wpst-radius-sm);
	padding: 16px;
	text-align: center;
}

.mu-ficha--universidad .entry-content .mu-ficha > div:has(> div > strong):not(.mu-stats):not(.mu-badges) > div > strong {
	display: block;
	font-size: 1.25rem;
	color: var(--uni-area-color, var(--wpst-accent));
}

.mu-ficha--universidad .entry-content .mu-ficha > div:has(> div > strong):not(.mu-stats):not(.mu-badges) > div > span {
	font-size: 0.8rem;
	color: var(--wpst-text-muted);
}

/* Bloque de mapa embebido (iframe + pie con la dirección) */
.mu-ficha--universidad .entry-content .mu-ficha > div:has(> iframe) {
	margin: 0 0 2rem;
}

.mu-ficha--universidad .entry-content .mu-ficha > div:has(> iframe) p {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	color: var(--wpst-text-muted);
	text-align: center;
}

/* Secciones propias de la plantilla (contacto, titulaciones ofrecidas,
   universidades relacionadas): antes <h2> + <ul> plano sin separación real
   entre bloques. Ahora banda diferenciada con separación consistente. */
.mu-ficha--universidad .mu-contacto,
.mu-ficha--universidad .mu-titulaciones-ofrecidas,
.mu-ficha--universidad .mu-universidades-relacionadas {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--wpst-border);
}

.mu-ficha--universidad .mu-contacto h2,
.mu-ficha--universidad .mu-titulaciones-ofrecidas h2,
.mu-ficha--universidad .mu-universidades-relacionadas h2 {
	font-size: 1.375rem;
	color: var(--uni-area-color, var(--wpst-accent));
	margin-bottom: 1.25rem;
}

.mu-contacto-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--wpst-bg-alt);
	border: 1px solid #d7e6f7;
	border-radius: var(--wpst-radius);
	padding: 1.25rem 1.5rem;
	display: grid;
	gap: 0.75rem;
	box-shadow: 0 4px 16px rgba(30, 100, 180, 0.08);
}

.mu-contacto-lista li {
	font-size: 0.95rem;
}

.mu-contacto-lista a {
	color: var(--wpst-accent);
}

.mu-universidad-sidebar {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

@media (min-width: 900px) {
	.mu-universidad-layout.has-sidebar {
		grid-template-columns: 1fr 300px;
		align-items: start;
	}

	.mu-universidad-sidebar {
		position: sticky;
		top: calc(var(--wpst-header-height) + 20px);
	}
}

@media (max-width: 600px) {
	.mu-uni-hero {
		padding: 1.25rem;
		gap: 1rem;
	}

	.mu-uni-hero__logo {
		width: 72px;
		height: 72px;
	}
}

/* ==========================================================================
   15. Más aire en escritorio — ancho de contenedor ya ampliado arriba
   (--wpst-wide-width), esto añade ritmo vertical algo mayor entre secciones
   en pantallas grandes sin afectar a móvil (confirmado por captura que a
   1440px las secciones se sentían apretadas en vertical, no solo estrechas
   en horizontal).
   ========================================================================== */
@media (min-width: 1024px) {
	.site-main {
		padding-top: 2.5rem;
		padding-bottom: 7rem;
	}

	.oferta-layout,
	.beca-layout {
		gap: 48px;
	}
}

/* ==========================================================================
   16. Paginación — the_posts_pagination() de WordPress, usada en search.php
   y en todos los archive-*.php, no tenía ni una sola regla de CSS en todo el
   tema: salía como enlaces azules subrayados sueltos, pegados al margen
   izquierdo ("1 2 3 … 39 Siguiente →"), la clase de problema exacta que
   motivó este encargo. Una sola definición aquí arregla las cinco plantillas
   a la vez.
   ========================================================================== */
.pagination.navigation {
	margin: 2.5rem 0 2.5rem;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	border-radius: var(--wpst-radius-sm);
	border: 1px solid var(--wpst-border);
	background: var(--wpst-bg);
	color: var(--wpst-text);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: var(--wpst-transition);
}

.pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: var(--wpst-text-muted);
}

.pagination .page-numbers:hover,
.pagination .page-numbers:focus {
	border-color: var(--wpst-accent);
	color: var(--wpst-accent);
}

.pagination .page-numbers.current {
	background: var(--wpst-accent);
	border-color: var(--wpst-accent);
	color: var(--wpst-accent-contrast);
}

.pagination .page-numbers.prev,
.pagination .page-numbers.next {
	padding: 0 1.125rem;
}

/* ==========================================================================
   17. Identidad de área aplicada de forma consistente a TODO el contenido
   de la ficha de universidad (no solo al chip y la cabecera) — sin esto, el
   chip salía teal pero los títulos seguían en azul de marca, una mezcla que
   parece un error y no una decisión de diseño. Si no hay área predominante
   calculada (universidad sin ninguna oferta relacionada todavía), cae
   automáticamente en el acento de marca de siempre — no rompe nada donde no
   hay dato.
   ========================================================================== */
.mu-ficha--universidad .entry-content h2.mu-h2-accent {
	color: var(--uni-area-color, var(--wpst-accent));
	border-left-color: var(--uni-area-color, var(--wpst-accent));
}

.mu-ficha--universidad .entry-content .mu-callout {
	background: var(--uni-area-color, var(--wpst-accent));
	border-color: var(--uni-area-color, var(--wpst-accent));
}

.mu-ficha--universidad .entry-content .mu-block-item,
.mu-ficha--universidad .entry-content .mu-faq-item {
	border-left-color: var(--uni-area-color, var(--wpst-accent));
}

.mu-ficha--universidad .entry-content .mu-stat strong {
	color: var(--uni-area-color, var(--wpst-accent));
}

.mu-ficha--universidad .entry-content .mu-stat--accent {
	background: var(--uni-area-color, var(--wpst-accent));
	border-color: var(--uni-area-color, var(--wpst-accent));
}

.mu-ficha--universidad .entry-content .mu-stat--accent strong {
	color: #fff;
}

.mu-ficha--universidad .entry-content .mu-table-wrap thead tr {
	background: var(--uni-area-color, var(--wpst-accent));
}

.mu-ficha--universidad .entry-content .mu-pill-list a,
.mu-ficha--universidad .entry-content .mu-pill-list span,
.mu-ficha--universidad .mu-titulaciones-ofrecidas .mu-pill-list a,
.mu-ficha--universidad .mu-universidades-relacionadas .mu-pill-list a {
	background: var(--uni-area-tint, var(--wpst-bg-accent));
	color: var(--uni-area-color, var(--wpst-accent));
}

.mu-ficha--universidad .entry-content .mu-pill-list a:hover,
.mu-ficha--universidad .mu-titulaciones-ofrecidas .mu-pill-list a:hover,
.mu-ficha--universidad .mu-universidades-relacionadas .mu-pill-list a:hover {
	background: var(--uni-area-color, var(--wpst-accent));
	color: #fff;
}

/* ==========================================================================
   15. Ficha de titulación (single-titulacion.php) — color por área de estudio
   y layout completo de la plantilla (2026-09-08).

   Hallazgo de diseño 2026-09-08: ningún elemento de esta ficha reflejaba el
   área de estudio de la titulación (badges de nivel académico/área y las 4
   tarjetas de .mu-stats venían en azul genérico --wpst-accent sin importar
   el área, a diferencia de single-universidad.php) — confirmado con captura
   real. Mismo patrón que la sección 14: --uni-area-color/--uni-area-tint se
   fijan inline en el <article> (ver mu_area_top_slug()/mu_area_color_map()
   en functions.php), aquí a partir del area_estudio propio de la titulación
   — no hace falta inferirla de sus ofertas como en universidad, una
   titulación ya tiene su propia taxonomía area_estudio directa.

   Este bloque sustituye el <style> que antes vivía inline dentro de
   single-titulacion.php (ver .bak-diseño de ese archivo), para seguir el
   mismo criterio que universidad: el CSS de las fichas vive en la hoja de
   estilos del tema, no repartido en cada plantilla.
   ========================================================================== */
.mu-titulacion-single {
	max-width: var(--wpst-wide-width);
	margin-inline: auto;
}

.mu-breadcrumbs {
	font-size: 0.85rem;
	color: var(--wpst-text-muted);
	margin-bottom: 1.5rem;
}

.mu-breadcrumbs a {
	color: var(--wpst-accent);
	text-decoration: none;
}

.mu-breadcrumbs a:hover {
	text-decoration: underline;
}

.mu-breadcrumbs span {
	color: var(--wpst-text);
}

.mu-titulacion-layout {
	display: block;
}

.mu-titulacion-layout.has-sidebar {
	display: grid;
	gap: 32px;
	grid-template-columns: 1fr;
}

.mu-titulacion-content {
	min-width: 0; /* previene overflow en grid */
}

/* Cabecera con banda de identidad por área — mismo lenguaje visual que
   .mu-uni-hero en single-universidad.php, reutilizando el .entry-header que
   ya existía en esta plantilla (título + badges) en vez de un wrapper nuevo. */
.mu-ficha--titulacion .entry-header {
	background: linear-gradient(135deg, var(--uni-area-tint, var(--wpst-bg-alt)) 0%, var(--wpst-bg) 70%);
	border: 1px solid var(--wpst-border);
	border-top: 4px solid var(--uni-area-color, var(--wpst-accent));
	border-radius: var(--wpst-radius-lg);
	padding: 1.75rem 2rem;
	margin-bottom: 2rem;
}

.mu-ficha--titulacion .entry-header .entry-title {
	margin-top: 0;
}

.mu-ficha--titulacion .mu-badge--nivel_academico {
	background: var(--uni-area-color, var(--wpst-accent));
	color: var(--wpst-accent-contrast);
}

.mu-ficha--titulacion .mu-badge--nivel_academico:hover {
	filter: brightness(0.88);
	color: var(--wpst-accent-contrast);
}

.mu-ficha--titulacion .mu-badge--area_estudio {
	/* 2026-09-09: el fallback era un verde suelto (#15803d) sin relacion con
	   --wpst-accent -- si una titulacion no resuelve area_estudio, el badge
	   debe caer en el azul de marca como el resto del sitio, no en un verde
	   inventado. */
	background: var(--uni-area-tint, var(--wpst-bg-accent));
	color: var(--uni-area-color, var(--wpst-accent));
	border-color: var(--uni-area-color, var(--wpst-accent));
}

/* Las 4 tarjetas de estadísticas (duración, créditos...) vienen dentro del
   contenido importado (entry-content), igual que en universidad. */
.mu-ficha--titulacion .entry-content .mu-stat--accent {
	background: var(--uni-area-color, var(--wpst-accent));
	border-color: var(--uni-area-color, var(--wpst-accent));
}

.mu-ficha--titulacion .entry-content .mu-stat--accent strong {
	color: #fff;
}

.mu-ficha--titulacion .mu-universidades-que-imparten h2,
.mu-ficha--titulacion .mu-titulaciones-relacionadas h2 {
	color: var(--uni-area-color, var(--wpst-accent));
}

/* .mu-titulaciones-relacionadas sigue al final del articulo (despues de
   entry-content), continuacion de la lectura -- conserva el divisor simple.
   .mu-universidades-que-imparten se movio (2026-09-08, segunda tanda) a
   justo despues de la cabecera/imagen destacada, ANTES del contenido: ya no
   es una continuacion de texto que viene detras, es el primer bloque de
   'decision rapida' que ve el usuario, así que se le da su propio marco de
   tarjeta en vez del divisor de arriba -- distingue visualmente el dato
   verificado (viene de 'oferta' reales) del contenido editorial que sigue. */
.mu-titulaciones-relacionadas {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wpst-border);
}

.mu-universidades-que-imparten {
	margin: 1.5rem 0 2rem;
	padding: 1.25rem 1.5rem 1.5rem;
	background: var(--uni-area-tint, var(--wpst-bg-alt));
	border: 1px solid var(--wpst-border);
	border-radius: var(--wpst-radius-lg);
}

.mu-universidades-que-imparten h2 {
	margin-top: 0;
	font-size: 1.15rem;
}

.mu-universidades-que-imparten .mu-related-list li {
	background: var(--wpst-bg);
}

/* Línea-resumen bajo los badges (2026-09-08, segunda tanda): una frase con
   datos reales agregados (nº de universidades + modalidades), visible sin
   scroll, para comparación rápida -- ver cabecera de single-titulacion.php. */
.mu-titulacion-resumen {
	margin: 0.75rem 0 0;
	font-size: 0.95rem;
	color: var(--wpst-text);
}

.mu-titulacion-resumen strong {
	color: var(--uni-area-color, var(--wpst-accent));
}

.mu-related-list {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.mu-related-list li {
	padding: 10px 14px;
	background: var(--wpst-bg-alt);
	border-radius: var(--wpst-radius);
}

.mu-related-list a {
	color: var(--wpst-text);
	font-weight: 600;
	text-decoration: none;
}

.mu-related-list a:hover {
	color: var(--uni-area-color, var(--wpst-accent));
	text-decoration: underline;
}

.mu-related-oferta-link {
	font-size: 0.85rem;
	color: var(--wpst-text-muted);
	font-weight: 400;
}

/* Sidebar: solo existe en el DOM cuando hay datos agregados reales que
   mostrar (ver single-titulacion.php) — 2026-09-08, sustituye la caja que
   solo repetía "Nivel: Grado", ya visible en un badge, sin aportar nada. */
.mu-titulacion-sidebar {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.mu-titulacion-sidebar .mu-info-box {
	background: var(--wpst-bg-alt);
	padding: 20px;
	border-radius: var(--wpst-radius);
	border: 1px solid #d7e6f7;
	border-top: 3px solid var(--uni-area-color, var(--wpst-accent));
	box-shadow: 0 4px 16px rgba(30, 100, 180, 0.08);
}

.mu-titulacion-sidebar .mu-info-box h3 {
	margin-top: 0;
	color: var(--uni-area-color, var(--wpst-accent));
}

.mu-titulacion-sidebar .mu-info-item strong {
	display: block;
	margin-bottom: 4px;
	font-size: 0.95rem;
}

.mu-titulacion-sidebar .mu-info-item p,
.mu-titulacion-sidebar .mu-info-item ul {
	margin: 4px 0 16px;
	color: var(--wpst-text-muted);
	font-size: 0.9rem;
}

.mu-titulacion-sidebar .mu-info-item ul {
	padding-left: 1.1rem;
}

/* Desktop: sidebar a la derecha, solo cuando .has-sidebar está presente
   (evita reservar una columna de 300px vacía cuando no hay ninguna oferta
   relacionada todavía y el sidebar no se imprime). El offset del sticky usa
   --wpst-header-height + margen, igual que las demás sidebars sticky del
   sitio (ver sección 5 y 14) — antes era "top: 20px" a secas, que con el
   header sticky de ~84px dejaba la caja cortada a la mitad al hacer scroll
   (confirmado con captura real, hallazgo de diseño 2026-09-08). */
@media (min-width: 900px) {
	.mu-titulacion-layout.has-sidebar {
		grid-template-columns: 1fr 300px;
		align-items: start;
	}

	.mu-titulacion-sidebar {
		position: sticky;
		top: calc(var(--wpst-header-height) + 20px);
	}
}

/* Mejoras de rendimiento */
.mu-ad-container {
	content-visibility: auto;
}

/* ==========================================================================
   15. Listado de ciudad (taxonomy-ciudad.php) — rediseño 2026-09-08
   Encargo directo del Consejo ("el diseño es un completo desastre").
   Reutiliza mu-card/mu-badges/mu-pill-list/mu-chip ya existentes (secciones
   8, 10 y cards.css) — solo se añade aquí lo que es exclusivo de esta
   plantilla: cabecera con contexto de comunidad autónoma, barra de filtros
   y las dos variantes nuevas de tarjeta (titulaciones + doble CTA).
   ========================================================================== */
.mu-ciudad-header {
	text-align: left;
}

.mu-ciudad-subtitle {
	color: var(--wpst-text-muted);
	font-size: 1.05rem;
	margin: 0 0 0.5rem;
}

.mu-ciudad-count {
	font-weight: 700;
	color: var(--wpst-accent);
}

.mu-ciudad-description {
	color: var(--wpst-text-muted);
	max-width: 65ch;
}

/* Barra de filtros: chips de una sola línea (envuelven en móvil), mismo
   componente mu-chip que "Áreas de estudio"/"Ciudades" en portada — así el
   usuario reconoce el patrón de interacción en vez de aprender uno nuevo. */
.mu-ciudad-filtros {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin: 0 0 2rem;
	padding: 1rem 1.25rem;
	background: var(--wpst-bg-alt);
	border: 1px solid var(--wpst-border);
	border-radius: var(--wpst-radius);
}

.mu-ciudad-filtro-grupo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.mu-ciudad-filtro-label {
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--wpst-text-muted);
	margin-right: 0.15rem;
}

/* Variante compacta del chip para uso como filtro dentro de una barra densa
   (el mu-chip base de cards.css está pensado para grids sueltos de portada,
   con más padding del que conviene aquí). */
.mu-chip--filtro {
	padding: 0.45rem 0.9rem;
	font-size: 0.875rem;
	border-width: 1px;
	min-height: 36px;
}

.mu-chip--filtro.is-active {
	background: var(--wpst-accent);
	color: var(--wpst-accent-contrast);
	border-color: var(--wpst-accent);
}

.mu-ciudad-filtro-reset {
	margin-left: auto;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wpst-text-muted);
	text-decoration: none;
	white-space: nowrap;
}

.mu-ciudad-filtro-reset:hover,
.mu-ciudad-filtro-reset:focus {
	color: var(--wpst-accent);
	text-decoration: underline;
}

.mu-ciudad-sin-resultados {
	padding: 3rem 1rem;
	text-align: center;
	color: var(--wpst-text-muted);
	background: var(--wpst-bg-alt);
	border-radius: var(--wpst-radius);
}

.mu-ciudad-sin-resultados a {
	font-weight: 600;
}

/* Tarjeta de universidad con titulaciones + doble CTA. mu-card/mu-card__*
   vienen de cards.css (cargado en esta plantilla vía is_archive(), ver
   functions.php); lo de aquí es solo lo que cards.css no cubre porque no lo
   necesita en ningún otro listado (portada/búsqueda no muestran titulaciones
   por tarjeta todavía). */
.mu-card__titulaciones-label {
	margin: 0 0 0.4rem;
	font-size: 0.8125rem;
	font-weight: 600;
	/* 2026-09-14: era --wpst-text-light (#718096), 4.02:1 sobre fondo claro --
	   no llega al 4.5:1 de WCAG AA para texto normal (13px no es "texto grande").
	   --wpst-text-muted da 7.53:1, cumple con margen. Auditoría de contraste. */
	color: var(--wpst-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.mu-pill-list--compact a,
.mu-pill-list--compact span {
	padding: 4px 10px;
	font-size: 0.75rem;
}

.mu-pill-more {
	background: transparent !important;
	/* 2026-09-14: mismo motivo que .mu-card__titulaciones-label -- 4.02:1 no
	   cumple WCAG AA para texto de 12px, aunque sea semi-negrita (el umbral de
	   "texto grande" son 14pt/18.66px en negrita). --wpst-text-muted cumple. */
	color: var(--wpst-text-muted) !important;
	font-weight: 600;
}

/* Dos CTA por tarjeta (titulaciones + ficha): el mu-card__link de cards.css
   trae margin-top:auto pensado para un único enlace — aquí el contenedor
   .mu-card__actions asume ese empuje al fondo de la tarjeta y los dos
   enlaces se colocan uno junto al otro (o apilados si no caben). */
.mu-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin-top: auto;
	padding-top: 0.25rem;
}

.mu-card__actions .mu-card__link {
	margin-top: 0;
}

.mu-card__link--secondary {
	color: var(--wpst-text-muted);
}

.mu-card__link--secondary:hover,
.mu-card__link--secondary:focus {
	color: var(--wpst-accent);
}

/* Ancla de "Ver todas las titulaciones" en single-universidad.php: compensa
   el header sticky (--wpst-header-height, ver sección 1 y 14) para que el
   scroll no deje el título de la sección tapado. */
#titulaciones-ofrecidas {
	scroll-margin-top: calc(var(--wpst-header-height) + 16px);
}

@media (max-width: 640px) {
	.mu-ciudad-filtros {
		gap: 0.75rem;
	}

	.mu-ciudad-filtro-reset {
		margin-left: 0;
		width: 100%;
	}
}

/* ==========================================================================
   PORTADA — liberación del ancho (CEO, 2026-09-08)
   Diagnóstico con captura real a 1440px: el contenido de la home ocupaba una
   columna de ~600-700px con márgenes muertos a los lados, y las 6 tarjetas de
   "Últimas titulaciones" salían apiladas en vertical en vez de en rejilla.
   Causa raíz: ".site-main" limita a --wpst-content-width (720px), pensado para
   páginas de prosa. Las plantillas de archivo ya estaban exentas arriba con
   ".site-main:has(> .container)", pero la portada usa ".mu-band"/".mu-section",
   no ".container", así que se quedó fuera del parche y quedó estrangulada.
   El CSS de rejilla ya era correcto (.mu-card-grid usa auto-fill minmax(320px,1fr)
   en cards.css, y .mu-section ya vale 1320px): no hacía falta rediseñar nada,
   solo dejar de encajonarlo. Al soltar el ancho, .mu-band pasa además a ser
   banda de borde a borde, que es como estaba pensada.
   No afecta a móvil: 720px ya es más ancho que cualquier móvil.
   ========================================================================== */
.site-main.mu-home {
	max-width: none;
	padding: 0;
}

/* Hero: contraste del titular (CEO, 2026-09-08)
   ".mu-hero" declara color:white, pero eso solo se HEREDA, y la regla global
   "h1,h2,...{color:var(--wpst-text)}" de la sección de tipografía la pisa por
   ser una regla directa sobre el elemento. Resultado visible en captura real:
   titular casi negro sobre el degradado azul del hero — contraste insuficiente.
   Se detectó al liberar el ancho de la portada: antes, con el hero encajonado
   en una cajita estrecha, pasaba desapercibido. */
.mu-hero h1,
.mu-hero .mu-hero__intro {
	color: #fff;
}

/* ==========================================================================
   Ficha de titulación — universidades que la imparten (CEO, 2026-09-08)
   Antes: <ul> de filas a ancho completo. En Derecho eran 30 filas apiladas,
   un muro de scroll antes del contenido editorial, y sin ningún dato para
   comparar — solo el nombre repetido y "Ver ficha de esta oferta" 30 veces.
   Ahora: rejilla de tarjetas con ciudad, tipo y modalidad, que es lo que hace
   falta para elegir universidad. Ver captura del 2026-09-08.
   ========================================================================== */
.mu-uni-oferta-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1rem;
	margin: 1.5rem 0 2rem;
}

/* 2026-09-09 (CEO): profundidad real en reposo, no solo al hover -- mismo criterio ya aplicado en .mu-feature de home.css (borde sutil azulado + sombra suave), para que las fichas dejen de sentirse planas. */
.mu-uni-oferta {
	background: #fff;
	border: 1px solid #d7e6f7;
	border-radius: var(--wpst-radius);
	padding: 1rem 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	box-shadow: 0 4px 16px rgba(30, 100, 180, 0.08);
	transition: border-color var(--wpst-transition), box-shadow var(--wpst-transition);
}

.mu-uni-oferta:hover,
.mu-uni-oferta:focus-within {
	border-color: var(--wpst-accent);
	box-shadow: var(--wpst-shadow-sm);
}

.mu-uni-oferta__nombre {
	font-size: 1rem;
	line-height: 1.35;
	margin: 0;
	font-weight: 700;
}

.mu-uni-oferta__nombre a {
	color: var(--wpst-text);
	text-decoration: none;
}

.mu-uni-oferta__nombre a:hover,
.mu-uni-oferta__nombre a:focus {
	color: var(--wpst-accent);
	text-decoration: underline;
}

.mu-uni-oferta__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	font-size: 0.85rem;
	color: var(--wpst-text-muted);
}

.mu-uni-oferta__ciudad {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.mu-uni-oferta__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin: auto 0 0;
	font-size: 0.85rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--wpst-border);
}

.mu-uni-oferta__links a {
	font-weight: 600;
}

.mu-uni-oferta__uni {
	color: var(--wpst-text-muted);
	font-weight: 500 !important;
}

/* ==========================================================================
   Jerarquía tipográfica de secciones (CEO, 2026-09-08)
   Diagnóstico con captura real: en la portada todos los títulos de sección
   pesaban lo mismo y nada guiaba el ojo, mientras que las fichas de
   universidad sí tenían un tratamiento fuerte (h2.mu-h2-accent, con barra de
   acento a la izquierda) — pero aplicado desde el contenido, no desde el tema,
   así que no llegaba al resto del sitio. Aquí se extiende ese MISMO patrón ya
   existente a las cabeceras de sección de portada y archivos, en vez de
   inventar un tratamiento nuevo. No se toca el tamaño base (2rem de home.css)
   para no alterar el ritmo vertical ya ajustado.
   ========================================================================== */
.mu-section > h2,
.mu-band > .mu-section > h2 {
	border-left: 4px solid var(--wpst-accent);
	padding-left: 14px;
	letter-spacing: -0.01em;
}

/* La sección "Por qué elegir" lleva su propio fondo y el título centrado:
   ahí la barra descuadraría, así que se exceptúa y se refuerza con peso. */
.mu-why-us > h2 {
	border-left: 0;
	padding-left: 0;
	font-weight: 800;
}

/* Títulos de archivo (/titulacion/, /universidad/, /ciudad/...): mismo
   tratamiento, para que una página de listado se lea igual que la portada. */
.site-main .page-title,
.mu-ciudad-page .page-title,
.mu-titulaciones-archive .page-title {
	border-left: 4px solid var(--wpst-accent);
	padding-left: 14px;
	letter-spacing: -0.01em;
}

/* ==========================================================================
   Página 404 (CEO, 2026-09-09)
   La plantilla anterior era la del tema base, en inglés y con widgets de blog
   (categorías vacías, archivo mensual) que no aplican a este portal.
   ========================================================================== */
.site-main.mu-404 {
	max-width: var(--wpst-wide-width);
}

.mu-404 .page-title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.mu-404__intro {
	font-size: 1.05rem;
	color: var(--wpst-text-muted);
	max-width: 60ch;
}

.mu-404__buscador {
	margin: 1.5rem 0 2.5rem;
	max-width: 520px;
}

.mu-404__destinos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1rem;
}

.mu-404__destino {
	display: block;
	padding: 1.1rem 1.25rem;
	background: #fff;
	border: 1px solid var(--wpst-border);
	border-left: 4px solid var(--wpst-accent);
	border-radius: var(--wpst-radius);
	text-decoration: none;
	transition: box-shadow var(--wpst-transition), transform var(--wpst-transition);
}

.mu-404__destino:hover,
.mu-404__destino:focus {
	box-shadow: var(--wpst-shadow);
	transform: translateY(-2px);
}

.mu-404__destino strong {
	display: block;
	color: var(--wpst-accent);
	font-size: 1.05rem;
	margin-bottom: 0.25rem;
}

.mu-404__destino span {
	color: var(--wpst-text-muted);
	font-size: 0.9rem;
	line-height: 1.4;
}
/* ==========================================================================
   Páginas hub: /universidades/ y /ciudades/ (CEO, 2026-09-09)
   Encargo directo de Óscar viendo el sitio en vivo -- eran las únicas dos
   páginas del sitio con HTML estático desconectado del sistema de diseño
   (ver page-universidades.php / page-ciudades.php para el detalle del
   porqué). Reutiliza .mu-ciudad-header/.mu-ciudad-subtitle/.mu-ciudad-count/
   .mu-ciudad-filtros/.mu-chip--filtro/.mu-ciudad-sin-resultados TAL CUAL
   (misma sección 15, taxonomy-ciudad.php) -- son genéricos pese al nombre,
   y usar la misma clase en vez de duplicarla es justo lo que evita que
   estas páginas vuelvan a divergir del resto. Solo lo exclusivo de estas
   dos plantillas vive aquí.
   ========================================================================== */

/* Separación entre secciones agrupadas (por comunidad autónoma en
   /universidades/; mapa + listado en /ciudades/). */
.mu-hub-grupo {
	margin-bottom: 2.5rem;
}

.mu-hub-grupo-count {
	font-weight: 400;
	font-size: 0.85rem;
	color: var(--wpst-text-muted);
	margin-left: 0.5rem;
}

h2.mu-h2-accent .mu-hub-grupo-count {
	border-left: none;
	padding-left: 0;
}

/* Mapa interactivo (Leaflet) -- misma caja que ya funcionaba, ahora sin
   estilos inline y con el z-index de sus controles por debajo del menú
   sticky del header. */
.mu-mapa-ciudades {
	width: 100%;
	height: 480px;
	border-radius: var(--wpst-radius);
	margin-bottom: 0.5rem;
	z-index: 1;
}

.mu-mapa-ciudades .leaflet-top,
.mu-mapa-ciudades .leaflet-bottom {
	z-index: 2;
}

/* Buscador de ciudad, encima del listado agrupado. */
.mu-buscador-ciudad {
	max-width: 420px;
	margin: 0 auto 2rem;
}

.mu-buscador-ciudad input {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wpst-border);
	border-radius: var(--wpst-radius);
	font-size: 1rem;
	background: var(--wpst-bg);
}

.mu-buscador-ciudad input:focus {
	outline: 2px solid var(--wpst-accent);
	outline-offset: 1px;
}

/* Bloque por comunidad autónoma dentro de /ciudades/ -- mismo acento de
   marca que el resto del sitio (antes: 5 colores rotando sin relación con
   ningún otro color del tema). */
.mu-ccaa-block {
	margin-bottom: 2rem;
}

/* Buscador + select de /universidad/ (archive-universidad.php, 2026-09-15,
   encargo directo de Óscar en vivo: "es muy pobre... tendría que haber un
   buscador... filtrar por ccaa... si a distancia o presencial"). Viven
   dentro de .mu-ciudad-filtros (misma barra que los chips de tipo/
   modalidad), así que van compactos en vez de a ancho completo como
   .mu-buscador-ciudad (que está solo, centrado, encima del listado). */
.mu-uni-buscador-grupo {
	flex: 1 1 220px;
	min-width: 200px;
}

.mu-uni-buscador,
.mu-uni-select {
	padding: 0.45rem 0.75rem;
	border: 1px solid var(--wpst-border);
	border-radius: var(--wpst-radius);
	font-size: 0.9rem;
	background: var(--wpst-bg);
	color: var(--wpst-text);
}

.mu-uni-buscador {
	width: 100%;
}

.mu-uni-buscador:focus,
.mu-uni-select:focus {
	outline: 2px solid var(--wpst-accent);
	outline-offset: 1px;
}

.mu-ccaa-block__title {
	color: var(--wpst-accent);
	border-left: 4px solid var(--wpst-accent);
	padding-left: 12px;
	font-size: 1.05rem;
	margin: 0 0 0.85rem;
}

/* ==========================================================================
   17. Legibilidad del cuerpo editorial — 2026-09-11
   Queja directa de Óscar: "no ves el texto demasiado plano... sin
   resaltes... que cuesta leer? en las fichas de cada carrera?". Confirmado
   con captura real (1440px) de /titulacion/grado-en-medicina/,
   /titulacion/grado-en-derecho/ y /titulacion/grado-en-farmacia/: el H2 ya
   lleva acento de color (.mu-h2-accent) y el FAQ ya va en caja
   (.mu-faq-item) en el 100% de las 128 titulaciones publicadas -- pero
   ningún artículo usa nunca .mu-box/.mu-callout dentro del cuerpo (0 de
   128), así que los párrafos sueltos entre esas piezas -- que son el grueso
   real del texto que se lee -- solo llevaban `strong{font-weight:600}` del
   MISMO color que el texto normal (ver sección 3): un negrita casi
   imperceptible. Mismo problema en <ul>/<li> sueltas: sin ningún color de
   marcador ni aire entre líneas, indistinguibles de un párrafo normal.
   Esto es 100% CSS -- no se toca ningún post_content. Afecta por igual a
   titulación/universidad (.entry-content) y oferta/beca (.oferta-body/
   .beca-body), que comparten el mismo problema de origen.
   Verificado con captura antes/después, ver informe de diseño 2026-09-11.
   ========================================================================== */

.entry-content strong,
.entry-content b,
.oferta-body strong,
.oferta-body b,
.beca-body strong,
.beca-body b {
	/* Toma el color de identidad del área de estudio si la plantilla lo
	   define (--uni-area-color, fichas de titulación/universidad); si no,
	   cae en el acento de marca oscuro -- más oscuro que el de los enlaces
	   (--wpst-accent) para no confundir "negrita" con "enlace" al no llevar
	   subrayado. */
	color: var(--uni-area-color, var(--wpst-accent-dark));
	font-weight: 700;
}

/* Listas sueltas del contenido editorial (sin clase propia -- las que ya
   tienen una clase, como .mu-related-list o .mu-sidebar-uni-list, siguen
   su propio estilo y no se tocan aquí). */
.entry-content ul:not([class]) li,
.entry-content ol:not([class]) li,
.oferta-body ul:not([class]) li,
.oferta-body ol:not([class]) li,
.beca-body ul:not([class]) li,
.beca-body ol:not([class]) li {
	margin-bottom: 0.6em;
	padding-left: 0.25em;
}

.entry-content ul:not([class]) li::marker,
.oferta-body ul:not([class]) li::marker,
.beca-body ul:not([class]) li::marker {
	color: var(--uni-area-color, var(--wpst-accent));
	font-weight: 700;
}

.entry-content ol:not([class]) li::marker,
.oferta-body ol:not([class]) li::marker,
.beca-body ol:not([class]) li::marker {
	color: var(--uni-area-color, var(--wpst-accent));
	font-weight: 700;
}

.entry-content ul:not([class]),
.entry-content ol:not([class]),
.oferta-body ul:not([class]),
.oferta-body ol:not([class]),
.beca-body ul:not([class]),
.beca-body ol:not([class]) {
	margin: 0 0 1.5em;
}

/* ==========================================================================
   18. Acento de H2 en fichas de grado (oferta) y beca — 2026-09-12
   Auditoría de diseño a petición de Óscar (revisión de "todas las
   plantillas"). Las fichas de titulación/universidad usan `<h2
   class="mu-h2-accent">` con barra de color (ver sección 17 / regla base
   más arriba) porque su post_content se generó directamente en HTML con
   esa clase. Las fichas de grado (antes "oferta") se generaron en Markdown
   (`## Título`) y `mu_fix_markdown_leftovers()` (functions.php) las
   convierte en `<h2>`/`<h3>` sueltos, SIN esa clase — resultado: 335
   fichas de grado muestran encabezados en negro plano mientras el resto
   del sitio usa la barra de acento de color. Confirmado con captura real
   (/universidad/mondragon-unibertsitatea/grado-en-administracion-y-direccion-de-empresas/,
   1440px): mismo H2 base que title/universidad, pero sin ningún tratamiento
   visual. Fix 100% CSS, sin tocar post_content ni el filtro de markdown:
   se replica el mismo estilo de `h2.mu-h2-accent` para cualquier H2 dentro
   de `.oferta-body`/`.beca-body`, clase o no. No afecta a `.entry-content`
   (titulación/universidad), que sigue dependiendo de la clase explícita.
   ========================================================================== */

.oferta-body h2,
.beca-body h2 {
	color: var(--wpst-accent);
	border-left: 4px solid var(--wpst-accent);
	padding-left: 12px;
	margin: 1.75rem 0 0.75rem;
	font-size: 1.35rem;
}

.oferta-body h3,
.beca-body h3 {
	color: var(--wpst-text);
	margin: 1.25rem 0 0.5rem;
}

/* ==========================================================================
   19. Comparador de titulaciones (página "comparar") — 2026-09-13
   Sustituye el placeholder que prometía comparar nota de corte y precio de
   matrícula, datos que no tenemos verificados por universidad y que no se
   van a inventar. El comparador real compara hasta 3 titulaciones entre sí
   por datos que sí existen y son reales: área de conocimiento, nivel
   académico, número de universidades del catálogo que la imparten (campo
   REST `mu_num_universidades`, ver functions.php) y el resumen real de la
   ficha. Todo el marcado vive en el post_content de la página (mismo
   patrón que la Calculadora y el Test de Orientación: HTML+JS
   autocontenido); este bloque solo pone el estilo.
   ========================================================================== */

.mu-comparador {
	max-width: 960px;
	margin: 0 auto;
}

.mu-comparador__selectores {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-end;
	margin: 24px 0;
}

.mu-comparador__campo {
	flex: 1 1 220px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mu-comparador__campo label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wpst-text-muted);
}

.mu-comparador__campo select {
	padding: 10px 12px;
	border: 1px solid var(--wpst-border-dark);
	border-radius: 8px;
	font-size: 0.95rem;
	background: var(--wpst-bg);
	color: var(--wpst-text);
}

.mu-comparador__boton {
	flex: 0 0 auto;
	background: var(--wpst-accent);
	color: var(--wpst-accent-contrast);
	border: none;
	border-radius: 8px;
	padding: 11px 24px;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
}

.mu-comparador__boton:hover {
	background: var(--wpst-accent-dark);
}

.mu-comparador__aviso {
	background: var(--wpst-bg-accent);
	border-left: 4px solid var(--wpst-accent);
	border-radius: 8px;
	padding: 12px 16px;
	font-size: 0.88rem;
	color: var(--wpst-text-muted);
	margin: 0 0 24px;
}

.mu-comparador__tabla {
	display: grid;
	gap: 1px;
	background: var(--wpst-border);
	border: 1px solid var(--wpst-border);
	border-radius: 10px;
	overflow: hidden;
	margin: 24px 0;
}

.mu-comparador__fila {
	display: grid;
	background: var(--wpst-bg);
}

.mu-comparador__fila--cabecera {
	background: var(--wpst-bg-alt);
}

.mu-comparador__celda {
	padding: 14px 16px;
	background: var(--wpst-bg);
	font-size: 0.92rem;
	color: var(--wpst-text);
}

.mu-comparador__celda--etiqueta {
	background: var(--wpst-bg-alt);
	font-weight: 600;
	color: var(--wpst-text-muted);
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.mu-comparador__celda--titulo {
	font-weight: 700;
	font-size: 1.05rem;
}

.mu-comparador__celda--titulo a {
	color: var(--wpst-accent);
	text-decoration: none;
}

.mu-comparador__celda--titulo a:hover {
	text-decoration: underline;
}

.mu-comparador__num {
	font-weight: 700;
	color: var(--wpst-accent);
}

@media (max-width: 700px) {
	.mu-comparador__tabla {
		font-size: 0.85rem;
	}
	.mu-comparador__celda {
		padding: 10px 12px;
	}
}

/* ==========================================================================
   20. Formulario de contacto real (página "contacto") — 2026-09-14
   Sustituye el mailto: directo que había mientras no funcionaba el SMTP
   del holding. Ahora hay backend real (admin-post.php + wp_mail(), sin
   plugin) — ver page-contacto.php. Reutiliza los tokens --wpst-* ya
   existentes y los estilos base de input/textarea (línea ~515), solo
   añade el layout de dos columnas y el checkbox RGPD.
   ========================================================================== */

.mu-contacto {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	gap: 2.5rem;
	align-items: start;
}

.mu-contacto__info {
	background: var(--wpst-bg-alt);
	border: 1px solid var(--wpst-border);
	border-radius: var(--wpst-radius);
	padding: 1.75rem;
}

.mu-contacto__info h2 {
	margin-top: 0;
	font-size: 1.1rem;
}

.mu-contacto__info ul {
	margin: 0.75rem 0 0;
	padding-left: 1.1rem;
	color: var(--wpst-text-muted);
	font-size: 0.92rem;
	line-height: 1.6;
}

.mu-contacto__aviso {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wpst-border);
	font-size: 0.85rem;
	color: var(--wpst-text-muted);
}

/* Capa informativa RGPD colapsada por defecto (2026-09-15, petición de Óscar
   para las 8 marcas) -- el texto legal completo sigue ahí, solo deja de
   pesar visualmente. .mu-contacto__aviso conserva su propio estilo dentro. */
.mu-contacto__rgpd-detalle summary {
	margin-top: 0;
	font-size: 1.1rem;
	font-weight: 700;
	cursor: pointer;
	color: var(--wpst-text);
}

.mu-contacto__rgpd-detalle summary:hover,
.mu-contacto__rgpd-detalle summary:focus {
	color: var(--wpst-accent);
}

.mu-contacto__rgpd-detalle ul {
	margin: 0.75rem 0 0;
	padding-left: 1.1rem;
	color: var(--wpst-text-muted);
	font-size: 0.92rem;
	line-height: 1.6;
}

.mu-contacto__rgpd-detalle[open] summary {
	margin-bottom: 0.5rem;
}

.mu-contacto__form {
	background: var(--wpst-bg);
	border: 1px solid var(--wpst-border);
	border-radius: var(--wpst-radius);
	padding: 1.75rem;
}

.mu-contacto__campo {
	margin-bottom: 1.1rem;
}

.mu-contacto__campo label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
	font-size: 0.92rem;
}

.mu-contacto__campo input,
.mu-contacto__campo textarea {
	width: 100%;
}

.mu-contacto__rgpd {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 1.3rem 0;
	font-size: 0.85rem;
	color: var(--wpst-text-muted);
	line-height: 1.5;
}

.mu-contacto__rgpd input[type="checkbox"] {
	width: auto;
	margin-top: 0.2rem;
	flex-shrink: 0;
}

.mu-contacto__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mu-contacto__mensaje {
	padding: 1rem 1.25rem;
	border-radius: var(--wpst-radius);
	margin-bottom: 1.5rem;
	font-size: 0.92rem;
}

.mu-contacto__mensaje--ok {
	background: #E7F5EC;
	border: 1px solid #A8DDBB;
	color: #1E6B3A;
}

.mu-contacto__mensaje--error {
	background: #FDEDEE;
	border: 1px solid #F3BFC4;
	color: #A32C36;
}

@media (max-width: 800px) {
	.mu-contacto {
		grid-template-columns: 1fr;
	}
}