/* Visalia · Glosario de la energía */
.vg-page {
	--vg-primary: #0f7bad;
	--vg-text: #3f3f50;
	--vg-muted: #717181;
	--vg-pad: 104px;
	color: var(--vg-text);
	font-family: "Titillium Web", sans-serif;
}
.vg-page *,
.vg-page *::before,
.vg-page *::after { box-sizing: border-box; }

.vg-container {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding-left: var(--vg-pad);
	padding-right: var(--vg-pad);
}

/* Migas */
.vg-breadcrumbs { padding: 16px 0; }
.vg-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.vg-breadcrumbs li { display: flex; align-items: center; gap: 2px; margin: 0; font-size: 14px; line-height: 1.6; }
.vg-breadcrumbs a { color: var(--vg-text); text-decoration: none; }
.vg-breadcrumbs a:hover { color: var(--vg-primary); text-decoration: underline; }
.vg-breadcrumbs svg { color: var(--vg-text); flex: none; }
.vg-breadcrumbs [aria-current] { color: var(--vg-muted); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Títulos */
.vg-page .vg-title {
	margin: 0;
	padding: 0;
	color: var(--vg-primary);
	font-size: 40px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
}

/* Índice */
.vg-index { display: flex; flex-direction: column; gap: 56px; padding-top: 64px; padding-bottom: 80px; }
.vg-intro { display: flex; flex-direction: column; gap: 16px; max-width: 800px; }
.vg-intro__text p { margin: 0 0 1em; font-size: 16px; line-height: 1.6; }
.vg-intro__text p:last-child { margin-bottom: 0; }

.vg-az { background: var(--vg-primary); border-radius: 16px; padding: 24px; scroll-margin-top: 140px; container-type: inline-size; }
.vg-az__list { display: grid; grid-template-columns: repeat(auto-fill, 36px); justify-content: space-between; gap: 8px 0; margin: 0; padding: 0; list-style: none; }
/* Filas equilibradas como en el diseño: 27 / 14 / 7 letras por fila. */
@container (min-width: 252px) { .vg-az__list { grid-template-columns: repeat(7, 36px); } }
@container (min-width: 504px) { .vg-az__list { grid-template-columns: repeat(14, 36px); } }
@container (min-width: 972px) { .vg-az__list { grid-template-columns: repeat(27, 36px); } }
.vg-az__list li { margin: 0; padding: 0; }
.vg-page .vg-az__letter {
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 8px;
	color: #fff; font-size: 16px; font-weight: 700; line-height: 20px;
	text-decoration: none; transition: background-color .15s, color .15s;
}
.vg-page a.vg-az__letter:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.vg-page a.vg-az__letter:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vg-page .vg-az__letter.is-active { background: #fff; color: var(--vg-primary); }
.vg-page .vg-az__letter.is-disabled { color: rgba(255, 255, 255, .4); cursor: default; }

.vg-groups { display: flex; flex-direction: column; gap: 56px; }
.vg-group { display: flex; flex-direction: column; gap: 32px; scroll-margin-top: 160px; }
.vg-page .vg-group__letter { margin: 0; padding: 0; color: var(--vg-primary); font-size: 32px; font-weight: 600; line-height: 1.2; }
.vg-group__terms {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 284px), 1fr));
	gap: 4px 32px;
	margin: 0; padding: 0; list-style: none;
}
.vg-group__terms li { margin: 0; padding: 0; }
.vg-group__terms a { display: block; padding: 10px 0; color: var(--vg-primary); font-size: 16px; font-weight: 700; line-height: 20px; text-decoration: none; }
.vg-group__terms a:hover { text-decoration: underline; }
/* Con JS solo se muestra la letra activa (sin JS se ven todas). */
.vg-js .vg-group { display: none; }
.vg-js .vg-group.is-active { display: flex; }
.vg-empty { font-size: 16px; }

/* Ficha de término */
.vg-term { padding-top: 64px; padding-bottom: 80px; }
.vg-term__inner { display: flex; flex-direction: column; gap: 32px; max-width: 800px; }
.vg-term__header { display: flex; flex-direction: column; gap: 8px; }
.vg-page .vg-term__kicker { margin: 0; font-size: 16px; font-weight: 700; line-height: 26px; }
.vg-term__kicker a { color: var(--vg-muted); text-decoration: none; }
.vg-term__kicker a:hover { color: var(--vg-primary); }

.vg-term__content { display: flex; flex-direction: column; gap: 24px; font-size: 16px; line-height: 1.6; }
.vg-term__content > * { margin: 0 !important; }
.vg-page .vg-term__content h2,
.vg-page .vg-term__content h3 { color: var(--vg-text); font-weight: 600; line-height: 1.2; padding: 0; }
.vg-page .vg-term__content h2 { font-size: 32px; }
.vg-page .vg-term__content h3 { font-size: 24px; }
.vg-term__content ul,
.vg-term__content ol { padding-left: 24px; }
.vg-term__content ul { list-style: disc; }
.vg-term__content li { margin: 0; }
.vg-term__content a { color: var(--vg-primary); text-decoration: underline; }

.vg-cta { display: flex; flex-direction: column; gap: 24px; }
.vg-page .vg-cta__text { margin: 0; font-size: 20px; font-weight: 700; line-height: 30px; }
.vg-cta__buttons { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.vg-page .vg-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	max-width: 311px; padding: 14px 40px; border: 1px solid var(--vg-primary); border-radius: 100px;
	font-size: 16px; font-weight: 700; line-height: 20px; text-decoration: none; white-space: nowrap;
	transition: background-color .15s, color .15s;
}
.vg-page .vg-btn--outline { background: #fff; color: var(--vg-primary); }
.vg-page .vg-btn--outline:hover { background: #effaff; color: var(--vg-primary); }
.vg-page .vg-btn--primary { background: var(--vg-primary); color: #fff; }
.vg-page .vg-btn--primary:hover { background: #0b6590; border-color: #0b6590; color: #fff; }
.vg-page .vg-btn:focus-visible { outline: 2px solid var(--vg-primary); outline-offset: 2px; }

/* Posts relacionados */
.vg-related { display: flex; flex-direction: column; gap: 32px; padding-top: 64px; padding-bottom: 80px; }
.vg-page .vg-related__title { margin: 0; padding: 0; color: var(--vg-primary); font-size: 40px; font-weight: 600; line-height: 1.2; }
.vg-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 294px), 1fr)); gap: 32px; }
.vg-card { display: flex; flex-direction: column; gap: 6px; }
.vg-card__image { display: block; aspect-ratio: 311 / 196; margin-bottom: 10px; border-radius: 16px; overflow: hidden; background: #effaff; }
.vg-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vg-card__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--vg-muted); font-size: 14px; line-height: 1.6; }
.vg-page .vg-card__title { margin: 0; padding: 0; font-size: 24px; font-weight: 600; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vg-card__title a { color: var(--vg-text); text-decoration: none; }
.vg-card__title a:hover { color: var(--vg-primary); }
.vg-card__cat { color: var(--vg-primary); font-size: 16px; font-weight: 700; line-height: 1.6; text-decoration: none; }
.vg-page .vg-card__excerpt { margin: 0; font-size: 16px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vg-card__more { align-self: center; margin-top: 8px; color: var(--vg-primary); font-size: 14px; font-weight: 700; text-decoration: none; }
.vg-card__more:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 1279px) {
	.vg-page { --vg-pad: 64px; }
}
@media (max-width: 1023px) {
	.vg-page { --vg-pad: 56px; }
	.vg-page .vg-title,
	.vg-page .vg-related__title { font-size: 36px; }
	.vg-page .vg-term__content h2 { font-size: 28px; }
}
@media (max-width: 599px) {
	.vg-page { --vg-pad: 32px; }
	.vg-page .vg-title,
	.vg-page .vg-related__title { font-size: 28px; }
	.vg-page .vg-group__letter { font-size: 24px; }
	.vg-page .vg-term__content h2 { font-size: 24px; }
	.vg-page .vg-cta__text { font-size: 18px; line-height: 1.5; }
	.vg-cta__buttons { flex-direction: column; align-items: stretch; }
	.vg-page .vg-btn { max-width: none; width: 100%; }
}