/**
 * Titular Uniguajira — layout + mini-tile neumórfico autosuficiente.
 * No depende del CSS completo de Enlaces ni del contexto (acordeón, etc.).
 */

.ug-titular-uniguajira-block,
.ug-titular-uniguajira-block * {
	box-sizing: border-box;
}

.ug-titular-uniguajira-block {
	display: block;
	width: 100%;
	margin-block: 0.35rem;
}

.ug-titular-uniguajira-block.aligncenter .ug-titular-uniguajira {
	justify-content: center;
}

.ug-titular-uniguajira-block.alignright .ug-titular-uniguajira {
	justify-content: flex-end;
}

.ug-titular-uniguajira {
	display: flex;
	align-items: center;
	column-gap: 0.5em;
	width: 100%;
	margin: 0;
	color: var(--ug-text, #03090f);
}

/* Tipografía autosuficiente (no depender solo de design-tokens ni del contexto padre). */
.ug-titular-uniguajira-block h1.ug-titular-uniguajira,
.ug-titular-uniguajira-block h2.ug-titular-uniguajira,
.ug-titular-uniguajira-block h3.ug-titular-uniguajira,
.ug-titular-uniguajira-block h4.ug-titular-uniguajira,
.ug-titular-uniguajira-block h5.ug-titular-uniguajira,
.ug-titular-uniguajira-block h6.ug-titular-uniguajira {
	font-family: var(--ug-font-heading, "Roboto", sans-serif);
	font-weight: var(--ug-fw-heading, 600);
	color: var(--ug-text, #03090f);
}

.ug-titular-uniguajira-block h1.ug-titular-uniguajira {
	font-size: var(--ug-h1, clamp(1.5rem, 1.2rem + 1.2vw, 2rem));
	line-height: var(--ug-lh-h1, 1.25);
	letter-spacing: var(--ug-ls-h1, -0.01em);
	font-weight: var(--ug-fw-heading-strong, 700);
}

.ug-titular-uniguajira-block h2.ug-titular-uniguajira {
	font-size: var(--ug-h2, clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem));
	line-height: var(--ug-lh-h2, 1.3);
	letter-spacing: var(--ug-ls-h2, -0.01em);
	font-weight: var(--ug-fw-heading-strong, 700);
}

.ug-titular-uniguajira-block h3.ug-titular-uniguajira {
	font-size: var(--ug-h3, clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem));
	line-height: var(--ug-lh-h3, 1.35);
	letter-spacing: var(--ug-ls-h3, 0);
}

.ug-titular-uniguajira-block h4.ug-titular-uniguajira {
	font-size: var(--ug-h4, clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem));
	line-height: var(--ug-lh-h4, 1.4);
	letter-spacing: var(--ug-ls-h4, 0);
}

.ug-titular-uniguajira-block h5.ug-titular-uniguajira {
	font-size: var(--ug-h5, clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem));
	line-height: var(--ug-lh-h5, 1.4);
	letter-spacing: var(--ug-ls-h5, 0.01em);
}

.ug-titular-uniguajira-block h6.ug-titular-uniguajira {
	font-size: var(--ug-h6, 1rem);
	line-height: var(--ug-lh-h6, 1.45);
	letter-spacing: var(--ug-ls-h6, 0.02em);
}

.ug-titular-uniguajira-block p.ug-titular-uniguajira,
.ug-titular-uniguajira-block div.ug-titular-uniguajira,
.ug-titular-uniguajira-block span.ug-titular-uniguajira {
	font-family: var(--ug-font-body, "Montserrat", sans-serif);
	font-size: var(--ug-text-body, clamp(1rem, 0.96rem + 0.2vw, 1.0625rem));
	font-weight: var(--ug-fw-body, 400);
	line-height: var(--ug-lh-body, 1.65);
	letter-spacing: var(--ug-ls-body, 0.01em);
	color: var(--ug-text, #03090f);
}

.ug-titular-uniguajira__text {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.ug-titular-uniguajira__text a {
	color: inherit;
	text-decoration: inherit;
}

/* Host del mini-botón Enlaces (compacto) — vars + tile autosuficientes */
.ug-titular-uniguajira-block .ug-titular-uniguajira__icon-host,
.ug-titular-uniguajira-block .ug-titular-uniguajira__icon-host.ug-enlaces-wrap {
	--ug-primary: #62a9b6;
	--ug-primary-dark: #4f95a2;
	--ug-accent: #62a9b6;
	--ug-accent-soft: #e8f4f6;
	--ug-text: #03090f;
	--ug-surface: #ffffff;
	--ug-border: rgba(98, 169, 182, 0.22);
	--ug-radius-sm: 8px;
	--ug-neu-raised:
		-4px -4px 10px rgba(255, 255, 255, 0.9),
		4px 4px 12px rgba(3, 9, 15, 0.08);
	--ug-neu-hover:
		-2px -2px 8px rgba(255, 255, 255, 0.95),
		6px 8px 16px rgba(3, 9, 15, 0.1);
	--ug-neu-pressed:
		inset 3px 3px 8px rgba(3, 9, 15, 0.1),
		inset -2px -2px 6px rgba(255, 255, 255, 0.85);
	--ug-neu-icon:
		inset -1px -1px 3px rgba(255, 255, 255, 0.9),
		inset 1px 1px 3px rgba(3, 9, 15, 0.06);
	--ug-neu-icon-pressed:
		inset 2px 2px 5px rgba(3, 9, 15, 0.08),
		inset -1px -1px 3px rgba(255, 255, 255, 0.75);
	display: inline-block !important;
	flex-shrink: 0;
	vertical-align: middle;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible;
}

.ug-titular-uniguajira-block .ug-titular-uniguajira__icon-host .ug-enlaces,
.ug-titular-uniguajira-block .ug-titular-uniguajira__icon-host .ug-enlaces--compacto {
	display: block !important;
	width: auto !important;
	max-width: none !important;
}

.ug-titular-uniguajira-block .ug-titular-uniguajira__icon-tile,
.ug-titular-uniguajira-block .ug-titular-uniguajira__icon-tile.ug-enlaces__tile {
	display: inline-flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 0.5rem 0.375rem 0.5625rem !important;
	background: var(--ug-surface, #ffffff) !important;
	border: 1px solid transparent !important;
	border-radius: var(--ug-radius-sm, 8px) !important;
	box-shadow: var(--ug-neu-raised) !important;
	overflow: visible !important;
	pointer-events: none;
	cursor: default;
	text-decoration: none !important;
	color: var(--ug-text, #03090f);
	transition:
		border-color 0.2s ease,
		background-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.ug-titular-uniguajira-block .ug-titular-uniguajira__icon-tile .ug-enlaces__tile-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: auto !important;
	gap: 0;
}

.ug-titular-uniguajira-block .ug-titular-uniguajira__icon-tile .ug-enlaces__icon {
	display: flex !important;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px !important;
	height: 36px !important;
	border-radius: 9px !important;
	background: var(--ug-accent-soft, #e8f4f6) !important;
	color: var(--ug-primary, #62a9b6) !important;
	box-shadow: var(--ug-neu-icon) !important;
	transition: box-shadow 0.2s ease;
}

.ug-titular-uniguajira-block .ug-titular-uniguajira__icon-tile .ug-enlaces__icon svg,
.ug-titular-uniguajira-block .ug-titular-uniguajira__icon-tile .ug-enlaces__icon-svg,
.ug-titular-uniguajira-block .ug-titular-uniguajira__icon-tile .ug-titular-uniguajira__icon-svg {
	display: block;
	width: 20px !important;
	height: 20px !important;
}

/* Hover / active del titular → mismo comportamiento que tile Enlaces compacto */
.ug-titular-uniguajira-block .ug-titular-uniguajira:hover .ug-titular-uniguajira__icon-tile,
.ug-titular-uniguajira-block .ug-titular-uniguajira:focus-within .ug-titular-uniguajira__icon-tile {
	box-shadow: var(--ug-neu-hover) !important;
	border-color: transparent !important;
	transform: translateY(-1px);
}

.ug-titular-uniguajira-block .ug-titular-uniguajira:active .ug-titular-uniguajira__icon-tile {
	box-shadow: var(--ug-neu-pressed) !important;
	transform: none;
}

.ug-titular-uniguajira-block .ug-titular-uniguajira:active .ug-titular-uniguajira__icon-tile .ug-enlaces__icon {
	box-shadow: var(--ug-neu-icon-pressed) !important;
}

/* Animación del icono al hover (swing, como fila Marcelo en Enlaces) */
@media (prefers-reduced-motion: no-preference) {
	.ug-titular-uniguajira-block .ug-titular-uniguajira:hover .ug-titular-uniguajira__icon-tile .ug-enlaces__icon,
	.ug-titular-uniguajira-block .ug-titular-uniguajira:focus-within .ug-titular-uniguajira__icon-tile .ug-enlaces__icon {
		animation: ug-titular-uniguajira-icon-swing 1s ease-in-out infinite;
	}

	.ug-titular-uniguajira-block .ug-titular-uniguajira:active .ug-titular-uniguajira__icon-tile .ug-enlaces__icon {
		animation: none;
	}
}

@keyframes ug-titular-uniguajira-icon-swing {
	50% {
		transform: translateX(-3px) scale(0.96);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ug-titular-uniguajira-block .ug-titular-uniguajira__icon-tile,
	.ug-titular-uniguajira-block .ug-titular-uniguajira__icon-tile .ug-enlaces__icon {
		transition: none;
	}

	.ug-titular-uniguajira-block .ug-titular-uniguajira:hover .ug-titular-uniguajira__icon-tile {
		transform: none;
	}
}