/* ---------------------------------------------------------------------------
 * principal.css — estilos del tema cfp-tocopilla
 *
 * Consume las variables de tokens.css y NO define ningún color propio.
 * Si necesitas un color que no está en tokens.css, el lugar donde agregarlo
 * es tokens.css, no aquí (CLAUDE.md §5).
 *
 * ALCANCE. Esto viste las plantillas de respaldo del tema, es decir, lo que se
 * ve cuando Elementor no pinta. Cuando el Theme Builder está operando, casi
 * nada de este archivo se aplica: Elementor manda en su territorio y este CSS
 * no persigue sus clases. Lo único transversal son la base tipográfica, el
 * foco visible, el enlace de salto y la red de movimiento reducido, que sí
 * deben valer siempre.
 *
 * PUNTO DE CORTE. 60rem (960px). No puede ser un token: las media queries no
 * leen custom properties. Si cambia, cambia en los cuatro sitios de este
 * archivo donde aparece, y en ningún otro lado.
 *
 * CONTRATO CON inc/recursos.php. El <nav class="cfpt-navegacion"> es siempre
 * un bloque y la disposición horizontal vive en .cfpt-navegacion__lista. El
 * bloque <noscript> fuerza `display:block` sobre el <nav> para quien navegue
 * sin JavaScript; si alguien pone flex aquí, rompe el escritorio de esas
 * personas.
 * ------------------------------------------------------------------------- */


/* ===========================================================================
 * 1. BASE
 * ========================================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	/* Compensa el desplazamiento de los anclajes bajo la cabecera. */
	scroll-padding-top: var(--esp-xl);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--color-fondo);
	color: var(--color-texto);
	font-family: var(--fuente-base);
	font-size: var(--texto-base);
	font-weight: var(--peso-normal);
	line-height: var(--interlineado-base);
	letter-spacing: var(--letra-base);
	/* Evita que una palabra larga desborde en móvil. */
	overflow-wrap: break-word;
}

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

/*
 * Las imágenes llevan width y height en el marcado para reservar su espacio
 * (CLAUDE.md §7, CLS). height:auto arriba conserva la proporción cuando el
 * ancho disponible es menor que el declarado, sin perder esa reserva.
 */

figure {
	margin: 0;
}


/* ===========================================================================
 * 2. TIPOGRAFÍA
 * ========================================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--esp-sm);
	font-family: var(--fuente-display);
	font-weight: var(--peso-negrita);
	line-height: var(--interlineado-titulo);
	letter-spacing: var(--letra-titulo);
	color: var(--color-texto);
}

h1 {
	font-size: var(--texto-3xl);
	font-weight: var(--peso-display);
	line-height: var(--interlineado-display);
	letter-spacing: var(--letra-display);
}

h2 { font-size: var(--texto-2xl); }
h3 { font-size: var(--texto-xl); }
h4 { font-size: var(--texto-lg); }

h5,
h6 {
	font-size: var(--texto-md);
	font-weight: var(--peso-semi);
}

p,
ul,
ol,
blockquote,
figure {
	margin-top: 0;
	margin-bottom: var(--esp-md);
}

/* Última cosa de un bloque: sin margen inferior, para no descuadrar el ritmo. */
p:last-child,
ul:last-child,
ol:last-child {
	margin-bottom: 0;
}

small {
	font-size: var(--texto-sm);
}


/* ===========================================================================
 * 3. ENLACES Y FOCO
 *
 * El foco es visible SIEMPRE (CLAUDE.md §8). Aquí no hay ningún outline:none
 * sin reemplazo, y no debe haberlo nunca.
 * ========================================================================= */

a {
	color: var(--color-enlace);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--dur-rapida) var(--suavizado-estandar);
}

a:hover {
	color: var(--color-enlace-hover);
}

/*
 * :focus-visible y no :focus, para que el anillo aparezca en la navegación por
 * teclado y no en cada clic de ratón. El :focus de respaldo cubre navegadores
 * donde :focus-visible no exista todavía.
 */
:focus {
	outline: var(--foco-grosor) solid var(--foco-color);
	outline-offset: var(--foco-desfase);
}

:focus:not(:focus-visible) {
	outline: none;
}

:focus-visible {
	outline: var(--foco-grosor) solid var(--foco-color);
	outline-offset: var(--foco-desfase);
}


/* ===========================================================================
 * 4. UTILIDADES
 * ========================================================================= */

.cfpt-contenedor {
	width: 100%;
	max-width: var(--ancho-contenedor);
	margin-inline: auto;
	padding-inline: var(--esp-borde-pantalla);
}

.cfpt-contenedor--estrecho {
	max-width: var(--ancho-estrecho);
}

/*
 * Clase de WordPress core: la usan get_search_form(), the_posts_pagination() y
 * varios widgets para dar contexto a lectores de pantalla. Si el tema no la
 * define, ese texto se ve en pantalla y estropea el diseño.
 *
 * No se usa display:none: eso lo esconde también del lector de pantalla, que
 * es justo lo contrario de lo que se busca.
 */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Enlace de salto: fuera de pantalla hasta que recibe el foco. */
.cfpt-saltar-contenido {
	position: absolute;
	top: var(--esp-2xs);
	left: var(--esp-2xs);
	z-index: var(--z-aviso);
	transform: translateY(-200%);
	padding: var(--esp-2xs) var(--esp-sm);
	background-color: var(--azul-institucional);
	color: var(--sobre-azul-institucional);
	font-weight: var(--peso-semi);
	text-decoration: none;
	border-radius: var(--radio-md);
	transition: transform var(--dur-rapida) var(--suavizado-salida);
}

.cfpt-saltar-contenido:focus,
.cfpt-saltar-contenido:focus-visible {
	transform: translateY(0);
	color: var(--sobre-azul-institucional);
}

/*
 * EXCEPCIÓN DOCUMENTADA a la regla de foco visible.
 *
 * <main> lleva tabindex="-1" solo para poder recibir el foco desde el enlace
 * de salto. No es un control: no se alcanza tabulando, no se activa y no forma
 * parte del recorrido por teclado. Dibujarle un anillo pintaría un rectángulo
 * alrededor de media página, que confunde más de lo que informa.
 *
 * La regla de tokens.css exige un reemplazo con 3:1 cuando se quita un
 * outline; aquí el reemplazo es el propio salto de desplazamiento, que es la
 * señal de que la acción ocurrió. Ningún elemento interactivo pierde su
 * anillo por esta regla.
 */
.cfpt-principal:focus,
.cfpt-principal:focus-visible {
	outline: none;
}

.cfpt-principal {
	display: block;
	padding-block: var(--esp-seccion);
}


/* ===========================================================================
 * 5. BARRA DE UTILIDADES
 *
 * Superficie azul institucional con su par de texto verificado: 9.47:1.
 * ========================================================================= */

.cfpt-utilidades {
	background-color: var(--azul-institucional);
	color: var(--sobre-azul-institucional);
	font-size: var(--texto-sm);
}

.cfpt-utilidades__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esp-md);
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cfpt-utilidades__lista a {
	display: inline-block;
	/* Altura de toque cómoda sin inflar la franja en escritorio. */
	padding-block: var(--esp-xs);
	color: var(--sobre-azul-institucional);
	text-decoration: none;
}

.cfpt-utilidades__lista a:hover,
.cfpt-utilidades__lista a:focus-visible {
	color: var(--sobre-azul-institucional);
	text-decoration: underline;
}

/* Sobre fondo azul, el anillo azul no se vería. */
.cfpt-utilidades :focus-visible {
	outline-color: var(--sobre-azul-institucional);
}

@media (max-width: 60rem) {
	.cfpt-utilidades__lista {
		justify-content: flex-start;
		gap: var(--esp-sm);
	}
}


/* ===========================================================================
 * 6. CABECERA
 * ========================================================================= */

.cfpt-cabecera {
	position: relative;
	z-index: var(--z-cabecera);
	background-color: var(--color-fondo);
	border-bottom: 1px solid var(--color-borde);
}

.cfpt-cabecera__interior {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--esp-md);
	padding-block: var(--esp-sm);
}

.cfpt-cabecera__marca {
	display: flex;
	align-items: center;
	/* La marca no se encoge cuando la navegación crece. */
	flex: 0 0 auto;
}

.cfpt-cabecera__marca img,
.cfpt-cabecera__marca .custom-logo {
	/*
	 * Se limita por altura y no por ancho: el logotipo es horizontal y su
	 * proporción manda. Provisional hasta que llegue la versión vectorial
	 * (CLAUDE.md §11).
	 */
	max-height: 3.5rem;
	width: auto;
}

.cfpt-cabecera__titulo {
	font-family: var(--fuente-display);
	font-size: var(--texto-lg);
	font-weight: var(--peso-display);
	letter-spacing: var(--letra-titulo);
	color: var(--azul-institucional);
	text-decoration: none;
}


/* ===========================================================================
 * 7. NAVEGACIÓN PRINCIPAL
 *
 * Ver el contrato del encabezado de este archivo: el <nav> es siempre bloque.
 * ========================================================================= */

.cfpt-navegacion {
	display: block;
}

/*
 * wp_page_menu() envuelve su lista en un <div> que core no deja suprimir: el
 * argumento 'container' cae de vuelta a 'div' si se le pasa vacío. En lugar de
 * escribir un walker propio solo para quitarlo, se saca del árbol de cajas.
 * Un <div> no aporta semántica, así que display:contents no le quita ninguna.
 */
.cfpt-navegacion__respaldo {
	display: contents;
}

.cfpt-navegacion__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--esp-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cfpt-navegacion__lista li {
	position: relative;
	margin: 0;
}

.cfpt-navegacion__lista a {
	display: block;
	padding-block: var(--esp-2xs);
	font-weight: var(--peso-semi);
	color: var(--color-texto);
	text-decoration: none;
}

.cfpt-navegacion__lista a:hover,
.cfpt-navegacion__lista a:focus-visible {
	color: var(--color-enlace);
	text-decoration: underline;
}

/* Página actual: subrayado permanente, no solo color. El color por sí solo no
 * es un medio válido para transmitir información (WCAG 1.4.1). */
.cfpt-navegacion__lista .current-menu-item > a,
.cfpt-navegacion__lista .current_page_item > a,
.cfpt-navegacion__lista [aria-current="page"] {
	color: var(--color-enlace);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* --- Botón desplegable de submenú, inyectado por navegacion.js ----------- */

.cfpt-navegacion__desplegar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: none;
	border: 0;
	color: var(--color-texto);
	cursor: pointer;
}

/* Chevron dibujado con bordes: sin petición de red y hereda el color. */
.cfpt-navegacion__desplegar-icono {
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-25%) rotate(45deg);
	transition: transform var(--dur-rapida) var(--suavizado-estandar);
}

.cfpt-navegacion__desplegar[aria-expanded="true"] .cfpt-navegacion__desplegar-icono {
	transform: translateY(25%) rotate(-135deg);
}

/* --- Submenús ------------------------------------------------------------ */

.cfpt-navegacion__lista ul {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cfpt-navegacion__elemento--abierto > ul {
	display: block;
}


/* ---------------------------------------------------------------------------
 * Escritorio: la navegación es una fila y los submenús flotan.
 * ------------------------------------------------------------------------- */

@media (min-width: 60.0625rem) {

	.cfpt-cabecera__conmutador {
		display: none;
	}

	/* El padre y su botón, en la misma línea. */
	.cfpt-navegacion__lista > li {
		display: flex;
		align-items: center;
		gap: var(--esp-3xs);
	}

	.cfpt-navegacion__desplegar {
		width: 1.5rem;
		height: 1.5rem;
	}

	.cfpt-navegacion__lista ul {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: var(--z-desplegable);
		min-width: 14rem;
		padding: var(--esp-2xs) 0;
		background-color: var(--color-fondo);
		border: 1px solid var(--color-borde);
		border-radius: var(--radio-md);
		box-shadow: var(--sombra-md);
	}

	.cfpt-navegacion__lista ul a {
		padding: var(--esp-2xs) var(--esp-sm);
	}
}


/* ---------------------------------------------------------------------------
 * Móvil y tablet: la navegación se pliega bajo la cabecera.
 *
 * Este es el estado POR DEFECTO, no una mejora progresiva. El razonamiento
 * está en el docblock de cfpt_estilos_sin_javascript(), en inc/recursos.php:
 * plegar desde el script produciría un salto de maquetación que castiga el
 * CLS. El bloque <noscript> revierte esto para quien no tenga JavaScript.
 * ------------------------------------------------------------------------- */

@media (max-width: 60rem) {

	.cfpt-cabecera__conmutador {
		display: inline-flex;
		align-items: center;
		gap: var(--esp-2xs);
		/* 44px de alto: objetivo de toque cómodo. */
		min-height: 2.75rem;
		padding: var(--esp-2xs) var(--esp-xs);
		background: none;
		border: 1px solid var(--color-borde);
		border-radius: var(--radio-md);
		color: var(--color-texto);
		font-family: inherit;
		font-size: var(--texto-base);
		font-weight: var(--peso-semi);
		cursor: pointer;
	}

	/* Hamburguesa de tres trazos, con sombras en lugar de tres elementos. */
	.cfpt-cabecera__conmutador-icono {
		width: 1.25rem;
		height: 2px;
		background-color: currentColor;
		box-shadow:
			0 -6px 0 currentColor,
			0 6px 0 currentColor;
	}

	.cfpt-navegacion {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: var(--z-desplegable);
		max-height: 80vh;
		overflow-y: auto;
		padding: var(--esp-sm) var(--esp-borde-pantalla) var(--esp-md);
		background-color: var(--color-fondo);
		border-bottom: 1px solid var(--color-borde);
		box-shadow: var(--sombra-lg);
	}

	.cfpt-navegacion--abierta {
		display: block;
	}

	.cfpt-navegacion__lista {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.cfpt-navegacion__lista > li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid var(--color-borde);
	}

	.cfpt-navegacion__lista > li:last-child {
		border-bottom: 0;
	}

	.cfpt-navegacion__lista a {
		flex: 1 1 auto;
		display: flex;
		align-items: center;
		min-height: 2.75rem;
	}

	/* El submenú ocupa la fila completa, bajo su padre y su botón. */
	.cfpt-navegacion__lista ul {
		flex: 1 0 100%;
		padding-left: var(--esp-md);
		border-top: 1px solid var(--color-borde);
	}

	.cfpt-navegacion__lista ul li + li {
		border-top: 1px solid var(--color-borde);
	}
}


/* ===========================================================================
 * 8. PIE
 *
 * Claro a propósito. El logotipo tiene texto en dos azules que se destruye al
 * invertirlo con filtros CSS, y todavía no existe la versión negativa
 * (CLAUDE.md §3.3 y §11). Cuando llegue, este bloque cambia de superficie y
 * el par de texto sale de --sobre-azul-oscuro, ya verificado en 13.11:1.
 * ========================================================================= */

.cfpt-pie {
	padding-block: var(--esp-xl);
	background-color: var(--color-fondo-alt);
	color: var(--sobre-hueso);
	border-top: 1px solid var(--color-borde);
}

.cfpt-pie__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esp-md);
	margin: 0 0 var(--esp-lg);
	padding: 0;
	list-style: none;
}

.cfpt-pie__lista a {
	font-weight: var(--peso-semi);
	text-decoration: none;
}

.cfpt-pie__lista a:hover,
.cfpt-pie__lista a:focus-visible {
	text-decoration: underline;
}

.cfpt-pie__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esp-2xs) var(--esp-md);
	justify-content: space-between;
	padding-top: var(--esp-md);
	border-top: 1px solid var(--color-borde);
	font-size: var(--texto-sm);
	color: var(--color-texto-suave);
}

.cfpt-pie__copyright,
.cfpt-pie__credito {
	margin: 0;
}


/* ===========================================================================
 * 9. ARCHIVO Y TARJETAS
 * ========================================================================= */

.cfpt-archivo__cabecera {
	margin-bottom: var(--esp-xl);
}

.cfpt-archivo__descripcion {
	max-width: var(--medida-texto);
	color: var(--color-texto-suave);
	font-size: var(--texto-md);
}

.cfpt-archivo__lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: var(--esp-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cfpt-tarjeta {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--color-fondo);
	border: 1px solid var(--color-borde);
	border-radius: var(--radio-lg);
	overflow: hidden;
	transition:
		transform var(--dur-base) var(--suavizado-salida),
		box-shadow var(--dur-base) var(--suavizado-salida);
}

/*
 * Movimiento sobrio (CLAUDE.md §4): 4px y sombra. Solo transform y opacity,
 * que no fuerzan recálculo de maquetación y por tanto no castigan el INP.
 * :focus-within incluido para que quien navegue por teclado reciba la misma
 * señal que quien usa ratón.
 */
.cfpt-tarjeta:hover,
.cfpt-tarjeta:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--sombra-md);
}

.cfpt-tarjeta__enlace-imagen {
	display: block;
}

.cfpt-tarjeta__enlace-imagen img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.cfpt-tarjeta__titulo {
	margin: var(--esp-md) var(--esp-md) var(--esp-2xs);
	font-size: var(--texto-lg);
}

.cfpt-tarjeta__titulo a {
	color: var(--color-texto);
	text-decoration: none;
}

.cfpt-tarjeta__titulo a:hover,
.cfpt-tarjeta__titulo a:focus-visible {
	color: var(--color-enlace);
	text-decoration: underline;
}

.cfpt-tarjeta__meta {
	margin: 0 var(--esp-md) var(--esp-2xs);
	font-size: var(--texto-sm);
	color: var(--color-texto-suave);
}

.cfpt-tarjeta__extracto {
	margin: 0 var(--esp-md) var(--esp-md);
	color: var(--color-texto-suave);
}

.cfpt-sin-resultados {
	max-width: var(--medida-texto);
	font-size: var(--texto-md);
}


/* ===========================================================================
 * 10. ENTRADA Y PÁGINA
 * ========================================================================= */

.cfpt-entrada__cabecera,
.cfpt-pagina__cabecera {
	margin-bottom: var(--esp-lg);
}

.cfpt-entrada__meta {
	margin: 0;
	font-size: var(--texto-sm);
	color: var(--color-texto-suave);
}

.cfpt-entrada__imagen {
	margin-bottom: var(--esp-lg);
}

.cfpt-entrada__imagen img {
	width: 100%;
	border-radius: var(--radio-lg);
}

/* Medida de lectura: entre 60 y 75 caracteres por línea. */
.cfpt-entrada__contenido > *,
.cfpt-pagina__contenido > * {
	max-width: var(--medida-texto);
}

/* Las imágenes y los bloques anchos no se recortan a la medida del texto. */
.cfpt-entrada__contenido > figure,
.cfpt-entrada__contenido > .alignwide,
.cfpt-entrada__contenido > .alignfull,
.cfpt-pagina__contenido > figure,
.cfpt-pagina__contenido > .alignwide,
.cfpt-pagina__contenido > .alignfull {
	max-width: none;
}

.cfpt-entrada__contenido h2,
.cfpt-pagina__contenido h2 {
	margin-top: var(--esp-xl);
}

.cfpt-entrada__contenido h3,
.cfpt-pagina__contenido h3 {
	margin-top: var(--esp-lg);
}


/* ===========================================================================
 * 11. PAGINACIÓN
 * ========================================================================= */

.cfpt-paginacion {
	margin-top: var(--esp-xl);
}

.cfpt-paginacion .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esp-2xs);
	align-items: center;
}

.cfpt-paginacion .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding-inline: var(--esp-2xs);
	border: 1px solid var(--color-borde);
	border-radius: var(--radio-md);
	text-decoration: none;
}

.cfpt-paginacion .page-numbers:hover {
	border-color: var(--color-enlace);
}

.cfpt-paginacion .page-numbers.current {
	background-color: var(--azul-institucional);
	border-color: var(--azul-institucional);
	color: var(--sobre-azul-institucional);
	font-weight: var(--peso-semi);
}

.cfpt-paginacion-entrada {
	margin-top: var(--esp-lg);
	font-weight: var(--peso-semi);
}


/* ===========================================================================
 * 12. FORMULARIOS
 *
 * El formulario de búsqueda es el de core con soporte html5, que ya trae su
 * etiqueta asociada. Aquí solo se viste.
 * ========================================================================= */

.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esp-2xs);
	max-width: var(--medida-texto);
	margin-top: var(--esp-md);
}

input[type="search"],
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
	flex: 1 1 12rem;
	min-height: 2.75rem;
	padding: var(--esp-2xs) var(--esp-xs);
	background-color: var(--color-fondo);
	border: 1px solid var(--color-borde);
	border-radius: var(--radio-md);
	color: var(--color-texto);
	font-family: inherit;
	font-size: var(--texto-base);
}

input[type="submit"],
button[type="submit"],
.cfpt-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: var(--esp-2xs) var(--esp-md);
	background-color: var(--azul-institucional);
	border: 1px solid var(--azul-institucional);
	border-radius: var(--radio-md);
	color: var(--sobre-azul-institucional);
	font-family: inherit;
	font-size: var(--texto-base);
	font-weight: var(--peso-semi);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur-rapida) var(--suavizado-estandar);
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.cfpt-boton:hover {
	background-color: var(--azul-oscuro);
	border-color: var(--azul-oscuro);
	color: var(--sobre-azul-oscuro);
}


/* ===========================================================================
 * 13. ERROR 404
 * ========================================================================= */

.cfpt-error404__texto {
	max-width: var(--medida-texto);
	font-size: var(--texto-md);
}

.cfpt-error404__volver {
	margin-top: var(--esp-lg);
	font-weight: var(--peso-semi);
}


/* ===========================================================================
 * 14. AVISO DE MÓDULO DESACTIVADO
 *
 * Solo lo ve quien puede activar plugins (ver inc/modulo.php). Usa el par de
 * advertencia de tokens.css: amarillo de superficie con tinta encima, 10.28:1.
 * ========================================================================= */

.cfpt-aviso-modulo {
	max-width: var(--medida-texto);
	margin-block: var(--esp-lg);
	padding: var(--esp-md);
	background-color: var(--color-advertencia-superficie);
	color: var(--color-advertencia-texto);
	border-radius: var(--radio-md);
}

.cfpt-aviso-modulo p {
	margin-bottom: var(--esp-2xs);
}

.cfpt-aviso-modulo a {
	color: var(--color-advertencia-texto);
	font-weight: var(--peso-semi);
}

.cfpt-aviso-modulo__nota {
	margin-bottom: 0;
	font-size: var(--texto-sm);
}


/* ===========================================================================
 * 15. CATÁLOGO DE PROVEEDORES
 * ========================================================================= */

.cfpt-catalogo__buscador {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--esp-2xs);
	margin-bottom: var(--esp-lg);
}

.cfpt-catalogo__buscador label {
	flex: 1 0 100%;
	margin-bottom: var(--esp-3xs);
	font-weight: var(--peso-semi);
}

.cfpt-catalogo__buscador input[type="search"] {
	flex: 1 1 16rem;
}

/* --- Filtro por rubro ---------------------------------------------------- */

.cfpt-catalogo__filtro {
	margin-bottom: var(--esp-lg);
}

.cfpt-catalogo__rubros {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esp-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cfpt-catalogo__rubros a {
	display: inline-flex;
	align-items: center;
	gap: var(--esp-3xs);
	/* 44px de alto: el filtro se usa sobre todo con el dedo. */
	min-height: 2.75rem;
	padding: var(--esp-2xs) var(--esp-sm);
	background-color: var(--color-fondo-alt);
	color: var(--color-texto);
	border: 1px solid var(--color-borde);
	border-radius: var(--radio-md);
	font-size: var(--texto-sm);
	font-weight: var(--peso-semi);
	text-decoration: none;
	transition:
		background-color var(--dur-rapida) var(--suavizado-estandar),
		border-color var(--dur-rapida) var(--suavizado-estandar);
}

.cfpt-catalogo__rubros a:hover {
	border-color: var(--color-enlace);
	color: var(--color-texto);
}

/*
 * El rubro activo se marca con superficie llena, no solo con color de texto:
 * el estado seleccionado tiene que distinguirse por algo más que el matiz
 * (WCAG 1.4.1). El par azul institucional / blanco da 9.47:1.
 */
.cfpt-catalogo__rubros a[aria-current="page"] {
	background-color: var(--azul-institucional);
	border-color: var(--azul-institucional);
	color: var(--sobre-azul-institucional);
}

/*
 * La cuenta hereda el color del enlace y solo cambia de tamaño. Darle fondo
 * propio obligaría a verificar el contraste de una superficie sobre otra
 * superficie, para un dato que es accesorio.
 */
.cfpt-catalogo__cuenta {
	font-size: var(--texto-xs);
	font-weight: var(--peso-normal);
}

/* --- Retícula de fichas -------------------------------------------------- */

.cfpt-catalogo__lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: var(--esp-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cfpt-tarjeta--proveedor {
	padding: var(--esp-md);
}

/* La tarjeta de proveedor no tiene imagen, así que sus hijos no necesitan el
 * margen lateral que compensa el sangrado de la imagen en las de noticia. */
.cfpt-tarjeta--proveedor .cfpt-tarjeta__titulo,
.cfpt-tarjeta--proveedor .cfpt-tarjeta__meta,
.cfpt-tarjeta--proveedor .cfpt-tarjeta__extracto {
	margin-inline: 0;
}

.cfpt-tarjeta--proveedor .cfpt-tarjeta__titulo {
	margin-top: 0;
}

.cfpt-tarjeta__contacto {
	margin: var(--esp-2xs) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--texto-sm);
	color: var(--color-texto-suave);
}


/* ===========================================================================
 * 16. FICHA DE PROVEEDOR
 * ========================================================================= */

.cfpt-proveedor__cabecera {
	margin-bottom: var(--esp-lg);
}

.cfpt-proveedor__rubros {
	margin: 0;
	font-size: var(--texto-sm);
	color: var(--color-texto-suave);
}

.cfpt-proveedor__imagen {
	margin-bottom: var(--esp-lg);
}

.cfpt-proveedor__imagen img {
	width: 100%;
	border-radius: var(--radio-lg);
}

.cfpt-proveedor__contacto {
	margin-top: var(--esp-xl);
	padding-top: var(--esp-md);
	border-top: 1px solid var(--color-borde);
}

.cfpt-proveedor__volver {
	margin-top: var(--esp-lg);
	font-weight: var(--peso-semi);
}

/* Lista de datos: etiqueta arriba, valor debajo. En dos columnas se rompe en
 * cuanto una etiqueta es larga, y «Persona de contacto» ya lo es. */
.cfpt-datos {
	margin: 0;
}

.cfpt-datos dt {
	margin-top: var(--esp-sm);
	font-size: var(--texto-sm);
	font-weight: var(--peso-semi);
	color: var(--color-texto-suave);
}

.cfpt-datos dt:first-child {
	margin-top: 0;
}

.cfpt-datos dd {
	margin: 0;
}


/* ===========================================================================
 * 17. PERSONAS: DIRECTORIO Y EQUIPO
 * ========================================================================= */

.cfpt-personas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: var(--esp-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cfpt-persona__retrato {
	margin-bottom: var(--esp-sm);
}

/*
 * Proporción cuadrada y recorte centrado. Las fotos institucionales llegan en
 * formatos dispares y sin esto la retícula queda con las cabezas a distintas
 * alturas, que es lo que hace que un directorio se vea improvisado.
 */
.cfpt-persona__retrato img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radio-lg);
}

.cfpt-persona__nombre {
	margin-bottom: var(--esp-3xs);
	font-size: var(--texto-lg);
}

.cfpt-persona__cargo {
	margin: 0;
	font-weight: var(--peso-semi);
	color: var(--color-enlace);
}

.cfpt-persona__institucion,
.cfpt-persona__correo {
	margin: var(--esp-3xs) 0 0;
	font-size: var(--texto-sm);
	color: var(--color-texto-suave);
}


/* ===========================================================================
 * 18. EXPOSITORES
 * ========================================================================= */

.cfpt-expositores {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: var(--esp-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cfpt-expositor {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--esp-md);
	background-color: var(--color-fondo);
	border: 1px solid var(--color-borde);
	border-radius: var(--radio-lg);
}

/*
 * object-fit: contain y no cover: son logotipos. Recortarlos para llenar una
 * caja es mutilar una marca ajena, y un expositor tiene derecho a que la suya
 * se vea entera.
 */
.cfpt-expositor__logotipo img {
	display: block;
	max-height: 5rem;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	margin-bottom: var(--esp-sm);
}

.cfpt-expositor__nombre {
	margin-bottom: var(--esp-2xs);
	font-size: var(--texto-lg);
}

.cfpt-expositor__descripcion {
	color: var(--color-texto-suave);
}

.cfpt-expositor__enlace {
	margin-top: auto;
	padding-top: var(--esp-sm);
	font-weight: var(--peso-semi);
}


/* ===========================================================================
 * 19. TRANSPARENCIA ACTIVA
 * ========================================================================= */

.cfpt-transparencia__materia {
	margin-bottom: var(--esp-xl);
}

.cfpt-transparencia__titulo {
	padding-bottom: var(--esp-2xs);
	border-bottom: 2px solid var(--color-borde);
}

.cfpt-transparencia__descripcion {
	max-width: var(--medida-texto);
	color: var(--color-texto-suave);
}

.cfpt-transparencia__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cfpt-documento {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--esp-2xs) var(--esp-md);
	padding-block: var(--esp-sm);
	border-bottom: 1px solid var(--color-borde);
}

.cfpt-documento__titulo {
	flex: 1 1 18rem;
	font-weight: var(--peso-semi);
}

.cfpt-documento__datos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esp-2xs) var(--esp-sm);
	font-size: var(--texto-sm);
	color: var(--color-texto-suave);
}

/* Un documento sin archivo es un error de carga, no un estado legítimo: se
 * distingue por texto y por cursiva, nunca solo por color. */
.cfpt-documento__incompleto {
	flex: 1 0 100%;
	font-size: var(--texto-sm);
	font-style: italic;
}


/* ===========================================================================
 * 20. FICHA DE DOCUMENTO
 * ========================================================================= */

.cfpt-documento-ficha__cabecera {
	margin-bottom: var(--esp-lg);
}

.cfpt-documento-ficha__descarga {
	margin-top: var(--esp-lg);
}


/* ===========================================================================
 * 21. MOVIMIENTO REDUCIDO — RED GLOBAL
 *
 * tokens.css ya anula las duraciones, pero los tokens solo alcanzan a quien
 * los usa. Esta red atrapa además las animaciones de Elementor y de cualquier
 * plugin, que no conocen nuestras variables.
 *
 * Las dos capas son necesarias y no se sustituyen entre sí (CLAUDE.md §4 y §8:
 * prefers-reduced-motion se respeta siempre, no es opcional).
 * ========================================================================= */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	html {
		scroll-behavior: auto;
	}
}