/* ==========================================================================
   Glosario Financiero Nu
   Todo va namespaced bajo .nu-glosario para no chocar con el CSS del tema.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tipografía
   NuSansText se declara aquí para no depender del CSS del mu-plugin de
   Ayuda Nu (anu2-core), que no siempre se encola en esta landing.
   Si el equipo mueve la carpeta del mu-plugin, hay que actualizar estas rutas.
   -------------------------------------------------------------------------- */

@font-face {
	font-family: "NuSansText";
	src: url("/wp-content/mu-plugins/ayuda-nu-2-core-1/assets/fonts/NuSansText-Regular.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "NuSansText";
	src: url("/wp-content/mu-plugins/ayuda-nu-2-core-1/assets/fonts/NuSansText-Medium.otf") format("opentype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "NuSansText";
	src: url("/wp-content/mu-plugins/ayuda-nu-2-core-1/assets/fonts/NuSansText-Semibold.otf") format("opentype");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "NuSansText";
	src: url("/wp-content/mu-plugins/ayuda-nu-2-core-1/assets/fonts/NuSansText-Bold.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

.nu-glosario {
	--nu-purple: #820AD1;
	--nu-purple-dark: #4C0677;
	--nu-purple-soft: #F2E7FA;
	--nu-ink: #111111;
	--nu-muted: #5D5D5D;
	--nu-line: #F4F4F4;
	--nu-bg: #FFFFFF;
	--nu-radius-xl: 28px;
	--nu-radius-lg: 20px;
	--nu-container: 1180px;
	--nu-sticky-offset: 72px;

	background: var(--nu-bg);
	color: var(--nu-ink);
	font-family: "NuSansText", Arial, sans-serif;
}

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

.nu-glosario button,
.nu-glosario input,
.nu-glosario h1,
.nu-glosario h2,
.nu-glosario h3,
.nu-glosario p,
.nu-glosario a { font-family: inherit; }

.nu-glosario-shell {
	max-width: var(--nu-container);
	margin: 0 auto;
	padding-inline: 22px;
	width: 100%;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.nu-glosario-hero {
	background: #fff;
	padding: 28px 0 44px;
}

.nu-glosario-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--nu-muted);
	margin-bottom: 28px;
}

.nu-glosario-breadcrumb a { color: var(--nu-muted); text-decoration: none; }
.nu-glosario-breadcrumb a:hover { color: var(--nu-purple); }
.nu-glosario-breadcrumb [aria-current="page"] { color: var(--nu-purple); }

.nu-glosario-hero__title {
	margin: 0 0 30px;
	text-align: center;
	color: var(--nu-purple);
	font-size: clamp(34px, 5.4vw, 62px);
	line-height: 1.02;
	letter-spacing: -0.04em;
	font-weight: 500;
}

.nu-glosario-hero__media {
	position: relative;
	border-radius: var(--nu-radius-lg);
	overflow: hidden;
	margin: 0 auto;
	max-width: 1200px;
}

.nu-glosario-hero__image,
.nu-glosario-hero__placeholder {
	display: block;
	width: 100%;
	height: clamp(240px, 34vw, 380px);
	object-fit: cover;
	border-radius: var(--nu-radius-lg);
}

.nu-glosario-hero__placeholder {
	background: linear-gradient(135deg, var(--nu-purple) 0%, var(--nu-purple-dark) 100%);
}

/* --------------------------------------------------------------------------
   Panel de control: contador + chips de tema
   -------------------------------------------------------------------------- */

.nu-glosario-controls { padding-top: 34px; }

.nu-glosario-panel {
	background: #fff;
	border: 1px solid var(--nu-line);
	border-radius: var(--nu-radius-xl);
	padding: 18px;
}

.nu-glosario-count {
	margin: 0;
	display: inline-block;
	min-width: 150px;
	text-align: center;
	border-radius: 999px;
	padding: 14px 18px;
	background: var(--nu-purple-soft);
	color: var(--nu-purple-dark);
	font-weight: 700;
}

.nu-glosario-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

.nu-glosario-chip {
	border: 1px solid var(--nu-line);
	background: #fff;
	border-radius: 999px;
	padding: 10px 14px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	color: #3C3345;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.nu-glosario-chip:hover { border-color: var(--nu-purple); color: var(--nu-purple); }

.nu-glosario-chip.is-active {
	background: var(--nu-purple);
	border-color: var(--nu-purple);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Barra alfabética
   -------------------------------------------------------------------------- */

.nu-glosario-alphabet {
	position: sticky;
	top: var(--nu-sticky-offset);
	z-index: 30;
	margin-top: 26px;
	background: rgba(255, 255, 255, .95);
	backdrop-filter: blur(14px);
}

/**
 * Las letras se ajustan en varias filas si no caben. Sin overflow-x no
 * aparece la barra de desplazamiento y ninguna letra queda fuera de vista.
 */
.nu-glosario-alphabet__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-block: 28px;
    background: #F4F4F4;
    border-radius: 20px;
}

.nu-glosario-letter-chip {
	flex: 0 0 auto;
	min-width: 34px;
	text-align: center;
	padding: 8px 6px;
	border-radius: 999px;
	border: 1px solid var(--nu-line);
	background: #fff;
	color: #3C3345;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.nu-glosario-letter-chip:hover,
.nu-glosario-letter-chip.is-active {
	background: var(--nu-purple);
	border-color: var(--nu-purple);
	color: #fff;
}

.nu-glosario-letter-chip.is-empty {
	opacity: .32;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Cards por letra
   -------------------------------------------------------------------------- */

.nu-glosario-list { padding: 34px 0 60px; }

.nu-glosario-letters {
	display: grid;
	gap: 22px;
}

.nu-glosario-letter {
	background: #F4F4F4;
	border: 1px solid var(--nu-line);
	border-radius: var(--nu-radius-xl);
	padding: 22px;
	scroll-margin-top: 140px;
}

.nu-glosario-letter.is-hidden { display: none; }

.nu-glosario-letter__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 12px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--nu-line);
}

.nu-glosario-letter__mark {
	margin: 0;
	color: var(--nu-purple);
	font-size: 42px;
	line-height: 1;
	letter-spacing: -0.04em;
	font-weight: 500;
}

.nu-glosario-letter__count {
	margin: 0;
	color: var(--nu-muted);
	font-size: 14px;
	font-weight: 700;
}

.nu-glosario-terms {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

/* --------------------------------------------------------------------------
   Card de término
   -------------------------------------------------------------------------- */

.nu-glosario-term {
	position: relative;
	display: grid;
	gap: 10px;
	align-content: start;
	min-height: 148px;
	border: 1px solid var(--nu-line);
	border-radius: var(--nu-radius-lg);
	padding: 18px;
	background: #fff;
	transition: border-color .18s ease;
}

.nu-glosario-term.is-hidden { display: none; }

.nu-glosario-term:hover { border-color: var(--nu-purple); }

.nu-glosario-term:focus-within { border-color: var(--nu-purple); }

.nu-glosario-term__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.nu-glosario-term__title {
	margin: 0;
	font-size: 20px;
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-weight: 500;
}

.nu-glosario-term__title a {
	color: var(--nu-ink);
	text-decoration: none;
}

.nu-glosario-term:hover .nu-glosario-term__title a { color: var(--nu-purple); }

.nu-glosario-term__desc {
	margin: 0;
	color: var(--nu-muted);
	font-size: 14px;
	line-height: 1.45;
}

.nu-glosario-term__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--nu-purple-dark);
	margin-top: auto;
}

.nu-glosario-term__related { color: var(--nu-muted); font-weight: 600; }
.nu-glosario-term__dot { color: var(--nu-purple); }

/* Toda la card es clickeable sin romper el enlace del título. */
.nu-glosario-term__link {
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.nu-glosario-term__title a { position: relative; z-index: 2; }

/* Badges: solo se imprimen para editores logueados. */
.nu-glosario-badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	padding: 7px 10px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
	white-space: nowrap;
}

.nu-glosario-badge--new { background: #FFF6C7; color: #705A00; }
.nu-glosario-badge--enrich { background: #EFE2FF; color: var(--nu-purple-dark); }
.nu-glosario-badge--support { background: #E7F0FF; color: #124F9B; }

/* --------------------------------------------------------------------------
   Estado vacío
   -------------------------------------------------------------------------- */

.nu-glosario-empty {
	display: none;
	background: #fff;
	border: 1px dashed var(--nu-line);
	border-radius: var(--nu-radius-xl);
	padding: 40px 26px;
	text-align: center;
}

.nu-glosario-empty.is-visible { display: block; }

.nu-glosario-empty h2 {
	margin: 0 0 8px;
	font-size: 24px;
	letter-spacing: -0.03em;
}

.nu-glosario-empty p {
	margin: 0 0 18px;
	color: var(--nu-muted);
}

.nu-glosario-reset {
	border: 0;
	border-radius: 999px;
	padding: 12px 20px;
	background: var(--nu-purple);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.nu-glosario-reset:hover { background: var(--nu-purple-dark); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.nu-glosario-terms { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
	.nu-glosario-shell { padding-inline: 16px; }

	.nu-glosario-alphabet__inner { padding-block: 18px; }

	.nu-glosario-letter { padding: 18px; }

	.nu-glosario-letter__mark { font-size: 34px; }
}

/* --------------------------------------------------------------------------
   Accesibilidad
   -------------------------------------------------------------------------- */

.nu-glosario :focus-visible {
	outline: 3px solid var(--nu-purple);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.nu-glosario * {
		transition: none !important;
		scroll-behavior: auto !important;
	}
}