@charset "UTF-8";
/* TFLC · Blog (listado y artículo).
   Se carga tras landing.css: reutiliza sus variables, cabecera, tarjetas y pie. */

/* Cabecera y menú genéricos del layout core: la página trae los de la landing */
#header, #menu { display: none; }

/* ---------- Cabecera de página ---------- */
.lc-blog-hero { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; color: var(--lc-oscuro); }
.lc-blog-hero__title {
	max-width: 880px;
	font-family: var(--lc-serif);
	font-weight: 400;
	font-size: 56px;
	line-height: 1.1;
	letter-spacing: -.01em;
	color: var(--lc-oscuro);
}
.lc-blog-hero { padding-bottom: calc(var(--lc-pad-y) / 4); }
.lc-blog-hero .lc-lead { max-width: 720px; }
.lc-article__hero { align-items: flex-start; text-align: left; }
.lc-blog__empty { font-size: 19px; opacity: .8; }

/* ---------- Paginación ---------- */
.lc-pager ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.lc-pager a, .lc-pager .active a, .lc-pager .disabled a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1.5px solid var(--lc-granate);
	border-radius: 22px;
	font-weight: 600;
	color: var(--lc-granate);
	transition: background-color .2s, color .2s;
}
.lc .lc-pager a:hover, .lc .lc-pager .active a { background: var(--lc-granate); color: var(--lc-blanco); }
.lc-pager .disabled { display: none; }

/* ---------- Artículo ---------- */
.lc-breadcrumb { font-size: 14px; line-height: normal; color: var(--lc-oscuro); }
.lc .lc-breadcrumb a { color: var(--lc-oscuro); }
.lc .lc-breadcrumb a:hover { color: var(--lc-rojo); }
.lc-article__meta { font-weight: 600; font-size: 13px; line-height: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--lc-coral); }
.lc-article__cover { padding: 0 var(--lc-gutter); background: var(--lc-fondo); }
.lc-article__cover img { display: block; width: 100%; max-height: 560px; object-fit: cover; border-radius: 18px; }

.lc-article__content { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.lc-article__content > * { width: 100%; max-width: 880px; }
.lc-article__content > .lc-faq__link { width: auto; }
.lc-article__back { transform: scaleX(-1); }
.lc-faq__link:hover .lc-article__back { transform: scaleX(-1) translateX(4px); }
.lc-article__intro {
	padding-left: 24px;
	border-left: 3px solid var(--lc-rojo);
	font-family: var(--lc-serif);
	font-style: italic;
	font-size: 22px;
	line-height: 1.5;
}

/* Cuerpo HTML editado desde el CMS */
.lc-article__body { font-size: 18px; line-height: 1.7; }
.lc-article__body > * + * { margin-top: 20px; }
.lc-article__body h2 {
	margin: 48px 0 0;
	font-family: var(--lc-serif);
	font-weight: 400;
	font-size: 32px;
	line-height: 1.2;
	color: var(--lc-granate);
}
.lc-article__body h3 { margin: 32px 0 0; font-family: var(--lc-serif); font-weight: 600; font-size: 22px; line-height: 1.3; }
.lc-article__body h2 + *, .lc-article__body h3 + * { margin-top: 14px; }
.lc-article__body > :first-child { margin-top: 0; }
.lc-article__body p { opacity: .9; }
.lc-article__body strong { font-weight: 600; }
.lc-article__body ul, .lc-article__body ol { display: flex; flex-direction: column; gap: 10px; padding-left: 0; }
.lc-article__body ul li { position: relative; padding-left: 26px; }
.lc-article__body ul li::before {
	content: '';
	position: absolute;
	top: .7em;
	left: 4px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--lc-rojo);
}
.lc-article__body ol { padding-left: 22px; list-style: decimal; }
.lc .lc-article__body a { color: var(--lc-granate); text-decoration: underline; }
.lc-article__body img { height: auto; border-radius: 4px; }

/* ---------- Llamada a la compra ---------- */
.lc-blog-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px 64px; }
.lc-blog-cta__text { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 991px) {
	.lc-blog-hero__title { font-size: 36px; }
	.lc-article__content { gap: 32px; }
	.lc-article__intro { padding-left: 18px; font-size: 19px; }
	.lc-article__body { font-size: 17px; }
	.lc-article__body h2 { margin-top: 36px; font-size: 26px; }
	.lc-blog-cta { flex-direction: column; align-items: stretch; }
	.lc-blog-cta .lc-btn { width: 100%; }
}