/* VFG – Blog: tarjetas, listado, detalle y contenido del artículo.
 * Clases que se ponen en Elementor (Avanzado → Clases CSS):
 *   vfg-blog-badge     Encabezado con la categoría (pastilla roja)
 *   vfg-filtro-pills   Taxonomy Filter de temáticas (pastillas, la activa en negro)
 *   vfg-grid-blog      Loop Grid del blog
 *   vfg-blog-resultados Shortcode [vfg_resultados] debajo de la grilla (se alinea con la paginación)
 *   vfg-articulo       Widget "Contenido de la entrada" (Post Content)
 *   vfg-toc            Widget "Tabla de contenidos"
 *   vfg-sticky         Columna del índice (queda fija al bajar)
 *   vfg-temas          Widget "Información de la entrada" con las etiquetas
 */
:root {
	--vfg-rojo: #c8102e;
	--vfg-rojo-suave: #BD152214;
	--vfg-texto: #111827;
	--vfg-gris: #6b7280;
	--vfg-borde: #e5e7eb;
}

/* ---------- Miga de pan [vfg_migas] ---------- */
.vfg-migas {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 12px;
	line-height: 16px;
	color: var(--vfg-gris);
}
.vfg-migas a {
	color: var(--vfg-gris);
	text-decoration: none;
}
.vfg-migas a:hover {
	color: var(--vfg-rojo);
}
.vfg-migas__actual {
	color: var(--vfg-rojo);
	font-weight: 600;
}

/* ---------- Pastilla de categoría ---------- */
.vfg-blog-badge .elementor-heading-title {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 999px;
	background: var(--vfg-rojo-suave);
	color: var(--vfg-rojo);
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.vfg-blog-badge .elementor-heading-title a {
	color: inherit;
}

/* ---------- Tiempo de lectura [vfg_lectura] ---------- */
.vfg-lectura {
	font-size: 11px;
	color: var(--vfg-gris);
	white-space: nowrap;
}

/* ---------- Filtro de temáticas como pastillas ---------- */
.vfg-filtro-pills .e-filter {
	flex-wrap: wrap;
	justify-content: flex-start !important;
	gap: 8px;
}
.vfg-filtro-pills .e-filter-item {
	padding: 7px 14px;
	border: 1px solid var(--vfg-borde);
	border-radius: 999px;
	background: #fff;
	color: var(--vfg-texto);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}
.vfg-filtro-pills .e-filter-item:hover {
	border-color: var(--vfg-texto);
}
.vfg-filtro-pills .e-filter-item[aria-pressed="true"] {
	border-color: var(--vfg-texto);
	background: var(--vfg-texto);
	color: #fff;
}

/* ---------- Conteo alineado con la paginación ---------- */
@media (min-width: 768px) {
	/* Solo sube a la fila de la paginación cuando hay paginación */
	.vfg-grid-blog:has(.elementor-pagination) + .vfg-blog-resultados {
		margin-top: -46px !important;
		width: fit-content !important;
		pointer-events: none;
	}
}
.vfg-blog-resultados .vfg-resultados {
	font-size: 12px;
	font-weight: 400;
	color: var(--vfg-gris);
}

/* ---------- Paginación del Loop Grid del blog ---------- */
.vfg-grid-blog .elementor-pagination {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
}
.vfg-grid-blog .elementor-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 12px;
	border: 1px solid var(--vfg-borde);
	border-radius: 6px;
	color: var(--vfg-texto);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
}
.vfg-grid-blog .elementor-pagination .page-numbers.current {
	border-color: var(--vfg-texto);
	background: var(--vfg-texto);
	color: #fff;
}
@media (max-width: 767px) {
	.vfg-grid-blog .elementor-pagination {
		justify-content: center;
	}
}

/* ---------- Columna fija del índice ---------- */
@media (min-width: 1025px) {
	.vfg-sticky {
		position: sticky !important;
		top: 110px;
		align-self: flex-start !important;
	}
}

/* ---------- Tabla de contenidos ---------- */
.vfg-toc .elementor-toc__header {
	padding: 0 0 8px !important;
	border: 0 !important;
}

.vfg-toc .elementor-toc__list-wrapper {
	margin: 0;
	padding: 0;
	list-style: none;
}
.vfg-toc .elementor-toc__list-item-text-wrapper {
	padding: 5px 0 5px 10px;
	border-left: 2px solid transparent;
}
.vfg-toc .elementor-toc__list-item-text {
	color: var(--vfg-gris) !important;
	font-size: 12px;
}
.vfg-toc .elementor-toc__list-item-text-wrapper:has(.elementor-item-active) {
	border-left-color: var(--vfg-rojo);
}
.vfg-toc .elementor-toc__list-item-text.elementor-item-active {
	color: var(--vfg-texto) !important;
	font-weight: 600;
}

/* ---------- Contenido del artículo (widget Post Content con clase vfg-articulo) ---------- */
.vfg-articulo {
	color: #4b5563;
	font-size: 14px;
	line-height: 1.7;
}
.vfg-articulo > .elementor-widget-container > p:first-child,
.vfg-articulo > p:first-child {
	color: var(--vfg-texto);
	font-size: 16px;
}
.vfg-articulo h2 {
	margin: 32px 0 12px;
	color: var(--vfg-texto);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}
.vfg-articulo h3 {
	margin: 24px 0 10px;
	color: var(--vfg-texto);
	font-size: 17px;
	font-weight: 700;
}
.vfg-articulo a {
	color: var(--vfg-rojo);
}
/* Lista numerada: número en círculo rojo */
.vfg-articulo ol {
	margin: 16px 0;
	padding: 0;
	list-style: none;
	counter-reset: vfg-paso;
}
.vfg-articulo ol li {
	position: relative;
	margin-bottom: 10px;
	padding-left: 34px;
	color: var(--vfg-texto);
	counter-increment: vfg-paso;
}
.vfg-articulo ol li::before {
	content: counter(vfg-paso);
	position: absolute;
	left: 0;
	top: 2px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--vfg-rojo);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
}
/* Bloque "Cita" de WordPress = recuadro "Dato clave" */
.vfg-articulo blockquote,
.vfg-articulo .wp-block-quote {
	margin: 24px 0;
	padding: 16px 20px;
	border: 0;
	border-left: 3px solid var(--vfg-rojo);
	border-radius: 0 10px 10px 0;
	background: #f6f7f9;
	color: var(--vfg-texto);
	font-size: 14px;
	font-style: normal;
}
.vfg-articulo blockquote::before {
	content: "Dato clave";
	display: block;
	margin-bottom: 6px;
	color: var(--vfg-rojo);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.vfg-articulo blockquote p {
	margin: 0;
}
.vfg-articulo blockquote cite {
	display: none;
}
/* Imágenes y pies de foto */
.vfg-articulo img {
	border-radius: 14px;
}
.vfg-articulo figure {
	margin: 24px 0;
}
.vfg-articulo figcaption {
	margin-top: 8px;
	color: var(--vfg-gris);
	font-size: 11px;
	text-align: left;
}

/* ---------- Etiquetas "Temas" (widget Post Info con clase vfg-temas) ---------- */
.vfg-temas .elementor-post-info__terms-list {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}
.vfg-temas .elementor-post-info__terms-list-item {
	padding: 6px 12px;
	border: 1px solid var(--vfg-borde);
	border-radius: 999px;
	color: var(--vfg-texto);
	font-size: 11px;
	font-weight: 600;
	text-decoration: none;
}
.vfg-temas .elementor-post-info__terms-list-item:hover {
	border-color: var(--vfg-texto);
}
.vfg-temas .elementor-post-info__terms-list span:not(.elementor-post-info__terms-list-item) {
	display: none; /* oculta las comas entre etiquetas */
}

/* ---------- Compartir [vfg_compartir] ---------- */
.vfg-compartir {
	display: flex;
	align-items: center;
	gap: 8px;
}
.vfg-compartir__label {
	margin-right: 4px;
	color: var(--vfg-gris);
	font-size: 11px;
	font-weight: 600;
}
.vfg-compartir__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--vfg-borde);
	border-radius: 50%;
	background: #fff;
	color: var(--vfg-texto);
	cursor: pointer;
}
.vfg-compartir__btn--wa {
	border-color: #22c55e;
	background: #22c55e;
	color: #fff !important;
}
.vfg-compartir__btn.is-copiado {
	border-color: var(--vfg-rojo);
	color: var(--vfg-rojo);
}

/* ---------- Detalles de las plantillas del blog ---------- */
.vfg-eyebrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.vfg-eyebrow .elementor-heading-title::before {
	content: "";
	width: 22px;
	height: 1px;
	background: currentColor;
}
.vfg-blog-fecha .elementor-heading-title {
	text-transform: lowercase;
}
.vfg-card-blog__pie {
	margin-top: auto !important;
}
.vfg-avatar .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #0b0b0c;
}
.vfg-articulo-col {
	flex: 1 1 0 !important;
	min-width: 0;
}
@media (max-width: 1024px) {
	.vfg-articulo-col {
		flex: 1 1 auto !important;
		width: 100% !important;
	}
}
/* Índice: solo la primera sección visible queda marcada; sin botón de plegar en escritorio */
.vfg-toc .elementor-toc__list-item:has(.elementor-item-active) ~ .elementor-toc__list-item .elementor-toc__list-item-text-wrapper {
	border-left-color: transparent;
}
.vfg-toc .elementor-toc__list-item:has(.elementor-item-active) ~ .elementor-toc__list-item .elementor-toc__list-item-text {
	color: var(--vfg-gris) !important;
	font-weight: 400;
}
@media (min-width: 1025px) {
	.vfg-toc .elementor-toc__toggle-button {
		display: none !important;
	}
}
/* Fila de autor + compartir (clase vfg-autor-fila): los bloques internos toman su ancho natural */
.vfg-autor-fila .e-con {
	width: auto !important;
	flex: 0 0 auto !important;
	--width: auto;
}
.vfg-autor-fila .vfg-avatar {
	flex: 0 0 34px;
}