/* =====================================================================================
   Portada, cabecera y pie UNT (ticket WEB-002, 2026-11-12)

   Se carga después de unt-tema.css. Todas las clases llevan el prefijo "u-" para no chocar con
   las de la plantilla (Bootstrap 3 + ThemeMascot), que siguen usando las páginas internas.
   Los colores salen de las variables de unt-tema.css (:root).

   Identidad propia, no de plantilla:
     - Arcos: las fotos se recortan con el arco de medio punto de las casonas de Trujillo.
     - Trama: rombos escalonados inspirados en los frisos de adobe de Chan Chan (dibujo original).
     - Sello "Universidad bicentenaria · 1824".
     - Tipografía: Fraunces (títulos) + Instrument Sans (texto), de Google Fonts.
   Detalle y cómo mantenerlo: docs/DISENO.md.
   ===================================================================================== */

:root {
	--u-noche: #0B1F44;
	/* Dorado para TEXTO sobre fondo claro. El dorado oscuro del tema (#BD8E07) da 2.7-3.0 de
	   contraste y la norma pide 4.5 para letra chica (Lighthouse, 2026-11-14); este da 4.7-5.2. */
	--u-dorado-texto: #8A6700;
	--u-papel: #F7F3EA;
	--u-linea: #E4DFD3;
	--u-tinta: #161B26;
	--u-tinta-suave: #556070;
	--u-dorado-claro: #F6D77A;
	--u-serif: 'Fraunces', Georgia, serif;
	--u-sans: 'Instrument Sans', 'Segoe UI', Arial, sans-serif;
}

.u-trama { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23E6AD09' stroke-width='2'%3E%3Cpath d='M24 4l8 8-8 8-8-8z'/%3E%3Cpath d='M24 10l2 2-2 2-2-2z'/%3E%3Cpath d='M0 28l8 8-8 8M48 28l-8 8 8 8'/%3E%3Cpath d='M4 24h8M36 24h8M24 28v8'/%3E%3C/g%3E%3C/svg%3E"); }
.u-friso { height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 14V10h4V6h4V2h4v4h4v4h4v4' fill='none' stroke='%23E6AD09' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: repeat-x; }
.u-contenedor { width: min(1240px, 100% - 40px); margin: 0 auto; }

/* ---------- Cabecera (todas las páginas) ------------------------------------------------- */
.u-barra { background: var(--u-noche); color: #C8D2E6; font-family: var(--u-sans); font-size: 13.5px; }
.u-barra .u-contenedor { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; min-height: 38px; flex-wrap: wrap; padding: 4px 0; }
.u-barra nav { display: flex; gap: 6px 18px; flex-wrap: wrap; }
.u-barra a { color: #C8D2E6 !important; }
.u-barra a:hover { color: var(--u-dorado-claro) !important; }
.u-barra .u-legal a { color: #fff !important; font-weight: 600; }
.u-marca { background: #fff; border-bottom: 1px solid var(--u-linea); }
.u-marca .u-contenedor { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 92px; }
.u-marca .u-escudo img { height: 66px; width: auto; }
.u-btn-buscar { display: flex; align-items: center; gap: 10px; border: 1px solid var(--u-linea); background: #fff; border-radius: 30px; padding: 10px 14px 10px 16px;
	color: var(--u-tinta-suave); font-family: var(--u-sans); font-size: 15px; min-width: 300px; cursor: pointer; }
.u-btn-buscar:hover { border-color: var(--unt-azul); }
.u-btn-buscar kbd { margin-left: auto; font-family: var(--u-sans); font-size: 11px; background: none; color: var(--u-tinta-suave); border: 1px solid var(--u-linea); border-radius: 4px; padding: 1px 6px; box-shadow: none; }
/* ---------- Menú principal (menuzord) ----------------------------------------------------
   Se conservan su HTML, sus ~200 enlaces y su JavaScript (abre al pasar el mouse; en pantallas
   de hasta 1000 px se vuelve el menú de hamburguesa). Solo cambia el aspecto, para que hable el
   mismo idioma que la portada: franja azul institucional de ancho completo bajo el escudo (la plantilla la
   dejaba "montada" 35 px sobre la portada, en una caja), subrayado dorado en vez de bloque dorado,
   paneles blancos con títulos en Fraunces y enlaces legibles (antes 10 px, con "»" y líneas
   punteadas).
   Los selectores empiezan con #header para ganarle a la plantilla, al skin "boxed" y a unt-tema.css
   sin usar !important. */
#header .header-nav .header-nav-wrapper,
#header .header-nav .header-nav-wrapper.scroll-to-fixed-fixed { background: var(--unt-azul); box-shadow: none; }
#header .header-nav .header-nav-wrapper.scroll-to-fixed-fixed { box-shadow: 0 8px 24px rgba(11,31,68,.25); }
#header .header-nav .header-nav-wrapper nav.menuzord,
#header .header-nav .header-nav-wrapper:not(.scroll-to-fixed-fixed) nav { background: transparent; }
#header .menuzord-menu,
#header .menuzord-menu ul.dropdown li a,
#header .menuzord-menu > li > .megamenu { font-family: var(--u-sans); }

/* Primer nivel: texto claro y una línea dorada al pasar el mouse. El "active" fijo que trae el
   HTML en "Universidad" se neutraliza: marcaba siempre el mismo ítem, en cualquier página. */
#header .menuzord-menu > li > a,
#header .menuzord.blue .menuzord-menu > li.active > a { color: #E6ECF7; background: transparent; font-weight: 600; font-size: 15px; letter-spacing: .1px; position: relative; }
#header .menuzord.blue .menuzord-menu > li:hover > a { color: #fff; background: rgba(255,255,255,.06); }
#header .menuzord-menu > li > a .indicator { color: var(--u-dorado-claro); }

/* Paneles: blancos, borde superior dorado, esquinas inferiores redondeadas */
#header .menuzord-menu > li > .megamenu,
#header .menuzord-menu ul.dropdown { background: #fff; border-top: 3px solid var(--unt-dorado); box-shadow: 0 24px 48px rgba(11,31,68,.18); }
/* Pregrado (45 carreras + 13 facultades) es más alto que la pantalla: el panel se desplaza por dentro */
#header .menuzord-menu > li > .megamenu { border-radius: 0 0 16px 16px; padding: 30px 34px 26px; overflow-x: hidden; overflow-y: auto; max-height: calc(100vh - 200px); overscroll-behavior: contain; }
/* Un toque de trama Chan Chan en la esquina del panel grande */
#header .menuzord-menu > li > .megamenu::after { content: ""; position: absolute; right: 0; bottom: 0; width: 240px; height: 140px; pointer-events: none; opacity: .18;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23E6AD09' stroke-width='2'%3E%3Cpath d='M24 4l8 8-8 8-8-8z'/%3E%3Cpath d='M24 10l2 2-2 2-2-2z'/%3E%3Cpath d='M0 28l8 8-8 8M48 28l-8 8 8 8'/%3E%3Cpath d='M4 24h8M36 24h8M24 28v8'/%3E%3C/g%3E%3C/svg%3E");
	-webkit-mask-image: linear-gradient(135deg, transparent 30%, #000); mask-image: linear-gradient(135deg, transparent 30%, #000); }
#header .menuzord-menu > li > .megamenu .megamenu-row,
#header .menuzord-menu > li > .megamenu .megamenu-row:first-child { margin-top: 0; position: relative; z-index: 1; }
#header .menuzord-menu > li > .megamenu .megamenu-row + .megamenu-row { margin-top: 22px; }
#header .menuzord-menu > li > .megamenu .megamenu-col-title { font-family: var(--u-serif); font-weight: 500; font-size: 20px; line-height: 1.25; color: var(--u-noche);
	margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--u-linea); position: relative; }
#header .menuzord-menu > li > .megamenu .megamenu-col-title::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 36px; height: 2px; background: var(--unt-dorado); }
#header .menuzord-menu > li > .megamenu .megamenu-col-title:empty { display: none; }
/* list-dashed de la plantilla pone la línea punteada con !important: solo así se quita */
#header .menuzord-menu > li > .megamenu .megamenu-row ul li { font-size: 15px; padding: 0; margin: 0; border: 0 !important; list-style: none; }
#header .menuzord-menu > li > .megamenu .megamenu-row ul.list-icon li::before,
#header .menuzord-menu > li > .megamenu .megamenu-row ul.list-icon li:before { content: none; display: none; }
#header .menuzord-menu > li > .megamenu .megamenu-row ul li a { display: block; padding: 6px 0; color: var(--u-tinta); line-height: 1.4; transition: color .15s, transform .15s; }
#header .menuzord-menu > li > .megamenu .megamenu-row ul li a:hover,
#header .menuzord-menu > li > .megamenu .megamenu-row ul li:hover > a { color: var(--unt-azul); padding-left: 0; transform: translateX(4px); }

/* Desplegables simples (Direcciones, Gestión, Enlaces…) y sus submenús */
#header .menuzord-menu ul.dropdown { border-radius: 0 0 12px 12px; padding: 8px 0; min-width: 270px; }
#header .menuzord-menu ul.dropdown ul.dropdown { border-radius: 12px; border-top-width: 3px; }
#header .menuzord-menu ul.dropdown li a { color: var(--u-tinta); font-size: 14.5px; line-height: 1.4; padding: 9px 20px; background: transparent; border: 0; }
#header .menuzord.blue .menuzord-menu ul.dropdown li:hover > a,
#header .menuzord .menuzord-menu ul.dropdown li:hover > a { background: var(--u-papel); color: var(--unt-azul); }
#header .menuzord-menu ul.dropdown li a .indicator { color: var(--unt-dorado); }

@media (min-width: 1001px) {
	/* La barra deja de estar "montada" sobre la portada: va en su lugar, a lo ancho */
	#header .header-nav .header-nav-wrapper:not(.scroll-to-fixed-fixed) { position: relative; margin-top: 0; }
	#header .header-nav .container { width: min(1240px, 100% - 40px); padding: 0; }
	#header .menuzord-menu > li { padding: 0; }
	#header .menuzord-menu > li > a { padding: 17px 15px; }
	#header .menuzord-menu > li > a::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 0; height: 3px; background: var(--unt-dorado);
		transform: scaleX(0); transform-origin: left; transition: transform .2s; }
	#header .menuzord-menu > li:hover > a::after { transform: scaleX(1); }
	#header .menuzord-menu ul.dropdown,
	#header .menuzord-menu > li > .megamenu { top: 100%; }
	#header .menuzord-menu ul.dropdown ul.dropdown { top: -8px; }
}
@media (max-width: 1000px) {
	/* Menú de hamburguesa: franja azul y lista clara */
	#header .menuzord-responsive .showhide em { background: #fff; }
	/* Al abrirse, la lista es blanca: el texto va oscuro (si no, quedaba blanco sobre blanco) */
	#header .menuzord-responsive .menuzord-menu { background: #fff; }
	#header .menuzord-responsive .menuzord-menu > li > a,
	#header .menuzord.blue.menuzord-responsive .menuzord-menu > li.active > a { color: var(--u-noche); background: transparent; border-bottom: 1px solid var(--u-linea); }
	#header .menuzord.blue.menuzord-responsive .menuzord-menu > li:hover > a { color: var(--unt-azul); background: var(--u-papel); }
	#header .menuzord-responsive .menuzord-menu > li > a .indicator { color: var(--unt-dorado); }
	#header .menuzord-responsive .menuzord-menu > li > .megamenu { padding: 18px 20px; border-radius: 0; }
}
/* Celular: el menú (menuzord pasa a hamburguesa a los 900 px) llegaba desplegado —420 px de
   enlaces— hasta que corría su script, que lo cerraba y subía toda la página: era el mayor salto
   de la carga (Lighthouse, 2026-11-14). Se oculta desde el CSS y se reserva el alto de la franja
   con el botón. Al abrirlo, menuzord pone display en línea y eso le gana a esta regla. */
@media (max-width: 900px) {
	#header #menuzord { min-height: 46px; }
	#header #menuzord .menuzord-menu { display: none; }
	/* La barra de atención al ciudadano en una sola línea: con la fuente final pasaba a dos y
	   empujaba todo 29 px hacia abajo. Si no entra, se desliza de costado. */
	.u-barra .u-legal { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
	.u-barra .u-legal::-webkit-scrollbar { display: none; }
}

/* ---------- Portada ------------------------------------------------------------------------ */
.u-portada { font-family: var(--u-sans); color: var(--u-tinta); font-size: 17px; line-height: 1.6; }
.u-portada h1, .u-portada h2, .u-portada h3, .u-portada h4 { font-family: var(--u-serif); font-weight: 500; letter-spacing: -.4px; text-transform: none; margin: 0; }
.u-portada a { text-decoration: none; }
.u-portada img { max-width: 100%; display: block; }

.u-heroe { position: relative; background: var(--u-noche); color: #fff; overflow: hidden; }
.u-heroe > .u-trama { position: absolute; inset: 0; opacity: .07; }
.u-heroe .u-contenedor { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; padding: 76px 0 84px; }
.u-ante { display: inline-flex; align-items: center; gap: 10px; color: var(--u-dorado-claro); font-size: 13px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; }
.u-ante::before { content: ""; width: 34px; height: 2px; background: var(--unt-dorado); }
.u-heroe h1 { color: #fff; font-size: clamp(42px, 6vw, 84px); line-height: 1.02; letter-spacing: -1.5px; margin: 20px 0 22px; }
.u-heroe h1 em { color: var(--unt-dorado); font-style: italic; }
.u-bajada { font-size: 19px; color: #C9D3E8; max-width: 520px; margin: 0 0 32px; }
.u-buscador { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 560px; background: #fff; color: var(--u-tinta-suave); border: 0;
	border-radius: 14px; padding: 18px 20px; font-family: var(--u-sans); font-size: 16.5px; text-align: left; box-shadow: 0 18px 40px rgba(0,0,0,.35); cursor: pointer; }
.u-buscador .u-sug { margin-left: auto; font-size: 13px; color: var(--unt-azul); font-weight: 700; white-space: nowrap; }
.u-atajos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.u-atajos a, .u-atajos button { background: rgba(255,255,255,.08); color: #E6ECF7; border: 1px solid rgba(255,255,255,.18); border-radius: 20px; padding: 6px 14px; font-size: 14px; font-family: var(--u-sans); cursor: pointer; }
.u-atajos a:hover, .u-atajos button:hover { background: rgba(230,173,9,.18); border-color: var(--unt-dorado); color: #fff; }

.u-collage { position: relative; height: 500px; order: 2; } /* va primero en el HTML; en escritorio, a la derecha */
.u-arco { position: absolute; overflow: hidden; border-radius: 999px 999px 14px 14px; box-shadow: 0 30px 60px rgba(0,0,0,.4); }
.u-arco img { width: 100%; height: 100%; object-fit: cover; }
.u-arco.u-grande { right: 0; top: 0; width: 74%; height: 100%; border: 6px solid rgba(255,255,255,.08); }
.u-arco.u-chico { left: 0; bottom: 34px; width: 44%; height: 58%; border: 6px solid var(--u-noche); }
.u-sello { position: absolute; left: 22%; top: 18px; width: 132px; height: 132px; border-radius: 50%; background: var(--unt-dorado); color: var(--u-noche);
	display: grid; place-items: center; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.u-sello svg { position: absolute; inset: 0; animation: u-girar 26s linear infinite; }
.u-sello b { font-family: var(--u-serif); font-size: 30px; line-height: 1; position: relative; font-weight: 700; }
@keyframes u-girar { to { transform: rotate(360deg); } }

.u-admision { background: var(--unt-dorado); color: var(--u-noche); }
.u-admision .u-contenedor { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: 20px 0; }
.u-admision .u-titulo { font-family: var(--u-serif); font-size: 26px; font-weight: 700; line-height: 1.1; }
.u-admision ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.u-admision li a { display: block; background: rgba(255,255,255,.55); border-radius: 10px; padding: 8px 14px; font-size: 14.5px; line-height: 1.3; color: var(--u-noche); }
.u-admision li a:hover { background: #fff; }
.u-admision li small { display: block; font-size: 12px; opacity: .75; }
.u-btn-noche { display: inline-flex; gap: 8px; align-items: center; background: var(--u-noche); color: #fff !important; font-weight: 700; border-radius: 10px; padding: 13px 20px; white-space: nowrap; }
.u-btn-noche:hover { background: var(--unt-azul); }

.u-seccion { padding: 92px 0; }
.u-papel { background: var(--u-papel); }
.u-cabeza { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: end; margin-bottom: 40px; }
.u-num { font-family: var(--u-serif); font-size: 15px; color: var(--u-dorado-texto); font-weight: 700; border: 1.5px solid var(--unt-dorado); border-radius: 50%; width: 42px; height: 42px; display: grid; place-items: center; }
.u-cabeza h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.05; color: var(--u-noche); }
.u-cabeza h2 em { font-style: italic; color: var(--unt-azul); }
.u-mas { font-weight: 700; color: var(--unt-azul) !important; border-bottom: 2px solid var(--unt-dorado); padding-bottom: 2px; white-space: nowrap; }
.u-mas:hover { color: var(--unt-dorado-oscuro) !important; }
.u-meta { font-size: 12.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--u-dorado-texto); }

/* Soy... */
.u-perfiles { display: grid; grid-template-columns: 300px 1fr; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 50px rgba(11,31,68,.10); }
.u-pestanas { background: var(--u-noche); padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.u-pestanas .u-rotulo { color: var(--u-dorado-claro); font-family: var(--u-serif); font-style: italic; font-size: 22px; padding: 6px 14px 12px; }
.u-pestanas button { text-align: left; background: none; border: 0; color: #C8D2E6; padding: 12px 14px; border-radius: 10px; font-weight: 600; font-size: 16px; font-family: var(--u-sans); display: flex; justify-content: space-between; cursor: pointer; }
.u-pestanas button:hover { background: rgba(255,255,255,.06); color: #fff; }
.u-pestanas button[aria-selected="true"] { background: var(--unt-dorado); color: var(--u-noche); }
.u-panel { padding: 34px 38px; }
.u-panel[hidden] { display: none; }
.u-panel h3 { font-size: 28px; margin: 0 0 6px; color: var(--u-noche); }
.u-panel > p { color: var(--u-tinta-suave); margin: 0 0 22px; }
.u-enlaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.u-enlaces a { border: 1px solid var(--u-linea); border-radius: 12px; padding: 14px 34px 14px 16px; font-weight: 600; color: var(--u-noche); position: relative; transition: border-color .2s, transform .2s; }
.u-enlaces a small { display: block; font-weight: 400; color: var(--u-tinta-suave); font-size: 13.5px; }
.u-enlaces a::after { content: "↗"; position: absolute; right: 14px; top: 12px; color: var(--unt-dorado-oscuro); }
.u-enlaces a:hover { border-color: var(--unt-dorado); transform: translateY(-2px); }

/* Destacados (banners del panel) */
.u-destacados { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(320px, 1fr); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
.u-destacados figure { margin: 0; scroll-snap-align: start; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px rgba(11,31,68,.12); background: #fff; }
.u-destacados img { width: 100%; aspect-ratio: 1920 / 820; object-fit: cover; }
.u-destacados a { display: block; }
.u-destacados a img { transition: transform .5s; }
.u-destacados a:hover img, .u-destacados a:focus-visible img { transform: scale(1.03); }
.u-destacados a:focus-visible { outline: 3px solid var(--unt-dorado); outline-offset: -3px; }

/* Noticias como revista */
.u-revista { display: grid; grid-template-columns: 1.25fr 1fr; gap: 36px; }
.u-principal { position: relative; display: block; color: inherit; }
.u-principal .u-foto { border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--u-papel); }
.u-principal .u-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.u-principal:hover .u-foto img { transform: scale(1.03); }
.u-principal .u-texto { position: relative; margin: -90px 28px 0; background: #fff; border-radius: 14px; padding: 24px 26px; box-shadow: 0 16px 40px rgba(11,31,68,.14); border-top: 4px solid var(--unt-dorado); }
.u-principal h3 { font-size: 30px; line-height: 1.15; margin: 8px 0 10px; color: var(--u-noche); }
.u-principal p { margin: 0; color: var(--u-tinta-suave); }
.u-secundarias a { display: grid; grid-template-columns: 52px 1fr 120px; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--u-linea); color: inherit; }
.u-secundarias a:first-child { padding-top: 0; }
.u-secundarias .u-n { font-family: var(--u-serif); font-size: 40px; color: var(--u-linea); line-height: 1; transition: color .2s; }
/* El número es adorno (claro a propósito): va como contenido generado para que no se lea como texto. */
.u-secundarias .u-n::before { content: attr(data-n); }
.u-secundarias a:hover .u-n { color: var(--unt-dorado); }
.u-secundarias h4 { font-size: 19px; line-height: 1.25; margin: 4px 0 0; color: var(--u-noche); }
.u-secundarias img { width: 120px; height: 84px; object-fit: cover; border-radius: 10px; }

/* Historia */
.u-historia { position: relative; background: var(--u-noche); color: #fff; overflow: hidden; }
.u-historia > .u-trama { position: absolute; inset: 0; opacity: .05; }
.u-historia .u-contenedor { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; padding: 96px 0; }
.u-historia .u-foto { border-radius: 999px 999px 18px 18px; overflow: hidden; aspect-ratio: 4 / 5; }
.u-historia .u-foto img { width: 100%; height: 100%; object-fit: cover; }
.u-historia .u-meta { color: var(--u-dorado-claro); }
.u-historia blockquote { font-family: var(--u-serif); font-style: italic; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.3; margin: 18px 0 24px; padding: 0; border: 0; color: #fff; }
.u-historia blockquote::before { content: "\201C"; display: block; font-size: 90px; line-height: .6; color: var(--unt-dorado); font-style: normal; }
.u-historia h3 { font-size: clamp(26px, 3vw, 40px); color: #fff; margin: 14px 0 18px; line-height: 1.15; }
.u-historia .u-autor { color: #C8D2E6; }
.u-historia .u-autor b { color: #fff; display: block; }
.u-historia .u-leer { display: inline-block; margin-top: 18px; color: var(--u-dorado-claro) !important; font-weight: 700; }
.u-cifras { display: flex; gap: 40px; margin-top: 36px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.15); flex-wrap: wrap; }
.u-cifras b { font-family: var(--u-serif); font-size: 44px; font-weight: 500; color: var(--unt-dorado); display: block; line-height: 1; }
.u-cifras span { font-size: 14px; color: #C8D2E6; }

/* Carreras */
.u-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.u-filtros button { border: 1.5px solid var(--u-linea); background: #fff; border-radius: 30px; padding: 8px 16px; font-weight: 600; font-size: 14.5px; color: var(--u-noche); font-family: var(--u-sans); cursor: pointer; }
.u-filtros button[aria-pressed="true"] { background: var(--u-noche); color: #fff; border-color: var(--u-noche); }
.u-filtros input { flex: 1 1 220px; border: 1.5px solid var(--u-linea); border-radius: 30px; padding: 8px 18px; font-family: var(--u-sans); font-size: 15px; }
.u-carreras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.u-carrera { background: #fff; border: 1px solid var(--u-linea); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; color: inherit; transition: border-color .2s, box-shadow .2s; }
.u-carrera[hidden] { display: none; }
.u-carrera:hover { border-color: var(--unt-dorado); box-shadow: 0 8px 20px rgba(11,31,68,.08); }
/* Carrera sin página que funcione (ni propia ni de su facultad): se muestra, pero no invita al clic. */
.u-carrera:not([href]) { cursor: default; }
.u-carrera:not([href]):hover { border-color: var(--u-linea); box-shadow: none; }
.u-carrera b { color: var(--u-noche); font-weight: 600; line-height: 1.3; }
.u-carrera small { color: var(--u-tinta-suave); font-size: 13px; }
.u-ver-todas { margin-top: 18px; border: 1.5px solid var(--u-noche); background: transparent; color: var(--u-noche); border-radius: 30px; padding: 10px 22px; font-family: var(--u-sans); font-weight: 700; cursor: pointer; }
.u-ver-todas:hover { background: var(--u-noche); color: #fff; }
.u-ver-todas[hidden] { display: none; }
.u-conteo { color: var(--u-tinta-suave); font-size: 14px; margin-top: 16px; }

/* Comunicados */
.u-afiches { display: grid; grid-auto-flow: column; grid-auto-columns: 240px; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
.u-afiches a { scroll-snap-align: start; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--u-linea); transition: box-shadow .2s, transform .2s; }
.u-afiches a:hover { box-shadow: 0 10px 26px rgba(11,31,68,.14); transform: translateY(-3px); }
.u-afiches img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; background: var(--u-papel); }

/* Convocatorias */
.u-tabla { border-top: 2px solid var(--u-noche); }
.u-fila { display: grid; grid-template-columns: 1fr 170px 130px; gap: 20px; align-items: center; padding: 18px 4px; border-bottom: 1px solid var(--u-linea); color: inherit; transition: background .2s; }
.u-fila:hover { background: var(--u-papel); }
.u-fila b { font-weight: 600; color: var(--u-noche); }
.u-fila small { display: block; color: var(--u-tinta-suave); font-size: 13.5px; }
.u-fila .u-fecha { font-size: 14.5px; color: var(--u-tinta-suave); }
.u-estado { justify-self: start; font-size: 12.5px; font-weight: 700; border-radius: 20px; padding: 4px 12px; }
.u-abierta { background: #E2F3E7; color: #1C6B36; }
.u-cierra { background: #FDF0CC; color: #8A6400; }
.u-cerrada { background: #E7ECF6; color: var(--unt-azul); }

/* Videos */
.u-videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.u-video { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--u-noche); }
.u-video img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .2s, transform .5s; }
.u-video:hover img { opacity: 1; transform: scale(1.03); }
.u-video::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(230,173,9,.95); }
.u-video::after { content: ""; position: absolute; z-index: 2; left: 50%; top: 50%; margin: -11px 0 0 -6px; border-left: 20px solid var(--u-noche); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.u-video span { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 30px 16px 12px; background: linear-gradient(transparent, rgba(11,31,68,.9)); color: #fff; font-weight: 600; font-size: 15px; line-height: 1.3; }

/* Rector */
.u-rector { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.u-rector .u-texto { font-size: 17px; color: var(--u-tinta); }
.u-rector .u-texto p { margin: 0 0 12px; }
.u-rector iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 14px; }
/* Miniatura del video que se cambia por el reproductor al hacer clic (index.aspx.cs, Rector). */
.u-yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--u-noche); cursor: pointer; }
.u-yt img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .2s; }
.u-yt:hover img, .u-yt:focus-visible img { opacity: 1; }
.u-yt::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(230,173,9,.95); }
.u-yt::after { content: ""; position: absolute; z-index: 2; left: 50%; top: 50%; margin: -12px 0 0 -7px; border-left: 22px solid var(--u-noche); border-top: 12px solid transparent; border-bottom: 12px solid transparent; }

/* Sedes */
.u-sedes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.u-sede { position: relative; border-radius: 16px; padding: 26px 22px 22px; background: #fff; border: 1px solid var(--u-linea); overflow: hidden; }
.u-sede::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--unt-azul); }
.u-sede:first-child::before { background: var(--unt-dorado); }
.u-sede h3 { font-size: 23px; margin: 6px 0; color: var(--u-noche); }
.u-sede p { margin: 0; font-size: 14.5px; color: var(--u-tinta-suave); }
.u-sede a { color: var(--unt-azul); font-weight: 600; font-size: 14px; }
.u-sede a[href="campus"] { display: inline-block; margin-top: 10px; }
.u-sedes-pie { margin: 20px 0 0; font-size: 15.5px; color: var(--u-tinta-suave); }
.u-sedes-pie a { color: var(--unt-azul); font-weight: 600; }

/* ---------- Pie (todas las páginas) ------------------------------------------------------- */
.u-pie { background: var(--u-noche); color: #B9C4DB; font-family: var(--u-sans); font-size: 15px; position: relative; overflow: hidden; }
.u-pie .u-marca-agua { font-family: var(--u-serif); font-size: clamp(120px, 22vw, 300px); line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(230,173,9,.22);
	position: absolute; right: -10px; bottom: -20px; pointer-events: none; user-select: none; }
.u-pie .u-contenedor { position: relative; }
.u-pie .u-rejilla { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; padding: 64px 0 40px; }
.u-pie h4 { font-family: var(--u-serif); font-weight: 500; color: #fff; font-size: 19px; margin: 0 0 14px; text-transform: none; }
.u-pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.u-pie a { color: #B9C4DB !important; }
.u-pie a:hover { color: var(--u-dorado-claro) !important; }
.u-pie p { margin: 0 0 8px; color: #B9C4DB; }
.u-pie .u-logo { height: 64px; width: auto; background: #fff; border-radius: 8px; padding: 6px 10px; margin-bottom: 18px; }
.u-sellos { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.u-sellos a { background: #fff; border-radius: 8px; padding: 6px 10px; display: inline-block; }
.u-sellos img { height: 34px; width: auto; }
.u-pie .u-legal { border-top: 1px solid rgba(255,255,255,.12); padding: 18px 0 26px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; }
.u-pie .u-legal nav { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.u-acceso-panel { border: 1px solid rgba(255,255,255,.25); border-radius: 6px; padding: 2px 10px; }

/* ---------- Buscador (paleta) y aviso emergente ------------------------------------------- */
.u-paleta-fondo { position: fixed; inset: 0; z-index: 10000; background: rgba(11,31,68,.55); backdrop-filter: blur(4px); display: none; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; font-family: var(--u-sans); }
.u-paleta-fondo.u-abierta { display: flex; }
.u-paleta { width: min(720px, 100%); background: #fff; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.35); overflow: hidden; }
.u-paleta .u-entrada { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--u-linea); }
.u-paleta input { flex: 1; border: 0; outline: 0; font-family: var(--u-sans); font-size: 19px; color: var(--u-tinta); min-width: 0; box-shadow: none; }
.u-paleta .u-cerrar { border: 1px solid var(--u-linea); background: #fff; border-radius: 6px; font-size: 12px; padding: 2px 8px; color: var(--u-tinta-suave); cursor: pointer; }
.u-resultados { max-height: 60vh; overflow-y: auto; padding: 8px 10px 14px; }
.u-grupo { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--unt-dorado-oscuro); padding: 12px 10px 6px; }
.u-res { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 10px; color: inherit !important; }
.u-res:hover, .u-res.u-sel { background: var(--u-papel); }
.u-res .u-ico { width: 36px; height: 36px; border-radius: 9px; background: var(--u-noche); color: var(--unt-dorado); display: grid; place-items: center; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.u-res b { display: block; font-weight: 600; color: var(--u-noche); line-height: 1.3; }
.u-res small { color: var(--u-tinta-suave); font-size: 13px; }
.u-respuesta { margin: 8px 10px 4px; border: 1.5px solid var(--unt-dorado); background: #FFFBEE; border-radius: 12px; padding: 14px 16px; display: flex; justify-content: space-between; gap: 12px; align-items: center; color: inherit !important; }
.u-respuesta b { color: var(--u-noche); display: block; }
.u-respuesta small { color: var(--u-tinta-suave); }
.u-vacio { padding: 28px 16px; text-align: center; color: var(--u-tinta-suave); }
.u-paleta .u-pie-paleta { border-top: 1px solid var(--u-linea); padding: 10px 20px; font-size: 12.5px; color: var(--u-tinta-suave); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.u-paleta .u-pie-paleta a { color: var(--unt-azul); font-weight: 600; }

.u-aviso { position: fixed; inset: 0; z-index: 9999; background: rgba(11,31,68,.6); display: none; align-items: center; justify-content: center; padding: 16px; font-family: var(--u-sans); }
.u-aviso.u-abierta { display: flex; }
.u-aviso-caja { position: relative; background: #fff; border-radius: 14px; overflow: hidden; max-width: min(760px, 100%); max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.u-aviso-caja img { max-height: calc(92vh - 70px); width: auto; max-width: 100%; object-fit: contain; display: block; margin: 0 auto; }
.u-aviso-caja .u-pie-aviso { padding: 12px 16px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--u-linea); }
.u-aviso-cerrar { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(11,31,68,.8); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.u-aviso .u-btn-noche { padding: 10px 18px; }

/* ---------- Responsive --------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.u-carreras { grid-template-columns: repeat(3, 1fr); }
	.u-sedes { grid-template-columns: repeat(2, 1fr); }
	.u-enlaces { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
	.u-barra .u-servicios { display: none; }
	.u-marca .u-contenedor { min-height: 76px; }
	.u-marca .u-escudo img { height: 52px; }
	.u-btn-buscar { min-width: 0; padding: 10px 12px; }
	.u-btn-buscar .u-txt, .u-btn-buscar kbd { display: none; }
	.u-portada { font-size: 16px; }
	.u-heroe .u-contenedor { grid-template-columns: 1fr; padding: 40px 0 52px; gap: 26px; }
	.u-collage { height: 320px; order: 0; }
	.u-sello { width: 100px; height: 100px; left: 4%; top: 4px; }
	.u-sello b { font-size: 23px; }
	.u-admision .u-contenedor { grid-template-columns: 1fr; gap: 14px; }
	.u-seccion { padding: 60px 0; }
	.u-cabeza { grid-template-columns: auto 1fr; align-items: center; gap: 14px; }
	.u-cabeza .u-mas { grid-column: 1 / -1; justify-self: start; }
	.u-num { width: 36px; height: 36px; font-size: 13px; }
	.u-perfiles { grid-template-columns: 1fr; }
	.u-pestanas { flex-direction: row; overflow-x: auto; padding: 12px; }
	.u-pestanas .u-rotulo { display: none; }
	.u-pestanas button { white-space: nowrap; }
	.u-panel { padding: 24px 20px; }
	.u-enlaces { grid-template-columns: 1fr; }
	.u-revista, .u-historia .u-contenedor, .u-rector { grid-template-columns: 1fr; }
	.u-historia .u-contenedor { padding: 60px 0; gap: 32px; }
	.u-historia .u-foto { max-width: 320px; }
	.u-principal .u-texto { margin: -60px 14px 0; }
	.u-secundarias a { grid-template-columns: 40px 1fr 90px; gap: 12px; }
	.u-secundarias img { width: 90px; height: 70px; }
	.u-carreras { grid-template-columns: 1fr 1fr; }
	.u-fila { grid-template-columns: 1fr auto; }
	.u-fila .u-fecha { grid-column: 1; grid-row: 2; }
	.u-videos { grid-template-columns: 1fr; }
	.u-sedes { grid-template-columns: 1fr; }
	.u-pie .u-rejilla { grid-template-columns: 1fr; }
	.u-destacados { grid-auto-columns: 86%; }
}
@media (prefers-reduced-motion: reduce) {
	.u-sello svg { animation: none; }
	.u-portada *, .u-pie * { transition: none !important; }
}