/*
Theme Name: UAI Lab Sociedad Digital
Theme URI:
Author: Portable
Author URI:
Description: Theme Bootstrap 5 (sin jQuery) para Laboratorio Sociedad y Cultura Digital UAI, basado en el diseño de Figma.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: uai-lab-theme
Tags: bootstrap5
*/

/* =========================================================
   DESIGN TOKENS
   Extraídos de Figma (archivo "Laboratorio Sociedad y Cultura
   Digital UAI", canvas "Escritorio 28 Julio", vía Figma REST API)
   ========================================================= */
:root {
	/* --- Color base --- */
	--uai-black: #000000;
	--uai-white: #ffffff;
	--uai-ink: #000000;
	--uai-gray-1: #999999;     /* subtítulos, texto secundario */
	--uai-border: #e6e6e6;     /* gris 2 — bordes, divisores */

	/* --- Paleta de categoría (líneas de investigación / temas) ---
	   Fuente: "Escala tipográfica y colores" PDF, carpeta 00 INFO. */
	--uai-cat-celeste:    #5cd2f7;
	--uai-cat-verde:      #5ee879;
	--uai-cat-rojo:       #fb4f3b;
	--uai-cat-rosado:     #fc68d6;
	--uai-cat-anaranjado: #ff991b;
	--uai-cat-amarillo:   #ffff00;
	--uai-cat-violeta:    #df00ff;

	/* Alias retrocompatibles usados por los templates existentes */
	--uai-topic-azul:     var(--uai-cat-celeste);
	--uai-topic-verde:    var(--uai-cat-verde);
	--uai-topic-rosado:   var(--uai-cat-rosado);
	--uai-topic-rojo:     var(--uai-cat-rojo);
	--uai-topic-amarillo: var(--uai-cat-amarillo);

	/* --- Tipografía ---
	   Todas se cargan como fuentes web desde Google Fonts (ver functions.php),
	   así se ven igual en cualquier navegador y equipo. Todas con licencia
	   libre (OFL / Apache 2.0), sin pendientes de licenciamiento. */
	--uai-font-display: 'Inter', system-ui, -apple-system, sans-serif;      /* títulos */
	--uai-font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; /* solo títulos de cards */
	--uai-font-mono: 'DM Mono', ui-monospace, monospace;                    /* labels / etiquetas */
	--uai-font-condensed: 'Roboto Condensed', system-ui, sans-serif;        /* texto de contenido general */

	/* --- Radios --- */
	--uai-filter-h: 44px;   /* alto común de filtros y buscador (R6) */
	--uai-radius: 5px;
	--uai-radius-pill: 9999px;

	/* --- Overrides de variables Bootstrap 5.3 --- */
	--bs-body-font-family: var(--uai-font-condensed);
	--bs-body-color: var(--uai-ink);
	--bs-body-bg: var(--uai-white);
	--bs-primary: var(--uai-black);
	--bs-primary-rgb: 0, 0, 0;
	--bs-link-color: var(--uai-ink);
	--bs-link-hover-color: var(--uai-ink);
	--bs-border-color: var(--uai-border);
	--bs-border-radius: var(--uai-radius);
	--bs-border-radius-sm: 3px;
	--bs-border-radius-lg: 8px;
	--bs-border-radius-pill: var(--uai-radius-pill);
}

/* =========================================================
   TIPOGRAFÍA
   Escala oficial: PDF "Escala tipográfica" (carpeta 00 INFO)
   ========================================================= */
h1, .display-1 {
	font-family: var(--uai-font-display);
	font-weight: 600;
	font-size: 70px;
	/* Títulos en altas (Inter): el doc R6 pedía 100%, subido a 110% a pedido. */
	line-height: 110%;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

h2, .display-2 {
	font-family: var(--uai-font-display);
	font-weight: 600;
	font-size: 40px;
	line-height: 110%;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

h3 {
	font-family: var(--uai-font-display);
	font-weight: 600;
	font-size: 30px;
	line-height: 110%;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

h4 {
	font-family: var(--uai-font-display);
	font-weight: 600;
	font-size: 25px;
	line-height: 25px;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

h5 {
	font-family: var(--uai-font-body);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: -0.03em;
}

body, p {
	font-family: var(--uai-font-condensed);
	font-weight: 400;
	font-size: 18px;
	line-height: 140%;
}

/* Escala "Body" (Roboto Condensed) para texto de contenido */
.uai-body-xl { font-family: var(--uai-font-condensed); font-size: 20px; line-height: 24px; }
.uai-body-l  { font-family: var(--uai-font-condensed); font-size: 18px; line-height: 22px; }
.uai-body-m  { font-family: var(--uai-font-condensed); font-size: 16px; line-height: 20px; }

/* Escala "IBM Plex Sans" — reservada para títulos de cards */
.uai-card-title-xl { font-family: var(--uai-font-body); font-weight: 600; font-size: 20px; line-height: 24px; }
.uai-card-title-l  { font-family: var(--uai-font-body); font-weight: 600; font-size: 18px; line-height: 22px; }
.uai-card-title-m  { font-family: var(--uai-font-body); font-weight: 600; font-size: 16px; line-height: 20px; }
.uai-card-title-s  { font-family: var(--uai-font-body); font-weight: 600; font-size: 14px; line-height: 18px; }

/* Cita */
.uai-quote {
	font-family: var(--uai-font-condensed);
	font-weight: 500;
	font-size: 32px;
	line-height: 36px;
}

/* Texto "eyebrow" / kicker sobre títulos de sección (mayúsculas) */
.uai-eyebrow {
	font-family: var(--uai-font-display);
	font-weight: 480;
	font-size: 12px;
	line-height: 2.5;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

/* Etiquetas en fuente mono, usadas en tags/labels puntuales */
.uai-label-mono {
	font-family: var(--uai-font-mono);
	font-weight: 400;
	font-size: 13px;
	line-height: 1.85;
	letter-spacing: -0.08em;
	text-transform: uppercase;
}

/* Texto pequeño condensado (metadatos, fechas, autores) */
.uai-meta {
	font-family: var(--uai-font-condensed);
	font-weight: 400;
	font-size: 13px;
	line-height: 1.2;
	letter-spacing: -0.03em;
}

/* Año/autor en cards de proyecto — tipografía monoespaciada (spec del doc de correcciones) */
.uai-meta--mono {
	font-family: var(--uai-font-mono);
	letter-spacing: 0;
}

/* Primer autor destacado + resto atenuado (spec Figma: "NOMBRE AUTOR NEGRO/BLANCO" + resto) */
.uai-card-autor-principal {
	font-weight: 600;
}

.uai-card-autor-resto {
	opacity: 0.6;
}

/* =========================================================
   BOTONES
   ========================================================= */

/* Botón pill con borde, usado como CTA "Ver más / Ver todas" */
.btn-uai {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background-color: var(--uai-white);
	border: 1px solid var(--uai-border);
	border-radius: var(--uai-radius-pill);
	color: var(--uai-ink);
	font-family: var(--uai-font-body);
	font-weight: 600;
	font-size: 16px;
	padding: 0.6rem 1.25rem;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.btn-uai:hover,
.btn-uai:focus {
	background-color: var(--uai-border);
	color: var(--uai-ink);
}

/* Botón sólido (ej. trigger de menú) */
.btn-uai-solid {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background-color: var(--uai-black);
	border: none;
	border-radius: var(--uai-radius-pill);
	color: var(--uai-white);
	font-family: var(--uai-font-display);
	font-weight: 500;
	font-size: 15px;
	padding: 0.6rem 1.25rem;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-uai-solid:hover,
.btn-uai-solid:focus,
.btn-uai-solid:active {
	background-color: var(--uai-white) !important;
	color: var(--uai-black) !important;
	box-shadow: inset 0 0 0 1px var(--uai-black);
}

/* =========================================================
   TOPIC TAGS (pills de categoría)
   ========================================================= */
/* Pill sin color por defecto — el color de categoría aparece solo al hover
   (spec: sección "Temas" del documento de correcciones). Se usa sobre fondo
   oscuro por defecto; .uai-topic--on-light la adapta a fondos claros. */
.uai-topic {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	border-radius: var(--uai-radius-pill);
	padding: 0.35rem 0.9rem;
	font-family: var(--uai-font-body);
	font-weight: 600;
	font-size: 14px;
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: var(--uai-white);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.uai-topic:hover {
	background-color: var(--uai-topic-color, var(--uai-white));
	border-color: var(--uai-topic-color, var(--uai-white));
	color: var(--uai-black);
}

.uai-topic--on-light {
	border-color: var(--uai-border);
	color: var(--uai-ink);
}

.uai-topic--celeste   { --uai-topic-color: var(--uai-cat-celeste); }
.uai-topic--verde     { --uai-topic-color: var(--uai-cat-verde); }
.uai-topic--rosado    { --uai-topic-color: var(--uai-cat-rosado); }
.uai-topic--rojo      { --uai-topic-color: var(--uai-cat-rojo); }
.uai-topic--anaranjado{ --uai-topic-color: var(--uai-cat-anaranjado); }
.uai-topic--amarillo  { --uai-topic-color: var(--uai-cat-amarillo); }
.uai-topic--violeta   { --uai-topic-color: var(--uai-cat-violeta); }
/* alias retrocompatible */
.uai-topic--azul      { --uai-topic-color: var(--uai-cat-celeste); }

/* =========================================================
   CHIP / FICHA (filtro pequeño, pill con borde)
   ========================================================= */
.uai-chip {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--uai-border);
	border-radius: var(--uai-radius-pill);
	padding: 0.3rem 0.85rem;
	background-color: var(--uai-white);
	color: var(--uai-ink);
	font-family: var(--uai-font-display);
	font-weight: 400;
	font-size: 14px;
	text-decoration: none;
}

/* Hover: borde negro sólido (mismo patrón que los pills de temas) */
.uai-chip:hover,
.uai-chip:focus {
	border-color: var(--uai-black);
	color: var(--uai-ink);
}

.uai-chip.is-active {
	background-color: var(--uai-black);
	border-color: var(--uai-black);
	color: var(--uai-white);
}

/* =========================================================
   LAYOUT BASE
   Diseño desktop a 1440px — contenedor equivalente
   ========================================================= */
.container,
.container-lg,
.container-xl {
	max-width: 1320px;
}

/* =========================================================
   HEADER / NAVBAR
   ========================================================= */
.uai-header {
	position: sticky;
	top: 0;
	z-index: 1030;
	background: var(--uai-black);
	color: var(--uai-white);
}

.uai-navbar {
	padding: 0;
	min-height: 90px;
}

/* padding-left sigue el mismo cálculo de centrado que ".container"
   (max-width 1320px + 12px de gutter), para que el logo quede alineado
   con el margen izquierdo del contenido en cualquier ancho de pantalla. */
.uai-navbar .navbar-brand {
	padding: 0 0 0 max(12px, calc((100vw - 1320px) / 2 + 12px));
}

.uai-navbar-controls {
	display: flex;
	align-items: stretch;
	height: 90px;
}

/* Botón "Cerrar" del menú — mismas medidas/tipografía que el botón "Menú"
   del header, sin border ni background (spec del doc de correcciones). */
.uai-menu-close-btn {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	height: 90px;
	padding: 0 1.75rem;
	border: none;
	background: none;
	color: var(--uai-ink);
	font-family: var(--uai-font-display);
	font-weight: 500;
	font-size: 15px;
	text-transform: uppercase;
}

.uai-navbar-controls > * {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0 1.75rem;
	border-left: 2px solid rgba(255, 255, 255, 0.3);
	background: none;
	border-top: none;
	border-right: none;
	border-bottom: none;
	color: var(--uai-white);
	font-family: var(--uai-font-display);
	font-weight: 500;
	font-size: 15px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.uai-navbar-controls > *:hover {
	background: var(--uai-white);
	color: var(--uai-black);
}

/* El <button> del selector de idioma no hereda el color blanco del
   header por defecto (reset de Bootstrap) — forzarlo explícitamente. */
.uai-lang-toggle {
	color: inherit;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	height: 100%;
	background: none;
	border: none;
	padding: 0;
}

.uai-navbar-controls > *:hover .uai-lang-toggle {
	color: inherit;
}

/* .dropdown-toggle de Bootstrap agrega su propio caret (::after) además
   del ícono bi-chevron-down del diseño: se veía "ES ⌄ ▾". */
.uai-lang-toggle.dropdown-toggle::after {
	display: none;
}

/* =========================================================
   MEGA MENU (offcanvas de pantalla completa)
   ========================================================= */
.uai-mega-menu {
	width: 100% !important;
	max-width: 100%;
	background: var(--uai-white);
	color: var(--uai-ink);
}

/* El logo del menú queda en la misma posición horizontal que el del
   header (mismo cálculo de padding-left que ".uai-navbar .navbar-brand"),
   para dar la impresión de continuidad al abrir el menú. */
.uai-mega-menu-header {
	padding-left: max(12px, calc((100vw - 1320px) / 2 + 12px)) !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* El menú tiene fondo blanco: se muestra el mismo logo del header
   pero invertido (blanco→negro), para que siga el logo que se suba
   sin necesitar un segundo archivo. */
.uai-mega-menu-logo img {
	display: block;
	filter: invert(1);
}

.uai-mega-menu-body-inner {
	padding-left: max(12px, calc((100vw - 1320px) / 2 + 12px)) !important;
}

.uai-footer-inner {
	padding-left: max(12px, calc((100vw - 1320px) / 2 + 12px)) !important;
}

/* Alineación exacta de los ítems del menú con el logo del header.
   Cadena de offsets: .offcanvas-body + .uai-mega-menu-body-inner + .row
   Bootstrap pone 1rem (16px) en .offcanvas-body y -12px de gutter en .row,
   así que se deja 12px aquí para que el neto quede igual al padding del
   header (el .row negativo cancela el padding del container interior). */
.uai-mega-menu .offcanvas-body {
	padding-left: 12px;
}

.uai-mega-menu-links {
	padding-left: 0;
}

.uai-mega-menu-links a {
	display: block;
	padding: 0.5rem 0;
	font-family: var(--uai-font-display);
	font-weight: 600;
	font-size: 40px;
	line-height: 110%;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--uai-ink);
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.uai-mega-menu-links a:hover {
	text-decoration: underline;
}

@media (max-width: 991.98px) {
	.uai-mega-menu-links a {
		font-size: 26px;
	}
}

.uai-mega-menu-contact p {
	font-family: var(--uai-font-body);
	font-weight: 500;
	font-size: 17px;
}

/* wp_nav_menu envuelve cada ícono en <li> aunque items_wrap no tenga <ul> —
   sin este reset se ven los puntos de lista por defecto del navegador. */
.uai-social-icons li {
	list-style: none;
}

/* Redes sociales del menú: íconos circulares (no chips con texto) */
.uai-mega-menu-aside .uai-social-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--uai-radius-pill);
	border: 1px solid var(--uai-border);
	color: var(--uai-ink);
	text-decoration: none;
	font-size: 16px;
}

.uai-mega-menu-aside .uai-social-icons a:hover {
	background: var(--uai-black);
	border-color: var(--uai-black);
	color: var(--uai-white);
}

/* Misma pastilla circular, para usar sobre fondo blanco (ej. ficha de persona) */
.uai-social-icons--on-light a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--uai-radius-pill);
	border: 1px solid var(--uai-border);
	color: var(--uai-ink);
	text-decoration: none;
}

.uai-social-icons--on-light a:hover {
	background: var(--uai-black);
	border-color: var(--uai-black);
	color: var(--uai-white);
}

/* =========================================================
   HERO — Home. Fondo blanco, texto izquierda / imagen derecha.
   ========================================================= */
.uai-hero {
	position: relative;
	background-color: var(--uai-white);
	color: var(--uai-ink);
	padding: 3rem 0 0;
}

.uai-hero-media-frame {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.uai-hero-media-frame img,
.uai-hero-media-frame video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.uai-hero-etiqueta {
	font-family: var(--uai-font-mono);
	letter-spacing: 0;
	color: var(--uai-gray-1);
}

.uai-hero-panel h1 {
	font-size: 70px;
	line-height: 110%;
	margin-bottom: 20px;
}

.uai-hero-descripcion {
	font-family: var(--uai-font-condensed);
	font-size: 20px;
	line-height: 24px;
	font-weight: 400;
	max-width: 34rem;
}

/* Radios ocultos que controlan qué destacado se muestra en el hero (sin JS) */
.uai-hero-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.uai-hero-panel {
	display: none;
}

#uai-hero-dest-0:checked ~ .uai-hero-panels .uai-hero-panel[data-panel="0"],
#uai-hero-dest-1:checked ~ .uai-hero-panels .uai-hero-panel[data-panel="1"],
#uai-hero-dest-2:checked ~ .uai-hero-panels .uai-hero-panel[data-panel="2"],
#uai-hero-dest-3:checked ~ .uai-hero-panels .uai-hero-panel[data-panel="3"] {
	display: block;
}

.uai-hero-strip {
	border-top: 1px solid var(--uai-border);
	margin-top: 3rem;
	position: relative;
}

.uai-hero-strip-item {
	display: block;
	border-left: 1px solid var(--uai-border);
	padding: 1.5rem;
	cursor: pointer;
	text-decoration: none;
}

.uai-hero-strip-item:first-child {
	border-left: none;
}

.uai-hero-strip-item .uai-label-mono {
	color: var(--uai-gray-1);
	letter-spacing: 0;
}

.uai-hero-strip-item h3 {
	font-family: var(--uai-font-body);
	font-weight: 600;
	font-size: 22px;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.3;
	color: var(--uai-gray-1);
}

#uai-hero-dest-0:checked ~ .uai-hero-strip [data-strip="0"] .uai-label-mono,
#uai-hero-dest-1:checked ~ .uai-hero-strip [data-strip="1"] .uai-label-mono,
#uai-hero-dest-2:checked ~ .uai-hero-strip [data-strip="2"] .uai-label-mono,
#uai-hero-dest-3:checked ~ .uai-hero-strip [data-strip="3"] .uai-label-mono {
	color: var(--uai-ink);
}

#uai-hero-dest-0:checked ~ .uai-hero-strip [data-strip="0"] h3,
#uai-hero-dest-1:checked ~ .uai-hero-strip [data-strip="1"] h3,
#uai-hero-dest-2:checked ~ .uai-hero-strip [data-strip="2"] h3,
#uai-hero-dest-3:checked ~ .uai-hero-strip [data-strip="3"] h3 {
	color: var(--uai-ink);
	text-decoration: underline;
}

.uai-scroll-top {
	position: fixed;
	right: 2rem;
	bottom: 2rem;
	z-index: 1020;
	width: 44px;
	height: 44px;
	border-radius: var(--uai-radius-pill);
	border: 1px solid var(--uai-border);
	background: var(--uai-white);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--uai-ink);
}

/* =========================================================
   BANNER — bloque con foto/video de fondo y texto blanco,
   con margen respecto a los bordes (ej. teaser "Quiénes somos").
   ========================================================= */
.uai-banner {
	position: relative;
	overflow: hidden;
	background-color: var(--uai-black);
	color: var(--uai-white);
	min-height: 475px;
	border-radius: var(--uai-radius);
}

.uai-banner video,
.uai-banner img.uai-banner-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
}

.uai-banner-content {
	position: relative;
	z-index: 1;
	padding: 4rem 0 3rem;
	padding-left: 50px;
}

.uai-banner-content h2 {
	font-size: 40px;
	line-height: 110%;
}

.uai-banner-titulo .uai-titulo-linea1,
.uai-banner-titulo .uai-titulo-resto {
	display: block;
}

.uai-banner-titulo .uai-titulo-resto {
	color: rgba(255, 255, 255, 0.55);
}

.uai-banner-content p.lead {
	font-family: var(--uai-font-condensed);
	font-weight: 700;
	font-size: 20px;
	line-height: 24px;
	max-width: 40rem;
}

/* Home: bajada del banner "Quiénes somos" — medium (500), no bold (spec R5).
   Especificidad mayor que ".uai-banner-content p.lead". */
.uai-banner-content p.lead.uai-banner-lead-medium {
	font-weight: 500;
	max-width: 70%;
	color: #ffffff;
}

/* Home: "Nuestro Equipo" — fondo blanco + línea negra que separa del bloque superior */
.uai-section--equipo-home {
	background: var(--uai-white);
	border-top: 1px solid var(--uai-black);
}

/* =========================================================
   SECCIÓN GENÉRICA (título + botón + carrusel horizontal)
   ========================================================= */
.uai-section {
	padding: 3.5rem 0;
}

/* Sección de fondo oscuro a todo el ancho (ej. "Explora por temas relacionados") */
.uai-section--dark {
	background: var(--uai-black);
	color: var(--uai-white);
}

.uai-section--dark h2 {
	color: var(--uai-white);
}

.uai-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 2rem;
}

.uai-section-head h2 {
	font-size: 40px;
	line-height: 110%;
}

.uai-carousel {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 1.75rem;
	-webkit-overflow-scrolling: touch;
}

.uai-carousel::-webkit-scrollbar {
	height: 6px;
}

.uai-carousel::-webkit-scrollbar-thumb {
	background: var(--uai-border);
	border-radius: var(--uai-radius-pill);
}

.uai-carousel > * {
	scroll-snap-align: start;
	flex: 0 0 auto;
}

/* Card de proyecto/publicación/noticia */
.uai-card {
	width: 313px;
	height: 418px;
	border: 1px solid var(--uai-border);
	border-radius: 0;
	overflow: hidden;
	background: var(--uai-white);
	display: flex;
	flex-direction: column;
}

a.uai-card {
	color: inherit;
	text-decoration: none;
}

.uai-card img {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: cover;
	flex-shrink: 0;
}

.uai-card-body {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	overflow: hidden;
}

.uai-card .uai-eyebrow {
	color: var(--uai-gray-1);
}

/* Sin clamp: la card debe mostrar el nombre completo del proyecto (spec R5) */
.uai-card h4 {
	font-family: var(--uai-font-body);
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	text-transform: none;
	letter-spacing: normal;
	margin-bottom: 0.5rem;
}

.uai-card-desc {
	font-family: var(--uai-font-body);
	font-size: 13px;
	line-height: 18px;
	color: var(--uai-ink);
	margin-bottom: 1rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Línea de color superior — heredada de la línea de investigación asociada */
.uai-card {
	position: relative;
	border-top: none;
}

.uai-card::before {
	content: '';
	display: block;
	height: 6px;
	background: var(--uai-card-line, var(--uai-border));
}

/* Hover: borde negro + título subrayado (spec del documento de correcciones) */
.uai-card:hover {
	border-color: var(--uai-black);
}

/* En hover la línea superior MANTIENE el color de su tema/línea (spec R5) */
.uai-card:hover h4 a {
	text-decoration: underline;
}

/* Variante "imagen completa": foto de fondo + overlay oscuro + texto blanco */
.uai-card--completa {
	position: relative;
	width: 313px;
	height: 418px;
	display: block;
	overflow: hidden;
	border: 1px solid var(--uai-border);
	border-radius: 0;
}

.uai-card--completa:hover {
	border-color: var(--uai-black);
}

.uai-card--completa::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	background: var(--uai-card-line, var(--uai-border));
	z-index: 2;
}

/* En hover mantiene el color (spec R5) — sin override negro */

/* Especificidad mayor que ".uai-card img" (16:9) — la imagen de fondo de
   la variante "completa" debe cubrir el 100% de la card, sin aspect-ratio fijo. */
.uai-card--completa img.uai-card-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}

.uai-card-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
}

.uai-card-completa-body {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 1rem;
}

.uai-card-completa-body h4 {
	color: var(--uai-white);
	font-family: var(--uai-font-body);
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	text-transform: none;
	letter-spacing: normal;
	margin: 0;
}

.uai-card--completa:hover .uai-card-completa-body h4 {
	text-decoration: underline;
}

.uai-card-completa-body .uai-meta {
	color: var(--uai-white);
	font-family: var(--uai-font-mono);
	text-transform: uppercase;
	letter-spacing: -0.03em;
}

/* Card de Línea de Investigación (hover expande + rellena de color) */
.uai-card-linea {
	display: flex;
	flex-direction: column;
	width: 313px;
	height: 250px;
	background: var(--uai-white);
	border: 1px solid var(--uai-border);
	border-radius: 0;
	overflow: hidden;
	color: var(--uai-ink);
	text-decoration: none;
	padding: 1rem;
	transition: height 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.uai-card-linea-body {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.uai-card-linea-img {
	width: calc(100% + 2rem);
	margin: 0 -1rem -1rem;
	height: 168px;
	object-fit: cover;
}

.uai-card-linea-desc {
	display: none;
	font-family: var(--uai-font-condensed);
	font-size: 16px;
	line-height: 20px;
	margin-top: 0.75rem;
}

.uai-card-linea:hover {
	height: 417px;
	background-color: var(--uai-linea-color);
	border-color: var(--uai-black);
}

.uai-card-linea:hover .uai-card-linea-img {
	display: none;
}

.uai-card-linea:hover .uai-card-linea-desc {
	display: block;
}

.uai-card-linea:hover .uai-card-title-xl,
.uai-card-linea:hover .uai-card-title-l {
	text-decoration: underline;
}

/* Card genérica (imagen + título + descripción + botón) */
.uai-card-simple {
	width: 313px;
	border: 1px solid var(--uai-border);
	border-radius: 0;
	overflow: hidden;
	background: var(--uai-white);
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
}

.uai-card-simple img {
	width: calc(100% - 2rem);
	margin: 1rem 1rem 0;
	height: 130px;
	object-fit: cover;
}

.uai-card-simple-body {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.uai-card-simple .btn-uai {
	align-self: flex-start;
}

/* Card de integrante de equipo */
.uai-team-card {
	width: 427px;
	max-width: 100%;
	display: flex;
	align-items: center;
	gap: 1rem;
	border: 1px solid var(--uai-border);
	border-radius: var(--uai-radius);
	padding: 1rem;
}

.uai-team-card img {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: var(--uai-radius-pill);
}

.uai-team-card .uai-team-name {
	font-family: var(--uai-font-body);
	font-weight: 500;
	font-size: 20px;
	margin-bottom: 0.2rem;
}

.uai-team-card .uai-team-role {
	font-family: var(--uai-font-body);
	font-size: 16px;
	color: var(--uai-ink);
	opacity: 0.7;
}

/* Variante con borde, usada en grillas (Equipo, Quiénes somos) — sin redondeo (spec R5) */
.uai-team-card--bordered {
	width: 100%;
	max-width: 427px;
	border: 1px solid var(--uai-border);
	border-radius: 0;
	padding: 1.25rem;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease;
}

.uai-team-card--bordered:hover {
	border-color: var(--uai-black);
}

.uai-team-card--bordered:hover .uai-team-name {
	text-decoration: underline;
}

/* Nube de temas */
.uai-topics-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.uai-topics-cloud .uai-topic {
	font-family: var(--uai-font-body);
	font-weight: 600;
	font-size: 18px;
	padding: 0.75rem 1.5rem;
}

/* Instagram grid horizontal */
.uai-instagram-item {
	width: 232px;
	height: 309px;
	border-radius: var(--uai-radius);
	overflow: hidden;
}

.uai-instagram-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =========================================================
   FOOTER
   ========================================================= */
.uai-footer {
	background: var(--uai-black);
	color: var(--uai-white);
}

.uai-footer-menu a {
	color: var(--uai-white);
	opacity: 0.8;
	text-decoration: none;
	font-family: var(--uai-font-body);
	font-size: 14px;
}

.uai-footer-menu a:hover {
	opacity: 1;
	text-decoration: underline;
}

.uai-footer-accreditation-logo {
	height: 100px;
	object-fit: contain;
}

.uai-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* =========================================================
   PÁGINAS INTERIORES
   ========================================================= */
.uai-page-header {
	padding: 3.5rem 0 2.5rem;
	border-bottom: 1px solid var(--uai-black);
	margin-bottom: 2.5rem;
}

.uai-breadcrumb {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--uai-font-body);
	font-size: 14px;
	color: var(--uai-ink);
	opacity: 0.75;
	margin-bottom: 1.5rem;
}

.uai-breadcrumb a {
	color: var(--uai-ink);
	text-decoration: underline;
}

.uai-page-header--breadcrumb-only {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

/* "Cabecera H2 fondo color" — usada en líneas de investigación */
.uai-page-header--color {
	border-bottom: none;
	margin-bottom: 0;
}

.uai-page-header--color .uai-breadcrumb a,
.uai-page-header--color .uai-breadcrumb span {
	color: var(--uai-black);
}

/* Nav de líneas de investigación (tabs bajo el header de color) */
.uai-linea-nav {
	display: flex;
	gap: 2rem;
	overflow-x: auto;
	border-bottom: 1px solid var(--uai-border);
}

.uai-linea-nav a {
	display: block;
	padding: 1.25rem 0;
	white-space: nowrap;
	font-family: var(--uai-font-body);
	font-weight: 600;
	font-size: 16px;
	color: var(--uai-gray-1);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.uai-linea-nav a.is-active {
	color: var(--uai-ink);
	border-bottom-color: var(--uai-black);
}

.uai-page-subtitle {
	color: var(--uai-gray-1);
}

.uai-breadcrumb-sep {
	font-size: 10px;
	opacity: 0.6;
}

.uai-page-header-subtitle {
	color: var(--uai-gray-1);
	margin-top: 0.75rem;
	margin-bottom: 0;
}

.uai-page-eyebrow {
	font-family: var(--uai-font-display);
	font-weight: 600;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--uai-gray-1);
	margin-bottom: 0.5rem;
}

.uai-page-title {
	font-family: var(--uai-font-display);
	font-weight: 600;
	font-size: 70px;
	line-height: 110%;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	margin-bottom: 0;
}

@media (max-width: 991.98px) {
	.uai-page-title {
		font-size: 56px;
	}
}

@media (max-width: 767.98px) {
	.uai-page-title {
		font-size: 36px;
	}
}

/* Grillas */
.uai-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
}

.uai-grid .uai-card {
	width: 100%;
}

.uai-team-grid {
	display: grid;
	/* min(): bajo 380px de ancho disponible la columna no puede exceder la pantalla. */
	grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
	gap: 2rem;
}

/* Filtros */
.uai-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.uai-filter-select select {
	border: 1px solid var(--uai-border);
	border-radius: var(--uai-radius-pill);
	/* R6: misma altura que la barra del buscador */
	height: var(--uai-filter-h);
	padding: 0 1.25rem;
	font-family: var(--uai-font-body);
	font-weight: 500;
	font-size: 15px;
	line-height: 1;
	background: var(--uai-white);
	color: var(--uai-ink);
}

.uai-filter-search {
	display: flex;
	align-items: center;
	border: 1px solid var(--uai-border);
	border-radius: var(--uai-radius-pill);
	overflow: hidden;
	flex: 1 1 260px;
	height: var(--uai-filter-h);
}

.uai-filter-search input {
	border: none;
	padding: 0 1.25rem;
	flex: 1;
	align-self: stretch;
	font-family: var(--uai-font-body);
	font-size: 15px;
}

.uai-filter-search input:focus {
	outline: none;
}

.uai-filter-search button {
	border: none;
	/* R6: sin fondo negro; el icono queda sobre el mismo blanco del campo. */
	background: none;
	color: var(--uai-ink);
	padding: 0 1rem;
	align-self: stretch;
}

/* Paginación */
.uai-pagination {
	display: flex;
	justify-content: center;
	gap: 0.4rem;
}

.uai-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--uai-radius-pill);
	border: 1px solid var(--uai-border);
	color: var(--uai-ink);
	text-decoration: none;
	font-family: var(--uai-font-body);
	font-size: 14px;
}

.uai-pagination .page-numbers.current {
	background: var(--uai-black);
	border-color: var(--uai-black);
	color: var(--uai-white);
}

/* Ficha individual (investigador / proyecto / noticia) — foto de 300px de ancho */
.uai-profile-photo {
	width: 300px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--uai-radius);
}

.uai-meta-list dt {
	font-family: var(--uai-font-body);
	font-size: 14px;
	color: var(--uai-ink);
	opacity: 0.6;
	margin-top: 1rem;
}

.uai-meta-list dt:first-child {
	margin-top: 0;
}

.uai-meta-list dd {
	font-family: var(--uai-font-condensed);
	font-size: 15px;
	margin-bottom: 0;
}

.uai-profile-links li {
	margin-bottom: 0.4rem;
}

.uai-profile-links a {
	color: var(--uai-ink);
	text-decoration: none;
	font-family: var(--uai-font-condensed);
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
}

.uai-profile-links a:hover {
	text-decoration: underline;
}

/* Título "Links" / "Líneas de Investigación relacionadas" en la ficha */
.uai-profile-label {
	font-family: 'IBM Plex Sans', system-ui, sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	color: rgba(0, 0, 0, 0.5);
}

.uai-profile-credenciales p {
	font-family: var(--uai-font-condensed);
	font-weight: 500;
	font-size: 20px;
	line-height: 24px;
	color: var(--uai-ink);
}

.uai-profile-name {
	font-family: var(--uai-font-display);
	font-weight: 600;
	font-size: 70px;
	line-height: 110%;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--uai-black);
}

.uai-profile-subtitulo {
	font-family: var(--uai-font-display);
	font-weight: 600;
	font-size: 70px;
	line-height: 110%;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--uai-gray-1);
}

/* Columna de texto angosta (656px) — Quiénes Somos, fichas académicas */
.uai-text-column {
	max-width: 80%;
}

/* Primer párrafo destacado (medium 20/24) + H4 como bloque de texto
   destacado dentro del contenido WYSIWYG (spec del doc de correcciones). */
.uai-qs-intro > p:first-child {
	font-weight: 500;
	font-size: 20px;
	line-height: 24px;
}

.uai-equipo-galeria-item {
	width: 313px;
}

.uai-equipo-galeria-item img {
	width: 100%;
	height: 313px;
	object-fit: cover;
}

.uai-profile-bio {
	font-family: var(--uai-font-condensed);
	font-weight: 400;
	font-size: 18px;
	line-height: 22px;
	color: var(--uai-black);
}

.uai-profile-bio h2,
.uai-profile-bio h3,
.uai-profile-bio h4 {
	font-family: var(--uai-font-body);
	font-weight: 600;
	font-size: 18px;
	text-transform: none;
	letter-spacing: normal;
	margin-top: 1.5rem;
}

/* Cita — spec "Quote" del PDF (Roboto Condensed 500, 32px) */
.uai-profile-bio blockquote {
	position: relative;
	margin: 2rem 0;
	padding: 0.5rem 0 0.5rem 2rem;
	border-left: 3px solid var(--uai-cat-rojo);
	font-family: var(--uai-font-condensed);
	font-weight: 500;
	font-size: 26px;
	line-height: 1.35;
	font-style: normal;
}

.uai-profile-bio blockquote::before {
	content: '\201C';
	display: block;
	font-size: 48px;
	line-height: 1;
	color: var(--uai-cat-rojo);
	margin-bottom: 0.25rem;
}

.uai-profile-bio blockquote cite,
.uai-profile-bio blockquote footer {
	display: block;
	margin-top: 0.75rem;
	font-family: var(--uai-font-condensed);
	font-weight: 400;
	font-size: 14px;
	font-style: normal;
	color: var(--uai-gray-1);
}

/* Tabs sin JS (radios ocultos + selectores hermanos) — usado en Reseña APA/ISO/MLA */
.uai-tabs input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.uai-tabs-nav {
	display: flex;
	gap: 1.5rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--uai-border);
}

.uai-tabs-nav label {
	cursor: pointer;
	font-family: var(--uai-font-body);
	font-weight: 600;
	font-size: 15px;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid transparent;
	color: var(--uai-gray-1);
}

.uai-tabs-panel-apa,
.uai-tabs-panel-iso,
.uai-tabs-panel-mla {
	display: none;
	border: 1px solid var(--uai-border);
	border-radius: var(--uai-radius);
	padding: 1.25rem;
	font-family: var(--uai-font-condensed);
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
}

#uai-resena-apa:checked ~ .uai-tabs-nav label[for="uai-resena-apa"],
#uai-resena-iso:checked ~ .uai-tabs-nav label[for="uai-resena-iso"],
#uai-resena-mla:checked ~ .uai-tabs-nav label[for="uai-resena-mla"] {
	color: var(--uai-ink);
	border-bottom-color: var(--uai-black);
}

#uai-resena-apa:checked ~ .uai-tabs-panel-apa,
#uai-resena-iso:checked ~ .uai-tabs-panel-iso,
#uai-resena-mla:checked ~ .uai-tabs-panel-mla {
	display: block;
}

/* Franja institucional */
.uai-partners-strip {
	padding: 2.5rem 0;
	border-top: 1px solid var(--uai-border);
	display: flex;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
}

.uai-partners-strip img {
	max-height: 60px;
	width: auto;
}

/* =========================================================
   RONDA 5
   ========================================================= */

/* --- Ficha académico --- */
.uai-profile-email a {
	font-family: var(--uai-font-body);
	font-weight: 500;
	font-size: 20px;
	line-height: 24px;
	color: var(--uai-black);
	text-decoration: none;
}

.uai-profile-email a:hover {
	text-decoration: underline;
}

/* Foto de la ficha pegada al borde derecho de la pantalla */
.uai-profile-header {
	overflow: hidden;
}

/* En el hero de la ficha de persona el texto usa todo el ancho de su columna
   (no el tope de 656px que sí aplica al cuerpo/bio más abajo). */
.uai-profile-header .uai-text-column {
	max-width: none;
}

.uai-profile-photo-col {
	position: relative;
}

/* La foto tiene ancho fijo (300px, ver .uai-profile-photo) y su columna es más
   ancha, así que se empuja al borde derecho del contenedor. */
.uai-profile-photo-col .uai-profile-photo {
	display: block;
	margin-left: auto;
	/* Da algo más de alto al hero de la ficha */
	margin-bottom: 30px;
}

/* --- Equipo (archivo) --- */
.uai-equipo-intro {
	font-family: var(--uai-font-condensed);
	font-weight: 400;
	font-size: 18px;
	line-height: 22px;
	color: var(--uai-black);
	max-width: 80%;
}

/* --- Ficha proyecto/publicación --- */
/* Labels laterales (Autor / Línea / Año / Estado / Financiamiento) */
.uai-meta-list dt {
	font-family: var(--uai-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	color: rgba(0, 0, 0, 0.5);
	text-transform: none;
	letter-spacing: normal;
}

/* Títulos de sección de la ficha (Abstract / Temas relacionados / Reseña) */
.uai-ficha-subtitle {
	font-family: var(--uai-font-body);
	font-weight: 500;
	font-size: 20px;
	line-height: 25px;
	color: var(--uai-black);
	text-transform: none;
	letter-spacing: normal;
}

/* Pills de temas relacionados en fichas (spec exacta R5) */
.uai-topic--on-light {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 4px 14px;
	gap: 6px;
	border: 1px solid #e6e6e6;
	border-radius: var(--uai-radius-pill);
	font-family: var(--uai-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	color: var(--uai-black);
	background: none;
	text-decoration: none;
}

.uai-topic--on-light:hover {
	border-color: var(--uai-black);
	background: none;
	color: var(--uai-black);
}

/* Tabs de reseña (Formato APA / ISO / MLA) */
.uai-tabs-nav label {
	font-family: var(--uai-font-body);
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	color: var(--uai-black);
}

/* --- Herramientas --- */
.uai-herramienta-body {
	max-width: 80%;
}

.uai-herramienta-body img {
	max-width: 100%;
}

/* --- Conferencia Anual / Conversatorios: tipografías card-simple --- */
.uai-card-simple .uai-card-title-l {
	font-family: var(--uai-font-body);
	font-weight: 600;
	font-size: 20px;
	line-height: 24px;
	color: var(--uai-black);
}

.uai-card-simple .uai-body-m {
	font-family: var(--uai-font-body);
	font-weight: 500;
	font-size: 19px;
	line-height: 20px;
	/* R6: gris por defecto; el negro aparece solo en hover (regla más abajo). */
	color: var(--uai-gray-1);
	transition: color 0.15s ease;
}

/* R6 — Conferencia Anual / Conversatorios: en hover el subtítulo pasa a negro */
.uai-card-simple:hover .uai-body-m,
a.uai-card-simple:hover .uai-body-m {
	color: var(--uai-black);
}

.uai-card-simple:hover {
	border-color: var(--uai-black);
}

.uai-card-simple .uai-meta {
	font-family: var(--uai-font-mono);
	font-weight: 400;
	font-size: 13px;
	line-height: 17px;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.5);
}

/* Conversatorios: título de evento y meta con jerarquías propias */
.uai-card-simple--evento .uai-card-title-l {
	font-size: 18px;
	line-height: 22px;
}

.uai-card-simple--evento .uai-body-m.mb-1 {
	font-size: 16px;
	line-height: 20px;
	font-weight: 500;
}

.uai-card-simple--evento .uai-body-m.mb-2 {
	font-size: 14px;
	line-height: 18px;
	font-weight: 400;
}

/* --- Líneas de Investigación: card con imagen, mismo alto que hover --- */
.uai-card-linea {
	height: 417px;
}

.uai-card-linea .uai-card-linea-img {
	display: block;
}

/* --- Quiénes Somos / Conferencia: secciones apilables --- */
.uai-bloque-intro {
	font-family: var(--uai-font-condensed);
	font-weight: 500;
	font-size: 20px;
	line-height: 24px;
	color: var(--uai-black);
}

.uai-bloque-general {
	font-family: var(--uai-font-condensed);
	font-weight: 400;
	font-size: 18px;
	line-height: 22px;
	color: var(--uai-black);
}

.uai-herramienta-autores {
	font-family: var(--uai-font-condensed);
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	color: var(--uai-black);
}

/* --- Conferencia Anual --- */
/* Los títulos internos NO deben competir con el título de la página:
   el H1 ahora mide 70px, así que estos mantienen su escala propia
   (h4 = 25px, cabecera de sección = 40px). */
.single-conferencia .uai-conf-titulo-interno {
	line-height: 110%;
}

/* --- Líneas de Investigación (R6) --- */
/* Subtítulo de la card de línea. */
.uai-card-linea .uai-card-title-l {
	font-family: var(--uai-font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 22px;
}

/* =========================================================
   BLOQUES DE CONTENIDO APILABLES (R6)
   Tipografías exactas según el documento de correcciones.
   ========================================================= */

/* Título de sección — columna izquierda */
.uai-bloque-titulo {
	font-family: var(--uai-font-display);
	font-weight: 600;
	font-size: 25px;
	line-height: 25px;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

/* Texto descriptivo destacado */
.uai-bloque-destacado {
	font-family: var(--uai-font-condensed);
	font-weight: 500;
	font-size: 20px;
	line-height: 24px;
	margin-bottom: 1.25rem;
}

/* Texto general */
.uai-bloque-texto,
.uai-bloque-texto p {
	font-family: var(--uai-font-condensed);
	font-weight: 400;
	font-size: 18px;
	line-height: 140%;
}

.uai-bloque-texto {
	margin-bottom: 1.25rem;
}

/* Imagen con bajada */
.uai-bloque-imagen {
	margin: 0 0 1.5rem;
}

.uai-bloque-imagen img {
	width: 100%;
	height: auto;
	display: block;
}

/* Video responsivo 16:9 */
.uai-bloque-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-bottom: 0.5rem;
}

.uai-bloque-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.uai-bloque-boton {
	margin-bottom: 1.5rem;
}

/* Cards slide: nombre y descripción con su propia jerarquía */
.uai-carousel .uai-card-simple .uai-card-title-l {
	font-family: var(--uai-font-body);
	font-weight: 600;
	font-size: 18px;
	line-height: 22px;
}

.uai-carousel .uai-card-simple .uai-body-m {
	font-family: var(--uai-font-condensed);
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
}

/* Ficha de persona dentro de un bloque */
.uai-bloque-persona {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.uai-bloque-persona-foto {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: var(--uai-radius-pill);
	flex-shrink: 0;
}

.uai-bloque-persona-cargo {
	font-family: var(--uai-font-condensed);
	font-size: 16px;
	line-height: 20px;
	color: var(--uai-gray-1);
}

/* Sin doble borde cuando hay varias secciones seguidas */
.uai-bloques-seccion:last-of-type {
	border-bottom: 0 !important;
}

/* --- Financiamiento (R6): las cards muestran logos institucionales ---
   Con object-fit:cover los logos se recortaban (sus proporciones van de
   casi cuadradas 264x240 a muy apaisadas 500x120). Se muestran completos. */
.uai-card-simple--logo img {
	object-fit: contain;
	background: var(--uai-white);
	padding: 0.5rem;
}

/* Home > Nuestro Equipo: la grilla fluye hacia abajo (ya no es carrusel),
   así que las cards ocupan el ancho de su celda en vez de los 427px fijos. */
.uai-team-grid .uai-team-card {
	width: 100%;
}

/* =========================================================
   R7
   ========================================================= */

/* Filtros de línea / temática / año: el border-radius ya estaba, pero los
   navegadores ignoran el redondeado en un <select> con apariencia nativa.
   Con appearance:none sí se aplica, y la flecha se repone como background. */
.uai-filter-select select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231c1c1c' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.1rem center;
	background-size: 14px 14px;
}

/* Los carruseles de cards que salen a ancho completo muestran 4 por vista
   (antes vivían dentro de la columna de 8 y solo cabían 2 y media). */
.uai-bloques-full .uai-carousel > * {
	flex: 0 0 auto;
	width: calc((100% - 3 * 1.25rem) / 4);
}

@media (max-width: 1199.98px) {
	.uai-bloques-full .uai-carousel > * {
		width: calc((100% - 2 * 1.25rem) / 3);
	}
}

@media (max-width: 991.98px) {
	.uai-bloques-full .uai-carousel > * {
		width: calc((100% - 1.25rem) / 2);
	}
}

@media (max-width: 767.98px) {
	.uai-bloques-full .uai-carousel > * {
		width: 85%;
	}
}

/* ---------------------------------------------------------
   Home > Líneas de investigación: una banda de color a todo
   el ancho por cada línea (el color sale del término).
   --------------------------------------------------------- */
.uai-lineas-home {
	border-top: 1px solid var(--uai-black);
}

.uai-lineas-home-head {
	padding-top: 3rem;
	margin-bottom: 2.5rem;
}

.uai-linea-banda {
	padding: 2.75rem 0 2.5rem;
}

.uai-linea-banda-titulo,
.uai-linea-banda-subtitulo {
	font-family: var(--uai-font-display);
	font-weight: 600;
	font-size: 40px;
	line-height: 110%;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

.uai-linea-banda-titulo {
	color: var(--uai-black);
}

/* Oscurecido del propio color de la banda, no un gris fijo. */
.uai-linea-banda-subtitulo {
	color: rgba(0, 0, 0, 0.35);
}

.uai-linea-banda-boton {
	margin-top: 1.25rem;
	background-color: transparent;
	border-color: var(--uai-black);
	font-size: 14px;
	padding: 0.45rem 1rem;
}

.uai-linea-banda-boton:hover {
	background-color: var(--uai-black);
	color: var(--uai-white);
}

@media (max-width: 767.98px) {
	.uai-linea-banda {
		padding: 2rem 0;
	}

	.uai-linea-banda-titulo,
	.uai-linea-banda-subtitulo {
		font-size: 28px;
	}
}


/* =========================================================
   MOBILE (auditoría 2026-09-15)
   A 375px las 20 páginas medían 755px de ancho. Causas: header
   sin versión mobile, filas .g-5 que sobresalen del container,
   grilla de equipo con mínimo de 380px y títulos a tamaño desktop.
   ========================================================= */

/* Bajo 992px las columnas de .g-5 se apilan: el gutter horizontal de
   3rem ya no separa nada y su margen negativo (-1.5rem) excede el
   padding del container (0.75rem), empujando la fila fuera de pantalla. */
@media (max-width: 991.98px) {
	.row.g-5 {
		--bs-gutter-x: 1.5rem;
	}
}

@media (max-width: 767.98px) {

	/* --- Header: controles solo con ícono. 84px de alto para el logo
	   de 69px (+50% sobre los 46px anteriores) con aire arriba y abajo. --- */
	.uai-navbar {
		min-height: 84px;
	}

	.uai-navbar-controls,
	.uai-menu-close-btn {
		height: 84px;
	}

	/* 69px de alto (logo 3.84:1 → 265px), +50% sobre los 46px anteriores.
	   Cabe porque en mobile el header solo lleva el ícono de menú. Se quita
	   el margin-right de 16px que Bootstrap da a .navbar-brand. */
	.uai-navbar .navbar-brand img,
	.uai-mega-menu-logo img {
		height: 69px;
		width: auto;
	}

	.uai-navbar .navbar-brand {
		margin-right: 0;
	}

	.uai-navbar-controls > * {
		padding: 0 0.8rem;
		font-size: 14px;
	}

	/* Los botones conservan su nombre accesible vía aria-label. */
	.uai-navbar-controls > button > span,
	.uai-menu-close-btn > span {
		display: none;
	}

	.uai-navbar-controls .bi-search,
	.uai-navbar-controls .bi-list,
	.uai-menu-close-btn .bi {
		font-size: 20px;
	}

	.uai-menu-close-btn {
		padding: 0 1rem;
	}

	/* --- Títulos más pequeños que su tamaño mobile anterior ---
	   Nivel H1 unificado (hero, título de página, fichas y nombre de
	   integrante): 39% menos que 70px, el máximo con el que las palabras
	   largas del contenido actual caben sin cortarse. El resto: 30% menos. */
	h1, .display-1,
	.uai-hero-panel h1,
	.uai-page-title,
	.uai-profile-name,
	.uai-profile-subtitulo {
		font-size: 43px;      /* 70px */
	}

	h2, .display-2,
	.uai-section-head h2,
	.uai-banner-content h2 {
		font-size: 28px;      /* 40px */
	}

	h3 {
		font-size: 21px;      /* 30px */
	}

	h4 {
		font-size: 18px;      /* 25px */
		line-height: 18px;
	}

	.uai-bloque-titulo {
		font-size: 18px;      /* 25px */
		line-height: 18px;
	}

	.uai-linea-banda-titulo,
	.uai-linea-banda-subtitulo {
		font-size: 20px;      /* 28px */
	}

	/* Red de seguridad: una palabra más ancha que la pantalla (nombres,
	   subtítulos o términos que carga el cliente) se corta con guion en
	   vez de desbordar. hyphens:auto sola corta también palabras que caben
	   ("ES-TUDIOS") para rellenar la línea; se limita a palabras de 13+
	   letras con 5 antes y después del corte (a 43px, todas las palabras
	   del sitio que no caben en 375px tienen 13 o más). */
	h1, h2, h3,
	.uai-page-title,
	.uai-profile-name,
	.uai-profile-subtitulo,
	.uai-linea-banda-titulo,
	.uai-linea-banda-subtitulo {
		overflow-wrap: break-word;
		-webkit-hyphens: auto;
		hyphens: auto;
		hyphenate-limit-chars: 13 5 5;
		-webkit-hyphenate-limit-before: 5;
		-webkit-hyphenate-limit-after: 5;
	}
}

/* Pantallas de menos de 360px (ej. iPhone SE 1ª gen., 320px): el logo de
   46px + los tres controles no caben; se achican ambos lo justo. */
@media (max-width: 359.98px) {
	.uai-navbar .navbar-brand img,
	.uai-mega-menu-logo img {
		height: 57px;      /* 38px + 50% */
	}

	.uai-navbar-controls > * {
		padding: 0 0.6rem;
	}

	/* Logo de acreditación (100px de alto → 325px de ancho): conserva el alto
	   pedido y la imagen se encoge dentro del ancho disponible. */
	.uai-footer-accreditation-logo {
		max-width: 100%;
		object-fit: contain;
		object-position: left center;
	}
}

/* Los selects de filtro toman el ancho de su opción más larga
   ("Industrias creativas, plataformas e IA"); nunca más que su contenedor. */
.uai-filter-select,
.uai-filter-select select {
	max-width: 100%;
}

/* =========================================================
   CORRECCIONES MOBILE (doc "LABCSD correcciones mobile")
   ========================================================= */

/* La miga de pan nunca desborda: los títulos largos siguen en otra línea. */
.uai-breadcrumb {
	flex-wrap: wrap;
	row-gap: 0.25rem;
}

@media (max-width: 767.98px) {

	/* --- Header: solo logo e ícono de menú --- */
	.uai-navbar-controls > .dropdown,
	.uai-navbar-controls > span,
	.uai-navbar-controls > [data-bs-target="#uai-search-bar"] {
		display: none;
	}

	/* --- Menú: enlaces, idiomas, redes y buscador, alineados a la izquierda --- */
	.uai-mega-menu-aside {
		justify-content: flex-start !important;
		margin-top: 2rem;
		/* Alineado con los enlaces del menú, que no tienen padding. */
		padding-left: 0;
	}

	.uai-mega-menu-aside .uai-social-icons {
		justify-content: flex-start !important;
	}

	.uai-mega-menu-langs {
		display: flex;
		gap: 1.25rem;
		margin-bottom: 1.75rem;
	}

	.uai-mega-menu-langs a {
		font-family: var(--uai-font-mono);
		font-size: 18px;
		letter-spacing: 0;
		color: var(--uai-ink);
		text-decoration: none;
	}

	.uai-mega-menu-langs a.is-active {
		text-decoration: underline;
		text-underline-offset: 6px;
	}

	.uai-mega-menu-buscador {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		justify-content: center;
		margin-top: 1.75rem;
		padding: 1.25rem;
		border: 1px solid var(--uai-border);
		border-radius: var(--uai-radius);
	}

	.uai-mega-menu-buscador input {
		border: none;
		background: none;
		font-family: var(--uai-font-display);
		font-weight: 500;
		font-size: 15px;
		text-transform: uppercase;
		width: 60%;
	}

	.uai-mega-menu-buscador input:focus {
		outline: none;
	}

	/* --- Home: hero con la imagen primero --- */
	.uai-hero-panel .row {
		flex-direction: column-reverse;
	}

	/* La franja de destacados se navega hacia el lado: se ve uno entero
	   y un 30% del siguiente. */
	.uai-hero-strip .row {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	/* 77%: el ítem completo + el 30% del siguiente ocupan el ancho visible. */
	.uai-hero-strip-item {
		flex: 0 0 77%;
		max-width: 77%;
		scroll-snap-align: start;
	}

	/* --- Espacio entre los títulos de sección y su contenido --- */
	.row:not(.g-5):not(.gy-5) > [class*="col-lg-4"]:not(:last-child) {
		margin-bottom: 1.25rem;
	}

	/* --- Filtros y buscador al ancho de la pantalla --- */
	.uai-filter-bar {
		flex-direction: column;
		align-items: stretch;
	}

	.uai-filter-bar > *,
	.uai-filter-select,
	.uai-filter-select select,
	.uai-filter-search {
		width: 100%;
		flex: 0 0 auto;
	}

	/* --- Ficha de persona: foto centrada justo bajo la miga de pan --- */
	.uai-profile-photo-col {
		order: -1;
	}

	.uai-profile-photo-col .uai-profile-photo {
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 1.5rem;
	}

	/* --- Separaciones de las fichas --- */
	/* Aire entre el título del proyecto y la línea que lo separa del contenido. */
	.uai-ficha-titulo {
		padding-bottom: 1.5rem;
	}

	/* En la noticia sobra el espacio entre esa línea y los datos. */
	.single-noticia .uai-section.border-top {
		padding-top: 1.5rem;
	}

	/* Los botones quedan más cerca de la línea del título de página. */
	.uai-page-header {
		margin-bottom: 1.25rem;
	}

	/* --- Reseñas: los tres formatos caben en una línea --- */
	.uai-tabs-nav {
		gap: 0.9rem;
	}

	.uai-tabs-nav label {
		font-size: 13px;
		white-space: nowrap;
	}
}

/* Botón de menú mobile un 30% más grande (ícono y padding): el botón se
   ensancha hacia la izquierda, así que la línea blanca separadora se corre. */
@media (max-width: 767.98px) {
	.uai-navbar-controls > [data-bs-target="#uai-mega-menu"] {
		padding: 0 1.04rem;      /* 0.8rem × 1.3 */
	}

	.uai-navbar-controls > [data-bs-target="#uai-mega-menu"] .bi-list {
		font-size: 26px;         /* 20px × 1.3 */
	}
}

@media (max-width: 359.98px) {
	.uai-navbar-controls > [data-bs-target="#uai-mega-menu"] {
		padding: 0 0.78rem;      /* 0.6rem × 1.3 */
	}
}


/* =========================================================
   CORRECCIONES DESKTOP (pestaña "Correcciones Desktop")
   Rigen en todos los anchos: reemplazan la regla mobile anterior
   que mostraba las imágenes de las cards a todo el ancho.
   ========================================================= */

/* Investigación y Redes internacionales: foto cuadrada al 50% de la card. */
.uai-card-simple:not(.uai-card-simple--logo):not(.uai-card-simple--evento) img {
	width: 50%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 1rem 1rem 0;
}

/* Financiamiento (estilo "logo"): alineado a la izquierda, del 50% del ancho
   (logo cuadrado) al 70% (logo alargado). La caja mide 70% de ancho y su alto
   se limita al 50% del ancho de la card; object-fit:contain encaja el logo
   ahí, pegado a la izquierda. */
.uai-card-simple--logo {
	container-type: inline-size;
}

/* Alto fijo (no "hasta"): así el texto de todas las cards arranca a la misma
   altura, sea el logo cuadrado o alargado. */
.uai-card-simple--logo img {
	width: 70%;
	height: 50cqw;
	aspect-ratio: auto;
	object-fit: contain;
	object-position: left center;
	padding: 0;
	background: none;
	margin: 1rem 1rem 0;
}


/* Financiamiento: el bloque de texto queda anclado abajo y el botón siempre
   al pie de la card, independiente del alto del logo y del largo del texto. */
.uai-card-simple--logo .uai-card-simple-body {
	justify-content: flex-end;
}

.uai-card-simple .btn-uai {
	margin-top: auto;
}